zabi-components 5.0.22 → 7.0.0

package/dist/atoms/ActionPanel.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import Badge from "./Badge.svelte";
+    import type { ExtendedSemanticVariant } from "../types/variants.js";
+
+    interface Props {
+        title: string;
+        description: string;
+        href?: string;
+        onclick?: (event: MouseEvent) => void | Promise<void>;
+        disabled?: boolean;
+        loading?: boolean;
+        badgeText?: string;
+        badgeVariant?: ExtendedSemanticVariant;
+        /** Overrides the default accessible name for the clickable region. */
+        ariaLabel?: string;
+        className?: string;
+        target?: HTMLAnchorElement["target"];
+        rel?: string;
+    }
+
+    let {
+        title,
+        description,
+        href,
+        onclick,
+        disabled = false,
+        loading = false,
+        badgeText,
+        badgeVariant = "neutral",
+        ariaLabel,
+        className = "",
+        target,
+        rel,
+        ...restProps
+    }: Props = $props();
+
+    const isDisabled = $derived(disabled || loading);
+
+    const computedAriaLabel = $derived(
+        ariaLabel ?? (href ? `Open ${title}` : title),
+    );
+
+    const baseClasses =
+        "group focus-ring focus-ring--muted block rounded-2xl border border-base-200 bg-base-0 p-6 text-left transition-all duration-200 hover:border-headline/30 hover:bg-base-50 active:scale-[0.99] active:bg-base-100";
+
+    const disabledClasses =
+        "opacity-50 cursor-not-allowed pointer-events-none hover:border-base-200 hover:bg-base-0 active:scale-100";
+
+    const panelClasses = $derived(
+        [baseClasses, isDisabled ? disabledClasses : "", className]
+            .filter(Boolean)
+            .join(" ")
+            .trim(),
+    );
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (isDisabled) return;
+        if (!href && onclick && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            onclick(event as unknown as MouseEvent);
+        }
+    }
+</script>
+
+{#snippet body()}
+    <div class="flex items-start justify-between gap-4">
+        <div class="min-w-0">
+            <h3
+                class="truncate text-lg font-semibold text-headline transition-colors group-hover:text-headline/90"
+            >
+                {title}
+            </h3>
+            <p class="mt-3 line-clamp-2 text-description">{description}</p>
+        </div>
+        <div class="flex shrink-0 items-center gap-3">
+            {#if badgeText}
+                <Badge variant={badgeVariant} text={badgeText} />
+            {/if}
+            {#if loading}
+                <span
+                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-description border-t-transparent opacity-70"
+                    aria-hidden="true"
+                ></span>
+            {/if}
+        </div>
+    </div>
+{/snippet}
+
+{#if href}
+    <a
+        class={panelClasses}
+        href={isDisabled ? undefined : href}
+        aria-label={computedAriaLabel}
+        aria-disabled={isDisabled ? "true" : undefined}
+        aria-busy={loading ? "true" : undefined}
+        tabindex={isDisabled ? -1 : undefined}
+        target={target}
+        rel={rel}
+        {...restProps}
+    >
+        {@render body()}
+    </a>
+{:else}
+    <button
+        type="button"
+        class={panelClasses}
+        aria-label={computedAriaLabel}
+        aria-busy={loading ? "true" : undefined}
+        disabled={isDisabled}
+        onclick={onclick}
+        onkeydown={handleKeydown}
+        {...restProps}
+    >
+        {@render body()}
+    </button>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { ExtendedSemanticVariant } from "../types/variants.js";
+interface Props {
+    title: string;
+    description: string;
+    href?: string;
+    onclick?: (event: MouseEvent) => void | Promise<void>;
+    disabled?: boolean;
+    loading?: boolean;
+    badgeText?: string;
+    badgeVariant?: ExtendedSemanticVariant;
+    /** Overrides the default accessible name for the clickable region. */
+    ariaLabel?: string;
+    className?: string;
+    target?: HTMLAnchorElement["target"];
+    rel?: string;
+}
+declare const ActionPanel: import("svelte").Component<Props, {}, "">;
+type ActionPanel = ReturnType<typeof ActionPanel>;
+export default ActionPanel;

package/dist/atoms/Badge.svelte

@@ -3,7 +3,7 @@
     import type {
         ExtendedSemanticVariant,
         SizeVariant,
-    } from "../../types/variants.js";
+    } from "../types/variants.js";
 
     interface Props {
         variant?: ExtendedSemanticVariant;

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

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

package/dist/atoms/Button.svelte

@@ -1,14 +1,16 @@
 <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 {
         variant?: ButtonVariant;
         size?: SizeVariant;
         disabled?: boolean;
+        loading?: boolean;
         type?: "button" | "submit" | "reset";
         text?: string;
         isFullWidth?: boolean;
+        class?: string;
         onclick?: (event: MouseEvent) => void;
         children?: Snippet;
     }
@@ -17,15 +19,19 @@
         variant = "primary",
         size = "md",
         disabled = false,
+        loading = false,
         type = "button",
         text = "",
         isFullWidth = false,
+        class: className = "",
         onclick,
         children,
         ...restProps
     }: Props = $props();
 
-    const sizeClass = $derived(() => {
+    const isDisabled = $derived(disabled || loading);
+
+    const sizeClass = $derived.by(() => {
         if (size === "sm") {
             return {
                 padding: "px-4 py-2.5",
@@ -59,33 +65,46 @@
         }
     });
 
-    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"
-                  : 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 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 border-border text-headline hover:bg-action-secondary hover:border-border-medium 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 underline-offset-4 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 flexClass = isFullWidth ? "flex" : "inline-flex";
         const widthClass = isFullWidth ? "w-full" : "";
-        const baseClasses = `${flexClass} items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none`;
+        const baseClasses = `${flexClass} 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} ${widthClass} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.font} ${sizeStyles.leading} ${sizeStyles.tracking} ${sizeStyles.radius} ${sizeStyles.gap} ${variantClass()}`.trim();
+        return `${baseClasses} ${widthClass} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.font} ${sizeStyles.leading} ${sizeStyles.tracking} ${sizeStyles.radius} ${sizeStyles.gap} ${variantClass} ${className}`.trim();
     });
 </script>
 
-<button {type} class={buttonClasses()} {disabled} {onclick} {...restProps}>
+<button
+    {type}
+    class={buttonClasses}
+    disabled={isDisabled}
+    aria-busy={loading ? "true" : undefined}
+    {onclick}
+    {...restProps}
+>
+    {#if loading}
+        <span
+            class="inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
+            aria-hidden="true"
+        ></span>
+    {/if}
     {#if text}
         {text}
     {:else if children}

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

@@ -1,12 +1,14 @@
 import type { Snippet } from "svelte";
-import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 interface Props {
     variant?: ButtonVariant;
     size?: SizeVariant;
     disabled?: boolean;
+    loading?: boolean;
     type?: "button" | "submit" | "reset";
     text?: string;
     isFullWidth?: boolean;
+    class?: string;
     onclick?: (event: MouseEvent) => void;
     children?: Snippet;
 }

package/dist/atoms/Card.svelte

@@ -1,70 +1,73 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { CardVariant, SizeVariant } from "../../types/variants.js";
-    import CardHeader from "./CardHeader.svelte";
-    import CardContent from "./CardContent.svelte";
+    import type { CardVariant, SizeVariant } from "../types/variants.js";
 
     interface Props {
-        title?: string;
-        description?: string;
-        image?: string;
         onclick?: (event: MouseEvent) => void | Promise<void>;
         size?: SizeVariant;
         variant?: CardVariant;
         fullWidth?: boolean;
+        className?: string;
+        /** Required when `onclick` is set (no visible label). */
+        ariaLabel?: string;
         children?: Snippet;
     }
 
     let {
-        title = "",
-        description = "",
-        image = "",
         onclick,
         size = "md",
         variant = "default",
         fullWidth = true,
+        className = "",
+        ariaLabel,
         children,
         ...restProps
     }: Props = $props();
 
-    const sizeClass = $derived(() => {
-        return size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6";
-    });
-
-    const variantClasses = $derived(() => {
-        switch (variant) {
-            case "elevated":
-                return "bg-card shadow-lg";
-            case "outlined":
-                return "bg-card border-2 border-base-200 shadow-none";
-            case "flat":
-                return "bg-card shadow-none border-none";
-            default:
-                return "bg-card shadow-sm";
-        }
-    });
+    const sizeClass = $derived(
+        size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6",
+    );
 
-    const useOldAPI = $derived(
-        title !== "" || description !== "" || image !== "",
+    const radiusClass = $derived(
+        size === "sm"
+            ? "rounded-xl"
+            : size === "lg"
+              ? "rounded-3xl"
+              : "rounded-2xl",
     );
 
-    const cardClasses = $derived(() => {
-        const baseClasses = `rounded-lg transition-all duration-200 ${variantClasses()}`;
-        const interactiveClasses = onclick
-            ? variant === "elevated"
-                ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
-                : variant === "outlined"
-                  ? "cursor-pointer hover:border-brand-500 hover:bg-card-hover"
-                  : variant === "flat"
-                    ? "cursor-pointer hover:bg-card-hover"
-                    : "cursor-pointer hover:shadow-lg hover:bg-card-hover"
-            : "";
-        const widthClasses = fullWidth ? "w-full" : "";
-        const minWidthClass = useOldAPI ? "min-w-64" : "";
-        const paddingClass = useOldAPI ? sizeClass() : "";
+    const variantClasses = $derived(
+        variant === "elevated"
+            ? "bg-card shadow-lg"
+            : variant === "outlined"
+              ? "bg-card border-2 border-base-200 shadow-none"
+              : variant === "flat"
+                ? "bg-card shadow-none border-none"
+                : "bg-card shadow-sm",
+    );
 
-        return `${baseClasses} ${interactiveClasses} ${widthClasses} ${minWidthClass} ${paddingClass}`.trim();
-    });
+    const cardClasses = $derived(
+        [
+            radiusClass,
+            "transition-all duration-200",
+            variantClasses,
+            onclick
+                ? variant === "elevated"
+                    ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
+                    : variant === "outlined"
+                      ? "cursor-pointer hover:border-brand-500 hover:bg-card-hover"
+                      : variant === "flat"
+                        ? "cursor-pointer hover:bg-card-hover"
+                        : "cursor-pointer hover:shadow-lg hover:bg-card-hover"
+                : "",
+            fullWidth ? "w-full" : "",
+            sizeClass,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" ")
+            .trim(),
+    );
 
     function handleKeydown(event: KeyboardEvent) {
         if (onclick && (event.key === "Enter" || event.key === " ")) {
@@ -74,37 +77,16 @@
     }
 
     const cardRole = $derived(onclick ? "button" : undefined);
-    const cardAriaLabel = $derived(onclick && title ? title : undefined);
 </script>
 
 <div
-    class={cardClasses()}
+    class={cardClasses}
     {onclick}
     role={cardRole}
     {...onclick ? { tabindex: 0 } : {}}
-    aria-label={cardAriaLabel}
+    aria-label={ariaLabel}
     onkeydown={onclick ? handleKeydown : undefined}
     {...restProps}
 >
-    {#if useOldAPI}
-        <!-- Old API: Using title/description/image props -->
-        {#if title || description}
-            <CardHeader {title} {description} />
-        {/if}
-
-        {#if image || children}
-            <CardContent {image} imageAlt={title}>
-                {#if children}
-                    {@render children()}
-                {/if}
-            </CardContent>
-        {/if}
-    {:else}
-        <!-- New API: Using compound components (CardHeader, CardContent, CardFooter) -->
-        {#if children}
-            <CardContent className="pt-6">
-                {@render children()}
-            </CardContent>
-        {/if}
-    {/if}
+    {@render children?.()}
 </div>

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

@@ -1,13 +1,13 @@
 import type { Snippet } from "svelte";
-import type { CardVariant, SizeVariant } from "../../types/variants.js";
+import type { CardVariant, SizeVariant } from "../types/variants.js";
 interface Props {
-    title?: string;
-    description?: string;
-    image?: string;
     onclick?: (event: MouseEvent) => void | Promise<void>;
     size?: SizeVariant;
     variant?: CardVariant;
     fullWidth?: boolean;
+    className?: string;
+    /** Required when `onclick` is set (no visible label). */
+    ariaLabel?: string;
     children?: Snippet;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;

package/dist/atoms/CardHeader.svelte

@@ -3,7 +3,12 @@
 
     interface Props {
         title?: string;
+        subtitle?: string;
         description?: string;
+        /** `id` on the subtitle `<p>` (e.g. `aria-describedby` on the title). */
+        subtitleId?: string;
+        /** `id` on the description `<p>`. */
+        descriptionId?: string;
         level?: 1 | 2 | 3 | 4 | 5 | 6;
         className?: string;
         children?: Snippet;
@@ -11,7 +16,10 @@
 
     let {
         title = "",
+        subtitle = "",
         description = "",
+        subtitleId,
+        descriptionId,
         level = 3,
         className = "",
         children,
@@ -24,7 +32,7 @@
     });
 </script>
 
-<header class="flex flex-col space-y-1.5 pb-4{className}" {...restProps}>
+<header class={`flex flex-col space-y-1.5 pb-4 ${className}`.trim()} {...restProps}>
     {#if title}
         <svelte:element this={headingTag} class={headingClasses()}>
             {title}
@@ -33,8 +41,13 @@
     {#if children}
         {@render children()}
     {/if}
+    {#if subtitle}
+        <p id={subtitleId} class="text-sm text-description">
+            {subtitle}
+        </p>
+    {/if}
     {#if description}
-        <p class="text-sm text-description">
+        <p id={descriptionId} class="text-sm text-description">
             {description}
         </p>
     {/if}

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

@@ -1,7 +1,12 @@
 import type { Snippet } from "svelte";
 interface Props {
     title?: string;
+    subtitle?: string;
     description?: string;
+    /** `id` on the subtitle `<p>` (e.g. `aria-describedby` on the title). */
+    subtitleId?: string;
+    /** `id` on the description `<p>`. */
+    descriptionId?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     className?: string;
     children?: Snippet;

package/dist/atoms/Checkbox.svelte

@@ -1,95 +1,69 @@
 <script lang="ts">
-    import { generateId } from "../../routes/lib/ssr-safe.js";
+    import SelectionControl from "./SelectionControl.svelte";
+    import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
 
     interface Props {
-        checked?: boolean;
+        id?: string;
         name?: string;
+        value?: string;
         disabled?: boolean;
+        loading?: boolean;
         label?: string;
+        defaultChecked?: boolean;
+        checked?: boolean;
+        onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
     }
 
     let {
-        checked = false,
+        id,
+        value = "",
         name = "",
         disabled = false,
+        loading = false,
         label = "",
+        defaultChecked = false,
+        checked = $bindable(defaultChecked),
+        onChange,
         onchange,
         ...restProps
     }: Props = $props();
-
-    const checkboxId = generateId("checkbox");
-
-    const checkboxContainerClasses = $derived(() => {
-        const baseClasses =
-            "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
-
-        if (disabled) {
-            return `${baseClasses} opacity-50 cursor-not-allowed`;
-        }
-        return `${baseClasses} cursor-pointer`;
-    });
-
-    const checkboxBoxClasses = $derived(() => {
-        if (checked) {
-            return disabled
-                ? "border-0 opacity-50 bg-brand-500"
-                : "border-0 bg-brand-500";
-        }
-        return disabled
-            ? "border-2 border-base-400 bg-transparent"
-            : "border-2 border-base-400 bg-transparent";
-    });
-
-    function handleChange(event: Event) {
-        if (disabled) return;
-        const target = event.target as HTMLInputElement;
-        checked = target.checked;
-        if (onchange) {
-            onchange(event);
-        }
-    }
 </script>
 
-<div class="flex items-center gap-2">
-    <label
-        for={checkboxId}
-        class="flex items-center gap-2 cursor-pointer {disabled
-            ? 'opacity-50 cursor-not-allowed'
-            : ''}"
+{#snippet mark(props: SelectionControlMarkProps)}
+    <span
+        class="pointer-events-none absolute inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-brand-500 border-t-transparent z-10 opacity-0 group-has-[aria-busy=true]/control:opacity-100 group-has-checked/control:border-base-50"
+        aria-hidden="true"
+    ></span>
+    <svg
+        class="absolute w-3 h-3 text-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
     >
-        <div class={checkboxContainerClasses()}>
-            <input
-                type="checkbox"
-                id={checkboxId}
-                {name}
-                {checked}
-                {disabled}
-                class="sr-only"
-                onchange={handleChange}
-                {...restProps}
-            />
-            <div class="absolute inset-0 {checkboxBoxClasses()} rounded"></div>
-            {#if checked}
-                <svg
-                    class="absolute w-3 h-3 text-base-50 pointer-events-none z-10"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2.5"
-                        d="M5 13l4 4L19 7"
-                    />
-                </svg>
-            {/if}
-        </div>
-        {#if label}
-            <span class="text-sm font-medium text-label">
-                {label}
-            </span>
-        {/if}
-    </label>
-</div>
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.5"
+            d="M5 13l4 4L19 7"
+        />
+    </svg>
+{/snippet}
+
+<SelectionControl
+    type="checkbox"
+    shape="square"
+    {id}
+    {name}
+    {value}
+    {label}
+    {disabled}
+    {loading}
+    bind:checked
+    {defaultChecked}
+    {onChange}
+    {onchange}
+    {mark}
+    {...restProps}
+/>

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

@@ -1,10 +1,15 @@
 interface Props {
-    checked?: boolean;
+    id?: string;
     name?: string;
+    value?: string;
     disabled?: boolean;
+    loading?: boolean;
     label?: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "">;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;