zabi-components 8.0.0 → 9.0.0

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

@@ -0,0 +1,63 @@
+/** Types and pure helpers for `Collapsible` and `CollapsibleGroup`. Kept out of the components so they can be tested without a DOM. */
+/** Heading element the default trigger is wrapped in. */
+export type CollapsibleHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * First argument of the `trigger` snippet. Spread it on your own `<button>`:
+ * it carries the whole wiring, so the button needs nothing else to work.
+ */
+export type CollapsibleTriggerProps = {
+    id: string;
+    /** Keeps a trigger inside a `<form>` from submitting it. */
+    type: "button";
+    "aria-expanded": boolean;
+    "aria-controls": string;
+    disabled: boolean;
+    onclick: (event: MouseEvent) => void;
+    /** How a `CollapsibleGroup` finds its header buttons for the arrow keys. */
+    "data-collapsible-trigger": "";
+};
+/** Second argument of the `trigger` snippet. */
+export interface CollapsibleTriggerState {
+    open: boolean;
+    disabled: boolean;
+}
+/** What a `Collapsible` hands its group. */
+export interface CollapsibleGroupMember {
+    triggerId: string;
+    isOpen: () => boolean;
+    /** A disabled member keeps its state: the group neither closes it nor counts it. */
+    isDisabled: () => boolean;
+    close: () => void;
+}
+/** What a member gets back when it joins a group. */
+export interface CollapsibleGroupRegistration {
+    /** Removes the member again. */
+    unregister: () => void;
+    /**
+     * True when the member asked to start open in a single-open group that
+     * already has an open panel. The member then renders closed from the
+     * start, on the server too, instead of opening and being closed again.
+     */
+    startClosed: boolean;
+}
+/** What a `CollapsibleGroup` offers the Collapsibles inside it, through context. */
+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;
+}
+/** Context key shared by the two components. */
+export declare const COLLAPSIBLE_GROUP: unique symbol;
+/**
+ * Index of the header button an accordion key moves focus to, or `null` when
+ * the key is not one of them. Arrow keys wrap, as they do in Tabs and Dropdown.
+ */
+export declare function nextTriggerIndex(key: string, current: number, count: number): number | null;

package/dist/util/collapsible.js

@@ -0,0 +1,23 @@
+/** Types and pure helpers for `Collapsible` and `CollapsibleGroup`. Kept out of the components so they can be tested without a DOM. */
+/** Context key shared by the two components. */
+export const COLLAPSIBLE_GROUP = Symbol("zabi-collapsible-group");
+/**
+ * Index of the header button an accordion key moves focus to, or `null` when
+ * the key is not one of them. Arrow keys wrap, as they do in Tabs and Dropdown.
+ */
+export function nextTriggerIndex(key, current, count) {
+    if (count === 0)
+        return null;
+    switch (key) {
+        case "ArrowDown":
+            return (current + 1) % count;
+        case "ArrowUp":
+            return (current - 1 + count) % count;
+        case "Home":
+            return 0;
+        case "End":
+            return count - 1;
+        default:
+            return null;
+    }
+}

package/dist/util/confirm-dialog.d.ts

@@ -0,0 +1,11 @@
+/** Public types for `ConfirmDialog`. */
+/** Sets the confirm button's style and the icon beside the message. */
+export type ConfirmDialogVariant = "danger" | "warning" | "info";
+/** How the user backed out: the cancel button, or one of Modal's own ways to close. */
+export type ConfirmDialogCancelReason = "cancel-button" | "escape" | "backdrop" | "close-button";
+/**
+ * What `onconfirm` may return. `false`, returned or resolved, keeps the dialog
+ * open; anything else closes it. A promise puts the dialog in its loading
+ * state until it settles.
+ */
+export type ConfirmDialogResult = void | boolean | Promise<void | boolean>;

package/dist/util/confirm-dialog.js

@@ -0,0 +1,2 @@
+/** Public types for `ConfirmDialog`. */
+export {};

