From b0e9922b702cf4d99c04f27dd9fdd95ea17d676c Mon Sep 17 00:00:00 2001
From: Sebastian Enns <sebastian.enns@mni.thm.de>
Date: Thu, 1 Oct 2026 01:06:16 +0200
Subject: [PATCH 1/3] fix(playground): polish responsive header

---
 playground/src/app/app.html | 30 ++++++++++++++++++++++++++++++
 playground/src/app/app.ts   |  8 ++++++--
 playground/src/styles.css   | 17 +++++++++++++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/playground/src/app/app.html b/playground/src/app/app.html
index 401503d..1dfd189 100644
--- a/playground/src/app/app.html
+++ b/playground/src/app/app.html
@@ -40,6 +40,36 @@
               <svg lucideMenu class="size-4" aria-hidden="true"></svg>
             </button>
           </div>
+          <a
+            suiButton
+            suiNavbarAction
+            href="https://github.com/RAMEN-Suite/sushi-angular"
+            target="_blank"
+            rel="noreferrer"
+            size="sm"
+            shape="square"
+            severity="neutral"
+            variant="text"
+            class="hidden lg:inline-flex"
+            aria-label="View Sushi Kit on GitHub"
+          >
+            <svg lucideGitFork class="size-4" aria-hidden="true"></svg>
+          </a>
+          <a
+            suiButton
+            suiNavbarAction
+            href="https://www.npmjs.com/package/@sushi-kit/angular"
+            target="_blank"
+            rel="noreferrer"
+            size="sm"
+            shape="square"
+            severity="neutral"
+            variant="text"
+            class="hidden lg:inline-flex"
+            aria-label="View Sushi Kit on npm"
+          >
+            <svg lucidePackage class="size-4" aria-hidden="true"></svg>
+          </a>
           <button
             suiButton
             suiNavbarAction
