zabi-components 7.0.1 → 8.0.0

package/dist/atoms/Divider.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     type Orientation = 'horizontal' | 'vertical';
 
     interface Props {
@@ -34,13 +36,11 @@
 </script>
 
 <div
-    class={[
+    class={cn(
         '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}

package/dist/atoms/FeatureCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Component, Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title: string;
@@ -19,18 +20,18 @@
 </script>
 
 <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}"
+    class={cn("flex flex-col gap-3 p-6 rounded-container bg-surface-1 border border-border transition-colors duration-200 hover:border-border-medium", className)}
 >
     {#if Icon}
         <span
-            class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-brand-50 text-brand-600"
+            class="inline-flex items-center justify-center w-10 h-10 rounded-control bg-brand-50 text-brand-600"
             aria-hidden="true"
         >
             <Icon size={20} />
         </span>
     {/if}
 
-    <div class="flex flex-col gap-1.5">
+    <div class="flex flex-col gap-2">
         <h3 class="text-base font-semibold leading-snug text-headline">
             {title}
         </h3>

package/dist/atoms/Heading.svelte

@@ -1,38 +1,67 @@
 <script lang="ts">
-    interface Props {
-        level?: number;
-        text: string;
-    }
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
 
-    let { level = 1, text }: Props = $props();
+    /** Semantic heading level — also the default visual size. */
+    type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-    const fontWeight = $derived(level <= 2 ? "700" : "500");
+    type Props = Omit<HTMLAttributes<HTMLHeadingElement>, "class"> & {
+        level?: HeadingLevel;
+        /**
+         * Visual size, when it should differ from the semantic level — an `h2`
+         * that needs to look like an `h4` keeps the document outline correct
+         * without forcing the wrong tag.
+         */
+        size?: HeadingLevel;
+        /** Heading text. Ignored when `children` is provided. */
+        text?: string;
+        class?: string;
+        children?: Snippet;
+    };
+
+    let {
+        level = 1,
+        size,
+        text = "",
+        class: className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const visualSize = $derived(size ?? level);
     const Tag = $derived(`h${level}`);
 
-    const sizeClasses = {
-        1: "text-4xl",
-        2: "text-3xl",
-        3: "text-2xl",
-        4: "text-xl",
-        5: "text-lg",
-        6: "text-base",
+    /**
+     * Display sizes tighten as they grow. Untracked 36px type with default
+     * 40px leading is the single clearest "this is stock Tailwind" tell;
+     * negative tracking and a tighter leading is most of what separates
+     * display type from body type set large.
+     */
+    const sizeClasses: Record<HeadingLevel, string> = {
+        1: "text-4xl leading-10 tracking-[-0.02em] font-bold",
+        2: "text-3xl leading-9 tracking-[-0.015em] font-bold",
+        3: "text-2xl leading-8 tracking-[-0.01em] font-semibold",
+        4: "text-xl leading-7 tracking-[-0.005em] font-semibold",
+        5: "text-lg leading-7 font-semibold",
+        6: "text-base leading-6 font-semibold",
     };
 
-    const sizeClass = $derived(
-        sizeClasses[level as keyof typeof sizeClasses] || "text-base",
+    const headingClasses = $derived(
+        cn(`text-headline ${sizeClasses[visualSize] ?? sizeClasses[6]} ${className}`),
     );
 </script>
 
-<svelte:element
-    this={Tag}
-    class="text-headline font-nunito {sizeClass}"
-    style="font-weight: {fontWeight};"
->
-    {text}
+<!--
+  The font family comes from `--font-family-sans`, applied on `body`. This
+  component used to carry its own `font-family: "Nunito Sans"` in a local
+  <style> block, which meant a consumer who rebranded the font token got a
+  rebranded body and Nunito Sans headings.
+-->
+<svelte:element this={Tag} class={headingClasses} {...restProps}>
+    {#if children}
+        {@render children()}
+    {:else}
+        {text}
+    {/if}
 </svelte:element>
-
-<style>
-    .font-nunito {
-        font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
-    }
-</style>

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

@@ -1,7 +1,20 @@
-interface Props {
-    level?: number;
-    text: string;
-}
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/** Semantic heading level — also the default visual size. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type Props = Omit<HTMLAttributes<HTMLHeadingElement>, "class"> & {
+    level?: HeadingLevel;
+    /**
+     * Visual size, when it should differ from the semantic level — an `h2`
+     * that needs to look like an `h4` keeps the document outline correct
+     * without forcing the wrong tag.
+     */
+    size?: HeadingLevel;
+    /** Heading text. Ignored when `children` is provided. */
+    text?: string;
+    class?: string;
+    children?: Snippet;
+};
 declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/atoms/IconButton.svelte

@@ -2,6 +2,7 @@
     import type { Snippet } from "svelte";
     import type { HTMLButtonAttributes } from "svelte/elements";
     import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
 
     type Props = Omit<HTMLButtonAttributes, "class"> & {
         variant?: ButtonVariant;
@@ -28,50 +29,42 @@
 
     const isDisabled = $derived(disabled || loading);
 
+    /**
+     * Square, on the same height scale as Button / Input / Select, so an icon
+     * button sits flush in a toolbar beside a text button of the same size.
+     * Previously these were 8–16px shorter than their own Button.
+     */
     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",
-            };
-        }
+        if (size === "sm") return { box: "size-8", spinner: "size-3.5" };
+        if (size === "lg") return { box: "size-12", spinner: "size-5" };
+        return { box: "size-10", spinner: "size-4" };
     });
 
+    const disabledClass =
+        "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
+
     const variantClass = $derived.by(() => {
-        return variant === "primary"
-            ? "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 active:scale-[0.98]"
-              : variant === "danger"
-                ? "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 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 active:scale-[0.98] disabled:border-disabled disabled:text-disabled"
-                    : variant === "link"
-                      ? "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]";
+        switch (variant) {
+            case "secondary":
+                return "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]";
+            case "danger":
+                return "bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger";
+            case "ghost":
+                return "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active active:scale-[0.98] focus-ring--muted";
+            case "outline":
+                return "bg-transparent border border-border text-headline hover:bg-surface-hover hover:border-border-medium active:bg-surface-active active:scale-[0.98]";
+            case "link":
+                return "bg-transparent text-link hover:text-link-hover focus-ring--muted";
+            case "primary":
+            default:
+                return "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
+        }
     });
 
     const buttonClasses = $derived.by(() => {
-        const sizeStyles = sizeClass;
-        const baseClasses =
-            "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} ${className}`.trim();
+        const base =
+            "inline-flex focus-ring items-center justify-center rounded-control shrink-0 transition-colors duration-150 cursor-pointer select-none";
+        return cn(`${base} ${sizeClass.box} ${variantClass} ${disabledClass} ${className}`);
     });
 </script>
 

package/dist/atoms/Input.svelte

@@ -2,6 +2,7 @@
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
     import type { SemanticVariant, SizeVariant } from "../types/variants.js";
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
@@ -49,28 +50,18 @@
     const inputId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
+    /**
+     * Same fixed height scale as Button, IconButton and Select (32 / 40 / 48),
+     * so a field and its submit button are the same height in a row. These
+     * used to be 38 / 46 / 50 while Button was 40 / 48 / 64.
+     */
     const sizeClass = $derived(() => {
         if (size === "sm") {
-            return {
-                padding: "px-4 py-2",
-                text: "text-sm",
-                leading: "leading-5",
-                spinner: "size-4",
-            };
+            return { box: "h-8 px-3", text: "text-sm", spinner: "size-3.5" };
         } else if (size === "lg") {
-            return {
-                padding: "px-4 py-3",
-                text: "text-base",
-                leading: "leading-6",
-                spinner: "size-5",
-            };
+            return { box: "h-12 px-4", text: "text-base", spinner: "size-5" };
         } else {
-            return {
-                padding: "px-4 py-2.5",
-                text: "text-base",
-                leading: "leading-6",
-                spinner: "size-5",
-            };
+            return { box: "h-10 px-3", text: "text-sm", spinner: "size-4" };
         }
     });
 
@@ -86,30 +77,31 @@
 
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
-        const trailingPad = loading
-            ? size === "sm"
-                ? "pr-9"
-                : "pr-10"
-            : "";
+        const trailingPad = loading ? (size === "sm" ? "pr-9" : "pr-10") : "";
+        /**
+         * The field is a raised surface (`bg-input` = white in light, an inset
+         * step in dark). It used to be a grey fill on a grey page, which read
+         * as disabled. `min-w-48` is gone: it forced a 192px floor on every
+         * field regardless of the layout around it.
+         */
         const baseClasses =
-            "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";
+            "focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed";
 
-        return `${baseClasses} ${sizeStyles.padding} ${trailingPad} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
+        return cn(`${baseClasses} ${sizeStyles.box} ${trailingPad} ${sizeStyles.text} ${variantClass()} ${className}`);
     });
 
     const labelClasses = $derived(
-        () => "block text-sm font-medium text-label mb-1",
+        () => "block text-sm font-medium text-label mb-2",
     );
 
+    // Message text uses the `-text` step (700), which clears 4.5:1 on a page
+    // surface; the solid fill step (600) is for fills, not for small text.
     const messageClasses = $derived(() => {
-        if (variant === "error") {
-            return "text-error text-sm mt-1 flex items-center gap-1.5";
-        } else if (variant === "success") {
-            return "text-success text-sm mt-1 flex items-center gap-1.5";
-        } else if (variant === "warning") {
-            return "text-warning text-sm mt-1 flex items-center gap-1.5";
-        }
-        return "text-description text-sm mt-1 flex items-center gap-1.5";
+        const base = "text-sm mt-2 flex items-center gap-2";
+        if (variant === "error") return `text-error-text ${base}`;
+        if (variant === "success") return `text-success-text ${base}`;
+        if (variant === "warning") return `text-warning-text ${base}`;
+        return `text-description ${base}`;
     });
 
     const getIcon = $derived(() => {

package/dist/atoms/List.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import ListItemRow, { type ListItemData } from "./ListItem.svelte";
+    import { cn } from "../util/cn.js";
 
     export type ListItem = ListItemData;
 
@@ -9,6 +10,8 @@
         ariaLabel?: string;
         selectedId?: string;
         showArrow?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         onclick?: (item: ListItem, event: MouseEvent) => void;
     }
@@ -18,13 +21,18 @@
         ariaLabel = "List items",
         selectedId = "",
         showArrow = true,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         onclick,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     const listClasses = $derived(
-        `space-y-1 overflow-hidden rounded-xl ${className}`.trim(),
+        cn(`space-y-1 overflow-hidden rounded-container ${className}`),
     );
 </script>
 

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

@@ -6,6 +6,8 @@ interface Props {
     ariaLabel?: string;
     selectedId?: string;
     showArrow?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     onclick?: (item: ListItem, event: MouseEvent) => void;
 }

package/dist/atoms/ListItem.svelte

@@ -38,10 +38,10 @@
 
     const itemClasses = $derived.by(() => {
         const baseClasses =
-            "group focus-ring flex w-full items-center gap-3 rounded-xl border border-border px-4 py-3 pr-5 text-left transition-all duration-150";
+            "group focus-ring flex w-full items-center gap-3 rounded-container border border-border px-4 py-3 pr-5 text-left transition-all duration-150";
         const interactiveClasses = item.disabled
             ? "cursor-not-allowed opacity-50"
-            : "cursor-pointer focus-visible:bg-base-100";
+            : "cursor-pointer focus-visible:bg-surface-hover";
         const selectedClasses = selected
             ? "bg-action-primary-subtle border-brand-500"
             : "";

package/dist/atoms/ListItemLeading.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
 
+    import { cn } from "../util/cn.js";
     interface Props {
-        /** e.g. `rounded-full` for avatars; default is `rounded-md` for icons. */
+        /** e.g. `rounded-full` for avatars; default is `rounded-control` for icons. */
         class?: string;
         children?: Snippet;
     }
 
     let { class: className = "", children }: Props = $props();
 
-    const roundingClass = $derived(className.trim() ? className.trim() : "rounded-md");
+    // cn lets a call-site radius win outright, instead of replacing the default wholesale.
+    const roundingClass = $derived(cn("rounded-control", className));
 </script>
 
 <span

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 interface Props {
-    /** e.g. `rounded-full` for avatars; default is `rounded-md` for icons. */
+    /** e.g. `rounded-full` for avatars; default is `rounded-control` for icons. */
     class?: string;
     children?: Snippet;
 }

package/dist/atoms/OptimizedImage.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     interface Props {
         src: string;
         alt?: string;
         width?: number | string;
         height?: number | string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
@@ -12,16 +16,21 @@
         alt = "",
         width = "100%",
         height = "auto",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(`${classAttr} ${legacyClass}`.trim());
 </script>
 
 <img
     {src}
     {alt}
-    class="w-full h-auto object-cover {className}"
+    class={cn("w-full h-auto object-cover", className)}
     style="width: {typeof width === 'number'
         ? width + 'px'
         : width}; height: {typeof height === 'number'

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

@@ -3,6 +3,8 @@ interface Props {
     alt?: string;
     width?: number | string;
     height?: number | string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 type $$ComponentProps = Props & {

package/dist/atoms/Progress.svelte

@@ -2,6 +2,8 @@
     import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         value?: number;
         max?: number;
         size?: "sm" | "md" | "lg";
@@ -9,6 +11,7 @@
     }
 
     let {
+        class: className = "",
         value = 0,
         max = 100,
         size = "md",
@@ -27,7 +30,7 @@
     });
 </script>
 
-<div>
+<div class={className} {...restProps}>
     {#if label}
         <div class="flex justify-between items-center mb-2">
             <label for={progressId} class="text-sm font-medium text-label"

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

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     value?: number;
     max?: number;
     size?: "sm" | "md" | "lg";

package/dist/atoms/Radio.svelte

@@ -4,6 +4,8 @@
     import { RADIO_CHECKED_DOT_CLASSES } from "./selection-control.styles";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         id?: string;
         name?: string;
         value?: string;
@@ -16,6 +18,7 @@
     }
 
     let {
+        class: className = "",
         id,
         name = "",
         value = "",
@@ -46,6 +49,7 @@
     {onChange}
     {onchange}
     {mark}
+    class={className}
     {...restProps}
 />
 

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

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     id?: string;
     name?: string;
     value?: string;