package/dist/util/date.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Calendar dates as strings: `YYYY-MM-DD` for a day, `YYYY-MM` for a month,
+ * `HH:mm` (or `HH:mm:ss`) for a time of day. The formats a native date or
+ * time input reads and writes.
+ *
+ * A date here is a day on the calendar, not a moment. Nothing in this file
+ * goes through a local `Date`: the arithmetic is on the numbers, or on UTC,
+ * where every day has 24 hours. So a date never moves to the day before or
+ * after because of a time zone, and a day on which the clocks change is a day
+ * like any other.
+ *
+ * Years 0001 to 9999, four digits: within that, two dates compare as strings.
+ */
+export interface DateParts {
+    year: number;
+    /** 1 to 12. */
+    month: number;
+    day: number;
+}
+export declare function isLeapYear(year: number): boolean;
+/** Days in a month; `month` is 1 to 12. */
+export declare function daysInMonth(year: number, month: number): number;
+/** The parts of a `YYYY-MM-DD` string, or null when it is not a real date. */
+export declare function parseIsoDate(value: string | null | undefined): DateParts | null;
+export declare function isIsoDate(value: string | null | undefined): value is string;
+/** The parts of a `YYYY-MM` string, or null when it is not a real month. */
+export declare function parseIsoMonth(value: string | null | undefined): {
+    year: number;
+    month: number;
+} | null;
+export declare function toIsoDate(year: number, month: number, day: number): string;
+export declare function toIsoMonth(year: number, month: number): string;
+/** The month a date is in: `2026-10-06` gives `2026-10`. Null for a string that is not a date. */
+export declare function monthOf(date: string | null | undefined): string | null;
+/** The date `count` days later (earlier when negative), or null outside years 1 to 9999. */
+export declare function addDays(date: string, count: number): string | null;
+/** The month `count` months later (earlier when negative), or null outside years 1 to 9999. */
+export declare function addMonthsToMonth(month: string, count: number): string | null;
+/**
+ * The same day of the month `count` months later. A day the target month does
+ * not have becomes its last one: 31 January plus a month is 28 or 29 February.
+ */
+export declare function addMonths(date: string, count: number): string | null;
+/** Day of the week, 0 for Sunday to 6 for Saturday. -1 for a string that is not a date. */
+export declare function weekdayOf(date: string): number;
+/** A whole number from 0 to 6 for the first day of the week; anything else is Monday. */
+export declare function normaliseWeekStart(weekStartsOn: number | undefined): number;
+/** The first day of the week a date is in. */
+export declare function startOfWeek(date: string, weekStartsOn?: number): string | null;
+/** The last day of the week a date is in. */
+export declare function endOfWeek(date: string, weekStartsOn?: number): string | null;
+/**
+ * The weeks of a month, each seven entries from the first day of the week. A
+ * day of the month is its ISO date; a place before the 1st or after the last
+ * day is null. There are as many weeks as the month touches: four (a
+ * 28-day February that starts on the first day of the week), five or six.
+ */
+export declare function monthGrid(month: string, weekStartsOn?: number): (string | null)[][];
+/** The seven days of the week as numbers (0 for Sunday), from the first day of the week. */
+export declare function weekdayOrder(weekStartsOn?: number): number[];
+/**
+ * Today where the user is, as `YYYY-MM-DD`. This is the one place that reads
+ * the local clock: "today" is a local idea. Call it in the browser; on a
+ * server it is the server's day.
+ */
+export declare function todayIso(now?: Date): string;
+/** Today in UTC: the same on a server and in a browser at the same moment. */
+export declare function todayIsoUtc(now?: Date): string;
+/** A date held between `min` and `max`, either of which may be missing or invalid. */
+export declare function clampDate(date: string, min?: string | null, max?: string | null): string;
+/**
+ * A date for reading: `formatDate("2026-10-06", "sv")` is "6 okt. 2026",
+ * `formatDate("2026-10-06", "en-GB")` is "6 Oct 2026".
+ *
+ * `value` is `YYYY-MM-DD`, what a DateField holds. The day shown is always
+ * the day in the string: it does not depend on the time zone of the browser
+ * or the server. An empty or invalid value gives an empty string.
+ *
+ * Pass the `locale` of the page. Without it the runtime's own is used, which
+ * on a server is the server's and may differ from the reader's, so text
+ * rendered on the server and again in the browser may not match.
+ *
+ * `options` are those of `Intl.DateTimeFormat`; `timeZone` is not one you can
+ * set here.
+ */
+export declare function formatDate(value: string | null | undefined, locale?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+/**
+ * A time of day for reading: `formatTime("19:00", "sv")` is "19:00",
+ * `formatTime("19:00", "en-US")` is "7:00 PM".
+ *
+ * `value` is `HH:mm` or `HH:mm:ss`, what a TimeField holds. It is a time on
+ * the clock, with no zone: nothing shifts it. An empty or invalid value gives
+ * an empty string. `locale` and `options` as for `formatDate`.
+ */
+export declare function formatTime(value: string | null | undefined, locale?: string | string[], options?: Intl.DateTimeFormatOptions): string;

package/dist/util/date.js

@@ -0,0 +1,237 @@
+/**
+ * Calendar dates as strings: `YYYY-MM-DD` for a day, `YYYY-MM` for a month,
+ * `HH:mm` (or `HH:mm:ss`) for a time of day. The formats a native date or
+ * time input reads and writes.
+ *
+ * A date here is a day on the calendar, not a moment. Nothing in this file
+ * goes through a local `Date`: the arithmetic is on the numbers, or on UTC,
+ * where every day has 24 hours. So a date never moves to the day before or
+ * after because of a time zone, and a day on which the clocks change is a day
+ * like any other.
+ *
+ * Years 0001 to 9999, four digits: within that, two dates compare as strings.
+ */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+const ISO_MONTH = /^(\d{4})-(\d{2})$/;
+const ISO_TIME = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?$/;
+const pad = (value, length = 2) => String(value).padStart(length, "0");
+export function isLeapYear(year) {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}
+/** Days in a month; `month` is 1 to 12. */
+export function daysInMonth(year, month) {
+    if (month === 2)
+        return isLeapYear(year) ? 29 : 28;
+    return [4, 6, 9, 11].includes(month) ? 30 : 31;
+}
+/** The parts of a `YYYY-MM-DD` string, or null when it is not a real date. */
+export function parseIsoDate(value) {
+    const match = ISO_DATE.exec(value ?? "");
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (year < 1 || month < 1 || month > 12 || day < 1 || day > daysInMonth(year, month))
+        return null;
+    return { year, month, day };
+}
+export function isIsoDate(value) {
+    return parseIsoDate(value) !== null;
+}
+/** The parts of a `YYYY-MM` string, or null when it is not a real month. */
+export function parseIsoMonth(value) {
+    const match = ISO_MONTH.exec(value ?? "");
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    if (year < 1 || month < 1 || month > 12)
+        return null;
+    return { year, month };
+}
+export function toIsoDate(year, month, day) {
+    return `${pad(year, 4)}-${pad(month)}-${pad(day)}`;
+}
+export function toIsoMonth(year, month) {
+    return `${pad(year, 4)}-${pad(month)}`;
+}
+/** The month a date is in: `2026-10-06` gives `2026-10`. Null for a string that is not a date. */
+export function monthOf(date) {
+    const parts = parseIsoDate(date);
+    return parts ? toIsoMonth(parts.year, parts.month) : null;
+}
+/**
+ * A UTC timestamp for the day. `Date.UTC` reads a year under 100 as 19xx, so
+ * the year is set afterwards.
+ */
+function utcOf({ year, month, day }) {
+    const date = new Date(Date.UTC(2000, month - 1, day));
+    date.setUTCFullYear(year);
+    return date;
+}
+function isoOfUtc(date) {
+    return toIsoDate(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate());
+}
+const inRange = (year) => year >= 1 && year <= 9999;
+/** The date `count` days later (earlier when negative), or null outside years 1 to 9999. */
+export function addDays(date, count) {
+    const parts = parseIsoDate(date);
+    if (!parts)
+        return null;
+    const moved = utcOf(parts);
+    moved.setUTCDate(moved.getUTCDate() + count);
+    return inRange(moved.getUTCFullYear()) ? isoOfUtc(moved) : null;
+}
+/** The month `count` months later (earlier when negative), or null outside years 1 to 9999. */
+export function addMonthsToMonth(month, count) {
+    const parts = parseIsoMonth(month);
+    if (!parts)
+        return null;
+    const index = parts.year * 12 + (parts.month - 1) + count;
+    const year = Math.floor(index / 12);
+    return inRange(year) ? toIsoMonth(year, (index % 12 + 12) % 12 + 1) : null;
+}
+/**
+ * The same day of the month `count` months later. A day the target month does
+ * not have becomes its last one: 31 January plus a month is 28 or 29 February.
+ */
+export function addMonths(date, count) {
+    const parts = parseIsoDate(date);
+    if (!parts)
+        return null;
+    const target = parseIsoMonth(addMonthsToMonth(toIsoMonth(parts.year, parts.month), count));
+    if (!target)
+        return null;
+    const day = Math.min(parts.day, daysInMonth(target.year, target.month));
+    return toIsoDate(target.year, target.month, day);
+}
+/** Day of the week, 0 for Sunday to 6 for Saturday. -1 for a string that is not a date. */
+export function weekdayOf(date) {
+    const parts = parseIsoDate(date);
+    return parts ? utcOf(parts).getUTCDay() : -1;
+}
+/** A whole number from 0 to 6 for the first day of the week; anything else is Monday. */
+export function normaliseWeekStart(weekStartsOn) {
+    return Number.isInteger(weekStartsOn) && weekStartsOn >= 0 && weekStartsOn <= 6
+        ? weekStartsOn
+        : 1;
+}
+/** The first day of the week a date is in. */
+export function startOfWeek(date, weekStartsOn = 1) {
+    const weekday = weekdayOf(date);
+    if (weekday === -1)
+        return null;
+    return addDays(date, -((weekday - normaliseWeekStart(weekStartsOn) + 7) % 7));
+}
+/** The last day of the week a date is in. */
+export function endOfWeek(date, weekStartsOn = 1) {
+    const start = startOfWeek(date, weekStartsOn);
+    return start ? addDays(start, 6) : null;
+}
+/**
+ * The weeks of a month, each seven entries from the first day of the week. A
+ * day of the month is its ISO date; a place before the 1st or after the last
+ * day is null. There are as many weeks as the month touches: four (a
+ * 28-day February that starts on the first day of the week), five or six.
+ */
+export function monthGrid(month, weekStartsOn = 1) {
+    const parts = parseIsoMonth(month);
+    if (!parts)
+        return [];
+    const first = toIsoDate(parts.year, parts.month, 1);
+    const lead = (weekdayOf(first) - normaliseWeekStart(weekStartsOn) + 7) % 7;
+    const days = daysInMonth(parts.year, parts.month);
+    const cells = Array.from({ length: lead }, () => null);
+    for (let day = 1; day <= days; day += 1)
+        cells.push(toIsoDate(parts.year, parts.month, day));
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weeks = [];
+    for (let index = 0; index < cells.length; index += 7)
+        weeks.push(cells.slice(index, index + 7));
+    return weeks;
+}
+/** The seven days of the week as numbers (0 for Sunday), from the first day of the week. */
+export function weekdayOrder(weekStartsOn = 1) {
+    const start = normaliseWeekStart(weekStartsOn);
+    return Array.from({ length: 7 }, (_, index) => (start + index) % 7);
+}
+/**
+ * Today where the user is, as `YYYY-MM-DD`. This is the one place that reads
+ * the local clock: "today" is a local idea. Call it in the browser; on a
+ * server it is the server's day.
+ */
+export function todayIso(now = new Date()) {
+    return toIsoDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+/** Today in UTC: the same on a server and in a browser at the same moment. */
+export function todayIsoUtc(now = new Date()) {
+    return isoOfUtc(now);
+}
+/** A date held between `min` and `max`, either of which may be missing or invalid. */
+export function clampDate(date, min, max) {
+    if (isIsoDate(min) && date < min)
+        return min;
+    if (isIsoDate(max) && date > max)
+        return max;
+    return date;
+}
+function formatter(locale, options) {
+    try {
+        // Formatted in UTC, where the value was put: the reader's zone never moves it.
+        return new Intl.DateTimeFormat(locale || undefined, { ...options, timeZone: "UTC" });
+    }
+    catch {
+        // An unknown locale tag or option: fall back to the runtime's own.
+        try {
+            return new Intl.DateTimeFormat(undefined, { ...options, timeZone: "UTC" });
+        }
+        catch {
+            return null;
+        }
+    }
+}
+/**
+ * A date for reading: `formatDate("2026-10-06", "sv")` is "6 okt. 2026",
+ * `formatDate("2026-10-06", "en-GB")` is "6 Oct 2026".
+ *
+ * `value` is `YYYY-MM-DD`, what a DateField holds. The day shown is always
+ * the day in the string: it does not depend on the time zone of the browser
+ * or the server. An empty or invalid value gives an empty string.
+ *
+ * Pass the `locale` of the page. Without it the runtime's own is used, which
+ * on a server is the server's and may differ from the reader's, so text
+ * rendered on the server and again in the browser may not match.
+ *
+ * `options` are those of `Intl.DateTimeFormat`; `timeZone` is not one you can
+ * set here.
+ */
+export function formatDate(value, locale, options = { day: "numeric", month: "short", year: "numeric" }) {
+    const parts = parseIsoDate(value);
+    if (!parts)
+        return "";
+    return formatter(locale, options)?.format(utcOf(parts)) ?? value;
+}
+/**
+ * A time of day for reading: `formatTime("19:00", "sv")` is "19:00",
+ * `formatTime("19:00", "en-US")` is "7:00 PM".
+ *
+ * `value` is `HH:mm` or `HH:mm:ss`, what a TimeField holds. It is a time on
+ * the clock, with no zone: nothing shifts it. An empty or invalid value gives
+ * an empty string. `locale` and `options` as for `formatDate`.
+ */
+export function formatTime(value, locale, 
+// The locale's own short time: "07:05" in Swedish, "7:05 AM" in American English.
+options = { timeStyle: "short" }) {
+    const match = ISO_TIME.exec(value ?? "");
+    if (!match)
+        return "";
+    const hours = Number(match[1]);
+    const minutes = Number(match[2]);
+    const seconds = Number(match[3] ?? "0");
+    if (hours > 23 || minutes > 59 || seconds > 59)
+        return "";
+    const moment = new Date(Date.UTC(2000, 0, 1, hours, minutes, seconds));
+    return formatter(locale, options)?.format(moment) ?? value;
+}

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)]";