From 61cb268f2d17dd6b5348e282f25f68aea6508032 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Fri, 17 Jul 2026 21:33:40 +0200
Subject: [PATCH 1/4] feat(Progress): add circular progress variant

Also adds thickness prop to control circle stroke width
---
 docs/content/docs/2.components/progress.md    |  15 ++
 .../nuxt/app/pages/components/progress.vue    |  27 ++-
 src/runtime/components/Progress.vue           |  72 +++++--
 src/runtime/keyframes.css                     |  60 ++++++
 src/theme/progress.ts                         | 177 ++++++++++++++++--
 test/components/Progress.spec.ts              |   2 +
 .../__snapshots__/Progress-vue.spec.ts.snap   | 123 +++++++-----
 .../__snapshots__/Progress.spec.ts.snap       | 123 +++++++-----
 .../__snapshots__/Toast-vue.spec.ts.snap      |  72 +++----
 .../__snapshots__/Toast.spec.ts.snap          |  72 +++----
 10 files changed, 541 insertions(+), 202 deletions(-)

diff --git a/docs/content/docs/2.components/progress.md b/docs/content/docs/2.components/progress.md
index f0d88221b7..1246f5425c 100644
--- a/docs/content/docs/2.components/progress.md
+++ b/docs/content/docs/2.components/progress.md
@@ -71,6 +71,21 @@ props:
 ---
 ::
 
