zabi-components 8.0.0 → 9.0.0

package/dist/components/util/date.d.ts

@@ -0,0 +1,96 @@
+/**
+ * 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;
+//# sourceMappingURL=date.d.ts.map

package/dist/components/util/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/components/util/date.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+/**
+ * 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)]";
+//# sourceMappingURL=display-voice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-voice.d.ts","sourceRoot":"","sources":["../../../src/components/util/display-voice.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,iGACyE,CAAC"}

package/dist/components/util/drawer.d.ts

@@ -0,0 +1,13 @@
+/** Public types and pure helpers for `Drawer`. */
+/**
+ * The edge the drawer is anchored to. `left` and `right` are physical and stay
+ * put in a right-to-left page; `start` and `end` follow the writing direction.
+ */
+export type DrawerSide = "left" | "right" | "start" | "end";
+/** Panel width on wide screens. On a phone the panel is never wider than the screen. */
+export type DrawerSize = "sm" | "md" | "lg";
+/** What the user did to close the drawer. The same values Modal reports. */
+export type DrawerCloseReason = "escape" | "backdrop" | "close-button";
+/** The physical edge a side resolves to, given the writing direction. */
+export declare function resolveDrawerEdge(side: DrawerSide, rtl: boolean): "left" | "right";
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/util/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/util/drawer.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAElD;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAE5D,wFAAwF;AACxF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,cAAc,CAAC;AAEvE,yEAAyE;AACzE,wBAAgB,iBAAiB,CAC7B,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,OAAO,GACb,MAAM,GAAG,OAAO,CAGlB"}

package/dist/components/util/dropdown.d.ts

@@ -0,0 +1,47 @@
+import type { Component } from "svelte";
+/** An icon component, as `@lucide/svelte` icons are. */
+export type DropdownItemIcon = Component<{
+    size?: number;
+    class?: string;
+}>;
+export type DropdownItemTone = "default" | "danger";
+/** One entry of Dropdown's `options`. */
+export interface DropdownOption {
+    value: string | number;
+    label: string;
+    /**
+     * A disabled item stays focusable, so the arrow keys still reach it and a
+     * screen reader can read why it is unavailable; it cannot be chosen.
+     */
+    disabled?: boolean;
+    /** Rendered before the label, at 16px. Decorative: the label names the item. */
+    icon?: DropdownItemIcon;
+    /** `danger` for a destructive action such as Delete. */
+    tone?: DropdownItemTone;
+    /** Second line under the label, e.g. why the item is disabled. */
+    description?: string;
+}
+/**
+ * How a Dropdown's menu is shown: `popover` under its trigger, `sheet` in a
+ * BottomSheet, or `auto`: a sheet on a phone, the pop-over everywhere else.
+ */
+export type DropdownPresentation = "auto" | "popover" | "sheet";
+/**
+ * A phone, for `auto`: a touch screen (`pointer: coarse`) narrower than the
+ * `sm` breakpoint. A tablet has the room for a pop-over under its trigger,
+ * and a narrow window with a mouse has the precision for one.
+ */
+export declare const SHEET_MEDIA_QUERY = "(pointer: coarse) and (max-width: 639.98px)";
+/**
+ * Whether a menu asked for as `presentation` opens in a sheet right now.
+ * Read when the menu opens, in the browser: on the server it is never a sheet,
+ * so what is rendered before anyone touches the control is the same everywhere.
+ */
+export declare function opensAsSheet(presentation: DropdownPresentation): boolean;
+/** What a Dropdown tells the items inside it. */
+export interface DropdownContext {
+    /** `option` inside a listbox, `menuitem` inside a menu. */
+    readonly itemRole: "menuitem" | "option";
+}
+export declare const DROPDOWN_CONTEXT_KEY: unique symbol;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/util/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/util/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,wDAAwD;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE5E,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpD,yCAAyC;AACzC,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,gDAAgD,CAAC;AAE/E;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAQxE;AAED,iDAAiD;AACjD,MAAM,WAAW,eAAe;IAC5B,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,UAAU,GAAG,QAAQ,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,eAAqB,CAAC"}

