npm - zabi-components - Versions diffs - 7.0.1 → 8.0.0 - Mend

zabi-components 7.0.1 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

package/README.md +46 -3
package/THEMING.md +255 -15
package/dist/atoms/ActionPanel.svelte +12 -7
package/dist/atoms/ActionPanel.svelte.d.ts +2 -0
package/dist/atoms/Badge.svelte +93 -56
package/dist/atoms/Badge.svelte.d.ts +15 -3
package/dist/atoms/Button.svelte +49 -49
package/dist/atoms/Button.svelte.d.ts +3 -0
package/dist/atoms/Card.svelte +31 -28
package/dist/atoms/Card.svelte.d.ts +5 -2
package/dist/atoms/CardContent.svelte +10 -2
package/dist/atoms/CardContent.svelte.d.ts +2 -0
package/dist/atoms/CardFooter.svelte +10 -2
package/dist/atoms/CardFooter.svelte.d.ts +2 -0
package/dist/atoms/CardHeader.svelte +10 -2
package/dist/atoms/CardHeader.svelte.d.ts +2 -0
package/dist/atoms/Checkbox.svelte +4 -0
package/dist/atoms/Checkbox.svelte.d.ts +2 -0
package/dist/atoms/CodeBlock.svelte +15 -7
package/dist/atoms/CodeBlock.svelte.d.ts +9 -3
package/dist/atoms/ColorPicker.svelte +19 -9
package/dist/atoms/ColorPicker.svelte.d.ts +3 -1
package/dist/atoms/Container.svelte +2 -3
package/dist/atoms/Divider.svelte +4 -4
package/dist/atoms/FeatureCard.svelte +4 -3
package/dist/atoms/Heading.svelte +56 -27
package/dist/atoms/Heading.svelte.d.ts +17 -4
package/dist/atoms/IconButton.svelte +30 -37
package/dist/atoms/Input.svelte +26 -34
package/dist/atoms/List.svelte +10 -2
package/dist/atoms/List.svelte.d.ts +2 -0
package/dist/atoms/ListItem.svelte +2 -2
package/dist/atoms/ListItemLeading.svelte +4 -2
package/dist/atoms/ListItemLeading.svelte.d.ts +1 -1
package/dist/atoms/OptimizedImage.svelte +11 -2
package/dist/atoms/OptimizedImage.svelte.d.ts +2 -0
package/dist/atoms/Progress.svelte +4 -1
package/dist/atoms/Progress.svelte.d.ts +2 -0
package/dist/atoms/Radio.svelte +4 -0
package/dist/atoms/Radio.svelte.d.ts +2 -0
package/dist/atoms/Select.svelte +65 -67
package/dist/atoms/Select.svelte.d.ts +4 -0
package/dist/atoms/SelectionControl.svelte +5 -1
package/dist/atoms/SelectionControl.svelte.d.ts +2 -0
package/dist/atoms/Skeleton.svelte +5 -3
package/dist/atoms/Table.svelte +2 -1
package/dist/atoms/Text.svelte +34 -5
package/dist/atoms/Text.svelte.d.ts +7 -1
package/dist/atoms/Textarea.svelte +7 -6
package/dist/atoms/ThemeToggle.svelte +17 -14
package/dist/atoms/ThemeToggle.svelte.d.ts +2 -0
package/dist/atoms/Toast.svelte +10 -8
package/dist/atoms/Toggle.svelte +21 -13
package/dist/atoms/Toggle.svelte.d.ts +7 -0
package/dist/atoms/Tooltip.svelte +89 -57
package/dist/atoms/Tooltip.svelte.d.ts +15 -0
package/dist/components/index.d.ts +3 -1
package/dist/components/index.d.ts.map +1 -1
package/dist/components/organisms/index.d.ts +1 -0
package/dist/components/organisms/index.d.ts.map +1 -1
package/dist/components/util/cn.d.ts +8 -0
package/dist/components/util/cn.d.ts.map +1 -0
package/dist/components/util/ssr-safe.d.ts +4 -4
package/dist/components/util/ssr-safe.d.ts.map +1 -1
package/dist/index.d.ts +3 -1
package/dist/index.js +3 -6
package/dist/molecules/Alert.svelte +43 -64
package/dist/molecules/Alert.svelte.d.ts +7 -1
package/dist/molecules/ComponentDemo.svelte +10 -2
package/dist/molecules/ComponentDemo.svelte.d.ts +2 -0
package/dist/molecules/ContactForm.svelte +12 -2
package/dist/molecules/ContactForm.svelte.d.ts +2 -0
package/dist/molecules/Dropdown.svelte +40 -11
package/dist/molecules/Dropdown.svelte.d.ts +4 -0
package/dist/molecules/EmptyState.svelte +2 -1
package/dist/molecules/Form.svelte +25 -14
package/dist/molecules/Form.svelte.d.ts +13 -5
package/dist/molecules/FormField.svelte +2 -1
package/dist/molecules/Header.svelte +13 -3
package/dist/molecules/Header.svelte.d.ts +2 -0
package/dist/molecules/ImageUpload.svelte +54 -15
package/dist/molecules/ImageUpload.svelte.d.ts +16 -5
package/dist/molecules/Modal.svelte +110 -31
package/dist/molecules/Modal.svelte.d.ts +9 -6
package/dist/molecules/NavigationMenu.svelte +15 -3
package/dist/molecules/NavigationMenu.svelte.d.ts +4 -0
package/dist/molecules/NavigationMenuContent.svelte +36 -38
package/dist/molecules/NavigationMenuContent.svelte.d.ts +2 -0
package/dist/molecules/NavigationMenuItem.svelte +10 -2
package/dist/molecules/NavigationMenuItem.svelte.d.ts +2 -0
package/dist/molecules/NavigationMenuLink.svelte +10 -2
package/dist/molecules/NavigationMenuLink.svelte.d.ts +2 -0
package/dist/molecules/NavigationMenuList.svelte +10 -2
package/dist/molecules/NavigationMenuList.svelte.d.ts +2 -0
package/dist/molecules/NavigationMenuTrigger.svelte +16 -3
package/dist/molecules/NavigationMenuTrigger.svelte.d.ts +2 -0
package/dist/molecules/Page.svelte +8 -2
package/dist/molecules/Page.svelte.d.ts +2 -0
package/dist/molecules/PropsTable.svelte +6 -3
package/dist/molecules/PropsTable.svelte.d.ts +2 -0
package/dist/molecules/RadioGroup.svelte +5 -1
package/dist/molecules/RadioGroup.svelte.d.ts +2 -0
package/dist/molecules/Section.svelte +12 -4
package/dist/molecules/Section.svelte.d.ts +3 -1
package/dist/molecules/SidebarBrandHeader.svelte +13 -4
package/dist/molecules/SidebarBrandHeader.svelte.d.ts +2 -0
package/dist/molecules/SidebarFooter.svelte +12 -4
package/dist/molecules/SidebarFooter.svelte.d.ts +2 -0
package/dist/molecules/SidebarNavSection.svelte +12 -4
package/dist/molecules/SidebarNavSection.svelte.d.ts +2 -0
package/dist/molecules/SlideUp.svelte +85 -21
package/dist/molecules/SlideUp.svelte.d.ts +5 -4
package/dist/molecules/Tabs.svelte +25 -19
package/dist/molecules/Tabs.svelte.d.ts +8 -4
package/dist/molecules/Toaster.svelte +3 -2
package/dist/molecules/ToasterToast.svelte +41 -10
package/dist/molecules/ToasterToast.svelte.d.ts +2 -0
package/dist/organisms/SidebarAccountPanel.svelte +4 -0
package/dist/organisms/SidebarAccountPanel.svelte.d.ts +2 -0
package/dist/organisms/SidebarNavigation.svelte +102 -59
package/dist/organisms/SidebarNavigation.svelte.d.ts +2 -0
package/dist/organisms/SidebarPanel.svelte +19 -11
package/dist/organisms/SidebarPanel.svelte.d.ts +2 -0
package/dist/organisms/SidebarShell.svelte +112 -0
package/dist/organisms/SidebarShell.svelte.d.ts +52 -0
package/dist/organisms/TopNavbar.svelte +88 -17
package/dist/organisms/TopNavbar.svelte.d.ts +2 -0
package/dist/organisms/index.d.ts +1 -0
package/dist/organisms/index.js +1 -0
package/dist/routes/lib/variant-utils.d.ts +26 -0
package/dist/routes/lib/{variant-utils.ts → variant-utils.js} +15 -46
package/dist/types/events.js +1 -0
package/dist/types/index.js +3 -0
package/dist/util/cn.d.ts +7 -0
package/dist/util/cn.js +48 -0
package/dist/util/ssr-safe.d.ts +4 -4
package/dist/zabi-components-colors.css +3 -437
package/dist/zabi-components-theme-dark-only.css +223 -103
package/dist/zabi-components-theme-dark.css +223 -103
package/dist/zabi-components-theme-only.css +347 -107
package/dist/zabi-components-theme.css +347 -107
package/dist/zabi-components.css +953 -843
package/docs/lucide-icons.md +3 -1
package/package.json +20 -25
package/dist/lib/layout-width-tokens.d.ts +0 -17
package/dist/lib/layout-width-tokens.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/Button.d.ts +0 -3
package/dist/lib/showcase/component-docs/Button.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/Input.d.ts +0 -3
package/dist/lib/showcase/component-docs/Input.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/List.d.ts +0 -3
package/dist/lib/showcase/component-docs/List.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/Modal.d.ts +0 -3
package/dist/lib/showcase/component-docs/Modal.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/Radio.d.ts +0 -3
package/dist/lib/showcase/component-docs/Radio.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts +0 -3
package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/Skeleton.d.ts +0 -3
package/dist/lib/showcase/component-docs/Skeleton.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/_shared.d.ts +0 -12
package/dist/lib/showcase/component-docs/_shared.d.ts.map +0 -1
package/dist/lib/showcase/component-docs/index.d.ts +0 -4
package/dist/lib/showcase/component-docs/index.d.ts.map +0 -1
package/dist/lib/showcase/components-catalog.d.ts +0 -3
package/dist/lib/showcase/components-catalog.d.ts.map +0 -1
package/dist/lib/showcase/components-showcase-constants.d.ts +0 -89
package/dist/lib/showcase/components-showcase-constants.d.ts.map +0 -1
package/dist/lib/showcase/docs-sidebar-helpers.d.ts +0 -15
package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +0 -1
package/dist/routes/lib/focus-utils.d.ts +0 -12
package/dist/routes/lib/focus-utils.ts +0 -110
package/dist/routes/lib/ssr-safe.ts +0 -58
package/scripts/fix-lucide-svelte-icon-dts.js +0 -35

