@abhivarde/svelte-drawer 0.0.2 → 0.0.4

package/README.md

@@ -1,125 +1,161 @@
-# Svelte Drawer
-
-A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
-
-## Features
-
-- ✅ Smooth animations using Svelte 5's Spring motion
-- ✅ Multiple directions (bottom, top, left, right)
-- ✅ Nested drawers support
-- ✅ Scrollable content
-- ✅ Fully accessible with keyboard navigation
-- ✅ TypeScript support
-- ✅ Customizable styling with Tailwind CSS
-
-## Installation
-
-```bash
-npm install @abhivarde/svelte-drawer
-```
-
-## Usage
-
-### Basic Example
-
-```svelte
-<script>
-	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
-
-	let open = $state(false);
-</script>
-
-<button onclick={() => open = true}>
-	Open Drawer
-</button>
-
-<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 p-4">
-		<h2>Drawer Content</h2>
-		<p>This is a drawer component.</p>
-		<button onclick={() => open = false}>Close</button>
-	</DrawerContent>
-</Drawer>
-```
-
-### Side Drawer
-
-```svelte
-<script>
-	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
-
-	let open = $state(false);
-</script>
-
-<Drawer bind:open direction="right">
-	<DrawerOverlay class="fixed inset-0 bg-black/40" />
-	<DrawerContent class="fixed right-0 top-0 bottom-0 w-80 bg-white p-4">
-		<h2>Side Drawer</h2>
-		<button onclick={() => open = false}>Close</button>
-	</DrawerContent>
-</Drawer>
-```
-
-### Controlled Drawer
-
-```svelte
-<script>
-	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
-
-	let open = $state(false);
-
-	function handleOpenChange(isOpen) {
-		console.log('Drawer is now:', isOpen ? 'open' : 'closed');
-		open = isOpen;
-	}
-</script>
-
-<Drawer bind:open onOpenChange={handleOpenChange}>
-	<DrawerOverlay class="fixed inset-0 bg-black/40" />
-	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
-		<h2>Controlled Drawer</h2>
-	</DrawerContent>
-</Drawer>
-```
-
-## API Reference
-
-### Drawer
-
-Main wrapper component that manages drawer state and animations.
-
-**Props:**
-
-- `open` (boolean, bindable) - Controls the open/closed state
-- `onOpenChange` (function, optional) - Callback when open state changes
-- `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
-
-### DrawerOverlay
-
-Overlay component that appears behind the drawer.
-
-**Props:**
-
-- `class` (string, optional) - CSS classes for styling
-
-### DrawerContent
-
-Content container for the drawer.
-
-**Props:**
-
-- `class` (string, optional) - CSS classes for styling
-
-## Demo
-
-Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.
-
-## License
-
-This project is licensed under the MIT License.  
-See the [LICENSE](./LICENSE) file for details.
-
-## Credits
-
-Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.
+# Svelte Drawer
+
+A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
+
+## Features
+
+- ✅ Smooth animations using Svelte 5's Spring motion
+- ✅ Multiple directions (bottom, top, left, right)
+- ✅ Nested drawers support
+- ✅ Scrollable content
+- ✅ Keyboard shortcuts (Escape to close, Tab navigation)
+- ✅ Focus management (auto-focus, focus trap, focus restoration)
+- ✅ Fully accessible with keyboard navigation
+- ✅ TypeScript support
+- ✅ Customizable styling with Tailwind CSS
+
+## Installation
+
+```bash
+npm install @abhivarde/svelte-drawer
+```
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<button onclick={() => open = true}>
+	Open Drawer
+</button>
+
+<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 p-4">
+		<h2>Drawer Content</h2>
+		<p>This is a drawer component.</p>
+		<button onclick={() => open = false}>Close</button>
+	</DrawerContent>
+</Drawer>
+```
+
+### Side Drawer
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<Drawer bind:open direction="right">
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed right-0 top-0 bottom-0 w-80 bg-white p-4">
+		<h2>Side Drawer</h2>
+		<button onclick={() => open = false}>Close</button>
+	</DrawerContent>
+</Drawer>
+```
+
+### Controlled Drawer
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+
+	function handleOpenChange(isOpen) {
+		console.log('Drawer is now:', isOpen ? 'open' : 'closed');
+		open = isOpen;
+	}
+</script>
+
+<Drawer bind:open onOpenChange={handleOpenChange}>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+		<h2>Controlled Drawer</h2>
+	</DrawerContent>
+</Drawer>
+```
+
+### Disable Keyboard Features
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- Disable Escape key -->
+<Drawer bind:open closeOnEscape={false}>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+		<h2>Cannot close with Escape</h2>
+	</DrawerContent>
+</Drawer>
+
+<!-- Disable focus trap -->
+<Drawer bind:open>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent trapFocus={false} class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+		<h2>Tab navigation not restricted</h2>
+	</DrawerContent>
+</Drawer>
+```
+
+## Keyboard Shortcuts
+
+- **Escape** - Close the drawer (can be disabled with `closeOnEscape={false}`)
+- **Tab / Shift+Tab** - Navigate between focusable elements inside the drawer
+- **Enter / Space** (on overlay) - Close the drawer
+
+## API Reference
+
+### Drawer
+
+Main wrapper component that manages drawer state and animations.
+
+**Props:**
+
+- `open` (boolean, bindable) - Controls the open/closed state
+- `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
+
+### DrawerOverlay
+
+Overlay component that appears behind the drawer.
+
+**Props:**
+
+- `class` (string, optional) - CSS classes for styling
+
+### DrawerContent
+
+Content container for the drawer.
+
+**Props:**
+
+- `class` (string, optional) - CSS classes for styling
+- `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
+
+## Demo
+
+Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.
+
+## License
+
+This project is licensed under the MIT License.  
+See the [LICENSE](./LICENSE) file for details.
+
+## Credits
+
+Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.

package/dist/components/Drawer.svelte

@@ -1,25 +1,34 @@
 <script lang="ts">
   import { Tween } from "svelte/motion";
   import { cubicOut } from "svelte/easing";
-  import { setContext } from "svelte";
+  import { setContext, onMount } from "svelte";
 
   let {
     open = $bindable(false),
     onOpenChange = undefined,
     direction = "bottom",
+    closeOnEscape = true,
     children,
   } = $props();
 
   let overlayOpacity = new Tween(0, { duration: 300, easing: cubicOut });
   let drawerPosition = new Tween(100, { duration: 300, easing: cubicOut });
+  let previouslyFocusedElement: HTMLElement | null = null;
 
   $effect(() => {
     if (open) {
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+
       overlayOpacity.set(1);
       drawerPosition.set(0);
     } else {
       overlayOpacity.set(0);
       drawerPosition.set(100);
+
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+        previouslyFocusedElement = null;
+      }
     }
   });
 
@@ -28,6 +37,20 @@
     if (onOpenChange) onOpenChange(false);
   }
 
+  function handleKeydown(e: KeyboardEvent) {
+    if (open && closeOnEscape && e.key === "Escape") {
+      e.preventDefault();
+      closeDrawer();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+    };
+  });
+
   setContext("drawer", {
     get open() {
       return open;

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

@@ -2,6 +2,7 @@ declare const Drawer: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: any;
     direction?: string;
+    closeOnEscape?: boolean;
     children: any;
 }, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/DrawerContent.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, onMount, tick } from "svelte";
 
-  // Minimal inline type just to fix TypeScript
   type DrawerContext = {
     open: boolean;
     overlayOpacity: { current: number; set: (v: number) => void };
@@ -10,11 +9,16 @@
     closeDrawer: () => void;
   };
 
-  let { class: className = "", children, ...restProps } = $props();
+  let {
+    class: className = "",
+    trapFocus = true,
+    children,
+    ...restProps
+  } = $props();
 
-  // Tell TypeScript that context has this shape
   const drawer = getContext<DrawerContext>("drawer");
 
+  let contentElement = $state<HTMLDivElement | null>(null);
   let startPos = 0;
   let dragging = false;
 
@@ -36,6 +40,8 @@
 
   function onPointerDown(e: PointerEvent | TouchEvent) {
     dragging = true;
+    document.body.style.cursor = "grabbing";
+
     startPos =
       drawer.direction === "bottom" || drawer.direction === "top"
         ? "clientY" in e
@@ -51,6 +57,7 @@
 
   function onPointerMove(e: PointerEvent | TouchEvent) {
     if (!dragging) return;
+
     const current =
       drawer.direction === "bottom" || drawer.direction === "top"
         ? "clientY" in e
@@ -80,19 +87,91 @@
 
   function onPointerUp() {
     dragging = false;
-    if (drawer.drawerPosition.current > 30) drawer.closeDrawer();
-    else drawer.drawerPosition.set(0);
+    document.body.style.cursor = "default";
+
+    const pos = drawer.drawerPosition.current;
+    const deltaThreshold = 30;
+
+    if (pos > deltaThreshold) {
+      drawer.closeDrawer();
+    } else {
+      drawer.drawerPosition.set(0);
+    }
 
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("pointerup", onPointerUp);
   }
+
+  function getFocusableElements(): HTMLElement[] {
+    if (!contentElement) return [];
+
+    const focusableSelectors = [
+      "a[href]",
+      "button:not([disabled])",
+      "textarea:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])',
+    ];
+
+    return Array.from(
+      contentElement.querySelectorAll(focusableSelectors.join(","))
+    ) as HTMLElement[];
+  }
+
+  function handleFocusTrap(e: KeyboardEvent) {
+    if (!trapFocus || !drawer.open) return;
+    if (e.key !== "Tab") return;
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      if (document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  $effect(() => {
+    if (drawer.open && trapFocus && contentElement) {
+      tick().then(() => {
+        const focusableElements = getFocusableElements();
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus();
+        } else {
+          contentElement?.focus();
+        }
+      });
+    }
+  });
+
+  onMount(() => {
+    window.addEventListener("keydown", handleFocusTrap);
+    return () => {
+      window.removeEventListener("keydown", handleFocusTrap);
+    };
+  });
 </script>
 
 {#if drawer.open}
   <div
+    bind:this={contentElement}
     class={className}
-    style="transform: {getTransform()}; z-index: 50;"
+    style="transform: {getTransform()}; z-index: 50; cursor: grab;"
     onpointerdown={onPointerDown}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
     {...restProps}
   >
     {@render children()}

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

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

package/dist/types.d.ts

@@ -2,9 +2,11 @@ export interface DrawerProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     direction?: "bottom" | "top" | "left" | "right";
+    closeOnEscape?: boolean;
 }
 export interface DrawerContentProps {
     class?: string;
+    trapFocus?: boolean;
 }
 export interface DrawerOverlayProps {
     class?: string;

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "@abhivarde/svelte-drawer",
-  "version": "0.0.2",
-  "description": "A drawer component for Svelte 5, inspired by Vaul",
-  "author": "Abhi Varde",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "npm run test:integration && npm run test:unit",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.49.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "publint": "^0.2.12",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.6"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "keywords": [
-    "svelte",
-    "svelte5",
-    "drawer",
-    "dialog",
-    "modal",
-    "sheet",
-    "component",
-    "ui"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AbhiVarde/svelte-drawer"
-  },
-  "bugs": {
-    "url": "https://github.com/AbhiVarde/svelte-drawer/issues"
-  },
-  "homepage": "https://drawer.abhivarde.in"
-}
+{
+  "name": "@abhivarde/svelte-drawer",
+  "version": "0.0.4",
+  "description": "A drawer component for Svelte 5, inspired by Vaul",
+  "author": "Abhi Varde",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "npm run test:integration && npm run test:unit",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "publint": "^0.2.12",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "drawer",
+    "dialog",
+    "modal",
+    "sheet",
+    "component",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AbhiVarde/svelte-drawer"
+  },
+  "bugs": {
+    "url": "https://github.com/AbhiVarde/svelte-drawer/issues"
+  },
+  "homepage": "https://drawer.abhivarde.in"
+}