zabi-components 6.0.0 → 7.0.1

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,31 +1,35 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+    import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 
-    interface Props {
+    type Props = Omit<HTMLButtonAttributes, "class"> & {
         variant?: ButtonVariant;
         size?: SizeVariant;
-        disabled?: boolean;
-        type?: "button" | "submit" | "reset";
+        loading?: boolean;
         text?: string;
         isFullWidth?: boolean;
-        onclick?: (event: MouseEvent) => void;
+        class?: string;
         children?: Snippet;
-    }
+    };
 
     let {
         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 +63,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,15 +1,15 @@
 import type { Snippet } from "svelte";
-import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
-interface Props {
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+type Props = Omit<HTMLButtonAttributes, "class"> & {
     variant?: ButtonVariant;
     size?: SizeVariant;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
+    loading?: boolean;
     text?: string;
     isFullWidth?: boolean;
-    onclick?: (event: MouseEvent) => void;
+    class?: string;
     children?: Snippet;
-}
+};
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/atoms/Card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { CardVariant, SizeVariant } from "../../types/variants.js";
+    import type { CardVariant, SizeVariant } from "../types/variants.js";
 
     interface Props {
         onclick?: (event: MouseEvent) => void | Promise<void>;
@@ -8,7 +8,7 @@
         variant?: CardVariant;
         fullWidth?: boolean;
         className?: string;
-        /** Required when card is interactive (has onclick) for accessibility */
+        /** Required when `onclick` is set (no visible label). */
         ariaLabel?: string;
         children?: Snippet;
     }
@@ -28,6 +28,14 @@
         size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6",
     );
 
+    const radiusClass = $derived(
+        size === "sm"
+            ? "rounded-xl"
+            : size === "lg"
+              ? "rounded-3xl"
+              : "rounded-2xl",
+    );
+
     const variantClasses = $derived(
         variant === "elevated"
             ? "bg-card shadow-lg"
@@ -40,7 +48,8 @@
 
     const cardClasses = $derived(
         [
-            "rounded-lg transition-all duration-200",
+            radiusClass,
+            "transition-all duration-200",
             variantClasses,
             onclick
                 ? variant === "elevated"

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

@@ -1,12 +1,12 @@
 import type { Snippet } from "svelte";
-import type { CardVariant, SizeVariant } from "../../types/variants.js";
+import type { CardVariant, SizeVariant } from "../types/variants.js";
 interface Props {
     onclick?: (event: MouseEvent) => void | Promise<void>;
     size?: SizeVariant;
     variant?: CardVariant;
     fullWidth?: boolean;
     className?: string;
-    /** Required when card is interactive (has onclick) for accessibility */
+    /** Required when `onclick` is set (no visible label). */
     ariaLabel?: string;
     children?: Snippet;
 }

package/dist/atoms/CardHeader.svelte

@@ -3,10 +3,12 @@
 
     interface Props {
         title?: string;
-        /** Short secondary text displayed directly under the title */
         subtitle?: string;
-        /** Longer supporting text displayed below the subtitle */
         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;
@@ -16,6 +18,8 @@
         title = "",
         subtitle = "",
         description = "",
+        subtitleId,
+        descriptionId,
         level = 3,
         className = "",
         children,
@@ -38,12 +42,12 @@
         {@render children()}
     {/if}
     {#if subtitle}
-        <p class="text-sm text-description">
+        <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,10 +1,12 @@
 import type { Snippet } from "svelte";
 interface Props {
     title?: string;
-    /** Short secondary text displayed directly under the title */
     subtitle?: string;
-    /** Longer supporting text displayed below the subtitle */
     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;

package/dist/atoms/CodeBlock.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
+    import Check from "@lucide/svelte/icons/check";
+    import Copy from "@lucide/svelte/icons/copy";
+    import IconButton from "./IconButton.svelte";
+
     interface Props {
+        /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
         code: string;
         language?: string;
         className?: string;
         showCopyButton?: boolean;
+        /** If true, `{@html code}` — only trusted, sanitized input. */
+        trustHtml?: boolean;
     }
 
     let {
@@ -11,6 +18,7 @@
         language = "svelte",
         className = "",
         showCopyButton = true,
+        trustHtml = false,
         ...restProps
     } = $props();
 
@@ -30,11 +38,11 @@
 </script>
 
 <div
-    class="code-block relative bg-base-900 rounded-lg overflow-hidden {className}"
+    class="code-block relative bg-surface-1 border border-border rounded-lg overflow-hidden {className}"
     {...restProps}
 >
     <div
-        class="flex items-center justify-between px-4 py-2 bg-base-800 border-b border-base-700"
+        class="flex items-center justify-between px-4 py-2 bg-surface-2 border-b border-border"
     >
         <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full bg-red-500"></div>
@@ -42,46 +50,24 @@
             <div class="w-3 h-3 rounded-full bg-green-500"></div>
         </div>
         {#if showCopyButton}
-            <button
+            <IconButton
+                variant="ghost"
+                size="sm"
+                label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
                 onclick={copyToClipboard}
-                class="flex cursor-pointer items-center gap-2 rounded px-3 py-1 text-xs text-base-300 transition-colors duration-200 hover:bg-base-700 hover:text-white"
-                aria-label="Copy code to clipboard"
             >
                 {#if copied}
-                    <svg
-                        class="w-4 h-4"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                    >
-                        <path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                        />
-                    </svg>
-                    Copied!
+                    <Check size={16} class="shrink-0" aria-hidden="true" />
                 {:else}
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                        />
-                    </svg>
-                    Copy
+                    <Copy size={16} class="shrink-0" aria-hidden="true" />
                 {/if}
-            </button>
+            </IconButton>
         {/if}
     </div>
 
-    <pre class="p-4 overflow-x-auto text-sm text-base-100 leading-relaxed"><code
-            class="language-{language}">{@html code}</code
+    <pre class="p-4 overflow-x-auto text-sm text-base-900 leading-relaxed"><code
+            class="language-{language}"
+            >{#if trustHtml}{@html code}{:else}{code}{/if}</code
         ></pre>
 </div>
 

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

@@ -3,6 +3,7 @@ declare const CodeBlock: import("svelte").Component<{
     language?: string;
     className?: string;
     showCopyButton?: boolean;
+    trustHtml?: boolean;
 } & Record<string, any>, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;
 export default CodeBlock;