zabi-components 8.1.0 → 9.0.0

package/dist/atoms/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import User from "@lucide/svelte/icons/user";
-    import { untrack } from "svelte";
+    import { untrack, type Snippet } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
     import { initialsOf, type AvatarSize } from "../util/avatar.js";
     import { cn } from "../util/cn.js";
@@ -12,6 +12,10 @@
      * and the icon inside are presentational. Not interactive: put it in a
      * link or a button of your own.
      *
+     * A picture that is not an address (an inline drawing that reads the
+     * page's tokens) goes in as children and fills the circle in place of the
+     * initials and `src`.
+     *
      * Other attributes (`id`, `data-*`, ...) land on the root element.
      */
     type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
@@ -32,6 +36,13 @@
          * read: pass it where that matters.
          */
         locale?: string;
+        /**
+         * The picture, drawn inside the circle at the avatar's size: an inline
+         * SVG, say. It takes the place of `src` and the initials, is
+         * presentational (the name is still `name`), and is clipped to the
+         * circle.
+         */
+        children?: Snippet;
         /** Extra classes for the root element. */
         class?: string;
     };
@@ -42,6 +53,7 @@
         size = "md",
         alt,
         locale,
+        children,
         class: className = "",
         ...restProps
     }: Props = $props();
@@ -86,12 +98,16 @@ the fill is gone and a transparent border is drawn. -->
 >
     <!-- 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}
