@abhivarde/svelte-drawer 1.0.0 → 1.0.1

package/README.md

@@ -1,10 +1,9 @@
 # Svelte Drawer
 
-[![npm version](https://img.shields.io/npm/v/@abhivarde/svelte-drawer)](https://www.npmjs.com/package/@abhivarde/svelte-drawer)
-![GitHub Repo Views](https://gitviews.com/repo/AbhiVarde/svelte-drawer.svg)
-
 A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
 
+[![](https://img.shields.io/badge/npm-@abhivarde/svelte--drawer-000?style=flat&logo=npm&logoColor=white)](https://www.npmjs.com/package/@abhivarde/svelte-drawer) [![](https://img.shields.io/badge/npmx-@abhivarde/svelte--drawer-000?style=flat&logo=node.js&logoColor=white)](https://npmx.dev/package/@abhivarde/svelte-drawer)
+
 ## Features
 
 - ✅ Smooth animations with **gesture-driven dragging** (mouse & touch)
@@ -22,6 +21,7 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 - ✅ Fully accessible with keyboard navigation
 - ✅ Full **TypeScript** support
 - ✅ Customizable styling with **Tailwind CSS**
+- ✅ **Auto height** — resizes to match content (AI streaming, forms, dynamic lists)
 
 ## Installation
 
@@ -55,10 +55,10 @@ npm install @abhivarde/svelte-drawer
 </Drawer>
 ```
 
-
 ### Backdrop Blur
 
 Add a premium blur effect to the overlay background:
+
 ```svelte
 <script>
 	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
@@ -69,12 +69,12 @@ Add a premium blur effect to the overlay background:
 <Drawer bind:open>
 	<!-- Default medium blur -->
 	<DrawerOverlay blur class="fixed inset-0 bg-black/40" />
-	
+
 	<!-- Or specify blur intensity -->
 	<!-- <DrawerOverlay blur="sm" class="fixed inset-0 bg-black/40" /> -->
 	<!-- <DrawerOverlay blur="lg" class="fixed inset-0 bg-black/40" /> -->
 	<!-- <DrawerOverlay blur="xl" class="fixed inset-0 bg-black/40" /> -->
-	
+
 	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
 		<DrawerHandle class="mb-8" />
 		<h2>Blurred Backdrop</h2>
@@ -84,6 +84,7 @@ Add a premium blur effect to the overlay background:
 ```
 
 **Available blur intensities:**
+
 - `blur={true}` or `blur="md"` - Medium blur (default)
 - `blur="sm"` - Small blur
 - `blur="lg"` - Large blur
@@ -272,6 +273,7 @@ Snap points allow the drawer to rest at predefined heights, creating an iOS-like
 ### Portal Support
 
 Render the drawer in a portal to avoid z-index conflicts in complex layouts.
+
 ```svelte
 <script>
 	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
@@ -301,6 +303,7 @@ Render the drawer in a portal to avoid z-index conflicts in complex layouts.
 ```
 
 **When to use portals:**
+
 - Complex layouts with nested z-index contexts
 - Third-party component libraries with fixed positioning
 - Modals inside scrollable containers
@@ -311,6 +314,7 @@ Render the drawer in a portal to avoid z-index conflicts in complex layouts.
 Optional pre-styled header and footer components for quick setup.
 
 #### DrawerHeader
+
 ```svelte
 <script>
 	import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerHandle } from '@abhivarde/svelte-drawer';
@@ -322,8 +326,8 @@ Optional pre-styled header and footer components for quick setup.
 <Drawer bind:open>
 	<DrawerOverlay class="fixed inset-0 bg-black/40" />
 	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg">
-		<DrawerHeader 
-			title="Drawer Title" 
+		<DrawerHeader
+			title="Drawer Title"
 			description="Optional description text"
 			showCloseButton={true}
 		/>
@@ -354,6 +358,7 @@ Optional pre-styled header and footer components for quick setup.
 ```
 
 #### DrawerFooter
+
 ```svelte
 <script>
 	import { Drawer, DrawerOverlay, DrawerContent, DrawerFooter } from '@abhivarde/svelte-drawer';
@@ -401,6 +406,7 @@ Optional pre-styled header and footer components for quick setup.
 ### Persistent State
 
 Automatically save and restore drawer state across page reloads.
+
 ```svelte
 <script>
   import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
@@ -408,8 +414,8 @@ Automatically save and restore drawer state across page reloads.
   let open = $state(false);
 </script>
 
-<Drawer 
-  bind:open 
+<Drawer
+  bind:open
   persistState={true}
   persistKey="main-drawer"
 >
@@ -422,9 +428,10 @@ Automatically save and restore drawer state across page reloads.
 ```
 
 **With snap points:**
+
 ```svelte
-<Drawer 
-  bind:open 
+<Drawer
+  bind:open
   snapPoints={[0.25, 0.5, 0.9]}
   bind:activeSnapPoint
   persistState={true}
@@ -440,6 +447,7 @@ Automatically save and restore drawer state across page reloads.
 ```
 
 **Clear saved state programmatically:**
+
 ```svelte
 <script>
   import { clearDrawerState } from '@abhivarde/svelte-drawer';
@@ -453,6 +461,43 @@ Automatically save and restore drawer state across page reloads.
 <button onclick={resetDrawer}>Reset Drawer State</button>
 ```
 
+### Auto Height (AI & Dynamic Content)
+
+Use `autoHeight` on `DrawerContent` when your drawer content changes height at runtime — AI streaming responses, multi-step forms, search results, or any dynamic list.
+
+```svelte
+<script>
+  import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+  let open = $state(false);
+  let streamedText = $state('Thinking...');
+
+  // simulate streaming
+  function openAndStream() {
+    open = true;
+    setTimeout(() => streamedText = 'Here is the AI response. It grows as tokens arrive, and the drawer follows automatically.', 1000);
+  }
+</script>
+
+<button onclick={openAndStream}>Ask AI</button>
+
+<Drawer bind:open>
+  <DrawerOverlay class="fixed inset-0 bg-black/40" />
+  <DrawerContent autoHeight class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+    <DrawerHandle class="mb-4" />
+    <p>{streamedText}</p>
+  </DrawerContent>
+</Drawer>
+```
+
+**How it works:**
+
+- A `ResizeObserver` watches the inner content element
+- When content height changes, it drives the existing `drawerPosition` tween
+- The drawer animates smoothly to the correct height — no magic numbers needed
+- Fully compatible with snap points, portals, and all existing props
+- Zero impact on drawers that don't use `autoHeight` (opt-in, default `false`)
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -507,6 +552,7 @@ Content container for the drawer.
 
 - `class` (string, optional) - CSS classes for styling
 - `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
+- `autoHeight` (boolean, optional, default: false) - Automatically resize the drawer height to match its content
 
 ### DrawerHandle
 
@@ -593,4 +639,4 @@ See the [LICENSE](./LICENSE) file for details.
 
 ## Credits
 
-Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.
+Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.

package/dist/components/DrawerContent.svelte

@@ -16,6 +16,7 @@
   let {
     class: className = "",
     trapFocus = true,
+    autoHeight = false,
     children,
     ...restProps
   } = $props();
@@ -165,8 +166,8 @@
     if (!contentElement) return [];
     return Array.from(
       contentElement.querySelectorAll(
-        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      )
+        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
     ) as HTMLElement[];
   }
 
@@ -188,17 +189,22 @@
     }
   }
 
+  let contentInnerRef = $state<HTMLElement | null>(null);
+
   $effect(() => {
-    if (drawer.open && trapFocus && contentElement) {
-      tick().then(() => {
-        const focusable = getFocusableElements();
-        if (focusable[0]) {
-          focusable[0].focus({ preventScroll: true });
-        } else {
-          contentElement?.focus({ preventScroll: true });
-        }
-      });
-    }
+    if (!autoHeight || !contentInnerRef) return;
+
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const totalHeight = entry.contentRect.height;
+      const viewportH = window.innerHeight;
+      const pct = Math.max(0, ((viewportH - totalHeight) / viewportH) * 100);
+      drawer.drawerPosition.set(pct, { duration: 200 });
+    });
+
+    ro.observe(contentInnerRef);
+    return () => ro.disconnect();
   });
 
   onMount(() => {
@@ -221,6 +227,8 @@
     ontouchstart={onPointerDown}
     {...restProps}
   >
-    {@render children()}
+    <div bind:this={contentInnerRef}>
+      {@render children()}
+    </div>
   </div>
 {/if}

package/dist/components/DrawerContent.svelte.d.ts

@@ -1,6 +1,7 @@
 declare const DrawerContent: import("svelte").Component<{
     class?: string;
     trapFocus?: boolean;
+    autoHeight?: boolean;
     children: any;
 } & Record<string, any>, {}, "">;
 type DrawerContent = ReturnType<typeof DrawerContent>;

package/dist/types.d.ts

@@ -15,6 +15,7 @@ export interface DrawerProps {
 export interface DrawerContentProps {
     class?: string;
     trapFocus?: boolean;
+    autoHeight?: boolean;
 }
 export interface DrawerOverlayProps {
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",