zabi-components 6.0.0 → 7.0.0

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+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;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/molecules/Header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import Badge from "../atoms/Badge.svelte";
+    import Heading from "../atoms/Heading.svelte";
+    import type { ComponentCategory } from "../types/page.types";
+
+    interface Props {
+        title: string;
+        description: string;
+        category: ComponentCategory;
+        variantsStates?: string[];
+    }
+
+    let { title, description, category, variantsStates }: Props = $props();
+</script>
+
+<header class="space-y-4">
+    <div class="space-y-2">
+        <Heading level={1} text={title} />
+        <p class="text-lg whitespace-pre-line text-description">{description}</p>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="info" text={category} />
+        {#if variantsStates?.length}
+            <Badge variant="info" text="{variantsStates.length} variants" />
+        {/if}
+    </div>
+
+    {#if variantsStates?.length}
+        <div class="flex flex-wrap items-center gap-2">
+            <span class="text-sm font-medium text-headline">
+                Variants / states:
+            </span>
+            {#each variantsStates as v (v)}
+                <span class="rounded-md bg-base-100 px-2 py-1 text-xs text-headline">
+                    {v}
+                </span>
+            {/each}
+        </div>
+    {/if}
+</header>

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

@@ -0,0 +1,10 @@
+import type { ComponentCategory } from "../types/page.types";
+interface Props {
+    title: string;
+    description: string;
+    category: ComponentCategory;
+    variantsStates?: string[];
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/molecules/Modal.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-    import { trapFocus, saveFocus, returnFocus, focusFirstElement } from "../routes/lib/focus-utils.js";
-    import Card from "../atoms/Card.svelte";
-    import CardHeader from "../atoms/CardHeader.svelte";
-    import CardContent from "../atoms/CardContent.svelte";
-    import CardFooter from "../atoms/CardFooter.svelte";
+    import {
+        trapFocus,
+        saveFocus,
+        returnFocus,
+        focusFirstElement,
+    } from '../util/focus-utils.js';
+    import { generateId } from "../util/ssr-safe.js";
+    import Card from '../atoms/Card.svelte';
+    import CardHeader from '../atoms/CardHeader.svelte';
+    import CardContent from '../atoms/CardContent.svelte';
+    import CardFooter from '../atoms/CardFooter.svelte';
 
-    type Size = "sm" | "md" | "lg";
+    type Size = 'sm' | 'md' | 'lg';
 
     interface Props {
         isOpen?: boolean;
@@ -14,29 +20,35 @@
         size?: Size;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
+        /** On the `role="dialog"` root (testing, analytics). */
+        "data-testid"?: string;
     }
 
     let {
-        isOpen = false,
-        title = "",
-        description = "",
-        size = "md",
+        isOpen = $bindable(false),
+        title = '',
+        description = '',
+        size = 'md',
         onclick,
         onkeydown,
+        "data-testid": dataTestId = undefined,
         children,
         footer,
         ...restProps
     }: Props & { children?: any; footer?: any } = $props();
 
+    const modalTitleId = generateId('modal-title');
+    const modalDescriptionId = generateId('modal-description');
+
     let modalContainer = $state<HTMLDivElement>();
     let cleanupFocusTrap: (() => void) | null = null;
 
     const sizeClasses = $derived(
         {
-            sm: "w-full md:w-[24rem]",
-            md: "w-full md:w-[28rem]",
-            lg: "w-full md:w-[42rem]",
-        }[size] || "w-full md:w-[28rem]",
+            sm: 'w-full md:w-[24rem]',
+            md: 'w-full md:w-[28rem]',
+            lg: 'w-full md:w-[42rem]',
+        }[size] || 'w-full md:w-[28rem]',
     );
 
     function closeModal(event?: Event) {
@@ -51,19 +63,18 @@
         }
     }
 
-    // Handle focus trap when modal opens
     $effect(() => {
         const container = modalContainer;
         if (isOpen && container) {
             saveFocus();
             cleanupFocusTrap = trapFocus(container);
-            // Small delay to ensure modal is rendered
             setTimeout(() => {
                 focusFirstElement(container);
             }, 0);
         } else if (!isOpen && cleanupFocusTrap) {
             cleanupFocusTrap();
             cleanupFocusTrap = null;
+            returnFocus();
         }
     });
 
@@ -75,12 +86,10 @@
 
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
-        if (keyboardEvent.key === "Escape") {
+        if (keyboardEvent.key === 'Escape') {
             closeModal(event);
         }
-        if (onkeydown) {
-            onkeydown(event);
-        }
+        onkeydown?.(event);
     }
 </script>
 
@@ -91,8 +100,11 @@
         onkeydown={handleKeydown}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={title ? "modal-title" : undefined}
+        aria-labelledby={title ? modalTitleId : undefined}
+        aria-describedby={description ? modalDescriptionId : undefined}
         tabindex="-1"
+        data-testid={dataTestId}
+        {...restProps}
     >
         <div
             bind:this={modalContainer}
@@ -102,20 +114,21 @@
                 {#if title || description}
                     <CardHeader
                         {description}
+                        descriptionId={description ? modalDescriptionId : undefined}
                         className="px-6 pt-6 pb-4"
                     >
                         {#if title}
                             <div class="flex items-center justify-between">
                                 <h2
-                                    id="modal-title"
-                                    class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                                    id={modalTitleId}
+                                    class="text-2xl font-normal leading-8 tracking-normal text-headline"
                                 >
                                     {title}
                                 </h2>
                                 <button
                                     type="button"
                                     onclick={closeModal}
-                                    class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
+                                    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"
                                     aria-label="Close"
                                 >
                                     ×

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

@@ -1,4 +1,4 @@
-type Size = "sm" | "md" | "lg";
+type Size = 'sm' | 'md' | 'lg';
 interface Props {
     isOpen?: boolean;
     title?: string;
@@ -6,11 +6,13 @@ interface Props {
     size?: Size;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
+    /** On the `role="dialog"` root (testing, analytics). */
+    "data-testid"?: string;
 }
 type $$ComponentProps = Props & {
     children?: any;
     footer?: any;
 };
-declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/molecules/NavigationMenu.svelte

@@ -8,8 +8,10 @@
     import NavigationMenuContent from "./NavigationMenuContent.svelte";
     import NavigationMenuLink from "./NavigationMenuLink.svelte";
 
+    import { generateId } from "../util/ssr-safe.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
+        navigationMenuStableInstanceId,
         type NavigationMenuContextValue,
     } from "./navigation-menu-context.js";
 
@@ -35,6 +37,8 @@
         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;
     }
 
     let {
@@ -43,6 +47,7 @@
         items = [],
         children,
         listClassName = "",
+        menuId = "",
         ...restProps
     }: Props = $props();
 
@@ -50,6 +55,14 @@
     let isMobile = $state(false);
     let containerElement = $state<HTMLElement | null>(null);
 
+    const menuInstanceId = $derived(
+        menuId.trim() !== ""
+            ? menuId.trim()
+            : items.length > 0
+              ? navigationMenuStableInstanceId(items)
+              : generateId("nav-menu"),
+    );
+
     function setActiveItem(item: string | null) {
         activeItem = item;
     }
@@ -81,6 +94,9 @@
         get isMobile() {
             return isMobile;
         },
+        get menuInstanceId() {
+            return menuInstanceId;
+        },
     };
 
     setContext(NAVIGATION_MENU_CONTEXT_KEY, context);

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

@@ -19,6 +19,8 @@ interface Props {
     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;
 }
 declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
 type NavigationMenu = ReturnType<typeof NavigationMenu>;

package/dist/molecules/NavigationMenuContent.svelte

@@ -4,6 +4,7 @@
     import { onMount } from "svelte";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
+        navigationMenuPanelId,
         type NavigationMenuContextValue,
     } from "./navigation-menu-context.js";
 
@@ -29,6 +30,12 @@
 
     const isActive = $derived(context?.activeItem === value);
 
+    const panelId = $derived(
+        context
+            ? navigationMenuPanelId(context.menuInstanceId, value)
+            : "",
+    );
+
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === "Escape") {
             event.preventDefault();
@@ -71,7 +78,8 @@
 {#if isActive}
     <div
         bind:this={contentElement}
-        class="absolute left-0 top-full mt-2 bg-input rounded-lg shadow-lg border border-input-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
+        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}
         data-navigation-menu-content

package/dist/molecules/NavigationMenuLink.svelte

@@ -30,7 +30,7 @@
     }
 
     const linkClasses =