+### Variant
+
+Use the `variant` prop to change the style of the progress. May be `linear` (default) or `circular`
+
+::component-code
+---
+external:
+  - modelValue
+  - variant
+props:
+  modelValue: 50
+  variant: 'linear'
+---
+::
+
 ### Indeterminate
 
 When no `v-model` is set or the value is `null`, the Progress becomes _indeterminate_. The progress bar is animated as a `carousel`, but you can change it using the [`animation`](#animation) prop.
diff --git a/playgrounds/nuxt/app/pages/components/progress.vue b/playgrounds/nuxt/app/pages/components/progress.vue
index 50a4e52c1c..4aeaf6bae7 100644
--- a/playgrounds/nuxt/app/pages/components/progress.vue
+++ b/playgrounds/nuxt/app/pages/components/progress.vue
@@ -6,6 +6,7 @@ const colors = Object.keys(theme.variants.color)
 const sizes = Object.keys(theme.variants.size)
 const animations = Object.keys(theme.variants.animation)
 const orientations = Object.keys(theme.variants.orientation)
+const variants = Object.keys(theme.variants.variant)
 
 const attrs = reactive({
   color: [theme.defaultVariants.color],
@@ -14,6 +15,7 @@ const attrs = reactive({
 })
 
 const orientation = ref('horizontal' as keyof typeof theme.variants.orientation)
+const variant = ref('linear' as keyof typeof theme.variants.variant)
 
 const value1 = ref(0)
 const value2 = ref(0)
@@ -46,22 +48,39 @@ onMounted(() => {
     <USelect v-model="attrs.size" :items="sizes" multiple />
     <USelect v-model="attrs.animation" :items="animations" multiple />
     <USelect v-model="orientation" :items="orientations" />
+    <USelect v-model="variant" :items="variants" />
   </Navbar>
 
   <Matrix
     v-slot="props"
     :attrs="attrs"
-    :container-props="{ 'data-orientation': orientation }"
-    container-class="gap-4 data-[orientation=horizontal]:w-48 data-[orientation=vertical]:h-48 data-[orientation=vertical]:flex-row"
+    :container-props="{ 'data-orientation': orientation, 'data-variant': variant }"
+    container-class="gap-4 data-[orientation=horizontal]:data-[variant=linear]:w-48 data-[orientation=vertical]:data-[variant=linear]:h-48 data-[orientation=vertical]:flex-row"
   >
-    <UProgress :orientation="orientation" v-bind="props" />
-    <UProgress v-model="value2" :max="max" status :orientation="orientation" v-bind="props" />
+    <UProgress :orientation="orientation" :variant="variant" v-bind="props" inverted />
+    <UProgress
+      v-model="value2"
+      :max="max"
+      status
+      :orientation="orientation"
+      :variant="variant"
+      v-bind="props"
+    />
     <UProgress
       v-model="value2"
       :max="max"
       status
       inverted
       :orientation="orientation"
+      :variant="variant"
+      v-bind="props"
+    />
+    <UProgress
+      v-model="value2"
+      :max="max"
+      :thickness="5"
+      :orientation="orientation"
+      :variant="variant"
       v-bind="props"
     />
   </Matrix>
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 5180665048..3e3808dc6d 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -38,6 +38,12 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
    * @defaultValue 'carousel'
    */
   animation?: Progress['variants']['animation']
+  /**
+   * The progress bar variant
+   * @defaultValue 'linear'
+   */
+  variant?: Progress['variants']['variant']
+  thickness?: 'auto' | number
   class?: any
   ui?: Progress['slots']
 }
@@ -45,6 +51,7 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
 export interface ProgressEmits extends ProgressRootEmits {}
 
 export type ProgressSlots = {
+  default?(props: { value?: number, max?: number, percent?: number }): VNode[]
   status?(props: { percent?: number }): VNode[]
 } & {
   [key: string]: (props: { step: number }) => VNode[]
@@ -65,7 +72,9 @@ import { tv } from '../utils/tv'
 const _props = withDefaults(defineProps<ProgressProps>(), {
   inverted: false,
   modelValue: null,
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  variant: 'linear',
+  thickness: 'auto'
 })
 const emits = defineEmits<ProgressEmits>()
 const slots = defineSlots<ProgressSlots>()
@@ -109,24 +118,44 @@ const indicatorStyle = computed(() => {
     return
   }
 
-  if (props.orientation === 'vertical') {
-    return {
-      transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
-    }
-  } else {
-    if (dir.value === 'rtl') {
+  if (props.variant === 'linear') {
+    if (props.orientation === 'vertical') {
       return {
-        transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
+        transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
       }
     } else {
-      return {
-        transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+      if (dir.value === 'rtl') {
+        return {
+          transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
+        }
+      } else {
+        return {
+          transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+        }
       }
     }
+  } else {
+    const strokeDasharray = `${percent.value ?? 25}, 100`
+
+    return {
+      'stroke-dasharray': strokeDasharray
+    }
+  }
+})
+
+const thicknessStyle = computed(() => {
+  if (props.variant === 'linear') return
+
+  if (props.thickness === 'auto') return
+
+  return {
+    '--ui-progress-thickness': `${props.thickness}px`
   }
 })
 
 const statusStyle = computed(() => {
+  if (props.variant === 'circular') return undefined
+
   const value = `${Math.max(percent.value ?? 0, 0)}%`
   return props.orientation === 'vertical' ? { height: value } : { width: value }
 })
@@ -167,20 +196,35 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.progress || {})
   size: props.size,
   color: props.color,
   orientation: props.orientation,
-  inverted: props.inverted
+  inverted: props.inverted,
+  variant: props.variant
 }))
 </script>
 
 <template>
   <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (props.status || !!slots.status)" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+    <div v-if="!isIndeterminate && (props.status || !!slots.status) && props.variant === 'linear'" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
-    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" :style="['transform: translateZ(0)', thicknessStyle]">
+      <template v-if="props.variant === 'circular'">
+        <svg viewBox="0 0 100 100">
+          <circle cx="50" cy="50" data-slot="track" :class="ui.track({ class: props.ui?.track })" />
+          <ProgressIndicator as-child>
+            <circle cx="50" cy="50" pathLength="100" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+          </ProgressIndicator>
+        </svg>
+        <div v-if="!isIndeterminate && (props.status || !!slots.status)" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+          <slot name="status" :percent="percent">
+            {{ percent }}%
+          </slot>
+        </div>
+      </template>
+
+      <ProgressIndicator v-else-if="props.variant === 'linear'" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
     <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })">
diff --git a/src/runtime/keyframes.css b/src/runtime/keyframes.css
index cecad8d8e3..aa03c52d99 100644
--- a/src/runtime/keyframes.css
+++ b/src/runtime/keyframes.css
@@ -565,6 +565,66 @@
   }
 }
 
