From 498fbb298942933c2e9bcd1a3756c25bd0b46441 Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Wed, 15 Jul 2026 06:46:49 +0000
Subject: [PATCH] fix(components): respect prefers-reduced-motion in animations
 (f951529)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Syncs upstream nuxt/ui commit f951529 (#6723) — wrap looping animate-*
utilities in the motion-safe: variant and add motion-reduce: fallbacks so
animations honor the user's prefers-reduced-motion setting.

- chat-messages.ts: bounce indicator dots → motion-safe:
- chat-shimmer.ts: shimmer + rtl-shimmer → motion-safe:; base gains
  motion-reduce:bg-none motion-reduce:text-muted
- progress.ts: all 10 indicator animations (incl. fork-extra
  progressbar-loading / -vertical) → motion-safe:; base indicator gains
  motion-reduce:data-[state=indeterminate]:animate-pulse
- table.ts: all 5 loading thead animations (incl. fork-extra
  progressbar-loading) → motion-safe:; base loading thead gains
  motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse
- docs: reduced-motion ::tip added to chat-shimmer / progress / table
- Marquee N/A (b24ui has no Marquee component)

Snapshots regenerated (118 across 14 spec files — ChatTool/ChatReasoning
embed ChatShimmer, Toast embeds Progress). Suite: 5485 passed / 6 skipped.

Ledger: cursor → f951529; previous entry 17196ec reconciled to PR #278.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JS8ypVfQSFzYVZzkTHhURb
---
 ...95152949ac6762aa61610482892bd6551a21593.md | 45 +++++++++++++++++++
 .sync/nuxt-ui.json                            | 10 ++++-
 .../content/docs/2.components/chat-shimmer.md |  4 ++
 docs/content/docs/2.components/progress.md    |  4 ++
 docs/content/docs/2.components/table.md       |  4 ++
 src/theme/chat-messages.ts                    |  2 +-
 src/theme/chat-shimmer.ts                     |  7 +--
 src/theme/progress.ts                         | 22 ++++-----
 src/theme/table.ts                            | 13 +++---
 .../ChatMessages-vue.spec.ts.snap             |  2 +-
 .../__snapshots__/ChatMessages.spec.ts.snap   |  2 +-
 .../ChatReasoning-vue.spec.ts.snap            |  2 +-
 .../__snapshots__/ChatReasoning.spec.ts.snap  |  2 +-
 .../ChatShimmer-vue.spec.ts.snap              | 10 ++---
 .../__snapshots__/ChatShimmer.spec.ts.snap    | 10 ++---
 .../__snapshots__/ChatTool-vue.spec.ts.snap   |  2 +-
 .../__snapshots__/ChatTool.spec.ts.snap       |  2 +-
 .../__snapshots__/Progress-vue.spec.ts.snap   | 42 ++++++++---------
 .../__snapshots__/Progress.spec.ts.snap       | 42 ++++++++---------
 .../__snapshots__/Table-vue.spec.ts.snap      | 24 +++++-----
 .../__snapshots__/Table.spec.ts.snap          | 24 +++++-----
 .../__snapshots__/Toast-vue.spec.ts.snap      | 36 +++++++--------
 .../__snapshots__/Toast.spec.ts.snap          | 36 +++++++--------
 23 files changed, 206 insertions(+), 141 deletions(-)
 create mode 100644 .sync/log/f95152949ac6762aa61610482892bd6551a21593.md

diff --git a/.sync/log/f95152949ac6762aa61610482892bd6551a21593.md b/.sync/log/f95152949ac6762aa61610482892bd6551a21593.md
new file mode 100644
index 000000000..f5bb0867b
--- /dev/null
+++ b/.sync/log/f95152949ac6762aa61610482892bd6551a21593.md
@@ -0,0 +1,45 @@
+# Port: fix(components): respect `prefers-reduced-motion` in animations
+
+**Upstream:** `f95152949ac6762aa61610482892bd6551a21593` (nuxt/ui, #6723)
+**Decision:** port — theme + docs (adapted to b24ui fork variants)
+
+## Upstream change
+Wraps every looping `animate-*` utility in the `motion-safe:` variant and adds
+`motion-reduce:` fallbacks so animations honor the user's
+`prefers-reduced-motion` setting. Touches five theme files (ChatShimmer,
+ChatMessages, Progress, Table, Marquee) plus a `::tip` callout in each of their
+docs pages.
+
+## b24ui port
+- **`src/theme/chat-messages.ts`** — the three bounce indicator dots
+  (`[&>*:nth-child(n)]:animate-[bounce…]`) prefixed with `motion-safe:`.
+- **`src/theme/chat-shimmer.ts`** — `animate-[shimmer…]` and
+  `rtl:animate-[shimmer-rtl…]` prefixed with `motion-safe:`; base gains
+  `motion-reduce:bg-none motion-reduce:text-muted` (static muted text fallback).
+- **`src/theme/progress.ts`** — all 10 `compoundVariants` indicator animations
+  prefixed with `motion-safe:` (both the `data-[state=indeterminate]:animate-*`
+  and the `…:rtl:animate-*` halves), **including the fork-extra
+  `progressbar-loading` / `progressbar-loading-vertical` variants** that don't
+  exist upstream; base `indicator` slot gains
+  `motion-reduce:data-[state=indeterminate]:animate-pulse`.
+- **`src/theme/table.ts`** — all 5 loading `thead` `after:animate-*` (and
+  `rtl:after:animate-*`) compoundVariants prefixed with `motion-safe:`,
+  **including the fork-extra `progressbar-loading` variant**; base loading
+  `thead` slot gains `motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse`.
+- **Marquee — N/A.** b24ui has no Marquee component (`src/theme/marquee.ts`
+  absent), so the upstream Marquee theme/docs hunks were skipped.
+- **Docs** — added the upstream `::tip` callout to `chat-shimmer.md`,
+  `progress.md`, `table.md` (each explaining the reduced-motion fallback).
+  `marquee.md` skipped (no such page).
+
+## Tests
+Theme-class changes only — snapshots regenerated for the directly-edited
+components (ChatMessages, ChatShimmer, Progress, Table) **and the components
+that embed them**: ChatTool / ChatReasoning render ChatShimmer, and Toast
+renders a Progress bar. Total **118 snapshots updated** across 14 spec files
+(nuxt + vue variants for each of the 7 components). All diffs are pure
+`motion-safe:` / `motion-reduce:` class additions. Suite unchanged:
+5485 passed / 6 skipped.
+
+## Verify (CI=true)
+`dev:prepare` · `lint` · `typecheck` · `test` · `build` — all green.
diff --git a/.sync/nuxt-ui.json b/.sync/nuxt-ui.json
index b911ef793..6095aa9a9 100644
--- a/.sync/nuxt-ui.json
+++ b/.sync/nuxt-ui.json
@@ -2,7 +2,7 @@
   "upstream": "nuxt/ui",
   "branch": "v4",
   "sync_enabled": false,
-  "cursor": "17196ecc3057a18d540f8b9a77f857fbbe8969c0",
+  "cursor": "f95152949ac6762aa61610482892bd6551a21593",
   "_cursor_note": "cursor = last upstream commit ported into b24ui (oldest-first, manual cadence). sync_enabled stays false until Phase 2 (porter workflow #67 + CLAUDE_CODE_OAUTH_TOKEN) is wired and trusted. `processed` is maintained per port from now on (backfilled #68-#72 on 2026-06-09).",
   "stats": {
     "queue_depth": 0,
@@ -1067,10 +1067,16 @@
       "summary": "fix(BlogPost/ChangelogVersion): format date in UTC to prevent hydration mismatch — adds timeZone: 'UTC' to date formatter in BlogPost.vue + ChangelogVersion.vue. NOT APPLICABLE: b24ui has neither component (no blog/changelog files in src or docs). No-op."
     },
     "17196ecc3057a18d540f8b9a77f857fbbe8969c0": {
+      "pr": 278,
+      "b24ui_sha": "97e7e3def23c253127aee55fb1ea58095a0923b5",
+      "decision": "port",
+      "summary": "docs(select-menu/input-menu): use grouped items in items type example — restructure flat items into array-of-arrays (one sub-array per label group) in input-menu.md/select-menu.md + add ::note to all three (input-menu/listbox/select-menu). b24ui: grouped Fruits/Vegetables, preserved fork intra-Fruits separator inside sub-array; listbox already grouped so note-only. Docs-content only. Tests 5485."
+    },
+    "f95152949ac6762aa61610482892bd6551a21593": {
       "pr": null,
       "b24ui_sha": "pending-merge",
       "decision": "port",
-      "summary": "docs(select-menu/input-menu): use grouped items in items type example — restructure flat items into array-of-arrays (one sub-array per label group) in input-menu.md/select-menu.md + add ::note to all three (input-menu/listbox/select-menu). b24ui: grouped Fruits/Vegetables, preserved fork intra-Fruits separator inside sub-array; listbox already grouped so note-only. Docs-content only. Tests 5485."
+      "summary": "fix(components): respect prefers-reduced-motion in animations — wrap animate-* utilities in motion-safe: and add motion-reduce: fallbacks across ChatShimmer/ChatMessages/Progress/Table themes. b24ui: chat-messages.ts (3 bounce indicators → motion-safe:), chat-shimmer.ts (shimmer + rtl-shimmer → motion-safe:, base gets motion-reduce:bg-none motion-reduce:text-muted), progress.ts (10 indicator animations incl. fork-extra progressbar-loading/-vertical → motion-safe:, base indicator gets motion-reduce:data-[state=indeterminate]:animate-pulse), table.ts (5 loading thead animations incl. fork-extra progressbar-loading → motion-safe:, base loading thead gets motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse). Marquee N/A (b24ui has no Marquee). Docs +tip in chat-shimmer/progress/table. 118 snapshots regenerated across 14 spec files (also ChatTool/ChatReasoning embed ChatShimmer, Toast embeds Progress). Tests 5485."
     }
   }
 }
