zabi-components 7.0.2 → 8.0.0

package/dist/molecules/ComponentDemo.svelte

@@ -3,12 +3,15 @@
     import Card from "../atoms/Card.svelte";
     import CardHeader from "../atoms/CardHeader.svelte";
     import CardContent from "../atoms/CardContent.svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title: string;
         description?: string;
         code: string;
         language?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
@@ -17,11 +20,16 @@
         description = "",
         code,
         language = "svelte",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
 
+    /** `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 showCode = $state(false);
 </script>
 
@@ -36,7 +44,7 @@
         <CardContent>
             <button
                 onclick={() => (showCode = !showCode)}
-                class="absolute top-8 right-8 z-10 flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm text-description transition-colors duration-200 hover:bg-base-50 hover:text-body"
+                class="absolute top-8 right-8 z-10 flex cursor-pointer items-center gap-2 rounded-control px-3 py-2 text-sm text-description transition-colors duration-200 hover:bg-surface-hover hover:text-body"
                 aria-label={showCode ? "Show preview" : "Show code"}
             >
                 {#if showCode}

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

@@ -3,6 +3,8 @@ interface Props {
     description?: string;
     code: string;
     language?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 type $$ComponentProps = Props & {

package/dist/molecules/ContactForm.svelte

@@ -8,17 +8,25 @@
     import CardHeader from "../atoms/CardHeader.svelte";
     import CardContent from "../atoms/CardContent.svelte";
     import type { ContactFormData } from "../types/page.types";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         onsubmit?: (event: SubmitEvent) => void;
     }
 
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         onsubmit,
     }: 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 formData = $state<ContactFormData>({
         name: "",
         email: "",
@@ -60,6 +68,8 @@
         };
 
         if (!validate(data)) {
+            // Block native submission so the page does not reload and wipe the errors.
+            event.preventDefault();
             formErrorMessage =
                 "We could not submit your request. Fix the highlighted fields and try again.";
             return;
@@ -79,7 +89,7 @@
             <Form onsubmit={handleFormSubmit} className="space-y-4">
                 {#if formErrorMessage}
                 <div
-                    class="rounded-lg border border-error px-4 py-3 text-sm text-error"
+                    class="rounded-control border border-error px-4 py-3 text-sm text-error"
                     role="alert"
                 >
                     <p class="font-medium">Something went wrong</p>

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

@@ -1,4 +1,6 @@
 interface Props {
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     onsubmit?: (event: SubmitEvent) => void;
 }

package/dist/molecules/Dropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { generateId } from "../util/ssr-safe.js";
     import type { Snippet } from 'svelte';
+    import { cn } from "../util/cn.js";
 
     export type DropdownTriggerProps = {
         'aria-expanded': boolean;
@@ -9,6 +10,8 @@
     };
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         isOpen?: boolean;
         placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
         ariaLabel?: string;
@@ -22,10 +25,13 @@
         }>;
         onOptionClick?: (value: string | number) => void;
         trigger: Snippet<[DropdownTriggerProps]>;
+        /** Rendered in the popup above the menu/listbox, outside its role (e.g. a search field). */
+        header?: Snippet;
         children?: Snippet;
     }
 
     let {
+        class: className = "",
         isOpen = $bindable(false),
         placement = 'bottom-start',
         ariaLabel = 'Menu',
@@ -34,6 +40,7 @@
         options = [],
         onOptionClick,
         trigger,
+        header,
         children,
         ...restProps
     }: Props = $props();
@@ -49,8 +56,22 @@
         'aria-controls': menuId,
     } satisfies DropdownTriggerProps);
 
