up

Merge remote-tracking branch 'origin/v3' into feat/custom-slots
feat(CommandPalette): add custom slots
2026-01-15 12:39:35 +01:00 · 2025-07-07 11:51:34 +02:00 · 2025-07-07 11:38:07 +02:00 · 2025-07-04 10:06:55 +02:00
20 changed files with 286 additions and 578 deletions
--- a/docs/app/components/content/ComponentSlots.vue
+++ b/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.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
+          <HighlightInlineType v-if="slot.type" :type="slot.type" />

          <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
        </ProseTd>
--- a/docs/app/components/content/examples/command-palette/CommandPaletteFooterSlotExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteFooterSlotExample.vue
@@ -1,78 +0,0 @@
-<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>
--- a/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
+++ b/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
@@ -24,10 +24,3 @@ const password = ref('')
    </template>
  </UInput>
 </template>
-
-<style>
-/* Hide the password reveal button in Edge */
-::-ms-reveal {
-    display: none;
-}
-</style>
--- a/docs/app/components/content/examples/toast/ToastProgressExample.vue
+++ b/docs/app/components/content/examples/toast/ToastProgressExample.vue
@@ -1,16 +0,0 @@
-<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>
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -877,20 +877,6 @@ 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.
--- a/docs/content/3.components/toast.md
+++ b/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](/components/button) (with `false` value).
+Pass a `close` field to customize or hide the close 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 Toast.
+Pass an `actions` field to add some [Button](/components/button) actions to the Alert.

 ::component-example
 ---
@@ -155,23 +155,9 @@ 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

-Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
+Use the `orientation` prop to change the orientation of the Toast.

 ::component-example
 ---
--- a/playground/app/pages/components/command-palette.vue
+++ b/playground/app/pages/components/command-palette.vue
@@ -10,8 +10,9 @@ const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
 const selected = ref([])
+const commandPalette = useTemplateRef('commandPalette')

