zabi-components 6.0.0 → 7.0.0

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

@@ -1,4 +1,6 @@
+import type { Snippet } from "svelte";
 import type { Component } from "svelte";
+import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 export interface SidebarNavigationItem {
     id: string;
     label: string;
@@ -10,13 +12,19 @@ export interface SidebarNavigationItem {
     badgeText?: string | number;
     badgeCount?: number;
     group?: "primary" | "secondary";
+    /** Groups items under a section heading in the rail. */
+    section?: string;
 }
 interface Props {
     mode?: "expanded" | "collapsed";
+    layout?: "rail" | "card";
     items?: SidebarNavigationItem[];
     currentPath?: string;
     ariaLabel?: string;
     className?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    brandName?: string;
     showProfile?: boolean;
     profileName?: string;
     profileEmail?: string;
@@ -25,6 +33,13 @@ interface Props {
     searchMode?: "input" | "button";
     searchPlaceholder?: string;
     searchValue?: string;
+    /** Trigger icon when search is a button or rail is collapsed; input mode keeps `Search` on the field. */
+    searchTriggerIcon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    searchTriggerVariant?: ButtonVariant;
+    searchTriggerSize?: SizeVariant;
     showLogout?: boolean;
     logoutLabel?: string;
     showThemeToggle?: boolean;
@@ -38,12 +53,13 @@ interface Props {
     onLogout?: () => void;
     onThemeToggle?: (nextIsLightMode: boolean) => void;
     onEmptyStateAction?: () => void;
-    /**
-     * Highlights a primary (e.g. category) row when the current route is a child
-     * of that section, while `currentPath` points at the leaf (e.g. a component).
-     */
+    onProfileClick?: (event?: MouseEvent) => void;
+    profilePanelOpen?: boolean;
+    profilePanelControlsId?: string;
+    profilePanel?: Snippet;
+    /** Parent nav href to highlight when `currentPath` is a deeper leaf (e.g. category row). */
     activePrimaryHref?: string;
 }
-declare const SidebarNavigation: Component<Props, {}, "searchValue" | "isLightMode">;
+declare const SidebarNavigation: Component<Props, {}, "isLightMode" | "searchValue">;
 type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
 export default SidebarNavigation;

package/dist/organisms/SidebarPanel.svelte

@@ -15,6 +15,7 @@
     interface Props {
         className?: string;
         widthClass?: string;
+        variant?: "plain" | "elevated";
         ariaLabel?: string;
         title?: string;
         subtitle?: string;
@@ -25,15 +26,18 @@
         selectedItemId?: string;
         emptyStateTitle?: string;
         emptyStateDescription?: string;
+        emptyStateActionLabel?: string;
         selectLabel?: string;
         closeLabel?: string;
         onSelect?: (item: SidebarPanelItem) => void;
         onClose?: () => void;
+        onEmptyStateAction?: () => void;
     }
 
     let {
         className = "",
         widthClass = "w-80",
+        variant = "elevated",
         ariaLabel = "Picker panel",
         title = "Items",
         subtitle = "Choose an item to continue",
@@ -44,10 +48,12 @@
         selectedItemId = $bindable(""),
         emptyStateTitle = "No matches",
         emptyStateDescription = "Try a different keyword.",
+        emptyStateActionLabel = "",
         selectLabel = "Select item",
         closeLabel = "Close panel",
         onSelect,
         onClose,
+        onEmptyStateAction,
         ...restProps
     }: Props = $props();
 
@@ -60,19 +66,24 @@
             : items,
     );
 
+    const isElevated = $derived(variant === "elevated");
+
     const containerClasses = $derived.by(() => {
         const resolvedWidthClass = widthClass.trim() || "w-80";
-        return `${resolvedWidthClass} shrink-0 rounded-2xl border border-border bg-background p-4 ${className}`.trim();
+        const shell = isElevated
+            ? "rounded-3xl border border-border bg-card text-headline shadow-md ring-1 ring-border/50"
+            : "rounded-3xl border border-border bg-card text-headline shadow-sm";
+        return `${resolvedWidthClass} shrink-0 p-5 ${shell} ${className}`.trim();
     });
 
     function getItemClasses(itemId: string): string {
         const isActive = selectedItemId === itemId;
         const baseClasses =
-            "w-full cursor-pointer rounded-xl px-3 py-3 text-left transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg px-3 py-2.5 text-left transition-colors duration-150";
         if (isActive) {
-            return `${baseClasses} bg-action-primary-subtle text-headline`;
+            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border/80`;
         }
-        return `${baseClasses} hover:bg-base-50 text-description`;
+        return `${baseClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
     }
 
     function handleSelect(item: SidebarPanelItem): void {
@@ -87,44 +98,52 @@
             onClose();
         }
     }
+
+    function handleEmptyStateAction(): void {
+        if (onEmptyStateAction) {
+            onEmptyStateAction();
+        }
+    }
 </script>
 
 <aside class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div class="mb-4 flex items-start justify-between gap-3">
-        <div class="min-w-0">
-            <h3 class="truncate text-base font-semibold text-headline">{title}</h3>
-            <p class="mt-1 text-sm text-description">{subtitle}</p>
+    <div class="mb-5 flex items-start justify-between gap-3">
+        <div class="min-w-0 pr-1">
+            <h3 class="truncate text-base font-semibold tracking-tight text-headline">
+                {title}
+            </h3>
+            <p class="mt-0.5 text-sm leading-relaxed text-description">{subtitle}</p>
         </div>
         <button
             type="button"
-            class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-description hover:bg-base-50 hover:text-headline focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
+            class="-mr-0.5 -mt-0.5 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-nav-menu-item transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-ring focus-ring--nav"
             aria-label={closeLabel}
             onclick={handleClose}
         >
-            <X size={16} />
+            <X size={18} />
         </button>
     </div>
 
     {#if showSearch}
-        <div class="relative mb-3">
+        <div class="relative mb-5">
             <span
-                class="pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-description"
+                class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-description"
                 aria-hidden="true"
             >
-                <Search size={18} />
+                <Search size={17} />
             </span>
             <Input
                 type="search"
                 bind:value={searchValue}
                 placeholder={searchPlaceholder}
                 aria-label={searchPlaceholder}
-                class="w-full min-w-0 rounded-xl pl-11"
+                class="w-full min-w-0 min-h-10 rounded-xl border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent focus-ring focus-ring--nav"
             />
         </div>
     {/if}
 
     {#if filteredItems.length > 0}
-        <ul class="space-y-2" role="listbox" aria-label={selectLabel}>
+        <ul class="space-y-1" role="listbox" aria-label={selectLabel}>
             {#each filteredItems as item (item.id)}
                 <li role="presentation">
                     <button
@@ -135,18 +154,20 @@
                         aria-selected={selectedItemId === item.id}
                     >
                         <span class="flex items-center justify-between gap-3">
-                            <span class="flex min-w-0 items-start gap-2">
+                            <span class="flex min-w-0 items-start gap-2.5">
                                 {#if item.icon}
                                     {@const Icon = item.icon}
                                     <span
-                                        class="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-current"
+                                        class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center text-current"
                                         aria-hidden="true"
                                     >
-                                        <Icon size={16} />
+                                        <Icon size={18} />
                                     </span>
                                 {/if}
                                 <span class="min-w-0">
-                                    <span class="block truncate text-sm font-medium text-current">
+                                    <span
+                                        class="block truncate text-sm font-medium text-current"
+                                    >
                                         {item.label}
                                     </span>
                                     {#if item.description}
@@ -167,9 +188,20 @@
             {/each}
         </ul>
     {:else}
-        <div class="rounded-xl border border-dashed border-border bg-base-50 p-4">
+        <div
+            class="rounded-xl border border-dashed border-border bg-transparent px-3.5 py-4 ring-1 ring-border/40"
+        >
             <h4 class="text-sm font-semibold text-headline">{emptyStateTitle}</h4>
-            <p class="mt-1 text-sm text-description">{emptyStateDescription}</p>
+            <p class="mt-1 text-sm leading-relaxed text-description">{emptyStateDescription}</p>
+            {#if emptyStateActionLabel.trim() && onEmptyStateAction}
+                <button
+                    type="button"
+                    class="mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm font-medium text-action-primary transition-colors hover:bg-action-primary-hover focus-ring focus-ring--nav"
+                    onclick={handleEmptyStateAction}
+                >
+                    {emptyStateActionLabel.trim()}
+                </button>
+            {/if}
         </div>
     {/if}
-</aside>
+</aside>

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

@@ -12,6 +12,7 @@ export interface SidebarPanelItem {
 interface Props {
     className?: string;
     widthClass?: string;
+    variant?: "plain" | "elevated";
     ariaLabel?: string;
     title?: string;
     subtitle?: string;
@@ -22,10 +23,12 @@ interface Props {
     selectedItemId?: string;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
+    emptyStateActionLabel?: string;
     selectLabel?: string;
     closeLabel?: string;
     onSelect?: (item: SidebarPanelItem) => void;
     onClose?: () => void;
+    onEmptyStateAction?: () => void;
 }
 declare const SidebarPanel: Component<Props, {}, "searchValue" | "selectedItemId">;
 type SidebarPanel = ReturnType<typeof SidebarPanel>;

package/dist/organisms/{Navbar.svelte → TopNavbar.svelte}

@@ -2,8 +2,7 @@
     import ThemeToggle from "../atoms/ThemeToggle.svelte";
     import type { Component, Snippet } from "svelte";
 
-    /** Link shown in the built-in nav list (when not using the `nav` snippet). */
-    export interface NavbarNavItem {
+    export interface TopNavbarNavItem {
         label: string;
         href: string;
         icon?: Component<{ size?: number; class?: string }>;
@@ -12,19 +11,14 @@
 
     interface Props {
         brand?: string;
-        /** When set, the brand is a link (use `""` to show text only). */
         brandHref?: string;
-        /** Accessible name for the landmark when you have more than one `nav`. */
+        /** `aria-label` on `<nav>` when multiple nav landmarks exist. */
         ariaLabel?: string;
         showThemeToggle?: boolean;
         className?: string;
-        /**
-         * When true, renders only the built-in link list (or `nav` snippet) inside a `nav` landmark.
-         * Use for headers that are not the full chrome bar.
-         */
+        /** Slim mode: only the `nav` region (no full chrome bar). */
         embedded?: boolean;
-        /** Inline nav links; ignored when the `nav` snippet is provided. */
-        items?: NavbarNavItem[];
+        items?: TopNavbarNavItem[];
         navVariant?: "header" | "sidebar";
         currentPath?: string;
         preventNavigation?: boolean;
@@ -63,7 +57,18 @@
         }
     }
 
-    const ulClasses = $derived(() => {
+    /** App routes: prefix match except `/` and absolute URLs (exact match). */
+    function isNavItemActive(href: string): boolean {
+        if (href.startsWith("http://") || href.startsWith("https://")) {
+            return currentPath === href;
+        }
+        if (href === "/") {
+            return currentPath === "/";
+        }
+        return currentPath === href || currentPath.startsWith(`${href}/`);
+    }
+
+    const ulClasses = $derived.by(() => {
         return navVariant === "sidebar"
             ? "flex flex-col gap-1"
             : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
@@ -74,7 +79,7 @@
     }
 
     function getIconContainerClasses(): string {
-        return "group/nav-item flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 text-nav-menu-item transition-colors duration-200 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover aria-[current=page]:bg-nav-menu-active aria-[current=page]:text-nav-menu-item-active focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
+        return "focus-ring focus-ring--nav group/nav-item flex flex-col items-center justify-center overflow-clip relative rounded-[20px] shrink-0 text-nav-menu-item transition-colors duration-200 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover aria-[current=page]:bg-nav-menu-active aria-[current=page]:text-nav-menu-item-active";
     }
 
     function getStateLayerClasses(): string {
@@ -91,9 +96,9 @@
 </script>
 
 {#snippet defaultNavList()}
-    <ul class="{ulClasses()} list-none m-0 p-0">
-        {#each items as item}
-            {@const isActive = currentPath === item.href}
+    <ul class="{ulClasses} list-none m-0 p-0">
+        {#each items as item (item.href)}
+            {@const isActive = isNavItemActive(item.href)}
             <li class={getNavItemClasses()}>
                 <a
                     href={item.href}
@@ -133,7 +138,7 @@
     </nav>
 {:else}
     <nav
-        class="bg-base-50 border-b border-border sticky top-0 z-50 {className}"
+        class="border-b border-border bg-background sticky top-0 z-50 {className}"
         aria-label={ariaLabel}
         {...restProps}
     >
@@ -143,7 +148,7 @@
                     {#if brandHref}
                         <a
                             href={brandHref}
-                            class="text-xl font-bold text-headline hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600"
+                            class="focus-ring text-xl font-bold text-headline hover:opacity-90"
                         >
                             {brand}
                         </a>

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

@@ -0,0 +1,35 @@
+import type { Component, Snippet } from "svelte";
+export interface TopNavbarNavItem {
+    label: string;
+    href: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    iconFilled?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+}
+interface Props {
+    brand?: string;
+    brandHref?: string;
+    /** `aria-label` on `<nav>` when multiple nav landmarks exist. */
+    ariaLabel?: string;
+    showThemeToggle?: boolean;
+    className?: string;
+    /** Slim mode: only the `nav` region (no full chrome bar). */
+    embedded?: boolean;
+    items?: TopNavbarNavItem[];
+    navVariant?: "header" | "sidebar";
+    currentPath?: string;
+    preventNavigation?: boolean;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    nav?: Snippet;
+    actions?: Snippet;
+};
+declare const TopNavbar: Component<$$ComponentProps, {}, "">;
+type TopNavbar = ReturnType<typeof TopNavbar>;
+export default TopNavbar;

package/dist/organisms/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Navbar } from './Navbar.svelte';
+export { default as TopNavbar } from './TopNavbar.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './SidebarPanel.svelte';

package/dist/organisms/index.js

@@ -1,3 +1,4 @@
-export { default as Navbar } from './Navbar.svelte';
+export { default as TopNavbar } from './TopNavbar.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './SidebarPanel.svelte';

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

@@ -1,23 +1,12 @@
-/**
- * Focus management utilities for accessibility
- */
-/**
- * Get all focusable elements within a container
- */
+/** Focus helpers for overlays (modals, sheets). Requires `app.css` focus ring classes. */
+/** From `app.css` `@layer components` — import the library/app stylesheet. */
+export declare const FOCUS_BRAND_CLASS = "focus-brand";
+export declare const FOCUS_NAV_CLASS = "focus-nav";
 export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
-/**
- * Trap focus within a container element
- */
+/** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export declare function trapFocus(container: HTMLElement): () => void;
-/**
- * Save the currently focused element
- */
 export declare function saveFocus(): void;
-/**
- * Return focus to the previously focused element
- */
+/** Restores focus from the last `saveFocus`. Skips disconnected or unfocusable nodes. */
 export declare function returnFocus(): void;
-/**
- * Focus the first focusable element in a container
- */
 export declare function focusFirstElement(container: HTMLElement): void;
+//# sourceMappingURL=focus-utils.d.ts.map

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

@@ -1,10 +1,9 @@
-/**
- * Focus management utilities for accessibility
- */
+/** Focus helpers for overlays (modals, sheets). Requires `app.css` focus ring classes. */
+
+/** From `app.css` `@layer components` — import the library/app stylesheet. */
+export const FOCUS_BRAND_CLASS = "focus-brand";
+export const FOCUS_NAV_CLASS = "focus-nav";
 
-/**
- * Get all focusable elements within a container
- */
 export function getFocusableElements(container: HTMLElement): HTMLElement[] {
     const selector = [
         'button:not([disabled])',
@@ -17,27 +16,23 @@ export function getFocusableElements(container: HTMLElement): HTMLElement[] {
 
     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
- */
+/** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export function trapFocus(container: HTMLElement): () => void {
     const focusableElements = getFocusableElements(container);
     
     if (focusableElements.length === 0) {
-        return () => {}; // No-op cleanup
+        return () => {};
     }
 
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
 
-    // Focus first element
     firstElement.focus();
 
     function handleKeydown(event: KeyboardEvent) {
@@ -54,13 +49,11 @@ export function trapFocus(container: HTMLElement): () => void {
         }
 
         if (event.shiftKey) {
-            // Shift + Tab
             if (currentFocus === firstElement) {
                 event.preventDefault();
                 lastElement.focus();
             }
         } else {
-            // Tab
             if (currentFocus === lastElement) {
                 event.preventDefault();
                 firstElement.focus();
@@ -70,43 +63,48 @@ export function trapFocus(container: HTMLElement): () => void {
 
     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;
+/** One entry per overlay open; `returnFocus` pops LIFO (nested modals). */
+const focusReturnStack: Array<HTMLElement | null> = [];
 
-/**
- * Save the currently focused element
- */
 export function saveFocus(): void {
-    if (typeof document !== 'undefined') {
-        previousFocus = document.activeElement as HTMLElement;
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && active !== document.body) {
+        focusReturnStack.push(active);
+    } else {
+        focusReturnStack.push(null);
     }
 }
 
-/**
- * Return focus to the previously focused element
- */
+/** Restores focus from the last `saveFocus`. Skips disconnected or unfocusable nodes. */
 export function returnFocus(): void {
-    if (previousFocus && typeof document !== 'undefined') {
-        previousFocus.focus();
-        previousFocus = null;
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const el = focusReturnStack.pop();
+    if (!el) {
+        return;
+    }
+    if (typeof el.focus !== 'function' || !el.isConnected) {
+        return;
+    }
+    try {
+        el.focus({ preventScroll: true });
+    } catch {
+        /* embeds / shadow roots may reject programmatic focus */
     }
 }
 
-/**
- * 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/ssr-safe.ts

@@ -1,7 +1,9 @@
-// SSR-safe utilities for zabi-components
-// This ensures components work properly during server-side rendering
+/**
+ * Browser-only guards and id generation for components that run under SSR.
+ * `generateId()` is non-deterministic on the client (random) vs counter on the server —
+ * use stable ids for ARIA pairs (e.g. `menuId` on NavigationMenu), not for persisted keys.
+ */
 
-// Check if we're in a browser environment
 export function isBrowser(): boolean {
     return typeof window !== 'undefined';
 }
@@ -46,7 +48,6 @@ export function safeClearInterval(id: NodeJS.Timeout | undefined): void {
     }
 }
 
-// Generate SSR-safe unique IDs
 let idCounter = 0;
 export function generateId(prefix: string = 'id'): string {
     if (isBrowser()) {