zabi-components 6.0.0 → 7.0.0

package/dist/atoms/ColorPicker.svelte

@@ -25,7 +25,7 @@
     let colorMap: HTMLCanvasElement | undefined;
     let colorMapContainer: HTMLDivElement | undefined;
 
-    // HSL values (0-360, 0-100, 0-100)
+    // Working color in HSL (h: 0–360; s, l: 0–100).
     let hue = $state(0);
     let saturation = $state(100);
     let lightness = $state(50);
@@ -156,7 +156,6 @@
         const width = colorMap.width;
         const height = colorMap.height;
 
-        // Draw saturation/lightness gradient
         for (let x = 0; x < width; x++) {
             for (let y = 0; y < height; y++) {
                 const s = (x / width) * 100;
@@ -284,7 +283,7 @@
                 type="button"
                 onclick={togglePicker}
                 {disabled}
-                class="w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-brand-500 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                class="focus-ring w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                 style="background-color: {displayColor};"
                 aria-label="Open color picker"
                 aria-expanded={isOpen}
@@ -298,7 +297,6 @@
                     aria-label="Color picker"
                 >
                     <div class="space-y-4">
-                        <!-- Color Map -->
                         <div
                             use:setColorMapContainer
                             class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
@@ -315,14 +313,12 @@
                                 height={192}
                                 class="w-full h-full"
                             ></canvas>
-                            <!-- Color indicator -->
                             <div
                                 class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
                                 style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
-                        <!-- Hue Slider -->
                         <div class="space-y-2">
                             <div
                                 class="relative h-6 rounded-lg overflow-hidden"

package/dist/atoms/Container.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+
+    interface Props {
+        as?: 'div' | 'section' | 'main' | 'article';
+        maxWidth?: MaxWidth;
+        padded?: boolean;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let {
+        as: Tag = 'div',
+        maxWidth = 'xl',
+        padded = true,
+        class: className = '',
+        children,
+    }: Props = $props();
+
+    const maxClass: Record<MaxWidth, string> = {
+        sm: 'max-w-screen-sm',
+        md: 'max-w-screen-md',
+        lg: 'max-w-screen-lg',
+        xl: 'max-w-screen-xl',
+        '2xl': 'max-w-screen-2xl',
+        full: 'max-w-full',
+    };
+</script>
+
+<svelte:element
+    this={Tag}
+    class={['mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className]
+        .filter(Boolean)
+        .join(' ')}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>

package/dist/atoms/Container.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+interface Props {
+    as?: 'div' | 'section' | 'main' | 'article';
+    maxWidth?: MaxWidth;
+    padded?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/atoms/Divider.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    type Orientation = 'horizontal' | 'vertical';
+
+    interface Props {
+        orientation?: Orientation;
+        label?: string;
+        inset?: boolean;
+        class?: string;
+        labelClass?: string;
+        /** Decorative: omit `role="separator"` so SR does not announce a split. */
+        decorative?: boolean;
+    }
+
+    let {
+        orientation = 'horizontal',
+        label,
+        inset = false,
+        class: className = '',
+        labelClass = '',
+        decorative = true,
+    }: Props = $props();
+
+    const isVertical = $derived(orientation === 'vertical');
+
+    const lineClasses = $derived(
+        [
+            'bg-border',
+            isVertical ? 'h-full w-px flex-1' : 'h-px w-full flex-1',
+            inset ? (isVertical ? 'my-2' : 'mx-2') : undefined,
+        ]
+            .filter(Boolean)
+            .join(' '),
+    );
+</script>
+
+<div
+    class={[
+        'flex items-center text-description',
+        isVertical ? 'h-full min-h-[1rem] flex-col' : 'w-full flex-row',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ')}
+>
+    <div
+        aria-hidden={decorative ? 'true' : undefined}
+        role={decorative ? 'presentation' : 'separator'}
+        aria-orientation={decorative ? undefined : orientation}
+        class={lineClasses}
+    ></div>
+
+    {#if label}
+        <span
+            class={['shrink-0 px-3 text-xs font-medium text-description', labelClass]
+                .filter(Boolean)
+                .join(' ')}
+        >
+            {label}
+        </span>
+
+        <div
+            aria-hidden={decorative ? 'true' : undefined}
+            role={decorative ? 'presentation' : 'separator'}
+            aria-orientation={decorative ? undefined : orientation}
+            class={lineClasses}
+        ></div>
+    {/if}
+</div>

package/dist/atoms/Divider.svelte.d.ts

@@ -0,0 +1,13 @@
+type Orientation = 'horizontal' | 'vertical';
+interface Props {
+    orientation?: Orientation;
+    label?: string;
+    inset?: boolean;
+    class?: string;
+    labelClass?: string;
+    /** Decorative: omit `role="separator"` so SR does not announce a split. */
+    decorative?: boolean;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/atoms/FeatureCard.svelte

@@ -1,64 +1,49 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import type { Component, Snippet } from "svelte";
 
     interface Props {
-        icon?: string;
         title: string;
-        description: string;
-        className?: string;
+        description?: string;
+        icon?: Component<{ size?: number; class?: string }>;
+        children?: Snippet;
+        class?: string;
     }
 
     let {
-        icon = "✨",
         title,
         description,
-        className = "",
-        ...restProps
+        icon: Icon,
+        children,
+        class: className = "",
     }: Props = $props();
-
-    let mounted = $state(false);
-
-    onMount(() => {
-        mounted = true;
-    });
 </script>
 
-{#if mounted}
-    <div
-        class="p-6 rounded-lg bg-base-50 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
-        {...restProps}
-    >
-        <div class="flex items-start gap-4">
-            <div class="shrink-0 text-2xl" aria-hidden="true">
-                {icon}
-            </div>
-            <div class="flex-1 min-w-0">
-                <h3 class="text-lg font-semibold text-headline mb-2">
-                    {title}
-                </h3>
-                <p class="text-description leading-relaxed">
-                    {description}
-                </p>
-            </div>
-        </div>
+<article
+    class="flex flex-col gap-3 p-6 rounded-2xl bg-surface-1 border border-base-200 transition-colors duration-200 hover:border-base-300 {className}"
+>
+    {#if Icon}
+        <span
+            class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-brand-50 text-brand-600"
+            aria-hidden="true"
+        >
+            <Icon size={20} />
+        </span>
+    {/if}
+
+    <div class="flex flex-col gap-1.5">
+        <h3 class="text-base font-semibold leading-snug text-headline">
+            {title}
+        </h3>
+        {#if description}
+            <p class="text-sm leading-relaxed text-description">
+                {description}
+            </p>
+        {/if}
     </div>
-{:else}
-    <div
-        class="p-6 rounded-lg bg-base-100 border border-base-300 hover:border-base-400 hover:shadow-sm transition-colors duration-200 {className}"
-        {...restProps}
-    >
-        <div class="flex items-start gap-4">
-            <div class="shrink-0 text-2xl" aria-hidden="true">
-                {icon}
-            </div>
-            <div class="flex-1 min-w-0">
-                <h3 class="text-lg font-semibold text-headline mb-2">
-                    {title}
-                </h3>
-                <p class="text-description leading-relaxed">
-                    {description}
-                </p>
-            </div>
+
+    {#if children}
+        <div class="mt-2">
+            {@render children()}
         </div>
-    </div>
-{/if}
+    {/if}
+</article>

package/dist/atoms/FeatureCard.svelte.d.ts

@@ -1,9 +1,14 @@
+import type { Component, Snippet } from "svelte";
 interface Props {
-    icon?: string;
     title: string;
-    description: string;
-    className?: string;
+    description?: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    children?: Snippet;
+    class?: string;
 }
-declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+declare const FeatureCard: Component<Props, {}, "">;
 type FeatureCard = ReturnType<typeof FeatureCard>;
 export default FeatureCard;

package/dist/atoms/IconButton.svelte

@@ -1,21 +1,17 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+    import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 
     interface Props {
-        /** Visual style variant. */
         variant?: ButtonVariant;
-        /** Size variant controlling padding and radius. */
         size?: SizeVariant;
-        /** Whether the button is disabled. */
         disabled?: boolean;
-        /** Button type attribute. */
+        loading?: boolean;
         type?: "button" | "submit" | "reset";
-        /** Accessible label for icon-only buttons. */
+        /** Required for icon-only usage (no visible text). */
         label?: string;
-        /** Click handler for native click events. */
+        class?: string;
         onclick?: (event: MouseEvent) => void;
-        /** Icon content. */
         children?: Snippet;
     }
 
@@ -23,66 +19,79 @@
         variant = "primary",
         size = "md",
         disabled = false,
+        loading = false,
         type = "button",
         label = "",
+        class: className = "",
         onclick,
         children,
         ...restProps
     }: Props = $props();
 
-    const sizeClass = $derived(() => {
+    const isDisabled = $derived(disabled || loading);
+
+    const sizeClass = $derived.by(() => {
         if (size === "sm") {
             return {
                 padding: "p-2",
                 radius: "rounded-md",
+                spinner: "size-4",
             };
         } else if (size === "lg") {
             return {
                 padding: "p-3",
                 radius: "rounded-xl",
+                spinner: "size-6",
             };
         } else {
             return {
                 padding: "p-2.5",
                 radius: "rounded-lg",
+                spinner: "size-5",
             };
         }
     });
 
-    const variantClass = $derived(() => {
+    const variantClass = $derived.by(() => {
         return variant === "primary"
-            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]"
             : variant === "secondary"
-              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]"
               : variant === "danger"
-                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger"
                 : variant === "ghost"
-                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 focus:ring-2 focus:ring-base-500 focus:ring-offset-2 disabled:text-disabled"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 active:scale-[0.98] focus-ring--muted disabled:text-disabled"
                   : variant === "outline"
-                    ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:border-disabled disabled:text-disabled"
+                    ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary active:scale-[0.98] disabled:border-disabled disabled:text-disabled"
                     : variant === "link"
-                      ? "text-brand-700 active:text-brand-700 underline-offset-4 hover:underline focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:text-disabled disabled:no-underline"
-                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2";
+                      ? "text-brand-700 active:text-brand-700 hover:underline disabled:text-disabled disabled:no-underline"
+                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
     });
 
-    const buttonClasses = $derived(() => {
-        const sizeStyles = sizeClass();
+    const buttonClasses = $derived.by(() => {
+        const sizeStyles = sizeClass;
         const baseClasses =
-            "inline-flex items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none";
+            "inline-flex focus-ring items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass} ${className}`.trim();
     });
 </script>
 
 <button
     {type}
-    class={buttonClasses()}
-    {disabled}
+    class={buttonClasses}
+    disabled={isDisabled}
+    aria-busy={loading ? "true" : undefined}
     {onclick}
     aria-label={label || undefined}
     {...restProps}
 >
-    {#if children}
+    {#if loading}
+        <span
+            class="inline-block {sizeClass.spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
+            aria-hidden="true"
+        ></span>
+    {:else if children}
         {@render children()}
     {/if}
 </button>

package/dist/atoms/IconButton.svelte.d.ts

@@ -1,19 +1,15 @@
 import type { Snippet } from "svelte";
-import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 interface Props {
-    /** Visual style variant. */
     variant?: ButtonVariant;
-    /** Size variant controlling padding and radius. */
     size?: SizeVariant;
-    /** Whether the button is disabled. */
     disabled?: boolean;
-    /** Button type attribute. */
+    loading?: boolean;
     type?: "button" | "submit" | "reset";
-    /** Accessible label for icon-only buttons. */
+    /** Required for icon-only usage (no visible text). */
     label?: string;
-    /** Click handler for native click events. */
+    class?: string;
     onclick?: (event: MouseEvent) => void;
-    /** Icon content. */
     children?: Snippet;
 }
 declare const IconButton: import("svelte").Component<Props, {}, "">;

package/dist/atoms/Input.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import type { SemanticVariant, SizeVariant } from "../types/variants.js";
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
+        /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+        id?: string;
         value?: string;
         type?: string;
         name?: string;
         class?: string;
         label?: string;
+        /** True when FormField supplies the visible `<label>`. */
+        hideLabel?: boolean;
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
+        loading?: boolean;
         size?: SizeVariant;
         variant?: SemanticVariant;
         message?: string;
@@ -21,14 +26,17 @@
     }
 
     let {
+        id: idProp,
         value = $bindable(""),
         type = "text",
         name = "",
         class: className = "",
         label = "",
+        hideLabel = false,
         placeholder = "",
         required = false,
         disabled = false,
+        loading = false,
         size = "md",
         variant = "default",
         message = "",
@@ -37,7 +45,9 @@
         ...restProps
     }: Props = $props();
 
-    const inputId = generateId("input");
+    const fallbackId = generateId("input");
+    const inputId = $derived(idProp ?? fallbackId);
+    const isDisabled = $derived(disabled || loading);
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -45,38 +55,46 @@
                 padding: "px-4 py-2",
                 text: "text-sm",
                 leading: "leading-5",
+                spinner: "size-4",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
                 leading: "leading-6",
+                spinner: "size-5",
             };
         } else {
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
                 leading: "leading-6",
+                spinner: "size-5",
             };
         }
     });
 
     const variantClass = $derived(() => {
         return variant === "success"
-            ? "border-success focus:border-success focus:ring-success"
+            ? "border-success focus-visible:border-success"
             : variant === "warning"
-              ? "border-warning focus:border-warning focus:ring-warning"
+              ? "border-warning focus-visible:border-warning"
               : variant === "error"
-                ? "border-error focus:border-error focus:ring-error"
-                : "border-input-border focus:border-input-border focus:ring-2 focus:ring-brand-500";
+                ? "border-error focus-visible:border-error"
+                : "border-input-border focus-visible:border-input-border";
     });
 
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
+        const trailingPad = loading
+            ? size === "sm"
+                ? "pr-9"
+                : "pr-10"
+            : "";
         const baseClasses =
-            "w-full min-w-48 border bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
+            "focus-ring w-full min-w-48 border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${trailingPad} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
     });
 
     const labelClasses = $derived(
@@ -109,25 +127,39 @@
 </script>
 
 <div>
-    {#if label}
+    {#if label && !hideLabel}
         <label for={inputId} class={labelClasses()}>{label}</label>
     {/if}
-    <input
-        id={inputId}
-        {type}
-        {name}
-        bind:value
-        {placeholder}
-        {required}
-        {disabled}
-        class={inputClasses()}
-        oninput={handleInput}
-        {onblur}
-        aria-invalid={variant === "error" ? "true" : undefined}
-        aria-required={required ? "true" : undefined}
-        aria-describedby={message ? `${inputId}-message` : undefined}
-        {...restProps}
-    />
+    <div class="relative">
+        <input
+            id={inputId}
+            {type}
+            {name}
+            bind:value
+            {placeholder}
+            {required}
+            disabled={isDisabled}
+            class={inputClasses()}
+            oninput={handleInput}
+            {onblur}
+            aria-invalid={variant === "error" ? "true" : undefined}
+            aria-required={required ? "true" : undefined}
+            aria-busy={loading ? "true" : undefined}
+            aria-describedby={message ? `${inputId}-message` : undefined}
+            {...restProps}
+        />
+        {#if loading}
+            <span
+                class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-description"
+                aria-hidden="true"
+            >
+                <span
+                    class="inline-block {sizeClass()
+                        .spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
+                ></span>
+            </span>
+        {/if}
+    </div>
     {#if message && variant !== "default"}
         <p
             id={`${inputId}-message`}

package/dist/atoms/Input.svelte.d.ts

@@ -1,13 +1,18 @@
-import type { SemanticVariant, SizeVariant } from "../../types/variants.js";
+import type { SemanticVariant, SizeVariant } from "../types/variants.js";
 interface Props {
+    /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+    id?: string;
     value?: string;
     type?: string;
     name?: string;
     class?: string;
     label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     size?: SizeVariant;
     variant?: SemanticVariant;
     message?: string;

package/dist/atoms/List.svelte

@@ -4,17 +4,12 @@
     export type ListItem = ListItemData;
 
     interface Props {
-        /** Collection of items rendered in the list. */
         items: ListItemData[];
-        /** Accessible label for the list container. */
+        /** `aria-label` on the list region. */
         ariaLabel?: string;
-        /** Optional active item id for current state styling. */
         selectedId?: string;
-        /** Whether to show the arrow icon for each row. */
         showArrow?: boolean;
-        /** Optional custom class names for the list container. */
         className?: string;
-        /** Item click callback. */
         onclick?: (item: ListItem, event: MouseEvent) => void;
     }
 
@@ -29,7 +24,7 @@
     }: Props = $props();
 
     const listClasses = $derived(
-        `space-y-1 overflow-hidden rounded-xl border border-border bg-surface p-1 ${className}`.trim(),
+        `space-y-1 overflow-hidden rounded-xl ${className}`.trim(),
     );
 </script>