zabi-components 7.0.1 → 8.0.0

package/dist/molecules/Alert.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { Check, TriangleAlert, X, Info, Zap } from "@lucide/svelte";
     import type { ExtendedSemanticVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
     type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
@@ -7,6 +9,12 @@
         title?: string;
         message?: string;
         closable?: boolean;
+        /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
+        open?: boolean;
+        /** Shrink to content instead of filling the container. */
+        inline?: boolean;
+        class?: string;
+        /** @deprecated use `class` — kept so 7.x call sites keep working. */
         className?: string;
         onclick?: (event: Event) => void;
     }
@@ -16,6 +24,9 @@
         title = "",
         message = "",
         closable = false,
+        open = $bindable(true),
+        inline = false,
+        class: classProp = "",
         className = "",
         onclick,
         children,
@@ -23,6 +34,7 @@
     }: Props & { children?: any } = $props();
 
     function handleDismiss(event: MouseEvent) {
+        open = false;
         if (onclick) {
             onclick(event);
         }
@@ -32,13 +44,20 @@
         variant === "default" ? "info" : variant,
     );
 
+    /**
+     * A tinted fill plus a tinted edge, not a bare 1px outline on a
+     * transparent ground — an outline-only alert on a light page barely
+     * registers, and the pale warning and citron borders were close to
+     * invisible. The icon carries the family colour at its `-text` step.
+     */
     let alertClasses = $derived({
-        info: "text-info border border-info",
-        success: "text-success border border-success",
-        warning: "text-warning border border-warning",
-        error: "text-error border border-error",
-        neutral: "text-neutral border border-neutral",
-        energetic: "text-energetic border border-energetic",
+        info: "bg-info-subtle border-info-border text-info-text",
+        success: "bg-success-subtle border-success-border text-success-text",
+        warning: "bg-warning-subtle border-warning-border text-warning-text",
+        error: "bg-error-subtle border-error-border text-error-text",
+        neutral: "bg-neutral-subtle border-neutral-border text-neutral-text",
+        energetic:
+            "bg-energetic-subtle border-energetic-border text-energetic-text",
     });
 
     let alertRole = $derived(
@@ -48,83 +67,42 @@
 
 {#snippet icon()}
     {#if visualVariant === "info"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else if visualVariant === "success"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Check size={20} aria-hidden="true" />
     {:else if visualVariant === "warning"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <TriangleAlert size={20} aria-hidden="true" />
     {:else if visualVariant === "error"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <X size={20} aria-hidden="true" />
     {:else if visualVariant === "neutral"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M11 3L4 14h6l-1 7 7-11h-6l1-7z" />
-        </svg>
+        <Zap size={20} aria-hidden="true" />
     {/if}
 {/snippet}
 
+{#if open}
 <div
-    class="relative rounded-md p-4 border {alertClasses[
-        visualVariant
-    ]} transition-all duration-200 motion-reduce:transition-none {className}"
+    class={cn(
+        'relative rounded-container p-4 border',
+        inline ? 'inline-block' : 'block w-full',
+        alertClasses[visualVariant],
+        'transition-colors duration-150 motion-reduce:transition-none',
+        classProp,
+        className,
+    )}
     role={alertRole}
-    aria-live={visualVariant === "success" || visualVariant === "info"
-        ? "polite"
-        : "assertive"}
     aria-atomic="true"
     {...restProps}
 >
     {#if closable}
         <button
             onclick={handleDismiss}
-            class="group absolute right-2 top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-description transition-colors duration-200 hover:text-body motion-reduce:transition-none focus-ring"
+            class="absolute right-2 top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-control text-description transition-colors duration-150 hover:bg-surface-hover hover:text-body motion-reduce:transition-none focus-ring--muted"
             aria-label="Dismiss alert"
             type="button"
         >
-            <svg
-                class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                />
-            </svg>
+            <X size={16} aria-hidden="true" />
         </button>
     {/if}
 
@@ -148,3 +126,4 @@
         </div>
     </div>
 </div>
+{/if}

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

@@ -4,12 +4,18 @@ interface Props {
     title?: string;
     message?: string;
     closable?: boolean;
+    /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
+    open?: boolean;
+    /** Shrink to content instead of filling the container. */
+    inline?: boolean;
+    class?: string;
+    /** @deprecated use `class` — kept so 7.x call sites keep working. */
     className?: string;
     onclick?: (event: Event) => void;
 }
 type $$ComponentProps = Props & {
     children?: any;
 };
-declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

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;