zabi-components 8.0.0 → 9.0.0

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

@@ -0,0 +1,40 @@
+/** Types and pure helpers for `Stepper`. Kept out of the component so they can be tested without a DOM. */
+/** One step: a label, and optionally a line under it. A plain string is a step with only a label. */
+export interface StepperStep {
+    label: string;
+    /** A short line under the label in the full layout, and under the current step's name in the compact one. */
+    description?: string;
+}
+/** A step as the `steps` prop takes it. */
+export type StepperItem = string | StepperStep;
+/** Where a step is in the flow. */
+export type StepperStepState = "completed" | "current" | "upcoming";
+export type StepperLayout = "auto" | "full" | "compact";
+/**
+ * Every built-in string. Pass a partial object to `strings` to translate.
+ * `step` is counted from 1 in all of them.
+ */
+export interface StepperStrings {
+    /** The visible start of the compact line: "Step 2 of 3". */
+    position: (step: number, total: number) => string;
+    /**
+     * What a screen reader reads for a step, and the name of its button when
+     * the step is one: "Step 1 of 3: Details, completed".
+     */
+    stepLabel: (step: number, total: number, label: string, state: StepperStepState) => string;
+    /** Read out, politely, when the current step changes: "Step 2 of 3: Ratings". */
+    announcement: (step: number, total: number, label: string) => string;
+}
+export declare const STEPPER_STRINGS: StepperStrings;
+/** Strings and objects alike, as objects. */
+export declare function normalizeSteps(steps: readonly StepperItem[] | null | undefined): StepperStep[];
+/**
+ * The index of the step that is shown as current: `current` as a whole number
+ * held within the steps. Below the first step it is the first, past the last
+ * it is the last, and something that is not a number is the first. `-1` when
+ * there are no steps.
+ */
+export declare function clampStep(current: number | null | undefined, total: number): number;
+/** The state of the step at `index` when the step at `current` is the current one. */
+export declare function stepState(index: number, current: number): StepperStepState;
+//# sourceMappingURL=stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/util/stepper.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAE3G,qGAAqG;AACrG,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6GAA6G;IAC7G,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,2CAA2C;AAC3C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC3B,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD;;;OAGG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAC3F,iFAAiF;IACjF,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxE;AAQD,eAAO,MAAM,eAAe,EAAE,cAK7B,CAAC;AAEF,6CAA6C;AAC7C,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,EAAE,CAE9F;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAMnF;AAED,sFAAsF;AACtF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,gBAAgB,CAG1E"}

package/dist/components/util/swipeable-list-item.d.ts

@@ -0,0 +1,36 @@
+import type { Component } from "svelte";
+/** Public types and shared state for `SwipeableListItem`. */
+/** One action behind a row, such as Delete. */
+export interface SwipeableListItemAction {
+    id: string;
+    /** The button's text, and its accessible name. */
+    label: string;
+    /** Drawn above the label. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** `danger` for an action that destroys something. */
+    tone?: "default" | "danger";
+    /** Runs when the button is pressed. The row closes afterwards. */
+    onselect: () => void;
+}
+/** The words a `SwipeableListItem` says by itself. */
+export interface SwipeableListItemStrings {
+    /** Accessible name of the button that opens the row's actions, and of the group they are in. */
+    actions: string;
+}
+export declare const DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS: SwipeableListItemStrings;
+/**
+ * Says that a row has opened: every other open row in the same list closes.
+ * Returns what to call when this row closes or goes away.
+ */
+export declare function registerOpenRow(root: HTMLElement, close: () => void): () => void;
+/**
+ * Where a swipe ends: open or closed. A flick decides by its direction,
+ * whatever the distance; otherwise the row goes to whichever is nearer.
+ * `revealed` and `width` are px of the actions; `velocity` is px per ms,
+ * positive towards revealing.
+ */
+export declare function settleSwipe(revealed: number, width: number, velocity: number, flick: number): boolean;
+//# sourceMappingURL=swipeable-list-item.d.ts.map

