zabi-components 8.1.0 → 9.0.0

package/dist/util/chart.js

@@ -0,0 +1,305 @@
+/**
+ * What the four charts share: the series colours, a number formatter, a
+ * linear scale with round ticks, and the few path builders. Plain arithmetic
+ * that writes SVG; there is no chart library under it.
+ */
+/**
+ * `glass` on a chart: the library's thick material (the one a Tooltip and a
+ * sheet are made of, the level that carries description and caption text),
+ * the container corner and room inside it. `on-surface` gives the text its
+ * theme colours back when the chart stands in a brand or accent block. Every
+ * fallback of the material (reduced transparency, more contrast, forced
+ * colours, no backdrop-filter, data-materials="opaque") comes with the class.
+ */
+export const CHART_GLASS = "material-thick on-surface rounded-container p-4";
+const NAMED = {
+    primary: "var(--color-action-primary)",
+    accent: "var(--color-accent)",
+    success: "var(--color-success)",
+    warning: "var(--color-warning)",
+    error: "var(--color-error)",
+    info: "var(--color-info)",
+    neutral: "var(--color-neutral)",
+};
+/**
+ * The six series colours, in order. Each is a custom property an app may set
+ * on the chart or on anything around it (read with a fallback, declared
+ * nowhere), and falls back to a step of the theme's own ramps, so it follows
+ * light and dark and the app's brand.
+ *
+ * They are the colours the rest of the library is made of: the action blue
+ * a `Progress` fills with, the accent, a deep step of each, and the neutral
+ * grey. Two hues and a grey, told apart by lightness as much as by hue,
+ * which is what a reader who does not see red and green needs. None is a
+ * status colour. The sixth is the one colour from outside those ramps (the
+ * brand turned toward red), for the rare chart with six series.
+ */
+export const CHART_SERIES_COLORS = [
+    "var(--zabi-chart-1, var(--color-action-primary))",
+    "var(--zabi-chart-2, var(--color-accent-500))",
+    "var(--zabi-chart-3, var(--color-brand-900))",
+    "var(--zabi-chart-4, var(--color-accent-700))",
+    "var(--zabi-chart-5, var(--color-base-500))",
+    "var(--zabi-chart-6, color-mix(in oklch, var(--color-brand-700), var(--color-error-700)))",
+];
+const slot = (index) => ((index % 6) + 6) % 6;
+/** The CSS colour of a series: its own if it names one, else the one of its place (they repeat after six). */
+export function chartColor(color, index) {
+    if (!color)
+        return CHART_SERIES_COLORS[slot(index)];
+    return Object.prototype.hasOwnProperty.call(NAMED, color) ? NAMED[color] : color;
+}
+/** The series colour a theme colour sits nearest to: one chart does not show both. */
+const NEAREST = new Map([
+    ["primary", 0],
+    ["info", 0],
+    ["accent", 1],
+    ["success", 3],
+    ["neutral", 4],
+]);
+/**
+ * The colours of a whole chart, for when named colours and places mix.
+ * A series with a `color` gets it. One without keeps the series colour of
+ * its place, unless a named colour in the same chart sits next to that one
+ * (`success` beside the deep accent, `neutral` beside the grey): then it moves on
+ * to the next series colour that is free.
+ */
+export function chartColors(colors) {
+    const taken = new Set();
+    for (const color of colors) {
+        const near = color ? NEAREST.get(color) : undefined;
+        if (near !== undefined)
+            taken.add(near);
+    }
+    colors.forEach((color, index) => {
+        if (!color && !taken.has(slot(index)))
+            taken.add(slot(index));
+    });
+    const moved = new Set();
+    return colors.map((color, index) => {
+        if (color)
+            return chartColor(color, index);
+        const own = slot(index);
+        const clash = colors.some((other) => other && NEAREST.get(other) === own);
+        if (!clash)
+            return CHART_SERIES_COLORS[own];
+        for (let step = 1; step < 6; step++) {
+            const next = slot(own + step);
+            if (!taken.has(next) && !moved.has(next)) {
+                moved.add(next);
+                return CHART_SERIES_COLORS[next];
+            }
+        }
+        return CHART_SERIES_COLORS[own];
+    });
+}
+/**
+ * `"number"` is the locale's plain number. `"percent"` reads the value as
+ * already a percentage (72 is "72 %", not 7,200 %). Without a `locale` the
+ * runtime's is used, which on a server may not be the reader's: pass one.
+ */
+export function chartFormatter(format, locale) {
+    if (typeof format === "function")
+        return format;
+    const options = format === "percent"
+        ? { style: "unit", unit: "percent", maximumFractionDigits: 1 }
+        : { maximumFractionDigits: 2 };
+    let formatter;
+    try {
+        formatter = new Intl.NumberFormat(locale, options);
+    }
+    catch {
+        formatter = new Intl.NumberFormat(undefined, options);
+    }
+    return (value) => formatter.format(value);
+}
+/** A share of the whole (0 to 1) as a whole percentage. */
+export function shareFormatter(locale) {
+    let formatter;
+    try {
+        formatter = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+    }
+    catch {
+        formatter = new Intl.NumberFormat(undefined, { style: "percent", maximumFractionDigits: 0 });
+    }
+    return (share) => formatter.format(share);
+}
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+/** 1, 2 or 5 times a power of ten: the one nearest to `target` intervals. */
+export function niceStep(range, target = 4) {
+    if (!(range > 0))
+        return 1;
+    const raw = range / target;
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const unit = raw / magnitude;
+    return (unit < 1.5 ? 1 : unit < 3.5 ? 2 : unit < 7.5 ? 5 : 10) * magnitude;
+}
+/**
+ * The value axis. A `min` or `max` that is given is kept exactly; one that is
+ * not is rounded outward to a tick. `zero` keeps zero on the axis (bars).
+ */
+export function chartScale(values, options = {}) {
+    const data = values.filter(finite);
+    let low = data.length ? Math.min(...data) : 0;
+    let high = data.length ? Math.max(...data) : 1;
+    if (options.zero) {
+        low = Math.min(0, low);
+        high = Math.max(0, high);
+    }
+    const fixedMin = finite(options.min);
+    const fixedMax = finite(options.max);
+    if (fixedMin)
+        low = options.min;
+    if (fixedMax)
+        high = options.max;
+    if (!(high > low)) {
+        if (fixedMax && !fixedMin)
+            low = high - 1;
+        else
+            high = low + 1;
+    }
+    const step = niceStep(high - low);
+    if (!fixedMin)
+        low = Math.floor(low / step) * step;
+    if (!fixedMax)
+        high = Math.ceil(high / step) * step;
+    const ticks = [];
+    for (let tick = Math.ceil(low / step - 1e-9) * step; tick <= high + step * 1e-9; tick += step) {
+        ticks.push(Number(tick.toPrecision(12)));
+    }
+    return { min: Number(low.toPrecision(12)), max: Number(high.toPrecision(12)), ticks };
+}
+/** Every how-manyth x label fits: 1 is all of them. */
+export function labelEvery(labels, available, charWidth = 7) {
+    if (!labels.length || !(available > 0))
+        return 1;
+    const widest = Math.max(...labels.map((label) => label.length)) * charWidth + 12;
+    return Math.max(1, Math.ceil((widest * labels.length) / available));
+}
+const round = (value) => Math.round(value * 100) / 100;
+/** A line through the points, broken where one is missing. */
+export function linePath(points) {
+    let path = "";
+    let pen = false;
+    for (const point of points) {
+        if (!point) {
+            pen = false;
+            continue;
+        }
+        path += `${pen ? "L" : "M"}${round(point.x)} ${round(point.y)}`;
+        pen = true;
+    }
+    return path;
+}
+/** An upright bar from `from` to `to` (y), rounded at the `to` end and square where it stands on the zero line. */
+export function barPath(x, width, from, to, radius) {
+    const height = Math.abs(to - from);
+    const r = round(Math.max(0, Math.min(radius, width / 2, height)));
+    const [left, base, w] = [round(x), round(from), round(width)];
+    const up = to < from ? -1 : 1;
+    const side = round(height - r);
+    if (!(height > 0))
+        return "";
+    return `M${left} ${base}v${up * side}a${r} ${r} 0 0 ${up < 0 ? 1 : 0} ${r} ${up * r}h${round(w - 2 * r)}a${r} ${r} 0 0 ${up < 0 ? 1 : 0} ${r} ${-up * r}v${-up * side}Z`;
+}
+export const CHART_MARKERS = ["circle", "square", "diamond", "triangle"];
+/** The marker of a series, so two lines differ by more than colour (they repeat after four). */
+export function chartMarker(index) {
+    return CHART_MARKERS[((index % 4) + 4) % 4];
+}
+/** A marker centred on a point, as a path. */
+export function markerPath(shape, x, y, r) {
+    const [cx, cy] = [round(x), round(y)];
+    switch (shape) {
+        case "square": {
+            const side = round(r * 0.9);
+            return `M${cx - side} ${cy - side}h${side * 2}v${side * 2}h${-side * 2}Z`;
+        }
+        case "diamond": {
+            const reach = round(r * 1.25);
+            return `M${cx} ${cy - reach}L${cx + reach} ${cy}L${cx} ${cy + reach}L${cx - reach} ${cy}Z`;
+        }
+        case "triangle": {
+            const reach = round(r * 1.2);
+            return `M${cx} ${cy - reach}L${cx + reach} ${round(cy + reach * 0.8)}L${cx - reach} ${round(cy + reach * 0.8)}Z`;
+        }
+        default:
+            return `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0Z`;
+    }
+}
+/** The slices in the order given. A value that is not a positive number takes no room. */
+export function pieSlices(data) {
+    const values = data.map((datum) => (finite(datum.value) && datum.value > 0 ? datum.value : 0));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    let angle = 0;
+    return data.map((datum, index) => {
+        const share = total > 0 ? values[index] / total : 0;
+        const start = angle;
+        angle += share * Math.PI * 2;
+        return { index, label: datum.label, value: datum.value, share, start, end: angle };
+    });
+}
+const onCircle = (cx, cy, r, angle) => `${round(cx + r * Math.sin(angle))} ${round(cy - r * Math.cos(angle))}`;
+/** A slice of a pie, or of a ring when `inner` is above zero. */
+export function slicePath(cx, cy, outer, inner, start, end) {
+    const sweep = end - start;
+    if (!(sweep > 0))
+        return "";
+    if (sweep >= Math.PI * 2 - 1e-6) {
+        // A whole turn has no arc of its own: two halves.
+        const half = start + Math.PI;
+        const ring = (r, clockwise) => `M${onCircle(cx, cy, r, start)}A${r} ${r} 0 1 ${clockwise} ${onCircle(cx, cy, r, half)}A${r} ${r} 0 1 ${clockwise} ${onCircle(cx, cy, r, start)}Z`;
+        return inner > 0 ? ring(outer, 1) + ring(inner, 0) : ring(outer, 1);
+    }
+    const large = sweep > Math.PI ? 1 : 0;
+    const arc = `M${onCircle(cx, cy, outer, start)}A${outer} ${outer} 0 ${large} 1 ${onCircle(cx, cy, outer, end)}`;
+    if (!(inner > 0))
+        return `${arc}L${round(cx)} ${round(cy)}Z`;
+    return `${arc}L${onCircle(cx, cy, inner, end)}A${inner} ${inner} 0 ${large} 0 ${onCircle(cx, cy, inner, start)}Z`;
+}
+/** How much larger than 16px the reader's text is: chart text is set in rem, and the room for it follows. */
+export function chartTextScale() {
+    if (typeof document === "undefined" || typeof getComputedStyle !== "function")
+        return 1;
+    const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return size > 0 ? size / 16 : 1;
+}
+/**
+ * Reports the width of the widest `text` inside the node, as drawn, now and
+ * whenever what it is given changes. The value axis takes its room from
+ * this, not from a count of characters. Where text cannot be measured
+ * nothing is reported and the estimate stands.
+ */
+export function widestText(node, options) {
+    let report = options.onwidth;
+    const measure = () => {
+        let widest = 0;
+        for (const text of node.querySelectorAll("text")) {
+            if (typeof text.getComputedTextLength !== "function")
+                return;
+            widest = Math.max(widest, text.getComputedTextLength());
+        }
+        if (widest > 0)
+            report(Math.ceil(widest));
+    };
+    measure();
+    return {
+        update(next) {
+            report = next.onwidth;
+            measure();
+        },
+    };
+}
+/**
+ * Reports the element's width now and whenever it changes: the charts are
+ * drawn at the width of their container, in real pixels, so text is never
+ * scaled. Where there is no `ResizeObserver` the width is read once.
+ */
+export function measureWidth(node, onwidth) {
+    onwidth(node.clientWidth);
+    if (typeof ResizeObserver === "undefined")
+        return {};
+    const observer = new ResizeObserver(() => onwidth(node.clientWidth));
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+}