diff --git a/docs/content/docs/2.components/chat-shimmer.md b/docs/content/docs/2.components/chat-shimmer.md
index 6cc131faa..bb6fb17bf 100644
--- a/docs/content/docs/2.components/chat-shimmer.md
+++ b/docs/content/docs/2.components/chat-shimmer.md
@@ -22,6 +22,10 @@ The ChatShimmer component renders an element with an animated shimmer gradient o
 This component is automatically used by the [`ChatTool`](/docs/components/chat-tool/) and [`ChatReasoning`](/docs/components/chat-reasoning/) components when streaming.
 ::
 
+::tip
+The animation is automatically disabled when the user prefers reduced motion, the text is displayed as static muted text instead.
+::
+
 ### Text
 
 Use the `text` prop to set the shimmer text.
diff --git a/docs/content/docs/2.components/progress.md b/docs/content/docs/2.components/progress.md
index d179cf865..f8d0a3cd9 100644
--- a/docs/content/docs/2.components/progress.md
+++ b/docs/content/docs/2.components/progress.md
@@ -92,6 +92,10 @@ props:
 ---
 ::
 
+::tip
+The animation is automatically disabled when the user prefers reduced motion, the indeterminate bar is displayed as a full width pulse instead.
+::
+
 ### Animation
 
 Use the `animation` prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to `loading`.
