zabi-components 6.0.0 → 7.0.0

package/dist/molecules/Alert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ExtendedSemanticVariant } from "../../types/variants.js";
+    import type { ExtendedSemanticVariant } from "../types/variants.js";
     type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
@@ -44,28 +44,55 @@
     let alertRole = $derived(
         variant === "success" || variant === "info" ? "status" : "alert",
     );
+</script>
 
-    let iconSvg = $derived({
-        info: `<svg class="w-5 h-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>`,
-        success: `<svg class="w-5 h-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>`,
-        warning: `<svg class="w-5 h-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>`,
-        error: `<svg class="w-5 h-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>`,
-        neutral: `<svg class="w-5 h-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>`,
-        energetic: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+{#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>
+    {: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>
+    {: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>
+    {: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>
+    {: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>
+    {: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>`,
-    });
-</script>
+        </svg>
+    {/if}
+{/snippet}
 
 <div
     class="relative rounded-md p-4 border {alertClasses[
@@ -81,7 +108,7 @@
     {#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:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2"
+            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"
             aria-label="Dismiss alert"
             type="button"
         >
@@ -103,7 +130,7 @@
 
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
         <div class="shrink-0 mt-0.5">
-            {@html iconSvg[visualVariant]}
+            {@render icon()}
         </div>
 
         <div class="flex-1 min-w-0">

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

@@ -1,4 +1,4 @@
-import type { ExtendedSemanticVariant } from "../../types/variants.js";
+import type { ExtendedSemanticVariant } from "../types/variants.js";
 interface Props {
     variant?: ExtendedSemanticVariant;
     title?: string;

package/dist/molecules/ComponentDemo.svelte

@@ -29,7 +29,7 @@
     <Card
         size="lg"
         fullWidth={true}
-        className="overflow-hidden {className}"
+        className="overflow-visible {className}"
         {...restProps}
     >
         <CardHeader {title} {description} />
@@ -81,7 +81,7 @@
             {#if showCode}
                 <CodeBlock {code} {language} />
             {:else}
-                <div class="min-h-[100px] flex items-center justify-center w-full">
+                <div class="min-h-[100px] w-full min-w-0 py-4">
                     {@render children?.()}
                 </div>
             {/if}

package/dist/molecules/ContactForm.svelte

@@ -7,7 +7,7 @@
     import Card from "../atoms/Card.svelte";
     import CardHeader from "../atoms/CardHeader.svelte";
     import CardContent from "../atoms/CardContent.svelte";
-    import type { ContactFormData } from "../../types/page.types";
+    import type { ContactFormData } from "../types/page.types";
 
     interface Props {
         className?: string;

package/dist/molecules/Dropdown.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-    import Button from "../atoms/Button.svelte";
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import type { Snippet } from 'svelte';
+
+    export type DropdownTriggerProps = {
+        'aria-expanded': boolean;
+        'aria-haspopup': 'menu' | 'listbox';
+        'aria-controls': string;
+    };
 
     interface Props {
         isOpen?: boolean;
-        placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+        placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
         ariaLabel?: string;
+        /** `listbox` for Select-style; `menu` for actions. */
+        menuRole?: 'menu' | 'listbox';
         selectedValue?: string | number | null;
         options?: Array<{
             value: string | number;
@@ -13,31 +21,40 @@
             disabled?: boolean;
         }>;
         onOptionClick?: (value: string | number) => void;
+        trigger: Snippet<[DropdownTriggerProps]>;
+        children?: Snippet;
     }
 
     let {
-        isOpen = false,
-        placement = "bottom-start",
-        ariaLabel = "Menu",
+        isOpen = $bindable(false),
+        placement = 'bottom-start',
+        ariaLabel = 'Menu',
+        menuRole = 'menu',
         selectedValue = null,
         options = [],
         onOptionClick,
-        children,
         trigger,
+        children,
         ...restProps
-    }: Props & { children?: any; trigger?: any } = $props();
+    }: Props = $props();
+
+    const menuId = generateId('dropdown-menu');
+    let rootEl = $state<HTMLDivElement | null>(null);
 
-    const dropdownId = generateId("dropdown");
-    let triggerElement = $state<HTMLElement | null>(null);
-    let menuElement = $state<HTMLElement | null>(null);
     let openedViaKeyboard = $state(false);
 
+    const triggerAria = $derived({
+        'aria-expanded': isOpen,
+        'aria-haspopup': menuRole === 'listbox' ? 'listbox' as const : 'menu' as const,
+        'aria-controls': menuId,
+    } satisfies DropdownTriggerProps);
+
     function handleKeydown(event: KeyboardEvent) {
         if (!isOpen) {
             if (
-                event.key === "Enter" ||
-                event.key === " " ||
-                event.key === "ArrowDown"
+                event.key === 'Enter' ||
+                event.key === ' ' ||
+                event.key === 'ArrowDown'
             ) {
                 event.preventDefault();
                 openedViaKeyboard = true;
@@ -47,38 +64,39 @@
         }
 
         switch (event.key) {
-            case "Escape":
+            case 'Escape':
                 event.preventDefault();
                 isOpen = false;
-                triggerElement?.focus();
                 break;
-            case "ArrowDown":
+            case 'ArrowDown':
                 event.preventDefault();
                 focusNextItem();
                 break;
-            case "ArrowUp":
+            case 'ArrowUp':
                 event.preventDefault();
                 focusPreviousItem();
                 break;
-            case "Home":
+            case 'Home':
                 event.preventDefault();
                 focusFirstItem();
                 break;
-            case "End":
+            case 'End':
                 event.preventDefault();
                 focusLastItem();
                 break;
-            case "Tab":
+            case 'Tab':
                 isOpen = false;
                 break;
         }
     }
 
+    let menuElement = $state<HTMLElement | null>(null);
+
     function getMenuItems(): HTMLElement[] {
         if (!menuElement) return [];
         return Array.from(
             menuElement.querySelectorAll<HTMLElement>(
-                '[role="menuitem"], button, a',
+                '[role="menuitem"], [role="option"]',
             ),
         );
     }
@@ -104,8 +122,7 @@
     }
 
     function focusFirstItem() {
-        const items = getMenuItems();
-        items[0]?.focus();
+        getMenuItems()[0]?.focus();
     }
 
     function focusLastItem() {
@@ -113,127 +130,107 @@
         items[items.length - 1]?.focus();
     }
 
-    // Focus first item when dropdown opens via keyboard
     $effect(() => {
         if (isOpen && menuElement && openedViaKeyboard) {
-            setTimeout(() => {
+            const t = setTimeout(() => {
                 focusFirstItem();
                 openedViaKeyboard = false;
             }, 0);
-        } else if (!isOpen) {
+            return () => clearTimeout(t);
+        }
+        if (!isOpen) {
             openedViaKeyboard = false;
         }
     });
 
-    // Mark selected items
     $effect(() => {
-        if (isOpen && menuElement) {
-            // Small delay to ensure DOM is ready
-            setTimeout(() => {
-                const items = getMenuItems();
-                items.forEach((item) => {
-                    if (selectedValue !== null && selectedValue !== undefined) {
-                        const itemValue =
-                            item.getAttribute("data-value") ||
-                            item.textContent?.trim();
-                        if (String(itemValue) === String(selectedValue)) {
-                            item.setAttribute("data-selected", "true");
-                            item.setAttribute("aria-selected", "true");
-                        } else {
-                            item.removeAttribute("data-selected");
-                            item.removeAttribute("aria-selected");
-                        }
-                    } else {
-                        item.removeAttribute("data-selected");
-                        item.removeAttribute("aria-selected");
-                    }
-                });
-            }, 0);
+        if (!isOpen) return;
+        function onDocMouseDown(e: MouseEvent) {
+            const t = e.target as Node;
+            if (rootEl && !rootEl.contains(t)) {
+                isOpen = false;
+            }
         }
+        document.addEventListener('mousedown', onDocMouseDown);
+        return () => document.removeEventListener('mousedown', onDocMouseDown);
     });
 
     const placementClasses = $derived(() => {
-        const base = "absolute z-dropdown min-w-[12rem]";
-        const positioning = {
-            "bottom-start": "top-full left-0 mt-2",
-            "bottom-end": "top-full right-0 mt-2",
-            "top-start": "bottom-full left-0 mb-2",
-            "top-end": "bottom-full right-0 mb-2",
+        const base = 'absolute z-dropdown min-w-[12rem]';
+        const positioning: Record<typeof placement, string> = {
+            'bottom-start': 'top-full left-0 mt-2',
+            'bottom-end': 'top-full right-0 mt-2',
+            'top-start': 'bottom-full left-0 mb-2',
+            'top-end': 'bottom-full right-0 mb-2',
         };
         return `${base} ${positioning[placement]}`;
     });
 
     const transformClasses = $derived(() => {
         if (!isOpen) {
-            const hiddenTransform = {
-                "bottom-start": "translate-y-1",
-                "bottom-end": "translate-y-1",
-                "top-start": "-translate-y-1",
-                "top-end": "-translate-y-1",
+            const hiddenTransform: Record<typeof placement, string> = {
+                'bottom-start': 'translate-y-1',
+                'bottom-end': 'translate-y-1',
+                'top-start': '-translate-y-1',
+                'top-end': '-translate-y-1',
             };
-            return `opacity-0 invisible ${hiddenTransform[placement]}`;
+            return `invisible opacity-0 ${hiddenTransform[placement]}`;
         }
-        return "opacity-100 visible translate-y-0";
+        return 'visible translate-y-0 opacity-100';
     });
 
     const dropdownContentClasses = $derived(() => {
-        return `
-            ${placementClasses()}
-            bg-input
-            rounded-lg
-            shadow-lg
-            border
-            border-input-border
-            py-2
-            transition-all
-            duration-200
-            ease-in-out
-            ${transformClasses()}
-        `
-            .trim()
-            .replace(/\s+/g, " ");
+        return [
+            placementClasses(),
+            'rounded-lg border border-border bg-card py-2 shadow-lg transition-all duration-200 ease-in-out',
+            transformClasses(),
+        ]
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();
     });
+
+    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';
 </script>
 
 <div
+    bind:this={rootEl}
     class="relative inline-block"
     data-placement={placement}
     onkeydown={handleKeydown}
     {...restProps}
 >
-    <div bind:this={triggerElement}>
-        {@render trigger?.()}
-    </div>
+    {@render trigger(triggerAria)}
 
     {#if isOpen}
         <div
             bind:this={menuElement}
-            id={dropdownId}
+            id={menuId}
             class={dropdownContentClasses()}
-            role="menu"
+            role={menuRole === 'listbox' ? 'listbox' : 'menu'}
             aria-label={ariaLabel}
-            tabindex="-1"
         >
             {#if options.length > 0}
-                <div class="px-2 py-2">
+                <div class="px-2 py-1">
                     {#each options as option (option.value)}
-                        {@const buttonRestProps = {
-                            "data-value": String(option.value),
-                        } as any}
-                        <div class="w-full my-0.5">
-                            <Button
-                                variant={selectedValue === option.value
-                                    ? "outline"
-                                    : "ghost"}
-                                size="sm"
-                                isFullWidth={true}
-                                disabled={option.disabled}
-                                onclick={() => onOptionClick?.(option.value)}
-                                {...buttonRestProps}
-                            >
-                                {option.label}
-                            </Button>
-                        </div>
+                        <button
+                            type="button"
+                            role={itemRole}
+                            aria-selected={menuRole === 'listbox' &&
+                            selectedValue !== null &&
+                            String(selectedValue) === String(option.value)
+                                ? true
+                                : undefined}
+                            data-value={String(option.value)}
+                            disabled={option.disabled}
+                            class={optionClasses}
+                            onclick={() => onOptionClick?.(option.value)}
+                        >
+                            {option.label}
+                        </button>
                     {/each}
                 </div>
             {:else if children}
@@ -242,10 +239,3 @@
         </div>
     {/if}
 </div>
-
-<style>
-    :global([role="menu"] button) {
-        justify-content: flex-start;
-        text-align: left;
-    }
-</style>

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

@@ -1,7 +1,15 @@
+import type { Snippet } from 'svelte';
+export type DropdownTriggerProps = {
+    'aria-expanded': boolean;
+    'aria-haspopup': 'menu' | 'listbox';
+    'aria-controls': string;
+};
 interface Props {
     isOpen?: boolean;
-    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     ariaLabel?: string;
+    /** `listbox` for Select-style; `menu` for actions. */
+    menuRole?: 'menu' | 'listbox';
     selectedValue?: string | number | null;
     options?: Array<{
         value: string | number;
@@ -9,11 +17,9 @@ interface Props {
         disabled?: boolean;
     }>;
     onOptionClick?: (value: string | number) => void;
+    trigger: Snippet<[DropdownTriggerProps]>;
+    children?: Snippet;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-    trigger?: any;
-};
-declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Dropdown: import("svelte").Component<Props, {}, "isOpen">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/molecules/EmptyState.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { generateId } from "../util/ssr-safe.js";
+
+    interface Props {
+        title: string;
+        description: string;
+        class?: string;
+        action?: Snippet;
+        media?: Snippet;
+    }
+
+    let {
+        title,
+        description,
+        class: className = "",
+        action,
+        media,
+    }: Props = $props();
+
+    const titleId = generateId("empty-state-title");
+</script>
+
+<section
+    class="mx-auto flex flex-col items-center justify-center gap-4 px-6 py-12 text-center {className}"
+    aria-labelledby={titleId}
+>
+    {#if media}
+        <div class="text-description" aria-hidden="true">
+            {@render media()}
+        </div>
+    {/if}
+    <div class="space-y-2">
+        <h2 id={titleId} class="text-lg font-semibold text-headline">
+            {title}
+        </h2>
+        <p class="text-sm text-description">{description}</p>
+    </div>
+    {#if action}
+        <div class="mt-2 flex flex-wrap items-center justify-center gap-2">
+            {@render action()}
+        </div>
+    {/if}
+</section>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    description: string;
+    class?: string;
+    action?: Snippet;
+    media?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/molecules/FormField.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { generateId } from "../util/ssr-safe.js";
+
+    export type FormFieldControlProps = {
+        id: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: 'true';
+        disabled?: boolean;
+        required?: boolean;
+    };
+
+    interface Props {
+        id?: string;
+        label: string;
+        description?: string;
+        error?: string;
+        required?: boolean;
+        disabled?: boolean;
+        class?: string;
+        labelClass?: string;
+        control: Snippet<[FormFieldControlProps]>;
+        meta?: Snippet;
+    }
+
+    let {
+        id: idProp,
+        label,
+        description,
+        error,
+        required = false,
+        disabled = false,
+        class: className = '',
+        labelClass = '',
+        control,
+        meta,
+    }: Props = $props();
+
+    const fallbackId = generateId('field');
+    const fieldId = $derived(idProp ?? fallbackId);
+    const descriptionId = $derived(
+        description ? `${fieldId}-description` : undefined,
+    );
+    const errorId = $derived(error ? `${fieldId}-error` : undefined);
+    const describedBy = $derived(
+        [descriptionId, errorId].filter(Boolean).join(' ') || undefined,
+    );
+</script>
+
+<div class={['space-y-1.5', className].filter(Boolean).join(' ')}>
+    <div class="flex items-baseline justify-between gap-3">
+        <label
+            class={[
+                'text-sm font-medium text-label',
+                disabled ? 'opacity-60' : '',
+                labelClass,
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            for={fieldId}
+        >
+            {label}
+            {#if required}
+                <span class="ml-1 text-error" aria-hidden="true">*</span>
+                <span class="sr-only">(required)</span>
+            {/if}
+        </label>
+
+        {#if meta}
+            <div class="text-xs text-description">{@render meta()}</div>
+        {/if}
+    </div>
+
+    {@render control({
+        id: fieldId,
+        'aria-describedby': describedBy,
+        'aria-invalid': error ? 'true' : undefined,
+        disabled,
+        required,
+    })}
+
+    {#if description}
+        <p id={descriptionId} class="text-xs text-description">{description}</p>
+    {/if}
+
+    {#if error}
+        <p id={errorId} class="text-xs text-error" role="alert">{error}</p>
+    {/if}
+</div>