package/dist/util/chip.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Chip and ChipGroup: what they share, and the arithmetic of the one-row
+ * layout.
+ *
+ * The scroll logic is pure, so it can be tested with made-up metrics: jsdom
+ * has no layout. The component reads the real ones and passes them in.
+ */
+export type ChipGroupType = "radio" | "checkbox";
+export type ChipGroupLayout = "wrap" | "row";
+export type ChipGroupEdge = "fade" | "none";
+/** What a ChipGroup hands to the chips (and groups) inside it. */
+export interface ChipGroupContext {
+    /** Without a type the group is layout only. */
+    readonly type: ChipGroupType | undefined;
+    readonly name: string | undefined;
+    readonly layout: ChipGroupLayout;
+    readonly disabled: boolean;
+    /** Whether the chip with this value is selected, by the group's `value`. */
+    isSelected(value: string): boolean;
+    /**
+     * The chip with this value was checked or unchecked. `report` is true for
+     * a person's change (the group's `onchange` hears it) and false for one
+     * taken in by a binding on hydration, which is reported once afterwards.
+     */
+    change(value: string, checked: boolean, report: boolean): void;
+    /** The value a radio group holds, for `bind:group`. */
+    readonly radioValue: string | undefined;
+    /** A form reset emptied a radio group. */
+    restore(): void;
+}
+export declare const CHIP_GROUP_CONTEXT_KEY: unique symbol;
+/** The gap between chips, and the margin that keeps a revealed chip off the edge. */
+export declare const CHIP_GAP = 8;
+/** The next value of a checkbox group when `value` is checked or unchecked. Order is kept. */
+export declare function toggleValue(current: readonly string[] | undefined, value: string, checked: boolean): string[];
+export interface RowMetrics {
+    /** `scrollLeft`: 0 at the start, negative towards the end in a right-to-left row. */
+    scrollLeft: number;
+    scrollWidth: number;
+    clientWidth: number;
+    rtl: boolean;
+}
+export interface RowOverflow {
+    /** More chips are hidden before the first visible one. */
+    start: boolean;
+    /** More chips are hidden after the last visible one. */
+    end: boolean;
+}
+/** Which sides of the row have chips out of view. Start and end follow the direction. */
+export declare function measureRowOverflow(metrics: RowMetrics): RowOverflow;
+export interface Span {
+    left: number;
+    right: number;
+}
+/**
+ * The `scrollLeft` that brings `item` fully into `box` with `margin` to spare,
+ * or the current one if it is in view already. Both spans are in the same
+ * coordinates (the viewport's). The result stays inside what the row can
+ * scroll. An item wider than the box is lined up with its start edge.
+ */
+export declare function scrollLeftToReveal(metrics: RowMetrics, box: Span, item: Span, margin?: number): number;
+/** The first chosen chip in a row: a link, a toggle button or a checked input. */
+export declare const SELECTED_CHIP_SELECTOR = "[aria-current]:not([aria-current=\"false\"]), [aria-pressed=\"true\"], input:checked";
+/** The element to bring into view for a selected chip: the label around an input, else the element. */
+export declare function chipBox(selected: Element): Element;

