From fabf42735e19bdb08fa1627bd5e6be602e15e89d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 13:28:34 +0100
Subject: [PATCH 1/7] docs(nuxt.config): disable `nitro.prerender.failOnError`

---
 docs/nuxt.config.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index a90ddef6..cebecf26 100644
--- a/docs/nuxt.config.ts
+++ b/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',

From 6d9b9edc5524ad32abdec925c276519e1a1a59e4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 16:21:41 +0100
Subject: [PATCH 2/7] feat(Drawer): add `inset` prop

Resolves #2994
---
 docs/content/3.components/drawer.md           |  59 +++--
 playground/app/pages/components/drawer.vue    |  15 +-
 src/runtime/components/Drawer.vue             |   8 +-
 src/theme/drawer.ts                           |  65 ++++-
 test/components/Drawer.spec.ts                |   6 +-
 .../__snapshots__/Drawer-vue.spec.ts.snap     | 228 +++++++++++++++---
 .../__snapshots__/Drawer.spec.ts.snap         | 228 +++++++++++++++---
 7 files changed, 490 insertions(+), 119 deletions(-)

diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index 156dcf77..1930bed8 100644
--- a/docs/content/3.components/drawer.md
+++ b/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
diff --git a/playground/app/pages/components/drawer.vue b/playground/app/pages/components/drawer.vue
index b940b1ef..d47f852b 100644
--- a/playground/app/pages/components/drawer.vue
+++ b/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>
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 3dc44cae..0df918aa 100644
--- a/src/runtime/components/Drawer.vue
+++ b/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>
 
diff --git a/src/theme/drawer.ts b/src/theme/drawer.ts
index 0e78f3aa..34b082fe 100644
--- a/src/theme/drawer.ts
+++ b/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)]'
+    }
   }]
 }
diff --git a/test/components/Drawer.spec.ts b/test/components/Drawer.spec.ts
index 0ec868e0..6acebec5 100644
--- a/test/components/Drawer.spec.ts
+++ b/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' } }],
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index 4d5d8818..2722f4bb 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/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="">
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index f36cfa57..4d993d4d 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/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="">

From 76c527d8b9b3d2b8e31b5646e558e6da86c41308 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 16:33:16 +0100
Subject: [PATCH 3/7] docs(define-shortcuts): clarify meta key on windows

Resolves #3318
---
 docs/content/2.composables/define-shortcuts.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/content/2.composables/define-shortcuts.md b/docs/content/2.composables/define-shortcuts.md
index f344572d..2e3f5d9f 100644
--- a/docs/content/2.composables/define-shortcuts.md
+++ b/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
-- `ctrl`: Represents Control key
+- `meta`: Represents `⌘ Command` on macOS and `⊞ Windows` on Windows
+- `ctrl`: Represents `Ctrl` on all platforms
 - `shift`: Used for alphabetic keys when Shift is required
 
 #### Special Keys

From fa9205311644c0f927070f522dd6a0aa19d0eecb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 18:25:19 +0100
Subject: [PATCH 4/7] docs(ThemePicker): improve design

---
 docs/app/components/theme-picker/ThemePicker.vue       | 2 +-
 docs/app/components/theme-picker/ThemePickerButton.vue | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index a75b482b..fd3e06cf 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/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"
diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-picker/ThemePickerButton.vue
index d81de813..7dc4a49e 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/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-(--ui-radius) text-[11px]"
+    class="capitalize ring-(--ui-border) rounded-[calc(var(--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)`,

From f0553ebb496f2f4bad5fd5ab0b3006c9ee8edba3 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 18:43:33 +0100
Subject: [PATCH 5/7] fix(Table): proxy props without `useForwardProps`

https://github.com/nuxt/ui/issues/3255#issuecomment-2640503829
---
 src/runtime/components/Table.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 9e2375d1..c18ee2eb 100644
--- a/src/runtime/components/Table.vue
+++ b/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(),

From 1d09a2aa35944bc798cf53809ae227d05592a5bd Mon Sep 17 00:00:00 2001
From: "B. Jonson" <www.jbc.bd@gmail.com>
Date: Sat, 15 Feb 2025 23:45:54 +0600
Subject: [PATCH 6/7] =?UTF-8?q?feat(locale):=20add=20Bengali=20(=E0=A6=AC?=
 =?UTF-8?q?=E0=A6=BE=E0=A6=82=E0=A6=B2=E0=A6=BE)=20language=20(#3321)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../components/content/SupportedLanguages.vue |  1 +
 src/runtime/locale/bn.ts                      | 55 +++++++++++++++++++
 src/runtime/locale/index.ts                   |  1 +
 3 files changed, 57 insertions(+)
 create mode 100644 src/runtime/locale/bn.ts

diff --git a/docs/app/components/content/SupportedLanguages.vue b/docs/app/components/content/SupportedLanguages.vue
index 91ed019a..14eeb616 100644
--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/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',
diff --git a/src/runtime/locale/bn.ts b/src/runtime/locale/bn.ts
new file mode 100644
index 00000000..9bc10986
--- /dev/null
+++ b/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: 'কোন তথ্য নেই'
+    }
+  }
+})
diff --git a/src/runtime/locale/index.ts b/src/runtime/locale/index.ts
index 6a262da1..bea94cc5 100644
--- a/src/runtime/locale/index.ts
+++ b/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'

From 3a3ae07d881d165d2c4425790c08a1e2f438a4bd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 15 Feb 2025 19:02:06 +0100
Subject: [PATCH 7/7] docs(deps): update `@nuxt/ui-pro`

---
 docs/package.json |  2 +-
 pnpm-lock.yaml    | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index a538061c..fc4e13c2 100644
--- a/docs/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1885686..abe6fccb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -268,8 +268,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@1211b76
-        version: https://pkg.pr.new/@nuxt/ui-pro@1211b76(magicast@0.3.5)(rollup@4.34.1)(typescript@5.6.3)
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@703e687
+        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':
-    resolution: {tarball: 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@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: {}