diff --git a/docs/content/docs/2.components/table.md b/docs/content/docs/2.components/table.md
index 008eb365d..71fa8b5bc 100644
--- a/docs/content/docs/2.components/table.md
+++ b/docs/content/docs/2.components/table.md
@@ -194,6 +194,10 @@ props:
 ---
 ::
 
+::tip
+The loading animation is automatically disabled when the user prefers reduced motion, the bar is displayed as a full width pulse instead.
+::
+
 ### Sticky
 
 Use the `sticky` prop to make the header or footer sticky.
diff --git a/src/theme/chat-messages.ts b/src/theme/chat-messages.ts
index 2b34ef9b7..a2eaecbfc 100644
--- a/src/theme/chat-messages.ts
+++ b/src/theme/chat-messages.ts
@@ -11,7 +11,7 @@
 export default {
   slots: {
     root: 'w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)',
-    indicator: 'h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]',
+    indicator: 'h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) motion-safe:[&>*:nth-child(1)]:animate-[bounce_1s_infinite] motion-safe:[&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] motion-safe:[&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]',
     viewport: 'absolute inset-x-0 top-[78%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
     autoScroll: 'rounded-full absolute right-1/2 translate-x-1/2 bottom-0'
   },
diff --git a/src/theme/chat-shimmer.ts b/src/theme/chat-shimmer.ts
index 9b16c4406..69d7e9e99 100644
--- a/src/theme/chat-shimmer.ts
+++ b/src/theme/chat-shimmer.ts
@@ -11,8 +11,9 @@ export default {
     'bg-no-repeat',
     'bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto]',
     'bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))]',
-    'animate-[shimmer_var(--duration)_linear_infinite]',
-    'rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite]',
-    'will-change-[background-position]'
+    'motion-safe:animate-[shimmer_var(--duration)_linear_infinite]',
+    'motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite]',
+    'will-change-[background-position]',
+    'motion-reduce:bg-none motion-reduce:text-muted'
   ].join(' ')
 }
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index d91a381a9..02e8a73ae 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -18,7 +18,7 @@ export default {
     indicator: [
       'rounded-(--ui-border-radius-pill)',
       'size-full',
-      'transition-transform duration-200 ease-out',
+      'transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse',
       'bg-(--b24ui-background)'
     ].join(' '),
     status: [
@@ -175,70 +175,70 @@ export default {
       orientation: 'horizontal',
       animation: 'carousel',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'vertical',
       animation: 'carousel',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'horizontal',
       animation: 'carousel-inverse',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'vertical',
       animation: 'carousel-inverse',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'horizontal',
       animation: 'swing',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'vertical',
       animation: 'swing',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'horizontal',
       animation: 'elastic',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'vertical',
       animation: 'elastic',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
       }
     },
     {
       orientation: 'horizontal',
       animation: 'loading',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]'
       }
     },
     {
       orientation: 'vertical',
       animation: 'loading',
       class: {
-        indicator: 'data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]'
+        indicator: 'motion-safe:data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]'
       }
     }
     // endregion ////