package/dist/util/chip.js

@@ -0,0 +1,58 @@
+/**
+ * Chip and ChipGroup: what they share, and the arithmetic of the one-row
+ * layout.
+ *
+ * The scroll logic is pure, so it can be tested with made-up metrics: jsdom
+ * has no layout. The component reads the real ones and passes them in.
+ */
+export const CHIP_GROUP_CONTEXT_KEY = Symbol("zabi-chip-group");
+/** The gap between chips, and the margin that keeps a revealed chip off the edge. */
+export const CHIP_GAP = 8;
+/** The next value of a checkbox group when `value` is checked or unchecked. Order is kept. */
+export function toggleValue(current, value, checked) {
+    const list = current ?? [];
+    const has = list.includes(value);
+    if (checked)
+        return has ? [...list] : [...list, value];
+    return has ? list.filter((item) => item !== value) : [...list];
+}
+/** Fractional scroll positions: less than this from an edge counts as at it. */
+const TOLERANCE = 1;
+/** Which sides of the row have chips out of view. Start and end follow the direction. */
+export function measureRowOverflow(metrics) {
+    const hidden = metrics.scrollWidth - metrics.clientWidth;
+    if (hidden <= TOLERANCE)
+        return { start: false, end: false };
+    // The distance from the start edge: `scrollLeft` itself, or its negative in a
+    // right-to-left row. The wrong sign is rubber-banding, and counts as none.
+    const fromStart = Math.min(Math.max(0, metrics.rtl ? -metrics.scrollLeft : metrics.scrollLeft), hidden);
+    return { start: fromStart > TOLERANCE, end: fromStart < hidden - TOLERANCE };
+}
+/**
+ * The `scrollLeft` that brings `item` fully into `box` with `margin` to spare,
+ * or the current one if it is in view already. Both spans are in the same
+ * coordinates (the viewport's). The result stays inside what the row can
+ * scroll. An item wider than the box is lined up with its start edge.
+ */
+export function scrollLeftToReveal(metrics, box, item, margin = CHIP_GAP) {
+    const hidden = Math.max(0, metrics.scrollWidth - metrics.clientWidth);
+    let delta = 0;
+    const tooWide = item.right - item.left > box.right - box.left - margin * 2;
+    if (tooWide) {
+        delta = metrics.rtl ? item.right - box.right + margin : item.left - box.left - margin;
+    }
+    else if (item.left < box.left + margin) {
+        delta = item.left - box.left - margin;
+    }
+    else if (item.right > box.right - margin) {
+        delta = item.right - box.right + margin;
+    }
+    const next = metrics.scrollLeft + delta;
+    return metrics.rtl ? Math.min(0, Math.max(-hidden, next)) : Math.min(hidden, Math.max(0, next));
+}
+/** The first chosen chip in a row: a link, a toggle button or a checked input. */
+export const SELECTED_CHIP_SELECTOR = '[aria-current]:not([aria-current="false"]), [aria-pressed="true"], input:checked';
+/** The element to bring into view for a selected chip: the label around an input, else the element. */
+export function chipBox(selected) {
+    return selected instanceof HTMLInputElement ? (selected.closest("label") ?? selected) : selected;
+}

