zabi-components 7.0.2 → 8.0.0

package/dist/molecules/Tabs.svelte

@@ -1,40 +1,49 @@
 <script lang="ts">
+    import type { Snippet } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         tabs?: Array<{
             id: string;
             label: string;
             disabled?: boolean;
         }>;
+        /** Selected tab id; supports `bind:activeTab`. */
         activeTab?: string;
         variant?: "default" | "pills";
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
+        children?: Snippet<[{ activeTab: string }]>;
     }
 
     let {
+        class: className = "",
         tabs = [],
-        activeTab = "",
+        activeTab = $bindable(""),
         variant = "default",
         children,
         ...restProps
-    }: Props & { children?: any } = $props();
+    }: Props = $props();
 
     const tabsBaseId = generateId("tabs");
 
-    function selectTab(tabId: string) {
+    /** Button refs keyed by tab id — roving tabindex needs focus to follow selection. */
+    const tabElements: Record<string, HTMLButtonElement | undefined> = {};
+
+    function selectTab(tabId: string, moveFocus = false) {
         activeTab = tabId;
+        if (moveFocus) {
+            tabElements[tabId]?.focus();
+        }
     }
 
     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}`;
     }
@@ -72,40 +81,37 @@
             const nextIndex =
                 (fallbackIndex + direction + enabledTabs.length) %
                 enabledTabs.length;
-            selectTab(enabledTabs[nextIndex].id);
+            selectTab(enabledTabs[nextIndex].id, true);
         } else if (event.key === "Home") {
             event.preventDefault();
-            selectTab(enabledTabs[0].id);
+            selectTab(enabledTabs[0].id, true);
         } 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);
-            }
+            selectTab(enabledTabs[enabledTabs.length - 1].id, true);
         }
+        // Enter/Space: native <button> click already selects the tab.
     }
 </script>
 
-<div class="tabs-container">
+<div class={cn("tabs-container", className)}>
     <div
         class="flex border-b border-base-200"
         role="tablist"
-        tabindex="0"
+        tabindex="-1"
         onkeydown={handleKeydown}
     >
         {#each tabs as tab (tab.id)}
             <button
+                bind:this={tabElements[tab.id]}
                 type="button"
                 role="tab"
                 id={getTabId(tab.id)}
-                class="focus-ring cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none active:bg-base-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:text-description {activeTab ===
+                class="focus-ring cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none active:bg-surface-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:text-description {activeTab ===
                 tab.id
                     ? variant === 'pills'
                         ? 'border-brand-500 bg-brand-100 text-brand-700'
                         : 'border-brand-500 text-body'
-                    : 'border-transparent text-description hover:border-base-300 hover:text-body'}"
+                    : 'border-transparent text-description hover:border-border-medium hover:text-body'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}

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

@@ -1,17 +1,21 @@
+import type { Snippet } from "svelte";
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     tabs?: Array<{
         id: string;
         label: string;
         disabled?: boolean;
     }>;
+    /** Selected tab id; supports `bind:activeTab`. */
     activeTab?: string;
     variant?: "default" | "pills";
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
+    children?: Snippet<[{
+        activeTab: string;
+    }]>;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-};
-declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/molecules/Toaster.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import ToasterToast from './ToasterToast.svelte';
     import { toastStore } from './toast-store.js';
+    import { cn } from "../util/cn.js";
 
     interface Props {
         class?: string;
@@ -10,11 +11,11 @@
 </script>
 
 <div
-    class="pointer-events-none fixed bottom-4 right-4 z-toast flex min-w-0 w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 p-4 {className}"
+    class={cn("pointer-events-none fixed bottom-4 right-4 z-toast flex min-w-0 w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 p-4", className)}
     role="region"
     aria-label="Notifications"
-    aria-live="polite"
 >
+    <!-- Each toast owns its role="status"/"alert"; a region-level aria-live would announce twice. -->
     {#each $toastStore as toast (toast.id)}
         <ToasterToast {toast} />
     {/each}

package/dist/molecules/ToasterToast.svelte

@@ -12,12 +12,15 @@
     } from '@lucide/svelte';
     import Button from '../atoms/Button.svelte';
     import { toastStore, type ToastItem } from './toast-store.js';
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         toast: ToastItem;
     }
 
-    let { toast }: Props = $props();
+    let { class: className = "", toast }: Props = $props();
 
     /** Seconds until auto-dismiss; `0` means no countdown (manual dismiss only). */
     function autoDismissSeconds(duration: number | undefined): number {
@@ -31,6 +34,10 @@
     let count = $state(0);
     let timerActive = $state(false);
     let isExpanded = $state(false);
+    /** Hover or keyboard focus inside the toast pauses auto-dismiss (WCAG 2.2.1). */
+    let hovered = $state(false);
+    let focusWithin = $state(false);
+    const paused = $derived(hovered || focusWithin);
 
     let intervalRef: ReturnType<typeof setInterval> | undefined;
 
@@ -90,6 +97,7 @@
         timerActive = true;
 
         intervalRef = setInterval(() => {
+            if (paused) return;
             count -= 1;
             if (count <= 0) {
                 stopTimer();
@@ -113,19 +121,38 @@
         isExpanded = false;
     }
 
+    function handleFocusOut(event: FocusEvent) {
+        const next = event.relatedTarget as Node | null;
+        if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+            focusWithin = false;
+        }
+    }
+
     const toastEnter = { y: 18, duration: 260, opacity: 0, easing: cubicOut };
     const toastLeave = { y: 14, duration: 300, opacity: 0, easing: cubicOut };
 </script>
 
 <div
-    class="pointer-events-auto relative w-full min-w-[18rem] overflow-hidden rounded-2xl border border-border bg-surface-1 shadow-xl"
+    class={cn("pointer-events-auto relative w-full min-w-[18rem] overflow-hidden rounded-overlay border border-border-overlay bg-surface-overlay shadow-lg", className)}
     in:fly={toastEnter}
     out:fly={toastLeave}
-    role={toast.type === 'error' ? 'alert' : 'status'}
+    onmouseenter={() => (hovered = true)}
+    onmouseleave={() => (hovered = false)}
+    onfocusin={() => (focusWithin = true)}
+    onfocusout={handleFocusOut}
+    role="group"
+    aria-label={headerTitle}
+    data-paused={paused}
 >
     <div class="p-4">
         <div class="flex items-start gap-3">
-            <div class="shrink-0 pt-0.5">
+            <!-- Live region holds only title + message, so the countdown and buttons are never re-announced. -->
+            <div
+                class="flex min-w-0 flex-1 items-start gap-3"
+                role={toast.type === 'error' ? 'alert' : 'status'}
+                aria-atomic="true"
+            >
+            <div class="shrink-0 mt-0.5">
                 {#if toast.type === 'success'}
                     <CheckCircle class="size-5 {statusIconClass}" aria-hidden="true" />
                 {:else if toast.type === 'error'}
@@ -138,12 +165,16 @@
             </div>
             <h4 class="min-w-0 flex-1 text-base font-semibold text-headline">
                 {headerTitle}
+                {#if toast.message.trim() && toast.message.trim() !== headerTitle}
+                    <span class="sr-only">{toast.message}</span>
+                {/if}
             </h4>
-            <div class="flex shrink-0 items-center gap-0.5">
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
                 {#if hasExpandable}
                     <button
                         type="button"
-                        class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                        class="focus-ring cursor-pointer rounded-control p-1 text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline focus:outline-none"
                         aria-expanded={isExpanded}
                         aria-controls="toaster-expand-{toast.id}"
                         aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
@@ -159,7 +190,7 @@
                 {/if}
                 <button
                     type="button"
-                    class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                    class="focus-ring cursor-pointer rounded-control p-1 text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline focus:outline-none"
                     onclick={handleDismiss}
                     aria-label="Dismiss notification"
                 >
@@ -189,11 +220,11 @@
 
     {#if timerActive}
         <div class="px-4 pb-3" transition:fade={{ duration: 180 }}>
-            <p class="text-xs text-description">
-                This message will close in {count} seconds.
+            <p class="text-xs text-description" data-toast-countdown>
+                {paused ? 'Paused — closes' : 'This message will close'} in {count} seconds.
                 <button
                     type="button"
-                    class="focus-ring cursor-pointer rounded-sm text-link underline-offset-2 hover:underline focus:outline-none"
+                    class="focus-ring cursor-pointer rounded-control text-link underline-offset-2 hover:underline focus:outline-none"
                     onclick={stopTimer}
                 >
                     Click to stop

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

@@ -1,5 +1,7 @@
 import { type ToastItem } from './toast-store.js';
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     toast: ToastItem;
 }
 declare const ToasterToast: import("svelte").Component<Props, {}, "">;

package/dist/organisms/SidebarAccountPanel.svelte

@@ -6,6 +6,8 @@
     import { LogOut, Moon, Sun, User } from "@lucide/svelte";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         /** Target id for `aria-controls` from the sidebar footer/nav. */
         panelId?: string;
         style?: string;
@@ -24,6 +26,7 @@
     }
 
     let {
+        class: className = "",
         panelId = generateId("account-panel"),
         style = "",
         profileName = "Account",
@@ -96,6 +99,7 @@
 <div
     id={panelId}
     {style}
+    class={className}
     role="dialog"
     aria-modal="false"
     aria-label="Account panel"

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

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     /** Target id for `aria-controls` from the sidebar footer/nav. */
     panelId?: string;
     style?: string;

package/dist/organisms/SidebarNavigation.svelte

@@ -6,6 +6,8 @@
     import SidebarBrandHeader from "../molecules/SidebarBrandHeader.svelte";
     import SidebarFooter from "../molecules/SidebarFooter.svelte";
     import SidebarNavSection from "../molecules/SidebarNavSection.svelte";
+    import Tooltip from "../atoms/Tooltip.svelte";
+    import SidebarShell from "./SidebarShell.svelte";
     import { Command, Search } from "@lucide/svelte";
     import type { Snippet } from "svelte";
     import type { Component } from "svelte";
@@ -34,6 +36,8 @@
         items?: SidebarNavigationItem[];
         currentPath?: string;
         ariaLabel?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         logoSrc?: string;
         logoAlt?: string;
@@ -78,7 +82,8 @@
         currentPath = "",
         activePrimaryHref = "",
         ariaLabel = "Sidebar navigation",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         logoSrc = "",
         logoAlt = "",
         brandName = "",
@@ -113,8 +118,10 @@
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+
     const isCollapsed = $derived(mode === "collapsed");
-    const isCard = $derived(layout === "card");
     const showBrandRow = $derived(
         Boolean(logoSrc.trim() || brandName.trim()),
     );
@@ -178,24 +185,6 @@
         partitionBySection(filteredPrimaryItems),
     );
 
-    const insetX = $derived(isCollapsed ? "px-2.5" : "px-4");
-
-    const containerClasses = $derived.by(() => {
-        const widthClass = isCollapsed ? "w-[104px]" : "w-[266px]";
-        const railSurface = "border-r border-border bg-background text-headline";
-        const cardSurface =
-            "border-r border-border bg-background text-headline shadow-sm";
-        const surfaceClasses = isCard ? cardSurface : railSurface;
-        const verticalPad = isCard ? "py-4" : "py-5";
-        const baseClasses = `flex h-full min-h-0 max-h-full flex-col overflow-visible ${verticalPad}`;
-
-        return `${baseClasses} ${widthClass} ${surfaceClasses} ${className}`.trim();
-    });
-
-    const headerStackClasses = $derived(
-        `flex w-full shrink-0 flex-col gap-5 ${insetX}`,
-    );
-
     const iconContainerClasses = $derived(
         "flex size-6 shrink-0 items-center justify-center leading-none text-current",
     );
@@ -210,21 +199,43 @@
         return isMuted ? "text-description" : "text-headline";
     }
 
-    function getNavItemClasses(item: SidebarNavigationItem): string {
-        const isActive =
+    /**
+     * The selected row used to be carried by its fill alone, and the fill was
+     * 1.05:1 against the sidebar in light mode — not a fill, a rumour. Active
+     * and idle labels were #18181b and #27272a at the same weight, a 15-unit
+     * difference in one channel that nobody can see. So in light mode there
+     * was effectively no indication of where you were.
+     *
+     * Three cues now, only one of which is colour-discrimination dependent:
+     * the label takes --color-nav-menu-item-active (defined all along and
+     * never referenced — the row said `text-inherit`), a 3px bar marks the
+     * leading edge, and the tint stays as reinforcement rather than as the
+     * whole message.
+     */
+    function isItemActive(item: SidebarNavigationItem): boolean {
+        return (
             currentPath === item.href ||
-            (Boolean(activePrimaryHref) && item.href === activePrimaryHref);
+            (Boolean(activePrimaryHref) && item.href === activePrimaryHref)
+        );
+    }
+
+    function getNavItemClasses(item: SidebarNavigationItem): string {
+        const isActive = isItemActive(item);
         const layoutClasses = isCollapsed
             ? "flex min-h-10 items-center justify-center px-0 py-2"
-            : "flex min-h-10 items-center gap-2.5 px-2.5 py-2";
+            : "flex min-h-10 items-center gap-3 px-2 py-2";
         const structural =
-            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg no-underline transition-colors duration-150 outline-none";
+            "focus-ring focus-ring--nav relative w-full cursor-pointer rounded-control no-underline transition-colors duration-150 outline-none";
 
         if (isActive) {
-            return `${structural} ${layoutClasses} bg-nav-menu-active text-inherit hover:bg-nav-menu-active hover:text-inherit active:opacity-90`;
+            return (
+                `${structural} ${layoutClasses} bg-nav-menu-active ` +
+                "text-nav-menu-item-active hover:bg-nav-menu-active " +
+                "active:bg-nav-menu-active-hover"
+            );
         }
 
-        return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
+        return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-surface-active`;
     }
 
     function handleNavigate(item: SidebarNavigationItem, event: MouseEvent) {
@@ -268,11 +279,15 @@
     }
 </script>
 
