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

feat(Toast): progress bar with Progress component

Browse Source
This commit is contained in:
Benjamin Canac
2025-07-07 17:10:05 +02:00
parent 1d052ec565
commit ec569e427b
6 changed files with 312 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
test/components/__snapshots__/Toast-vue.spec.ts.snap
View File

@@ -25,7 +25,13 @@ exports[`Toast > renders with actions correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -56,7 +62,13 @@ exports[`Toast > renders with as correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</section>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -86,7 +98,13 @@ exports[`Toast > renders with avatar correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -117,7 +135,13 @@ exports[`Toast > renders with class correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -145,7 +169,13 @@ exports[`Toast > renders with close slot correctly 1`] = `
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if-->Close slot
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -176,7 +206,13 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -207,7 +243,13 @@ exports[`Toast > renders with color neutral correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out 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(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -238,7 +280,13 @@ exports[`Toast > renders with description correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -269,7 +317,13 @@ exports[`Toast > renders with description slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -299,7 +353,13 @@ exports[`Toast > renders with icon correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -328,7 +388,13 @@ exports[`Toast > renders with leading slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -359,7 +425,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -392,7 +464,13 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -423,7 +501,13 @@ exports[`Toast > renders with title correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -454,7 +538,13 @@ exports[`Toast > renders with title slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -485,7 +575,13 @@ exports[`Toast > renders with type correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -516,7 +612,13 @@ exports[`Toast > renders with ui correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -542,7 +644,13 @@ exports[`Toast > renders without close correctly 1`] = `
<!--v-if-->
</div>
<!--v-if-->
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>

144
test/components/__snapshots__/Toast.spec.ts.snap
View File

@@ -25,7 +25,13 @@ exports[`Toast > renders with actions correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -56,7 +62,13 @@ exports[`Toast > renders with as correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</section>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -86,7 +98,13 @@ exports[`Toast > renders with avatar correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -117,7 +135,13 @@ exports[`Toast > renders with class correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -145,7 +169,13 @@ exports[`Toast > renders with close slot correctly 1`] = `
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if-->Close slot
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -176,7 +206,13 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -207,7 +243,13 @@ exports[`Toast > renders with color neutral correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out 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(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -238,7 +280,13 @@ exports[`Toast > renders with description correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -269,7 +317,13 @@ exports[`Toast > renders with description slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -299,7 +353,13 @@ exports[`Toast > renders with icon correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -328,7 +388,13 @@ exports[`Toast > renders with leading slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -359,7 +425,13 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -392,7 +464,13 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -423,7 +501,13 @@ exports[`Toast > renders with title correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -454,7 +538,13 @@ exports[`Toast > renders with title slot correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -485,7 +575,13 @@ exports[`Toast > renders with type correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -516,7 +612,13 @@ exports[`Toast > renders with ui correctly 1`] = `
<!--v-if-->
</button>
</div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>
@@ -542,7 +644,13 @@ exports[`Toast > renders without close correctly 1`] = `
<!--v-if-->
</div>
<!--v-if-->
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></div>
<div class="gap-2 w-full flex flex-col absolute inset-x-0 bottom-0">
<!--v-if-->
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" aria-label="100%" role="progressbar" data-state="complete" data-value="100" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
<div data-state="complete" data-value="100" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-0%);"></div>
</div>
<!--v-if-->
</div>
</li>
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
</div>