+    function isTextEntryTarget(target: EventTarget | null): boolean {
+        if (!(target instanceof HTMLElement)) return false;
+        if (target.isContentEditable || target instanceof HTMLTextAreaElement) {
+            return true;
+        }
+        return (
+            target instanceof HTMLInputElement &&
+            !['checkbox', 'radio', 'button', 'submit', 'reset'].includes(target.type)
+        );
+    }
+
     function handleKeydown(event: KeyboardEvent) {
         if (!isOpen) {
+            if (event.key === ' ' && isTextEntryTarget(event.target)) {
+                return;
+            }
             if (
                 event.key === 'Enter' ||
                 event.key === ' ' ||
@@ -77,10 +98,13 @@
                 focusPreviousItem();
                 break;
             case 'Home':
+                // Let text fields (e.g. Select search) keep native caret movement.
+                if (isTextEntryTarget(event.target)) break;
                 event.preventDefault();
                 focusFirstItem();
                 break;
             case 'End':
+                if (isTextEntryTarget(event.target)) break;
                 event.preventDefault();
                 focusLastItem();
                 break;
@@ -94,9 +118,13 @@
 
     function getMenuItems(): HTMLElement[] {
         if (!menuElement) return [];
+        // `menuitemradio` and `menuitemcheckbox` are menu items too. Matching
+        // only `menuitem` left a menu built from them with nothing to focus:
+        // arrows and Home/End did nothing, opening by keyboard focused nothing,
+        // and Tab closed the menu, so its items could not be reached at all.
         return Array.from(
             menuElement.querySelectorAll<HTMLElement>(
-                '[role="menuitem"], [role="option"]',
+                '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"]',
             ),
         );
     }
@@ -182,7 +210,7 @@
     const dropdownContentClasses = $derived(() => {
         return [
             placementClasses(),
-            'rounded-lg border border-border bg-card py-2 shadow-lg transition-all duration-200 ease-in-out',
+            'rounded-control border border-border bg-surface-overlay py-2 shadow-lg transition-all duration-200 ease-in-out',
             transformClasses(),
         ]
             .join(' ')
@@ -193,12 +221,12 @@
     const itemRole = $derived(menuRole === 'listbox' ? 'option' : 'menuitem');
 
     const optionClasses =
-        'focus-ring flex w-full items-center justify-start rounded-md px-3 py-2 text-left text-sm text-body transition-colors hover:bg-base-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50';
+        'focus-ring flex w-full items-center justify-start rounded-control px-3 py-2 text-left text-sm text-body transition-colors hover:bg-surface-overlay-hover focus:outline-none disabled:cursor-not-allowed disabled:opacity-50';
 </script>
 
 <div
     bind:this={rootEl}
-    class="relative inline-block"
+    class={cn("relative inline-block", className)}
     data-placement={placement}
     onkeydown={handleKeydown}
     {...restProps}
@@ -206,13 +234,13 @@
     {@render trigger(triggerAria)}
 
     {#if isOpen}
-        <div
-            bind:this={menuElement}
-            id={menuId}
-            class={dropdownContentClasses()}
-            role={menuRole === 'listbox' ? 'listbox' : 'menu'}
-            aria-label={ariaLabel}
-        >
+        <div bind:this={menuElement} class={dropdownContentClasses()}>
+            {@render header?.()}
+            <div
+                id={menuId}
+                role={menuRole === 'listbox' ? 'listbox' : 'menu'}
+                aria-label={ariaLabel}
+            >
             {#if options.length > 0}
                 <div class="px-2 py-1">
                     {#each options as option (option.value)}
@@ -236,6 +264,7 @@
             {:else if children}
                 {@render children?.()}
             {/if}
+            </div>
         </div>
     {/if}
 </div>

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

@@ -5,6 +5,8 @@ export type DropdownTriggerProps = {
     'aria-controls': string;
 };
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     isOpen?: boolean;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     ariaLabel?: string;
@@ -18,6 +20,8 @@ interface Props {
     }>;
     onOptionClick?: (value: string | number) => void;
     trigger: Snippet<[DropdownTriggerProps]>;
+    /** Rendered in the popup above the menu/listbox, outside its role (e.g. a search field). */
+    header?: Snippet;
     children?: Snippet;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "isOpen">;

package/dist/molecules/EmptyState.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title: string;
@@ -22,7 +23,7 @@
 </script>
 
 <section
-    class="mx-auto flex flex-col items-center justify-center gap-4 px-6 py-12 text-center {className}"
+    class={cn("mx-auto flex flex-col items-center justify-center gap-4 px-6 py-12 text-center", className)}
     aria-labelledby={titleId}
 >
     {#if media}

package/dist/molecules/Form.svelte

@@ -1,35 +1,46 @@
 <script lang="ts">
-    interface Props {
+    import type { Snippet } from "svelte";
+    import type { HTMLFormAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
+
+    type Props = Omit<HTMLFormAttributes, "method" | "action" | "onsubmit" | "class"> & {
         method?: "get" | "post";
         action?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
+        /** Skip native constraint validation (e.g. when validating in `onsubmit`). */
+        novalidate?: boolean;
+        /**
+         * Runs on submit. The form still submits natively unless you call
+         * `event.preventDefault()` — do so for client-side handling.
+         */
         onsubmit?: (event: SubmitEvent) => void;
-    }
+        children?: Snippet;
+    };
 
     let {
         method = "post",
         action = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
+        novalidate = false,
         onsubmit,
         children,
         ...restProps
-    } = $props<Props & { children?: any }>();
-
-    function handleSubmit(event: SubmitEvent) {
-        const formData = new FormData(event.target as HTMLFormElement);
-        const data = Object.fromEntries(formData.entries());
+    }: Props = $props();
 
-        if (onsubmit) {
-            onsubmit(event);
-        }
-    }
+    /** `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>
 
 <form
     {method}
     {action}
-    class="space-y-4 {className}"
-    onsubmit={handleSubmit}
+    novalidate={novalidate || undefined}
+    class={cn("space-y-4", className)}
+    onsubmit={(event) => onsubmit?.(event)}
     {...restProps}
 >
     {@render children?.()}

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

@@ -1,12 +1,20 @@
-interface Props {
+import type { Snippet } from "svelte";
+import type { HTMLFormAttributes } from "svelte/elements";
+type Props = Omit<HTMLFormAttributes, "method" | "action" | "onsubmit" | "class"> & {
     method?: "get" | "post";
     action?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
+    /** Skip native constraint validation (e.g. when validating in `onsubmit`). */
+    novalidate?: boolean;
+    /**
+     * Runs on submit. The form still submits natively unless you call
+     * `event.preventDefault()` — do so for client-side handling.
+     */
     onsubmit?: (event: SubmitEvent) => void;
-}
-type $$ComponentProps = Props & {
-    children?: any;
+    children?: Snippet;
 };
-declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Form: import("svelte").Component<Props, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/molecules/FormField.svelte

@@ -2,6 +2,7 @@
     import type { Snippet } from 'svelte';
     import { generateId } from "../util/ssr-safe.js";
 
+    import { cn } from "../util/cn.js";
     export type FormFieldControlProps = {
         id: string;
         'aria-describedby'?: string;
@@ -47,7 +48,7 @@
     );
 </script>
 
-<div class={['space-y-1.5', className].filter(Boolean).join(' ')}>
+<div class={cn('space-y-2', className)}>
     <div class="flex items-baseline justify-between gap-3">
         <label
             class={[

package/dist/molecules/Header.svelte

@@ -2,18 +2,28 @@
     import Badge from "../atoms/Badge.svelte";
     import Heading from "../atoms/Heading.svelte";
     import type { ComponentCategory } from "../types/page.types";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         title: string;
         description: string;
         category: ComponentCategory;
         variantsStates?: string[];
     }
 
-    let { title, description, category, variantsStates }: Props = $props();
+    let {
+        class: className = "",
+        title,
+        description,
+        category,
+        variantsStates,
+        ...restProps
+    }: Props = $props();
 </script>
 
-<header class="space-y-4">
+<header class={cn("space-y-4", className)} {...restProps}>
     <div class="space-y-2">
         <Heading level={1} text={title} />
         <p class="text-lg whitespace-pre-line text-description">{description}</p>
@@ -32,7 +42,7 @@
                 Variants / states:
             </span>
             {#each variantsStates as v (v)}
-                <span class="rounded-md bg-base-100 px-2 py-1 text-xs text-headline">
+                <span class="rounded-control bg-base-100 px-2 py-1 text-xs text-headline">
                     {v}
                 </span>
             {/each}

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

@@ -1,5 +1,7 @@
 import type { ComponentCategory } from "../types/page.types";
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     title: string;
     description: string;
     category: ComponentCategory;

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;