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

refactor(module)!: implement design system with CSS variables (#2298)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,8 @@
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_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 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel-inverse_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 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-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 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[swing_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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div></span>
<!--v-if-->
</div>"
`;
@@ -50,18 +50,18 @@ exports[`Progress > renders with as correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
`;
exports[`Progress > renders with color gray correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-gray-900 dark:bg-white data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-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-[--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-[--ui-bg-inverted] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
</div>
<!--v-if-->
</div>"
@@ -69,11 +69,11 @@ exports[`Progress > renders with color gray correctly 1`] = `
exports[`Progress > renders with max correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<div class="flex justify-end text-gray-400 dark:text-gray-500 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
<div class="flex justify-end text-[--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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
</div>
<div class="grid items-end text-primary-500 dark:text-primary-400 text-sm">
<div class="grid items-end text-[--ui-primary] text-sm">
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
@@ -85,11 +85,11 @@ exports[`Progress > renders with max correctly 1`] = `
exports[`Progress > renders with max inverted correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<div class="flex justify-end text-gray-400 dark:text-gray-500 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
<div class="flex justify-end text-[--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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
</div>
<div class="grid items-end text-primary-500 dark:text-primary-400 text-sm">
<div class="grid items-end text-[--ui-primary] text-sm">
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
@@ -102,8 +102,8 @@ exports[`Progress > renders with max inverted correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
</div>
<!--v-if-->
</div>"
@@ -112,8 +112,8 @@ exports[`Progress > renders with modelValue correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -122,8 +122,8 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
exports[`Progress > renders with orientation vertical correctly 1`] = `
"<div class="gap-2 h-full flex flex-row-reverse">
<!--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-gray-200 dark:bg-gray-700 h-full w-2" style="transform: translateZ(0);">
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
<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-[--ui-bg-accented] h-full w-2" style="transform: translateZ(0);">
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[--ui-primary] data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -132,8 +132,8 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -142,8 +142,8 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -152,8 +152,8 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -162,8 +162,8 @@ exports[`Progress > renders with size lg correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -172,8 +172,8 @@ exports[`Progress > renders with size md correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -182,8 +182,8 @@ exports[`Progress > renders with size sm correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -192,8 +192,8 @@ exports[`Progress > renders with size xl correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -201,9 +201,9 @@ exports[`Progress > renders with size xs correctly 1`] = `
exports[`Progress > renders with status correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<div class="flex justify-end text-gray-400 dark:text-gray-500 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
<div class="flex justify-end text-[--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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
</div>
<!--v-if-->
</div>"
@@ -211,9 +211,9 @@ exports[`Progress > renders with status correctly 1`] = `
exports[`Progress > renders with status inverted correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
<div class="flex justify-end text-gray-400 dark:text-gray-500 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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
<div class="flex justify-end text-[--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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
</div>
<!--v-if-->
</div>"
@@ -222,8 +222,8 @@ exports[`Progress > renders with status inverted correctly 1`] = `
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-gray-200 dark:bg-gray-700 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-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"
@@ -232,8 +232,8 @@ exports[`Progress > renders with status slot correctly 1`] = `
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-white dark:bg-gray-900" style="transform: translateZ(0);">
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
<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-[--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-[--ui-primary] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
</div>
<!--v-if-->
</div>"