-        "block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}";
+        "focus-ring focus-ring--nav block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover {className}";
 </script>
 
 {#if asChild}

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -3,6 +3,7 @@
     import { getContext } from "svelte";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
+        navigationMenuPanelId,
         type NavigationMenuContextValue,
     } from "./navigation-menu-context.js";
 
@@ -25,6 +26,12 @@
 
     const isActive = $derived(context?.activeItem === value);
 
+    const panelId = $derived(
+        context
+            ? navigationMenuPanelId(context.menuInstanceId, value)
+            : "",
+    );
+
     function handleClick() {
         if (context) {
             if (isActive) {
@@ -51,8 +58,9 @@
 
 <button
     type="button"
-    class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {className}"
+    class="focus-ring focus-ring--nav inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active {className}"
     aria-expanded={isActive ? 'true' : 'false'}
+    aria-controls={panelId || undefined}
     aria-haspopup="true"
     onclick={handleClick}
     onkeydown={handleKeydown}

package/dist/molecules/Page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children?: Snippet;
+        className?: string;
+    }
+
+    let { children, className = "" }: Props = $props();
+</script>
+
+<div class="mx-auto w-full space-y-10 {className}">
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children?: Snippet;
+    className?: string;
+}
+declare const Page: import("svelte").Component<Props, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/molecules/PropsTable.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import type { ComponentProp } from "../types/page.types";
+    import Table from "../atoms/Table.svelte";
+
+    interface Props {
+        props: ComponentProp[];
+        caption?: string;
+    }
+
+    let { props, caption = "Props / API" }: Props = $props();
+</script>
+
+{#if props.length === 0}
+    <div class="rounded-lg border border-border bg-base-50 px-4 py-4 text-sm text-description">
+        No documented props.
+    </div>
+{:else}
+    <Table caption={caption}>
+        <thead>
+            <tr class="bg-base-50">
+                <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
+                    Name
+                </th>
+                <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
+                    Type
+                </th>
+                <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
+                    Required
+                </th>
+                <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
+                    Default
+                </th>
+                <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
+                    Description
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each props as prop}
+                <tr class="hover:bg-base-50/70">
+                    <td class="border-b border-border px-4 py-3 font-mono text-body">
+                        {prop.name}
+                    </td>
+                    <td class="border-b border-border px-4 py-3 text-description">
+                        {prop.type}
+                    </td>
+                    <td class="border-b border-border px-4 py-3 text-description">
+                        {prop.required ? "Yes" : "No"}
+                    </td>
+                    <td class="border-b border-border px-4 py-3 text-description">
+                        {prop.defaultValue || "—"}
+                    </td>
+                    <td class="border-b border-border px-4 py-3 text-description">
+                        {prop.description}
+                    </td>
+                </tr>
+            {/each}
+        </tbody>
+    </Table>
+{/if}
+

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

@@ -0,0 +1,8 @@
+import type { ComponentProp } from "../types/page.types";
+interface Props {
+    props: ComponentProp[];
+    caption?: string;
+}
+declare const PropsTable: import("svelte").Component<Props, {}, "">;
+type PropsTable = ReturnType<typeof PropsTable>;
+export default PropsTable;

package/dist/molecules/RadioGroup.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+    import {
+        RADIO_CHECKED_DOT_CLASSES,
+        RADIO_GROUP_CONTROL_SHELL,
+        RADIO_GROUP_OPTION_LABEL_ROW,
+        RADIO_GROUP_RING_OVERLAY,
+    } from "../atoms/selection-control.styles";
+    import { generateId } from "../util/ssr-safe.js";
+    import { SvelteMap } from "svelte/reactivity";
+
+    export type RadioGroupOption = {
+        value: string;
+        label: string;
+        disabled?: boolean;
+        description?: string;
+    };
+
+    interface Props {
+        options: RadioGroupOption[];
+        /** Selected value; `bind:value`. Use `undefined` for no selection. */
+        value?: string | undefined;
+        /** Uncontrolled initial value. */
+        defaultValue?: string | undefined;
+        name?: string;
+        disabled?: boolean;
+        legend?: string;
+        label?: string;
+    }
+
+    let {
+        options,
+        defaultValue,
+        value = $bindable(defaultValue),
+        name: nameProp,
+        disabled = false,
+        legend = "",
+        label = "",
+        ...restProps
+    }: Props = $props();
+
+    const fallbackName = generateId("radiogroup");
+    const groupName = $derived(nameProp || fallbackName);
+    const legendText = $derived(legend || label);
+
+    const enabledOptions = $derived.by(() =>
+        options.filter((o: RadioGroupOption) => !disabled && !o.disabled),
+    );
+
+    const fallbackValue = $derived.by(() => enabledOptions[0]?.value ?? "");
+
+    /** False if controlled `value` is set but missing from `options` (stale); roving tabindex then follows first enabled instead. */
+    const valueMatchesOption = $derived(
+        value === undefined ||
+            value === "" ||
+            options.some((o: RadioGroupOption) => o.value === value),
+    );
+
+    function isOptionDisabled(option: RadioGroupOption): boolean {
+        return disabled || !!option.disabled;
+    }
+
+    function tabIndexFor(option: RadioGroupOption): number {
+        if (isOptionDisabled(option)) return -1;
+        if (
+            value !== undefined &&
+            value !== "" &&
+            valueMatchesOption
+        ) {
+            return option.value === value ? 0 : -1;
+        }
+        return option.value === fallbackValue ? 0 : -1;
+    }
+
+    function handleChange(event: Event) {
+        if (disabled) return;
+        const target = event.target as HTMLInputElement;
+        value = target.value;
+    }
+
+    const elementsByValue = new SvelteMap<string, HTMLInputElement>();
+    function registerRadio(valueKey: string) {
+        return (node: HTMLInputElement) => {
+            elementsByValue.set(valueKey, node);
+            return () => {
+                elementsByValue.delete(valueKey);
+            };
+        };
+    }
+
+    function focusValue(nextValue: string) {
+        const el = elementsByValue.get(nextValue);
+        el?.focus();
+    }
+
+    function moveSelection(delta: number) {
+        const enabled = enabledOptions;
+        if (enabled.length === 0) return;
+
+        const rawIndex = enabled.findIndex((o) => o.value === value);
+        const currentIndex =
+            rawIndex === -1
+                ? delta > 0
+                    ? -1
+                    : enabled.length
+                : rawIndex;
+        const nextIndex =
+            (currentIndex + delta + enabled.length) % enabled.length;
+        const next = enabled[nextIndex];
+        if (!next) return;
+        value = next.value;
+        focusValue(next.value);
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        const key = event.key;
+        if (
+            key !== "ArrowRight" &&
+            key !== "ArrowDown" &&
+            key !== "ArrowLeft" &&
+            key !== "ArrowUp" &&
+            key !== "Home" &&
+            key !== "End"
+        ) {
+            return;
+        }
+
+        const enabled = enabledOptions;
+        if (enabled.length === 0) return;
+
+        event.preventDefault();
+        if (key === "ArrowRight" || key === "ArrowDown") {
+            moveSelection(1);
+        } else if (key === "ArrowLeft" || key === "ArrowUp") {
+            moveSelection(-1);
+        } else if (key === "Home") {
+            value = enabled[0].value;
+            focusValue(enabled[0].value);
+        } else if (key === "End") {
+            const last = enabled[enabled.length - 1];
+            value = last.value;
+            focusValue(last.value);
+        }
+    }
+
+    const optionLabelWrapperClasses = RADIO_GROUP_OPTION_LABEL_ROW;
+
+    const radioControlShellClasses = RADIO_GROUP_CONTROL_SHELL;
+
+    const radioRingOverlayClasses = RADIO_GROUP_RING_OVERLAY;
+</script>
+
+<fieldset
+    class="space-y-3"
+    aria-disabled={disabled ? "true" : undefined}
+    onkeydown={handleKeydown}
+    {...restProps}
+>
+    {#if legendText}
+        <legend class="text-sm font-medium text-label mb-1">
+            {legendText}
+        </legend>
+    {/if}
+
+    <div class="space-y-3">
+        {#each options as option (option.value)}
+            {@const optionDisabled = isOptionDisabled(option)}
+            {@const isChecked = value === option.value}
+            <label class={optionLabelWrapperClasses}>
+                <span class={radioControlShellClasses}>
+                    <input
+                        type="radio"
+                        name={groupName}
+                        value={option.value}
+                        checked={isChecked}
+                        disabled={optionDisabled}
+                        tabindex={tabIndexFor(option)}
+                        class="sr-only"
+                        onchange={handleChange}
+                        {@attach registerRadio(option.value)}
+                    />
+                    <span class={radioRingOverlayClasses}></span>
+                    <span class={RADIO_CHECKED_DOT_CLASSES} aria-hidden="true"></span>
+                </span>
+                <span class="flex flex-col gap-1">
+                    <span class="text-sm font-medium text-label">
+                        {option.label}
+                    </span>
+                    {#if option.description}
+                        <span class="text-sm text-description">
+                            {option.description}
+                        </span>
+                    {/if}
+                </span>
+            </label>
+        {/each}
+    </div>
+</fieldset>