From 294374278042da86b49a0076b9dc446573a74f1e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 10:14:01 +0200
Subject: [PATCH 1/6] fix(ChatPrompt): proxy `disabled` prop

Resolves #5300
---
 src/runtime/components/ChatPrompt.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/ChatPrompt.vue b/src/runtime/components/ChatPrompt.vue
index 89ff553c80..82eedc73d2 100644
--- a/src/runtime/components/ChatPrompt.vue
+++ b/src/runtime/components/ChatPrompt.vue
@@ -6,7 +6,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>
 
-export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'form'
@@ -105,7 +105,7 @@ defineExpose({
       ref="textarea"
       v-model="model"
       :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error)"
+      :disabled="Boolean(error) || disabled"
       variant="none"
       v-bind="{ ...textareaProps, ...$attrs }"
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"

From 5f03466f25d083a257e949d4aaee1df45b47e1f2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 14:51:54 +0200
Subject: [PATCH 2/6] feat(Modal): add `scrollable` prop

---
 .../nuxt/app/pages/components/modal.vue       |  23 ++-
 src/runtime/components/Modal.vue              |  53 ++++-
 src/theme/modal.ts                            |  38 +++-
 test/components/Modal.spec.ts                 |   3 +
 .../DashboardSearch-vue.spec.ts.snap          |  45 +++--
 .../DashboardSearch.spec.ts.snap              |  45 +++--
 .../DashboardSidebar-vue.spec.ts.snap         |   3 +-
 .../DashboardSidebar.spec.ts.snap             |   3 +-
 .../__snapshots__/Header-vue.spec.ts.snap     |   4 +-
 .../__snapshots__/Header.spec.ts.snap         |   4 +-
 .../__snapshots__/Modal-vue.spec.ts.snap      | 190 ++++++++++++++----
 .../__snapshots__/Modal.spec.ts.snap          | 190 ++++++++++++++----
 .../__snapshots__/ContentSearch.spec.ts.snap  |  54 +++--
 13 files changed, 503 insertions(+), 152 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/modal.vue b/playgrounds/nuxt/app/pages/components/modal.vue
index 2a03af782b..04c1fc78f3 100644
--- a/playgrounds/nuxt/app/pages/components/modal.vue
+++ b/playgrounds/nuxt/app/pages/components/modal.vue
@@ -24,7 +24,7 @@ function openModal() {
   <Navbar />
 
   <div class="flex flex-col gap-2 min-h-0">
-    <UModal title="First modal">
+    <UModal title="First modal" :overlay="false">
       <UButton color="neutral" variant="outline" label="Open with nested" />
 
       <template #footer>
@@ -58,19 +58,32 @@ function openModal() {
       <UButton label="Open fullscreen" color="neutral" variant="outline" />
     </UModal>
 
+    <UModal title="Modal scrollable" description="This modal has `scrollable: true` prop. Content scrolls within the overlay, preventing accidental closes on scrollbar clicks." scrollable>
+      <UButton color="neutral" variant="subtle" label="Open scrollable" />
+
+      <template #body>
+        <Placeholder class="h-[300vh] w-full" />
+      </template>
+
+      <template #footer>
+        <UButton label="Submit" color="primary" />
+        <UButton label="Cancel" color="neutral" variant="ghost" />
+      </template>
+    </UModal>
+
     <UModal title="Modal prevent close" description="This modal has `dismissible: false` prop so it won't close when clicking outside." :dismissible="false" :modal="false" :overlay="false">
-      <UButton label="Open unclosable" color="neutral" variant="subtle" />
+      <UButton label="Open unclosable" color="neutral" variant="outline" />
     </UModal>
 
     <UModal title="Modal without close button" description="This modal has `close: false` prop." :close="false">
-      <UButton label="Open without close button" color="neutral" variant="outline" />
+      <UButton label="Open without close button" color="neutral" variant="subtle" />
     </UModal>
 
     <UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
-      <UButton label="Open with custom close button" color="neutral" variant="subtle" />
+      <UButton label="Open with custom close button" color="neutral" variant="outline" />
     </UModal>
 
-    <UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
+    <UButton label="Open programmatically" color="neutral" variant="subtle" @click="openModal" />
 
     <UModal title="First modal">
       <UButton color="neutral" variant="outline" label="Close with scoped slot close" />
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index b5c047319e..eeaf0b1647 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -18,6 +18,11 @@ export interface ModalProps extends DialogRootProps {
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
+   * @defaultValue false
+   */
+  scrollable?: boolean
   /**
    * Animate the modal when opening or closing.
    * @defaultValue true
@@ -76,7 +81,7 @@ export interface ModalSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { usePortal } from '../composables/usePortal'
@@ -113,25 +118,36 @@ const contentEvents = computed(() => {
     }, {} as Record<typeof events[number], (e: Event) => void>)
   }
 
+  if (props.scrollable) {
+    return {
+      // FIXME: This is a workaround to prevent the modal from closing when clicking on the scrollbar https://reka-ui.com/docs/components/dialog#scrollable-overlay but it's not working on Mac OS.
+      pointerDownOutside: (e: any) => {
+        const originalEvent = e.detail.originalEvent
+        const target = originalEvent.target as HTMLElement
+        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+          e.preventDefault()
+        }
+      }
+    }
+  }
+
   return {}
 })
 
+const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate()
+
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })({
   transition: props.transition,
-  fullscreen: props.fullscreen
-}))
+  fullscreen: props.fullscreen,
+  overlay: props.overlay,
+  scrollable: props.scrollable
+} as any))
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
-    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
-    </DialogTrigger>
-
-    <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
+    <DefineContentTemplate>
       <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
@@ -191,6 +207,23 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </div>
         </slot>
       </DialogContent>
+    </DefineContentTemplate>
+
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <template v-if="scrollable">
+        <DialogOverlay :class="ui.overlay({ class: props.ui?.overlay })">
+          <ReuseContentTemplate />
+        </DialogOverlay>
+      </template>
+
+      <template v-else>
+        <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+        <ReuseContentTemplate />
+      </template>
     </DialogPortal>
   </DialogRoot>
 </template>
diff --git a/src/theme/modal.ts b/src/theme/modal.ts
index cb57c157ff..4c3a2d8978 100644
--- a/src/theme/modal.ts
+++ b/src/theme/modal.ts
@@ -1,10 +1,10 @@
 export default {
   slots: {
-    overlay: 'fixed inset-0 bg-elevated/75',
-    content: 'fixed bg-default divide-y divide-default flex flex-col focus:outline-none',
+    overlay: 'fixed inset-0',
+    content: 'bg-default divide-y divide-default flex flex-col focus:outline-none',
     header: 'flex items-center gap-1.5 p-4 sm:px-6 min-h-16',
     wrapper: '',
-    body: 'flex-1 overflow-y-auto p-4 sm:p-6',
+    body: 'flex-1 p-4 sm:p-6',
     footer: 'flex items-center gap-1.5 p-4 sm:px-6',
     title: 'text-highlighted font-semibold',
     description: 'mt-1 text-muted text-sm',
@@ -22,8 +22,36 @@ export default {
         content: 'inset-0'
       },
       false: {
-        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden'
+        content: 'w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default'
       }
+    },
+    overlay: {
+      true: {
+        overlay: 'bg-elevated/75'
+      }
+    },
+    scrollable: {
+      true: {
+        overlay: 'overflow-y-auto',
+        content: 'relative'
+      },
+      false: {
+        content: 'fixed',
+        body: 'overflow-y-auto'
+      }
+    }
+  },
+  compoundVariants: [{
+    scrollable: true,
+    fullscreen: false,
+    class: {
+      overlay: 'grid place-items-center p-4 sm:py-8'
+    }
+  }, {
+    scrollable: false,
+    fullscreen: false,
+    class: {
+      content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden'
     }
-  }
+  }]
 }
diff --git a/test/components/Modal.spec.ts b/test/components/Modal.spec.ts
index f2358ddba9..1a770fc62d 100644
--- a/test/components/Modal.spec.ts
+++ b/test/components/Modal.spec.ts
@@ -16,6 +16,9 @@ describe('Modal', () => {
     ['with fullscreen', { props: { ...props, fullscreen: true, title: 'Title', description: 'Description' } }],
     ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
     ['without transition', { props: { ...props, transition: false, title: 'Title', description: 'Description' } }],
+    ['with scrollable', { props: { ...props, scrollable: true, title: 'Title', description: 'Description' } }],
+    ['with scrollable and fullscreen', { props: { ...props, scrollable: true, fullscreen: true, title: 'Title', description: 'Description' } }],
+    ['with scrollable and without overlay', { props: { ...props, scrollable: true, overlay: false, title: 'Title', description: 'Description' } }],
     ['without close', { props: { ...props, close: false, title: 'Title', description: 'Description' } }],
     ['with closeIcon', { props: { ...props, closeIcon: 'i-lucide-trash' } }],
     ['with class', { props: { ...props, class: 'bg-elevated' } }],
diff --git a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
index 849cfd9247..42c10b55b2 100644
--- a/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch-vue.spec.ts.snap
@@ -2,10 +2,11 @@
 
 exports[`DashboardSearch > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -38,10 +39,11 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
 
 exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -74,10 +76,11 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
 
 exports[`DashboardSearch > renders with groups correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -110,10 +113,11 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
 
 exports[`DashboardSearch > renders with icon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -146,10 +150,11 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
 
 exports[`DashboardSearch > renders with loading correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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 animate-spin"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -182,10 +187,11 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
 
 exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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 animate-spin"></svg></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -218,10 +224,11 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
 
 exports[`DashboardSearch > renders with placeholder correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -254,10 +261,11 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
 
 exports[`DashboardSearch > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
@@ -290,10 +298,11 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
 
 exports[`DashboardSearch > renders without colorMode correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.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 size-5"></svg><!--v-if--><!--v-if--></button></span></div>
diff --git a/test/components/__snapshots__/DashboardSearch.spec.ts.snap b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
index 796efb8f9b..7a9a1ed570 100644
--- a/test/components/__snapshots__/DashboardSearch.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSearch.spec.ts.snap
@@ -2,10 +2,11 @@
 
 exports[`DashboardSearch > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -41,10 +42,11 @@ exports[`DashboardSearch > renders with class correctly 1`] = `
 
 exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -80,10 +82,11 @@ exports[`DashboardSearch > renders with fullscreen correctly 1`] = `
 
 exports[`DashboardSearch > renders with groups correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -119,10 +122,11 @@ exports[`DashboardSearch > renders with groups correctly 1`] = `
 
 exports[`DashboardSearch > renders with icon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -158,10 +162,11 @@ exports[`DashboardSearch > renders with icon correctly 1`] = `
 
 exports[`DashboardSearch > renders with loading correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -197,10 +202,11 @@ exports[`DashboardSearch > renders with loading correctly 1`] = `
 
 exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -236,10 +242,11 @@ exports[`DashboardSearch > renders with loadingIcon correctly 1`] = `
 
 exports[`DashboardSearch > renders with placeholder correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -275,10 +282,11 @@ exports[`DashboardSearch > renders with placeholder correctly 1`] = `
 
 exports[`DashboardSearch > renders with ui correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -314,10 +322,11 @@ exports[`DashboardSearch > renders with ui correctly 1`] = `
 
 exports[`DashboardSearch > renders without colorMode correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
+  <!---->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
+  <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-1" aria-labelledby="reka-dialog-title-v-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0">dashboardSearch.title</h2><p id="reka-dialog-description-v-0-1">dashboardSearch.description</p></span>
     <!---->
     <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index 8e558d90d6..7276385a64 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -222,10 +222,11 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <!--v-if-->
   </div>
   <!--v-if-->
+  <!---->
   <!--v-if-->
   <!--teleport start-->
   <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
     <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><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"></svg>
         <!--v-if-->
         <!--v-if-->
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index d712caed0f..5890dda5fd 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -222,10 +222,11 @@ exports[`DashboardSidebar > renders with mode modal correctly 1`] = `
     <!--v-if-->
   </div>
   <!--v-if-->
+  <!---->
   <!--v-if-->
   <!--teleport start-->
   <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-2" aria-labelledby="reka-dialog-title-v-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-2">dashboardSidebar.description</p></span>
+  <div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-2" aria-labelledby="reka-dialog-title-v-0-1" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-2">dashboardSidebar.description</p></span>
     <div class="h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4 sm:px-6"><button type="button" aria-label="Close sidebar" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index 93eccc46bc..5f15ac4d6b 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -171,8 +171,9 @@ exports[`Header > renders with mode modal correctly 1`] = `
 <!--teleport start-->
 
 
+
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
   <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -186,6 +187,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index b5f6791c9b..c3772746a9 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -171,8 +171,9 @@ exports[`Header > renders with mode modal correctly 1`] = `
 <!--teleport start-->
 
 
+
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none inset-0 fixed lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
   <div class="px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3">
     <div class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" class="focus-visible:outline-primary hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -186,6 +187,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
diff --git a/test/components/__snapshots__/Modal-vue.spec.ts.snap b/test/components/__snapshots__/Modal-vue.spec.ts.snap
index 8a96d81380..9f614c0ea8 100644
--- a/test/components/__snapshots__/Modal-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Modal-vue.spec.ts.snap
@@ -5,8 +5,9 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -22,6 +23,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -30,8 +32,9 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -42,11 +45,12 @@ exports[`Modal > renders with body slot correctly 1`] = `
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
   <!--v-if-->
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -55,8 +59,9 @@ exports[`Modal > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -72,6 +77,7 @@ exports[`Modal > renders with class correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -80,8 +86,9 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -94,6 +101,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -102,8 +110,9 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -119,6 +128,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -127,12 +137,14 @@ exports[`Modal > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -141,8 +153,9 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -158,6 +171,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -166,8 +180,9 @@ exports[`Modal > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -183,6 +198,7 @@ exports[`Modal > renders with description correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -191,8 +207,9 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -208,6 +225,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -216,8 +234,9 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -233,6 +252,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -241,8 +261,9 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -258,6 +279,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -266,8 +288,9 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
   <!--v-if-->
@@ -275,6 +298,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -283,8 +307,9 @@ exports[`Modal > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -300,6 +325,85 @@ exports[`Modal > renders with open correctly 1`] = `
 </div>
 
 
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><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"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><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"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><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"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -308,8 +412,9 @@ exports[`Modal > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -325,6 +430,7 @@ exports[`Modal > renders with title correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -333,8 +439,9 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -350,6 +457,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -358,8 +466,9 @@ exports[`Modal > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -375,6 +484,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -383,8 +493,9 @@ exports[`Modal > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -398,6 +509,7 @@ exports[`Modal > renders without close correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -406,8 +518,9 @@ exports[`Modal > renders without overlay correctly 1`] = `
 <!--teleport start-->
 
 
+
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -423,6 +536,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -431,8 +545,9 @@ exports[`Modal > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
+
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -448,5 +563,6 @@ exports[`Modal > renders without transition correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap
index fe2e003098..389ba7286c 100644
--- a/test/components/__snapshots__/Modal.spec.ts.snap
+++ b/test/components/__snapshots__/Modal.spec.ts.snap
@@ -5,8 +5,9 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -22,6 +23,7 @@ exports[`Modal > renders with actions slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -30,8 +32,9 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -42,11 +45,12 @@ exports[`Modal > renders with body slot correctly 1`] = `
       <!--v-if-->
     </button>
   </div>
-  <div class="flex-1 overflow-y-auto p-4 sm:p-6">Body slot</div>
+  <div class="flex-1 p-4 sm:p-6 overflow-y-auto">Body slot</div>
   <!--v-if-->
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -55,8 +59,9 @@ exports[`Modal > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -72,6 +77,7 @@ exports[`Modal > renders with class correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -80,8 +86,9 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -94,6 +101,7 @@ exports[`Modal > renders with close slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -102,8 +110,9 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -119,6 +128,7 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -127,12 +137,14 @@ exports[`Modal > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->Content slot
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -141,8 +153,9 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -158,6 +171,7 @@ exports[`Modal > renders with default slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -166,8 +180,9 @@ exports[`Modal > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -183,6 +198,7 @@ exports[`Modal > renders with description correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -191,8 +207,9 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -208,6 +225,7 @@ exports[`Modal > renders with description slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -216,8 +234,9 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -233,6 +252,7 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -241,8 +261,9 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -258,6 +279,7 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -266,8 +288,9 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">Header slot</div>
   <!--v-if-->
@@ -275,6 +298,7 @@ exports[`Modal > renders with header slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -283,8 +307,9 @@ exports[`Modal > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -300,6 +325,85 @@ exports[`Modal > renders with open correctly 1`] = `
 </div>
 
 
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable and fullscreen correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable and without overlay correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with scrollable correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75 overflow-y-auto grid place-items-center p-4 sm:py-8">
+  <div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default relative" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+    <!--v-if-->
+    <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+      <div class="">
+        <h2 id="reka-dialog-title-v-0-0-0" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-muted text-sm">Description</p>
+      </div><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -308,8 +412,9 @@ exports[`Modal > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -325,6 +430,7 @@ exports[`Modal > renders with title correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -333,8 +439,9 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -350,6 +457,7 @@ exports[`Modal > renders with title slot correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -358,8 +466,9 @@ exports[`Modal > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -375,6 +484,7 @@ exports[`Modal > renders with ui correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -383,8 +493,9 @@ exports[`Modal > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -398,6 +509,7 @@ exports[`Modal > renders without close correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -406,8 +518,9 @@ exports[`Modal > renders without overlay correctly 1`] = `
 <!--teleport start-->
 
 
+
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -423,6 +536,7 @@ exports[`Modal > renders without overlay correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -431,8 +545,9 @@ exports[`Modal > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
+
 <div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
   <!--v-if-->
   <div class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
     <div class="">
@@ -448,5 +563,6 @@ exports[`Modal > renders without transition correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
diff --git a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
index f5b951db97..3839f72aee 100644
--- a/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentSearch.spec.ts.snap
@@ -5,8 +5,9 @@ exports[`ContentSearch > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:h-[28rem] sm:max-w-5xl" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -48,6 +49,7 @@ exports[`ContentSearch > renders with class correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -56,8 +58,9 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] inset-0 fixed" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -99,6 +102,7 @@ exports[`ContentSearch > renders with fullscreen correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -107,8 +111,9 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:home shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -150,6 +155,7 @@ exports[`ContentSearch > renders with icon correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -158,8 +164,9 @@ exports[`ContentSearch > renders with links correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" style="pointer-events: auto;"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -201,6 +208,7 @@ exports[`ContentSearch > renders with links correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -209,8 +217,9 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -252,6 +261,7 @@ exports[`ContentSearch > renders with loading correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -260,8 +270,9 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loading shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -303,6 +314,7 @@ exports[`ContentSearch > renders with loadingIcon correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -311,8 +323,9 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Search" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -354,6 +367,7 @@ exports[`ContentSearch > renders with placeholder correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -362,8 +376,9 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-lg"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -405,6 +420,7 @@ exports[`ContentSearch > renders with ui correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;
 
@@ -413,8 +429,9 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="fixed bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
+
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden sm:max-w-3xl sm:h-[28rem]" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open"><span aria-hidden="true" style="position: absolute; 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; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">contentSearch.title</h2><p id="reka-dialog-description-v-0-0-1">contentSearch.description</p></span>
   <!---->
   <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 [&amp;>input]:text-base/5"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none 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 pe-9" autocomplete="off" aria-disabled="false" value=""><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><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
@@ -447,5 +464,6 @@ exports[`ContentSearch > renders without colorMode correctly 1`] = `
 </div>
 
 
+
 <!--teleport end-->"
 `;

From 0de1e550561cb70272f44ea787de3036ea786409 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 14:52:07 +0200
Subject: [PATCH 3/6] docs: improve for consistency

---
 .../drawer/DrawerDismissibleExample.vue       |  18 +--
 .../examples/drawer/DrawerModalExample.vue    |  28 ----
 .../popover/PopoverDismissibleExample.vue     |  10 +-
 docs/content/docs/2.components/drawer.md      |  74 ++++++----
 docs/content/docs/2.components/modal.md       | 133 ++++++++++++++----
 docs/content/docs/2.components/popover.md     |  28 ++--
 docs/content/docs/2.components/slideover.md   |  80 ++++++++---
 7 files changed, 243 insertions(+), 128 deletions(-)
 delete mode 100644 docs/app/components/content/examples/drawer/DrawerModalExample.vue

diff --git a/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
index f0701ed113..1456a5c0f9 100644
--- a/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
@@ -3,19 +3,19 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" :dismissible="false" :handle="false" :ui="{ header: 'flex items-center justify-between' }">
+  <UDrawer v-model:open="open" :dismissible="false" :modal="false" :handle="false">
     <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
-    <template #header>
-      <h2 class="text-highlighted font-semibold">
-        Drawer non-dismissible
-      </h2>
+    <template #body>
+      <div class="flex items-center justify-between gap-4 mb-4">
+        <h2 class="text-highlighted font-semibold">
+          Drawer non-dismissible
+        </h2>
 
-      <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
-    </template>
+        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+      </div>
 
-    <template #body>
-      <Placeholder class="h-48" />
+      <Placeholder class="size-full min-h-48" />
     </template>
   </UDrawer>
 </template>
diff --git a/docs/app/components/content/examples/drawer/DrawerModalExample.vue b/docs/app/components/content/examples/drawer/DrawerModalExample.vue
deleted file mode 100644
index 59d92c96a2..0000000000
--- a/docs/app/components/content/examples/drawer/DrawerModalExample.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <UDrawer
-    v-model:open="open"
-    :dismissible="false"
-    :overlay="false"
-    :handle="false"
-    :modal="false"
-    :ui="{ header: 'flex items-center justify-between' }"
-  >
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-    <template #header>
-      <h2 class="text-highlighted font-semibold">
-        Drawer non-dismissible
-      </h2>
-
-      <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
-    </template>
-
-    <template #body>
-      <Placeholder class="h-48" />
-    </template>
-  </UDrawer>
-</template>
diff --git a/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
index 511dc4feab..8ea2d4a927 100644
--- a/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
+++ b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
@@ -1,18 +1,14 @@
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
 <template>
-  <UPopover v-model:open="open" :dismissible="false" :ui="{ content: 'p-4' }">
+  <UPopover :dismissible="false" :modal="false" :ui="{ content: 'p-4' }">
     <UButton label="Open" color="neutral" variant="subtle" />
 
-    <template #content>
+    <template #content="{ close }">
       <div class="flex items-center gap-4 mb-4">
         <h2 class="text-highlighted font-semibold">
           Popover non-dismissible
         </h2>
 
-        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="close" />
       </div>
 
       <Placeholder class="size-full min-h-48" />
diff --git a/docs/content/docs/2.components/drawer.md b/docs/content/docs/2.components/drawer.md
index da4af87a3b..ea9c030507 100644
--- a/docs/content/docs/2.components/drawer.md
+++ b/docs/content/docs/2.components/drawer.md
@@ -216,6 +216,54 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
+### Interactive
+
+Use the `modal` prop to control whether the Drawer blocks interaction with outside content. Defaults to `true`.
+
+::note
+When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
+::
+
+::component-code
+---
+prettier: true
+props:
+  modal: false
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+  content: |
+
+    <Placeholder class="h-48 m-4" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
+
+#content
+:placeholder{class="h-48 m-4"}
+::
+
+### Dismissible
+
+Use the `dismissible` prop to control whether the Drawer is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
+
+::note
+A `close:prevent` event will be emitted when the user tries to close it.
+::
+
+::tip
+You can combine `modal: false` with `dismissible: false` to make the Drawer's background interactive without closing it.
+::
+
+::component-example
+---
+prettier: true
+name: 'drawer-dismissible-example'
+---
+::
+
 ### Scale Background
 
 Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.
@@ -291,32 +339,6 @@ In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcu
 This allows you to move the trigger outside of the Drawer or remove it entirely.
 ::
 
-### Disable dismissal
-
-Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
-
-::component-example
----
-prettier: true
-name: 'drawer-dismissible-example'
----
-::
-
-::note
-In this example, the `header` slot is used to add a close button which is not done by default.
-::
-
-### With interactive background
-
-Set the `overlay` and `modal` props to `false` alongside the `dismissible` prop to make the Drawer's background interactive without closing the Drawer.
-
-::component-example
----
-prettier: true
-name: 'drawer-modal-example'
----
-::
-
 ### Responsive drawer
 
 You can render a [Modal](/docs/components/modal) component on desktop and a Drawer on mobile for example.
diff --git a/docs/content/docs/2.components/modal.md b/docs/content/docs/2.components/modal.md
index 12f38902c0..2a7695be48 100644
--- a/docs/content/docs/2.components/modal.md
+++ b/docs/content/docs/2.components/modal.md
@@ -169,6 +169,34 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::
 
+### Transition
+
+Use the `transition` prop to control whether the Modal is animated or not. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  transition: false
+  title: 'Modal without transition'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-48"}
+::
+
 ### Overlay
 
 Use the `overlay` prop to control whether the Modal has an overlay or not. Defaults to `true`.
@@ -197,9 +225,13 @@ slots:
 :placeholder{class="h-48"}
 ::
 
-### Transition
+### Interactive
 
-Use the `transition` prop to control whether the Modal is animated or not. Defaults to `true`.
+Use the `modal` prop to control whether the Modal blocks interaction with outside content. Defaults to `true`.
+
+::note
+When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
+::
 
 ::component-code
 ---
@@ -207,8 +239,8 @@ prettier: true
 ignore:
   - title
 props:
-  transition: false
-  title: 'Modal without transition'
+  modal: false
+  title: 'Modal interactive'
 slots:
   default: |
 
@@ -225,19 +257,27 @@ slots:
 :placeholder{class="h-48"}
 ::
 
-### Fullscreen
+### Dismissible
 
-Use the `fullscreen` prop to make the Modal fullscreen.
+Use the `dismissible` prop to control whether the Modal is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
+
+::note
+A `close:prevent` event will be emitted when the user tries to close it.
+::
+
+::tip
+You can combine `modal: false` with `dismissible: false` to make the Modal's background interactive without closing it.
+::
 
 ::component-code
 ---
 prettier: true
 ignore:
   - title
-  - fullscreen
 props:
-  fullscreen: true
-  title: 'Modal fullscreen'
+  dismissible: false
+  modal: true
+  title: 'Modal non-dismissible'
 slots:
   default: |
 
@@ -245,48 +285,65 @@ slots:
 
   body: |
 
-    <Placeholder class="h-full" />
+    <Placeholder class="h-48" />
 ---
 
 :u-button{label="Open" color="neutral" variant="subtle"}
 
 #body
-:placeholder{class="h-full"}
+:placeholder{class="h-48"}
 ::
 
-## Examples
+### Scrollable :badge{label="Soon"}
 
-### Control open state
+Use the `scrollable` prop to make the Modal's content scrollable within the overlay.
 
-You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+::warning
+As the overlay is needed for scrolling, `modal: false` is not compatible and `overlay: false` only removes the background.
+::
 
-::component-example
+::component-code
 ---
-name: 'modal-open-example'
+prettier: true
+ignore:
+  - title
+props:
+  scrollable: true
+  overlay: true
+  title: 'Modal scrollable'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
 ---
-::
 
-::note
-In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-screen"}
 ::
 
-::tip
-This allows you to move the trigger outside of the Modal or remove it entirely.
+::caution
+There's a [known issue](https://reka-ui.com/docs/components/dialog#scrollable-overlay) where clicking on the scrollbar may unintentionally close the dialog on some operating systems.
 ::
 
-### Disable dismissal
+### Fullscreen
 
-Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
+Use the `fullscreen` prop to make the Modal fullscreen.
 
 ::component-code
 ---
 prettier: true
 ignore:
   - title
-  - dismissible
+  - fullscreen
 props:
-  dismissible: false
-  title: 'Modal non-dismissible'
+  fullscreen: true
+  title: 'Modal fullscreen'
 slots:
   default: |
 
@@ -294,13 +351,33 @@ slots:
 
   body: |
 
-    <Placeholder class="h-48" />
+    <Placeholder class="h-full" />
 ---
 
 :u-button{label="Open" color="neutral" variant="subtle"}
 
 #body
-:placeholder{class="h-48"}
+:placeholder{class="h-full"}
+::
+
+## Examples
+
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'modal-open-example'
+---
+::
+
+::note
+In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
+::
+
+::tip
+This allows you to move the trigger outside of the Modal or remove it entirely.
 ::
 
 ### Programmatic usage
diff --git a/docs/content/docs/2.components/popover.md b/docs/content/docs/2.components/popover.md
index 46aae47f60..cc7c6e6976 100644
--- a/docs/content/docs/2.components/popover.md
+++ b/docs/content/docs/2.components/popover.md
@@ -165,32 +165,40 @@ slots:
 :placeholder{class="size-48 m-4 inline-flex"}
 ::
 
-## Examples
+### Dismissible
 
-### Control open state
+Use the `dismissible` prop to control whether the Popover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
 
-You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+::note
+A `close:prevent` event will be emitted when the user tries to close it.
+::
+
+::tip
+You can combine `modal: false` with `dismissible: false` to make the Popover's background interactive without closing it.
+::
 
 ::component-example
 ---
-name: 'popover-open-example'
+name: 'popover-dismissible-example'
 ---
 ::
 
-::note
-In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
-::
+## Examples
 
-### Disable dismissal
+### Control open state
 
-Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
 
 ::component-example
 ---
-name: 'popover-dismissible-example'
+name: 'popover-open-example'
 ---
 ::
 
+::note
+In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
+::
+
 ### With command palette
 
 You can use a [CommandPalette](/docs/components/command-palette) component inside the Popover's content.
diff --git a/docs/content/docs/2.components/slideover.md b/docs/content/docs/2.components/slideover.md
index ccb200a5d3..2295c10fd3 100644
--- a/docs/content/docs/2.components/slideover.md
+++ b/docs/content/docs/2.components/slideover.md
@@ -197,9 +197,9 @@ slots:
 :placeholder{class="h-full min-h-48"}
 ::
 
-### Overlay
+### Transition
 
-Use the `overlay` prop to control whether the Slideover has an overlay or not. Defaults to `true`.
+Use the `transition` prop to control whether the Slideover is animated or not. Defaults to `true`.
 
 ::component-code
 ---
@@ -207,8 +207,8 @@ prettier: true
 ignore:
   - title
 props:
-  overlay: false
-  title: 'Slideover without overlay'
+  transition: false
+  title: 'Slideover without transition'
 slots:
   default: |
 
@@ -225,9 +225,9 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-### Transition
+### Overlay
 
-Use the `transition` prop to control whether the Slideover is animated or not. Defaults to `true`.
+Use the `overlay` prop to control whether the Slideover has an overlay or not. Defaults to `true`.
 
 ::component-code
 ---
@@ -235,8 +235,8 @@ prettier: true
 ignore:
   - title
 props:
-  transition: false
-  title: 'Slideover without transition'
+  overlay: false
+  title: 'Slideover without overlay'
 slots:
   default: |
 
@@ -253,38 +253,58 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-## Examples
+### Interactive
 
-### Control open state
+Use the `modal` prop to control whether the Slideover blocks interaction with outside content. Defaults to `true`.
 
-You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+::note
+When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
+::
 
-::component-example
+::component-code
 ---
-name: 'slideover-open-example'
+prettier: true
+ignore:
+  - title
+props:
+  modal: false
+  title: 'Slideover interactive'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
 ---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
 ::
 
+### Dismissible
+
+Use the `dismissible` prop to control whether the Slideover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
+
 ::note
-In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
+A `close:prevent` event will be emitted when the user tries to close it.
 ::
 
 ::tip
-This allows you to move the trigger outside of the Slideover or remove it entirely.
+You can combine `modal: false` with `dismissible: false` to make the Slideover's background interactive without closing it.
 ::
 
-### Disable dismissal
-
-Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
-
 ::component-code
 ---
 prettier: true
 ignore:
   - title
-  - dismissible
 props:
   dismissible: false
+  modal: true
   title: 'Slideover non-dismissible'
 slots:
   default: |
@@ -302,6 +322,26 @@ slots:
 :placeholder{class="h-full"}
 ::
 
+## Examples
+
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'slideover-open-example'
+---
+::
+
+::note
+In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
+::
+
+::tip
+This allows you to move the trigger outside of the Slideover or remove it entirely.
+::
+
 ### Programmatic usage
 
 You can use the [`useOverlay`](/docs/composables/use-overlay) composable to open a Slideover programmatically.

From 1ba3e3b080dd9d7a591d8219e3845fca6b529fd6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 16:25:34 +0200
Subject: [PATCH 4/6] docs(search): move ai assistant at the top

---
 docs/app/components/search/Search.vue     | 33 ++------------------
 docs/app/components/search/SearchChat.vue |  3 +-
 docs/app/composables/useSearch.ts         | 37 ++++++++++++++++++++++-
 playgrounds/nuxt/app/pages/chat.vue       | 25 ++++++++++++---
 4 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/docs/app/components/search/Search.vue b/docs/app/components/search/Search.vue
index ba80d2b5c0..e0f3aa64d3 100644
--- a/docs/app/components/search/Search.vue
+++ b/docs/app/components/search/Search.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { UIMessage } from 'ai'
 import type { ContentNavigationItem } from '@nuxt/content'
 
 interface ContentSearchFile {
@@ -15,39 +14,10 @@ defineProps<{
   navigation?: ContentNavigationItem[]
 }>()
 
-const chat = ref(false)
-const fullscreen = ref(false)
-const searchTerm = ref('')
-const messages = ref<UIMessage[]>([])
-
 const { frameworks } = useFrameworks()
-const { links } = useSearch()
+const { links, fullscreen, chat, searchTerm, messages } = useSearch()
 
 const groups = computed(() => [{
-  id: 'ai',
-  label: 'Assistant',
-  ignoreFilter: true,
-  items: [{
-    label: 'Ask Nuxt AI',
-    icon: 'i-lucide-bot',
-    ui: {
-      itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
-    },
-    onSelect: (e: any) => {
-      e.preventDefault()
-
-      messages.value = searchTerm.value
-        ? [{
-            id: '1',
-            role: 'user',
-            parts: [{ type: 'text', text: searchTerm.value }]
-          }]
-        : []
-
-      chat.value = true
-    }
-  }]
-}, {
   id: 'framework',
   label: 'Framework',
   items: frameworks.value
@@ -55,6 +25,7 @@ const groups = computed(() => [{
 
 function onClose() {
   chat.value = false
+
   fullscreen.value = false
 }
 </script>
diff --git a/docs/app/components/search/SearchChat.vue b/docs/app/components/search/SearchChat.vue
index 44a93f8519..bb32b3f98d 100644
--- a/docs/app/components/search/SearchChat.vue
+++ b/docs/app/components/search/SearchChat.vue
@@ -98,13 +98,14 @@ const getCachedToolMessage = useMemoize((state: State, toolName: string, input:
 <template>
   <UChatPalette>
     <UChatMessages
+      should-auto-scroll
       :messages="chat.messages"
       :status="chat.status"
       :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
       :assistant="{ icon: 'i-lucide-bot' }"
     >
       <template #content="{ message }">
-        <template v-for="(part, index) in message.parts" :key="`${message.id}-${index}`">
+        <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
           <MDCCached
             v-if="part.type === 'text'"
             :value="part.text"
diff --git a/docs/app/composables/useSearch.ts b/docs/app/composables/useSearch.ts
index 5fe82ed552..7b8f4d484e 100644
--- a/docs/app/composables/useSearch.ts
+++ b/docs/app/composables/useSearch.ts
@@ -1,7 +1,38 @@
+import type { UIMessage } from 'ai'
+
 export function useSearch() {
   const route = useRoute()
 
+  const chat = ref(false)
+  const fullscreen = ref(false)
+  const searchTerm = ref('')
+  const messages = ref<UIMessage[]>([])
+
   const links = computed(() => [{
+    label: 'Ask AI',
+    description: 'Ask the AI assistant powered by our custom MCP server for help.',
+    icon: 'i-lucide-bot',
+    ui: {
+      itemLeadingIcon: 'group-data-highlighted:not-group-data-disabled:text-primary'
+    },
+    onSelect: (e: any) => {
+      e.preventDefault()
+
+      messages.value = searchTerm.value
+        ? [{
+            id: '1',
+            role: 'user',
+            parts: [{ type: 'text', text: searchTerm.value }]
+          }]
+        : [{
+            id: '1',
+            role: 'assistant',
+            parts: [{ type: 'text', text: 'Hello, how can I help you today?' }]
+          }]
+
+      chat.value = true
+    }
+  }, {
     label: 'Get Started',
     description: 'Learn how to get started with Nuxt UI.',
     icon: 'i-lucide-square-play',
@@ -64,6 +95,10 @@ export function useSearch() {
   }])
 
   return {
-    links
+    links,
+    chat,
+    fullscreen,
+    searchTerm,
+    messages
   }
 }
diff --git a/playgrounds/nuxt/app/pages/chat.vue b/playgrounds/nuxt/app/pages/chat.vue
index b8788f5424..5cdd9d754b 100644
--- a/playgrounds/nuxt/app/pages/chat.vue
+++ b/playgrounds/nuxt/app/pages/chat.vue
@@ -47,16 +47,33 @@ function onSubmit() {
       :spacing-offset="48"
     >
       <template #content="{ message }">
-        <template v-for="(part, index) in message.parts" :key="`${message.id}-${index}`">
-          <MDC v-if="part.type === 'text'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
-          <p v-else-if="part.type === 'reasoning'" class="text-sm text-muted my-5">
+        <template
+          v-for="(part, index) in message.parts"
+          :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
+        >
+          <MDC
+            v-if="part.type === 'text'"
+            :value="part.text"
+            :cache-key="`${message.id}-${index}`"
+            class="*:first:mt-0 *:last:mb-0"
+          />
+          <p
+            v-else-if="part.type === 'reasoning'"
+            class="text-sm text-muted my-5"
+          >
             {{ part.state === 'done' ? 'Thoughts' : 'Thinking...' }}
           </p>
         </template>
       </template>
     </UChatMessages>
 
-    <UChatPrompt v-model="input" :error="chat.error" variant="subtle" class="sticky bottom-0" @submit="onSubmit">
+    <UChatPrompt
+      v-model="input"
+      :error="chat.error"
+      variant="subtle"
+      class="sticky bottom-0"
+      @submit="onSubmit"
+    >
       <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
     </UChatPrompt>
   </div>

From f42360d47a9a502e56d268615a4c0c4ba60b7f6b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 17:20:20 +0200
Subject: [PATCH 5/6] up

---
 .../popover/PopoverDismissibleExample.vue     |  2 +-
 .../content/docs/2.components/context-menu.md | 37 +++++++++++++++++++
 docs/content/docs/2.components/drawer.md      |  2 +-
 .../docs/2.components/dropdown-menu.md        | 34 +++++++++++++++++
 docs/content/docs/2.components/modal.md       |  2 +-
 docs/content/docs/2.components/popover.md     | 31 ++++++++++++++--
 docs/content/docs/2.components/slideover.md   |  2 +-
 src/runtime/components/Modal.vue              |  1 +
 8 files changed, 103 insertions(+), 8 deletions(-)

diff --git a/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
index 8ea2d4a927..ae57d8c751 100644
--- a/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
+++ b/docs/app/components/content/examples/popover/PopoverDismissibleExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <UPopover :dismissible="false" :modal="false" :ui="{ content: 'p-4' }">
+  <UPopover :dismissible="false" :ui="{ content: 'p-4' }">
     <UButton label="Open" color="neutral" variant="subtle" />
 
     <template #content="{ close }">
diff --git a/docs/content/docs/2.components/context-menu.md b/docs/content/docs/2.components/context-menu.md
index 686844bbf1..8985a40959 100644
--- a/docs/content/docs/2.components/context-menu.md
+++ b/docs/content/docs/2.components/context-menu.md
@@ -218,6 +218,43 @@ slots:
 :div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the ContextMenu blocks interaction with outside content. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - ui.content
+external:
+  - items
+externalTypes:
+  - ContextMenuItem[]
+props:
+  modal: false
+  items:
+    - label: System
+      icon: i-lucide-monitor
+    - label: Light
+      icon: i-lucide-sun
+    - label: Dark
+      icon: i-lucide-moon
+  ui:
+    content: 'w-48'
+slots:
+  default: |
+
+    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
+      Right click here
+    </div>
+---
+
+:div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]
+::
+
+
 ### Disabled
 
 Use the `disabled` prop to disable the ContextMenu.
diff --git a/docs/content/docs/2.components/drawer.md b/docs/content/docs/2.components/drawer.md
index ea9c030507..bd95da43cc 100644
--- a/docs/content/docs/2.components/drawer.md
+++ b/docs/content/docs/2.components/drawer.md
@@ -216,7 +216,7 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
-### Interactive
+### Modal
 
 Use the `modal` prop to control whether the Drawer blocks interaction with outside content. Defaults to `true`.
 
diff --git a/docs/content/docs/2.components/dropdown-menu.md b/docs/content/docs/2.components/dropdown-menu.md
index d9991fcbb2..a8514b98a6 100644
--- a/docs/content/docs/2.components/dropdown-menu.md
+++ b/docs/content/docs/2.components/dropdown-menu.md
@@ -307,6 +307,40 @@ The `size` prop will not be proxied to the Button, you need to set it yourself.
 When using the same size, the DropdownMenu items will be perfectly aligned with the Button.
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the DropdownMenu blocks interaction with outside content. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - ui.content
+external:
+  - items
+externalTypes:
+  - DropdownMenuItem[]
+props:
+  modal: false
+  items:
+    - label: Profile
+      icon: i-lucide-user
+    - label: Billing
+      icon: i-lucide-credit-card
+    - label: Settings
+      icon: i-lucide-cog
+  ui:
+    content: 'w-48'
+slots:
+  default: |
+
+    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
+---
+
+:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the DropdownMenu.
diff --git a/docs/content/docs/2.components/modal.md b/docs/content/docs/2.components/modal.md
index 2a7695be48..ae9ff85832 100644
--- a/docs/content/docs/2.components/modal.md
+++ b/docs/content/docs/2.components/modal.md
@@ -225,7 +225,7 @@ slots:
 :placeholder{class="h-48"}
 ::
 
-### Interactive
+### Modal
 
 Use the `modal` prop to control whether the Modal blocks interaction with outside content. Defaults to `true`.
 
diff --git a/docs/content/docs/2.components/popover.md b/docs/content/docs/2.components/popover.md
index cc7c6e6976..dad05af2d9 100644
--- a/docs/content/docs/2.components/popover.md
+++ b/docs/content/docs/2.components/popover.md
@@ -165,6 +165,33 @@ slots:
 :placeholder{class="size-48 m-4 inline-flex"}
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the Popover blocks interaction with outside content. Defaults to `false`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  modal: true
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
 ### Dismissible
 
 Use the `dismissible` prop to control whether the Popover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
@@ -173,10 +200,6 @@ Use the `dismissible` prop to control whether the Popover is dismissible when cl
 A `close:prevent` event will be emitted when the user tries to close it.
 ::
 
-::tip
-You can combine `modal: false` with `dismissible: false` to make the Popover's background interactive without closing it.
-::
-
 ::component-example
 ---
 name: 'popover-dismissible-example'
diff --git a/docs/content/docs/2.components/slideover.md b/docs/content/docs/2.components/slideover.md
index 2295c10fd3..a6c45df4de 100644
--- a/docs/content/docs/2.components/slideover.md
+++ b/docs/content/docs/2.components/slideover.md
@@ -253,7 +253,7 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-### Interactive
+### Modal
 
 Use the `modal` prop to control whether the Slideover blocks interaction with outside content. Defaults to `true`.
 
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index eeaf0b1647..d9c36dd0eb 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -222,6 +222,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 
       <template v-else>
         <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
         <ReuseContentTemplate />
       </template>
     </DialogPortal>

From 436ebf214e23a70d10e7e369ce11285fc4ab5529 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Oct 2025 17:28:56 +0200
Subject: [PATCH 6/6] Apply suggestion from @benjamincanac

---
 playgrounds/nuxt/app/pages/components/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playgrounds/nuxt/app/pages/components/modal.vue b/playgrounds/nuxt/app/pages/components/modal.vue
index 04c1fc78f3..d243f0bf47 100644
--- a/playgrounds/nuxt/app/pages/components/modal.vue
+++ b/playgrounds/nuxt/app/pages/components/modal.vue
@@ -24,7 +24,7 @@ function openModal() {
   <Navbar />
 
   <div class="flex flex-col gap-2 min-h-0">
-    <UModal title="First modal" :overlay="false">
+    <UModal title="First modal">
       <UButton color="neutral" variant="outline" label="Open with nested" />
 
       <template #footer>