From 496bf5e518c997a201ebe4c106b16f0c9083a31c Mon Sep 17 00:00:00 2001
From: gabrielstuff <gabriel@soixantecircuits.fr>
Date: Tue, 7 Jul 2026 16:51:58 +0200
Subject: [PATCH] feat(drawer): replace vaul-vue with reka-ui's native Drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrates UDrawer off vaul-vue onto reka-ui's Drawer primitives, closing the
SSR crash (`document is not defined`) that vaul-vue throws when the drawer
is force-mounted for SSR. reka-ui's Drawer is unstyled/headless, so the
open/close slide, live drag-follow transform, and overlay fade are now
authored as Tailwind utilities driven by reka's `--drawer-*` CSS vars,
matching the pattern already used for Slideover's enter/exit animations.

Behavioral notes:
- `dismissible: false` is now enforced centrally on the open-change reason
  (blocks escape/outside-press/swipe/programmatic-close-without-reason)
  since reka's swipe-to-dismiss bypasses the outside/escape DOM events
  Modal-style interception relies on.
- Nested drawers no longer need the `nested` prop — reka-ui detects nesting
  automatically via context.
- Dropped props with no reka-ui equivalent: `shouldScaleBackground`,
  `setBackgroundColorOnScale`, `scrollLockTimeout`, `fixed`, `noBodyStyles`,
  `handleOnly`, `preventScrollRestoration`, `closeThreshold`. `activeSnapPoint`
  is renamed to `snapPoint`/`defaultSnapPoint` to match reka's naming.

Updated the Drawer docs page and playground demo accordingly, and
regenerated snapshots for Drawer and the components that embed it
(DashboardSidebar, Header).
---
 .../examples/drawer/DrawerNestedExample.vue   |   2 +-
 docs/content/docs/2.components/drawer.md      |  83 +------
 docs/nuxt.config.ts                           |   4 +-
 package.json                                  |   1 -
 .../nuxt/app/pages/components/drawer.vue      |  12 +-
 playgrounds/nuxt/nuxt.config.ts               |   3 +-
 pnpm-lock.yaml                                |  50 -----
 src/runtime/components/Drawer.vue             |  98 ++++++---
 src/runtime/keyframes.css                     |  85 ++++++++
 src/theme/drawer.ts                           |  65 +++++-
 .../DashboardSidebar-vue.spec.ts.snap         |   6 +-
 .../DashboardSidebar.spec.ts.snap             |   6 +-
 .../__snapshots__/Drawer-vue.spec.ts.snap     | 206 +++++++++---------
 .../__snapshots__/Drawer.spec.ts.snap         | 206 +++++++++---------
 .../__snapshots__/Header-vue.spec.ts.snap     |   6 +-
 .../__snapshots__/Header.spec.ts.snap         |   6 +-
 16 files changed, 436 insertions(+), 403 deletions(-)

diff --git a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
index e1bf4124d0..cc1d6570bd 100644
--- a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
@@ -3,7 +3,7 @@
     <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #footer>
-      <UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+      <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
         <UButton color="neutral" variant="outline" label="Open nested" />
 
         <template #content>
diff --git a/docs/content/docs/2.components/drawer.md b/docs/content/docs/2.components/drawer.md
index 381851938b..7d7722ebe9 100644
--- a/docs/content/docs/2.components/drawer.md
+++ b/docs/content/docs/2.components/drawer.md
@@ -4,7 +4,7 @@ category: overlay
 links:
   - label: Drawer
     icon: i-custom-reka-ui
-    to: https://github.com/unovue/vaul-vue
+    to: https://reka-ui.com/docs/components/drawer
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Drawer.vue
@@ -230,31 +230,6 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
-### Handle Only
-
-Use the `handle-only` prop to only allow the Drawer to be dragged by the handle.
-
-::component-code
----
-prettier: true
-props:
-  handleOnly: true
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-  content: |
-
-    <Placeholder class="h-48 m-4" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
-
-#content
-:placeholder{class="h-48 m-4"}
-::
-
 ### Overlay
 
 Use the `overlay` prop to control whether the Drawer has an overlay or not. Defaults to `true`.
