@abhivarde/svelte-drawer 1.0.6 → 1.0.7

package/README.md

@@ -15,6 +15,8 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 - ✅ **Snap points** for iOS-like multi-height drawers
 - ✅ **Portal rendering** to escape z-index conflicts
 - ✅ **Optional header & footer** components for quick setup
+- ✅ **Auto height** for dynamic content (AI streaming, forms, dynamic lists)
+- ✅ **Configurable dismiss threshold** via `closeThreshold` prop
 - ✅ Nested drawer support
 - ✅ Scrollable content areas
 - ✅ Keyboard shortcuts (**Escape to close**, Tab navigation)
@@ -22,7 +24,6 @@ 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** for dynamic content (AI streaming, forms, dynamic lists)
 
 ## Installation
 
@@ -166,14 +167,28 @@ Add a premium blur effect to the overlay background:
 Control how far the user needs to drag before the drawer dismisses.
 
 ```svelte
+<script>
+  import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+  let open = $state(false);
+</script>
+
 <!-- easier to dismiss (short drag) -->
 <Drawer bind:open closeThreshold={0.15}>
-  ...
+  <DrawerOverlay 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" />
+    <p>Short drag closes this drawer.</p>
+  </DrawerContent>
 </Drawer>
 
 <!-- harder to dismiss (long drag required) -->
 <Drawer bind:open closeThreshold={0.5}>
-  ...
+  <DrawerOverlay 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" />
+    <p>Requires a longer drag to close.</p>
+  </DrawerContent>
 </Drawer>
 ```
 

package/dist/components/DrawerContent.svelte

@@ -68,7 +68,7 @@
     }
   }
 
-  function onPointerDown(e: PointerEvent | TouchEvent) {
+  function onPointerDown(e: PointerEvent) {
     const target = e.target as HTMLElement;
 
     if (
@@ -82,36 +82,24 @@
 
     startPos =
       drawer.direction === "bottom" || drawer.direction === "top"
-        ? "clientY" in e
-          ? e.clientY
-          : (e.touches[0]?.clientY ?? 0)
-        : "clientX" in e
-          ? e.clientX
-          : (e.touches[0]?.clientX ?? 0);
+        ? e.clientY
+        : e.clientX;
 
     startDragPos = drawer.drawerPosition.current;
 
     window.addEventListener("pointermove", onPointerMove, { passive: false });
     window.addEventListener("pointerup", onPointerUp);
-    window.addEventListener("touchmove", onPointerMove, { passive: false });
-    window.addEventListener("touchend", onPointerUp);
-
-    e.preventDefault();
   }
 
-  function onPointerMove(e: PointerEvent | TouchEvent) {
+  function onPointerMove(e: PointerEvent) {
     if (!dragging) return;
 
     e.preventDefault();
 
     const current =
       drawer.direction === "bottom" || drawer.direction === "top"
-        ? "clientY" in e
-          ? e.clientY
-          : (e.touches[0]?.clientY ?? 0)
-        : "clientX" in e
-          ? e.clientX
-          : (e.touches[0]?.clientX ?? 0);
+        ? e.clientY
+        : e.clientX;
 
     const delta = current - startPos;
     let newPos = startDragPos;
@@ -160,8 +148,6 @@
 
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("pointerup", onPointerUp);
-    window.removeEventListener("touchmove", onPointerMove);
-    window.removeEventListener("touchend", onPointerUp);
   }
 
   function getFocusableElements(): HTMLElement[] {
@@ -223,7 +209,6 @@
     role="dialog"
     aria-modal="true"
     onpointerdown={onPointerDown}
-    ontouchstart={onPointerDown}
     {...restProps}
   >
     {@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.53.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "publint": "^0.2.12",
-    "svelte": "^5.46.4",
-    "svelte-check": "^4.3.4",
+    "svelte": "^5.56.0",
+    "svelte-check": "^4.4.8",
     "typescript": "^5.9.3",
     "vite": "^8.0.0"
   },