package/dist/components/util/swipeable-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-list-item.d.ts","sourceRoot":"","sources":["../../../src/components/util/swipeable-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,6DAA6D;AAE7D,+CAA+C;AAC/C,MAAM,WAAW,uBAAuB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,sDAAsD;AACtD,MAAM,WAAW,wBAAwB;IACrC,gGAAgG;IAChG,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,mCAAmC,EAAE,wBAEjD,CAAC;AAaF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAQhF;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAGrG"}

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

@@ -0,0 +1,89 @@
+/**
+ * What DateField and TimeField share once they are given a `locale`: the
+ * words, and the pure parts of the time picker (which hours and minutes
+ * there are, which are outside `min` and `max`).
+ */
+/** The words DateField says when it has a `locale`. Replace any of them to translate. */
+export interface DateFieldStrings {
+    /** The sheet's action that empties the field. Shown while the field has a value and is not `required`. */
+    clear: string;
+    /** The sheet's name when the field has no label. */
+    chooseDate: string;
+}
+export declare const DATE_FIELD_STRINGS: DateFieldStrings;
+/** The words TimeField says when it has a `locale`. Replace any of them to translate. */
+export interface TimeFieldStrings {
+    /** The sheet's action that empties the field. Shown while the field has a value and is not `required`. */
+    clear: string;
+    /** The sheet's action that sets the chosen time and closes it. */
+    done: string;
+    /** Accessible name of the column of hours. */
+    hours: string;
+    /** Accessible name of the column of minutes. */
+    minutes: string;
+    /** The sheet's words beside Done for the time Done will set: "Chosen time 18:00". */
+    chosenTime: string;
+    /** The sheet's name when the field has no label. */
+    chooseTime: string;
+}
+export declare const TIME_FIELD_STRINGS: TimeFieldStrings;
+/** Whether a `locale` was given: a tag, or a list with at least one. */
+export declare function hasLocale(locale: string | string[] | undefined | null): boolean;
+/** The minutes between choices when the app says nothing: five. */
+export declare const DEFAULT_MINUTE_STEP = 5;
+/**
+ * Whether the library's time picker can serve this `step`. It has hours and
+ * minutes only, so a step in seconds (under 60) or `"any"` is left to the
+ * platform's own picker.
+ */
+export declare function stepFitsLibraryPicker(step: number | "any" | undefined): boolean;
+/** `step` (in seconds) as whole minutes between choices; five without one. */
+export declare function minuteStep(step: number | "any" | undefined): number;
+/** `"19:30"` (or `"19:30:15"`) as [19, 30]; null for anything else. */
+export declare function parseHourMinute(value: string | null | undefined): [number, number] | null;
+/**
+ * The time an empty field's columns stand at: `openAt`, else `now` (an
+ * hour and a minute), kept within `min` and `max` and on the minute step.
+ * Only a place to scroll to; nothing is chosen. Two-digit strings, as the
+ * columns' option values.
+ */
+export declare function openingTime(options: {
+    openAt?: string;
+    now: [number, number];
+    stepMinutes: number;
+    min?: string;
+    max?: string;
+}): [string, string];
+/**
+ * Whether a time is within `min` and `max`, either of which may be missing.
+ * Like the native input, a `min` later than `max` is a range over midnight:
+ * 22:00 to 06:00 allows 23:30 and 05:00.
+ */
+export declare function timeInRange(hour: number, minute: number, min?: string, max?: string): boolean;
+export interface TimeChoice {
+    /** Two digits: `"07"`. */
+    value: string;
+    label: string;
+    disabled: boolean;
+}
+/** The hour as the locale writes it: "19" in Swedish, "7 PM" in American English. */
+export declare function hourLabel(hour: number, locale: string | string[] | undefined): string;
+/** The minute as two digits, in the locale's own numerals. */
+export declare function minuteLabel(minute: number, locale: string | string[] | undefined): string;
+/** The 24 hours. An hour is disabled when no time in it is within `min` and `max`. */
+export declare function hourChoices(locale: string | string[] | undefined, min?: string, max?: string): TimeChoice[];
+/**
+ * The minutes of one hour: every `stepMinutes`, plus the minute of `current`
+ * when it is not on the step, so a value such as 19:07 can be kept. A minute
+ * is disabled when the time is outside `min` and `max`; with no hour chosen
+ * none is.
+ */
+export declare function minuteChoices(options: {
+    locale: string | string[] | undefined;
+    stepMinutes: number;
+    hour: string;
+    current?: string;
+    min?: string;
+    max?: string;
+}): TimeChoice[];
+//# sourceMappingURL=temporal-field.d.ts.map

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

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

