Merge remote-tracking branch 'origin/v3' into feat/detect-theme-hash

docs/app/components/content/SupportedLanguages.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<{
 function getEmojiFlag(locale: string): string {
   const languageToCountry: Record<string, string> = {
     ar: 'sa',
+    bn: 'bd',
     cs: 'cz',
     da: 'dk',
     el: 'gr',

docs/app/components/theme-picker/ThemePicker.vue

@@ -140,7 +140,7 @@ function setBlackAsPrimary(value: boolean) {
           Theme
         </legend>
 
-        <div class="flex gap-1 -mx-2">
+        <div class="grid grid-cols-3 gap-1 -mx-2">
           <ThemePickerButton
             v-for="m in modes"
             :key="m.label"

docs/app/components/theme-picker/ThemePickerButton.vue

@@ -11,15 +11,16 @@ defineProps<{
   <UButton
     size="sm"
     color="neutral"
+    variant="outline"
     :icon="icon"
     :label="label"
-    :variant="selected ? 'soft' : 'outline'"
+    class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
-    class="capitalize ring-(--ui-border) rounded-(--ui-radius) text-[11px]"
+    :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
   >
     <template v-if="chip" #leading>
       <slot name="leading">
         <span
-          class="inline-block w-2 h-2 rounded-full"
+          class="inline-block size-2 rounded-full"
           :class="`bg-(--color-light) dark:bg-(--color-dark)`"
           :style="{
             '--color-light': `var(--color-${chip}-500)`,

docs/content/2.composables/define-shortcuts.md

@@ -19,7 +19,6 @@ defineShortcuts({
 </script>
 ```
 
-- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`.
 - The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/) to handle keydown events.
 - For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API documentation. Note that the key should be written in lowercase.
 
@@ -47,8 +46,8 @@ Shortcuts are defined using the following format:
 
 #### Modifiers
 
-- `meta`: Represents Command (⌘) on macOS and Control on other platforms
+- `meta`: Represents `⌘ Command` on macOS and `⊞ Windows` on Windows
-- `ctrl`: Represents Control key
+- `ctrl`: Represents `Ctrl` on all platforms
 - `shift`: Used for alphabetic keys when Shift is required
 
 #### Special Keys

docs/content/3.components/drawer.md

@@ -96,35 +96,6 @@ Use the `direction` prop to control the direction of the Drawer. Defaults to `bo
 ::component-code
 ---
 prettier: true
-items:
-  direction:
-    - top
-    - bottom
-props:
-  direction: 'top'
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-  content: |
-
-    <Placeholder class="h-96 m-4" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
-
-#content
-:placeholder{class="h-96 m-4"}
-::
-
-::component-code
----
-prettier: true
-items:
-  direction:
-    - right
-    - left
 props:
   direction: 'right'
 slots:
@@ -134,13 +105,39 @@ slots:
 
   content: |
 
-    <Placeholder class="w-96 m-4" />
+    <Placeholder class="min-w-96 min-h-96 size-full m-4" />
 ---
 
 :u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
-:placeholder{class="w-96 m-4"}
+:placeholder{class="min-w-96 min-h-96 size-full m-4"}
+::
+
+### Inset
+
+Use the `inset` prop to inset the Drawer from the edges.
+
+::component-code
+---
+prettier: true
+props:
+  direction: 'right'
+  inset: true
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+  content: |
+
+    <Placeholder class="min-w-96 min-h-96 size-full m-4" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
+
+#content
+:placeholder{class="min-w-96 min-h-96 size-full m-4"}
 ::
 
 ### Handle

docs/nuxt.config.ts

@@ -97,7 +97,8 @@ export default defineNuxtConfig({
         // '/api/pulls.json'
       ],
       crawlLinks: true,
-      autoSubfolderIndex: false
+      autoSubfolderIndex: false,
+      failOnError: false
     },
     cloudflare: {
       pages: {
@@ -155,6 +156,7 @@ export default defineNuxtConfig({
   image: {
     provider: 'ipx'
   },
+
   llms: {
     domain: 'https://ui3.nuxt.dev',
     title: 'Nuxt UI v3',

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "^3.1.1",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@1211b76",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@703e687",
     "@nuxthub/core": "^0.8.17",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.0",

playground/app/pages/components/drawer.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 const open = ref(false)
+const inset = ref(false)
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
-    <UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
+    <USwitch v-model="inset" label="Inset" class="mb-4" />
+
+    <UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself." :inset="inset">
       <UButton color="neutral" variant="outline" label="Open with v-model" />
 
       <template #body>
@@ -17,7 +20,7 @@ const open = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work.">
+    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
       <UButton color="neutral" variant="outline" label="Open with scale" />
 
       <template #body>
@@ -25,7 +28,7 @@ const open = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false">
+    <UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 
       <template #body>
@@ -33,7 +36,7 @@ const open = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with left direction" direction="left" :handle="false">
+    <UDrawer title="Drawer with left direction" direction="left" :handle="false" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on left" />
 
       <template #body>
@@ -41,7 +44,7 @@ const open = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with top direction" direction="top" :handle="false">
+    <UDrawer title="Drawer with top direction" direction="top" :handle="false" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on top" />
 
       <template #body>
@@ -49,7 +52,7 @@ const open = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with right direction" direction="right" :handle="false">
+    <UDrawer title="Drawer with right direction" direction="right" :handle="false" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on right" />
 
       <template #body>

pnpm-lock.yaml

@@ -268,8 +268,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@1211b76
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@703e687
-        version: https://pkg.pr.new/@nuxt/ui-pro@1211b76(magicast@0.3.5)(rollup@4.34.1)(typescript@5.6.3)
+        version: https://pkg.pr.new/@nuxt/ui-pro@703e687(magicast@0.3.5)(rollup@4.34.1)(typescript@5.6.3)
       '@nuxthub/core':
         specifier: ^0.8.17
         version: 0.8.17(db0@0.2.3(@libsql/client@0.14.0)(better-sqlite3@11.8.1))(ioredis@5.4.2)(magicast@0.3.5)(rollup@4.34.1)(vite@6.0.11(@types/node@22.13.0)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))
@@ -1642,8 +1642,8 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@1211b76':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@703e687':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@1211b76}
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@703e687}
     version: 3.0.0-alpha.12
     peerDependencies:
       typescript: 5.6.3
@@ -4038,6 +4038,9 @@ packages:
   git-url-parse@16.0.0:
     resolution: {integrity: sha512-Y8iAF0AmCaqXc6a5GYgPQW9ESbncNLOL+CeQAJRhmWUOmnPkKpBYeWYp4mFd3LA5j53CdGDdslzX12yEBVHQQg==}
 
+  git-url-parse@16.0.1:
+    resolution: {integrity: sha512-mcD36GrhAzX5JVOsIO52qNpgRyFzYWRbU1VSRFCvJt1IJvqfvH427wWw/CFqkWvjVPtdG5VTx4MKUeC5GeFPDQ==}
+
   github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
 
@@ -8610,7 +8613,7 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@1211b76(magicast@0.3.5)(rollup@4.34.1)(typescript@5.6.3)':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@703e687(magicast@0.3.5)(rollup@4.34.1)(typescript@5.6.3)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)(rollup@4.34.1)
       '@nuxt/schema': 3.15.4
@@ -8618,12 +8621,13 @@ snapshots:
       '@vueuse/core': 12.6.1(typescript@5.6.3)
       consola: 3.4.0
       defu: 6.1.4
-      git-url-parse: 16.0.0
+      git-url-parse: 16.0.1
       ofetch: 1.4.1
       parse-git-config: 3.0.0
       pkg-types: 1.3.1
       scule: 1.3.0
       typescript: 5.6.3
+      vue-component-type-helpers: 2.2.0
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -11368,6 +11372,10 @@ snapshots:
     dependencies:
       git-up: 8.0.0
 
+  git-url-parse@16.0.1:
+    dependencies:
+      git-up: 8.0.0
+
   github-from-package@0.0.0: {}
 
   github-slugger@2.0.0: {}

src/runtime/components/Drawer.vue

@@ -19,6 +19,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
   as?: any
   title?: string
   description?: string
+  /**
+   * Whether to inset the drawer from the edges.
+   * @defaultValue false
+   */
+  inset?: boolean
   /** The content of the drawer. */
   content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
   /**
@@ -80,7 +85,8 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'c
 const contentProps = toRef(() => props.content)
 
 const ui = computed(() => drawer({
-  direction: props.direction
+  direction: props.direction,
+  inset: props.inset
 }))
 </script>
 

src/runtime/components/Table.vue

@@ -161,7 +161,7 @@ export type TableSlots<T> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import { Primitive, useForwardProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
 import { reactiveOmit } from '@vueuse/core'
@@ -196,10 +196,8 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const paginationState = defineModel<PaginationState>('pagination', { default: {} })
 
-const tableProps = useForwardProps(reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'))
-
 const tableApi = useVueTable({
-  ...tableProps,
+  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
   data,
   columns: columns.value,
   getCoreRowModel: getCoreRowModel(),

src/runtime/locale/bn.ts

@@ -0,0 +1,55 @@
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale({
+  name: 'বাংলা',
+  code: 'bn',
+  messages: {
+    inputMenu: {
+      noMatch: 'কোন মিল পাওয়া যায়নি',
+      noData: 'কোন তথ্য নেই',
+      create: '"{label}" তৈরি করুন'
+    },
+    calendar: {
+      prevYear: 'পূর্ববর্তী বছর',
+      nextYear: 'পরবর্তী বছর',
+      prevMonth: 'পূর্ববর্তী মাস',
+      nextMonth: 'পরবর্তী মাস'
+    },
+    inputNumber: {
+      increment: 'বৃদ্ধি করুন',
+      decrement: 'হ্রাস করুন'
+    },
+    commandPalette: {
+      placeholder: 'কমান্ড টাইপ করুন বা অনুসন্ধান করুন...',
+      noMatch: 'কোন মিল পাওয়া যায়নি',
+      noData: 'কোন তথ্য নেই',
+      close: 'বন্ধ করুন'
+    },
+    selectMenu: {
+      noMatch: 'কোন মিল পাওয়া যায়নি',
+      noData: 'কোন তথ্য নেই',
+      create: '"{label}" তৈরি করুন',
+      search: 'অনুসন্ধান করুন...'
+    },
+    toast: {
+      close: 'বন্ধ করুন'
+    },
+    carousel: {
+      prev: 'পূর্ববর্তী',
+      next: 'পরবর্তী',
+      goto: 'স্লাইড {slide} এ যান'
+    },
+    modal: {
+      close: 'বন্ধ করুন'
+    },
+    slideover: {
+      close: 'বন্ধ করুন'
+    },
+    alert: {
+      close: 'বন্ধ করুন'
+    },
+    table: {
+      noData: 'কোন তথ্য নেই'
+    }
+  }
+})

src/runtime/locale/index.ts

@@ -1,5 +1,6 @@
 export { default as ar } from './ar'
 export { default as az } from './az'
+export { default as bn } from './bn'
 export { default as cs } from './cs'
 export { default as da } from './da'
 export { default as de } from './de'

src/theme/drawer.ts

@@ -13,34 +13,87 @@ export default {
   variants: {
     direction: {
       top: {
-        content: 'top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]',
+        content: 'mb-24 flex-col-reverse',
         handle: 'mb-4'
       },
       right: {
-        content: 'right-4 flex-row',
+        content: 'flex-row',
         handle: 'ml-4'
       },
       bottom: {
-        content: 'bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]',
+        content: 'mt-24 flex-col',
         handle: 'mt-4'
       },
       left: {
-        content: 'left-4 flex-row-reverse',
+        content: 'flex-row-reverse',
         handle: 'mr-4'
       }
+    },
+    inset: {
+      true: {
+        content: 'rounded-[calc(var(--ui-radius)*2)] after:hidden'
+      }
     }
   },
   compoundVariants: [{
     direction: ['top', 'bottom'],
     class: {
-      content: 'inset-x-0 h-auto max-h-[96%]',
+      content: 'h-auto max-h-[96%]',
       handle: 'w-12 h-1.5 mx-auto'
     }
   }, {
     direction: ['right', 'left'],
     class: {
-      content: 'inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden',
+      content: 'w-auto max-w-[calc(100%-2rem)]',
       handle: 'h-12 w-1.5 mt-auto mb-auto'
     }
+  }, {
+    direction: 'top',
+    inset: true,
+    class: {
+      content: 'inset-x-4 top-4'
+    }
+  }, {
+    direction: 'top',
+    inset: false,
+    class: {
+      content: 'inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'bottom',
+    inset: true,
+    class: {
+      content: 'inset-x-4 bottom-4'
+    }
+  }, {
+    direction: 'bottom',
+    inset: false,
+    class: {
+      content: 'inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'left',
+    inset: true,
+    class: {
+      content: 'inset-y-4 left-4'
+    }
+  }, {
+    direction: 'left',
+    inset: false,
+    class: {
+      content: 'inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'right',
+    inset: true,
+    class: {
+      content: 'inset-y-4 right-4'
+    }
+  }, {
+    direction: 'right',
+    inset: false,
+    class: {
+      content: 'inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]'
+    }
   }]
 }

test/components/Drawer.spec.ts

@@ -1,15 +1,19 @@
 import { describe, it, expect } from 'vitest'
 import Drawer, { type DrawerProps, type DrawerSlots } from '../../src/runtime/components/Drawer.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/drawer'
 
 describe('Drawer', () => {
+  const directions = Object.keys(theme.variants.direction) as any
+
   const props = { open: true, portal: false }
 
   it.each([
     // Props
     ['with title', { props: { ...props, title: 'Title' } }],
     ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
-    ['with left direction', { props: { ...props, direction: 'left' as const, title: 'Title', description: 'Description' } }],
+    ...directions.map((direction: string) => [`with direction ${direction}`, { props: { ...props, direction, title: 'Title', description: 'Description' } }]),
+    ...directions.map((direction: string) => [`with direction ${direction} inset`, { props: { ...props, direction, inset: true, title: 'Title', description: 'Description' } }]),
     ['with top direction', { props: { ...props, direction: 'top' as const, title: 'Title', description: 'Description' } }],
     ['with right direction', { props: { ...props, direction: 'right' as const, title: 'Title', description: 'Description' } }],
     ['without handle', { props: { ...props, handle: false, title: 'Title', description: 'Description' } }],

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

@@ -6,7 +6,7 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -25,7 +25,7 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-(--ui-bg-elevated)">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -44,7 +44,7 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
 </div>
 
@@ -58,7 +58,7 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -77,7 +77,7 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -99,7 +99,7 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -112,6 +112,182 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction bottom correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction bottom inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction left correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction left inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction right correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction right inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction top correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction top inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -121,7 +297,7 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -140,7 +316,7 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
@@ -150,28 +326,6 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 </div>
 
 
-<!--teleport end-->"
-`;
-
-exports[`Drawer > renders with left direction correctly 1`] = `
-"<!--v-if-->
-<!--teleport start-->
-
-
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
-      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
-    </div>
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-</div>
-
-
 <!--teleport end-->"
 `;
 
@@ -181,7 +335,7 @@ exports[`Drawer > renders with right direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -203,7 +357,7 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -225,7 +379,7 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -247,7 +401,7 @@ exports[`Drawer > renders with top direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -269,7 +423,7 @@ exports[`Drawer > renders with ui correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -288,7 +442,7 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <!--v-if-->
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -310,7 +464,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">

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

@@ -6,7 +6,7 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -25,7 +25,7 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-(--ui-bg-elevated)">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -44,7 +44,7 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
 </div>
 
@@ -58,7 +58,7 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -77,7 +77,7 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -99,7 +99,7 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -112,6 +112,182 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction bottom correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction bottom inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction left correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction left inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction right correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction right inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction top correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with direction top inset correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -121,7 +297,7 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -140,7 +316,7 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
@@ -150,28 +326,6 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 </div>
 
 
-<!--teleport end-->"
-`;
-
-exports[`Drawer > renders with left direction correctly 1`] = `
-"<!--v-if-->
-<!--teleport start-->
-
-
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
-  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
-    <div class="">
-      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
-      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
-    </div>
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-</div>
-
-
 <!--teleport end-->"
 `;
 
@@ -181,7 +335,7 @@ exports[`Drawer > renders with right direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -203,7 +357,7 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -225,7 +379,7 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -247,7 +401,7 @@ exports[`Drawer > renders with top direction correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -269,7 +423,7 @@ exports[`Drawer > renders with ui correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
@@ -288,7 +442,7 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <!--v-if-->
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
@@ -310,7 +464,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
   <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">