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

zabi-components 7.0.2 → 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 +80 -22
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 +2 -2
package/dist/zabi-components-theme-dark-only.css +139 -92
package/dist/zabi-components-theme-dark.css +139 -92
package/dist/zabi-components-theme-only.css +268 -122
package/dist/zabi-components-theme.css +268 -122
package/dist/zabi-components.css +831 -883
package/docs/lucide-icons.md +3 -1
package/package.json +19 -24
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/Modal.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import {
-        trapFocus,
+        getFocusableElements,
         saveFocus,
         returnFocus,
         focusFirstElement,
@@ -11,6 +12,7 @@
     import CardContent from '../atoms/CardContent.svelte';
     import CardFooter from '../atoms/CardFooter.svelte';
+    import { cn } from "../util/cn.js";
     type Size = 'sm' | 'md' | 'lg';
     interface Props {
@@ -18,10 +20,16 @@
         title?: string;
         description?: string;
         size?: Size;
+        /** Render the close button even when there is no `title`. */
+        showClose?: boolean;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
-        /** On the `role="dialog"` root (testing, analytics). */
+        /** On the `role="dialog"` panel (testing, analytics). */
         "data-testid"?: string;
+        /** Extra classes for the dialog panel. */
+        class?: string;
+        children?: Snippet;
+        footer?: Snippet;
     }
     let {
@@ -29,19 +37,21 @@
         title = '',
         description = '',
         size = 'md',
+        showClose = true,
+        class: className = "",
         onclick,
         onkeydown,
         "data-testid": dataTestId = undefined,
         children,
         footer,
         ...restProps
-    }: Props & { children?: any; footer?: any } = $props();
+    }: Props = $props();
     const modalTitleId = generateId('modal-title');
     const modalDescriptionId = generateId('modal-description');
     let modalContainer = $state<HTMLDivElement>();
-    let cleanupFocusTrap: (() => void) | null = null;
+    let focusActive = false;
     const sizeClasses = $derived(
         {
@@ -51,13 +61,33 @@
         }[size] || 'w-full md:w-[28rem]',
     );