diff --git a/playground/src/app/app.ts b/playground/src/app/app.ts
index 463d02d..692205a 100644
--- a/playground/src/app/app.ts
+++ b/playground/src/app/app.ts
@@ -15,8 +15,9 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
 import {
-  LucideHouse,
+  LucideGitFork,
   LucideGitPullRequest,
+  LucideHouse,
   LucideListChecks,
   LucideMenu,
   LucideMessageCircle,
@@ -24,6 +25,7 @@ import {
   LucideMousePointerClick,
   LucideNavigation,
   LucidePanelsTopLeft,
+  LucidePackage,
   LucideRows3,
   LucideSun,
   LucideTableProperties,
@@ -60,8 +62,9 @@ type PlaygroundTheme = 'sushi' | 'sushi-dark';
     DrawerClose,
     DrawerContent,
     DrawerTrigger,
-    LucideHouse,
+    LucideGitFork,
     LucideGitPullRequest,
+    LucideHouse,
     LucideListChecks,
     LucideMenu,
     LucideMessageCircle,
@@ -69,6 +72,7 @@ type PlaygroundTheme = 'sushi' | 'sushi-dark';
     LucideMousePointerClick,
     LucideNavigation,
     LucidePanelsTopLeft,
+    LucidePackage,
     LucideRows3,
     LucideSun,
     LucideTableProperties,
diff --git a/playground/src/styles.css b/playground/src/styles.css
index 077f3d5..3777590 100644
--- a/playground/src/styles.css
+++ b/playground/src/styles.css
@@ -17,7 +17,16 @@
 }
 
 .pg-documentation-navbar .sui-navbar {
-  padding-inline: 0;
+  padding-inline: 1rem;
+}
+
+@media (width < 40rem) {
+  .pg-documentation-navbar .sui-navbar > sui-navbar-menu {
+    position: absolute;
+    left: 50%;
+    margin-inline-start: 0;
+    transform: translateX(-50%);
+  }
 }
 
 .pg-page {
@@ -125,7 +134,11 @@ pg-example-code {
   border-radius: 0;
 }
 
-@media (min-width: 40rem) {
+@media (width >= 40rem) {
+  .pg-documentation-navbar .sui-navbar {
+    padding-inline: 0;
+  }
+
   .pg-page {
     padding: 3.5rem 2rem 6rem;
   }

From c1f4194adcd4b2c9f7a75a67e5388157c9cbf41b Mon Sep 17 00:00:00 2001
From: Sebastian Enns <sebastian.enns@mni.thm.de>
Date: Thu, 1 Oct 2026 01:19:30 +0200
Subject: [PATCH 2/3] fix(sushi): preserve custom sidebar group metadata

---
 playground/src/app/app.html                   | 36 +--------
 playground/src/app/app.navigation.ts          | 75 ++++++++++++-------
 playground/src/app/app.ts                     | 32 +-------
 .../app/generated/api-reference.generated.ts  | 15 ++--
 .../sidebar-group-template.directive.ts       | 15 ++--
 sushi/src/lib/sidebar/sidebar.interfaces.ts   |  6 +-
 .../sidebar/testing/sidebar.component.spec.ts | 21 +++++-
 7 files changed, 86 insertions(+), 114 deletions(-)

diff --git a/playground/src/app/app.html b/playground/src/app/app.html
index 1dfd189..a0a574c 100644
--- a/playground/src/app/app.html
+++ b/playground/src/app/app.html
@@ -126,41 +126,7 @@
     </div>
 
     <ng-template [suiSidebarGroup]="sidebar" let-group>
-      @switch (group.label) {
-        @case ('General') {
-          <svg lucideHouse class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Contribute') {
-          <svg lucideGitPullRequest class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Inputs') {
-          <svg lucideTextCursorInput class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Selection') {
-          <svg lucideListChecks class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Form Structure') {
-          <svg lucideRows3 class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Actions') {
-          <svg lucideMousePointerClick class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Navigation') {
-          <svg lucideNavigation class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Feedback') {
-          <svg lucideMessageCircle class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Data Display') {
-          <svg lucideTableProperties class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Layout') {
-          <svg lucidePanelsTopLeft class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Utilities') {
-          <svg lucideWrench class="size-3.5" aria-hidden="true"></svg>
-        }
-      }
+      <svg [lucideIcon]="group.icon" class="size-3.5" aria-hidden="true"></svg>
       <span>{{ group.heading ?? group.label }}</span>
     </ng-template>
   </sui-sidebar>
diff --git a/playground/src/app/app.navigation.ts b/playground/src/app/app.navigation.ts
index 7104a2e..a0e0f35 100644
--- a/playground/src/app/app.navigation.ts
+++ b/playground/src/app/app.navigation.ts
@@ -1,3 +1,18 @@
+import {
+  LucideGitPullRequest,
+  LucideHouse,
+  LucideLayers,
+  LucideListChecks,
+  LucideMessageCircle,
+  LucideMousePointerClick,
+  LucideNavigation,
+  LucidePanelsTopLeft,
+  LucideRows3,
+  LucideTableProperties,
+  LucideTextCursorInput,
+  LucideWrench,
+} from '@lucide/angular';
+import type { LucideIcon } from '@lucide/angular';
 import type { NavbarItem, SidebarGroup } from '@sushi-kit/angular';
 
 export interface NavigationItem {
@@ -5,15 +20,17 @@ export interface NavigationItem {
   readonly path: string;
 }
 
-export interface NavigationGroup {
+interface NavigationGroup {
   readonly dividerBefore?: boolean;
+  readonly icon: LucideIcon;
   readonly label: string;
   readonly items: readonly NavigationItem[];
 }
 
-export const navigation: readonly NavigationGroup[] = [
+const navigation: readonly NavigationGroup[] = [
   {
     dividerBefore: true,
+    icon: LucideTextCursorInput,
     label: 'Inputs',
     items: [
       {
@@ -51,6 +68,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideListChecks,
     label: 'Selection',
     items: [
       {
@@ -96,6 +114,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideRows3,
     label: 'Form Structure',
     items: [
       {
@@ -121,6 +140,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideMousePointerClick,
     label: 'Actions',
     items: [
       {
@@ -134,6 +154,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideNavigation,
     label: 'Navigation',
     items: [
       {
@@ -163,6 +184,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideLayers,
     label: 'Overlays',
     items: [
       {
@@ -184,6 +206,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideMessageCircle,
     label: 'Feedback',
     items: [
       {
@@ -217,6 +240,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideTableProperties,
     label: 'Data Display',
     items: [
       {
@@ -254,6 +278,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucidePanelsTopLeft,
     label: 'Layout',
     items: [
       {
@@ -271,6 +296,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideWrench,
     label: 'Utilities',
     items: [
       {
@@ -297,18 +323,20 @@ export const apiNavigation: readonly NavigationItem[] = navigation
   .flatMap((group: NavigationGroup): readonly NavigationItem[] => group.items)
   .filter((item: NavigationItem): boolean => item.path !== '/icon');
 
-export type SidebarNavigationGroup = SidebarGroup<NavbarItem<string>>;
+export interface SidebarNavigationGroup extends SidebarGroup<NavbarItem<string>> {
+  readonly icon: LucideIcon;
+}
 
-export const overviewNavigation: readonly NavbarItem<string>[] = [{ label: 'Overview', value: '/', routerLink: '/' }];
+const overviewNavigation: readonly NavbarItem<string>[] = [{ label: 'Overview', value: '/', routerLink: '/' }];
 
-export const generalNavigation: readonly NavbarItem<string>[] = [
+const generalNavigation: readonly NavbarItem<string>[] = [
   ...overviewNavigation,
   { label: 'Getting started', value: '/getting-started', routerLink: '/getting-started' },
   { label: 'Styling & themes', value: '/styling-and-themes', routerLink: '/styling-and-themes' },
   { label: 'Theme tokens', value: '/theme-tokens', routerLink: '/theme-tokens' },
 ];
 
-export const contributorNavigation: readonly NavbarItem<string>[] = [
+const contributorNavigation: readonly NavbarItem<string>[] = [
   { label: 'Contribution guide', value: '/contribute', routerLink: '/contribute' },
   { label: 'Component workflow', value: '/contribute/components', routerLink: '/contribute/components' },
   { label: 'Component styling', value: '/contribute/styles', routerLink: '/contribute/styles' },
@@ -317,30 +345,19 @@ export const contributorNavigation: readonly NavbarItem<string>[] = [
   { label: 'Responsible AI', value: '/contribute/ai', routerLink: '/contribute/ai' },
 ];
 
-export const navbarNavigation: readonly SidebarNavigationGroup[] = navigation.map(
-  (group: NavigationGroup): SidebarNavigationGroup => ({
-    dividerBefore: group.dividerBefore,
-    label: group.label,
-    items: group.items.map((item: NavigationItem): NavbarItem<string> => ({
-      label: item.label,
-      value: item.path,
-      routerLink: item.path,
-    })),
-  }),
-);
+const navbarNavigation: readonly SidebarNavigationGroup[] = navigation.map((group: NavigationGroup): SidebarNavigationGroup => ({
+  dividerBefore: group.dividerBefore,
+  icon: group.icon,
+  label: group.label,
+  items: group.items.map((item: NavigationItem): NavbarItem<string> => ({
+    label: item.label,
+    value: item.path,
+    routerLink: item.path,
+  })),
+}));
 
 export const sidebarNavigation: readonly SidebarNavigationGroup[] = [
-  { label: 'General', items: generalNavigation },
-  { label: 'Contribute', items: contributorNavigation },
+  { icon: LucideHouse, label: 'General', items: generalNavigation },
+  { icon: LucideGitPullRequest, label: 'Contribute', items: contributorNavigation },
   ...navbarNavigation,
 ];
-
-export const mobileNavigation: readonly NavbarItem<string>[] = [
-  ...generalNavigation,
-  { label: 'Contribute', value: 'group:Contribute', items: contributorNavigation },
-  ...navbarNavigation.map((group: SidebarNavigationGroup): NavbarItem<string> => ({
-    label: group.label,
-    value: `group:${group.label}`,
-    items: group.items,
-  })),
-];
diff --git a/playground/src/app/app.ts b/playground/src/app/app.ts
index 692205a..65835ed 100644
--- a/playground/src/app/app.ts
+++ b/playground/src/app/app.ts
@@ -14,25 +14,7 @@ import {
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
-import {
-  LucideGitFork,
-  LucideGitPullRequest,
-  LucideHouse,
-  LucideListChecks,
-  LucideMenu,
-  LucideMessageCircle,
-  LucideMoon,
-  LucideMousePointerClick,
-  LucideNavigation,
-  LucidePanelsTopLeft,
-  LucidePackage,
-  LucideRows3,
-  LucideSun,
-  LucideTableProperties,
-  LucideTextCursorInput,
-  LucideWrench,
-  LucideX,
-} from '@lucide/angular';
+import { LucideDynamicIcon, LucideGitFork, LucideMenu, LucideMoon, LucidePackage, LucideSun, LucideX } from '@lucide/angular';
 import {
   Button,
   Drawer,
@@ -62,22 +44,12 @@ type PlaygroundTheme = 'sushi' | 'sushi-dark';
     DrawerClose,
     DrawerContent,
     DrawerTrigger,
+    LucideDynamicIcon,
     LucideGitFork,
-    LucideGitPullRequest,
-    LucideHouse,
-    LucideListChecks,
     LucideMenu,
-    LucideMessageCircle,
     LucideMoon,
-    LucideMousePointerClick,
-    LucideNavigation,
-    LucidePanelsTopLeft,
     LucidePackage,
-    LucideRows3,
     LucideSun,
-    LucideTableProperties,
-    LucideTextCursorInput,
-    LucideWrench,
     LucideX,
     Navbar,
     NavbarAction,
diff --git a/playground/src/app/generated/api-reference.generated.ts b/playground/src/app/generated/api-reference.generated.ts
index 0199f2a..83631b3 100644
--- a/playground/src/app/generated/api-reference.generated.ts
+++ b/playground/src/app/generated/api-reference.generated.ts
@@ -11496,13 +11496,13 @@ export const apiReference: Readonly<{
     templates: [
       {
         name: 'suiSidebarGroup',
-        context: 'SidebarGroupContext<I>',
+        context: 'SidebarGroupContext<I, G>',
         description: 'Customizes visible Sidebar group headings without changing navigation items.',
         members: [
           {
             name: 'groups',
             kind: 'input',
-            type: 'readonly SidebarGroup<I>[] | undefined',
+            type: 'readonly G[] | undefined',
             defaultValue: 'undefined',
             description: 'Group source used to infer custom fields inside the template.',
           },
@@ -11680,18 +11680,18 @@ export const apiReference: Readonly<{
         kind: 'interface',
         source: 'library',
         declaration:
-          'interface SidebarGroupContext<I extends NavbarItem = NavbarItem> {\n  readonly $implicit: SidebarGroup<I>;\n  readonly group: SidebarGroup<I>;\n  readonly collapsed: boolean;\n}',
+          'interface SidebarGroupContext<I extends NavbarItem = NavbarItem, G extends SidebarGroup<I> = SidebarGroup<I>> {\n  readonly $implicit: G;\n  readonly group: G;\n  readonly collapsed: boolean;\n}',
         description: 'Context exposed to a custom Sidebar group-heading template.',
         members: [
           {
             name: '$implicit',
-            type: 'SidebarGroup<I>',
+            type: 'G',
             optional: false,
             description: 'Sidebar group available as the implicit template value.',
           },
           {
             name: 'group',
-            type: 'SidebarGroup<I>',
+            type: 'G',
             optional: false,
             description: 'Sidebar group available by its explicit context name.',
           },
@@ -11709,6 +11709,11 @@ export const apiReference: Readonly<{
             constraint: 'NavbarItem',
             defaultValue: 'NavbarItem',
           },
+          {
+            name: 'G',
+            constraint: 'SidebarGroup<I>',
+            defaultValue: 'SidebarGroup<I>',
+          },
         ],
       },
       {
diff --git a/sushi/src/lib/sidebar/sidebar-group-template.directive.ts b/sushi/src/lib/sidebar/sidebar-group-template.directive.ts
index 60b38e0..9110d07 100644
--- a/sushi/src/lib/sidebar/sidebar-group-template.directive.ts
+++ b/sushi/src/lib/sidebar/sidebar-group-template.directive.ts
@@ -4,17 +4,16 @@ import { SidebarGroup, SidebarGroupContext } from './sidebar.interfaces';
 
 /** Customizes visible Sidebar group headings without changing navigation items. */
 @Directive({ selector: 'ng-template[suiSidebarGroup]' })
-export class SidebarGroupTemplate<I extends NavbarItem = NavbarItem> {
+export class SidebarGroupTemplate<I extends NavbarItem = NavbarItem, G extends SidebarGroup<I> = SidebarGroup<I>> {
   /** Group source used to infer custom fields inside the template. */
-  public readonly groups: InputSignal<readonly SidebarGroup<I>[] | undefined> = input<readonly SidebarGroup<I>[] | undefined>(
-    undefined,
-    { alias: 'suiSidebarGroup' },
-  );
+  public readonly groups: InputSignal<readonly G[] | undefined> = input<readonly G[] | undefined>(undefined, {
+    alias: 'suiSidebarGroup',
+  });
 
-  public static ngTemplateContextGuard<I extends NavbarItem>(
-    _directive: SidebarGroupTemplate<I>,
+  public static ngTemplateContextGuard<I extends NavbarItem, G extends SidebarGroup<I>>(
+    _directive: SidebarGroupTemplate<I, G>,
     _context: unknown,
-  ): _context is SidebarGroupContext<I> {
+  ): _context is SidebarGroupContext<I, G> {
     return true;
   }
 }
diff --git a/sushi/src/lib/sidebar/sidebar.interfaces.ts b/sushi/src/lib/sidebar/sidebar.interfaces.ts
index 36b09b4..6db1630 100644
--- a/sushi/src/lib/sidebar/sidebar.interfaces.ts
+++ b/sushi/src/lib/sidebar/sidebar.interfaces.ts
@@ -24,11 +24,11 @@ export interface SidebarItemContext<I extends NavbarItem = NavbarItem> extends N
 }
 
 /** Context exposed to a custom Sidebar group-heading template. */
-export interface SidebarGroupContext<I extends NavbarItem = NavbarItem> {
+export interface SidebarGroupContext<I extends NavbarItem = NavbarItem, G extends SidebarGroup<I> = SidebarGroup<I>> {
   /** Sidebar group available as the implicit template value. */
-  readonly $implicit: SidebarGroup<I>;
+  readonly $implicit: G;
   /** Sidebar group available by its explicit context name. */
-  readonly group: SidebarGroup<I>;
+  readonly group: G;
   /** Whether the Sidebar currently renders as an icon rail. Use it to hide text or show a meaningful group icon. */
   readonly collapsed: boolean;
 }
diff --git a/sushi/src/lib/sidebar/testing/sidebar.component.spec.ts b/sushi/src/lib/sidebar/testing/sidebar.component.spec.ts
index bb82eed..7acad63 100644
--- a/sushi/src/lib/sidebar/testing/sidebar.component.spec.ts
+++ b/sushi/src/lib/sidebar/testing/sidebar.component.spec.ts
@@ -15,6 +15,10 @@ interface AppItem extends NavbarItem<Page> {
   readonly badge?: string;
 }
 
+interface AppGroup extends SidebarGroup<AppItem> {
+  readonly icon: string;
+}
+
 @Component({
   imports: [Sidebar, SidebarFooter, SidebarGroupTemplate, SidebarHeader, SidebarItemTemplate],
   template: `
@@ -28,7 +32,9 @@ interface AppItem extends NavbarItem<Page> {
     >
       <div suiSidebarHeader data-header>Orbit</div>
       <ng-template [suiSidebarGroup]="groups" let-group let-collapsed="collapsed"
-        ><span [attr.data-drawer-group]="group.label" [attr.data-collapsed]="collapsed">{{ group.label }}</span></ng-template
+        ><span [attr.data-drawer-group]="group.label" [attr.data-group-icon]="group.icon" [attr.data-collapsed]="collapsed">{{
+          group.label
+        }}</span></ng-template
       >
       <ng-template [suiSidebarItem]="groups" let-item let-group="group" let-level="level" let-collapsed="collapsed">
         <span
@@ -48,8 +54,9 @@ class SidebarHost {
   public readonly active: WritableSignal<Page> = signal<Page>('overview');
   public readonly collapsed: WritableSignal<boolean> = signal(false);
   public readonly selected: (Page | null)[] = [];
-  public readonly groups: readonly SidebarGroup<AppItem>[] = [
+  public readonly groups: readonly AppGroup[] = [
     {
+      icon: 'workspace',
       label: 'Workspace',
       items: [
         { label: 'Overview', value: 'overview' },
@@ -57,8 +64,13 @@ class SidebarHost {
         { label: 'Reports', value: 'reports', items: [{ label: 'Activity reports', value: 'activity-reports' }] },
       ],
     },
-    { label: 'Administration', dividerBefore: true, items: [{ label: 'Settings', value: 'settings', disabled: true }] },
-    { label: 'Empty', items: [] },
+    {
+      icon: 'administration',
+      label: 'Administration',
+      dividerBefore: true,
+      items: [{ label: 'Settings', value: 'settings', disabled: true }],
+    },
+    { icon: 'empty', label: 'Empty', items: [] },
   ];
 }
 
@@ -76,6 +88,7 @@ describe('Sidebar', (): void => {
     expect(query(fixture, '[data-footer]').textContent).toContain('Signed in');
     expect(queryAll(fixture, 'nav')).toHaveLength(2);
     expect(query(fixture, '[data-drawer-group="Workspace"]')).toBeDefined();
+    expect(query(fixture, '[data-drawer-group="Workspace"]').getAttribute('data-group-icon')).toBe('workspace');
     expect(query(fixture, '[data-drawer-group="Administration"]').closest('section')?.hasAttribute('data-divider-before')).toBe(
       true,
     );

From 73e2fc3ced488594ab6d04679a1bcb7b9d1e2e20 Mon Sep 17 00:00:00 2001
From: Sebastian Enns <sebastian.enns@mni.thm.de>
Date: Thu, 1 Oct 2026 01:48:55 +0200
Subject: [PATCH 3/3] fix(sushi): improve touch press feedback

---
 sushi/src/styles/features/button.styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/sushi/src/styles/features/button.styles.css b/sushi/src/styles/features/button.styles.css
index cf6bfae..e940a0b 100644
--- a/sushi/src/styles/features/button.styles.css
+++ b/sushi/src/styles/features/button.styles.css
@@ -15,8 +15,22 @@
   transition-duration: 0s;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  .sui-button.btn {
+    /** Hold and return timing for the pressed state on a touch device. */
+    transition-delay: var(--sui-button-touch-release-delay, 150ms);
+    transition-duration: var(--sui-button-touch-release-duration, 300ms);
+    transition-property: opacity, background-color, border-color, color, transform;
+  }
+
+  .sui-button.btn:not(.sui-button--disabled):active {
+    transition-delay: 0s;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sui-button.btn {
+    transition-delay: 0s;
     transition-duration: 0s;
   }