package/dist/components/util/field-control.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The look of a field-shaped control's box: Select's trigger and native select
+ * and PickerField draw it from here, so a picker beside a Select is the same
+ * box. Kept in one place so they cannot drift.
+ */
+export type FieldControlSize = "sm" | "md" | "lg";
+export interface FieldControlSizeClasses {
+    /** The trigger's box: a minimum height, so a label that wraps makes it taller. */
+    box: string;
+    /** The text size: 16px below `sm`, as Input. */
+    text: string;
+    /** The same box for a native `<select>`, which is always one line. */
+    native: string;
+    /** Where the trailing chevron sits. */
+    chevron: string;
+}
+/**
+ * Same fixed height scale as Button, IconButton and Input (32 / 40 / 48), and
+ * the same 16px text below `sm`. One line is exactly 32, 40 or 48px: the
+ * padding leaves room for the line and the border inside it, and is a step
+ * smaller below `sm`, where the text is 16px on a 24px line.
+ */
+export declare function fieldControlSize(size: FieldControlSize): FieldControlSizeClasses;
+/** The edge colour for a status: the field's own, or the status colour. */
+export declare function fieldControlEdge(variant: string): string;
+/** The field's surface, edge and states. */
+export declare const FIELD_CONTROL_SURFACE = "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-(--duration-base) hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text";
+/** What the trigger adds to the surface: one row, text and chevron apart. */
+export declare const FIELD_CONTROL_TRIGGER = "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-(--duration-base) hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text flex items-center justify-between gap-2";
+//# sourceMappingURL=field-control.d.ts.map

package/dist/components/util/field-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-control.d.ts","sourceRoot":"","sources":["../../../src/components/util/field-control.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,uBAAuB;IACpC,kFAAkF;IAClF,GAAG,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,uBAAuB,CAIhF;AAED,2EAA2E;AAC3E,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAQxD;AAED,4CAA4C;AAC5C,eAAO,MAAM,qBAAqB,qVACoT,CAAC;AAEvV,6EAA6E;AAC7E,eAAO,MAAM,qBAAqB,6XAAqE,CAAC"}

package/dist/components/util/field.d.ts

@@ -0,0 +1,45 @@
+/**
+ * What Input, Textarea and Select share about the text under a field, and
+ * DateField and TimeField through Input. Kept in one place so the four cannot
+ * drift: which message shows, in which variant, and what the control is
+ * described by.
+ */
+import type { SemanticVariant } from "../types/variants.js";
+export interface FieldMessageInput {
+    variant?: SemanticVariant;
+    message?: string;
+    hint?: string;
+    error?: string;
+}
+export interface FieldMessageState {
+    /** The variant the control is drawn in: `error` whenever there is an error. */
+    variant: SemanticVariant;
+    /** The text of the status message: the error, or else `message`. */
+    message: string;
+    /** Whether the status message is rendered. A `message` without a variant is not. */
+    showMessage: boolean;
+    /** Whether the hint is rendered. */
+    showHint: boolean;
+}
+/**
+ * `error` wins over `variant` and `message`: it sets the error variant and is
+ * the message. Without it, `message` shows in a `success`, `warning` or
+ * `error` variant, as it always has, and not in `default`: text for a field
+ * that is neither is a `hint`.
+ */
+export declare function fieldMessageState({ variant, message, hint, error, }: FieldMessageInput): FieldMessageState;
+export declare const fieldHintId: (fieldId: string) => string;
+export declare const fieldMessageId: (fieldId: string) => string;
+/**
+ * The ids a control is described by: the caller's own (a FormField around the
+ * field, say), then the hint, then the status message. Only ids of elements
+ * that are rendered; `undefined` when there are none, so no empty attribute.
+ */
+export declare function fieldDescribedBy(fieldId: string, state: Pick<FieldMessageState, "showMessage" | "showHint">, own?: string | null): string | undefined;
+/** What Textarea's `countText` is given: the characters typed, the limit, and how many are left. */
+export interface TextareaCount {
+    length: number;
+    max: number;
+    remaining: number;
+}
+//# sourceMappingURL=field.d.ts.map