package/dist/components/util/theme-mode.d.ts

@@ -0,0 +1,80 @@
+/**
+ * The page's theme mode, read and written in one place.
+ *
+ * The theme is switched on `<html>`: `data-theme="auto" | "light" | "dark"`,
+ * or the older `dark` class (THEMING.md, "Light, dark and auto"). ThemeToggle
+ * uses these helpers, and so can an app that renders a control of its own, a
+ * SegmentedControl with three options for instance: both then read and write
+ * the same attribute, and ThemeToggle follows whatever the other one sets.
+ *
+ * Everything here is safe to call on the server: without a document the
+ * readers return the default and the writers do nothing.
+ */
+/** `"auto"` follows the system; the other two are a choice. */
+export type ThemeMode = "auto" | "light" | "dark";
+/** The modes in the order a three-way ThemeToggle steps through them. */
+export declare const THEME_MODES: readonly ThemeMode[];
+/** Where the choice is kept in `localStorage` unless a key is given. The key ThemeToggle has always used. */
+export declare const DEFAULT_THEME_STORAGE_KEY = "theme";
+/** The texts ThemeToggle builds its accessible name from. Pass any of them as `labels`. */
+export interface ThemeToggleLabels {
+    /** What `"auto"` is called, with three modes. Default `"system"`. */
+    auto: string;
+    /** Default `"light"`. */
+    light: string;
+    /** Default `"dark"`. */
+    dark: string;
+    /**
+     * The name with three modes, from the current mode's word and the next
+     * one's. Default: "Theme: system. Switch to light".
+     */
+    describe: (current: string, next: string) => string;
+    /**
+     * The name with two modes. It does not change: the button is a switch, and
+     * `aria-pressed` says whether dark is on. Default "Dark mode".
+     */
+    darkMode: string;
+    /** The name before the button mounts, when the mode is not known yet. Default "Theme toggle". */
+    beforeMount: string;
+}
+export declare function isThemeMode(value: unknown): value is ThemeMode;
+/**
+ * The mode the page is in. `data-theme` says it outright; a page without the
+ * attribute is dark with the `dark` class and light without it (such a page
+ * does not follow the system, so it is never `"auto"`).
+ */
+export declare function getThemeMode(): ThemeMode;
+/** Whether the page is dark right now: by the class, by `data-theme="dark"`, or by `auto` on a dark system. */
+export declare function isThemeDark(): boolean;
+export interface SetThemeModeOptions {
+    /**
+     * Where to keep the choice in `localStorage`. Default `"theme"`; `null`
+     * keeps nothing (an app that stores the choice in its own backend).
+     */
+    storageKey?: string | null;
+}
+/**
+ * Puts the page in `mode` by writing `data-theme` on `<html>`, and remembers
+ * it. A leftover `dark` class and an inline `color-scheme` are removed: either
+ * would hold the page dark, or its native controls, under another mode. The
+ * theme sets `color-scheme` for each value of the attribute.
+ */
+export declare function setThemeMode(mode: ThemeMode, options?: SetThemeModeOptions): void;
+/** The stored choice, or `null` when there is none, it is not a mode, or `storageKey` is `null`. */
+export declare function getStoredThemeMode(storageKey?: string | null): ThemeMode | null;
+/** Remembers `mode` under `storageKey` (default `"theme"`); `null` keeps nothing. */
+export declare function storeThemeMode(mode: ThemeMode, storageKey?: string | null): void;
+/**
+ * A script for `<head>` that applies the stored mode before the first paint,
+ * so a returning visitor does not see the other theme flash by. Returns the
+ * source as a string; it has no dependencies and can be inlined as it is.
+ *
+ * It writes to whichever mechanism the page uses, as ThemeToggle does:
+ * `data-theme` when `<html>` already has the attribute or the stored mode is
+ * `"auto"`, and the `dark` class otherwise. With nothing stored it does
+ * nothing, and the markup's own `data-theme` (or its absence) stands.
+ *
+ * The key is written into the script as a JSON string, so any key is safe.
+ */
+export declare function themeInitScript(storageKey?: string): string;
+//# sourceMappingURL=theme-mode.d.ts.map

