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

chore(Toast): improve progress bar

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-12 18:37:32 +02:00
parent 239e0a5ac1
commit cbd58ee707
2 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/theme/toast.ts
View File

@@ -7,13 +7,13 @@ export default (config: { colors: string[] }) => ({
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-0 border-b-2 z-[-1]',
close: 'p-1'
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
close: 'p-0'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, {
icon: `text-${color}-500 dark:text-${color}-400`,
progress: `border-${color}-500 dark:border-${color}-400`
progress: `bg-${color}-500 dark:bg-${color}-400`
}])),
multiline: {
true: {

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

@@ -13,15 +13,15 @@ exports[`Toast > renders with actions correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Action</span>
<!--v-if-->
</button><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
</button><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -39,12 +39,12 @@ exports[`Toast > renders with avatar correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -63,12 +63,12 @@ exports[`Toast > renders with class correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -87,12 +87,12 @@ exports[`Toast > renders with color correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-green-500 dark:border-green-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-green-500 dark:bg-green-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -109,19 +109,19 @@ exports[`Toast > renders with description actions correctly 1`] = `
<div class="w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
<div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
<div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
<!--v-if--><span class="">Action</span>
<!--v-if-->
</button></div>
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button>
</div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -140,12 +140,12 @@ exports[`Toast > renders with description correctly 1`] = `
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -164,12 +164,12 @@ exports[`Toast > renders with icon correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -189,13 +189,13 @@ exports[`Toast > renders with title & description correctly 1`] = `
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button>
</div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -214,12 +214,12 @@ exports[`Toast > renders with title correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -238,12 +238,12 @@ exports[`Toast > renders with type correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -262,12 +262,12 @@ exports[`Toast > renders with ui correctly 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
<!---->
<!--v-if-->
<!--v-if-->
</button></div>
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"
@@ -287,7 +287,7 @@ exports[`Toast > renders without close correctly 1`] = `
<!--v-if-->
</div>
<!--v-if-->
<div class="absolute inset-0 border-b-2 z-[-1] border-primary-500 dark:border-primary-400" style="width: 100%;"></div>
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
</li>
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
</div>"