up

Resolves #4484

docs/app/components/content/ComponentSlots.vue

@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
           </ProseCode>
         </ProseTd>
         <ProseTd>
-          <HighlightInlineType v-if="slot.type" :type="slot.type" />
+          <HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
 
           <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
         </ProseTd>

docs/app/components/content/examples/command-palette/CommandPaletteFooterSlotExample.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const groups = [
+  {
+    id: 'actions',
+    items: [
+      {
+        label: 'Add new file',
+        suffix: 'Create a new file in the current directory',
+        icon: 'i-lucide-file-plus',
+        kbds: ['meta', 'N']
+      },
+      {
+        label: 'Add new folder',
+        suffix: 'Create a new folder in the current directory',
+        icon: 'i-lucide-folder-plus',
+        kbds: ['meta', 'F']
+      },
+      {
+        label: 'Search files',
+        suffix: 'Search across all files in the project',
+        icon: 'i-lucide-search',
+        kbds: ['meta', 'P']
+      },
+      {
+        label: 'Settings',
+        suffix: 'Open application settings',
+        icon: 'i-lucide-settings',
+        kbds: ['meta', ',']
+      }
+    ]
+  },
+  {
+    id: 'recent',
+    label: 'Recent',
+    items: [
+      {
+        label: 'project.vue',
+        suffix: 'components/',
+        icon: 'i-vscode-icons-file-type-vue'
+      },
+      {
+        label: 'readme.md',
+        suffix: 'docs/',
+        icon: 'i-vscode-icons-file-type-markdown'
+      },
+      {
+        label: 'package.json',
+        suffix: 'root/',
+        icon: 'i-vscode-icons-file-type-node'
+      }
+    ]
+  }
+]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" class="flex-1 h-80">
+    <template #footer>
+      <div class="flex items-center justify-between gap-2">
+        <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+        <div class="flex items-center gap-1">
+          <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
+            <template #trailing>
+              <UKbd value="enter" />
+            </template>
+          </UButton>
+          <USeparator orientation="vertical" class="h-4" />
+          <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
+            <template #trailing>
+              <UKbd value="meta" />
+              <UKbd value="k" />
+            </template>
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UCommandPalette>
+</template>

docs/app/components/content/examples/input/InputPasswordToggleExample.vue

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

docs/app/components/content/examples/toast/ToastProgressExample.vue

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

docs/content/3.components/command-palette.md

@@ -877,6 +877,20 @@ props:
 This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
 ::
 
+### With footer slot :badge{label="Soon" class="align-text-top"}
+
+Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.
+
+::component-example
+---
+collapse: true
+name: 'command-palette-footer-slot-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
 ### With custom slot
 
 Use the `slot` property to customize a specific item or group.

docs/content/3.components/toast.md

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

playground/app/pages/components/command-palette.vue

@@ -10,9 +10,8 @@ const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
 const selected = ref([])
-const commandPalette = useTemplateRef('commandPalette')
 