package/dist/components/util/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/util/field.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAC9B,+EAA+E;IAC/E,OAAO,EAAE,eAAe,CAAC;IACzB,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,WAAW,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,OAAmB,EACnB,OAAY,EACZ,IAAS,EACT,KAAU,GACb,EAAE,iBAAiB,GAAG,iBAAiB,CASvC;AAED,eAAO,MAAM,WAAW,GAAI,SAAS,MAAM,WAAsB,CAAC;AAClE,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,WAAyB,CAAC;AAExE;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,UAAU,CAAC,EAC1D,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,GAAG,SAAS,CAUpB;AAED,oGAAoG;AACpG,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;CACrB"}

package/dist/components/util/fit-in-viewport.d.ts

@@ -0,0 +1,201 @@
+/**
+ * Keeps a floating box (a menu, a panel, a tooltip) where it can be seen.
+ *
+ * One module for everything that opens next to a trigger. Two layers:
+ *
+ * - `pickSide` and `shiftIntoViewport` are the two decisions every such box
+ *   needs: which side of its trigger it opens on, and how far it has to move
+ *   along that side to stay on screen. Tooltip uses them as they are.
+ * - `fitPanel` builds on them for a panel that hangs from one edge of its
+ *   anchor (Dropdown, Select's list, NavigationMenuContent): it also narrows
+ *   and shortens a panel too large for the screen. `measurePlacement` reads
+ *   the layout for it, and `watchViewport` re-runs it while the panel is open.
+ *
+ * The arithmetic is pure, so it can be tested without a layout.
+ *
+ * The screen is not the only thing that cuts a panel off. Inside a box that
+ * scrolls (a Modal's body, a list with its own scrollbar) the box clips it
+ * first. `measurePlacement` takes the nearest such box into account: it
+ * decides which side the panel opens on, and when the panel fits on neither
+ * side it says where to put the panel with `position: fixed`, which a
+ * scrolling ancestor does not clip.
+ */
+export type PanelBlock = "bottom" | "top";
+export type PanelInline = "start" | "end";
+export interface PanelBox {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface FitPanelInput {
+    /** The box the panel is positioned against, in viewport coordinates. */
+    anchor: PanelBox;
+    /** The panel's natural size, measured with no limit on it. */
+    panel: {
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** The side asked for. It is kept whenever the panel fits there. */
+    block: PanelBlock;
+    inline: PanelInline;
+    /** Right-to-left layout: `start` is then the right edge. */
+    rtl?: boolean;
+    /** Room kept between the panel and every edge of the viewport. */
+    margin?: number;
+    /** Distance between the anchor and the panel. */
+    gap?: number;
+    /** False keeps the panel on the `block` side asked for, whatever fits. */
+    flipBlock?: boolean;
+    /** False keeps it on the `inline` edge asked for and slides it back inside instead. */
+    flipInline?: boolean;
+    /**
+     * The inside of the nearest ancestor that clips, in viewport coordinates.
+     * It decides which side the panel opens on and how far it slides; it
+     * never limits the panel's size, which only the viewport does.
+     */
+    clip?: PanelBox | null;
+}
+export interface PanelFit {
+    block: PanelBlock;
+    inline: PanelInline;
+    /**
+     * Distance to put between the anchor's `inline` edge and the panel's, for
+     * `inset-inline-start` or `inset-inline-end`. 0 when the panel fits as it
+     * is; otherwise what slides it back inside.
+     */
+    inlineOffset: number;
+    /** A limit to set, or null when the panel fits without one. */
+    maxWidth: number | null;
+    maxHeight: number | null;
+    /** Where the panel's box ends up, in viewport coordinates, and how wide it is there. */
+    left: number;
+    top: number;
+    width: number;
+    /** False when part of the panel is outside `clip` (or the viewport) even so. */
+    visible: boolean;
+}
+export type FloatingSide = "top" | "bottom" | "left" | "right";
+/**
+ * The side a floating box of `size` opens on: the preferred one when it fits
+ * there, the opposite one when only that fits, and otherwise whichever of the
+ * two has more room.
+ *
+ * `gap` is the distance between trigger and box; `margin` is how close to the
+ * viewport edge the box may come. `clip` is the inside of an ancestor that
+ * cuts the box off, when there is one: the box then has to fit in what both
+ * leave.
+ */
+export declare function pickSide(preferred: FloatingSide, trigger: PanelBox, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, { gap, margin, clip, }?: {
+    gap?: number;
+    margin?: number;
+    clip?: PanelBox | null;
+}): FloatingSide;
+/**
+ * How far `box` has to move, in px, to lie inside the viewport with `margin`
+ * to spare. Zero on an axis where it already does. A box larger than the
+ * viewport is aligned to the start edge (top, left), where its text begins.
+ */
+export declare function shiftIntoViewport(box: PanelBox, viewport: {
+    width: number;
+    height: number;
+}, margin?: number): {
+    x: number;
+    y: number;
+};
+export interface ViewportPoint {
+    x: number;
+    y: number;
+}
+/**
+ * True when `point` lies in the triangle `a`, `b`, `c`, edges included. For
+ * the path a pointer takes from a trigger to its floating box: as long as it
+ * stays in the triangle between where it left and the near edge of the box,
+ * it is on its way there.
+ */
+export declare function insideTriangle(point: ViewportPoint, a: ViewportPoint, b: ViewportPoint, c: ViewportPoint): boolean;
+/** Where the panel fits, starting from the side asked for. */
+export declare function fitPanel(input: FitPanelInput): PanelFit;
+/** A fit that changes nothing: the panel where the CSS puts it, with no limits. */
+export declare function unfitted(block: PanelBlock, inline: PanelInline): PanelFit;
+export interface MeasureOptions {
+    margin?: number;
+    gap?: number;
+    flipBlock?: boolean;
+    flipInline?: boolean;
+    /** Overrides the anchor's own direction; `false` for a panel placed with `left`, not `inset-inline-start`. */
+    rtl?: boolean;
+    clip?: PanelBox | null;
+}
+/**
+ * Measures `panel` against `anchor` and returns its fit. Any limit already on
+ * the panel is lifted for the measurement, so the answer does not depend on
+ * the previous one. Call it before paint (from an effect) and apply the result.
+ */
+export declare function measureFit(anchor: Element, panel: HTMLElement, preferred: {
+    block: PanelBlock;
+    inline: PanelInline;
+}, options?: MeasureOptions): PanelFit;
+/**
+ * The nearest ancestor of `element` that clips what reaches outside it (any
+ * `overflow` but `visible`), with the box it clips to: its inside, without
+ * borders or scrollbars, in viewport coordinates. Null when only the viewport
+ * clips.
+ */
+export declare function clippingAncestor(element: Element): {
+    element: HTMLElement;
+    box: PanelBox;
+} | null;
+export interface PanelPlacement extends PanelFit {
+    /**
+     * Set when the panel has to leave a clipping ancestor to be seen: the
+     * `top`, `left` and `width` to give it with `position: fixed`. Null when
+     * it stays where the CSS puts it.
+     *
+     * The width is the one the panel has where the CSS puts it. A fixed box
+     * is sized against the viewport instead of the anchor, so without it the
+     * panel would change width as it leaves the box.
+     */
+    fixed: {
+        left: number;
+        top: number;
+        width: number;
+    } | null;
+}
+/**
+ * The fit of `panel`, with the nearest clipping ancestor of `anchor` taken
+ * into account.
+ *
+ * - The panel fits inside that ancestor on the side asked for: nothing changes.
+ * - It fits on the other side: it opens there.
+ * - It fits on neither: it is placed against the viewport with `fixed`, on the
+ *   side the viewport has room for, and reaches out of the ancestor. Only
+ *   while some of the anchor can be seen in the ancestor: scrolled out of it,
+ *   the anchor takes the panel with it.
+ * - It cannot be: something between the panel and that ancestor is the
+ *   containing block of fixed descendants (a `transform`, a `filter`). It then
+ *   opens on the side of the ancestor with more room, and is cut where that
+ *   ends. That is the limit of what a panel can do without leaving its place
+ *   in the DOM, and it stays there so that the keyboard, focus and a dialog's
+ *   focus trap treat it as part of what opened it.
+ */
+export declare function measurePlacement(anchor: Element, panel: HTMLElement, preferred: {
+    block: PanelBlock;
+    inline: PanelInline;
+}, options?: MeasureOptions): PanelPlacement;
+/**
+ * Calls `update` when the viewport changes size or anything outside `panel`
+ * scrolls, at most once a frame. Returns the function that stops it.
+ */
+export declare function watchViewport(update: () => void, panel?: Element | null): () => void;
+//# sourceMappingURL=fit-in-viewport.d.ts.map

package/dist/components/util/fit-in-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fit-in-viewport.d.ts","sourceRoot":"","sources":["../../../src/components/util/fit-in-viewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1C,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC1B,wEAAwE;IACxE,MAAM,EAAE,QAAQ,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,oEAAoE;IACpE,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,4DAA4D;IAC5D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,QAAQ;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,wFAAwF;IACxF,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,OAAO,EAAE,OAAO,CAAC;CACpB;AAuBD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAmB/D;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACpB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EACvC,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC3C,EACI,GAAO,EACP,MAAU,EACV,IAAW,GACd,GAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;CAAO,GAClE,YAAY,CAOd;AAYD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC7B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC3C,MAAM,SAAI,GACX;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B;AAED,MAAM,WAAW,aAAa;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,aAAa,EACpB,CAAC,EAAE,aAAa,EAChB,CAAC,EAAE,aAAa,EAChB,CAAC,EAAE,aAAa,GACjB,OAAO,CAST;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAyEvD;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,GAAG,QAAQ,CAYzE;AAED,MAAM,WAAW,cAAc;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8GAA8G;IAC9G,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC1B;AAmBD;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,EACrD,OAAO,GAAE,cAAmB,GAC7B,QAAQ,CAyCV;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,OAAO,GACjB;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAsBhD;AA8CD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC5C;;;;;;;;OAQG;IACH,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC9D;AAkBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,EACrD,OAAO,GAAE,cAAmB,GAC7B,cAAc,CA4BhB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,IAAI,CAsBpF"}

package/dist/components/util/focus-utils.d.ts

@@ -2,11 +2,86 @@
 /** From `app.css` `@layer components` — import the library/app stylesheet. */
 export declare const FOCUS_BRAND_CLASS = "focus-brand";
 export declare const FOCUS_NAV_CLASS = "focus-nav";
+/** Every dialog panel: `dialog` and `alertdialog` are both dialogs to a focus trap. */
+export declare const DIALOG_SELECTOR = "[role=\"dialog\"], [role=\"alertdialog\"]";
 export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/** The region a `Toaster` renders its toasts in. */
+export declare const TOAST_REGION_SELECTOR = "[data-zabi-toaster]";
+/**
+ * Whether an event's target is in a toast. A toast is drawn over whatever is
+ * open, and a press on it is for the toast (to hold it, read it, dismiss it):
+ * a menu or a panel that closes on a press outside itself asks this first,
+ * and leaves a press on a toast alone.
+ */
+export declare function isInsideToastRegion(target: unknown): boolean;
+/**
+ * The controls of the toasts on screen. A toast is drawn over a modal
+ * overlay and can cover its buttons, so a focus trap that kept the keyboard
+ * out of it would leave no way to dismiss it: the trap takes these in, after
+ * the overlay's own controls.
+ */
+export declare function getToastFocusables(): HTMLElement[];
+/**
+ * One step of the Tab cycle of a modal overlay: through the controls of
+ * `container`, then through the toasts on screen, and round again. Focusables
+ * are looked up on every Tab, so what is added while the overlay is open is
+ * in the cycle. Focus that is nowhere in it goes to the first control.
+ */
+export declare function cycleTrappedFocus(container: HTMLElement, event: KeyboardEvent): void;
 /** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export declare function trapFocus(container: HTMLElement): () => void;
 export declare function saveFocus(): void;
-/** Restores focus from the last `saveFocus`. Skips disconnected or unfocusable nodes. */
+/**
+ * Restores focus from the last `saveFocus`. If that element has left the
+ * document, the element that now has its id takes the focus instead (a
+ * dropzone swapped for its Change button, say); with neither, nothing happens.
+ */
 export declare function returnFocus(): void;
-export declare function focusFirstElement(container: HTMLElement): void;
+/**
+ * Moves focus into an overlay: to its first focusable element, or to the
+ * container itself when it has none (give the container `tabindex="-1"`), so
+ * focus never stays on the opener behind the backdrop.
+ *
+ * `preferred` is a CSS selector, looked up inside the container: the matching
+ * control takes focus instead of the first one, if it can take focus.
+ */
+export declare function focusFirstElement(container: HTMLElement, preferred?: string): void;
+/**
+ * Joins the stack of open modal overlays (Modal, SlideUp, a drawer).
+ *
+ * Every overlay shares one z-index, so without this the paint order is the
+ * DOM order, and an overlay opened later but placed earlier in the document
+ * opens behind the first. `depth` is 0 for the first overlay and one more than
+ * the highest open one after that: put it on the overlay root as
+ * `z-index: calc(var(--z-modal) + depth)`.
+ *
+ * `panel` is the element with the dialog role. Call this when the overlay
+ * opens, in the browser, and `leave()` when it closes.
+ */
+export declare function joinOverlayStack(panel: HTMLElement): {
+    depth: number;
+    leave: () => void;
+};
+/** Whether `panel` is the overlay on top of the stack: the one opened last. */
+export declare function isTopOverlay(panel: HTMLElement): boolean;
+/**
+ * Keeps a modal overlay in charge of the keyboard when focus has left it
+ * without a Tab: the focused control was disabled or removed and the browser
+ * dropped focus on `<body>`, where the overlay's own key handlers never hear
+ * the key, and Tab would walk the page behind it.
+ *
+ * While installed, a Tab pressed with focus outside every dialog moves focus
+ * to the first focusable element of `container` (or to `container` itself),
+ * and Escape calls `onEscape`. Only the overlay on top of the stack acts (the
+ * one opened last), so every open overlay can install its own. An overlay that
+ * has not called `joinOverlayStack` is added to the stack for as long as the
+ * recovery is installed.
+ *
+ * `container` is the panel with `role="dialog"` or `"alertdialog"` and
+ * `aria-modal="true"`. Call it when the overlay opens, in the browser, and call
+ * the returned function when it closes.
+ */
+export declare function recoverStrayFocus(container: HTMLElement, options?: {
+    onEscape?: (event: KeyboardEvent) => void;
+}): () => void;
 //# sourceMappingURL=focus-utils.d.ts.map

package/dist/components/util/focus-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-utils.d.ts","sourceRoot":"","sources":["../../../src/components/util/focus-utils.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAE1F,8EAA8E;AAC9E,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,eAAe,cAAc,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAgB1E;AAED,oGAAoG;AACpG,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CA2C5D;AAKD,wBAAgB,SAAS,IAAI,IAAI,CAUhC;AAED,yFAAyF;AACzF,wBAAgB,WAAW,IAAI,IAAI,CAgBlC;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAK9D"}
+{"version":3,"file":"focus-utils.d.ts","sourceRoot":"","sources":["../../../src/components/util/focus-utils.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAE1F,8EAA8E;AAC9E,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,eAAe,cAAc,CAAC;AAE3C,uFAAuF;AACvF,eAAO,MAAM,eAAe,8CAA0C,CAAC;AAEvE,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAqB1E;AAED,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAK5D;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,WAAW,EAAE,CAKlD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CAiCpF;AAED,oGAAoG;AACpG,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,MAAM,IAAI,CA2C5D;AASD,wBAAgB,SAAS,IAAI,IAAI,CAUhC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAqBlC;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAMlF;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB,CAWA;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAExD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAC7B,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CAAO,GAC5D,MAAM,IAAI,CAgCZ"}

package/dist/components/util/hydration.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Controls that keep what a visitor chose before the page hydrated.
+ *
+ * A server-rendered page can be used before its scripts arrive: a checkbox
+ * can be ticked, a radio chosen. A component that writes `checked={…}` from
+ * its own state and listens for `change` loses that on hydration: Svelte sets
+ * `checked` from the state, which still says nothing was chosen.
+ *
+ * Svelte's own bindings do not. `bind:checked` and `bind:group` know when
+ * they run during hydration, compare the input with the markup the server
+ * sent (`defaultChecked`), and where they differ hand the input's state to
+ * the binding instead of overwriting it. They also put the binding back on a
+ * form reset. So the controls bind, and what they bind to is an accessor of
+ * their own: the place where a choice is taken in, by whatever road it came.
+ *
+ * `bind:group` takes only an identifier or a member expression, which is why
+ * this is an object with a `value` and not a pair of functions.
+ */
+/** What Svelte hands a group binding when no radio is checked: after a reset, or when hydration finds none. */
+export type NoChoice = null | undefined;
+/**
+ * The target of a radio's `bind:group={binding.value}`.
+ *
+ * `read` gives the chosen value; a radio is checked while its own value is
+ * that. `choose` is called when a radio was picked: by the user, or before
+ * hydration. `restore` is called with nothing chosen: a form is being reset
+ * (see `resetValueOf` for what to go back to).
+ */
+export declare function groupBinding<T>(read: () => T | NoChoice, choose: (value: T) => void, restore: () => void): {
+    value: T | NoChoice;
+};
+/**
+ * The value a group of radios goes back to on a form reset: that of the one
+ * whose `checked` attribute is set, in the type the component's options have
+ * (Svelte keeps it on the input as `__value`), or `undefined` when none is.
+ *
+ * It reads the attribute (`defaultChecked`), not `checked`: Svelte calls a
+ * binding's reset handler in a microtask after the `reset` event, and when a
+ * user pressed the reset button that is before the browser has reset
+ * anything. Svelte takes the `checked` attribute off a bound input once it
+ * has hydrated, so in practice a reset empties the group, as it does a bound
+ * native input.
+ */
+export declare function resetValueOf<T>(inputs: Iterable<HTMLInputElement | undefined>): T | undefined;
+//# sourceMappingURL=hydration.d.ts.map

package/dist/components/util/hydration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydration.d.ts","sourceRoot":"","sources":["../../../src/components/util/hydration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,+GAA+G;AAC/G,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAC;AAExC;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAC1B,IAAI,EAAE,MAAM,CAAC,GAAG,QAAQ,EACxB,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAC1B,OAAO,EAAE,MAAM,IAAI;WAGF,CAAC,GAAG,QAAQ;EAQhC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAK7F"}