package/dist/util/cn.js

@@ -20,7 +20,9 @@ import { extendTailwindMerge } from "tailwind-merge";
  * role names, not scale values, so they have to be declared or tailwind-merge
  * keeps both and we are back to stylesheet order deciding.
  */
-const RADIUS_ROLES = ["control", "container", "overlay", "pill"];
+// `button` is the control corner an app can set apart from its fields
+// (`rounded-button`, src/app.css), so a call-site `rounded-full` still beats it.
+const RADIUS_ROLES = ["control", "button", "container", "overlay", "pill"];
 /**
  * Every corner group tailwind-merge knows about, so `rounded-t-overlay` on a
  * sheet is still beaten by a call-site `rounded-t-control`. Declaring only the
@@ -32,9 +34,33 @@ const RADIUS_GROUPS = [
     "rounded-ss", "rounded-se", "rounded-ee", "rounded-es",
     "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl",
 ];
+/**
+ * The named spacing steps (`--spacing-xs` to `--spacing-2xl`, src/app.css).
+ * tailwind-merge knows the numeric scale only, so `p-xs p-sm` kept both and
+ * stylesheet order picked the padding. Declared as theme spacing, they count
+ * in every group that takes a spacing value: padding, margin, gap, inset,
+ * size, scroll padding and the rest.
+ */
+const SPACING_STEPS = ["xs", "sm", "md", "lg", "xl", "2xl"];
 const twMerge = extendTailwindMerge({
     extend: {
-        classGroups: Object.fromEntries(RADIUS_GROUPS.map((group) => [group, [{ [group]: RADIUS_ROLES }]])),
+        theme: {
+            spacing: SPACING_STEPS,
+            // The two theme faces (`font-heading`, `font-display`, from --font-heading
+            // and --font-display). tailwind-merge already reads any plain name after
+            // `font-` as a family; they are listed so that stays true if that rule
+            // narrows to the weights.
+            font: ["heading", "display"],
+        },
+        classGroups: {
+            ...Object.fromEntries(RADIUS_GROUPS.map((group) => [group, [{ [group]: RADIUS_ROLES }]])),
+            // The control veils are background images, not colours: without
+            // this they would delete the fill beside them (`bg-action-primary`)
+            // as a conflicting `bg-*`, and the fill would be gone.
+            "bg-image": [{ bg: ["control-gradient", "control-gradient-accent"] }],
+            // Button's label weights, so a call-site `font-bold` still wins.
+            "font-weight": [{ font: ["button", "button-strong"] }],
+        },
     },
 });
 /**

package/dist/util/code-field.d.ts

@@ -0,0 +1,62 @@
+/** Types and pure helpers for `CodeField`. Kept out of the component so they can be tested without a DOM. */
+/** `numeric`: digits only, the numeric keyboard. `alphanumeric`: digits and letters. */
+export type CodeFieldMode = "numeric" | "alphanumeric";
+/** Every built-in string. Pass a partial object to `strings` to translate. */
+export interface CodeFieldStrings {
+    /** The field's name when no `label` is given. */
+    label: string;
+    /** Read after the name, so a screen reader user knows how long the code is ("6 digits"). */
+    description: (length: number, mode: CodeFieldMode) => string;
+}
+export declare const DEFAULT_CODE_FIELD_STRINGS: CodeFieldStrings;
+/** The fewest and the most places a code field draws. */
+export declare const CODE_FIELD_LENGTH_MAX = 12;
+/** `length` as a whole number from 1 to 12; 6 for anything that is not a number. */
+export declare function codeLength(length: number | undefined): number;
+/** Whether one character belongs in a code of this mode. */
+export declare function isCodeChar(char: string, mode: CodeFieldMode): boolean;
+/**
+ * What is left of `text` once everything that does not belong is dropped
+ * (spaces, dashes, letters in a numeric code), cut to `length`. "123 456" and
+ * "123-456" are "123456".
+ */
+export declare function sanitiseCode(text: string, mode: CodeFieldMode, length: number): string;
+/** The characters kept of `text` before position `caret`: where the caret goes after `text` is cleaned. */
+export declare function caretAfterSanitise(text: string, caret: number, mode: CodeFieldMode, length: number): number;
+/** `value` with the place at `index` replaced by `char`. */
+export declare function replaceAt(value: string, index: number, char: string): string;
+/** The text with `pasted` where the selection from `start` to `end` is. A whole code replaces what was there. */
+export declare function pasteInto(value: string, start: number, end: number, pasted: string, mode: CodeFieldMode, length: number): string;
+/** The place the caret is in, for the focus mark: the next empty place, or the last when the code is whole. */
+export declare function activePlace(caret: number, length: number): number;
+/** The sizes of the boxes: the field's `size`. `md` is the size the field has always had. */
+export type CodeFieldSize = "sm" | "md" | "lg";
+/**
+ * Per size: the box height, the digit class, the widest a box grows (rem) and
+ * the least it is (`minEm`, in ems of its own digit, so a digit is never wider than its
+ * box at any text size). `sm` stays 44px tall, the least for a touch target.
+ */
+export declare const CODE_FIELD_SIZES: Record<CodeFieldSize, {
+    box: string;
+    text: string;
+    digitRem: number;
+    maxRem: number;
+    minEm: number;
+}>;
+/** The gap between boxes in a group, and the wider gap between groups (rem). */
+export declare const CODE_FIELD_GAP_REM = 0.5;
+export declare const CODE_FIELD_GROUP_GAP_REM = 1;
+/**
+ * `groups` as the sizes of the groups the boxes are drawn in. A number is the
+ * size of each group (4 for 8 places is 4 and 4, 3 for 8 is 3, 3 and 2); a list
+ * gives each group's size and the places left over form a last group. One
+ * group, or anything unusable, means no grouping: an empty list.
+ */
+export declare function codeGroups(groups: number | number[] | undefined, length: number): number[];
+/** The index of the box nearest to a point, by its rectangle; -1 when there are none. */
+export declare function nearestBox(rects: {
+    left: number;
+    right: number;
+    top?: number;
+    bottom?: number;
+}[], x: number, y: number): number;