+@keyframes circular-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes circular-rotate-ccw {
+  from {
+    transform: scaleX(-1) rotate(0deg);
+  }
+  to {
+    transform: scaleX(-1) rotate(360deg);
+  }
+}
+
+@keyframes circular-swing {
+  0%,
+  100% {
+    transform: rotate(360deg);
+  }
+
+  50% {
+    transform: rotate(-45deg);
+  }
+}
+
+@keyframes circular-elastic {
+  0% {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: -12.4;
+  }
+
+  100% {
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: -100;
+  }
+}
+
+@keyframes circular-elastic-inverse {
+  0% {
+    stroke-dasharray: 1, 0;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: 12.4;
+  }
+
+  100% {
+    stroke-dasharray: 75, 100;
+    stroke-dashoffset: 100;
+  }
+}
+
 @keyframes marquee {
   from {
     transform: translate3d(0, 0, 0);
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index 6bed050e44..5aec202c47 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -3,9 +3,10 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'gap-2',
-    base: 'relative overflow-hidden rounded-full bg-accented',
-    indicator: 'rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse',
-    status: 'flex text-dimmed transition-[width] duration-200',
+    base: 'relative',
+    track: 'fill-none stroke-(--ui-bg-accented)',
+    indicator: 'rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse',
+    status: 'flex text-dimmed ',
     steps: 'grid items-end',
     step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
   },
@@ -18,11 +19,11 @@ export default (options: Required<ModuleOptions>) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-        indicator: `bg-${color}`,
+        indicator: `bg-${color} stroke-${color}`,
         steps: `text-${color}`
       }])),
       neutral: {
-        indicator: 'bg-inverted',
+        indicator: 'bg-inverted stroke-inverted',
         steps: 'text-inverted'
       }
     },
