zabi-components 8.1.0 → 9.0.0

package/dist/atoms/Heading.svelte

@@ -3,6 +3,7 @@
     import type { HTMLAttributes } from "svelte/elements";
     import { cn } from "../util/cn.js";
     import type { OnFillTone } from "../types/variants.js";
+    import { displayVoice } from "../util/display-voice.js";
 
     /** Semantic heading level — also the default visual size. */
     type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -23,6 +24,13 @@
          * `on-accent`.
          */
         tone?: "headline" | OnFillTone;
+        /**
+         * `heading` is the document heading voice. `display` is the second
+         * face (`--font-family-display`) with larger steps, for a hero, a
+         * score or a big number; its weight and tracking are the custom
+         * properties `--zabi-display-weight` and `--zabi-display-tracking`.
+         */
+        variant?: "heading" | "display";
         class?: string;
         children?: Snippet;
     };
@@ -32,6 +40,7 @@
         size,
         text = "",
         tone = "headline",
+        variant = "heading",
         class: className = "",
         children,
         ...restProps
@@ -61,8 +70,25 @@
         6: "text-base leading-6 font-semibold",
     };
 
+    /**
+     * Display steps: 60px (48 on a phone), 48 (36), 36 (30), 30, 24, 20. Weight and tracking come from
+     * `displayVoice`, so no size carries its own.
+     */
+    const displaySizeClasses: Record<HeadingLevel, string> = {
+        1: "text-5xl sm:text-6xl leading-[1.0]",
+        2: "text-4xl sm:text-5xl leading-[1.05]",
+        3: "text-3xl sm:text-4xl leading-[1.1]",
+        4: "text-3xl leading-[1.2]",
+        5: "text-2xl leading-[1.2]",
+        6: "text-xl leading-[1.2]",
+    };
+
     const headingClasses = $derived(
-        cn(`${toneClasses[tone] ?? toneClasses.headline} ${sizeClasses[visualSize] ?? sizeClasses[6]} ${className}`),
+        variant === "display"
+            ? cn(
+                  `${toneClasses[tone] ?? toneClasses.headline} font-display text-balance ${displayVoice} ${displaySizeClasses[visualSize] ?? displaySizeClasses[6]} ${className}`,
+              )
+            : cn(`${toneClasses[tone] ?? toneClasses.headline} ${sizeClasses[visualSize] ?? sizeClasses[6]} ${className}`),
     );
 </script>
 

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

@@ -19,6 +19,13 @@ type Props = Omit<HTMLAttributes<HTMLHeadingElement>, "class"> & {
      * `on-accent`.
      */
     tone?: "headline" | OnFillTone;
+    /**
+     * `heading` is the document heading voice. `display` is the second
+     * face (`--font-family-display`) with larger steps, for a hero, a
+     * score or a big number; its weight and tracking are the custom
+     * properties `--zabi-display-weight` and `--zabi-display-tracking`.
+     */
+    variant?: "heading" | "display";
     class?: string;
     children?: Snippet;
 };

package/dist/atoms/IconButton.svelte

@@ -3,6 +3,9 @@
     import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
     import type { ButtonVariant, SizeVariant } from "../types/variants.js";
     import { cn } from "../util/cn.js";
+    import { isDevBuild } from "../util/app-shell.js";
+    import { badgeText, defaultBadgeLabel } from "../util/bottom-tab-bar.js";
+    import Badge from "./Badge.svelte";
 
     /** The shared scale plus `xs`, which only the icon button has. */
     type IconButtonSize = SizeVariant | "xs";
@@ -56,6 +59,19 @@
         loading?: boolean;
         /** Required for icon-only usage (no visible text). */
         label?: string;
+        /**
+         * A count drawn on the button, in the attention colour, inside the
+         * button's own box (so a bar or an `overflow` ancestor cannot cut it).
+         * Nothing is drawn for 0, a negative number or when it is left out;
+         * while `loading` it is hidden. At `xs` and `sm` there is no room for
+         * a number: a dot is drawn instead. Needs `label`: the accessible name
+         * becomes the label, a comma and `countLabel(count)`.
+         */
+        count?: number;
+        /** What the count adds to the accessible name, after the label. Default: "3 new". */
+        countLabel?: (count: number) => string;
+        /** Above this the badge reads `99+`. The accessible name keeps the real count. */
+        countMax?: number;
         class?: string;
         children?: Snippet;
     };
@@ -70,6 +86,9 @@
         type,
         href,
         label = "",
+        count,
+        countLabel = defaultBadgeLabel,
+        countMax = 99,
         class: className = "",
         onclick,
         children,
