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

Merge remote-tracking branch 'origin/v3' into refactor/toast-animations

Browse Source
This commit is contained in:
HugoRCD
2025-07-08 10:46:35 +02:00
parent faae76e796 da05c37ffe
commit dbf19913a2
7 changed files with 320 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/app/components/content/examples/input/InputPasswordToggleExample.vue
View File

@@ -24,3 +24,10 @@ const password = ref('')
</template>
</UInput>
</template>
<style>
/* Hide the password reveal button in Edge */
::-ms-reveal {
display: none;
}
</style>

16
docs/app/components/content/examples/toast/ToastProgressExample.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
const toast = useToast()
function showToast() {
toast.add({
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
icon: 'i-lucide-wifi',
progress: false
})
}
</script>
<template>
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
</template>

20
docs/content/3.components/toast.md
View File

@@ -107,7 +107,7 @@ name: 'toast-color-example'
### Close
Pass a `close` field to customize or hide the close button (with `false` value).
Pass a `close` field to customize or hide the close [Button](/components/button) (with `false` value).
::component-example
---
@@ -143,7 +143,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
### Actions
Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
Pass an `actions` field to add some [Button](/components/button) actions to the Toast.
::component-example
---
@@ -155,9 +155,23 @@ name: 'toast-actions-example'
---
::
### Progress :badge{label="Soon" class="align-text-top"}
Pass a `progress` field to customize or hide the [Progress](/components/progress) bar (with `false` value).
::tip
The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
::
::component-example
---
name: 'toast-progress-example'
---
::
### Orientation
Use the `orientation` prop to change the orientation of the Toast.
Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
::component-example
---

41
src/runtime/components/Toast.vue
View File

@@ -2,7 +2,7 @@
import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/toast'
import type { AvatarProps, ButtonProps } from '../types'
import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
import type { StringOrVNode, ComponentConfig } from '../types/utils'
type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>
@@ -29,18 +29,6 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
* @defaultValue 'vertical'
*/
orientation?: Toast['variants']['orientation']
/**
* Whether to show the progress bar.
* @defaultValue true
*/
progress?: boolean
/**
* Display a list of actions:
* - under the title and description when orientation is `vertical`
* - next to the close button when orientation is `horizontal`
* `{ size: 'xs' }`{lang="ts-type"}
*/
actions?: ButtonProps[]
/**
* Display a close button to dismiss the toast.
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
@@ -53,6 +41,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
* @IconifyIcon
*/
closeIcon?: string
/**
* Display a list of actions:
* - under the title and description when orientation is `vertical`
* - next to the close button when orientation is `horizontal`
* `{ size: 'xs' }`{lang="ts-type"}
*/
actions?: ButtonProps[]
/**
* Display a progress bar showing the toast's remaining duration.
* `{ size: 'sm' }`{lang="ts-type"}
* @defaultValue true
*/
progress?: boolean | Pick<ProgressProps, 'color'>
class?: any
ui?: Toast['slots']
}
@@ -78,10 +79,11 @@ import { tv } from '../utils/tv'
import UIcon from './Icon.vue'
import UAvatar from './Avatar.vue'
import UButton from './Button.vue'
import UProgress from './Progress.vue'
const props = withDefaults(defineProps<ToastProps>(), {
close: true,
orientation: 'vertical',
close: true,
progress: true
})
const emits = defineEmits<ToastEmits>()
@@ -119,7 +121,7 @@ defineExpose({
<template>
<ToastRoot
ref="el"
v-slot="{ remaining, duration }"
v-slot="{ remaining, duration, open }"
v-bind="rootProps"
:data-orientation="orientation"
:class="ui.root({ class: [props.ui?.root, props.class] })"
@@ -184,6 +186,13 @@ defineExpose({
</ToastClose>
</div>
<div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
<UProgress
v-if="progress && open && remaining > 0 && duration"
:model-value="remaining / duration * 100"
:color="color"
v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
size="sm"
:class="ui.progress({ class: props.ui?.progress })"
/>
</ToastRoot>
</template>

8
src/theme/toast.ts
View File

@@ -10,20 +10,18 @@ export default (options: Required<ModuleOptions>) => ({
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
progress: 'absolute inset-x-0 bottom-0',
close: 'p-0'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`,
icon: `text-${color}`,
progress: `bg-${color}`
icon: `text-${color}`
}])),
neutral: {
root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
icon: 'text-highlighted',
progress: 'bg-inverted'
icon: 'text-highlighted'
}
},
orientation: {

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>