-const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: _users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  // params: { q: searchTermDebounced },
  transform: (data: User[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -22,10 +23,6 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 const loading = ref(false)

 const groups = computed(() => [{
-  id: 'users',
-  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
-  items: users.value || []
-}, {
  id: 'actions',
  items: [{
    label: 'Add new file',
@@ -74,6 +71,12 @@ const groups = computed(() => [{
      toast.add({ title: 'Label added!' })
    },
    kbds: ['meta', 'L']
+  }, {
+    label: 'Set Wallpaper',
+    suffix: 'Choose from beautiful wallpaper collection.',
+    icon: 'i-lucide-image',
+    view: 'wallpaper',
+    placeholder: 'Search wallpapers...'
  }, {
    label: 'More actions',
    placeholder: 'Search actions...',
@@ -140,6 +143,116 @@ const labels = [{
 }]
 const label = ref()

+const wallpapers = [
+  {
+    id: 1,
+    name: 'red_distortion_1',
+    gradient: 'from-red-500 via-orange-500 to-pink-500',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 2,
+    name: 'blue_distortion_1',
+    gradient: 'from-blue-600 via-purple-600 to-indigo-600',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 3,
+    name: 'mono_dark_distortion_1',
+    gradient: 'from-gray-900 via-gray-700 to-gray-800',
+    category: 'Monochrome',
+    featured: false
+  },
+  {
+    id: 4,
+    name: 'chromatic_dark_1',
+    gradient: 'from-emerald-600 via-teal-600 to-cyan-600',
+    category: 'Chromatic',
+    featured: true
+  },
+  {
+    id: 5,
+    name: 'red_distortion_2',
+    gradient: 'from-rose-600 via-red-600 to-orange-600',
+    category: 'Abstract',
+    featured: false
+  },
+  {
+    id: 6,
+    name: 'purple_cosmic_1',
+    gradient: 'from-violet-700 via-purple-700 to-fuchsia-700',
+    category: 'Cosmic',
+    featured: true
+  },
+  {
+    id: 7,
+    name: 'golden_sunset_1',
+    gradient: 'from-yellow-500 via-orange-500 to-red-500',
+    category: 'Nature',
+    featured: false
+  },
+  {
+    id: 8,
+    name: 'ocean_deep_1',
+    gradient: 'from-blue-800 via-blue-900 to-indigo-900',
+    category: 'Nature',
+    featured: true
+  },
+  {
+    id: 9,
+    name: 'mono_light_distortion_1',
+    gradient: 'from-gray-200 via-gray-300 to-gray-400',
+    category: 'Monochrome',
+    featured: false
+  },
+  {
+    id: 10,
+    name: 'green_matrix_1',
+    gradient: 'from-green-800 via-emerald-700 to-teal-700',
+    category: 'Chromatic',
+    featured: false
+  },
+  {
+    id: 11,
+    name: 'pink_dreams_1',
+    gradient: 'from-pink-500 via-rose-500 to-purple-500',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 12,
+    name: 'midnight_blue_1',
+    gradient: 'from-slate-900 via-blue-900 to-indigo-900',
+    category: 'Nature',
+    featured: false
+  }
+]
+
+const filteredWallpapers = computed(() => {
+  let filtered = wallpapers
+
+  // Filter by search term
+  if (searchTerm.value.trim()) {
+    const search = searchTerm.value.toLowerCase()
+    filtered = filtered.filter(w =>
+      w.name.toLowerCase().includes(search)
+      || w.category.toLowerCase().includes(search)
+    )
+  }
+
+  return filtered
+})
+
+function setWallpaper(wallpaper: any) {
+  toast.add({
+    title: `Wallpaper set to ${wallpaper.name}!`,
+    description: 'Your desktop wallpaper has been updated.',
+    icon: 'i-lucide-image'
+  })
+}
+
 // function onSelect(item: typeof groups.value[number]['items'][number]) {
 function onSelect(item: any) {
  console.log('Selected', item)
@@ -147,6 +260,12 @@ function onSelect(item: any) {

 defineShortcuts({
  meta_k: () => open.value = !open.value,
+  meta_shift_a: {
+    usingInput: true,
+    handler: () => {
+      commandPalette.value?.openView('askAI')
+    }
+  },
  ...extractShortcuts(groups.value)
 })
 </script>
@@ -154,6 +273,7 @@ defineShortcuts({
 <template>
  <DefineTemplate>
    <UCommandPalette
+      ref="commandPalette"
      v-model="selected"
      v-model:search-term="searchTerm"
      :loading="status === 'pending'"
@@ -167,25 +287,49 @@ defineShortcuts({
      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>
+      <template #wallpaper>
+        <div class="flex-1 overflow-y-auto p-6">
+          <div class="grid grid-cols-4 gap-4">
+            <div
+              v-for="wallpaper in filteredWallpapers"
+              :key="wallpaper.id"
+              class="group relative cursor-pointer"
+              @click="setWallpaper(wallpaper)"
+            >
+              <div
+                class="aspect-video rounded-lg bg-gradient-to-br shadow-lg ring-1 ring-black/5"
+                :class="wallpaper.gradient"
+              />
+              <div class="mt-2 px-1">
+                <div class="flex items-center gap-2">
+                  <h3 class="text-sm font-medium text-highlighted truncate">
+                    {{ wallpaper.name }}
+                  </h3>
+                  <UChip
+                    v-if="wallpaper.featured"
+                    label="★"
+                    size="xs"
+                    color="primary"
+                    class="shrink-0"
+                  />
+                </div>
+                <p class="text-xs text-dimmed">
+                  {{ wallpaper.category }}
+                </p>
+              </div>
+            </div>
          </div>
        </div>
      </template>
+
+      <template #askAI>
+        <div class="flex flex-col items-center justify-center gap-4 p-6">
+          <UIcon name="i-lucide-sparkles" class="size-8 text-primary" />
+          <span class="text-lg font-semibold text-highlighted">
+            Ask me anything...
+          </span>
+        </div>
+      </template>
    </UCommandPalette>
  </DefineTemplate>

--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -339,7 +339,6 @@ 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>
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -31,6 +31,11 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   */
  placeholder?: string
  children?: CommandPaletteItem[]
+  /**
+   * Custom view to display instead of children items.
+   * When defined, clicking this item will show the custom view.
+   */
+  view?: string
  onSelect?(e?: Event): void
  class?: any
  ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
@@ -147,14 +152,13 @@ type SlotProps<T> = (props: { item: T, index: number }) => any

 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
  'empty'(props: { searchTerm?: string }): any
-  'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
  'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
  'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
  'item': SlotProps<T>
  'item-leading': SlotProps<T>
  'item-label': SlotProps<T>
  'item-trailing': SlotProps<T>
-} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
+} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>> & Record<string, (props: { current: any, searchTerm: string, navigateBack: () => void, close: () => void }) => any>

 </script>

@@ -209,12 +213,17 @@ const fuse = computed(() => defu({}, props.fuse, {
  matchAllWhenSearchEmpty: true
 }))

-const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
+const history = ref<(CommandPaletteGroup & { placeholder?: string, view?: string })[]>([])

 const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))

 const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)

+const currentView = computed(() => {
+  const current = history.value[history.value.length - 1]
+  return current?.view ? current : null
+})
+
 const items = computed(() => groups.value?.filter((group) => {
  if (!group.id) {
    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
@@ -280,8 +289,33 @@ const filteredGroups = computed(() => {

 const listboxRootRef = useTemplateRef('listboxRootRef')

+// Exposed methods for programmatic control
+function openView(viewName: string) {
+  history.value.push({
+    id: `view-${viewName}`,
+    label: viewName,
+    view: viewName,
+    items: []
+  } as any)
+
+  searchTerm.value = ''
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function closeView() {
+  if (history.value.length > 0) {
+    navigateBack()
+  }
+}
+
+defineExpose({
+  openView,
+  closeView,
+  navigateBack
+})
+
 function navigate(item: T) {
-  if (!item.children?.length) {
+  if (!item.children?.length && !item.view) {
    return
  }

@@ -290,7 +324,8 @@ function navigate(item: T) {
    label: item.label,
    slot: item.slot,
    placeholder: item.placeholder,
-    items: item.children
+    view: item.view,
+    items: item.children || []
  } as any)

  searchTerm.value = ''
@@ -317,7 +352,7 @@ function onBackspace() {
 }

 function onSelect(e: Event, item: T) {
-  if (item.children?.length) {
+  if (item.children?.length || item.view) {
    e.preventDefault()

    navigate(item)
@@ -372,7 +407,17 @@ function onSelect(e: Event, item: T) {
    </ListboxFilter>

    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div v-if="currentView" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot
+          :name="currentView.view"
+          :current="currentView"
+          :search-term="searchTerm"
+          :navigate-back="navigateBack"
+          :close="closeView"
+        />
+      </div>
+
+      <div v-else-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
          <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
            {{ get(group, props.labelKey as string) }}
@@ -416,7 +461,7 @@ function onSelect(e: Event, item: T) {
                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                    <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
                      <UIcon
-                        v-if="item.children && item.children.length > 0"
+                        v-if="(item.children && item.children.length > 0) || item.view"
                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                      />
@@ -445,9 +490,5 @@ 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>
--- a/src/runtime/components/Toast.vue
+++ b/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, ProgressProps } from '../types'
+import type { AvatarProps, ButtonProps } from '../types'
 import type { StringOrVNode, ComponentConfig } from '../types/utils'

 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>
@@ -29,6 +29,18 @@ 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"}
@@ -41,19 +53,6 @@ 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']
 }
@@ -79,11 +78,10 @@ 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>(), {
-  orientation: 'vertical',
  close: true,
+  orientation: 'vertical',
  progress: true
 })
 const emits = defineEmits<ToastEmits>()
@@ -121,7 +119,7 @@ defineExpose({
 <template>
  <ToastRoot
    ref="el"
-    v-slot="{ remaining, duration, open }"
+    v-slot="{ remaining, duration }"
    v-bind="rootProps"
    :data-orientation="orientation"
    :class="ui.root({ class: [props.ui?.root, props.class] })"
@@ -186,13 +184,6 @@ defineExpose({
      </ToastClose>
    </div>

-    <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 })"
-    />
+    <div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
  </ToastRoot>
 </template>
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -120,8 +120,6 @@ 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,
--- a/src/runtime/composables/useOverlay.ts
+++ b/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 = { ...overlay.props, ...props }
+    overlay.props = { ...props }
  }

  const getOverlay = (id: symbol): Overlay => {
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -7,7 +7,6 @@ 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',
--- a/src/theme/toast.ts
+++ b/src/theme/toast.ts
@@ -10,18 +10,20 @@ export default (options: Required<ModuleOptions>) => ({
    avatar: 'shrink-0',
    avatarSize: '2xl',
    actions: 'flex gap-1.5 shrink-0',
-    progress: 'absolute inset-x-0 bottom-0',
+    progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
    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}`
+        icon: `text-${color}`,
+        progress: `bg-${color}`
      }])),
      neutral: {
        root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
-        icon: 'text-highlighted'
+        icon: 'text-highlighted',
+        progress: 'bg-inverted'
      }
    },
    orientation: {
--- a/src/theme/toaster.ts
+++ b/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 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'
+    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'
  },
  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_280ms_cubic-bezier(0.4,0,0.6,1)]'
+      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
    }
  }, {
    position: ['bottom-left', 'bottom-center', 'bottom-right'],
    class: {
      viewport: 'bottom-4',
-      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_280ms_cubic-bezier(0.4,0,0.6,1)]'
+      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
    }
  }, {
    swipeDirection: ['left', 'right'],
--- a/test/components/CommandPalette.spec.ts
+++ b/test/components/CommandPalette.spec.ts
@@ -89,8 +89,7 @@ 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 footer slot', { props, slots: { footer: () => 'Footer slot' } }]
+    ['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }]
  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CommandPaletteProps, slots?: Partial<CommandPaletteSlots> }) => {
    const html = await ComponentRender(nameOrHtml, options, CommandPalette)
    expect(html).toMatchSnapshot()
--- a/test/components/snapshots/CommandPalette-vue.spec.ts.snap
+++ b/test/components/snapshots/CommandPalette-vue.spec.ts.snap
@@ -32,7 +32,6 @@ exports[`CommandPalette > renders with as correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </section>"
 `;
@@ -69,7 +68,6 @@ exports[`CommandPalette > renders with class correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -104,7 +102,6 @@ exports[`CommandPalette > renders with close correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -139,7 +136,6 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -174,7 +170,6 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -209,7 +204,6 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -246,7 +240,6 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -283,7 +276,6 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -320,44 +312,6 @@ 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>"
 `;
@@ -394,7 +348,6 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -431,7 +384,6 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -456,7 +408,6 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -493,7 +444,6 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -524,7 +474,6 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -555,7 +504,6 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -597,7 +545,6 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -634,7 +581,6 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -671,7 +617,6 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -708,7 +653,6 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -745,7 +689,6 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -782,7 +725,6 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -819,7 +761,6 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -832,7 +773,6 @@ 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>"
 `;
--- a/test/components/snapshots/CommandPalette.spec.ts.snap
+++ b/test/components/snapshots/CommandPalette.spec.ts.snap
@@ -32,7 +32,6 @@ exports[`CommandPalette > renders with as correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </section>"
 `;
@@ -69,7 +68,6 @@ exports[`CommandPalette > renders with class correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -107,7 +105,6 @@ exports[`CommandPalette > renders with close correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -142,7 +139,6 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -180,7 +176,6 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -215,7 +210,6 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -252,7 +246,6 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -289,7 +282,6 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -326,44 +318,6 @@ 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>"
 `;
@@ -400,7 +354,6 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -437,7 +390,6 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -462,7 +414,6 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -499,7 +450,6 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -530,7 +480,6 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -561,7 +510,6 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -603,7 +551,6 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -640,7 +587,6 @@ exports[`CommandPalette > renders with loading correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -677,7 +623,6 @@ exports[`CommandPalette > renders with loadingIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -714,7 +659,6 @@ exports[`CommandPalette > renders with modelValue correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -751,7 +695,6 @@ exports[`CommandPalette > renders with placeholder correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -788,7 +731,6 @@ exports[`CommandPalette > renders with selectedIcon correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -825,7 +767,6 @@ exports[`CommandPalette > renders with ui correctly 1`] = `
      </div>
    </div>
  </div>
-  <!--v-if-->
  <!---->
 </div>"
 `;
@@ -838,7 +779,6 @@ 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>"
 `;
--- a/test/components/snapshots/Toast-vue.spec.ts.snap
+++ b/test/components/snapshots/Toast-vue.spec.ts.snap
@@ -25,13 +25,7 @@ exports[`Toast > renders with actions correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -62,13 +56,7 @@ exports[`Toast > renders with as correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -98,13 +86,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -135,13 +117,7 @@ exports[`Toast > renders with class correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -169,13 +145,7 @@ 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="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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -206,13 +176,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -243,13 +207,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></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>
@@ -280,13 +238,7 @@ exports[`Toast > renders with description correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -317,13 +269,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -353,13 +299,7 @@ exports[`Toast > renders with icon correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -388,13 +328,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -425,13 +359,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
          <!--v-if-->
          <!--v-if-->
        </button></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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -464,13 +392,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -501,13 +423,7 @@ exports[`Toast > renders with title correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -538,13 +454,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -575,13 +485,7 @@ exports[`Toast > renders with type correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -612,13 +516,7 @@ exports[`Toast > renders with ui correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -644,13 +542,7 @@ exports[`Toast > renders without close correctly 1`] = `
        <!--v-if-->
      </div>
      <!--v-if-->
-      <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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
--- a/test/components/snapshots/Toast.spec.ts.snap
+++ b/test/components/snapshots/Toast.spec.ts.snap
@@ -25,13 +25,7 @@ exports[`Toast > renders with actions correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -62,13 +56,7 @@ exports[`Toast > renders with as correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -98,13 +86,7 @@ exports[`Toast > renders with avatar correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -135,13 +117,7 @@ exports[`Toast > renders with class correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -169,13 +145,7 @@ 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="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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -206,13 +176,7 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -243,13 +207,7 @@ exports[`Toast > renders with color neutral correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-inverted" style="width: 100%;"></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>
@@ -280,13 +238,7 @@ exports[`Toast > renders with description correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -317,13 +269,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -353,13 +299,7 @@ exports[`Toast > renders with icon correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -388,13 +328,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -425,13 +359,7 @@ exports[`Toast > renders with orientation horizontal correctly 1`] = `
          <!--v-if-->
          <!--v-if-->
        </button></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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -464,13 +392,7 @@ exports[`Toast > renders with orientation vertical correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -501,13 +423,7 @@ exports[`Toast > renders with title correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -538,13 +454,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -575,13 +485,7 @@ exports[`Toast > renders with type correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -612,13 +516,7 @@ exports[`Toast > renders with ui correctly 1`] = `
          <!--v-if-->
        </button>
      </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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
@@ -644,13 +542,7 @@ exports[`Toast > renders without close correctly 1`] = `
        <!--v-if-->
      </div>
      <!--v-if-->
-      <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>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary" style="width: 100%;"></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>
Author	SHA1	Message	Date
HugoRCD	259a43930c	up	2025-07-07 11:51:34 +02:00
HugoRCD	b7ab65b0c9	Merge remote-tracking branch 'origin/v3' into feat/custom-slots	2025-07-07 11:38:07 +02:00
HugoRCD	18a1c17d98	feat(CommandPalette): add custom slots	2025-07-04 10:06:55 +02:00