package/dist/components/util/theme-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mode.d.ts","sourceRoot":"","sources":["../../../src/components/util/theme-mode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,+DAA+D;AAC/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAElD,yEAAyE;AACzE,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAA8B,CAAC;AAE3E,6GAA6G;AAC7G,eAAO,MAAM,yBAAyB,UAAU,CAAC;AAEjD,2FAA2F;AAC3F,MAAM,WAAW,iBAAiB;IAC9B,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,SAAS,CAE9D;AAeD;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAMxC;AAED,+GAA+G;AAC/G,wBAAgB,WAAW,IAAI,OAAO,CAUrC;AAED,MAAM,WAAW,mBAAmB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAQrF;AAED,oGAAoG;AACpG,wBAAgB,kBAAkB,CAAC,UAAU,GAAE,MAAM,GAAG,IAAgC,GAAG,SAAS,GAAG,IAAI,CAQ1G;AAED,qFAAqF;AACrF,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,GAAE,MAAM,GAAG,IAAgC,GAAG,IAAI,CAO3G;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,UAAU,GAAE,MAAkC,GAAG,MAAM,CAWtF"}

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

@@ -0,0 +1,133 @@
+/**
+ * Every word a `Toaster` says by itself. An app in another language passes
+ * its own through `strings`; what it leaves out stays as it is here.
+ */
+export interface ToasterStrings {
+    /** Accessible name of the region the toasts are in. */
+    regionLabel: string;
+    /**
+     * What a toast says when it was pushed with neither a `title` nor a
+     * `message`, by type. A toast with a message shows the message.
+     */
+    successTitle: string;
+    errorTitle: string;
+    warningTitle: string;
+    infoTitle: string;
+    /** The time a toast has left, while its timer runs. */
+    closesIn: (seconds: number) => string;
+    /** The same, while a pointer, a finger or focus holds the timer. */
+    pausedClosesIn: (seconds: number) => string;
+    /** The button that stops the timer; shown with `showCountdown`. */
+    stop: string;
+    /** The button under a toast's opened details, which closes them again. */
+    okay: string;
+    /** Accessible name of the button that opens a toast's details. */
+    expand: string;
+    /** The same button, once they are open. */
+    collapse: string;
+    /** Accessible name of the button that dismisses a toast. */
+    dismiss: string;
+    /**
+     * Read after a toast's text when it has an action, so a screen reader
+     * user hears that there is one. `label` is the action's own.
+     */
+    actionAvailable: (label: string) => string;
+}
+export declare const DEFAULT_TOASTER_STRINGS: ToasterStrings;
+/**
+ * The three lengths a toast can be given by name, in milliseconds.
+ *
+ * `short` (3 s) is for a few words that need no reading time ("Saved").
+ * Anything a person has to read is `medium` (7 s) or `long` (14 s). What
+ * they have to act on, and an error, should stay: `"persistent"`.
+ */
+export declare const TOAST_DURATIONS: {
+    readonly short: 3000;
+    readonly medium: 7000;
+    readonly long: 14000;
+};
+/**
+ * How long a toast stays: one of the named lengths, `"persistent"` (until it
+ * is dismissed), or a number of milliseconds, where `0` is persistent too.
+ */
+export type ToastDuration = keyof typeof TOAST_DURATIONS | "persistent" | number;
+/**
+ * A toast with more visible text than this (title and message together) gets
+ * `long` when the app gave it no duration.
+ */
+export declare const TOAST_LONG_TEXT_LENGTH = 120;
+/**
+ * And one with more than this stays until it is dismissed: `long` was
+ * measured as too short to read it in, and nothing longer has a name.
+ */
+export declare const TOAST_PERSISTENT_TEXT_LENGTH = 240;
+/**
+ * How long a toast stays, in milliseconds; `0` is until it is dismissed.
+ *
+ * What the app said for the toast wins, whatever the toast is. When it said
+ * nothing: an error stays, and so does a toast with an action, since the user
+ * has to be able to reach the button. So does a text longer than
+ * `TOAST_PERSISTENT_TEXT_LENGTH`, whatever the Toaster's default. Everything
+ * else gets the Toaster's `defaultDuration`, or `medium` without one; a text
+ * longer than `TOAST_LONG_TEXT_LENGTH` gets `long`, unless the default is
+ * longer still.
+ */
+export declare function resolveToastDuration(toast: {
+    duration?: ToastDuration;
+    type: string;
+    hasAction: boolean;
+    textLength: number;
+}, defaultDuration?: ToastDuration): number;
+/**
+ * The least a toast has left when a finger that held it lifts, in seconds.
+ * As long as `short`: holding a short toast starts it again, in effect.
+ */
+export declare const TOAST_SECONDS_AFTER_HOLD = 3;
+/** What `onpausechange` of a `Toaster` is called with. */
+export interface ToastPauseChange {
+    /** The id of the toast, as `pushToast` returned it. */
+    id: string;
+    /** True while a pointer is over the toast, a finger is on it, or focus is inside it. */
+    paused: boolean;
+}
+/**
+ * How a `Toaster` presents its toasts. `"stack"` is the stack in the corner
+ * (and across the width on a phone); `"snackbar"` is the compact form for a
+ * phone, one at a time, docked above whatever is at the bottom; `"auto"` is
+ * the snackbar below 640px and the stack from there up.
+ */
+export type ToasterMode = "stack" | "snackbar" | "auto";
+/** The words of a toast on screen: its first line, and the line under it if there is one. */
+export declare function toastTexts(toast: {
+    title?: string;
+    message: string;
+    type: string;
+}, strings: Pick<ToasterStrings, "successTitle" | "errorTitle" | "warningTitle" | "infoTitle">): {
+    title: string;
+    message: string;
+    headerTitle: string;
+    secondLine: string;
+};
+/**
+ * True when the toast has to stay until a person has dealt with it, which
+ * makes it the one a `max` never drops: an error, one with an action, one
+ * with no end (`"persistent"`, or text too long to read in `long`).
+ */
+export declare function toastStays(toast: {
+    title?: string;
+    message: string;
+    type: string;
+    duration?: ToastDuration;
+    action?: unknown;
+}, defaultDuration?: ToastDuration): boolean;
+/**
+ * Ids of toasts that a `max` is dropping to make room for a newer one. Such a
+ * toast leaves at once, without the exit motion: a newer toast is coming in
+ * where it is, and the two would otherwise lie on each other for a moment.
+ */
+export declare const toastsReplaced: Set<string>;
+/** The Material standard curve (`--ease-standard`), as an easing function for a script-driven slide. */
+export declare function easeStandard(t: number): number;
+/** A toast dragged further than this share of its width is dismissed, flick or not. */
+export declare const TOAST_SWIPE_DISMISS_FRACTION = 0.4;
+//# sourceMappingURL=toaster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/components/util/toaster.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC3B,uDAAuD;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,oEAAoE;IACpE,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C;AAED,eAAO,MAAM,uBAAuB,EAAE,cAcrC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;CAAsD,CAAC;AAEnF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;AAEjF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAchD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAChC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,EACzF,eAAe,CAAC,EAAE,aAAa,GAChC,MAAM,CAQR;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAE1C,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC7B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,wFAAwF;IACxF,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAExD,6FAA6F;AAC7F,wBAAgB,UAAU,CACtB,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EACxD,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,GAAG,YAAY,GAAG,cAAc,GAAG,WAAW,CAAC,GAC5F;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAmB7E;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,EACpG,eAAe,CAAC,EAAE,aAAa,GAChC,OAAO,CAUT;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,aAAoB,CAAC;AAEhD,wGAAwG;AACxG,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAY9C;AAED,uFAAuF;AACvF,eAAO,MAAM,4BAA4B,MAAM,CAAC"}