-<nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div
-        class="flex min-h-0 w-full min-w-0 flex-1 flex-col"
-    >
-        <div class={`${headerStackClasses} pb-3`.trim()}>
+<SidebarShell
+    {mode}
+    {layout}
+    {ariaLabel}
+    class={classAttr}
+    className={legacyClass}
+    {...restProps}
+>
+    {#snippet header()}
             {#if showBrandRow}
                 <SidebarBrandHeader
                     collapsed={isCollapsed}
@@ -307,10 +322,10 @@
                             <Button
                                 variant={searchTriggerVariant}
                                 size={searchTriggerSize}
-                                isFullWidth
+                                fullWidth
                                 onclick={handleSearchClick}
                             >
-                                <span class="flex w-full items-center justify-start gap-2.5">
+                                <span class="flex w-full items-center justify-start gap-3">
                                     <span class={iconContainerClasses} aria-hidden="true">
                                         <TriggerIcon size={17} />
                                     </span>
@@ -334,18 +349,13 @@
                             bind:value={searchValue}
                             placeholder={searchPlaceholder}
                             aria-label={searchPlaceholder}
-                            class="focus-ring focus-ring--nav 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"
+                            class="focus-ring focus-ring--nav w-full min-w-0 min-h-10 rounded-container border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent"
                         />
                     </div>
                 {/if}
             {/if}
-        </div>
+    {/snippet}
 
-        <div
-            class={`flex min-h-0 min-w-0 flex-1 flex-col gap-3 overflow-y-auto overflow-x-hidden overscroll-y-contain pt-4 pb-1.5 ${insetX}`}
-            role="region"
-            aria-label="Navigation links"
-        >
         {#if hasFilteredItems}
             <div
                 class="flex w-full min-w-0 flex-col divide-y divide-border"
@@ -363,6 +373,19 @@
                             {#each group.items as item (item.id)}
                                 {@const Icon = item.icon}
                                 <li>
+                                    <!--
+                                      Collapsed rows are icon-only. aria-label
+                                      covers screen readers, but a sighted user
+                                      got an unlabelled glyph with no hover
+                                      affordance at all.
+                                    -->
+                                    <Tooltip
+                                        content={item.label}
+                                        placement="right"
+                                        disabled={!isCollapsed}
+                                        block
+                                        fixed
+                                    >
                                     <a
                                         href={item.href}
                                         class={getNavItemClasses(item)}
@@ -370,6 +393,12 @@
                                         aria-current={getAriaCurrent(item)}
                                         aria-label={isCollapsed ? item.label : undefined}
                                     >
+                                        {#if isItemActive(item)}
+                                            <span
+                                                class="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-pill bg-nav-menu-item-active"
+                                                aria-hidden="true"
+                                            ></span>
+                                        {/if}
                                         {#if Icon}
                                             <span
                                                 class={iconContainerClasses}
@@ -384,16 +413,31 @@
                                                 >{item.label}</span
                                             >
                                         {/if}
-                                        {#if !isCollapsed && getItemBadgeText(item) !== null}
-                                            <span class="ml-auto">
-                                                <Badge
-                                                    variant="default"
-                                                    size="sm"
-                                                    text={getItemBadgeText(item) ?? ""}
-                                                />
-                                            </span>
+                                        {#if getItemBadgeText(item) !== null}
+                                            {#if isCollapsed}
+                                                <!--
+                                                  A notification count that
+                                                  disappears when you collapse
+                                                  the rail is a real loss; the
+                                                  count becomes a dot rather
+                                                  than nothing.
+                                                -->
+                                                <span
+                                                    class="absolute right-2 top-2 size-2 rounded-pill bg-error"
+                                                    aria-hidden="true"
+                                                ></span>
+                                            {:else}
+                                                <span class="ml-auto">
+                                                    <Badge
+                                                        variant="default"
+                                                        size="sm"
+                                                        text={getItemBadgeText(item) ?? ""}
+                                                    />
+                                                </span>
+                                            {/if}
                                         {/if}
                                     </a>
+                                    </Tooltip>
                                 </li>
                             {/each}
                         </SidebarNavSection>
@@ -446,7 +490,7 @@
             {/if}
         {:else}
             <div
-                class="rounded-xl border border-border border-dashed bg-transparent px-3.5 py-4 ring-1 ring-border/60"
+                class="rounded-container border border-border border-dashed bg-transparent px-4 py-4 ring-1 ring-border/60"
             >
                 <h3 class="text-sm font-semibold {getTextToneClass()}">
                     {normalizedSearchTerm && searchMode === "input"
@@ -461,7 +505,7 @@
                 {#if !(normalizedSearchTerm && searchMode === "input")}
                     <button
                         type="button"
-                        class="focus-ring focus-ring--nav 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 outline-none transition-colors hover:bg-action-primary-hover"
+                        class="focus-ring focus-ring--nav mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm font-medium text-action-primary outline-none transition-colors hover:bg-action-primary-hover"
                         onclick={handleEmptyStateAction}
                     >
                         {emptyStateActionLabel}
@@ -469,11 +513,9 @@
                 {/if}
             </div>
         {/if}
-        </div>
-    </div>
-
-    <SidebarFooter
-        collapsed={isCollapsed}
+    {#snippet footer({ insetX })}
+        <SidebarFooter
+            collapsed={isCollapsed}
         {showProfile}
         {profileName}
         {profileEmail}
@@ -489,6 +531,7 @@
         {profilePanelOpen}
         {profilePanelControlsId}
         {profilePanel}
-        className={insetX}
-    />
-</nav>
+            className={insetX}
+        />
+    {/snippet}
+</SidebarShell>

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

@@ -21,6 +21,8 @@ interface Props {
     items?: SidebarNavigationItem[];
     currentPath?: string;
     ariaLabel?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     logoSrc?: string;
     logoAlt?: string;