zabi-components 7.0.2 → 8.1.0

package/dist/atoms/ActionPanel.svelte

@@ -2,6 +2,7 @@
     import Badge from "./Badge.svelte";
     import type { ExtendedSemanticVariant } from "../types/variants.js";
 
+    import { cn } from "../util/cn.js";
     interface Props {
         title: string;
         description: string;
@@ -13,6 +14,8 @@
         badgeVariant?: ExtendedSemanticVariant;
         /** Overrides the default accessible name for the clickable region. */
         ariaLabel?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         target?: HTMLAnchorElement["target"];
         rel?: string;
@@ -28,12 +31,17 @@
         badgeText,
         badgeVariant = "neutral",
         ariaLabel,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         target,
         rel,
         ...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(`${classAttr} ${legacyClass}`.trim());
+
     const isDisabled = $derived(disabled || loading);
 
     const computedAriaLabel = $derived(
@@ -41,18 +49,25 @@
     );
 
     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";
+        "group focus-ring focus-ring--muted block rounded-container border border-border bg-card p-6 text-left transition-colors duration-150";
+
+    /**
+     * The hover and pressed tints are translucent, so they are drawn as a
+     * background image over the card fill rather than in place of it: swapping
+     * `bg-card` for a tint would let the page show through the panel. (A
+     * `hover:bg-*` beside `bg-card` also never applies; see THEMING.md, state
+     * variants.)
+     */
+    const interactiveClasses =
+        "bg-linear-to-b from-transparent to-transparent hover:border-border-medium hover:from-surface-hover hover:to-surface-hover active:scale-[0.99] active:from-surface-active active:to-surface-active";
 
-    const disabledClasses =
-        "opacity-50 cursor-not-allowed pointer-events-none hover:border-base-200 hover:bg-base-0 active:scale-100";
+    const disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
 
     const panelClasses = $derived(
-        [baseClasses, isDisabled ? disabledClasses : "", className]
-            .filter(Boolean)
-            .join(" ")
-            .trim(),
+        cn(baseClasses, isDisabled ? disabledClasses : interactiveClasses, className),
     );
 
+
     function handleKeydown(event: KeyboardEvent) {
         if (isDisabled) return;
         if (!href && onclick && (event.key === "Enter" || event.key === " ")) {
@@ -78,7 +93,7 @@
             {/if}
             {#if loading}
                 <span
-                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-description border-t-transparent opacity-70"
+                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-description border-t-transparent opacity-70 motion-reduce:animate-pulse"
                     aria-hidden="true"
                 ></span>
             {/if}

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

@@ -10,6 +10,8 @@ interface Props {
     badgeVariant?: ExtendedSemanticVariant;
     /** Overrides the default accessible name for the clickable region. */
     ariaLabel?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     target?: HTMLAnchorElement["target"];
     rel?: string;

package/dist/atoms/Avatar.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+    import User from "@lucide/svelte/icons/user";
+    import { untrack } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { initialsOf, type AvatarSize } from "../util/avatar.js";
+    import { cn } from "../util/cn.js";
+
+    /**
+     * A round picture of a person, which falls back to their initials.
+     *
+     * It is one image with one name, the person's: the picture, the initials
+     * and the icon inside are presentational. Not interactive: put it in a
+     * link or a button of your own.
+     *
+     * Other attributes (`id`, `data-*`, ...) land on the root element.
+     */
+    type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
+        /** The person's name: the accessible name, and where the initials come from. */
+        name: string;
+        /** Address of the picture. Without it, or when it fails to load, the initials show. */
+        src?: string;
+        /** Diameter: 24, 32 and 48px. It does not grow with the text size. */
+        size?: "sm" | "md" | "lg";
+        /**
+         * Accessible name, when it should differ from `name`. `alt=""` makes
+         * the avatar decorative: for a name that is printed beside it.
+         */
+        alt?: string;
+        /**
+         * Language the initials are upper-cased in ("tr" turns "i" into "İ").
+         * The page's own (`<html lang>`) by default, which the server cannot
+         * read: pass it where that matters.
+         */
+        locale?: string;
+        /** Extra classes for the root element. */
+        class?: string;
+    };
+
+    let {
+        name,
+        src,
+        size = "md",
+        alt,
+        locale,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    const pageLocale = typeof document !== "undefined" ? document.documentElement.lang : "";
+    const initials = $derived(initialsOf(name, locale || pageLocale));
+    const label = $derived(alt ?? name);
+
+    /** The address that did not load. Another address gets its own try. */
+    let failedSrc = $state<string>();
+    const failed = $derived(!!src && failedSrc === src);
+
+    /** A picture that had already failed before the page hydrated fired its `error` to nobody. */
+    function settled(image: HTMLImageElement) {
+        if (image.complete && image.naturalWidth === 0) untrack(() => (failedSrc = src));
+    }
+
+    // The circle and the type in it are in px: a face in a row of people is
+    // the same size whatever the text size is, and the initials stay inside.
+    const SIZES: Record<AvatarSize, string> = {
+        sm: "size-[24px] text-[10px]",
+        md: "size-[32px] text-[12px]",
+        lg: "size-[48px] text-[16px]",
+    };
+</script>
+
+<!-- The subtle primary pair, as a selected pill tab has: held to 4.5:1 in both
+themes by scripts/contrast-pairs.js. The border is for forced colours, where
+the fill is gone and a transparent border is drawn. -->
+<span
+    class={cn(
+        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill border border-transparent bg-action-primary-subtle align-middle leading-none font-semibold text-link select-none",
+        SIZES[size] ?? SIZES.md,
+        className,
+    )}
+    data-avatar
+    data-size={size}
+    role={label ? "img" : undefined}
+    aria-label={label || undefined}
+    aria-hidden={label ? undefined : "true"}
+    {...restProps}
+>
+    <!-- Under the picture from the start, in the server's markup too: nothing
+    moves when the picture arrives, or when it does not. -->
+    {#if initials}
+        <span aria-hidden="true" data-avatar-initials>{initials}</span>
+    {:else}
+        <User class="size-[60%]" aria-hidden="true" />
+    {/if}
+    {#if src && !failed}
+        <img
+            {src}
+            alt=""
+            class="absolute inset-0 size-full object-cover"
+            draggable="false"
+            onerror={() => (failedSrc = src)}
+            {@attach settled}
+        />
+    {/if}
+</span>

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

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * A round picture of a person, which falls back to their initials.
+ *
+ * It is one image with one name, the person's: the picture, the initials
+ * and the icon inside are presentational. Not interactive: put it in a
+ * link or a button of your own.
+ *
+ * Other attributes (`id`, `data-*`, ...) land on the root element.
+ */
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
+    /** The person's name: the accessible name, and where the initials come from. */
+    name: string;
+    /** Address of the picture. Without it, or when it fails to load, the initials show. */
+    src?: string;
+    /** Diameter: 24, 32 and 48px. It does not grow with the text size. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Accessible name, when it should differ from `name`. `alt=""` makes
+     * the avatar decorative: for a name that is printed beside it.
+     */
+    alt?: string;
+    /**
+     * Language the initials are upper-cased in ("tr" turns "i" into "İ").
+     * The page's own (`<html lang>`) by default, which the server cannot
+     * read: pass it where that matters.
+     */
+    locale?: string;
+    /** Extra classes for the root element. */
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/atoms/Badge.svelte

@@ -1,82 +1,148 @@
 <script lang="ts">
-    import { Check, AlertTriangle, X, Info } from "@lucide/svelte";
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Check from "@lucide/svelte/icons/check";
+    import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
+    import X from "@lucide/svelte/icons/x";
+    import Info from "@lucide/svelte/icons/info";
+    import Zap from "@lucide/svelte/icons/zap";
+    import { cn } from "../util/cn.js";
     import type {
-        ExtendedSemanticVariant,
+        BadgeVariant,
         SizeVariant,
     } from "../types/variants.js";
 
-    interface Props {
-        variant?: ExtendedSemanticVariant;
+    /**
+     * `subtle` is the default because a page full of saturated fills is noise —
+     * a badge is a label, not a button. `solid` is there for the one badge on
+     * a screen that has to shout.
+     */
+    type BadgeEmphasis = "subtle" | "solid";
+
+    type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+        variant?: BadgeVariant;
         size?: SizeVariant;
-        text: string;
+        emphasis?: BadgeEmphasis;
+        /** Label text. Ignored when `children` is provided. */
+        text?: string;
         showIcon?: boolean;
-    }
+        class?: string;
+        children?: Snippet;
+    };
 
     let {
         variant = "default",
         size = "md",
+        emphasis = "subtle",
         text = "",
         showIcon = false,
+        class: className = "",
+        children,
+        ...restProps
     }: Props = $props();
 
-    const classes = $derived(() => {
-        const baseClasses =
-            "inline-flex items-center font-medium border rounded-xs";
-
-        const sizeClass =
-            size === "sm"
-                ? "px-2 py-0.5 text-xs"
-                : size === "lg"
-                  ? "px-4 py-2 text-base"
-                  : "px-3 py-1 text-sm";
-
-        const variantClass =
-            variant === "success"
-                ? "bg-success border-success text-card"
-                : variant === "warning"
-                  ? "bg-warning border-warning text-card"
-                  : variant === "error"
-                    ? "bg-error border-error text-card"
-                    : variant === "info"
-                      ? "bg-info border-info text-card"
-                      : variant === "neutral"
-                        ? "bg-neutral border-neutral text-card"
-                        : variant === "energetic"
-                          ? "bg-energetic border-energetic text-card"
-                          : "bg-secondary border-secondary text-card";
-
-        return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
+    /**
+     * 20, 24 and 28px tall for a label on one line, as a minimum: a label that
+     * does not fit wraps and the badge grows. It used to be a fixed height
+     * with `whitespace-nowrap`, and a long label beside a flexible name made
+     * the page wider than a phone at 200% text.
+     *
+     * The vertical padding is what is left of the height after one line of
+     * text and the 1px border on each side (16 + 2 + 2, 16 + 6 + 2 and
+     * 20 + 6 + 2), so a one-line badge is exactly as tall as it was.
+     *
+     * The corner is half of that one-line height, not the pill radius: for
+     * one line that is the same full round end, and a badge of two lines
+     * keeps the same corner and becomes a rounded rectangle, where a pill
+     * radius would have turned it into a lozenge with its text in the curve.
+     */
+    const sizeClass = $derived.by(() => {
+        if (size === "sm") return { box: "min-h-5 py-px px-2 gap-1 text-xs rounded-[0.625rem]", icon: 12 };
+        if (size === "lg") return { box: "min-h-7 py-[3px] px-3 gap-2 text-sm rounded-[0.875rem]", icon: 16 };
+        return { box: "min-h-6 py-[3px] px-2 gap-1 text-xs rounded-[0.75rem]", icon: 14 };
     });
 
-    const iconSize = $derived(() => {
-        return size === "sm" ? 12 : size === "lg" ? 20 : 16;
+    /**
+     * Both emphases are built from the SAME step of each family's ramp, so
+     * every variant reads at the same weight. Subtle is 100/200/800 (8.2:1),
+     * solid is 600 with its `-text` foreground (4.9:1). Before the ramps were
+     * calibrated, a solid warning badge sat at 2.15:1 and energetic at 1.97:1.
+     */
+    const variantClass = $derived.by(() => {
+        const solid = emphasis === "solid";
+        switch (variant) {
+            case "success":
+                return solid
+                    ? "bg-success text-card border-transparent"
+                    : "bg-success-subtle text-success-text border-success-border";
+            case "warning":
+                return solid
+                    ? "bg-warning text-card border-transparent"
+                    : "bg-warning-subtle text-warning-text border-warning-border";
+            case "error":
+                return solid
+                    ? "bg-error text-card border-transparent"
+                    : "bg-error-subtle text-error-text border-error-border";
+            case "info":
+                return solid
+                    ? "bg-info text-card border-transparent"
+                    : "bg-info-subtle text-info-text border-info-border";
+            case "energetic":
+                return solid
+                    ? "bg-energetic text-card border-transparent"
+                    : "bg-energetic-subtle text-energetic-text border-energetic-border";
+            // The app's second brand colour. Its solid label is the "on accent"
+            // role, not the card surface: an app with a light accent (a
+            // yellow) sets a dark label there, and white would be unreadable.
+            case "accent":
+                return solid
+                    ? "bg-accent text-on-accent border-transparent"
+                    : "bg-accent-subtle text-accent-text border-accent-border";
+            case "neutral":
+            case "default":
+            default:
+                return solid
+                    ? "bg-neutral text-card border-transparent"
+                    : "bg-neutral-subtle text-neutral-text border-neutral-border";
+        }
     });
 
-    const iconSpacingClass = $derived(() => {
-        return size === "sm" ? "mr-1" : size === "lg" ? "mr-2" : "mr-1.5";
+    const badgeClasses = $derived(
+        // Never wider than what it is in, and its words break onto the next
+        // line before they push anything out; a word longer than the line
+        // breaks inside. The icon stays centred beside the lines.
+        cn(`inline-flex [max-inline-size:100%] min-w-0 items-center justify-center border font-medium [overflow-wrap:anywhere] ${sizeClass.box} ${variantClass} ${className}`),
+    );
+
+    /** One outline icon family, so the variants don't look like a rummage. */
+    const Icon = $derived.by(() => {
+        switch (variant) {
+            case "success":
+                return Check;
+            case "warning":
+                return TriangleAlert;
+            case "error":
+                return X;
+            case "energetic":
+                return Zap;
+            default:
+                return Info;
+        }
     });
+
+    const hasLabel = $derived(Boolean(children) || Boolean(text));
 </script>
 
-<span class={classes()}>
-    {#if showIcon}
-        {#if variant === "success"}
-            <Check size={iconSize()} class="{iconSpacingClass()} text-card" />
-        {:else if variant === "warning"}
-            <AlertTriangle
-                size={iconSize()}
-                class="{iconSpacingClass()} text-card"
-            />
-        {:else if variant === "error"}
-            <X size={iconSize()} class="{iconSpacingClass()} text-card" />
-        {:else if variant === "info"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
-        {:else if variant === "neutral"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
-        {:else if variant === "energetic"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
+{#if hasLabel}
+    <span class={badgeClasses} {...restProps}>
+        {#if showIcon}
+            {@const BadgeIcon = Icon}
+            <BadgeIcon size={sizeClass.icon} class="shrink-0" aria-hidden="true" />
+        {/if}
+        {#if children}
+            {@render children()}
         {:else}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
+            {text}
         {/if}
-    {/if}
-    {text}
-</span>
+    </span>
+{/if}

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

@@ -1,10 +1,22 @@
-import type { ExtendedSemanticVariant, SizeVariant } from "../types/variants.js";
-interface Props {
-    variant?: ExtendedSemanticVariant;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BadgeVariant, SizeVariant } from "../types/variants.js";
+/**
+ * `subtle` is the default because a page full of saturated fills is noise —
+ * a badge is a label, not a button. `solid` is there for the one badge on
+ * a screen that has to shout.
+ */
+type BadgeEmphasis = "subtle" | "solid";
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    variant?: BadgeVariant;
     size?: SizeVariant;
-    text: string;
+    emphasis?: BadgeEmphasis;
+    /** Label text. Ignored when `children` is provided. */
+    text?: string;
     showIcon?: boolean;
-}
+    class?: string;
+    children?: Snippet;
+};
 declare const Badge: import("svelte").Component<Props, {}, "">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;