package/dist/util/code-field.js

@@ -0,0 +1,112 @@
+/** Types and pure helpers for `CodeField`. Kept out of the component so they can be tested without a DOM. */
+export const DEFAULT_CODE_FIELD_STRINGS = {
+    label: "Verification code",
+    description: (length, mode) => (mode === "numeric" ? `${length} digits` : `${length} characters`),
+};
+/** The fewest and the most places a code field draws. */
+export const CODE_FIELD_LENGTH_MAX = 12;
+/** `length` as a whole number from 1 to 12; 6 for anything that is not a number. */
+export function codeLength(length) {
+    if (length === undefined || !Number.isFinite(length))
+        return 6;
+    return Math.max(1, Math.min(CODE_FIELD_LENGTH_MAX, Math.floor(length)));
+}
+/** Whether one character belongs in a code of this mode. */
+export function isCodeChar(char, mode) {
+    return mode === "numeric" ? /^[0-9]$/.test(char) : /^[0-9A-Za-z]$/.test(char);
+}
+/**
+ * What is left of `text` once everything that does not belong is dropped
+ * (spaces, dashes, letters in a numeric code), cut to `length`. "123 456" and
+ * "123-456" are "123456".
+ */
+export function sanitiseCode(text, mode, length) {
+    let kept = "";
+    for (const char of text) {
+        if (isCodeChar(char, mode))
+            kept += char;
+    }
+    return kept.slice(0, length);
+}
+/** The characters kept of `text` before position `caret`: where the caret goes after `text` is cleaned. */
+export function caretAfterSanitise(text, caret, mode, length) {
+    return sanitiseCode(text.slice(0, caret), mode, length).length;
+}
+/** `value` with the place at `index` replaced by `char`. */
+export function replaceAt(value, index, char) {
+    return value.slice(0, index) + char + value.slice(index + 1);
+}
+/** The text with `pasted` where the selection from `start` to `end` is. A whole code replaces what was there. */
+export function pasteInto(value, start, end, pasted, mode, length) {
+    const clean = sanitiseCode(pasted, mode, Number.MAX_SAFE_INTEGER);
+    if (clean.length >= length)
+        return clean.slice(0, length);
+    return sanitiseCode(value.slice(0, start) + clean + value.slice(end), mode, length);
+}
+/** The place the caret is in, for the focus mark: the next empty place, or the last when the code is whole. */
+export function activePlace(caret, length) {
+    return Math.max(0, Math.min(caret, length - 1));
+}
+/**
+ * Per size: the box height, the digit class, the widest a box grows (rem) and
+ * the least it is (`minEm`, in ems of its own digit, so a digit is never wider than its
+ * box at any text size). `sm` stays 44px tall, the least for a touch target.
+ */
+export const CODE_FIELD_SIZES = {
+    sm: { box: "h-11", text: "text-lg", digitRem: 1.125, maxRem: 2.5, minEm: 1.15 },
+    md: { box: "h-12", text: "text-xl", digitRem: 1.25, maxRem: 3, minEm: 1.15 },
+    lg: { box: "h-14", text: "text-2xl", digitRem: 1.5, maxRem: 3.5, minEm: 1.15 },
+};
+/** The gap between boxes in a group, and the wider gap between groups (rem). */
+export const CODE_FIELD_GAP_REM = 0.5;
+export const CODE_FIELD_GROUP_GAP_REM = 1;
+/**
+ * `groups` as the sizes of the groups the boxes are drawn in. A number is the
+ * size of each group (4 for 8 places is 4 and 4, 3 for 8 is 3, 3 and 2); a list
+ * gives each group's size and the places left over form a last group. One
+ * group, or anything unusable, means no grouping: an empty list.
+ */
+export function codeGroups(groups, length) {
+    if (groups === undefined)
+        return [];
+    const sizes = [];
+    let left = length;
+    if (typeof groups === "number") {
+        if (!Number.isFinite(groups) || groups < 1)
+            return [];
+        const each = Math.floor(groups);
+        while (left > 0) {
+            sizes.push(Math.min(each, left));
+            left -= each;
+        }
+    }
+    else {
+        for (const size of groups) {
+            if (left <= 0)
+                break;
+            if (!Number.isFinite(size) || size < 1)
+                continue;
+            const take = Math.min(Math.floor(size), left);
+            sizes.push(take);
+            left -= take;
+        }
+        if (left > 0)
+            sizes.push(left);
+    }
+    return sizes.length > 1 ? sizes : [];
+}
+/** The index of the box nearest to a point, by its rectangle; -1 when there are none. */
+export function nearestBox(rects, x, y) {
+    let best = -1;
+    let bestDistance = Infinity;
+    rects.forEach((rect, index) => {
+        const dx = Math.max(rect.left - x, 0, x - rect.right);
+        const dy = Math.max((rect.top ?? 0) - y, 0, y - (rect.bottom ?? 0));
+        const distance = dy * 1000 + dx;
+        if (distance < bestDistance) {
+            bestDistance = distance;
+            best = index;
+        }
+    });
+    return best;
+}

package/dist/util/collapsible.d.ts

@@ -44,6 +44,12 @@ export interface CollapsibleGroupRegistration {
 export interface CollapsibleGroupContext {
     /** False when opening one panel closes the others. */
     readonly multiple: boolean;
+    /**
+     * Shared `name` for the `<details>` of the default triggers when the group
+     * is single-open, so the browser keeps them exclusive without scripts.
+     * `undefined` when `multiple`.
+     */
+    readonly exclusiveName: string | undefined;
     register: (member: CollapsibleGroupMember) => CollapsibleGroupRegistration;
     /** Called whenever a member is open, however it got there. */
     opened: (member: CollapsibleGroupMember) => void;

package/dist/util/display-voice.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The display voice: the weight and tracking of a figure or a display line.
+ * Both are read from custom properties that are declared nowhere, so any
+ * ancestor can set them (`--zabi-display-weight: 400` for a light serif) and
+ * the defaults are what the display face looked like before. The `number:`
+ * hint is what makes Tailwind read the weight as a weight and not a family.
+ * Heading `variant="display"` and Stat share this string.
+ */
+export declare const displayVoice = "font-[number:var(--zabi-display-weight,700)] tracking-[var(--zabi-display-tracking,-0.02em)]";