From 0baa3a06d449ab97093c451bd16215cf83c39447 Mon Sep 17 00:00:00 2001
From: Malik-Jouda <48517781+Malik-Jouda@users.noreply.github.com>
Date: Fri, 22 Nov 2024 00:07:59 +0200
Subject: [PATCH] fix(Progress): handle `horizontal` animation in RTL mode
 (#2723)

---
 src/runtime/components/Progress.vue           | 19 ++++++++-
 src/runtime/keyframes.css                     | 34 ++++++++++++++++
 src/theme/progress.ts                         |  4 +-
 .../__snapshots__/Progress-vue.spec.ts.snap   | 40 +++++++++----------
 .../__snapshots__/Progress.spec.ts.snap       | 40 +++++++++----------
 5 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index f344668e..338a9001 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -50,6 +50,7 @@ export type ProgressSlots = {
 import { computed } from 'vue'
 import { ProgressIndicator, ProgressRoot, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<ProgressProps>(), {
   inverted: false,
@@ -59,6 +60,8 @@ const props = withDefaults(defineProps<ProgressProps>(), {
 const emits = defineEmits<ProgressEmits>()
 defineSlots<ProgressSlots>()
 
+const { dir } = useLocale()
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'getValueLabel', 'modelValue'), emits)
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
@@ -93,8 +96,20 @@ const indicatorStyle = computed(() => {
     return
   }
 
-  return {
-    transform: `translate${props.orientation === 'vertical' ? 'Y' : 'X'}(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+  if (props.orientation === 'vertical') {
+    return {
+      transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+    }
+  } else {
+    if (dir.value === 'rtl') {
+      return {
+        transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
+      }
+    } else {
+      return {
+        transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+      }
+    }
   }
 })
 
diff --git a/src/runtime/keyframes.css b/src/runtime/keyframes.css
index 17c0104d..e721e7a9 100644
--- a/src/runtime/keyframes.css
+++ b/src/runtime/keyframes.css
@@ -362,6 +362,24 @@
   }
 }
 
+
+@keyframes carousel-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(100%)
+  }
+
+  100% {
+    transform: translateX(-200%)
+  }
+}
+
+
 @keyframes carousel-vertical {
 
   0%,
@@ -394,6 +412,22 @@
   }
 }
 
+@keyframes carousel-inverse-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(-200%)
+  }
+
+  100% {
+    transform: translateX(100%)
+  }
+}
+
 @keyframes carousel-inverse-vertical {
 
   0%,
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index f3166491..58baf4db 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -162,7 +162,7 @@ export default (options: Required<ModuleOptions>) => ({
     orientation: 'horizontal',
     animation: 'carousel',
     class: {
-      indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]'
+      indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
     }
   }, {
     orientation: 'vertical',
@@ -174,7 +174,7 @@ export default (options: Required<ModuleOptions>) => ({
     orientation: 'horizontal',
     animation: 'carousel-inverse',
     class: {
-      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]'
+      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
     }
   }, {
     orientation: 'vertical',
diff --git a/test/components/__snapshots__/Progress-vue.spec.ts.snap b/test/components/__snapshots__/Progress-vue.spec.ts.snap
index becda390..aef91a4d 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 class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -42,7 +42,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 
 exports[`Progress > renders with as correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <!--v-if--><span aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);"><div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div></span>
+  <!--v-if--><span aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);"><div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div></span>
   <!--v-if-->
 </div>"
 `;
@@ -51,7 +51,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -61,7 +61,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-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>"
@@ -71,7 +71,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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 class="grid items-end text-[var(--ui-primary)] text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -87,7 +87,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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 class="grid items-end text-[var(--ui-primary)] text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -103,7 +103,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -113,7 +113,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -133,7 +133,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -143,7 +143,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -153,7 +153,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -163,7 +163,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -173,7 +173,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -183,7 +183,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -193,7 +193,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -203,7 +203,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -213,7 +213,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -223,7 +223,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -233,7 +233,7 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-[var(--ui-bg)]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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 becda390..aef91a4d 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 class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -14,7 +14,7 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -42,7 +42,7 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 
 exports[`Progress > renders with as correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <!--v-if--><span aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);"><div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div></span>
+  <!--v-if--><span aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);"><div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div></span>
   <!--v-if-->
 </div>"
 `;
@@ -51,7 +51,7 @@ exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -61,7 +61,7 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-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>"
@@ -71,7 +71,7 @@ exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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 class="grid items-end text-[var(--ui-primary)] text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
@@ -87,7 +87,7 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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 class="grid items-end text-[var(--ui-primary)] text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
@@ -103,7 +103,7 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -113,7 +113,7 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -133,7 +133,7 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -143,7 +143,7 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -153,7 +153,7 @@ exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -163,7 +163,7 @@ exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -173,7 +173,7 @@ exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -183,7 +183,7 @@ exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -193,7 +193,7 @@ exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -203,7 +203,7 @@ exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -213,7 +213,7 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -223,7 +223,7 @@ exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"
@@ -233,7 +233,7 @@ exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
   <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-[var(--ui-bg)]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-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>"