@abhivarde/svelte-drawer 1.0.5 → 1.0.6

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
@@ -160,6 +161,24 @@ 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
+<!-- easier to dismiss (short drag) -->
+<Drawer bind:open closeThreshold={0.15}>
+  ...
+</Drawer>
+
+<!-- harder to dismiss (long drag required) -->
+<Drawer bind:open closeThreshold={0.5}>
+  ...
+</Drawer>
+```
+
+Values range from `0` to `1`. Default is `0.3` (30% of the viewport).
+
 ### Using Variants
 
 ```svelte
@@ -558,6 +577,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 {
@@ -134,6 +135,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 +144,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);

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.6",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",