zabi-components 5.0.17 → 5.0.19

package/dist/molecules/Modal.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../routes/lib/focus-utils.js";
+
     type Size = "sm" | "md" | "lg";
 
     interface Props {
@@ -20,6 +23,9 @@
         ...restProps
     }: Props & { children?: any; footer?: any } = $props();
 
+    let modalContainer: HTMLDivElement;
+    let cleanupFocusTrap: (() => void) | null = null;
+
     const sizeClasses = $derived(
         {
             sm: "w-full md:w-[24rem]",
@@ -30,11 +36,31 @@
 
     function closeModal(event?: Event) {
         isOpen = false;
+        if (cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+        returnFocus();
         if (onclick && event) {
             onclick(event);
         }
     }
 
+    // Handle focus trap when modal opens
+    $effect(() => {
+        if (isOpen && modalContainer) {
+            saveFocus();
+            cleanupFocusTrap = trapFocus(modalContainer);
+            // Small delay to ensure modal is rendered
+            setTimeout(() => {
+                focusFirstElement(modalContainer);
+            }, 0);
+        } else if (!isOpen && cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+    });
+
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
             closeModal(event);
@@ -54,7 +80,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-end md:items-center justify-center p-0 md:p-4 z-modal"
+        class="fixed inset-0 bg-overlay flex items-end md:items-center justify-center p-0 md:p-4 z-modal"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -63,9 +89,9 @@
         tabindex="-1"
     >
         <div
-            class="bg-base-50 rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col"
+            bind:this={modalContainer}
+            class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col"
         >
-            <!-- Header -->
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">
                     <h2
@@ -85,12 +111,10 @@
                 </div>
             {/if}
 
-            <!-- Content -->
             <div class="px-6 pb-6 flex-1">
                 {@render children?.()}
             </div>
 
-            <!-- Footer -->
             {#if footer}
                 <div class="flex justify-end gap-3 px-6 pb-6 pt-4">
                     {@render footer?.()}

package/dist/molecules/SlideUp.svelte

@@ -50,7 +50,6 @@
         <div
             class="fixed bottom-0 left-0 right-0 bg-base-50 rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
         >
-            <!-- Header -->
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">
                     <h2
@@ -70,7 +69,6 @@
                 </div>
             {/if}
 
-            <!-- Content -->
             <div class="px-6 pb-6 flex-1">
                 {@render children?.()}
             </div>

package/dist/molecules/Tabs.svelte

@@ -35,7 +35,6 @@
 </script>
 
 <div class="tabs-container">
-    <!-- Tab List -->
     <div
         class="flex border-b border-base-200"
         role="tablist"
@@ -61,7 +60,6 @@
         {/each}
     </div>
 
-    <!-- Tab Content -->
     <div class="mt-4">
         {@render children?.({ activeTab })}
     </div>

package/dist/molecules/index.js

@@ -1,4 +1,3 @@
-// Export molecular components - All SSR-safe components
 export { default as Alert } from './Alert.svelte';
 export { default as ComponentDemo } from './ComponentDemo.svelte';
 export { default as ContactForm } from './ContactForm.svelte';

package/dist/organisms/Navbar.svelte

@@ -25,8 +25,6 @@
     }
 
     function handleBrandClick() {
-        // Brand click is now handled by the parent component
-        // through event forwarding
     }
 </script>
 
@@ -36,7 +34,6 @@
 >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center h-16">
-            <!-- Brand -->
             <div class="shrink-0">
                 <button
                     type="button"
@@ -47,14 +44,12 @@
                 </button>
             </div>
 
-            <!-- Desktop Navigation -->
             <div class="hidden md:block">
                 <div class="ml-10 flex items-baseline space-x-4">
                     {@render nav?.()}
                 </div>
             </div>
 
-            <!-- Right side -->
             <div class="hidden md:block">
                 <div class="ml-4 flex items-center space-x-4">
                     {@render actions?.()}
@@ -64,7 +59,6 @@
                 </div>
             </div>
 
-            <!-- Mobile menu button -->
             <div class="md:hidden">
                 <button
                     type="button"
@@ -77,7 +71,6 @@
             </div>
         </div>
 
-        <!-- Mobile menu -->
         {#if isMenuOpen}
             <div class="md:hidden">
                 <div

package/dist/organisms/Navigation.svelte

@@ -32,21 +32,18 @@
         }
     }
 
-    // Derived class for ul container based on variant
     const ulClasses = $derived(() => {
         return variant === "sidebar"
             ? "flex flex-col gap-1"
             : "flex items-center justify-between gap-1";
     });
 
-    // Function to get nav item classes based on active state
     function getNavItemClasses(itemHref: string): string {
         const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer";
 
         return baseClasses;
     }
 
-    // Function to get icon container classes based on active state
     function getIconContainerClasses(itemHref: string): string {
         const isActive = currentPath === itemHref;
         const baseClasses = "flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 transition-colors duration-200";
@@ -57,12 +54,10 @@
         return `${baseClasses}`;
     }
 
-    // Function to get state layer classes
     function getStateLayerClasses(): string {
         return "box-border flex gap-1 h-10 items-center px-4 py-2 relative shrink-0";
     }
 
-    // Function to get label classes based on active state
     function getLabelClasses(itemHref: string): string {
         const isActive = currentPath === itemHref;
         const baseClasses = "font-medium leading-4 relative shrink-0 text-center text-nowrap tracking-[0.5px] whitespace-pre text-xs";
@@ -73,7 +68,6 @@
         return `${baseClasses} text-description`;
     }
 
-    // Function to get icon classes based on active state (matches text color)
     function getIconClasses(itemHref: string): string {
         const isActive = currentPath === itemHref;
 

package/dist/organisms/index.js

@@ -1,3 +1,2 @@
-// Export organism components - All SSR-safe components
 export { default as Navbar } from './Navbar.svelte';
 export { default as Navigation } from './Navigation.svelte';

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/dist/routes/lib/variant-utils.ts

@@ -2,7 +2,9 @@
  * Utility functions for handling component variants with semantic colors
  */
 
-export type Variant = 'default' | 'success' | 'warning' | 'error' | 'info';
+import type { SemanticVariant } from '../../types/variants.js';
+
+export type Variant = SemanticVariant;
 
 /**
  * Get variant classes for input components (Input, Textarea)