+    /** Ref-counted on `<body>` so nested Modal/SlideUp overlays share one lock. */
+    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 closeModal(event?: Event) {
         isOpen = false;
-        if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
+        if (focusActive) {
+            focusActive = false;
+            returnFocus();
         }
-        returnFocus();
         if (onclick && event) {
             onclick(event);
         }
@@ -67,17 +97,52 @@
         const container = modalContainer;
         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 content added while open stays inside the trap. */
+    function handleTrapKeydown(event: KeyboardEvent) {
+        const container = modalContainer;
+        if (event.key !== 'Tab' || !container) return;
+        // A nested dialog handles its own Tab cycle.
+        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) {
             closeModal(event);
@@ -86,7 +151,9 @@
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
-        if (keyboardEvent.key === 'Escape') {
+        // `defaultPrevented` means a nested dialog already closed itself.
+        if (keyboardEvent.key === 'Escape' && !keyboardEvent.defaultPrevented) {
+            keyboardEvent.preventDefault();
             closeModal(event);
         }
         onkeydown?.(event);
@@ -94,52 +161,64 @@
 </script>
 {#if isOpen}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
         class="fixed inset-0 z-modal flex cursor-pointer items-end justify-center bg-overlay p-0 md:items-center md:p-4"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? modalTitleId : undefined}
-        aria-describedby={description ? modalDescriptionId : undefined}
-        tabindex="-1"
-        data-testid={dataTestId}
-        {...restProps}
+        role="presentation"
     >
         <div
             bind:this={modalContainer}
-            class="flex max-h-[90vh] min-w-[320px] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card p-0 shadow-xl animate-[slideUp_0.3s_ease-out] md:animate-none md:rounded-3xl {sizeClasses}"
+            class={cn(
+                "flex max-h-[90vh] min-w-[320px] cursor-default flex-col overflow-y-auto rounded-t-overlay border border-border-overlay bg-surface-overlay p-0 shadow-lg animate-[slideUp_0.3s_ease-out] md:animate-none md:rounded-overlay",
+                sizeClasses,
+                className,
+            )}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? modalTitleId : undefined}
+            aria-describedby={description ? modalDescriptionId : undefined}
+            tabindex="-1"
+            data-testid={dataTestId}
+            onkeydown={handleTrapKeydown}
+            {...restProps}
         >
-            <Card variant="default" fullWidth={false}>
-                {#if title || description}
+            <!-- The panel owns padding: Card's own p-6 would stack with the header's px-6/pt-6 and indent the title 24px past the body. -->
+            <Card variant="flat" fullWidth={false} className="bg-transparent! p-0!">
+                {#if title || description || showClose}
                     <CardHeader
                         {description}
                         descriptionId={description ? modalDescriptionId : undefined}
                         className="px-6 pt-6 pb-4"
                     >
-                        {#if title}
-                            <div class="flex items-center justify-between">
+                        <div class="flex items-center {title ? 'justify-between' : 'justify-end'}">
+                            {#if title}
                                 <h2
                                     id={modalTitleId}
                                     class="text-2xl font-normal leading-8 tracking-normal text-headline"
                                 >
                                     {title}
                                 </h2>
+                            {/if}
+                            {#if showClose}
                                 <button
                                     type="button"
                                     onclick={closeModal}
-                                    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 size-8 cursor-pointer items-center justify-center rounded-control text-2xl text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline"
                                     aria-label="Close"
                                 >
                                     ×
                                 </button>
-                            </div>
-                        {/if}
+                            {/if}
+                        </div>
                     </CardHeader>
                 {/if}
                 {#if children}
-                    <CardContent className="flex-1">
+                    <CardContent
+                        className="flex-1 px-6 {title || description || showClose ? '' : 'pt-6'} {footer ? '' : 'pb-6'}"
+                    >
                         {@render children?.()}
                     </CardContent>
                 {/if}

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

@@ -1,18 +1,21 @@
+import type { Snippet } from 'svelte';
 type Size = 'sm' | 'md' | 'lg';
 interface Props {
     isOpen?: boolean;
     title?: string;
     description?: string;
     size?: Size;
+    /** Render the close button even when there is no `title`. */
+    showClose?: boolean;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
-    /** On the `role="dialog"` root (testing, analytics). */
+    /** On the `role="dialog"` panel (testing, analytics). */
     "data-testid"?: string;
+    /** Extra classes for the dialog panel. */
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-    footer?: any;
-};
-declare const Modal: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+declare const Modal: import("svelte").Component<Props, {}, "isOpen">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/molecules/NavigationMenu.svelte CHANGED Viewed

@@ -9,6 +9,8 @@
     import NavigationMenuLink from "./NavigationMenuLink.svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         navigationMenuStableInstanceId,
@@ -33,24 +35,34 @@
     interface Props {
         viewport?: boolean | "mobile";
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         items?: NavigationMenuItemData[];
         children?: Snippet;
         listClassName?: string;
         /** Panel id / `aria-controls` prefix; pass for SSR or multiple menus. If omitted with non-empty `items`, a deterministic hash is used. */
         menuId?: string;
+        /** Accessible name for the `<nav>` landmark. */
+        ariaLabel?: string;
     }
     let {
         viewport = true,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         items = [],
         children,
         listClassName = "",
         menuId = "",
+        ariaLabel = "Main navigation",
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
     let activeItem = $state<string | null>(null);
     let isMobile = $state(false);
     let containerElement = $state<HTMLElement | null>(null);
@@ -104,8 +116,8 @@
 <nav
     bind:this={containerElement}
-    class="relative {className}"
-    aria-label="Main navigation"
+    class={cn("relative", className)}
+    aria-label={ariaLabel}
     {...restProps}
 >
     {#if items.length > 0}

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

@@ -15,12 +15,16 @@ export interface NavigationMenuItemData {
 }
 interface Props {
     viewport?: boolean | "mobile";
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     items?: NavigationMenuItemData[];
     children?: Snippet;
     listClassName?: string;
     /** Panel id / `aria-controls` prefix; pass for SSR or multiple menus. If omitted with non-empty `items`, a deterministic hash is used. */
     menuId?: string;
+    /** Accessible name for the `<nav>` landmark. */
+    ariaLabel?: string;
 }
 declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
 type NavigationMenu = ReturnType<typeof NavigationMenu>;

package/dist/molecules/NavigationMenuContent.svelte CHANGED Viewed

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-    import { onMount } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         navigationMenuPanelId,
@@ -10,19 +10,25 @@
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
     let contentElement = $state<HTMLElement | null>(null);
-    let parentItem = $state<HTMLElement | null>(null);
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
@@ -36,42 +42,37 @@
             : "",
     );
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === "Escape") {
-            event.preventDefault();
-            context?.setActiveItem(null);
-            const trigger = parentItem?.querySelector('[data-navigation-menu-trigger]') as HTMLElement;
-            trigger?.focus();
-        }
-    }
+    /** Disclosure panel: one document listener while open, removed on close/unmount. */
+    $effect(() => {
+        if (!isActive || !contentElement) return;
+        const panel: HTMLElement = contentElement;
-    function handleClickOutside(event: MouseEvent) {
-        if (
-            contentElement &&
-            !contentElement.contains(event.target as Node) &&
-            parentItem &&
-            !parentItem.contains(event.target as Node)
-        ) {
-            context?.setActiveItem(null);
-        }
-    }
+        const parentItem = panel.closest<HTMLElement>(
+            "[data-navigation-menu-item]",
+        );
-    onMount(() => {
-        if (contentElement) {
-            parentItem = contentElement.closest('[data-navigation-menu-item]') as HTMLElement;
-        }
-        if (isActive) {
-            document.addEventListener("mousedown", handleClickOutside);
+        function handleClickOutside(event: MouseEvent) {
+            const target = event.target as Node;
+            if (!panel.contains(target) && !parentItem?.contains(target)) {
+                context?.setActiveItem(null);
+            }
         }
-    });
-    $effect(() => {
-        if (isActive) {
-            document.addEventListener("mousedown", handleClickOutside);
-            return () => {
-                document.removeEventListener("mousedown", handleClickOutside);
-            };
+        function handleKeydown(event: KeyboardEvent) {
+            if (event.key !== "Escape") return;
+            event.preventDefault();
+            context?.setActiveItem(null);
+            parentItem
+                ?.querySelector<HTMLElement>("[data-navigation-menu-trigger]")
+                ?.focus();
         }
+        document.addEventListener("mousedown", handleClickOutside);
+        panel.addEventListener("keydown", handleKeydown);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            panel.removeEventListener("keydown", handleKeydown);
+        };
     });
 </script>
@@ -79,11 +80,8 @@
     <div
         bind:this={contentElement}
         id={panelId || undefined}
-        class="absolute left-0 top-full mt-2 bg-card rounded-lg shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
-        role="menu"
-        onkeydown={handleKeydown}
+        class={cn("absolute left-0 top-full mt-2 bg-surface-overlay rounded-control shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out", className)}
         data-navigation-menu-content
-        tabindex="-1"
         {...restProps}
     >
         {@render children?.()}

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

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     value?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuItem.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         type NavigationMenuContextValue,
@@ -8,17 +9,24 @@
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -27,7 +35,7 @@
 </script>
 <li
-    class="relative {className}"
+    class={cn("relative", className)}
     role="none"
     data-navigation-menu-item
     data-active={isActive}

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

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     value?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuLink.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         type NavigationMenuContextValue,
@@ -9,6 +10,8 @@
     interface Props {
         href?: string;
         asChild?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
@@ -16,11 +19,16 @@
     let {
         href = "#",
         asChild = false,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -30,7 +38,7 @@
     }
     const linkClasses =
-        "focus-ring focus-ring--nav block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover {className}";
+        "focus-ring focus-ring--nav block cursor-pointer rounded-control px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover {className}";
 </script>
 {#if asChild}

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

@@ -2,6 +2,8 @@ import type { Snippet } from "svelte";
 interface Props {
     href?: string;
     asChild?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuList.svelte CHANGED Viewed

@@ -1,20 +1,28 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 <ul
-    class="flex flex-row items-center gap-1 list-none m-0 p-0 {className}"
+    class={cn("flex flex-row items-center gap-1 list-none m-0 p-0", className)}
     role="menubar"
     aria-orientation="horizontal"
     data-navigation-menu-list

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

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuTrigger.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         navigationMenuPanelId,
@@ -9,17 +10,24 @@
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -58,10 +66,15 @@
 <button
     type="button"
-    class="focus-ring focus-ring--nav inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active {className}"
+    class={cn(
+        "focus-ring focus-ring--nav inline-flex cursor-pointer items-center justify-center gap-2 rounded-control bg-transparent px-4 py-2 text-sm font-medium transition-colors duration-150 outline-none",
+        isActive
+            ? "bg-nav-menu-active text-nav-menu-item-active"
+            : "text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover",
+        className,
+    )}
     aria-expanded={isActive ? 'true' : 'false'}
     aria-controls={panelId || undefined}
-    aria-haspopup="true"
     onclick={handleClick}
     onkeydown={handleKeydown}
     data-navigation-menu-trigger