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

19
src/runtime/components/Progress.vue
View File

@@ -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}%)`
}
}
}
})

34
src/runtime/keyframes.css
View File

@@ -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%,

4
src/theme/progress.ts
View File

@@ -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',

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