package/dist/components/util/tone-surface.d.ts

@@ -0,0 +1,34 @@
+import type { SurfaceTone } from "../types/variants.js";
+export type ToneSurfaceOptions = {
+    tone?: SurfaceTone;
+    /** Any CSS colour for a fill the app chooses, such as `var(--group-colour)`. Wins over `tone`. */
+    fill?: string;
+    /** The label colour on `fill`, any CSS colour. Without it the label is the block's own text colour. */
+    onFill?: string;
+};
+export type ToneSurface = {
+    /** Utility classes for the fill and its on-colour scope; empty for `neutral`. */
+    classes: string;
+    /** Inline style for a custom fill, or undefined. */
+    style: string | undefined;
+    /** True when the surface is filled by tone or by `fill`, so the fill is its edge. */
+    filled: boolean;
+    /** True when the fill is the brand, the accent or a custom colour (the on-colour scope applies). */
+    scoped: boolean;
+};
+/**
+ * The classes and the inline style for a filled surface, shared by Card and Block.
+ *
+ * - `neutral` (the default): nothing, the component paints what it always did.
+ * - `tint`: the brand tint as a content surface. Text, links and rings are
+ *   guarded on it, so it needs no on-colour scope.
+ * - `brand` / `accent`: the fill and its `on-brand` / `on-accent` scope.
+ * - `fill`: the app's own colour. Wins over `tone`. The scope is `on-fill`,
+ *   with `onFill` as the label colour.
+ *
+ * The library cannot check the contrast of a `fill` and `onFill` pair: it is
+ * a colour the app picks at run time, so the app must hold the label to 4.5:1
+ * on the fill (3:1 for edges and focus rings).
+ */
+export declare function toneSurface({ tone, fill, onFill }: ToneSurfaceOptions): ToneSurface;
+//# sourceMappingURL=tone-surface.d.ts.map

