zabi-components 5.0.21 → 6.0.0

package/dist/molecules/NavigationMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { getContext, setContext } from "svelte";
+    import { setContext } from "svelte";
     import { onMount } from "svelte";
     import NavigationMenuList from "./NavigationMenuList.svelte";
     import NavigationMenuItem from "./NavigationMenuItem.svelte";
@@ -8,13 +8,10 @@
     import NavigationMenuContent from "./NavigationMenuContent.svelte";
     import NavigationMenuLink from "./NavigationMenuLink.svelte";
 
-    interface NavigationMenuContext {
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     export interface NavigationMenuItemData {
         value: string;
@@ -76,7 +73,7 @@
         }
     });
 
-    const context: NavigationMenuContext = {
+    const context: NavigationMenuContextValue = {
         get activeItem() {
             return activeItem;
         },
@@ -86,7 +83,7 @@
         },
     };
 
-    setContext(NAVIGATION_MENU_CONTEXT, context);
+    setContext(NAVIGATION_MENU_CONTEXT_KEY, context);
 </script>
 
 <nav

package/dist/molecules/NavigationMenuContent.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-    import { onMount, onDestroy } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import { onMount } from "svelte";
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -21,11 +23,9 @@
     let contentElement = $state<HTMLElement | null>(null);
     let parentItem = $state<HTMLElement | null>(null);
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 
@@ -71,7 +71,7 @@
 {#if isActive}
     <div
         bind:this={contentElement}
-        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
+        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-input-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
         role="menu"
         onkeydown={handleKeydown}
         data-navigation-menu-content

package/dist/molecules/NavigationMenuItem.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -17,10 +19,9 @@
         ...restProps
     }: Props = $props();
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 </script>

package/dist/molecules/NavigationMenuLink.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         href?: string;
@@ -19,16 +21,16 @@
         ...restProps
     }: Props = $props();
 
-    const context = getContext<{
-        setActiveItem: (item: string | null) => void;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     function handleClick() {
         context?.setActiveItem(null);
     }
 
     const linkClasses =
-        "block px-4 py-2 text-sm text-headline hover:bg-base-100 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 no-underline {className}";
+        "block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}";
 </script>
 
 {#if asChild}

package/dist/molecules/NavigationMenuList.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
 
     interface Props {
         className?: string;
@@ -14,10 +11,6 @@
         children,
         ...restProps
     }: Props = $props();
-
-    const context = getContext<{
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
 </script>
 
 <ul

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -17,13 +19,9 @@
         ...restProps
     }: Props = $props();
 
-    let triggerElement = $state<HTMLElement | null>(null);
-
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 
@@ -52,9 +50,8 @@
 </script>
 
 <button
-    bind:this={triggerElement}
     type="button"
-    class="inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-headline bg-transparent hover:bg-base-100 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 {className}"
+    class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}"
     aria-expanded={isActive ? 'true' : 'false'}
     aria-haspopup="true"
     onclick={handleClick}

package/dist/molecules/Section.svelte

@@ -40,7 +40,7 @@
         ...restProps
     }: Props = $props();
 
