zabi-components 5.0.18 → 5.0.19

package/dist/molecules/Modal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../../routes/lib/focus-utils.js";
+    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../routes/lib/focus-utils.js";
 
     type Size = "sm" | "md" | "lg";
 

package/dist/routes/lib/focus-utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Focus management utilities for accessibility
+ */
+/**
+ * Get all focusable elements within a container
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Trap focus within a container element
+ */
+export declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Save the currently focused element
+ */
+export declare function saveFocus(): void;
+/**
+ * Return focus to the previously focused element
+ */
+export declare function returnFocus(): void;
+/**
+ * Focus the first focusable element in a container
+ */
+export declare function focusFirstElement(container: HTMLElement): void;

package/dist/routes/lib/focus-utils.ts

@@ -0,0 +1,112 @@
+/**
+ * Focus management utilities for accessibility
+ */
+
+/**
+ * Get all focusable elements within a container
+ */
+export function getFocusableElements(container: HTMLElement): HTMLElement[] {
+    const selector = [
+        'button:not([disabled])',
+        '[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(', ');
+
+    return Array.from(container.querySelectorAll<HTMLElement>(selector)).filter(
+        (el) => {
+            // Filter out elements that are not visible
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        }
+    );
+}
+
+/**
+ * Trap focus within a container element
+ */
+export function trapFocus(container: HTMLElement): () => void {
+    const focusableElements = getFocusableElements(container);
+    
+    if (focusableElements.length === 0) {
+        return () => {}; // No-op cleanup
+    }
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    // Focus first element
+    firstElement.focus();
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key !== 'Tab') {
+            return;
+        }
+
+        const currentFocus = document.activeElement as HTMLElement;
+
+        if (!focusableElements.includes(currentFocus)) {
+            event.preventDefault();
+            firstElement.focus();
+            return;
+        }
+
+        if (event.shiftKey) {
+            // Shift + Tab
+            if (currentFocus === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        } else {
+            // Tab
+            if (currentFocus === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+
+    container.addEventListener('keydown', handleKeydown);
+
+    // Return cleanup function
+    return () => {
+        container.removeEventListener('keydown', handleKeydown);
+    };
+}
+
+/**
+ * Store the element that had focus before opening a modal/dialog
+ */
+let previousFocus: HTMLElement | null = null;
+
+/**
+ * Save the currently focused element
+ */
+export function saveFocus(): void {
+    if (typeof document !== 'undefined') {
+        previousFocus = document.activeElement as HTMLElement;
+    }
+}
+
+/**
+ * Return focus to the previously focused element
+ */
+export function returnFocus(): void {
+    if (previousFocus && typeof document !== 'undefined') {
+        previousFocus.focus();
+        previousFocus = null;
+    }
+}
+
+/**
+ * Focus the first focusable element in a container
+ */
+export function focusFirstElement(container: HTMLElement): void {
+    const focusableElements = getFocusableElements(container);
+    if (focusableElements.length > 0) {
+        focusableElements[0].focus();
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.18",
+  "version": "5.0.19",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",
@@ -80,8 +80,9 @@
     "dev": "vite dev",
     "build": "vite build && npm run build:types",
     "build:components": "svelte-package -o dist --input src/components",
-    "build:lib-files": "mkdir -p dist/routes/lib && cp src/routes/lib/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/",
-    "build:lib": "npm run build:css && npm run build:components && npm run build:lib-files && npm run build:types && npm run build:css && node scripts/verify-build.js",
+    "build:lib-files": "mkdir -p dist/routes/lib && cp src/routes/lib/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/ && cp src/routes/lib/focus-utils.ts dist/routes/lib/ && cp src/routes/lib/focus-utils.d.ts dist/routes/lib/ 2>/dev/null || true",
+    "build:fix-imports": "node scripts/fix-modal-import.js",
+    "build:lib": "npm run build:css && npm run build:components && npm run build:lib-files && npm run build:fix-imports && npm run build:types && npm run build:css && node scripts/verify-build.js",
     "build:css": "node scripts/build-css.js && node scripts/validate-theme.js && node scripts/cleanup-css.js",
     "build:types": "tsc --project tsconfig.lib.json",
     "preview": "vite preview",