package/dist/components/util/tone-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone-surface.d.ts","sourceRoot":"","sources":["../../../src/components/util/tone-surface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACtB,iFAAiF;IACjF,OAAO,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,qFAAqF;IACrF,MAAM,EAAE,OAAO,CAAC;IAChB,oGAAoG;IACpG,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,GAAG,WAAW,CAmB/F"}

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

@@ -0,0 +1,10 @@
+/**
+ * One tooltip at a time. A tooltip that opens closes the one that was open: a
+ * mouse resting on one trigger while Tab moves focus to another would
+ * otherwise show both, one of them stale.
+ */
+/** Called by a tooltip as it opens, with what closes it. Closes any other. */
+export declare function claimOpenTooltip(close: () => void): void;
+/** Called by a tooltip as it closes or goes. */
+export declare function releaseOpenTooltip(close: () => void): void;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/util/tooltip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAGxD;AAED,gDAAgD;AAChD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAE1D"}

package/dist/components/util/top-navbar.d.ts

@@ -0,0 +1,35 @@
+/** The words `TopNavbar` says by itself. Pass any of them as `strings`. */
+export interface TopNavbarStrings {
+    /** Accessible name of the phone menu's button while the menu is closed. */
+    openMenu: string;
+    /** The same button, while the inline menu is open (the sheet's own button closes it). */
+    closeMenu: string;
+    /** The phone menu's sheet: its heading and its accessible name, and the name of the links' `nav` when the bar has no `ariaLabel`. */
+    menuTitle?: string;
+    /** The heading over the theme choice in the phone menu's sheet. */
+    themeHeading?: string;
+    /** Read after the label of a link that opens in a new tab. */
+    opensInNewTab: string;
+}
+/**
+ * Every word, including the optional ones: `menuTitle` and `themeHeading` are
+ * optional in `TopNavbarStrings` so that code written before they existed, with
+ * a complete object, still type-checks.
+ */
+export declare const DEFAULT_TOP_NAVBAR_STRINGS: Required<TopNavbarStrings>;
+/**
+ * Where a piece of the bar's `actions` is drawn: in the `bar`, or in the
+ * `menu` sheet that opens below `collapseAt`, where it has the full width.
+ */
+export type TopNavbarPlace = "bar" | "menu";
+/** Called by the sheet's content: everything rendered inside it reads `"menu"`. */
+export declare function markTopNavbarPlace(place: TopNavbarPlace): void;
+/**
+ * Where the component calling this is drawn. Call it while the component
+ * initialises. A control in a TopNavbar's `actions` snippet can then draw
+ * itself large in the sheet and compact in the bar, with no argument to the
+ * snippet: `{#snippet actions()}<MyPicker />{/snippet}` keeps working. Outside
+ * a TopNavbar, in the bar and in `menu="inline"` it is `"bar"`.
+ */
+export declare function getTopNavbarPlace(): TopNavbarPlace;
+//# sourceMappingURL=top-navbar.d.ts.map