diff --git a/src/theme/table.ts b/src/theme/table.ts
index d169ec3e9..93e7a88cb 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -128,7 +128,8 @@ export default {
           'after:absolute',
           'after:z-1',
           'after:h-px',
-          'after:bg-(--b24ui-background)'
+          'after:bg-(--b24ui-background)',
+          'motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse'
         ].join(' ')
       }
     },
@@ -153,35 +154,35 @@ export default {
       loading: true,
       loadingAnimation: 'loading',
       class: {
-        thead: 'after:animate-[progressbar-loading_2s_infinite]'
+        thead: 'motion-safe:after:animate-[progressbar-loading_2s_infinite]'
       }
     },
     {
       loading: true,
       loadingAnimation: 'carousel',
       class: {
-        thead: 'after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]'
+        thead: 'motion-safe:after:animate-[carousel_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]'
       }
     },
     {
       loading: true,
       loadingAnimation: 'carousel-inverse',
       class: {
-        thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
+        thead: 'motion-safe:after:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
       }
     },
     {
       loading: true,
       loadingAnimation: 'swing',
       class: {
-        thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
+        thead: 'motion-safe:after:animate-[swing_2s_ease-in-out_infinite]'
       }
     },
     {
       loading: true,
       loadingAnimation: 'elastic',
       class: {
-        thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
+        thead: 'motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]'
       }
     }
     // endregion ////
diff --git a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
index 2fe576783..98a3d3c83 100644
--- a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
@@ -341,7 +341,7 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
       <!--v-if-->
       <div data-slot="body" class="min-w-0">
         <div data-slot="content" class="relative text-pretty wrap-break-word *:first:mt-0 *:last:mb-0 bg-[var(--b24ui-background,var(--b24ui-default-background))] border-[color:var(--b24ui-border-color,var(--b24ui-default-border-color))] border-[length:var(--b24ui-border-width,var(--b24ui-default-border-width))] text-[color:var(--b24ui-color,var(--b24ui-default-color))] [--b24ui-default-background:#dff6c1] [--b24ui-default-border-color:#dff6c1] [--b24ui-default-border-width:var(--ui-design-tinted-success-stroke-weight)] [--b24ui-default-color:var(--ui-color-palette-black-base)] dark:[--b24ui-default-background:var(--ui-color-design-tinted-success-bg)] dark:[--b24ui-default-border-color:var(--ui-color-design-tinted-success-stroke)] dark:[--b24ui-default-color:var(--ui-color-design-tinted-success-content)] space-y-4 px-3 py-2 rounded-md min-h-10.5">
