zabi-components 7.0.1 → 8.0.0

package/dist/molecules/ImageUpload.svelte

@@ -1,27 +1,47 @@
 <script lang="ts">
     import { onDestroy } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
     import Button from "../atoms/Button.svelte";
     import { Image } from "@lucide/svelte";
+    import { cn } from "../util/cn.js";
 
-    interface Props {
+    export type ImageUploadFileDetail = {
+        /** Selected file, or `null` when the image is removed. */
+        file: File | null;
+        /** Object URL used for the preview, or `null`. */
+        url: string | null;
+    };
+
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "onclick"> & {
+        /** Extra classes for the host element. */
+        class?: string;
+        /** Preview URL; `bind:value` to read it. */
         value?: string | null;
         disabled?: boolean;
         accept?: string;
         placeholder?: string;
         errorMessage?: string;
+        /** Native `change` event from the hidden file input. */
         onchange?: (event: Event) => void;
+        /** Fires when the file chooser is opened. */
         onclick?: (event: Event) => void;
-    }
+        /** Selected file and preview URL; `{ file: null, url: null }` on remove. */
+        onfileselect?: (detail: ImageUploadFileDetail) => void;
+    };
 
     let {
-        value = null,
+        class: className = "",
+        value = $bindable(null),
         disabled = false,
         accept = "image/*",
         placeholder = "No image selected",
         errorMessage = "",
-        children,
+        onchange,
+        onclick,
+        onfileselect,
+        children: _children,
         ...restProps
-    } = $props<Props & { children?: any }>();
+    }: Props = $props();
 
     let fileInput = $state<HTMLInputElement>();
     let currentObjectUrl = $state<string | null>(null);
@@ -40,13 +60,17 @@
         if (!input.files || input.files.length === 0) return;
 
         const file = input.files[0];
+        let url: string | null = null;
 
         if (typeof URL !== "undefined" && URL.createObjectURL) {
             revokeCurrentObjectUrl();
-            const url = URL.createObjectURL(file);
+            url = URL.createObjectURL(file);
             value = url;
             currentObjectUrl = url;
         }
+
+        onchange?.(event);
+        onfileselect?.({ file, url });
     }
 
     function removeImage() {
@@ -54,28 +78,38 @@
 
         revokeCurrentObjectUrl();
         value = null;
+        if (fileInput) fileInput.value = "";
+        onfileselect?.({ file: null, url: null });
     }
 
-    function triggerFileSelect() {
+    function triggerFileSelect(event: Event) {
         if (disabled) return;
+        onclick?.(event);
         fileInput?.click();
     }
 
+    function handleDropZoneKeydown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            triggerFileSelect(event);
+        }
+    }
+
     onDestroy(() => {
         revokeCurrentObjectUrl();
     });
 </script>
 
-<div class="space-y-3">
+<div class={cn("space-y-3", className)} {...restProps}>
     {#if value}
         <div class="relative group">
             <img
                 src={value}
                 alt=""
-                class="w-full h-32 min-w-64 object-cover rounded-2xl border-0"
+                class="w-full h-32 min-w-64 object-cover rounded-container border-0"
             />
             <div
-                class="absolute inset-0 border border-input-border bg-input min-w-64 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl flex items-center justify-center"
+                class="absolute inset-0 border border-border-overlay bg-surface-overlay/60 backdrop-blur-md min-w-64 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity rounded-container flex items-center justify-center"
             >
                 <div class="flex gap-2">
                     <Button
@@ -99,19 +133,18 @@
         </div>
     {:else}
         <div
-            class="border-2 border-dashed border-input rounded-2xl min-w-64 p-6 text-center hover:border-brand-500 transition-colors {disabled
+            class="border-2 border-dashed border-input-border rounded-container min-w-64 p-6 text-center hover:border-action-primary transition-colors {disabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
             onclick={triggerFileSelect}
             role="button"
             tabindex={disabled ? -1 : 0}
-            onkeydown={(e) =>
-                e.key === "Enter" && !disabled && triggerFileSelect()}
+            onkeydown={handleDropZoneKeydown}
             aria-disabled={disabled}
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-action-secondary rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-action-secondary rounded-control flex items-center justify-center"
                 >
                     <Image size={24} class="text-description" />
                 </div>
@@ -132,10 +165,16 @@
         onchange={handleFileSelect}
         {disabled}
         class="hidden"
+        data-testid="image-upload-input"
     />
 
     {#if errorMessage}
-        <div class="rounded-lg border border-error px-3 py-2 text-sm text-error" role="alert">
+        <!-- Same tinted fill + tinted border Alert uses, rather than a bare
+             step-600 outline on a transparent ground. -->
+        <div
+            class="rounded-container border bg-error-subtle border-error-border text-error-text px-3 py-2 text-sm"
+            role="alert"
+        >
             <p class="font-medium">Image upload failed</p>
             <p>{errorMessage}</p>
             <p class="mt-1">Recovery action: try another file or retry upload.</p>

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

@@ -1,15 +1,26 @@
-interface Props {
+import type { HTMLAttributes } from "svelte/elements";
+export type ImageUploadFileDetail = {
+    /** Selected file, or `null` when the image is removed. */
+    file: File | null;
+    /** Object URL used for the preview, or `null`. */
+    url: string | null;
+};
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "onclick"> & {
+    /** Extra classes for the host element. */
+    class?: string;
+    /** Preview URL; `bind:value` to read it. */
     value?: string | null;
     disabled?: boolean;
     accept?: string;
     placeholder?: string;
     errorMessage?: string;
+    /** Native `change` event from the hidden file input. */
     onchange?: (event: Event) => void;
+    /** Fires when the file chooser is opened. */
     onclick?: (event: Event) => void;
-}
-type $$ComponentProps = Props & {
-    children?: any;
+    /** Selected file and preview URL; `{ file: null, url: null }` on remove. */
+    onfileselect?: (detail: ImageUploadFileDetail) => void;
 };
-declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ImageUpload: import("svelte").Component<Props, {}, "value">;
 type ImageUpload = ReturnType<typeof ImageUpload>;
 export default ImageUpload;

package/dist/molecules/Modal.svelte

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

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

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

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

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

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