-    const sizeClasses = $derived(() => {
+    const sizeClasses = $derived.by(() => {
         switch (size) {
             case "sm":
                 return "text-sm";
@@ -51,7 +51,7 @@
         }
     });
 
-    const maxWidthClasses = $derived(() => {
+    const maxWidthClasses = $derived.by(() => {
         switch (maxWidth) {
             case "sm":
                 return "max-w-screen-sm";
@@ -72,7 +72,7 @@
         }
     });
 
-    const backgroundClasses = $derived(() => {
+    const backgroundClasses = $derived.by(() => {
         switch (background) {
             case "muted":
                 return "bg-base-50";
@@ -85,7 +85,7 @@
         }
     });
 
-    const paddingClasses = $derived(() => {
+    const paddingClasses = $derived.by(() => {
         switch (padding) {
             case "none":
                 return "";
@@ -102,14 +102,14 @@
         }
     });
 
-    const containerClasses = $derived(() => {
+    const containerClasses = $derived.by(() => {
         const base = "w-full";
-        const maxWidthClass = maxWidthClasses();
+        const maxWidthClass = maxWidthClasses;
         const centeredClass = centered ? "mx-auto" : "";
         return `${base} ${maxWidthClass} ${centeredClass}`.trim();
     });
 
-    const contentClasses = $derived(() => {
+    const contentClasses = $derived.by(() => {
         const base = "px-4 sm:px-6 lg:px-8";
         const centeredClass = centered ? "text-center" : "";
         return `${base} ${centeredClass}`.trim();
@@ -117,18 +117,18 @@
 </script>
 
 <section
-    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    class="section {backgroundClasses} {paddingClasses} {className}"
     {...restProps}
 >
-    <div class={containerClasses()}>
-        <div class={contentClasses()}>
+    <div class={containerClasses}>
+        <div class={contentClasses}>
             {#if title}
                 <div class="mb-6 {centered ? 'mx-auto' : ''}">
                     <Heading level={headingLevel} text={title} />
                     {#if description}
                         <p
-                            class="mt-4 {sizeClasses()} text-description {centered
-                                ? 'mx-auto max-w-2xl'
+                            class="mt-4 {sizeClasses} text-description {centered
+                                ? 'mx-auto'
                                 : ''}"
                         >
                             {description}

package/dist/molecules/SlideUp.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+    import {
+        focusFirstElement,
+        returnFocus,
+        saveFocus,
+        trapFocus,
+    } from "../../routes/lib/focus-utils.js";
+
     interface Props {
         isOpen?: boolean;
         title?: string;
@@ -13,13 +20,35 @@
         ...restProps
     } = $props<Props & { children?: any }>();
 
+    let slideUpContainer = $state<HTMLDivElement>();
+    let cleanupFocusTrap: (() => void) | null = null;
+
     function closeSlideUp(event?: Event) {
         isOpen = false;
+        if (cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+        returnFocus();
         if (onclick && event) {
             (onclick as (event: Event) => void)(event);
         }
     }
 
+    $effect(() => {
+        const container = slideUpContainer;
+        if (isOpen && container) {
+            saveFocus();
+            cleanupFocusTrap = trapFocus(container);
+            setTimeout(() => {
+                focusFirstElement(container);
+            }, 0);
+        } else if (!isOpen && cleanupFocusTrap) {
+            cleanupFocusTrap();
+            cleanupFocusTrap = null;
+        }
+    });
+
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
             closeSlideUp(event);
@@ -39,7 +68,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-overlay z-modal"
+        class="fixed inset-0 z-modal cursor-pointer bg-overlay"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -48,7 +77,8 @@
         tabindex="-1"
     >
         <div
-            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"
+            bind:this={slideUpContainer}
+            class="fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card shadow-xl animate-[slideUp_0.3s_ease-out]"
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pt-6 pb-4">

package/dist/molecules/Tabs.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+    function createId(prefix: string): string {
+        if (typeof window !== "undefined") {
+            return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
+        }
+        return `${prefix}-ssr-${Date.now()}`;
+    }
+
     interface Props {
         tabs?: Array<{
             id: string;
@@ -19,17 +26,69 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
+    const tabsBaseId = createId("tabs");
+
     function selectTab(tabId: string) {
         activeTab = tabId;
     }
 
+    function getEnabledTabs() {
+        return tabs.filter((tab) => !tab.disabled);
+    }
+
+    function getTabIndex(tabId: string) {
+        return tabs.findIndex((tab) => tab.id === tabId);
+    }
+
+    function getTabId(tabId: string) {
+        return `${tabsBaseId}-tab-${tabId}`;
+    }
+
+    function getPanelId(tabId: string) {
+        return `${tabsBaseId}-panel-${tabId}`;
+    }
+
+    $effect(() => {
+        if (tabs.length === 0) {
+            return;
+        }
+
+        const activeExists = tabs.some((tab) => tab.id === activeTab && !tab.disabled);
+        if (!activeExists) {
+            const firstEnabledTab = tabs.find((tab) => !tab.disabled);
+            if (firstEnabledTab) {
+                activeTab = firstEnabledTab.id;
+            }
+        }
+    });
+
     function handleKeydown(event: KeyboardEvent) {
+        const enabledTabs = getEnabledTabs();
+        if (enabledTabs.length === 0) {
+            return;
+        }
+
+        const currentIndex = enabledTabs.findIndex((tab) => tab.id === activeTab);
+        const fallbackIndex = currentIndex === -1 ? 0 : currentIndex;
+
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-            const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+            event.preventDefault();
             const direction = event.key === "ArrowLeft" ? -1 : 1;
             const nextIndex =
-                (currentIndex + direction + tabs.length) % tabs.length;
-            selectTab(tabs[nextIndex].id);
+                (fallbackIndex + direction + enabledTabs.length) %
+                enabledTabs.length;
+            selectTab(enabledTabs[nextIndex].id);
+        } else if (event.key === "Home") {
+            event.preventDefault();
+            selectTab(enabledTabs[0].id);
+        } else if (event.key === "End") {
+            event.preventDefault();
+            selectTab(enabledTabs[enabledTabs.length - 1].id);
+        } else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (currentIndex === -1) {
+                selectTab(enabledTabs[0].id);
+            }
         }
     }
 </script>
@@ -45,22 +104,30 @@
             <button
                 type="button"
                 role="tab"
-                class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
+                id={getTabId(tab.id)}
+                class="cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed {activeTab ===
                 tab.id
                     ? variant === 'pills'
-                        ? 'bg-brand-100 text-brand-700 border-brand-500'
+                        ? 'border-brand-500 bg-brand-100 text-brand-700'
                         : 'border-brand-500 text-body'
-                    : 'border-transparent text-description hover:text-body hover:border-base-300'}"
+                    : 'border-transparent text-description hover:border-base-300 hover:text-body'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}
+                aria-controls={getPanelId(tab.id)}
+                tabindex={activeTab === tab.id ? 0 : -1}
             >
                 {tab.label}
             </button>
         {/each}
     </div>
 
-    <div class="mt-4">
+    <div
+        class="mt-4"
+        role="tabpanel"
+        id={getPanelId(activeTab)}
+        aria-labelledby={getTabId(activeTab)}
+    >
         {@render children?.({ activeTab })}
     </div>
 </div>

package/dist/molecules/index.d.ts

@@ -12,6 +12,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
 export { default as Section } from './Section.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

@@ -12,6 +12,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
 export { default as Section } from './Section.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/navigation-menu-context.d.ts

@@ -0,0 +1,6 @@
+export interface NavigationMenuContextValue {
+    activeItem: string | null;
+    setActiveItem: (item: string | null) => void;
+    isMobile: boolean;
+}
+export declare const NAVIGATION_MENU_CONTEXT_KEY: unique symbol;

package/dist/molecules/navigation-menu-context.js

@@ -0,0 +1 @@
+export const NAVIGATION_MENU_CONTEXT_KEY = Symbol("navigation-menu");