zabi-components 5.0.20 → 5.0.22

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,9 +21,9 @@
         ...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);

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;
@@ -19,11 +21,9 @@
 
     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);
 

package/dist/molecules/Section.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { SizeVariant } from "../../types/variants.js";
+    import Heading from "../atoms/Heading.svelte";
+
+    interface Props {
+        /** Section title */
+        title?: string;
+        /** Section description/subtitle */
+        description?: string;
+        /** Heading level for title (1-6) */
+        headingLevel?: number;
+        /** Section size variant */
+        size?: SizeVariant;
+        /** Maximum width of the section container */
+        maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
+        /** Background variant */
+        background?: "default" | "muted" | "accent" | "transparent";
+        /** Padding variant */
+        padding?: "none" | "sm" | "md" | "lg" | "xl";
+        /** Whether to center the content */
+        centered?: boolean;
+        /** Additional CSS classes */
+        className?: string;
+        /** Section content */
+        children?: Snippet;
+    }
+
+    let {
+        title = "",
+        description = "",
+        headingLevel = 2,
+        size = "md",
+        maxWidth = "xl",
+        background = "default",
+        padding = "lg",
+        centered = false,
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClasses = $derived(() => {
+        switch (size) {
+            case "sm":
+                return "text-sm";
+            case "lg":
+                return "text-lg";
+            default:
+                return "text-base";
+        }
+    });
+
+    const maxWidthClasses = $derived(() => {
+        switch (maxWidth) {
+            case "sm":
+                return "max-w-screen-sm";
+            case "md":
+                return "max-w-screen-md";
+            case "lg":
+                return "max-w-screen-lg";
+            case "xl":
+                return "max-w-screen-xl";
+            case "2xl":
+                return "max-w-screen-2xl";
+            case "full":
+                return "max-w-full";
+            case "none":
+                return "";
+            default:
+                return "max-w-screen-xl";
+        }
+    });
+
+    const backgroundClasses = $derived(() => {
+        switch (background) {
+            case "muted":
+                return "bg-base-50";
+            case "accent":
+                return "bg-brand-50 dark:bg-brand-950";
+            case "transparent":
+                return "bg-transparent";
+            default:
+                return "bg-background";
+        }
+    });
+
+    const paddingClasses = $derived(() => {
+        switch (padding) {
+            case "none":
+                return "";
+            case "sm":
+                return "py-8 sm:py-12";
+            case "md":
+                return "py-12 sm:py-16";
+            case "lg":
+                return "py-16 sm:py-24";
+            case "xl":
+                return "py-24 sm:py-32";
+            default:
+                return "py-16 sm:py-24";
+        }
+    });
+
+    const containerClasses = $derived(() => {
+        const base = "w-full";
+        const maxWidthClass = maxWidthClasses();
+        const centeredClass = centered ? "mx-auto" : "";
+        return `${base} ${maxWidthClass} ${centeredClass}`.trim();
+    });
+
+    const contentClasses = $derived(() => {
+        const base = "px-4 sm:px-6 lg:px-8";
+        const centeredClass = centered ? "text-center" : "";
+        return `${base} ${centeredClass}`.trim();
+    });
+</script>
+
+<section
+    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    {...restProps}
+>
+    <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'
+                                : ''}"
+                        >
+                            {description}
+                        </p>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if children}
+                <div class="section-content {centered ? 'mx-auto' : ''}">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+    </div>
+</section>
+
+<style>
+    .section {
+        position: relative;
+        width: 100%;
+    }
+
+    .section-content {
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Section title */
+    title?: string;
+    /** Section description/subtitle */
+    description?: string;
+    /** Heading level for title (1-6) */
+    headingLevel?: number;
+    /** Section size variant */
+    size?: SizeVariant;
+    /** Maximum width of the section container */
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
+    /** Background variant */
+    background?: "default" | "muted" | "accent" | "transparent";
+    /** Padding variant */
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    /** Whether to center the content */
+    centered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Section content */
+    children?: Snippet;
+}
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

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);
@@ -48,6 +77,7 @@
         tabindex="-1"
     >
         <div
+            bind:this={slideUpContainer}
             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}

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,6 +104,7 @@
             <button
                 type="button"
                 role="tab"
+                id={getTabId(tab.id)}
                 class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
                 tab.id
                     ? variant === 'pills'
@@ -54,13 +114,20 @@
                 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

@@ -11,6 +11,6 @@ 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 Section } from './Section.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/molecules/index.js

@@ -11,6 +11,6 @@ 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 Section } from './Section.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");

package/dist/organisms/Navigation.svelte

@@ -12,6 +12,7 @@
         variant?: "header" | "sidebar";
         items?: NavigationItem[];
         currentPath?: string;
+        preventNavigation?: boolean;
         onclick?: (event: Event) => void;
         className?: string;
     }
@@ -20,13 +21,16 @@
         variant = "header",
         items = [],
         currentPath = "",
+        preventNavigation = false,
         onclick,
         className = "",
         ...restProps
     }: Props & { children?: any } = $props();
 
-    function handleClick(item: NavigationItem, event: MouseEvent) {
-        event.preventDefault();
+    function handleClick(event: MouseEvent) {
+        if (preventNavigation) {
+            event.preventDefault();
+        }
         if (onclick) {
             onclick(event as any);
         }
@@ -35,11 +39,11 @@
     const ulClasses = $derived(() => {
         return variant === "sidebar"
             ? "flex flex-col gap-1"
-            : "flex items-center justify-between gap-1";
+            : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
     });
 
     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";
+        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 w-full md:w-auto";
 
         return baseClasses;
     }
@@ -88,8 +92,7 @@
             <a
                 href={item.href}
                 class={iconContainerClasses}
-                onclick={(e) => handleClick(item, e)}
-                role="button"
+                onclick={handleClick}
                 aria-current={isActive ? "page" : undefined}
             >
                 <div class={getStateLayerClasses()}>

package/dist/organisms/Navigation.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     variant?: "header" | "sidebar";
     items?: NavigationItem[];
     currentPath?: string;
+    preventNavigation?: boolean;
     onclick?: (event: Event) => void;
     className?: string;
 }