-const { data: _users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   // params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -23,6 +22,10 @@ const { data: _users, status } = await useFetch('https://jsonplaceholder.typicod
 const loading = ref(false)
 
 const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
   id: 'actions',
   items: [{
     label: 'Add new file',
@@ -71,12 +74,6 @@ const groups = computed(() => [{
       toast.add({ title: 'Label added!' })
     },
     kbds: ['meta', 'L']
-  }, {
-    label: 'Set Wallpaper',
-    suffix: 'Choose from beautiful wallpaper collection.',
-    icon: 'i-lucide-image',
-    view: 'wallpaper',
-    placeholder: 'Search wallpapers...'
   }, {
     label: 'More actions',
     placeholder: 'Search actions...',
@@ -143,116 +140,6 @@ const labels = [{
 }]
 const label = ref()
 
-const wallpapers = [
-  {
-    id: 1,
-    name: 'red_distortion_1',
-    gradient: 'from-red-500 via-orange-500 to-pink-500',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 2,
-    name: 'blue_distortion_1',
-    gradient: 'from-blue-600 via-purple-600 to-indigo-600',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 3,
-    name: 'mono_dark_distortion_1',
-    gradient: 'from-gray-900 via-gray-700 to-gray-800',
-    category: 'Monochrome',
-    featured: false
-  },
-  {
-    id: 4,
-    name: 'chromatic_dark_1',
-    gradient: 'from-emerald-600 via-teal-600 to-cyan-600',
-    category: 'Chromatic',
-    featured: true
-  },
-  {
-    id: 5,
-    name: 'red_distortion_2',
-    gradient: 'from-rose-600 via-red-600 to-orange-600',
-    category: 'Abstract',
-    featured: false
-  },
-  {
-    id: 6,
-    name: 'purple_cosmic_1',
-    gradient: 'from-violet-700 via-purple-700 to-fuchsia-700',
-    category: 'Cosmic',
-    featured: true
-  },
-  {
-    id: 7,
-    name: 'golden_sunset_1',
-    gradient: 'from-yellow-500 via-orange-500 to-red-500',
-    category: 'Nature',
-    featured: false
-  },
-  {
-    id: 8,
-    name: 'ocean_deep_1',
-    gradient: 'from-blue-800 via-blue-900 to-indigo-900',
-    category: 'Nature',
-    featured: true
-  },
-  {
-    id: 9,
-    name: 'mono_light_distortion_1',
-    gradient: 'from-gray-200 via-gray-300 to-gray-400',
-    category: 'Monochrome',
-    featured: false
-  },
-  {
-    id: 10,
-    name: 'green_matrix_1',
-    gradient: 'from-green-800 via-emerald-700 to-teal-700',
-    category: 'Chromatic',
-    featured: false
-  },
-  {
-    id: 11,
-    name: 'pink_dreams_1',
-    gradient: 'from-pink-500 via-rose-500 to-purple-500',
-    category: 'Abstract',
-    featured: true
-  },
-  {
-    id: 12,
-    name: 'midnight_blue_1',
-    gradient: 'from-slate-900 via-blue-900 to-indigo-900',
-    category: 'Nature',
-    featured: false
-  }
-]
-
-const filteredWallpapers = computed(() => {
-  let filtered = wallpapers
-
-  // Filter by search term
-  if (searchTerm.value.trim()) {
-    const search = searchTerm.value.toLowerCase()
-    filtered = filtered.filter(w =>
-      w.name.toLowerCase().includes(search)
-      || w.category.toLowerCase().includes(search)
-    )
-  }
-
-  return filtered
-})
-
-function setWallpaper(wallpaper: any) {
-  toast.add({
-    title: `Wallpaper set to ${wallpaper.name}!`,
-    description: 'Your desktop wallpaper has been updated.',
-    icon: 'i-lucide-image'
-  })
-}
-
 // function onSelect(item: typeof groups.value[number]['items'][number]) {
 function onSelect(item: any) {
   console.log('Selected', item)
@@ -260,12 +147,6 @@ function onSelect(item: any) {
 
 defineShortcuts({
   meta_k: () => open.value = !open.value,
-  meta_shift_a: {
-    usingInput: true,
-    handler: () => {
-      commandPalette.value?.openView('askAI')
-    }
-  },
   ...extractShortcuts(groups.value)
 })
 </script>
@@ -273,7 +154,6 @@ defineShortcuts({
 <template>
   <DefineTemplate>
     <UCommandPalette
-      ref="commandPalette"
       v-model="selected"
       v-model:search-term="searchTerm"
       :loading="status === 'pending'"
@@ -287,49 +167,25 @@ defineShortcuts({
       class="sm:max-h-80"
       @update:model-value="onSelect"
     >
-      <template #wallpaper>
-        <div class="flex-1 overflow-y-auto p-6">
-          <div class="grid grid-cols-4 gap-4">
-            <div
-              v-for="wallpaper in filteredWallpapers"
-              :key="wallpaper.id"
-              class="group relative cursor-pointer"
-              @click="setWallpaper(wallpaper)"
-            >
-              <div
-                class="aspect-video rounded-lg bg-gradient-to-br shadow-lg ring-1 ring-black/5"
-                :class="wallpaper.gradient"
-              />
-              <div class="mt-2 px-1">
-                <div class="flex items-center gap-2">
-                  <h3 class="text-sm font-medium text-highlighted truncate">
-                    {{ wallpaper.name }}
-                  </h3>
-                  <UChip
-                    v-if="wallpaper.featured"
-                    label="★"
-                    size="xs"
-                    color="primary"
-                    class="shrink-0"
-                  />
-                </div>
-                <p class="text-xs text-dimmed">
-                  {{ wallpaper.category }}
-                </p>
-              </div>
-            </div>
+      <template #footer>
+        <div class="flex items-center justify-between gap-2">
+          <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+          <div class="flex items-center gap-1">
+            <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
+              <template #trailing>
+                <UKbd value="enter" />
+              </template>
+            </UButton>
+            <USeparator orientation="vertical" class="h-4" />
+            <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
+              <template #trailing>
+                <UKbd value="meta" />
+                <UKbd value="k" />
+              </template>
+            </UButton>
           </div>
         </div>
       </template>
-
-      <template #askAI>
-        <div class="flex flex-col items-center justify-center gap-4 p-6">
-          <UIcon name="i-lucide-sparkles" class="size-8 text-primary" />
-          <span class="text-lg font-semibold text-highlighted">
-            Ask me anything...
-          </span>
-        </div>
-      </template>
     </UCommandPalette>
   </DefineTemplate>
 

src/runtime/components/Carousel.vue

@@ -339,6 +339,7 @@ defineExpose({
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             :data-state="selectedIndex === index ? 'active' : undefined"
+            :aria-current="selectedIndex === index ? true : undefined"
             @click="scrollTo(index)"
           />
         </template>

src/runtime/components/CommandPalette.vue

@@ -31,11 +31,6 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    */
   placeholder?: string
   children?: CommandPaletteItem[]
-  /**
-   * Custom view to display instead of children items.
-   * When defined, clicking this item will show the custom view.
-   */
-  view?: string
   onSelect?(e?: Event): void
   class?: any
   ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
@@ -152,13 +147,14 @@ type SlotProps<T> = (props: { item: T, index: number }) => any
 
 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
   'empty'(props: { searchTerm?: string }): any
+  'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
-} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>> & Record<string, (props: { current: any, searchTerm: string, navigateBack: () => void, close: () => void }) => any>
+} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
 
 </script>
 
@@ -213,17 +209,12 @@ const fuse = computed(() => defu({}, props.fuse, {
   matchAllWhenSearchEmpty: true
 }))
 
-const history = ref<(CommandPaletteGroup & { placeholder?: string, view?: string })[]>([])
+const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
 
 const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
 
 const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
 
-const currentView = computed(() => {
-  const current = history.value[history.value.length - 1]
-  return current?.view ? current : null
-})
-
 const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
@@ -289,33 +280,8 @@ const filteredGroups = computed(() => {
 
 const listboxRootRef = useTemplateRef('listboxRootRef')
 
-// Exposed methods for programmatic control
-function openView(viewName: string) {
-  history.value.push({
-    id: `view-${viewName}`,
-    label: viewName,
-    view: viewName,
-    items: []
-  } as any)
-
-  searchTerm.value = ''
-  listboxRootRef.value?.highlightFirstItem()
-}
-
-function closeView() {
-  if (history.value.length > 0) {
-    navigateBack()
-  }
-}
-
-defineExpose({
-  openView,
-  closeView,
-  navigateBack
-})
-
 function navigate(item: T) {
-  if (!item.children?.length && !item.view) {
+  if (!item.children?.length) {
     return
   }
 
@@ -324,8 +290,7 @@ function navigate(item: T) {
     label: item.label,
     slot: item.slot,
     placeholder: item.placeholder,
-    view: item.view,
-    items: item.children || []
+    items: item.children
   } as any)
 
   searchTerm.value = ''
@@ -352,7 +317,7 @@ function onBackspace() {
 }
 
 function onSelect(e: Event, item: T) {
-  if (item.children?.length || item.view) {
+  if (item.children?.length) {
     e.preventDefault()
 
     navigate(item)
@@ -407,17 +372,7 @@ function onSelect(e: Event, item: T) {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="currentView" :class="ui.viewport({ class: props.ui?.viewport })">
-        <slot
-          :name="currentView.view"
-          :current="currentView"
-          :search-term="searchTerm"
-          :navigate-back="navigateBack"
-          :close="closeView"
-        />
-      </div>
-
-      <div v-else-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey as string) }}
@@ -461,7 +416,7 @@ function onSelect(e: Event, item: T) {
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
                       <UIcon
-                        v-if="(item.children && item.children.length > 0) || item.view"
+                        v-if="item.children && item.children.length > 0"
                         :name="trailingIcon || appConfig.ui.icons.chevronRight"
                         :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                       />
@@ -490,5 +445,9 @@ function onSelect(e: Event, item: T) {
         </slot>
       </div>
     </ListboxContent>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :ui="ui" />
+    </div>
   </ListboxRoot>
 </template>

src/runtime/components/Toast.vue

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

src/runtime/components/Toaster.vue

@@ -120,6 +120,8 @@ function getOffset(index: number) {
       :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
+      :data-second="!expanded && index === toasts.length - 2"
+      :data-third="!expanded && index === toasts.length - 3"
       :style="{
         '--index': (index - toasts.length) + toasts.length,
         '--before': toasts.length - 1 - index,

src/runtime/composables/useOverlay.ts

@@ -71,7 +71,7 @@ function _useOverlay() {
       isMounted: !!defaultOpen,
       destroyOnClose: !!destroyOnClose,
       originalProps: props || {},
-      props: { ...(props || {}) }
+      props: { ...props }
     })
 
     overlays.push(options)
@@ -135,7 +135,7 @@ function _useOverlay() {
   const patch = <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>): void => {
     const overlay = getOverlay(id)
 
-    overlay.props = { ...props }
+    overlay.props = { ...overlay.props, ...props }
   }
 
   const getOverlay = (id: symbol): Overlay => {

src/theme/command-palette.ts

@@ -7,6 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     close: '',
     back: 'p-0',
     content: 'relative overflow-hidden flex flex-col',
+    footer: 'p-1',
     viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
     group: 'p-1 isolate',
     empty: 'py-6 text-center text-sm text-muted',

src/theme/toast.ts

@@ -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: {

src/theme/toaster.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
-    viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none',
-    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
+    viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-500 ease-in-out',
+    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:max-h-[calc(var(--front-height)+0.5rem)] data-[expanded=false]:data-[front=false]:min-h-[3rem] data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,max-height,opacity] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none'
   },
   variants: {
     position: {
@@ -35,13 +35,13 @@ export default {
     position: ['top-left', 'top-center', 'top-right'],
     class: {
       viewport: 'top-4',
-      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
+      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_280ms_cubic-bezier(0.4,0,0.6,1)]'
     }
   }, {
     position: ['bottom-left', 'bottom-center', 'bottom-right'],
     class: {
       viewport: 'bottom-4',
-      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
+      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_280ms_cubic-bezier(0.4,0,0.6,1)]'
     }
   }, {
     swipeDirection: ['left', 'right'],

test/components/CommandPalette.spec.ts

@@ -89,7 +89,8 @@ describe('CommandPalette', () => {
     ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
     ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
     ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }],
-    ['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }]
+    ['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }],
+    ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps, slots?: Partial<CommandPaletteSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, CommandPalette)
     expect(html).toMatchSnapshot()

test/components/__snapshots__/CommandPalette-vue.spec.ts.snap

@@ -32,6 +32,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </section>"
 `;
@@ -68,6 +69,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -102,6 +104,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -136,6 +139,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -170,6 +174,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -204,6 +209,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -240,6 +246,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -276,6 +283,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -312,6 +320,44 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
+  <!---->
+</div>"
+`;
+
+exports[`CommandPalette > renders with footer slot correctly 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-default"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">N</kbd></span>
+          <!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">F</kbd></span>
+          <!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">H</kbd></span>
+          <!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors"></svg><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">L</kbd></span>
+          <!----></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-5" class="p-1 isolate">
+        <div id="reka-listbox-group-v-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-9" class="p-1 isolate">
+        <div id="reka-listbox-group-v-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      </div>
+    </div>
+  </div>
+  <div class="p-1">Footer slot</div>
   <!---->
 </div>"
 `;
@@ -348,6 +394,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -384,6 +431,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -408,6 +456,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -444,6 +493,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -474,6 +524,7 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -504,6 +555,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -545,6 +597,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -581,6 +634,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -617,6 +671,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -653,6 +708,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -689,6 +745,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -725,6 +782,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -761,6 +819,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -773,6 +832,7 @@ exports[`CommandPalette > renders without data correctly 1`] = `
   <div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div class="py-6 text-center text-sm text-muted">No data</div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;

test/components/__snapshots__/CommandPalette.spec.ts.snap

@@ -32,6 +32,7 @@ exports[`CommandPalette > renders with as correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </section>"
 `;
@@ -68,6 +69,7 @@ exports[`CommandPalette > renders with class correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -105,6 +107,7 @@ exports[`CommandPalette > renders with close correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -139,6 +142,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -176,6 +180,7 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -210,6 +215,7 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -246,6 +252,7 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -282,6 +289,7 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -318,6 +326,44 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
+  <!---->
+</div>"
+`;
+
+exports[`CommandPalette > renders with footer slot correctly 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none">
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" class="p-1 isolate">
+        <!--v-if--><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-highlighted before:bg-elevated" data-highlighted=""><span class="iconify i-lucide:file-plus shrink-0 size-5 text-default" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new file</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new file in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">N</kbd></span>
+          <!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:folder-plus shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add new folder</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Create a new folder in the current directory or workspace.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">F</kbd></span>
+          <!----></span>
+        </button><button type="button" disabled="" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-disabled="" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:hash shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add hashtag</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a hashtag to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">H</kbd></span>
+          <!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="iconify i-lucide:tag shrink-0 size-5 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors" aria-hidden="true"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add label</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">Add a label to the current item.</span></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">Ctrl</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans bg-default text-highlighted ring ring-inset ring-accented h-5 min-w-[20px] text-[11px]">L</kbd></span>
+          <!----></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-5" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-5" class="p-1.5 text-xs font-semibold text-highlighted">Labels</div><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-6" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-error h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">bug</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-7" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-success h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">feature</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button><button type="button" data-reka-collection-item="" id="reka-listbox-item-v-0-0-8" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors">
+          <div class="relative inline-flex items-center justify-center shrink-0 size-5"><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-info h-[8px] min-w-[8px] text-[8px] top-0 right-0"></span></div><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">enhancement</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
+        </button>
+      </div>
+      <div role="group" aria-labelledby="reka-listbox-group-v-0-0-9" class="p-1 isolate">
+        <div id="reka-listbox-group-v-0-0-9" class="p-1.5 text-xs font-semibold text-highlighted">Users</div><a href="https://github.com/benjamincanac" role="option" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" id="reka-listbox-item-v-0-0-10" aria-selected="false" data-state="unchecked" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span><span class="truncate space-x-1 rtl:space-x-reverse text-dimmed"><!--v-if--><span class="text-highlighted [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary">benjamincanac</span><span class="text-dimmed [&amp;>mark]:text-inverted [&amp;>mark]:bg-primary"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      </div>
+    </div>
+  </div>
+  <div class="p-1">Footer slot</div>
   <!---->
 </div>"
 `;
@@ -354,6 +400,7 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -390,6 +437,7 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -414,6 +462,7 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -450,6 +499,7 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -480,6 +530,7 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -510,6 +561,7 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -551,6 +603,7 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -587,6 +640,7 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -623,6 +677,7 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -659,6 +714,7 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -695,6 +751,7 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -731,6 +788,7 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -767,6 +825,7 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
       </div>
     </div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;
@@ -779,6 +838,7 @@ exports[`CommandPalette > renders without data correctly 1`] = `
   <div class="relative overflow-hidden flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
     <div class="py-6 text-center text-sm text-muted">No data</div>
   </div>
+  <!--v-if-->
   <!---->
 </div>"
 `;

test/components/__snapshots__/Toast-vue.spec.ts.snap

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

test/components/__snapshots__/Toast.spec.ts.snap

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