arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Progress): handle horizontal animation in RTL mode (#2723)

Browse Source
This commit is contained in:
Malik-Jouda
2024-11-22 00:07:59 +02:00
committed by GitHub
parent b140dbfe63
commit 0baa3a06d4
5 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
test/components/__snapshots__/Progress-vue.spec.ts.snap
View File

@@ -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>"

40
test/components/__snapshots__/Progress.spec.ts.snap
View File

@@ -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>"