@@ -72,135 +73,285 @@ export default (options: Required<ModuleOptions>) => ({
     },
     orientation: {
       horizontal: {
-        root: 'w-full flex flex-col',
+        root: 'w-full flex',
         base: 'w-full',
         status: 'flex-row items-center justify-end min-w-fit'
       },
       vertical: {
-        root: 'h-full flex flex-row-reverse',
+        root: 'h-full flex',
         base: 'h-full',
         status: 'flex-col justify-end min-h-fit'
       }
     },
     inverted: {
-      true: {
-        status: 'self-end'
+      true: ''
+    },
+    variant: {
+      linear: {
+        base: 'overflow-hidden rounded-full bg-accented',
+        status: 'transition-[width] duration-200'
+      },
+      circular: {
+        track: 'fill-none [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)]',
+        indicator: 'fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value=\'0\']:opacity-0',
+        status: 'absolute inset-0 items-center justify-center'
       }
     }
   },
   compoundVariants: [{
+    variant: 'circular',
+    orientation: 'vertical',
+    class: {
+      root: 'flex-col items-center'
+    }
+  }, {
+    variant: 'circular',
+    orientation: 'horizontal',
+    class: {
+      root: 'flex-row items-center'
+    }
+  }, {
+    variant: 'circular',
+    inverted: true,
+    class: {
+      indicator: 'not-data-[state=indeterminate]:-scale-y-100'
+    }
+  }, {
+    variant: 'circular',
+    size: '2xs',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:2px]'
+  }, {
+    variant: 'circular',
+    size: 'xs',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:4px]'
+  }, {
+    variant: 'circular',
+    size: 'sm',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:6px]'
+  }, {
+    variant: 'circular',
+    size: 'md',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:8px]'
+  }, {
+    variant: 'circular',
+    size: 'lg',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:10px]'
+  }, {
+    variant: 'circular',
+    size: 'xl',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:12px]'
+  }, {
+    variant: 'circular',
+    size: '2xl',
+    thickness: 'auto',
+    class: '[--ui-progress-thickness:14px]'
+  }, {
+    variant: 'circular',
+    size: '2xs',
+    class: 'size-12'
+  }, {
+    variant: 'circular',
+    size: 'xs',
+    class: 'size-14'
+  }, {
+    variant: 'circular',
+    size: 'sm',
+    class: 'size-18'
+  }, {
+    variant: 'circular',
+    size: 'md',
+    class: 'size-22'
+  }, {
+    variant: 'circular',
+    size: 'lg',
+    class: 'size-28'
+  }, {
+    variant: 'circular',
+    size: 'xl',
+    class: 'size-30'
+  }, {
+    variant: 'circular',
+    size: '2xl',
+    class: 'size-34'
+  }, {
+    variant: 'circular',
+    animation: 'carousel',
+    class: {
+      indicator: 'data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none'
+    }
+  }, {
+    variant: 'circular',
+    animation: 'carousel-inverse',
+    class: {
+      indicator: 'data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate-ccw_1.4s_linear_infinite] data-[state=indeterminate]:transition-none'
+    }
+  }, {
+    variant: 'circular',
+    animation: 'swing',
+    class: {
+      indicator: 'data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:transition-none data-[state=indeterminate]:animate-[circular-swing_1.4s_ease-in-out_infinite]'
+    }
+  }, {
+    variant: 'circular',
+    animation: 'elastic',
+    class: {
+      indicator: 'data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-[circular-rotate_2s_linear_infinite,circular-elastic_1.4s_ease-in-out_infinite]'
+    }
+  }, {
+    variant: 'linear',
     inverted: true,
     orientation: 'horizontal',
     class: {
       step: 'text-start',
-      status: 'flex-row-reverse'
+      status: 'self-end flex-row-reverse'
     }
   }, {
+    variant: 'linear',
     inverted: true,
     orientation: 'vertical',
     class: {
       steps: 'items-start',
-      status: 'flex-col-reverse'
+      status: 'self-end flex-col-reverse'
+    }
+  }, {
+    variant: 'linear',
+    orientation: 'horizontal',
+    class: {
+      root: 'flex-col'
+    }
+  }, {
+    variant: 'linear',
+    orientation: 'vertical',
+    class: {
+      root: 'flex-row-reverse'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: '2xs',
     class: 'h-px'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'xs',
     class: 'h-0.5'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'sm',
     class: 'h-1'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'md',
     class: 'h-2'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'lg',
     class: 'h-3'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: 'xl',
     class: 'h-4'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     size: '2xl',
     class: 'h-5'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: '2xs',
     class: 'w-px'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'xs',
     class: 'w-0.5'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'sm',
     class: 'w-1'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'md',
     class: 'w-2'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'lg',
     class: 'w-3'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: 'xl',
     class: 'w-4'
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     size: '2xl',
     class: 'w-5'
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'carousel',
     class: {
       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]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'carousel',
     class: {
       indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'carousel-inverse',
     class: {
       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]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'carousel-inverse',
     class: {
       indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'swing',
     class: {
       indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'swing',
     class: {
       indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'horizontal',
     animation: 'elastic',
     class: {
       indicator: 'motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
     }
   }, {
+    variant: 'linear',
     orientation: 'vertical',
     animation: 'elastic',
     class: {
@@ -210,6 +361,8 @@ export default (options: Required<ModuleOptions>) => ({
   defaultVariants: {
     animation: 'carousel',
     color: 'primary',
-    size: 'md'
+    size: 'md',
+    variant: 'linear',
+    thickness: 'auto'
   }
 })
diff --git a/test/components/Progress.spec.ts b/test/components/Progress.spec.ts
index 4d14796640..6d58e7d580 100644
--- a/test/components/Progress.spec.ts
+++ b/test/components/Progress.spec.ts
@@ -9,6 +9,7 @@ describe('Progress', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const orientations = Object.keys(theme.variants.orientation) as any
   const animations = Object.keys(theme.variants.animation) as any
+  const variants = Object.keys(theme.variants.variant) as any
   const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
 
   renderEach(Progress, [
@@ -21,6 +22,7 @@ describe('Progress', () => {
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { orientation } }]),
     ...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
     ['with color neutral', { props: { color: 'neutral', modelValue: 50 } }],
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'w-48' } }],
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index ce72cd1652..80a1fa2e36 100644
--- a/test/components/__snapshots__/Progress-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Progress-vue.spec.ts.snap
@@ -3,8 +3,8 @@
 exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -13,8 +13,8 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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>
   <!--v-if-->
 </div>"
@@ -23,8 +23,8 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -33,8 +33,8 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 exports[`Progress > renders with animation swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -43,8 +43,8 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -53,8 +53,8 @@ exports[`Progress > renders with as correctly 1`] = `
 exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -63,8 +63,8 @@ exports[`Progress > renders with class correctly 1`] = `
 exports[`Progress > renders with color neutral correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted 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]" style="transform: translateX(-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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -72,9 +72,9 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -88,9 +88,9 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -105,8 +105,8 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -115,8 +115,8 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -125,8 +125,8 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 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-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative h-full overflow-hidden rounded-full bg-accented w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -135,8 +135,8 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -145,8 +145,8 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -155,8 +155,8 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -165,8 +165,8 @@ exports[`Progress > renders with size lg correctly 1`] = `
 exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -175,8 +175,8 @@ exports[`Progress > renders with size md correctly 1`] = `
 exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -185,8 +185,8 @@ exports[`Progress > renders with size sm correctly 1`] = `
 exports[`Progress > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -195,8 +195,8 @@ exports[`Progress > renders with size xl correctly 1`] = `
 exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -204,9 +204,9 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -214,9 +214,9 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -225,8 +225,8 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -235,8 +235,31 @@ exports[`Progress > renders with status slot correctly 1`] = `
 exports[`Progress > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full h-2 bg-default" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant circular correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-row items-center">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative [--ui-progress-thickness:8px] size-22" style="transform: translateZ(0);"><svg viewBox="0 0 100 100">
+      <circle cx="50" cy="50" data-slot="track" class="stroke-(--ui-bg-accented) fill-none [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)]"></circle>
+      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
+    </svg>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant linear correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_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 ce72cd1652..80a1fa2e36 100644
--- a/test/components/__snapshots__/Progress.spec.ts.snap
+++ b/test/components/__snapshots__/Progress.spec.ts.snap
@@ -3,8 +3,8 @@
 exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -13,8 +13,8 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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>
   <!--v-if-->
 </div>"
@@ -23,8 +23,8 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -33,8 +33,8 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 exports[`Progress > renders with animation swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -43,8 +43,8 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -53,8 +53,8 @@ exports[`Progress > renders with as correctly 1`] = `
 exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -63,8 +63,8 @@ exports[`Progress > renders with class correctly 1`] = `
 exports[`Progress > renders with color neutral correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted 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]" style="transform: translateX(-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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -72,9 +72,9 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -88,9 +88,9 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -105,8 +105,8 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -115,8 +115,8 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -125,8 +125,8 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 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-full bg-accented h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative h-full overflow-hidden rounded-full bg-accented w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -135,8 +135,8 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -145,8 +145,8 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -155,8 +155,8 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -165,8 +165,8 @@ exports[`Progress > renders with size lg correctly 1`] = `
 exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -175,8 +175,8 @@ exports[`Progress > renders with size md correctly 1`] = `
 exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -185,8 +185,8 @@ exports[`Progress > renders with size sm correctly 1`] = `
 exports[`Progress > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -195,8 +195,8 @@ exports[`Progress > renders with size xl correctly 1`] = `
 exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -204,9 +204,9 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm flex-row items-center justify-end min-w-fit" 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -214,9 +214,9 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
-  <div data-slot="status" class="flex text-dimmed transition-[width] duration-200 text-sm items-center justify-end min-w-fit 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(50%);"></div>
+  <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -225,8 +225,8 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full bg-accented w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -235,8 +235,31 @@ exports[`Progress > renders with status slot correctly 1`] = `
 exports[`Progress > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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-full w-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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 aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative w-full overflow-hidden rounded-full h-2 bg-default" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant circular correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-row items-center">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative [--ui-progress-thickness:8px] size-22" style="transform: translateZ(0);"><svg viewBox="0 0 100 100">
+      <circle cx="50" cy="50" data-slot="track" class="stroke-(--ui-bg-accented) fill-none [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)]"></circle>
+      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
+    </svg>
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Progress > renders with variant linear correctly 1`] = `
+"<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 275701f8af..7006125893 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -27,8 +27,8 @@ exports[`Toast > renders with actions correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -64,8 +64,8 @@ exports[`Toast > renders with as correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -100,8 +100,8 @@ exports[`Toast > renders with avatar correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -137,8 +137,8 @@ exports[`Toast > renders with class correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -171,8 +171,8 @@ exports[`Toast > renders with close slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -208,8 +208,8 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -245,8 +245,8 @@ exports[`Toast > renders with color neutral correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -282,8 +282,8 @@ exports[`Toast > renders with description correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -319,8 +319,8 @@ exports[`Toast > renders with description slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -355,8 +355,8 @@ exports[`Toast > renders with icon correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -390,8 +390,8 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -427,8 +427,8 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
         </button></div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -466,8 +466,8 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -503,8 +503,8 @@ exports[`Toast > renders with title correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -540,8 +540,8 @@ exports[`Toast > renders with title slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -577,8 +577,8 @@ exports[`Toast > renders with type correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -614,8 +614,8 @@ exports[`Toast > renders with ui correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -646,8 +646,8 @@ exports[`Toast > renders without close correctly 1`] = `
       <!--v-if-->
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_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 50e81f0587..ef879f35c3 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -27,8 +27,8 @@ exports[`Toast > renders with actions correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -64,8 +64,8 @@ exports[`Toast > renders with as correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -100,8 +100,8 @@ exports[`Toast > renders with avatar correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -137,8 +137,8 @@ exports[`Toast > renders with class correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -171,8 +171,8 @@ exports[`Toast > renders with close slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -208,8 +208,8 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -245,8 +245,8 @@ exports[`Toast > renders with color neutral correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -282,8 +282,8 @@ exports[`Toast > renders with description correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -319,8 +319,8 @@ exports[`Toast > renders with description slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -355,8 +355,8 @@ exports[`Toast > renders with icon correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -390,8 +390,8 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -427,8 +427,8 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
         </button></div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -466,8 +466,8 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -503,8 +503,8 @@ exports[`Toast > renders with title correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -540,8 +540,8 @@ exports[`Toast > renders with title slot correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -577,8 +577,8 @@ exports[`Toast > renders with type correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -614,8 +614,8 @@ exports[`Toast > renders with ui correctly 1`] = `
       </div>
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -646,8 +646,8 @@ exports[`Toast > renders without close correctly 1`] = `
       <!--v-if-->
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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-full bg-accented w-full h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary 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]" style="transform: translateX(-0%);"></div>
+        <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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>

From 1cfc55428cdddf272f3a84613a9339baa8ded959 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Fri, 17 Jul 2026 21:56:11 +0200
Subject: [PATCH 2/4] refactor(Progress): remove unused defaults slots for now

---
 src/runtime/components/Progress.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 3e3808dc6d..8e75ac0e06 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -51,7 +51,6 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
 export interface ProgressEmits extends ProgressRootEmits {}
 
 export type ProgressSlots = {
-  default?(props: { value?: number, max?: number, percent?: number }): VNode[]
   status?(props: { percent?: number }): VNode[]
 } & {
   [key: string]: (props: { step: number }) => VNode[]

From 679ef6f97c76c273f4b6acd09941c300ddc1b320 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Fri, 17 Jul 2026 21:56:26 +0200
Subject: [PATCH 3/4] docs(Progress): wip

---
 docs/content/docs/2.components/progress.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/content/docs/2.components/progress.md b/docs/content/docs/2.components/progress.md
index 1246f5425c..64a675bd35 100644
--- a/docs/content/docs/2.components/progress.md
+++ b/docs/content/docs/2.components/progress.md
@@ -73,7 +73,8 @@ props:
 
 ### Variant
 
-Use the `variant` prop to change the style of the progress. May be `linear` (default) or `circular`
+WIP
+Use the `variant` prop to change the style of the progress. May be `linear` (default) or `circular`.
 
 ::component-code
 ---
@@ -82,7 +83,7 @@ external:
   - variant
 props:
   modelValue: 50
-  variant: 'linear'
+  variant: 'circular'
 ---
 ::
 

From 187e8e73ed816690456f23a36ef92f4901aa6652 Mon Sep 17 00:00:00 2001
From: "Ghislain \"Ao\" Linais" <ghis.linais@gmail.com>
Date: Sat, 18 Jul 2026 17:17:32 +0200
Subject: [PATCH 4/4] test: update snaps

---
 .../__snapshots__/Progress-vue.spec.ts.snap   | 50 +++++++++----------
 .../__snapshots__/Progress.spec.ts.snap       | 50 +++++++++----------
 .../__snapshots__/Toast-vue.spec.ts.snap      | 36 ++++++-------
 .../__snapshots__/Toast.spec.ts.snap          | 36 ++++++-------
 4 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index 80a1fa2e36..a1c3aa504e 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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-->
 </section>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted stroke-inverted 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -90,7 +90,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -106,7 +106,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -116,7 +116,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -126,7 +126,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 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 h-full overflow-hidden rounded-full bg-accented w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -226,7 +226,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -236,7 +236,7 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -247,7 +247,7 @@ exports[`Progress > renders with variant circular correctly 1`] = `
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative [--ui-progress-thickness:8px] size-22" style="transform: translateZ(0);"><svg viewBox="0 0 100 100">
       <circle cx="50" cy="50" data-slot="track" class="stroke-(--ui-bg-accented) fill-none [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)]"></circle>
-      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
+      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
     </svg>
     <!--v-if-->
   </div>
@@ -259,7 +259,7 @@ exports[`Progress > renders with variant linear correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
diff --git a/test/components/__snapshots__/Progress.spec.ts.snap b/test/components/__snapshots__/Progress.spec.ts.snap
index 80a1fa2e36..a1c3aa504e 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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 swing correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary motion-safe:data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -44,7 +44,7 @@ exports[`Progress > renders with as correctly 1`] = `
 "<section data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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-->
 </section>"
@@ -54,7 +54,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -64,7 +64,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted stroke-inverted 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -74,7 +74,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -90,7 +90,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(50%);"></div>
   </div>
   <div data-slot="steps" class="grid items-end text-primary text-sm">
     <div data-slot="step" class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -106,7 +106,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -116,7 +116,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -126,7 +126,7 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="gap-2 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 h-full overflow-hidden rounded-full bg-accented w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -136,7 +136,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -146,7 +146,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -156,7 +156,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -166,7 +166,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -176,7 +176,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -186,7 +186,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -196,7 +196,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -206,7 +206,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm flex-row items-center justify-end min-w-fit transition-[width] duration-200" 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -216,7 +216,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 w-full flex flex-col">
   <div data-slot="status" class="flex text-dimmed text-sm items-center justify-end min-w-fit transition-[width] duration-200 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -226,7 +226,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -236,7 +236,7 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full h-2 bg-default" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
@@ -247,7 +247,7 @@ exports[`Progress > renders with variant circular correctly 1`] = `
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" data-slot="base" class="relative [--ui-progress-thickness:8px] size-22" style="transform: translateZ(0);"><svg viewBox="0 0 100 100">
       <circle cx="50" cy="50" data-slot="track" class="stroke-(--ui-bg-accented) fill-none [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)]"></circle>
-      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
+      <circle data-state="indeterminate" data-max="100" cx="50" cy="50" pathLength="100" class="rounded-full size-full ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary fill-none origin-center -rotate-90 [stroke-width:var(--ui-progress-thickness)] [r:calc(50px-var(--ui-progress-thickness)/2)] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0 data-[state=indeterminate]:transform-view data-[state=indeterminate]:origin-center data-[state=indeterminate]:[stroke-dasharray:75,100] data-[state=indeterminate]:animate-[circular-rotate_1.4s_linear_infinite] data-[state=indeterminate]:transition-none"></circle>
     </svg>
     <!--v-if-->
   </div>
@@ -259,7 +259,7 @@ exports[`Progress > renders with variant linear correctly 1`] = `
 "<div data-orientation="horizontal" data-slot="root" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary 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-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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>"
diff --git a/test/components/__snapshots__/Toast-vue.spec.ts.snap b/test/components/__snapshots__/Toast-vue.spec.ts.snap
index 7006125893..90c9181d61 100644
--- a/test/components/__snapshots__/Toast-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Toast-vue.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Toast > renders with actions correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -65,7 +65,7 @@ exports[`Toast > renders with as correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -101,7 +101,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -138,7 +138,7 @@ exports[`Toast > renders with class correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -172,7 +172,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -209,7 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -246,7 +246,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted stroke-inverted 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -283,7 +283,7 @@ exports[`Toast > renders with description correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -320,7 +320,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -356,7 +356,7 @@ exports[`Toast > renders with icon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -391,7 +391,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -428,7 +428,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -467,7 +467,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -504,7 +504,7 @@ exports[`Toast > renders with title correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -541,7 +541,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -578,7 +578,7 @@ exports[`Toast > renders with type correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -615,7 +615,7 @@ exports[`Toast > renders with ui correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -647,7 +647,7 @@ exports[`Toast > renders without close correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" 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 ef879f35c3..7f69f79b3a 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Toast > renders with actions correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -65,7 +65,7 @@ exports[`Toast > renders with as correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -101,7 +101,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -138,7 +138,7 @@ exports[`Toast > renders with class correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -172,7 +172,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -209,7 +209,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -246,7 +246,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-inverted stroke-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-inverted stroke-inverted 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -283,7 +283,7 @@ exports[`Toast > renders with description correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -320,7 +320,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -356,7 +356,7 @@ exports[`Toast > renders with icon correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -391,7 +391,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -428,7 +428,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -467,7 +467,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -504,7 +504,7 @@ exports[`Toast > renders with title correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -541,7 +541,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -578,7 +578,7 @@ exports[`Toast > renders with type correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -615,7 +615,7 @@ exports[`Toast > renders with ui correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>
@@ -647,7 +647,7 @@ exports[`Toast > renders without close correctly 1`] = `
       <div data-orientation="horizontal" data-slot="progress" class="gap-2 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 w-full overflow-hidden rounded-full bg-accented h-1" style="transform: translateZ(0);">
-          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] bg-primary stroke-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
+          <div data-state="complete" data-value="100" data-max="100" data-slot="indicator" class="rounded-full size-full transition-transform duration-200 ease-out [stroke-linecap:round] motion-reduce:data-[state=indeterminate]:animate-pulse bg-primary stroke-primary 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]" style="transform: translateX(-0%);"></div>
         </div>
         <!--v-if-->
       </div>