@@ -77,6 +96,22 @@
     }: Props = $props();
 
     const isDisabled = $derived(!!disabled || loading);
+
+    /** A count is drawn only for a positive number, and not while loading. */
+    const hasCount = $derived(typeof count === "number" && count > 0);
+    const showCount = $derived(hasCount && !loading);
+    /** `xs` and `sm` have no room for a number beside the icon: a dot. */
+    const countAsDot = $derived(size === "xs" || size === "sm");
+    const accessibleName = $derived(
+        showCount && label ? `${label}, ${countLabel(count as number)}` : label || undefined,
+    );
+
+    $effect(() => {
+        if (!isDevBuild() || !hasCount || label) return;
+        console.warn(
+            "[zabi-components] IconButton: `count` needs a `label`; without it the count has no accessible name.",
+        );
+    });
     /**
      * Loading without `disabled`: unavailable, and still where focus is.
      *
@@ -157,13 +192,18 @@
     });
 
     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";
+        "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:bg-none disabled:inset-shadow-none disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
 
     const isDangerTone = $derived(
         tone === "danger" && (variant === "ghost" || variant === "outline"),
     );
 
     const variantClass = $derived.by(() => {
+        // The veil of the solid fills, as on Button. Not when disabled, and
+        // not on a toggled-on button (`pressedClass`): that holds the pressed
+        // fill flat, with its outline as the shape.
+        const veil = disabled || (isToggle && pressed) ? "" : "bg-control-gradient ";
+        const veilAccent = disabled || (isToggle && pressed) ? "" : "bg-control-gradient-accent ";
         if (isDangerTone) {
             const fill =
                 "text-error hover:bg-action-danger-subtle active:bg-action-danger-subtle-hover active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--danger";
@@ -174,19 +214,22 @@
         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":
+            case "text":
                 return "bg-transparent text-link hover:text-link-hover 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`;
         }
     });
 
@@ -215,7 +258,12 @@
             case "ghost":
             case "outline":
             case "link":
+            case "text":
                 return `bg-action-primary-subtle text-link hover:bg-action-primary-subtle-hover active:bg-action-primary-subtle-active ${outline}`;
+            case "tonal":
+                // The tonal fill keeps its own hover and pressed steps; the
+                // outline is what shows it is on.
+                return outline;
             case "accent":
                 return `bg-accent-active hover:bg-accent-active ${outline}`;
             case "primary":
@@ -226,7 +274,7 @@
 
     const buttonClasses = $derived.by(() => {
         const base =
-            "inline-flex focus-ring items-center justify-center rounded-control shrink-0 transition-colors duration-150 cursor-pointer select-none";
+            "inline-flex focus-ring items-center justify-center rounded-control shrink-0 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. So does a loading
         // button, which is not `:disabled` (it keeps focus): with the
@@ -236,7 +284,8 @@
             isDisabled && (isLink || isBusy)
                 ? "bg-(--color-action-disabled) text-action-disabled-text border border-transparent cursor-not-allowed"
                 : `${variantClass} ${isLink ? "" : pressedClass} ${disabledClass}`;
-        return cn(`${base} ${sizeClass.box} ${state} ${className}`);
+        // Relative only for the badge: it is placed against the button's own box.
+        return cn(`${base} ${showCount ? "relative " : ""}${sizeClass.box} ${state} ${className}`);
     });
 </script>
 
@@ -249,6 +298,29 @@
     {:else if children}
         {@render children()}
     {/if}
+    {#if showCount}
+        <!-- Inside the box, in its upper end corner, whatever the size: the box
+        edge is the outer edge, so nothing outside it can cut it. Decorative; the
+        name carries the count. -->
+        {#if countAsDot}
+            <span
+                class="pointer-events-none absolute end-0.5 top-0.5 size-2 rounded-full bg-error"
+                aria-hidden="true"
+                data-icon-button-count="dot"
+            ></span>
+        {:else}
+            <Badge
+                size="sm"
+                emphasis="solid"
+                variant="error"
+                aria-hidden="true"
+                data-icon-button-count="badge"
+                class="pointer-events-none absolute end-0.5 top-0.5 h-[18px] min-h-[18px] min-w-[18px] px-[5px] py-0 text-[11px] leading-[18px] whitespace-nowrap"
+            >
+                {badgeText(count as number, countMax)}
+            </Badge>
+        {/if}
+    {/if}
 {/snippet}
 
 {#if isLink}
@@ -261,7 +333,7 @@
         role={isDisabled ? "link" : undefined}
         aria-disabled={isDisabled ? "true" : undefined}
         aria-busy={loading ? "true" : undefined}
-        aria-label={label || undefined}
+        aria-label={accessibleName}
         {...(restProps as unknown as HTMLAnchorAttributes)}
         onclick={handleLinkClick}
     >
@@ -276,7 +348,7 @@
         aria-busy={loading ? "true" : undefined}
         aria-pressed={pressed}
         onclick={handleClick}
-        aria-label={label || undefined}
+        aria-label={accessibleName}
         {...restProps}
     >
         {@render content()}

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

@@ -52,6 +52,19 @@ type Props = Omit<HTMLButtonAttributes, "class"> & {
     loading?: boolean;
     /** Required for icon-only usage (no visible text). */
     label?: string;
