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

@@ -166,7 +166,27 @@ defineShortcuts({
       multiple
       class="sm:max-h-80"
       @update:model-value="onSelect"
-    />
+    >
+      <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>
   </DefineTemplate>
 
   <div class="flex-1 flex flex-col gap-12 w-full max-w-lg">

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

@@ -147,6 +147,7 @@ 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>
@@ -444,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>