package/dist/components/util/top-navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-navbar.d.ts","sourceRoot":"","sources":["../../../src/components/util/top-navbar.ts"],"names":[],"mappings":"AAEA,2EAA2E;AAC3E,MAAM,WAAW,gBAAgB;IAC7B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,yFAAyF;IACzF,SAAS,EAAE,MAAM,CAAC;IAClB,qIAAqI;IACrI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,aAAa,EAAE,MAAM,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAMjE,CAAC;AAIF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,MAAM,CAAC;AAE5C,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAE9D;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,cAAc,CAElD"}

package/dist/components/util/touch-target.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Touch targets: 44 by 44px on a coarse pointer, nothing changed on a fine one.
+ *
+ * There are two ways to get there, and which one a control takes depends on
+ * what stands beside it.
+ *
+ * 1. The control itself grows: `pointer-coarse:min-h-11` (and `min-w-11` for a
+ *    square one), written where the size is. Button, IconButton, Input and
+ *    Select do this at `sm` and `md`, so a row of them still lines up; so does
+ *    any control that has a neighbour close by (the handle and the move
+ *    buttons of a SortableList row). `scripts/check-control-geometry.js` holds
+ *    the shared controls to it.
+ *
+ * 2. The control keeps its size and an invisible layer around it takes the
+ *    touch: `TOUCH_HIT_AREA` below. Only for a control that stands alone, with
+ *    nothing pressable within about 10px: a close button in the corner of an
+ *    Alert or in the header of a Modal, the switch of a Toggle. The layer
+ *    reaches past the visible box, so beside another control it would cover
+ *    that control's edge and a tap there would fire the wrong one. An `xs`
+ *    IconButton had such a layer and lost it for that reason. A Toggle is
+ *    stacked in settings lists, so its row is 44px tall on a coarse pointer:
+ *    the layer of one switch then never reaches the switch above or below.
+ */
+/**
+ * An invisible hit area of at least 44 by 44px, centred on the element, on a
+ * coarse pointer only. The element must be positioned (`relative`, `absolute`
+ * or `fixed`; `pointer-coarse:relative` where it was not positioned before, so
+ * a fine pointer sees no change) and must not clip its overflow.
+ */
+export declare const TOUCH_HIT_AREA = "pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2 pointer-coarse:before:size-full pointer-coarse:before:min-h-11 pointer-coarse:before:min-w-11 pointer-coarse:before:-translate-x-1/2 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-['']";
+//# sourceMappingURL=touch-target.d.ts.map

package/dist/components/util/touch-target.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-target.d.ts","sourceRoot":"","sources":["../../../src/components/util/touch-target.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,+SACqR,CAAC"}