@abhivarde/svelte-drawer 1.0.5 → 1.0.7

package/README.md

@@ -2,6 +2,7 @@
 
 A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
 
+[![skills.sh](https://skills.sh/b/AbhiVarde/svelte-drawer)](https://skills.sh/AbhiVarde/svelte-drawer)
 [![](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
@@ -14,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)
@@ -21,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
 
@@ -160,6 +162,38 @@ Add a premium blur effect to the overlay background:
 </Drawer>
 ```
 
+### Close Threshold
+
+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>
+```
+
+Values range from `0` to `1`. Default is `0.3` (30% of the viewport).
+
 ### Using Variants
 
 ```svelte
@@ -558,6 +592,7 @@ Main wrapper component that manages drawer state and animations.
 - `onOpenChange` (function, optional) - Callback when open state changes
 - `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
 - `closeOnEscape` (boolean, optional, default: true) - Whether Escape key closes the drawer
+- `closeThreshold` (number, optional, default: 0.3) - How far the user must drag to dismiss (0–1). Lower = easier to close, higher = requires a longer drag.
 - `snapPoints` (number[], optional) - Array of snap positions between 0-1
 - `activeSnapPoint` (number, bindable, optional) - Current active snap point value
 - `onSnapPointChange` (function, optional) - Callback fired when snap changes

package/dist/components/Drawer.svelte

@@ -15,9 +15,10 @@
     onSnapPointChange = undefined,
     portal = false,
     portalContainer = undefined,
-    persistState = false, 
-    persistKey = "default", 
-    persistSnapPoint = false, 
+    persistState = false,
+    persistKey = "default",
+    persistSnapPoint = false,
+    closeThreshold = 0.3,
     children,
   } = $props();
 
@@ -34,7 +35,7 @@
   let previouslyFocusedElement: HTMLElement | null = null;
   let visible = false;
   let previousSnapPoint: number | undefined = undefined;
-  let stateLoaded = false; 
+  let stateLoaded = false;
 
   onMount(() => {
     if (persistState && !stateLoaded) {
@@ -67,7 +68,7 @@
       saveDrawerState(
         persistKey,
         open,
-        persistSnapPoint ? activeSnapPoint : undefined
+        persistSnapPoint ? activeSnapPoint : undefined,
       );
     }
   });
@@ -171,6 +172,9 @@
     get activeSnapPoint() {
       return activeSnapPoint;
     },
+    get closeThreshold() {
+      return closeThreshold;
+    },
     setActiveSnapPoint(point: number) {
       activeSnapPoint = point;
       onSnapPointChange?.(point);

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

@@ -11,6 +11,7 @@ declare const Drawer: import("svelte").Component<{
     persistState?: boolean;
     persistKey?: string;
     persistSnapPoint?: boolean;
+    closeThreshold?: number;
     children: any;
 }, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/DrawerContent.svelte

@@ -11,6 +11,7 @@
     snapPoints?: number[];
     activeSnapPoint?: number;
     setActiveSnapPoint?: (point: number) => void;
+    closeThreshold: number;
   };
 
   let {
@@ -67,7 +68,7 @@
     }
   }
 
-  function onPointerDown(e: PointerEvent | TouchEvent) {
+  function onPointerDown(e: PointerEvent) {
     const target = e.target as HTMLElement;
 
     if (
@@ -81,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;
@@ -134,6 +123,7 @@
     dragging = false;
 
     const pos = drawer.drawerPosition.current;
+    const threshold = drawer.closeThreshold * 100;
 
     if (drawer.snapPoints && drawer.snapPoints.length > 0) {
       const nearestSnapPoint = findNearestSnapPoint(pos);
@@ -142,14 +132,14 @@
       const lowestSnapPoint = Math.min(...drawer.snapPoints);
       const lowestSnapPos = snapPointToPosition(lowestSnapPoint);
 
-      if (pos > lowestSnapPos + 30) {
+      if (pos > lowestSnapPos + threshold) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(snapPos);
         drawer.setActiveSnapPoint?.(nearestSnapPoint);
       }
     } else {
-      if (pos > 30) {
+      if (pos > threshold) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(0);
@@ -158,8 +148,6 @@
 
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("pointerup", onPointerUp);
-    window.removeEventListener("touchmove", onPointerMove);
-    window.removeEventListener("touchend", onPointerUp);
   }
 
   function getFocusableElements(): HTMLElement[] {
@@ -221,7 +209,6 @@
     role="dialog"
     aria-modal="true"
     onpointerdown={onPointerDown}
-    ontouchstart={onPointerDown}
     {...restProps}
   >
     {@render children()}

package/dist/types.d.ts

@@ -11,6 +11,7 @@ export interface DrawerProps {
     persistState?: boolean;
     persistKey?: string;
     persistSnapPoint?: boolean;
+    closeThreshold?: number;
 }
 export interface DrawerContentProps {
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "1.0.5",
+  "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"
   },