@abhivarde/svelte-drawer 1.0.3 → 1.0.5

package/README.md

@@ -21,7 +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)
+- ✅ **Auto height** for dynamic content (AI streaming, forms, dynamic lists)
 
 ## Installation
 
@@ -463,40 +463,72 @@ Automatically save and restore drawer state across page reloads.
 
 ### 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.
+Use `autoHeight` on `DrawerContent` when your drawer content changes height at runtime like AI streaming responses, multi-step forms, search results, or dynamic lists.
 
 ```svelte
 <script>
-  import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+  import {
+    Drawer,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerHandle
+  } from '@abhivarde/svelte-drawer';
 
   let open = $state(false);
-  let streamedText = $state('Thinking...');
+  let streaming = $state(false);
+  let text = $state('');
 
-  // simulate streaming
-  function openAndStream() {
+  async function simulate() {
     open = true;
-    setTimeout(() => streamedText = 'Here is the AI response. It grows as tokens arrive, and the drawer follows automatically.', 1000);
+    streaming = true;
+    text = '';
+
+    const content =
+      'Sure! Here is what autoHeight does. It watches your content with a ResizeObserver. When content grows, the drawer follows automatically. No magic numbers, no hardcoded heights, it just works smoothly with streaming UI like AI chat apps.';
+
+    for (let i = 0; i < content.length; i++) {
+      text += content[i];
+      await new Promise(r => setTimeout(r, 18));
+    }
+
+    streaming = false;
   }
 </script>
 
-<button onclick={openAndStream}>Ask AI</button>
+<button onclick={simulate}>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>
+  <DrawerOverlay />
+
+  <DrawerContent
+    autoHeight
+    class="bg-gray-100 flex flex-col rounded-t-[10px] fixed bottom-0 left-0 right-0 outline-none"
+  >
+    <div class="p-4 bg-white rounded-t-[10px]">
+      <DrawerHandle class="mb-8" />
+
+      <p class="font-medium mb-2 text-gray-900">
+        AI Response
+      </p>
+
+      {#if text}
+        <p class="text-sm text-gray-600 leading-relaxed">
+          {text}{streaming ? '▌' : ''}
+        </p>
+      {/if}
+    </div>
   </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`)
+- `height: auto` is applied to the drawer when `autoHeight` is true
+- The drawer grows and shrinks naturally as content changes
+- Perfect for AI streaming, dynamic lists, forms, and async content
+- The slide animation remains smooth since it uses CSS transforms separately
+- Fully compatible with snap points, portals, and existing props
+- Zero impact on drawers that do not use `autoHeight` (opt-in, default `false`)
 
 ## Variants
 

package/package.json

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