package/dist/molecules/SlideUp.svelte CHANGED Viewed

@@ -1,40 +1,66 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import {
         focusFirstElement,
+        getFocusableElements,
         returnFocus,
         saveFocus,
-        trapFocus,
     } from '../util/focus-utils.js';
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         isOpen?: boolean;
         title?: string;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
+        children?: Snippet;
     }
     let {
+        class: className = "",
         isOpen = $bindable(false),
         title = '',
         onclick,
         onkeydown,
         children,
         ...restProps
-    } = $props<Props & { children?: any }>();
+    }: Props = $props();
     const slideTitleId = generateId('slideup-title');
     let slideUpContainer = $state<HTMLDivElement>();
-    let cleanupFocusTrap: (() => void) | null = null;
+    let focusActive = false;
+    /** Ref-counted on `<body>`; shares the counter with Modal so nested overlays unlock once. */
+    function lockBodyScroll(): () => void {
+        const body = document.body;
+        const count = Number(body.dataset.zabiScrollLock ?? '0');
+        if (count === 0) {
+            body.dataset.zabiScrollLockOverflow = body.style.overflow;
+            body.style.overflow = 'hidden';
+        }
+        body.dataset.zabiScrollLock = String(count + 1);
+        return () => {
+            const next = Number(body.dataset.zabiScrollLock ?? '1') - 1;
+            if (next <= 0) {
+                body.style.overflow = body.dataset.zabiScrollLockOverflow ?? '';
+                delete body.dataset.zabiScrollLock;
+                delete body.dataset.zabiScrollLockOverflow;
+            } else {
+                body.dataset.zabiScrollLock = String(next);
+            }
+        };
+    }
     function closeSlideUp(event?: Event) {
         isOpen = false;
-        if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
+        if (focusActive) {
+            focusActive = false;
+            returnFocus();
         }
-        returnFocus();
         if (onclick && event) {
             onclick(event);
         }
@@ -44,17 +70,51 @@
         const container = slideUpContainer;
         if (isOpen && container) {
             saveFocus();
-            cleanupFocusTrap = trapFocus(container);
-            setTimeout(() => {
+            focusActive = true;
+            const unlockScroll = lockBodyScroll();
+            const t = setTimeout(() => {
                 focusFirstElement(container);
             }, 0);
-        } else if (!isOpen && cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-            returnFocus();
+            return () => {
+                clearTimeout(t);
+                unlockScroll();
+                if (focusActive) {
+                    focusActive = false;
+                    returnFocus();
+                }
+            };
         }
     });
+    /** Re-queries focusables on every Tab so late-rendered content stays inside the trap. */
+    function handleTrapKeydown(event: KeyboardEvent) {
+        const container = slideUpContainer;
+        if (event.key !== 'Tab' || !container) return;
+        const owner = (event.target as Element | null)?.closest?.('[role="dialog"]');
+        if (owner && owner !== container) return;
+        const focusable = getFocusableElements(container);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            container.focus();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement as HTMLElement | null;
+        if (!active || !focusable.includes(active)) {
+            event.preventDefault();
+            first.focus();
+        } else if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        } else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
             closeSlideUp(event);
@@ -63,7 +123,8 @@
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
-        if (keyboardEvent.key === 'Escape') {
+        if (keyboardEvent.key === 'Escape' && !keyboardEvent.defaultPrevented) {
+            keyboardEvent.preventDefault();
             closeSlideUp(event);
         }
         onkeydown?.(event);
@@ -71,19 +132,22 @@
 </script>
 {#if isOpen}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
         class="fixed inset-0 z-modal cursor-pointer bg-overlay"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? slideTitleId : undefined}
-        tabindex="-1"
-        {...restProps}
+        role="presentation"
     >
         <div
             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]"
+            class={cn("fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-overlay border-t border-border-overlay bg-surface-overlay shadow-lg animate-[slideUp_0.3s_ease-out]", className)}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? slideTitleId : undefined}
+            tabindex="-1"
+            onkeydown={handleTrapKeydown}
+            {...restProps}
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pb-4 pt-6">
@@ -96,7 +160,7 @@
                     <button
                         type="button"
                         onclick={closeSlideUp}
-                        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-2xl text-description transition-colors hover:bg-base-100 hover:text-headline"
+                        class="focus-ring flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-2xl text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline"
                         aria-label="Close"
                     >
                         ×

package/dist/molecules/SlideUp.svelte.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
+import type { Snippet } from 'svelte';
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     isOpen?: boolean;
     title?: string;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
+    children?: Snippet;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-};
-declare const SlideUp: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+declare const SlideUp: import("svelte").Component<Props, {}, "isOpen">;
 type SlideUp = ReturnType<typeof SlideUp>;
 export default SlideUp;

package/dist/molecules/Tabs.svelte CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;