From 31be5f656ec7bd1e217423266cfaefca5c5581dc Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 20 Mar 2025 22:25:37 +0100
Subject: [PATCH] chore(Drawer): put back `shrink-0` on handle

---
 src/theme/drawer.ts                           |  2 +-
 .../__snapshots__/Drawer-vue.spec.ts.snap     | 40 +++++++++----------
 .../__snapshots__/Drawer.spec.ts.snap         | 40 +++++++++----------
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/theme/drawer.ts b/src/theme/drawer.ts
index e51141ab..c34014f1 100644
--- a/src/theme/drawer.ts
+++ b/src/theme/drawer.ts
@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
   slots: {
     overlay: 'fixed inset-0 bg-(--ui-bg-elevated)/75',
     content: 'fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none',
-    handle: ['!bg-(--ui-bg-accented)', options.theme.transitions && 'transition-opacity'],
+    handle: ['shrink-0 !bg-(--ui-bg-accented)', options.theme.transitions && 'transition-opacity'],
     container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
     header: '',
     title: 'text-(--ui-text-highlighted) font-semibold',
diff --git a/test/components/__snapshots__/Drawer-vue.spec.ts.snap b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
index 97434bd1..2f18a024 100644
--- a/test/components/__snapshots__/Drawer-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer-vue.spec.ts.snap
@@ -7,7 +7,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div class="flex-1">Body slot</div>
@@ -26,7 +26,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -45,7 +45,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>Content slot
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>Content slot
 </div>
 
 
@@ -59,7 +59,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -78,7 +78,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -100,7 +100,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <!--v-if-->
@@ -122,7 +122,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -144,7 +144,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -166,7 +166,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -188,7 +188,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -210,7 +210,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -232,7 +232,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -254,7 +254,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -276,7 +276,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -298,7 +298,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -317,7 +317,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
     <!--v-if-->
@@ -336,7 +336,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -358,7 +358,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
@@ -380,7 +380,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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>
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -421,7 +421,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
diff --git a/test/components/__snapshots__/Drawer.spec.ts.snap b/test/components/__snapshots__/Drawer.spec.ts.snap
index b7804c18..2bbb4017 100644
--- a/test/components/__snapshots__/Drawer.spec.ts.snap
+++ b/test/components/__snapshots__/Drawer.spec.ts.snap
@@ -7,7 +7,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div class="flex-1">Body slot</div>
@@ -26,7 +26,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -45,7 +45,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>Content slot
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>Content slot
 </div>
 
 
@@ -59,7 +59,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -78,7 +78,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -100,7 +100,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <!--v-if-->
@@ -122,7 +122,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -144,7 +144,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 bottom-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -166,7 +166,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse w-auto max-w-[calc(100%-2rem)] inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -188,7 +188,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="left" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 left-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -210,7 +210,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row w-auto max-w-[calc(100%-2rem)] inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -232,7 +232,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none flex-row rounded-[calc(var(--ui-radius)*2)] after:hidden w-auto max-w-[calc(100%-2rem)] inset-y-4 right-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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 class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -254,7 +254,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse h-auto max-h-[96%] inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -276,7 +276,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="top" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mb-24 flex-col-reverse rounded-[calc(var(--ui-radius)*2)] after:hidden h-auto max-h-[96%] inset-x-4 top-4">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mb-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -298,7 +298,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -317,7 +317,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
     <!--v-if-->
@@ -336,7 +336,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
@@ -358,7 +358,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
@@ -380,7 +380,7 @@ 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" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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>
+  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-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>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -421,7 +421,7 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 <!--v-if-->
 <div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-vaul-drawer="" data-vaul-drawer-direction="bottom" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none mt-24 flex-col h-auto max-h-[96%] inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]">
-  <div data-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="!bg-(--ui-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-vaul-drawer-visible="true" data-vaul-handle="" aria-hidden="true" class="shrink-0 !bg-(--ui-bg-accented) transition-opacity mt-4 !w-12 !h-1.5 mx-auto"><span data-vaul-handle-hitarea="" aria-hidden="true"></span></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>