+    /**
+     * A count drawn on the button, in the attention colour, inside the
+     * button's own box (so a bar or an `overflow` ancestor cannot cut it).
+     * Nothing is drawn for 0, a negative number or when it is left out;
+     * while `loading` it is hidden. At `xs` and `sm` there is no room for
+     * a number: a dot is drawn instead. Needs `label`: the accessible name
+     * becomes the label, a comma and `countLabel(count)`.
+     */
+    count?: number;
+    /** What the count adds to the accessible name, after the label. Default: "3 new". */
+    countLabel?: (count: number) => string;
+    /** Above this the badge reads `99+`. The accessible name keeps the real count. */
+    countMax?: number;
     class?: string;
     children?: Snippet;
 };

package/dist/atoms/Input.svelte

@@ -61,8 +61,9 @@
         /** Drawn inside the field, after the text and before the loading spinner's place. */
         trailing?: Snippet;
         /**
-         * With `type="password"`: adds a button at the end of the field that
-         * shows the password as text, and hides it again. Ignored for other types.
+         * With `type="password"`: a button at the end of the field that shows
+         * the password as text, and hides it again. On by default; `false`
+         * leaves it out. Ignored for other types.
          */
         revealable?: boolean;
         /**
@@ -96,7 +97,7 @@
         error = "",
         leading,
         trailing,
-        revealable = false,
+        revealable = true,
         revealLabel: revealLabelGiven,
         oninput,
         onblur,
@@ -254,9 +255,13 @@
          * field regardless of the layout around it.
          */
         const baseClasses =
-            "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";
+            "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 placeholder-shown:text-ellipsis text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed";
 
-        return cn(`${baseClasses} ${sizeStyles.box} ${spinnerPad} ${sizeStyles.text} ${variantClass()} ${className}`);
+        // A search field that brings its own clear button in `trailing` would
+        // show two crosses: the browser's is taken away.
+        const nativeClear = trailing ? "[&::-webkit-search-cancel-button]:appearance-none" : "";
+
+        return cn(`${baseClasses} ${sizeStyles.box} ${spinnerPad} ${sizeStyles.text} ${variantClass()} ${nativeClear} ${className}`);
     });
 
     const labelClasses = $derived(

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

@@ -35,8 +35,9 @@ type Props = Omit<HTMLInputAttributes, "class" | "size" | "value" | "type" | "id
     /** Drawn inside the field, after the text and before the loading spinner's place. */
     trailing?: Snippet;
     /**
-     * With `type="password"`: adds a button at the end of the field that
-     * shows the password as text, and hides it again. Ignored for other types.
+     * With `type="password"`: a button at the end of the field that shows
+     * the password as text, and hides it again. On by default; `false`
+     * leaves it out. Ignored for other types.
      */
     revealable?: boolean;
     /**

package/dist/atoms/List.svelte

@@ -34,8 +34,9 @@
     const listClasses = $derived(
         // The same radius as its rows. Not `overflow-hidden`: the rows fill
         // the list edge to edge, so clipping here cut a row's focus ring off
-        // on every side but the gap to the next row.
-        cn(`space-y-1 rounded-[var(--zabi-list-row-radius,var(--radius-container))] ${className}`),
+        // on every side but the gap to the next row. `list-dividers` draws the
+        // hairline in the gap between rows (app.css).
+        cn(`list-dividers space-y-1 rounded-[var(--zabi-list-row-radius,var(--radius-container))] ${className}`),
     );
 </script>
 

package/dist/atoms/ListItem.svelte

@@ -13,6 +13,12 @@
         avatar?: string;
         /** `avatar` alt text; `""` if decorative. */
         avatarAlt?: string;
+        /**
+         * Leading picture drawn in the round, in place of an address: an
+         * inline SVG. Wins over `avatar` and `icon`. Decorative unless
+         * `avatarAlt` is set, which then names it.
+         */
+        avatarPicture?: Snippet;
         target?: "_self" | "_blank" | "_parent" | "_top";
         rel?: string;
         disabled?: boolean;
@@ -52,9 +58,14 @@
         const baseClasses =
             // The container radius, or the one a `.list-group` shell around the list
         // hands down so the row is concentric with it (see app.css).
-        "group flex w-full items-center gap-3 rounded-[var(--zabi-list-row-radius,var(--radius-container))] border px-4 py-3 pr-5 text-left transition-all duration-150";
+        // The 1px border is kept so the row's height and text do not move, but
+        // it is transparent: rows are told apart by the divider between them
+        // (app.css), and a bordered row inside a bordered shell was two
+        // outlines. `--zabi-list-row-border-color` puts the 8.1 edge back.
+        "group flex w-full items-center gap-3 rounded-[var(--zabi-list-row-radius,var(--radius-container))] border px-4 py-3 pr-5 text-left transition-colors duration-(--duration-base)";
+        const edge = "border-[color:var(--zabi-list-row-border-color,transparent)]";
         if (!interactive) {
-            const tone = selected ? "bg-action-primary-subtle border-action-primary" : "border-border";
+            const tone = selected ? "bg-action-primary-subtle border-action-primary" : edge;
             return `${baseClasses} ${tone} ${item.disabled ? "opacity-50" : ""}`.trim();
         }
         const cursorClasses = item.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer";
@@ -69,8 +80,8 @@
         const stateClasses = selected
             ? "bg-action-primary-subtle border-action-primary active:bg-action-primary-subtle-active"
             : item.disabled
-              ? "border-border"
-              : "border-border hover:bg-surface-hover focus-visible:bg-surface-hover active:bg-surface-active";
+              ? edge
+              : `${edge} hover:bg-surface-hover focus-visible:bg-surface-hover active:bg-surface-active`;
         return `focus-ring ${baseClasses} ${cursorClasses} ${stateClasses}`.trim();
     });
 