@@ -328,60 +303,6 @@ name: 'drawer-dismissible-example'
 ---
 ::
 
-### Scale Background
-
-Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.
-
-::component-code
----
-prettier: true
-props:
-  shouldScaleBackground: true
-  setBackgroundColorOnScale: true
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-  content: |
-
-    <Placeholder class="h-48 m-4" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
-
-#content
-:placeholder{class="h-screen m-4"}
-::
-
-::warning
-Make sure to add the `data-vaul-drawer-wrapper` directive to a parent element of your app to make this work.
-
-```vue [app.vue]
-<template>
-  <UApp>
-    <div class="bg-default" data-vaul-drawer-wrapper>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-    </div>
-  </UApp>
-</template>
-```
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  app: {
-    rootAttrs: {
-      'data-vaul-drawer-wrapper': '',
-      'class': 'bg-default'
-    }
-  }
-})
-```
-
-::
-
 ## Examples
 
 ### Control open state
@@ -416,7 +337,7 @@ name: 'drawer-responsive-example'
 
 ### Nested drawers
 
-You can nest drawers within each other by using the `nested` prop.
+You can nest drawers within each other — nesting is detected automatically, no extra prop is needed.
 
 ::component-example
 ---
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index d7c9c3d504..01fa66f6c5 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -42,8 +42,7 @@ export default defineNuxtConfig({
       }
     },
     rootAttrs: {
-      'data-vaul-drawer-wrapper': '',
-      'class': 'bg-default'
+      class: 'bg-default'
     }
   },
 
@@ -251,7 +250,6 @@ export default defineNuxtConfig({
         'tailwind-variants',
         '@comark/vue',
         '@comark/vue/plugins/highlight',
-        'vaul-vue',
         '@vueuse/integrations/useFuse',
         '@floating-ui/dom',
         '@tiptap/vue-3',
diff --git a/package.json b/package.json
index 2e0dd487b7..faa0c04802 100644
--- a/package.json
+++ b/package.json
@@ -190,7 +190,6 @@
     "unplugin": "^3.3.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.1.0",
-    "vaul-vue": "0.4.1",
     "vue-component-type-helpers": "^3.3.6"
   },
   "devDependencies": {
diff --git a/playgrounds/nuxt/app/pages/components/drawer.vue b/playgrounds/nuxt/app/pages/components/drawer.vue
index eb8d826175..7ad473d4d9 100644
--- a/playgrounds/nuxt/app/pages/components/drawer.vue
+++ b/playgrounds/nuxt/app/pages/components/drawer.vue
@@ -22,19 +22,11 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `data-vaul-drawer-wrapper` directive to your content to make it work." :inset="inset" close>
-      <UButton color="neutral" variant="outline" label="Open with scale" />
-
-      <template #body>
-        <Placeholder class="h-screen w-full" />
-      </template>
-    </UDrawer>
-
-    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background close>
+    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" close>
       <UButton color="neutral" variant="outline" label="Open nested" />
 
       <template #footer>
-        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
+        <UDrawer :inset="inset" :ui="{ content: 'h-full' }">
           <UButton color="neutral" variant="outline" label="Open nested" />
 
           <template #content>
diff --git a/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
index c7570f9a67..1916c6fdc0 100644
--- a/playgrounds/nuxt/nuxt.config.ts
+++ b/playgrounds/nuxt/nuxt.config.ts
@@ -25,8 +25,7 @@ export default defineNuxtConfig({
         '@vueuse/integrations/useFuse',
         'ai',
         'tailwind-variants',
-        'tailwindcss/colors',
-        'vaul-vue'
+        'tailwindcss/colors'
       ]
     }
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6be31988da..f3fb046b39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,9 +224,6 @@ importers:
       valibot:
         specifier: ^1.0.0
         version: 1.4.2(typescript@6.0.3)
-      vaul-vue:
-        specifier: 0.4.1
-        version: 0.4.1(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(vue@3.5.39(typescript@6.0.3))
       vue-component-type-helpers:
         specifier: ^3.3.6
         version: 3.3.6
@@ -3643,9 +3640,6 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/web-bluetooth@0.0.20':
-    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
-
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
@@ -4060,9 +4054,6 @@ packages:
       '@vue/server-renderer':
         optional: true
 
-  '@vueuse/core@10.11.1':
-    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
-
   '@vueuse/core@14.3.0':
     resolution: {integrity: sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==}
     peerDependencies:
@@ -4110,9 +4101,6 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/metadata@10.11.1':
-    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
-
   '@vueuse/metadata@14.3.0':
     resolution: {integrity: sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==}
 
@@ -4122,9 +4110,6 @@ packages:
       nuxt: ^3.0.0 || ^4.0.0-0
       vue: ^3.5.0
 
-  '@vueuse/shared@10.11.1':
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
-
   '@vueuse/shared@14.3.0':
     resolution: {integrity: sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==}
     peerDependencies:
@@ -8615,12 +8600,6 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
-  vaul-vue@0.4.1:
-    resolution: {integrity: sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==}
-    peerDependencies:
-      reka-ui: ^2.0.0
-      vue: ^3.3.0
-
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -12105,8 +12084,6 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@types/web-bluetooth@0.0.20': {}
-
   '@types/web-bluetooth@0.0.21': {}
 
   '@types/whatwg-mimetype@3.0.2': {}
@@ -12553,16 +12530,6 @@ snapshots:
     optionalDependencies:
       '@vue/server-renderer': 3.5.39(vue@3.5.39(typescript@6.0.3))
 
-  '@vueuse/core@10.11.1(vue@3.5.39(typescript@6.0.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.39(typescript@6.0.3))
-      vue-demi: 0.14.10(vue@3.5.39(typescript@6.0.3))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/core@14.3.0(vue@3.5.39(typescript@6.0.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -12580,8 +12547,6 @@ snapshots:
       fuse.js: 7.4.2
       sortablejs: 1.15.7
 
-  '@vueuse/metadata@10.11.1': {}
-
   '@vueuse/metadata@14.3.0': {}
 
   '@vueuse/nuxt@14.3.0(esbuild@0.28.0)(magicast@0.5.3)(nuxt@4.4.8(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.0)(@vue/compiler-sfc@3.5.39)(better-sqlite3@12.11.1)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.11.1))(esbuild@0.28.0)(eslint@10.6.0(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.3)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.4))(rollup@4.60.4)(srvx@0.11.15)(terser@5.47.1)(typescript@6.0.3)(vite@7.3.6(@types/node@25.9.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.47.1)(yaml@2.9.0))(vue-tsc@3.3.6(typescript@6.0.3))(yaml@2.9.0))(rollup@4.60.4)(vite@7.3.6(@types/node@25.9.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.47.1)(yaml@2.9.0))(vue@3.5.39(typescript@6.0.3))':
@@ -12604,13 +12569,6 @@ snapshots:
       - vite
       - webpack
 
-  '@vueuse/shared@10.11.1(vue@3.5.39(typescript@6.0.3))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.39(typescript@6.0.3))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/shared@14.3.0(vue@3.5.39(typescript@6.0.3))':
     dependencies:
       vue: 3.5.39(typescript@6.0.3)
@@ -18461,14 +18419,6 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul-vue@0.4.1(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(vue@3.5.39(typescript@6.0.3)):
-    dependencies:
-      '@vueuse/core': 10.11.1(vue@3.5.39(typescript@6.0.3))
-      reka-ui: 2.10.1(vue@3.5.39(typescript@6.0.3))
-      vue: 3.5.39(typescript@6.0.3)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 3ed1fb00ac..ff5ba59460 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { VNode } from 'vue'
-import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
-import type { DialogContentProps, DialogContentEmits } from 'reka-ui'
+import type { DrawerRootProps, DrawerRootEmits, DrawerOpenChangeDetails, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/drawer'
 import type { ButtonProps } from './Button.vue'
@@ -12,7 +11,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'modal' | 'open' | 'defaultOpen' | 'snapPoints' | 'snapPoint' | 'defaultSnapPoint' | 'snapToSequentialPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -20,6 +19,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
   as?: any
   title?: string
   description?: string
+  /**
+   * The edge the drawer slides in from (and the direction it's swiped to dismiss).
+   * @defaultValue 'bottom'
+   */
+  direction?: 'top' | 'right' | 'bottom' | 'left'
   /**
    * Whether to inset the drawer from the edges.
    * @defaultValue false
@@ -42,11 +46,6 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
-  /**
-   * Whether the drawer is nested in another drawer.
-   * @defaultValue false
-   */
-  nested?: boolean
   /**
    * Display a close button to dismiss the drawer.
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -59,12 +58,17 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @IconifyIcon
    */
   closeIcon?: IconProps['name']
+  /**
+   * When `false`, the drawer will not close when clicking outside, pressing escape, or swiping.
+   * @defaultValue true
+   */
+  dismissible?: boolean
   class?: any
   ui?: Drawer['slots']
 }
 
 export interface DrawerEmits extends DrawerRootEmits {
-  (e: 'close:prevent'): void
+  'close:prevent': []
 }
 
 export interface DrawerSlots {
@@ -81,10 +85,9 @@ export interface DrawerSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { VisuallyHidden } from 'reka-ui'
+import { computed, ref, toRef } from 'vue'
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle, DrawerClose, VisuallyHidden } from 'reka-ui'
 import { useForwardProps } from '../composables/useForwardProps'
-import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle, DrawerClose } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useComponentProps } from '../composables/useComponentProps'
@@ -111,26 +114,61 @@ const props = useComponentProps('drawer', _props)
 const { t } = useLocale()
 const appConfig = useAppConfig() as Drawer['AppConfig']
 
-const rootProps = useForwardProps(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints'), emits)
-const portalProps = usePortal(toRef(() => props.portal))
-const contentProps = toRef(() => props.content)
-const contentEvents = computed(() => {
-  if (!props.dismissible) {
-    const events = ['interactOutside', 'escapeKeyDown']
-
-    return events.reduce((acc, curr) => {
-      acc[curr] = (e: Event) => {
-        e.preventDefault()
-        emits('close:prevent')
-      }
-      return acc
-    }, {} as Record<typeof events[number], (e: Event) => void>)
+// reka-ui's Drawer dismisses by swiping towards the edge the drawer slides in
+// from, so `direction` (which edge to anchor to) and `swipeDirection` (which
+// way a swipe-to-dismiss gesture travels) are always the same value — just
+// named differently between the two axes' vocabularies (top/bottom vs up/down).
+const SWIPE_DIRECTION = { top: 'up', bottom: 'down', left: 'left', right: 'right' } as const
+const swipeDirection = computed(() => SWIPE_DIRECTION[props.direction])
+
+// reka-ui's Drawer can close for reasons that never pass through a DOM event
+// (e.g. `swipe`, or dragging past the last snap point), so `dismissible` is
+// enforced centrally on the open-change reason rather than by intercepting
+// individual outside-click/escape-key events like `Modal` does.
+const isControlled = computed(() => props.open !== undefined)
+const uncontrolledOpen = ref(props.defaultOpen ?? false)
+const openModel = computed({
+  get: () => isControlled.value ? !!props.open : uncontrolledOpen.value,
+  set: (value: boolean) => {
+    if (!isControlled.value) {
+      uncontrolledOpen.value = value
+    }
   }
+})
 
-  return {
-    pointerDownOutside
+const ALLOWED_CLOSE_REASONS = new Set(['close-press', 'cancel'])
+function onOpenChange(value: boolean, details?: DrawerOpenChangeDetails) {
+  if (!value && !props.dismissible && !ALLOWED_CLOSE_REASONS.has(details?.reason ?? '')) {
+    emits('close:prevent')
+    return
   }
+
+  openModel.value = value
+  // eslint-disable-next-line vue/require-explicit-emits -- `update:open` is declared via `DrawerEmits extends DrawerRootEmits`, which the rule doesn't resolve through
+  emits('update:open', value, details)
+}
+
+// reka-ui's `useEmitAsProps` (used internally by `useForwardProps`) maps every
+// event declared on *this* component's own `defineEmits` into an `onXxx` prop —
+// regardless of which emit function is passed in — so `onUpdate:open` and
+// `onClose:prevent` end up in the result below. Both are omitted before
+// binding to `DrawerRoot`: `update:open` is wired explicitly via `onOpenChange`
+// so the `dismissible` gate isn't bypassed, and `close:prevent` isn't a
+// `DrawerRoot` prop at all (forwarding it just trips Vue's fallthrough-attrs
+// warning, since `DrawerRoot`'s template root is a `<slot>` fragment).
+const rawRootProps = useForwardProps(computed(() => ({
+  ...reactivePick(props, 'modal', 'snapPoints', 'snapPoint', 'defaultSnapPoint', 'snapToSequentialPoints'),
+  swipeDirection: swipeDirection.value
+})), emits)
+const rootProps = computed(() => {
+  const { 'onUpdate:open': _onUpdateOpen, 'onClose:prevent': _onClosePrevent, ...rest } = rawRootProps.value as Record<string, unknown>
+  return rest
 })
+const portalProps = usePortal(toRef(() => props.portal))
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => ({
+  pointerDownOutside
+}))
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.drawer || {}) })({
@@ -141,7 +179,7 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.drawer || {}) })
 </script>
 
 <template>
-  <component :is="props.nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
+  <DrawerRoot v-bind="rootProps" :open="openModel" @update:open="onOpenChange">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -220,5 +258,5 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.drawer || {}) })
         </DrawerContent>
       </FieldGroupReset>
     </DrawerPortal>
-  </component>
+  </DrawerRoot>
 </template>
diff --git a/src/runtime/keyframes.css b/src/runtime/keyframes.css
index cecad8d8e3..4e85b44cf9 100644
--- a/src/runtime/keyframes.css
+++ b/src/runtime/keyframes.css
@@ -272,6 +272,91 @@
   }
 }
 
+/*
+ * Inset drawer variants slide the same distance plus a fixed buffer so the
+ * floating, rounded-corner drawer fully clears the viewport edge instead of
+ * peeking through the inset gap while closed.
+ */
+@keyframes drawer-slide-in-from-top-inset {
+  from {
+    transform: translateY(calc(-100% - 1.5rem));
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes drawer-slide-out-to-top-inset {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(calc(-100% - 1.5rem));
+  }
+}
+
+@keyframes drawer-slide-in-from-right-inset {
+  from {
+    transform: translateX(calc(100% + 1.5rem));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-out-to-right-inset {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(100% + 1.5rem));
+  }
+}
+
+@keyframes drawer-slide-in-from-bottom-inset {
+  from {
+    transform: translateY(calc(100% + 1.5rem));
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes drawer-slide-out-to-bottom-inset {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(calc(100% + 1.5rem));
+  }
+}
+
+@keyframes drawer-slide-in-from-left-inset {
+  from {
+    transform: translateX(calc(-100% - 1.5rem));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-out-to-left-inset {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(-100% - 1.5rem));
+  }
+}
+
 @keyframes slide-in-from-top-and-fade {
   from {
     opacity: 0;
diff --git a/src/theme/drawer.ts b/src/theme/drawer.ts
index 0f05118562..051081c5ae 100644
--- a/src/theme/drawer.ts
+++ b/src/theme/drawer.ts
@@ -2,8 +2,8 @@ import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    overlay: 'fixed inset-0 bg-elevated/75',
-    content: 'fixed bg-default ring ring-default flex focus:outline-none',
+    overlay: ['fixed inset-0 bg-elevated/75', options.theme.transitions && 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'],
+    content: ['fixed bg-default ring ring-default flex focus:outline-none', options.theme.transitions && 'will-change-transform transition-transform data-[swiping]:duration-0'],
     handle: ['shrink-0 !bg-accented', options.theme.transitions && 'transition-opacity'],
     container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
     header: 'flex items-center gap-1.5 min-h-8',
@@ -18,25 +18,25 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     direction: {
       top: {
-        content: 'mb-24 flex-col-reverse',
+        content: 'mb-24 flex-col-reverse translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))]',
         handle: 'mb-4'
       },
       right: {
-        content: 'flex-row rtl:flex-row-reverse',
+        content: 'flex-row rtl:flex-row-reverse translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))]',
         handle: '!ml-4'
       },
       bottom: {
-        content: 'mt-24 flex-col',
+        content: 'mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))]',
         handle: 'mt-4'
       },
       left: {
-        content: 'flex-row-reverse rtl:flex-row',
+        content: 'flex-row-reverse rtl:flex-row translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))]',
         handle: '!mr-4'
       }
     },
     inset: {
       true: {
-        content: 'rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]'
+        content: 'rounded-lg after:hidden overflow-hidden'
       }
     },
     snapPoints: {
@@ -116,5 +116,56 @@ export default (options: Required<ModuleOptions>) => ({
     class: {
       content: 'inset-y-0 right-0 rounded-l-lg'
     }
+  },
+  // Enter/exit slide animations, keyed by direction and whether the drawer is inset
+  // (inset variants travel an extra 1.5rem so the floating drawer fully clears the gap).
+  {
+    direction: 'top',
+    inset: false,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'top',
+    inset: true,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[drawer-slide-in-from-top-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-top-inset_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'bottom',
+    inset: false,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'bottom',
+    inset: true,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[drawer-slide-in-from-bottom-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-bottom-inset_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'left',
+    inset: false,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'left',
+    inset: true,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[drawer-slide-in-from-left-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-left-inset_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'right',
+    inset: false,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]' : ''
+    }
+  }, {
+    direction: 'right',
+    inset: true,
+    class: {
+      content: options.theme.transitions ? 'data-[state=open]:animate-[drawer-slide-in-from-right-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-right-inset_200ms_ease-in-out]' : ''
+    }
   }]
 })
diff --git a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
index f8301f4776..3422438eea 100644
--- a/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap
@@ -200,9 +200,9 @@ exports[`DashboardSidebar > renders with mode drawer correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
-    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-2">dashboardSidebar.description</p></span>
+  <div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] lg:hidden" id="reka-drawer-content-v-1" role="dialog" aria-describedby="reka-drawer-description-v-3" aria-labelledby="reka-drawer-title-v-2" data-state="open" data-swipe-direction="down">
+    <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-2">dashboardSidebar.title</h2><p id="reka-drawer-description-v-3">dashboardSidebar.description</p></span>
     <!--v-if-->
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
index 5a821c001e..454dfa3027 100644
--- a/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
+++ b/test/components/__snapshots__/DashboardSidebar.spec.ts.snap
@@ -200,9 +200,9 @@ exports[`DashboardSidebar > renders with mode drawer correctly 1`] = `
   <!--v-if-->
   <!--v-if-->
   <!--teleport start-->
-  <div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-  <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
-    <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1">dashboardSidebar.title</h2><p id="reka-dialog-description-v-0-0-2">dashboardSidebar.description</p></span>
+  <div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+  <div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] lg:hidden" id="reka-drawer-content-v-0-0-1" role="dialog" aria-describedby="reka-drawer-description-v-0-0-3" aria-labelledby="reka-drawer-title-v-0-0-2" data-state="open" data-swipe-direction="down">
+    <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-2">dashboardSidebar.title</h2><p id="reka-drawer-description-v-0-0-3">dashboardSidebar.description</p></span>
     <!--v-if-->
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2 sm:px-6"></div>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index 45ceeb911e..6656a64aa4 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
@@ -6,13 +6,13 @@ exports[`Drawer > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <!--v-if-->
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto">Actions slot
@@ -35,9 +35,9 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div data-slot="body" class="flex-1">Body slot</div>
@@ -56,9 +56,9 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] bg-elevated" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -77,15 +77,15 @@ exports[`Drawer > renders with close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
@@ -108,9 +108,9 @@ exports[`Drawer > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <!--v-if-->
@@ -132,15 +132,15 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
           <!--v-if-->
@@ -163,9 +163,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>Content slot
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>Content slot
 </div>
 
 
@@ -179,9 +179,9 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-1"></h2><p id="reka-dialog-description-v-2"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -200,15 +200,15 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -228,14 +228,14 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><!--v-if--></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><!--v-if--></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
         <!--v-if-->
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
       </div>
       <!--v-if-->
     </div>
@@ -255,15 +255,15 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -283,15 +283,15 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden h-auto max-h-[96%] inset-x-4 bottom-4 data-[state=open]:animate-[drawer-slide-in-from-bottom-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-bottom-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -311,15 +311,15 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="left" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row-reverse rtl:flex-row translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="left">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -339,15 +339,15 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="left" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row-reverse rtl:flex-row translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4 data-[state=open]:animate-[drawer-slide-in-from-left-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-left-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="left">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -367,15 +367,15 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="right" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row rtl:flex-row-reverse translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="right">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -395,15 +395,15 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="right" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row rtl:flex-row-reverse translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4 data-[state=open]:animate-[drawer-slide-in-from-right-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-right-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="right">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -423,15 +423,15 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="up" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mb-24 flex-col-reverse translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="up">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -451,15 +451,15 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="up" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mb-24 flex-col-reverse translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden h-auto max-h-[96%] inset-x-4 top-4 data-[state=open]:animate-[drawer-slide-in-from-top-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-top-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="up">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -479,9 +479,9 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -500,9 +500,9 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">Header slot</div>
     <!--v-if-->
@@ -521,13 +521,13 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -548,13 +548,13 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -575,9 +575,9 @@ exports[`Drawer > renders with ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0"></h2><p id="reka-dialog-description-v-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1"></h2><p id="reka-drawer-description-v-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -596,15 +596,15 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -625,14 +625,14 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index 282b3199c0..38bbf6e639 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -6,13 +6,13 @@ exports[`Drawer > renders with actions slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <!--v-if-->
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto">Actions slot
@@ -35,9 +35,9 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div data-slot="body" class="flex-1">Body slot</div>
@@ -56,9 +56,9 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg bg-elevated" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] bg-elevated" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -77,15 +77,15 @@ exports[`Drawer > renders with close correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
@@ -108,9 +108,9 @@ exports[`Drawer > renders with close slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <!--v-if-->
@@ -132,15 +132,15 @@ exports[`Drawer > renders with closeIcon correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <div data-slot="actions" class="flex items-center gap-1.5 shrink-0 ms-auto"><button type="button" data-slot="close" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
           <!--v-if-->
@@ -163,9 +163,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>Content slot
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>Content slot
 </div>
 
 
@@ -179,9 +179,9 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-1"></h2><p id="reka-dialog-description-v-0-0-2"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -200,15 +200,15 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -228,14 +228,14 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><!--v-if--></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><!--v-if--></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
         <!--v-if-->
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description slot</p>
       </div>
       <!--v-if-->
     </div>
@@ -255,15 +255,15 @@ exports[`Drawer > renders with direction bottom correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -283,15 +283,15 @@ exports[`Drawer > renders with direction bottom inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 bottom-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden h-auto max-h-[96%] inset-x-4 bottom-4 data-[state=open]:animate-[drawer-slide-in-from-bottom-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-bottom-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -311,15 +311,15 @@ exports[`Drawer > renders with direction left correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rtl:flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="left" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row-reverse rtl:flex-row translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-lg data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="left">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -339,15 +339,15 @@ exports[`Drawer > renders with direction left inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row-reverse rtl:flex-row rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="left" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row-reverse rtl:flex-row translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4 data-[state=open]:animate-[drawer-slide-in-from-left-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-left-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="left">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !mr-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -367,15 +367,15 @@ exports[`Drawer > renders with direction right correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rtl:flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="right" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row rtl:flex-row-reverse translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-lg data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="right">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -395,15 +395,15 @@ exports[`Drawer > renders with direction right inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none flex-row rtl:flex-row-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="right" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 flex-row rtl:flex-row-reverse translate-x-[calc(var(--drawer-swipe-movement-x,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4 data-[state=open]:animate-[drawer-slide-in-from-right-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-right-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="right">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity !ml-4 !h-12 !w-1.5 mt-auto mb-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -423,15 +423,15 @@ exports[`Drawer > renders with direction top correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="up" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mb-24 flex-col-reverse translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 top-0 rounded-b-lg data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="up">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -451,15 +451,15 @@ exports[`Drawer > renders with direction top inset correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mb-24 flex-col-reverse rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)] h-auto max-h-[96%] inset-x-4 top-4" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-state="open" data-swipe-direction="up" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mb-24 flex-col-reverse translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] rounded-lg after:hidden overflow-hidden h-auto max-h-[96%] inset-x-4 top-4 data-[state=open]:animate-[drawer-slide-in-from-top-inset_200ms_ease-in-out] data-[state=closed]:animate-[drawer-slide-out-to-top-inset_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="up">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mb-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -479,9 +479,9 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -500,9 +500,9 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">Header slot</div>
     <!--v-if-->
@@ -521,13 +521,13 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -548,13 +548,13 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><!--v-if--><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title slot</h2>
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -575,9 +575,9 @@ exports[`Drawer > renders with ui correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0"></h2><p id="reka-dialog-description-v-0-0-1"></p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto w-20"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1"></h2><p id="reka-drawer-description-v-0-0-2"></p></span>
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -596,15 +596,15 @@ exports[`Drawer > renders without handle correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
   <!--v-if-->
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
@@ -625,14 +625,14 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div>
   <!--v-if-->
   <div data-slot="container" class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div data-slot="header" class="flex items-center gap-1.5 min-h-8">
       <div data-slot="wrapper" class="min-w-0 flex-1">
-        <h2 id="reka-dialog-title-v-0-0-0" data-slot="title" class="text-highlighted font-semibold">Title</h2>
-        <p id="reka-dialog-description-v-0-0-1" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
+        <h2 id="reka-drawer-title-v-0-0-1" data-slot="title" class="text-highlighted font-semibold">Title</h2>
+        <p id="reka-drawer-description-v-0-0-2" data-slot="description" class="mt-1 text-muted text-sm">Description</p>
       </div>
       <!--v-if-->
     </div>
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index b6a1d64225..5566844be0 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -144,9 +144,9 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0">header.title</h2><p id="reka-dialog-description-v-1">header.description</p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] lg:hidden" id="reka-drawer-content-v-0" role="dialog" aria-describedby="reka-drawer-description-v-2" aria-labelledby="reka-drawer-title-v-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-1">header.title</h2><p id="reka-drawer-description-v-2">header.description</p></span>
   <!--v-if-->
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index 84790d0ad6..bd00c5385c 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -144,9 +144,9 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 
 
 
-<div data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" data-slot="overlay" class="fixed inset-0 bg-elevated/75 lg:hidden"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg lg:hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-dialog-title-v-0-0-0">header.title</h2><p id="reka-dialog-description-v-0-0-1">header.description</p></span>
+<div data-state="open" data-swipe-direction="down" style="pointer-events: auto; user-select: none; --drawer-swipe-progress: 0; --drawer-swipe-strength: 1;" data-slot="overlay" class="fixed inset-0 bg-elevated/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] lg:hidden"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --nested-drawers: 0; --drawer-snap-point-offset: 0px;" tabindex="-1" forcemount="false" data-slot="content" class="fixed bg-default ring ring-default flex focus:outline-none will-change-transform transition-transform data-[swiping]:duration-0 mt-24 flex-col translate-y-[calc(var(--drawer-swipe-movement-y,0px)+var(--drawer-snap-point-offset,0px))] h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-lg data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out] lg:hidden" id="reka-drawer-content-v-0-0-0" role="dialog" aria-describedby="reka-drawer-description-v-0-0-2" aria-labelledby="reka-drawer-title-v-0-0-1" data-state="open" data-swipe-direction="down">
+  <div aria-hidden="true" data-state="open" data-slot="handle" class="shrink-0 !bg-accented transition-opacity mt-4 !w-12 !h-1.5 mx-auto"></div><span aria-hidden="true" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;"><h2 id="reka-drawer-title-v-0-0-1">header.title</h2><p id="reka-drawer-description-v-0-0-2">header.description</p></span>
   <!--v-if-->
   <div data-slot="body" class="p-4 sm:p-6 overflow-y-auto"></div>
 </div>