+    {#if children}
+        <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true" data-avatar-picture>
+            {@render children()}
+        </span>
+    {:else if initials}
         <span aria-hidden="true" data-avatar-initials>{initials}</span>
     {:else}
         <User class="size-[60%]" aria-hidden="true" />
     {/if}
-    {#if src && !failed}
+    {#if !children && src && !failed}
         <img
             {src}
             alt=""

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

@@ -1,3 +1,4 @@
+import { type Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 /**
  * A round picture of a person, which falls back to their initials.
@@ -6,6 +7,10 @@ import type { HTMLAttributes } from "svelte/elements";
  * and the icon inside are presentational. Not interactive: put it in a
  * link or a button of your own.
  *
+ * A picture that is not an address (an inline drawing that reads the
+ * page's tokens) goes in as children and fills the circle in place of the
+ * initials and `src`.
+ *
  * Other attributes (`id`, `data-*`, ...) land on the root element.
  */
 type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
@@ -26,6 +31,13 @@ type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-labe
      * read: pass it where that matters.
      */
     locale?: string;
+    /**
+     * The picture, drawn inside the circle at the avatar's size: an inline
+     * SVG, say. It takes the place of `src` and the initials, is
+     * presentational (the name is still `name`), and is clipped to the
+     * circle.
+     */
+    children?: Snippet;
     /** Extra classes for the root element. */
     class?: string;
 };

package/dist/atoms/Badge.svelte

@@ -23,6 +23,12 @@
         variant?: BadgeVariant;
         size?: SizeVariant;
         emphasis?: BadgeEmphasis;
+        /**
+         * Draws the family's edge on a subtle badge. Off by default: the fill
+         * and the text already carry it, and a same-hue outline on every badge
+         * is one more line per row. Solid badges never have one.
+         */
+        bordered?: boolean;
         /** Label text. Ignored when `children` is provided. */
         text?: string;
         showIcon?: boolean;
@@ -34,6 +40,7 @@
         variant = "default",
         size = "md",
         emphasis = "subtle",
+        bordered = false,
         text = "",
         showIcon = false,
         class: className = "",
@@ -49,7 +56,9 @@
      *
      * 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.
+     * 20 + 6 + 2), so a one-line badge is exactly as tall as it was. The
+     * border box stays when the border is not drawn (transparent), so
+     * `bordered` does not move the badge by a pixel.
      *
      * 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
@@ -67,43 +76,63 @@
      * 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.
+     *
+     * A subtle badge has a transparent edge unless `bordered` is set, which
+     * puts the family's `-border` step back (the 8.1 look). The class is
+     * written out for each case so Tailwind can see it.
+     *
+     * The neutral subtle badge reads `--zabi-badge-neutral-fill` and
+     * `--zabi-badge-neutral-text` (src/app.css) in front of the neutral
+     * tokens: set on any ancestor or in the theme, they move this badge and
+     * no other reader of `--color-neutral-subtle` or `--color-neutral-text`.
      */
     const variantClass = $derived.by(() => {
         const solid = emphasis === "solid";
+        const edge = (drawn: string) => (bordered ? drawn : "border-transparent");
         switch (variant) {
             case "success":
                 return solid
                     ? "bg-success text-card border-transparent"
-                    : "bg-success-subtle text-success-text border-success-border";
+                    : `bg-success-subtle text-success-text ${edge("border-success-border")}`;
             case "warning":
                 return solid
                     ? "bg-warning text-card border-transparent"
-                    : "bg-warning-subtle text-warning-text border-warning-border";
+                    : `bg-warning-subtle text-warning-text ${edge("border-warning-border")}`;
             case "error":
                 return solid
                     ? "bg-error text-card border-transparent"
-                    : "bg-error-subtle text-error-text border-error-border";
+                    : `bg-error-subtle text-error-text ${edge("border-error-border")}`;
             case "info":
                 return solid
                     ? "bg-info text-card border-transparent"
-                    : "bg-info-subtle text-info-text border-info-border";
+                    : `bg-info-subtle text-info-text ${edge("border-info-border")}`;
             case "energetic":
                 return solid
                     ? "bg-energetic text-card border-transparent"
-                    : "bg-energetic-subtle text-energetic-text border-energetic-border";
+                    : `bg-energetic-subtle text-energetic-text ${edge("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";
+                    : `bg-accent-subtle text-accent-text ${edge("border-accent-border")}`;
+            // The primary brand colour, for the neutral-but-branded label
+            // ("Member"). Subtle text is the link role, guarded on this fill
+            // as the label of a selected pill tab; solid carries the label
+            // of the primary fill. The colour is read from the token, not
+            // through `text-link`: that class darkens on hover and while
+            // pressed, and a badge is not a link.
+            case "brand":
+                return solid
+                    ? "bg-action-primary text-action-primary border-transparent"
+                    : `bg-action-primary-subtle text-(color:--color-link) ${edge("border-action-primary-border")}`;
             case "neutral":
             case "default":
             default:
                 return solid
                     ? "bg-neutral text-card border-transparent"
-                    : "bg-neutral-subtle text-neutral-text border-neutral-border";
+                    : `bg-badge-neutral text-badge-neutral ${edge("border-neutral-border")}`;
         }
     });
 

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

@@ -11,6 +11,12 @@ type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
     variant?: BadgeVariant;
     size?: SizeVariant;
     emphasis?: BadgeEmphasis;
+    /**
+     * Draws the family's edge on a subtle badge. Off by default: the fill
+     * and the text already carry it, and a same-hue outline on every badge
+     * is one more line per row. Solid badges never have one.
+     */
+    bordered?: boolean;
     /** Label text. Ignored when `children` is provided. */
     text?: string;
     showIcon?: boolean;

package/dist/atoms/Block.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { SurfaceTone } from "../types/variants.js";
+
+    import { cn } from "../util/cn.js";
+    import { toneSurface } from "../util/tone-surface.js";
+
+    type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+        /**
+         * The block's fill: `neutral` (the default, the card surface), `tint`,
+         * `brand` or `accent`. On `brand` and `accent` the text, links, controls
+         * and focus rings inside take the fill's label colour.
+         */
+        tone?: SurfaceTone;
+        /** A fill the app chooses, any CSS colour. Wins over `tone`. The app must check the contrast of `fill` and `onFill`. */
+        fill?: string;
+        /** The label colour on `fill`, any CSS colour. */
+        onFill?: string;
+        /** Inner space: `none`, `sm` (16 / 16), `md` (16 inline, 24 block; the default) or `lg` (24 inline, 32 block). */
+        padding?: "none" | "sm" | "md" | "lg";
+        /** The element: `div` by default; a landmark (`section` needs a name, `aria-label` or `aria-labelledby`). */
+        as?: "div" | "section" | "header" | "footer" | "article" | "aside";
+        /**
+         * A Block is full width and square-cornered, and does not break out of
+         * a padded parent by itself: put it outside the padded container, or
+         * give it a negative inline margin here (for example `-mx-4`).
+         */
+        class?: string;
+        children?: Snippet;
+    };
+
+    let {
+        tone = "neutral",
+        fill,
+        onFill,
+        padding = "md",
+        as = "div",
+        class: classProp = "",
+        style: styleProp,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const surface = $derived(toneSurface({ tone, fill, onFill }));
+
+    const paddingClass = $derived(
+        padding === "none" ? "" : padding === "sm" ? "px-4 py-4" : padding === "lg" ? "px-6 py-8" : "px-4 py-6",
+    );
+
+    const classes = $derived(
+        cn("block w-full rounded-none border-none shadow-none", surface.filled ? surface.classes : "bg-card", paddingClass, classProp),
+    );
+
+    const style = $derived(
+        [surface.style, typeof styleProp === "string" ? styleProp : undefined].filter(Boolean).join("; ") || undefined,
+    );
+</script>
+
+<!-- One branch per element, not a dynamic element: hydration takes a dynamic
+element out and puts it back (see Heading). -->
+{#if as === "section"}
+    <section class={classes} {style} {...restProps}>{@render children?.()}</section>
+{:else if as === "header"}
+    <header class={classes} {style} {...restProps}>{@render children?.()}</header>
+{:else if as === "footer"}
+    <footer class={classes} {style} {...restProps}>{@render children?.()}</footer>
+{:else if as === "article"}
+    <article class={classes} {style} {...restProps}>{@render children?.()}</article>
+{:else if as === "aside"}
+    <aside class={classes} {style} {...restProps}>{@render children?.()}</aside>
+{:else}
+    <div class={classes} {style} {...restProps}>{@render children?.()}</div>
+{/if}

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

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { SurfaceTone } from "../types/variants.js";
+type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /**
+     * The block's fill: `neutral` (the default, the card surface), `tint`,
+     * `brand` or `accent`. On `brand` and `accent` the text, links, controls
+     * and focus rings inside take the fill's label colour.
+     */
+    tone?: SurfaceTone;
+    /** A fill the app chooses, any CSS colour. Wins over `tone`. The app must check the contrast of `fill` and `onFill`. */
+    fill?: string;
+    /** The label colour on `fill`, any CSS colour. */
+    onFill?: string;
+    /** Inner space: `none`, `sm` (16 / 16), `md` (16 inline, 24 block; the default) or `lg` (24 inline, 32 block). */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** The element: `div` by default; a landmark (`section` needs a name, `aria-label` or `aria-labelledby`). */
+    as?: "div" | "section" | "header" | "footer" | "article" | "aside";
+    /**
+     * A Block is full width and square-cornered, and does not break out of
+     * a padded parent by itself: put it outside the padded container, or
+     * give it a negative inline margin here (for example `-mx-4`).
+     */
+    class?: string;
+    children?: Snippet;
+};
+declare const Block: import("svelte").Component<Props, {}, "">;
+type Block = ReturnType<typeof Block>;
+export default Block;

package/dist/atoms/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { tick, untrack, type Snippet } from "svelte";
     import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-    import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+    import type { ButtonSize, ButtonVariant } from "../types/variants.js";
     import { cn } from "../util/cn.js";
 
     /**
@@ -28,7 +28,8 @@
         referrerpolicy?: HTMLAnchorAttributes["referrerpolicy"];
         ping?: HTMLAnchorAttributes["ping"];
         variant?: ButtonVariant;
-        size?: SizeVariant;
+        /** `xl` is 56px, for a primary action on a phone. It is a Button size only. */
+        size?: ButtonSize;
         /**
          * Shows a spinner and makes the button unavailable without taking
          * focus from it: `aria-disabled` and `aria-busy`, still a Tab stop,
@@ -117,7 +118,8 @@
 
     /**
      * One height scale, shared with Input, Select and IconButton, so controls
-     * of the same size line up in a row: 32 / 40 / 48px. It is a minimum
+     * of the same size line up in a row: 32 / 40 / 48px (and 56px, `xl`, which
+     * only Button has). It is a minimum
      * height, not a fixed one, so a label that does not fit on one line wraps
      * and the button grows; it used to paint outside the button (a long label
      * at 200% text on a phone). One line of text and the vertical padding are
@@ -136,6 +138,10 @@
         if (size === "sm") {
             return { box: "min-h-8 px-3 py-1 pointer-coarse:min-h-11", text: "text-sm", gap: "gap-2", spinner: "size-3.5" };
         }
+        // xl is 56px, like the FloatingActionButton; only Button has it.
+        if (size === "xl") {
+            return { box: "min-h-14 px-6 py-3", text: "text-base", gap: "gap-2", spinner: "size-5" };
+        }
         if (size === "lg") {
             return { box: "min-h-12 px-5 py-2", text: "text-base", gap: "gap-2", spinner: "size-4" };
         }
@@ -160,28 +166,56 @@
      */
     const BUSY_BUTTON = "bg-(--color-action-disabled) text-action-disabled-text cursor-not-allowed";
 
+    /**
+     * Forced colours (a Windows contrast theme) remove every fill, so a button
+     * told apart by its fill alone is told apart by nothing. The variants that
+     * are drawn by a fill get a 1px edge in a system colour there only;
+     * `ghost`, `link` and `text` stay bare, and `outline` has its own border.
+     * A disabled or loading button is the flat disabled fill, so it gets an
+     * edge in the disabled text colour. The `disabled:` copy beats
+     * `disabled:border-transparent`, which is the more specific rule.
+     */
+    const FORCED_EDGE = "forced-colors:border forced-colors:border-[color:ButtonBorder]";
+    const FORCED_EDGE_DISABLED_ONLY = "disabled:forced-colors:border disabled:forced-colors:border-[color:GrayText]";
+    const FORCED_EDGE_DISABLED =
+        "forced-colors:border forced-colors:border-[color:GrayText] disabled:forced-colors:border-[color:GrayText]";
+
     const disabledClass =
-        "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:no-underline disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
+        "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:no-underline disabled:bg-none disabled:inset-shadow-none disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
 
     const variantClass = $derived.by(() => {
+        // The veil of the solid fills (a top highlight and a darker bottom). A
+        // disabled button is the flat neutral pair, so it is left off rather
+        // than cleared; `disabledClass` also clears it for a button that is
+        // disabled from outside (a `fieldset`).
+        const veil = disabled ? "" : "bg-control-gradient ";
+        const veilAccent = disabled ? "" : "bg-control-gradient-accent ";
         switch (variant) {
             case "secondary":
                 return "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98] motion-reduce:active:scale-100";
+            case "tonal":
+                return "bg-action-tonal text-action-tonal active:scale-[0.98] motion-reduce:active:scale-100";
             case "danger":
-                return "bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--danger";
+                return `${veil}bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--danger`;
             case "ghost":
                 return "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active active:scale-[0.98] motion-reduce:active:scale-100 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] motion-reduce:active:scale-100";
+                return "bg-transparent border border-action-outline text-headline hover:bg-surface-hover hover:border-action-outline-hover active:bg-surface-active active:scale-[0.98] motion-reduce:active:scale-100";
             case "link":
                 // A link variant has to look like a link at rest, not only on
                 // hover — otherwise it is indistinguishable from `ghost`.
                 return "bg-transparent text-link hover:text-link-hover underline underline-offset-4 decoration-1 hover:decoration-2 px-0 focus-ring--muted";
+            case "text":
+                // A standalone action, not a link in a sentence: no underline,
+                // a stronger label, and the box of the other variants. The
+                // link role gives the primary colour, and the block's own
+                // on-colour inside `.on-brand` / `.on-accent`.
+                return "bg-transparent text-link px-2 hover:bg-surface-hover active:bg-surface-active active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--muted";
             case "accent":
-                return "bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active active:scale-[0.98] motion-reduce:active:scale-100";
+                return `${veilAccent}bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active active:scale-[0.98] motion-reduce:active:scale-100`;
             case "primary":
             default:
-                return "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98] motion-reduce:active:scale-100";
+                return `${veil}bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98] motion-reduce:active:scale-100`;
         }
     });
 
@@ -195,21 +229,24 @@
                 ? "text-action-disabled-text no-underline cursor-not-allowed"
                 : "text-link hover:text-link-hover underline underline-offset-4 decoration-1 hover:decoration-2 cursor-pointer";
             return cn(
-                `focus-ring focus-ring--muted inline rounded-control font-medium transition-colors duration-150 ${s.text} ${state} ${fullWidth || isFullWidth ? "block w-full" : ""} ${className}`,
+                `focus-ring focus-ring--muted inline rounded-button font-button transition-colors duration-(--duration-base) ${s.text} ${state} ${fullWidth || isFullWidth ? "block w-full" : ""} ${className}`,
             );
         }
         // The label wraps when it has to, balanced over its lines; the icon
-        // and the spinner stay centred beside it.
-        const base = `${layout} focus-ring items-center justify-center rounded-control text-center font-medium text-balance transition-colors duration-150 cursor-pointer select-none`;
+        // and the spinner stay centred beside it. The button is never wider
+        // than what it is in: a word that alone does not fit is hyphenated by
+        // the page's language (Z-129).
+        const base = `${layout} [max-inline-size:100%] hyphens-auto focus-ring items-center justify-center rounded-button text-center ${variant === "text" ? "font-button-strong" : "font-button"} text-balance transition-colors duration-(--duration-base) cursor-pointer select-none`;
         // `disabled:` does not match an `<a>`: a disabled link wears the
         // disabled pair itself, in place of its variant.
-        const busyBox = variant === "outline" ? "border border-transparent" : variant === "link" ? "px-0" : "";
+        const busyBox = variant === "outline" ? "border border-transparent" : variant === "link" ? "px-0" : variant === "text" ? "px-2" : "";
+        const drawnByFill = variant !== "ghost" && variant !== "link" && variant !== "text" && variant !== "outline";
         const state =
             isLink && isDisabled
-                ? DISABLED_LINK
+                ? `${DISABLED_LINK} ${FORCED_EDGE_DISABLED}`
                 : isBusy
-                  ? `${BUSY_BUTTON} ${busyBox}`
-                  : `${variantClass} ${disabledClass}`;
+                  ? `${BUSY_BUTTON} ${busyBox} ${FORCED_EDGE_DISABLED}`
+                  : `${variantClass} ${disabledClass} ${drawnByFill ? FORCED_EDGE : ""} ${FORCED_EDGE_DISABLED_ONLY}`;
         return cn(`${base} ${s.box} ${s.text} ${s.gap} ${state} ${className}`);
     });
 </script>

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

@@ -1,6 +1,6 @@
 import { type Snippet } from "svelte";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+import type { ButtonSize, ButtonVariant } from "../types/variants.js";
 /**
  * One type for the button and the link, not a union of the two elements'
  * attributes: that union is too large for TypeScript to carry through a
@@ -25,7 +25,8 @@ type Props = Omit<HTMLButtonAttributes, "class"> & {
     referrerpolicy?: HTMLAnchorAttributes["referrerpolicy"];
     ping?: HTMLAnchorAttributes["ping"];
     variant?: ButtonVariant;
-    size?: SizeVariant;
+    /** `xl` is 56px, for a primary action on a phone. It is a Button size only. */
+    size?: ButtonSize;
     /**
      * Shows a spinner and makes the button unavailable without taking
      * focus from it: `aria-disabled` and `aria-busy`, still a Tab stop,