-          <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
+          <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) motion-safe:[&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] motion-safe:[&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] motion-safe:[&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
         </div>
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/ChatMessages.spec.ts.snap b/test/components/__snapshots__/ChatMessages.spec.ts.snap
index 2fe576783..98a3d3c83 100644
--- a/test/components/__snapshots__/ChatMessages.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages.spec.ts.snap
@@ -341,7 +341,7 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
       <!--v-if-->
       <div data-slot="body" class="min-w-0">
         <div data-slot="content" class="relative text-pretty wrap-break-word *:first:mt-0 *:last:mb-0 bg-[var(--b24ui-background,var(--b24ui-default-background))] border-[color:var(--b24ui-border-color,var(--b24ui-default-border-color))] border-[length:var(--b24ui-border-width,var(--b24ui-default-border-width))] text-[color:var(--b24ui-color,var(--b24ui-default-color))] [--b24ui-default-background:#dff6c1] [--b24ui-default-border-color:#dff6c1] [--b24ui-default-border-width:var(--ui-design-tinted-success-stroke-weight)] [--b24ui-default-color:var(--ui-color-palette-black-base)] dark:[--b24ui-default-background:var(--ui-color-design-tinted-success-bg)] dark:[--b24ui-default-border-color:var(--ui-color-design-tinted-success-stroke)] dark:[--b24ui-default-color:var(--ui-color-design-tinted-success-content)] space-y-4 px-3 py-2 rounded-md min-h-10.5">
-          <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) [&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] [&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
+          <div data-slot="indicator" class="h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-design-tinted-na-content-icon) motion-safe:[&amp;>*:nth-child(1)]:animate-[bounce_1s_infinite] motion-safe:[&amp;>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] motion-safe:[&amp;>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]"><span></span><span></span><span></span></div>
         </div>
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap b/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
index 66ffd3da9..78ec006f5 100644
--- a/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
@@ -94,7 +94,7 @@ exports[`ChatReasoning > renders with icon correctly 1`] = `
 
 exports[`ChatReasoning > renders with streaming correctly 1`] = `
 "<div data-state="open" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-slot="trigger" class="group w-full min-w-0 flex items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
-    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking…</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200">
+    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted truncate">Thinking…</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200">
       <path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path>
     </svg>
   </button>
diff --git a/test/components/__snapshots__/ChatReasoning.spec.ts.snap b/test/components/__snapshots__/ChatReasoning.spec.ts.snap
index f1f39126f..f1ede5ee2 100644
--- a/test/components/__snapshots__/ChatReasoning.spec.ts.snap
+++ b/test/components/__snapshots__/ChatReasoning.spec.ts.snap
@@ -94,7 +94,7 @@ exports[`ChatReasoning > renders with icon correctly 1`] = `
 
 exports[`ChatReasoning > renders with streaming correctly 1`] = `
 "<div data-state="open" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-slot="trigger" class="group w-full min-w-0 flex items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
-    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking…</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200">
+    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted truncate">Thinking…</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200">
       <path fill="currentColor" fill-rule="evenodd" d="M5.505 9.505a.7.7 0 0 1 .99 0L12 15.01l5.505-5.505a.7.7 0 0 1 .99.99l-6 6a.7.7 0 0 1-.99 0l-6-6a.7.7 0 0 1 0-.99" clip-rule="evenodd"></path>
     </svg>
   </button>
diff --git a/test/components/__snapshots__/ChatShimmer-vue.spec.ts.snap b/test/components/__snapshots__/ChatShimmer-vue.spec.ts.snap
index afc206a0a..17abf2e72 100644
--- a/test/components/__snapshots__/ChatShimmer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatShimmer-vue.spec.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ChatShimmer > renders with b24ui correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] font-bold">Loading...</span>"`;
+exports[`ChatShimmer > renders with b24ui correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted font-bold">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with class correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] font-bold">Loading...</span>"`;
+exports[`ChatShimmer > renders with class correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted font-bold">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with duration correctly 1`] = `"<span style="--spread: 20px; --duration: 3s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with duration correctly 1`] = `"<span style="--spread: 20px; --duration: 3s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with spread correctly 1`] = `"<span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with spread correctly 1`] = `"<span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with text correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with text correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
diff --git a/test/components/__snapshots__/ChatShimmer.spec.ts.snap b/test/components/__snapshots__/ChatShimmer.spec.ts.snap
index afc206a0a..17abf2e72 100644
--- a/test/components/__snapshots__/ChatShimmer.spec.ts.snap
+++ b/test/components/__snapshots__/ChatShimmer.spec.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ChatShimmer > renders with b24ui correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] font-bold">Loading...</span>"`;
+exports[`ChatShimmer > renders with b24ui correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted font-bold">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with class correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] font-bold">Loading...</span>"`;
+exports[`ChatShimmer > renders with class correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted font-bold">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with duration correctly 1`] = `"<span style="--spread: 20px; --duration: 3s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with duration correctly 1`] = `"<span style="--spread: 20px; --duration: 3s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with spread correctly 1`] = `"<span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with spread correctly 1`] = `"<span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
 
-exports[`ChatShimmer > renders with text correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Loading...</span>"`;
+exports[`ChatShimmer > renders with text correctly 1`] = `"<span style="--spread: 20px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Loading...</span>"`;
diff --git a/test/components/__snapshots__/ChatTool-vue.spec.ts.snap b/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
index cde2eef8c..47f66db98 100644
--- a/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatTool-vue.spec.ts.snap
@@ -215,7 +215,7 @@ exports[`ChatTool > renders with loading correctly 1`] = `
 
 exports[`ChatTool > renders with streaming correctly 1`] = `
 "<div data-state="closed" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="false" data-state="closed" disabled="" data-slot="trigger" class="group w-full min-w-0 flex items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
