zabi-components 5.0.18 → 5.0.20

package/dist/molecules/Sidebar.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    interface SidebarItem {
+        id: string;
+        label: string;
+        description?: string;
+        icon?: any;
+        onClick?: () => void;
+    }
+
+    interface SidebarSection {
+        title?: string;
+        items: SidebarItem[];
+    }
+
+    interface Props {
+        title?: string;
+        sections?: SidebarSection[];
+        items?: SidebarItem[];
+        selectedItemId?: string;
+        selectedSectionId?: string;
+        onItemClick?: (item: SidebarItem) => void;
+        onSectionClick?: (sectionId: string) => void;
+        className?: string;
+        header?: Snippet;
+        footer?: Snippet;
+        isOpen?: boolean;
+        onClose?: () => void;
+        mobileResponsive?: boolean;
+    }
+
+    let {
+        title = "",
+        sections = [],
+        items = [],
+        selectedItemId = "",
+        selectedSectionId = "",
+        onItemClick,
+        onSectionClick,
+        className = "",
+        header,
+        footer,
+        isOpen = true,
+        onClose,
+        mobileResponsive = true,
+        ...restProps
+    }: Props = $props();
+
+    let isMobile = $state(false);
+    let sidebarElement = $state<HTMLElement | null>(null);
+
+    function checkMobile() {
+        if (mobileResponsive) {
+            isMobile = window.innerWidth < 768;
+        } else {
+            isMobile = false;
+        }
+    }
+
+    function handleItemClick(item: SidebarItem) {
+        if (item.onClick) {
+            item.onClick();
+        }
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        // Close sidebar on mobile when item is clicked
+        if (isMobile && onClose) {
+            onClose();
+        }
+    }
+
+    function handleSectionClick(sectionId: string) {
+        if (onSectionClick) {
+            onSectionClick(sectionId);
+        }
+    }
+
+    function handleBackdropClick(event: MouseEvent) {
+        if (event.target === event.currentTarget && onClose) {
+            onClose();
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape" && isOpen && isMobile && onClose) {
+            onClose();
+        }
+    }
+
+    onMount(() => {
+        checkMobile();
+        if (mobileResponsive) {
+            window.addEventListener("resize", checkMobile);
+            return () => window.removeEventListener("resize", checkMobile);
+        }
+    });
+
+    const hasSections = $derived(sections.length > 0);
+    const hasItems = $derived(items.length > 0);
+</script>
+
+{#if isMobile && mobileResponsive}
+    <!-- Mobile: Overlay and Drawer -->
+    {#if isOpen}
+        <div
+            class="fixed inset-0 bg-overlay z-modal md:hidden"
+            onclick={handleBackdropClick}
+            onkeydown={handleKeydown}
+            role="dialog"
+            aria-modal="true"
+            aria-label="Sidebar navigation"
+            tabindex="-1"
+        >
+            <aside
+                bind:this={sidebarElement}
+                class="fixed left-0 top-0 bottom-0 w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto transform transition-transform duration-300 ease-in-out {isOpen ? 'translate-x-0' : '-translate-x-full'} {className}"
+                role="complementary"
+                aria-label="Sidebar navigation"
+                onclick={(e) => e.stopPropagation()}
+                {...restProps}
+            >
+                <div class="flex items-center justify-between mb-4 md:hidden">
+                    {#if title}
+                        <h2 class="text-lg font-semibold text-headline">{title}</h2>
+                    {/if}
+                    {#if onClose}
+                        <button
+                            type="button"
+                            onclick={onClose}
+                            class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-50"
+                            aria-label="Close sidebar"
+                        >
+                            ×
+                        </button>
+                    {/if}
+                </div>
+
+                {#if header}
+                    <div class="mb-6">
+                        {@render header()}
+                    </div>
+                {:else if title && !isMobile}
+                    <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
+                {/if}
+
+                {#if hasSections}
+                    {#each sections as section}
+                        {#if section.title}
+                            <div class="mb-4">
+                                <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
+                                    {section.title}
+                                </h3>
+                            </div>
+                        {/if}
+
+                        <nav class="space-y-2 mb-8">
+                            {#each section.items as item}
+                                <button
+                                    type="button"
+                                    onclick={() => handleItemClick(item)}
+                                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                                    item.id
+                                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                                    aria-current={selectedItemId === item.id ? "page" : undefined}
+                                >
+                                    <div class="flex items-center gap-2">
+                                        {#if item.icon}
+                                            <div class="shrink-0">
+                                                <svelte:component this={item.icon} class="h-4 w-4" />
+                                            </div>
+                                        {/if}
+                                        <div class="flex-1">
+                                            <div class="font-medium">{item.label}</div>
+                                            {#if item.description}
+                                                <div class="text-xs text-description">
+                                                    {item.description}
+                                                </div>
+                                            {/if}
+                                        </div>
+                                    </div>
+                                </button>
+                            {/each}
+                        </nav>
+                    {/each}
+                {:else if hasItems}
+                    <nav class="space-y-1">
+                        {#each items as item}
+                            <button
+                                type="button"
+                                onclick={() => handleItemClick(item)}
+                                class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                                item.id
+                                    ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                                    : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                                aria-current={selectedItemId === item.id ? "page" : undefined}
+                            >
+                                <div class="flex items-center gap-2">
+                                    {#if item.icon}
+                                        <div class="shrink-0">
+                                            <svelte:component this={item.icon} class="h-4 w-4" />
+                                        </div>
+                                    {/if}
+                                    <div class="flex-1">
+                                        <div class="font-medium">{item.label}</div>
+                                        {#if item.description}
+                                            <div class="text-xs text-description">
+                                                {item.description}
+                                            </div>
+                                        {/if}
+                                    </div>
+                                </div>
+                            </button>
+                        {/each}
+                    </nav>
+                {/if}
+
+                {#if footer}
+                    <div class="mt-auto pt-6 border-t border-border">
+                        {@render footer()}
+                    </div>
+                {/if}
+            </aside>
+        </div>
+    {/if}
+{:else}
+    <!-- Desktop: Always visible sidebar -->
+    <aside
+        bind:this={sidebarElement}
+        class="w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto {className}"
+        role="complementary"
+        aria-label="Sidebar navigation"
+        {...restProps}
+    >
+    {#if header}
+        <div class="mb-6">
+            {@render header()}
+        </div>
+    {:else if title}
+        <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
+    {/if}
+
+    {#if hasSections}
+        {#each sections as section}
+            {#if section.title}
+                <div class="mb-4">
+                    <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
+                        {section.title}
+                    </h3>
+                </div>
+            {/if}
+
+            <nav class="space-y-2 mb-8">
+                {#each section.items as item}
+                    <button
+                        type="button"
+                        onclick={() => handleItemClick(item)}
+                        class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                        item.id
+                            ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                            : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                        aria-current={selectedItemId === item.id ? "page" : undefined}
+                    >
+                        <div class="flex items-center gap-2">
+                            {#if item.icon}
+                                <div class="shrink-0">
+                                    <svelte:component this={item.icon} class="h-4 w-4" />
+                                </div>
+                            {/if}
+                            <div class="flex-1">
+                                <div class="font-medium">{item.label}</div>
+                                {#if item.description}
+                                    <div class="text-xs text-description">
+                                        {item.description}
+                                    </div>
+                                {/if}
+                            </div>
+                        </div>
+                    </button>
+                {/each}
+            </nav>
+        {/each}
+    {:else if hasItems}
+        <nav class="space-y-1">
+            {#each items as item}
+                <button
+                    type="button"
+                    onclick={() => handleItemClick(item)}
+                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
+                    item.id
+                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
+                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
+                    aria-current={selectedItemId === item.id ? "page" : undefined}
+                >
+                    <div class="flex items-center gap-2">
+                        {#if item.icon}
+                            <div class="shrink-0">
+                                <svelte:component this={item.icon} class="h-4 w-4" />
+                            </div>
+                        {/if}
+                        <div class="flex-1">
+                            <div class="font-medium">{item.label}</div>
+                            {#if item.description}
+                                <div class="text-xs text-description">
+                                    {item.description}
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </button>
+            {/each}
+        </nav>
+    {/if}
+
+        {#if footer}
+            <div class="mt-auto pt-6 border-t border-border">
+                {@render footer()}
+            </div>
+        {/if}
+    </aside>
+{/if}

package/dist/molecules/Sidebar.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+interface SidebarItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: any;
+    onClick?: () => void;
+}
+interface SidebarSection {
+    title?: string;
+    items: SidebarItem[];
+}
+interface Props {
+    title?: string;
+    sections?: SidebarSection[];
+    items?: SidebarItem[];
+    selectedItemId?: string;
+    selectedSectionId?: string;
+    onItemClick?: (item: SidebarItem) => void;
+    onSectionClick?: (sectionId: string) => void;
+    className?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    isOpen?: boolean;
+    onClose?: () => void;
+    mobileResponsive?: boolean;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/molecules/SlideUp.svelte

@@ -39,7 +39,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-black/50 dark:bg-black/70 z-modal"
+        class="fixed inset-0 bg-overlay z-modal"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -48,7 +48,7 @@
         tabindex="-1"
     >
         <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"
+            class="fixed bottom-0 left-0 right-0 bg-card rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">

package/dist/molecules/index.d.ts

@@ -5,5 +5,12 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
+export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
+export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/molecules/index.js

@@ -5,5 +5,12 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
+export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
+export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.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/zabi-components-colors.css

@@ -194,8 +194,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);

package/dist/zabi-components-theme-only.css

@@ -186,8 +186,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);

package/dist/zabi-components-theme.css

@@ -188,8 +188,8 @@
   --color-action-primary-text: var(--color-brand-50);
 
   /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: var(--color-brand-200);
-  --color-action-secondary-hover: var(--color-brand-100);
+  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
+  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
   --color-action-secondary-active: var(--color-brand-400);
   --color-action-secondary-disabled: var(--color-brand-500);
   --color-action-secondary-subtle: var(--color-brand-600);