@@ -96,7 +107,18 @@
 </script>
 
 {#snippet rowContent()}
-    {#if item.avatar}
+    {#if item.avatarPicture}
+        <ListItemLeading class="rounded-full">
+            <span
+                class="flex size-full items-center justify-center"
+                role={item.avatarAlt ? "img" : undefined}
+                aria-label={item.avatarAlt || undefined}
+                aria-hidden={item.avatarAlt ? undefined : "true"}
+            >
+                {@render item.avatarPicture()}
+            </span>
+        </ListItemLeading>
+    {:else if item.avatar}
         <ListItemLeading class="rounded-full">
             <img
                 src={item.avatar}
@@ -130,7 +152,7 @@
     {#if showArrow && interactive}
         <ArrowRight
             size={16}
-            class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-1 group-focus-visible:translate-x-1"
+            class="shrink-0 text-description transition-transform duration-(--duration-base) group-hover:translate-x-1 group-focus-visible:translate-x-1"
             aria-hidden="true"
         />
     {/if}
@@ -145,6 +167,7 @@
         aria-disabled={item.disabled ? "true" : undefined}
         tabindex={item.disabled ? -1 : undefined}
         class={itemClasses}
+        data-selected={selected ? "true" : undefined}
         onclick={handleItemClick}
         {...restProps}
     >
@@ -154,6 +177,7 @@
     <button
         type="button"
         class={itemClasses}
+        data-selected={selected ? "true" : undefined}
         disabled={item.disabled}
         onclick={handleItemClick}
         {...restProps}
@@ -164,7 +188,7 @@
     <!-- A plain row has no role, so `aria-disabled` on it would say nothing
     to anyone: a disabled one is only drawn dimmed. There is nothing in it to
     press, enabled or not. -->
-    <div class={itemClasses} {...restProps}>
+    <div class={itemClasses} data-selected={selected ? "true" : undefined} {...restProps}>
         {@render rowContent()}
     </div>
 {/if}

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

@@ -12,6 +12,12 @@ export interface ListItemData {
     avatar?: string;
     /** `avatar` alt text; `""` if decorative. */
     avatarAlt?: string;
+    /**
+     * Leading picture drawn in the round, in place of an address: an
+     * inline SVG. Wins over `avatar` and `icon`. Decorative unless
+     * `avatarAlt` is set, which then names it.
+     */
+    avatarPicture?: Snippet;
     target?: "_self" | "_blank" | "_parent" | "_top";
     rel?: string;
     disabled?: boolean;