-    <!--v-if--><span data-slot="label" class="truncate"><span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Searching components</span>
+    <!--v-if--><span data-slot="label" class="truncate"><span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Searching components</span>
     <!--v-if--></span>
     <!--v-if-->
   </button>
diff --git a/test/components/__snapshots__/ChatTool.spec.ts.snap b/test/components/__snapshots__/ChatTool.spec.ts.snap
index 8919c0000..c86f20f84 100644
--- a/test/components/__snapshots__/ChatTool.spec.ts.snap
+++ b/test/components/__snapshots__/ChatTool.spec.ts.snap
@@ -215,7 +215,7 @@ exports[`ChatTool > renders with loading correctly 1`] = `
 
 exports[`ChatTool > renders with streaming correctly 1`] = `
 "<div data-state="closed" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="false" data-state="closed" disabled="" data-slot="trigger" class="group w-full min-w-0 flex items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors">
-    <!--v-if--><span data-slot="label" class="truncate"><span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]">Searching components</span>
+    <!--v-if--><span data-slot="label" class="truncate"><span style="--spread: 40px; --duration: 2s;" data-slot="base" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted">Searching components</span>
     <!--v-if--></span>
     <!--v-if-->
   </button>
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index 0ffbda06a..ba72f9644 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -24,7 +24,7 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -34,7 +34,7 @@ exports[`Progress > renders with animation loading correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with b24ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) w-full h-2 bg-red-200" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -84,7 +84,7 @@ exports[`Progress > renders with color success correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled-success w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -94,7 +94,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-legend text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -110,7 +110,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-legend text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -126,7 +126,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 style-filled h-full flex flex-row-reverse">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[12px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[2px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index 0ffbda06a..ba72f9644 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -24,7 +24,7 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -34,7 +34,7 @@ exports[`Progress > renders with animation loading correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with b24ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) w-full h-2 bg-red-200" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -84,7 +84,7 @@ exports[`Progress > renders with color success correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled-success w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -94,7 +94,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-legend text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -110,7 +110,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-legend text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -126,7 +126,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 style-filled h-full flex flex-row-reverse">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[12px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[2px]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <div data-slot="status" class="flex justify-end text-legend transition-[width] duration-200 text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 style-filled w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 8aa1de950..290bfc6a1 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -926,7 +926,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[carousel_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -981,7 +981,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1036,7 +1036,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[elastic_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1091,7 +1091,7 @@ exports[`Table > renders with loading animation loading correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1146,7 +1146,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[swing_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[swing_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1201,7 +1201,7 @@ exports[`Table > renders with loading color air-primary correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1256,7 +1256,7 @@ exports[`Table > renders with loading color air-primary-alert correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled-alert">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1311,7 +1311,7 @@ exports[`Table > renders with loading color air-primary-copilot correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-copilot">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1366,7 +1366,7 @@ exports[`Table > renders with loading color air-primary-success correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-success">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1421,7 +1421,7 @@ exports[`Table > renders with loading color air-primary-warning correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-warning">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1476,7 +1476,7 @@ exports[`Table > renders with loading correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1531,7 +1531,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index a6a2487d7..bd1edfb71 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -926,7 +926,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[carousel_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -981,7 +981,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[carousel-inverse_2s_ease-in-out_infinite] motion-safe:rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1036,7 +1036,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[elastic_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[elastic_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1091,7 +1091,7 @@ exports[`Table > renders with loading animation loading correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1146,7 +1146,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[swing_2s_ease-in-out_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[swing_2s_ease-in-out_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1201,7 +1201,7 @@ exports[`Table > renders with loading color air-primary correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1256,7 +1256,7 @@ exports[`Table > renders with loading color air-primary-alert correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled-alert">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1311,7 +1311,7 @@ exports[`Table > renders with loading color air-primary-copilot correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-copilot">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1366,7 +1366,7 @@ exports[`Table > renders with loading color air-primary-success correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-success">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1421,7 +1421,7 @@ exports[`Table > renders with loading color air-primary-warning correctly 1`] =
 "<div data-slot="root" class="relative overflow-auto style-filled-warning">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1476,7 +1476,7 @@ exports[`Table > renders with loading correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">Amount</th>
@@ -1531,7 +1531,7 @@ exports[`Table > renders with loading slot correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto style-filled">
   <table data-slot="base" class="min-w-full font-[family-name:var(--ui-font-family-primary)] table-fixed border-separate border-spacing-0">
     <!--v-if-->
-    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) after:animate-[progressbar-loading_2s_infinite]">
+    <thead data-slot="thead" class="relative [&amp;>tr]:[&amp;>th]:h-[45px] after:absolute after:z-1 after:h-px after:bg-(--b24ui-background) motion-reduce:after:inset-x-0 motion-reduce:after:animate-pulse motion-safe:after:animate-[progressbar-loading_2s_infinite]">
       <tr data-slot="tr" class="data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-2 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-label whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&amp;:has([role=checkbox])]:pe-0 align-middle border-b border-(--ui-color-divider-default)">
           <div data-slot="root" class="relative flex items-start style-filled flex-row">
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 095b02dc3..5c86b4d6a 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -36,7 +36,7 @@ exports[`Toast > renders with actions correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -78,7 +78,7 @@ exports[`Toast > renders with as correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -119,7 +119,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -161,7 +161,7 @@ exports[`Toast > renders with b24ui correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -203,7 +203,7 @@ exports[`Toast > renders with class correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -237,7 +237,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -279,7 +279,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -321,7 +321,7 @@ exports[`Toast > renders with color success correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled-success w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -363,7 +363,7 @@ exports[`Toast > renders with description correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -405,7 +405,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -448,7 +448,7 @@ exports[`Toast > renders with icon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -488,7 +488,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -535,7 +535,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -584,7 +584,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -626,7 +626,7 @@ exports[`Toast > renders with title correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -668,7 +668,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -710,7 +710,7 @@ exports[`Toast > renders with type correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -745,7 +745,7 @@ exports[`Toast > renders without close correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 095b02dc3..5c86b4d6a 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -36,7 +36,7 @@ exports[`Toast > renders with actions correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -78,7 +78,7 @@ exports[`Toast > renders with as correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -119,7 +119,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -161,7 +161,7 @@ exports[`Toast > renders with b24ui correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -203,7 +203,7 @@ exports[`Toast > renders with class correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -237,7 +237,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -279,7 +279,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -321,7 +321,7 @@ exports[`Toast > renders with color success correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled-success w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -363,7 +363,7 @@ exports[`Toast > renders with description correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -405,7 +405,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -448,7 +448,7 @@ exports[`Toast > renders with icon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -488,7 +488,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -535,7 +535,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -584,7 +584,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -626,7 +626,7 @@ exports[`Toast > renders with title correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -668,7 +668,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -710,7 +710,7 @@ exports[`Toast > renders with type correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -745,7 +745,7 @@ exports[`Toast > renders without close correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 style-filled w-full flex flex-col absolute inset-x-0 bottom-0">
         <!--v-if-->
         <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" data-slot="base" class="relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) w-full h-[4px]" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background) data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-(--b24ui-background) motion-safe:data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>