zabi-components 8.0.0 → 8.1.0

package/dist/util/focus-utils.js

@@ -2,6 +2,8 @@
 /** From `app.css` `@layer components` — import the library/app stylesheet. */
 export const FOCUS_BRAND_CLASS = "focus-brand";
 export const FOCUS_NAV_CLASS = "focus-nav";
+/** Every dialog panel: `dialog` and `alertdialog` are both dialogs to a focus trap. */
+export const DIALOG_SELECTOR = '[role="dialog"], [role="alertdialog"]';
 export function getFocusableElements(container) {
     const selector = [
         'button:not([disabled])',
@@ -12,10 +14,81 @@ export function getFocusableElements(container) {
         '[tabindex]:not([tabindex="-1"])',
     ].join(', ');
     return Array.from(container.querySelectorAll(selector)).filter((el) => {
+        // `tabindex="-1"` takes a control out of the Tab order whatever it
+        // is: the items of a list with one roving Tab stop are buttons,
+        // and counting them made a focus trap think the last of them was
+        // its last stop, so Tab from the real one left the dialog.
+        if (el.getAttribute('tabindex') === '-1')
+            return false;
         const style = window.getComputedStyle(el);
         return style.display !== 'none' && style.visibility !== 'hidden';
     });
 }
+/** The region a `Toaster` renders its toasts in. */
+export 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 function isInsideToastRegion(target) {
+    if (typeof Node === "undefined" || !(target instanceof Node))
+        return false;
+    // A press on text can report the text node.
+    const element = target instanceof Element ? target : target.parentElement;
+    return !!element?.closest(TOAST_REGION_SELECTOR);
+}
+/**
+ * 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 function getToastFocusables() {
+    if (typeof document === "undefined")
+        return [];
+    return Array.from(document.querySelectorAll(TOAST_REGION_SELECTOR)).flatMap((region) => getFocusableElements(region));
+}
+/**
+ * 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 function cycleTrappedFocus(container, event) {
+    const focusable = [...getFocusableElements(container), ...getToastFocusables()];
+    if (focusable.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!active || !focusable.includes(active)) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+        return;
+    }
+    if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    // Between the overlay and the toasts the browser's own order would walk
+    // the page that lies between them in the document: step across by hand.
+    const next = focusable[focusable.indexOf(active) + (event.shiftKey ? -1 : 1)];
+    if (active.closest(TOAST_REGION_SELECTOR) !== next.closest(TOAST_REGION_SELECTOR)) {
+        event.preventDefault();
+        next.focus();
+    }
+}
 /** Tab wraps first↔last inside `container`. Caller should pair with `saveFocus` / `returnFocus`. */
 export function trapFocus(container) {
     const focusableElements = getFocusableElements(container);
@@ -53,7 +126,11 @@ export function trapFocus(container) {
         container.removeEventListener('keydown', handleKeydown);
     };
 }
-/** One entry per overlay open; `returnFocus` pops LIFO (nested modals). */
+/**
+ * One entry per overlay open; `returnFocus` pops LIFO (nested modals). The id
+ * is kept beside the element: the element may be gone by the time the overlay
+ * closes, replaced by another that carries the same id.
+ */
 const focusReturnStack = [];
 export function saveFocus() {
     if (typeof document === 'undefined') {
@@ -61,22 +138,31 @@ export function saveFocus() {
     }
     const active = document.activeElement;
     if (active instanceof HTMLElement && active !== document.body) {
-        focusReturnStack.push(active);
+        focusReturnStack.push({ element: active, id: active.id });
     }
     else {
         focusReturnStack.push(null);
     }
 }
-/** 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 function returnFocus() {
     if (typeof document === 'undefined') {
         return;
     }
-    const el = focusReturnStack.pop();
-    if (!el) {
+    const saved = focusReturnStack.pop();
+    if (!saved) {
         return;
     }
-    if (typeof el.focus !== 'function' || !el.isConnected) {
+    const el = saved.element.isConnected
+        ? saved.element
+        : saved.id
+            ? document.getElementById(saved.id)
+            : null;
+    if (!el || typeof el.focus !== 'function') {
         return;
     }
     try {
@@ -86,9 +172,96 @@ export function returnFocus() {
         /* embeds / shadow roots may reject programmatic focus */
     }
 }
-export function focusFirstElement(container) {
+/**
+ * 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 function focusFirstElement(container, preferred) {
     const focusableElements = getFocusableElements(container);
-    if (focusableElements.length > 0) {
-        focusableElements[0].focus();
+    const wanted = preferred
+        ? focusableElements.find((element) => element.matches(preferred))
+        : undefined;
+    (wanted ?? focusableElements[0] ?? container).focus();
+}
+/** Open modal overlays, oldest first. The last one is the one on top. */
+const overlayStack = [];
+/**
+ * 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 function joinOverlayStack(panel) {
+    const depth = overlayStack.reduce((max, entry) => Math.max(max, entry.depth + 1), 0);
+    const entry = { panel, depth };
+    overlayStack.push(entry);
+    return {
+        depth,
+        leave() {
+            const index = overlayStack.indexOf(entry);
+            if (index !== -1)
+                overlayStack.splice(index, 1);
+        },
+    };
+}
+/**
+ * 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 function recoverStrayFocus(container, options = {}) {
+    const joined = overlayStack.some((entry) => entry.panel === container)
+        ? null
+        : joinOverlayStack(container);
+    function handleKeydown(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'Tab' && event.key !== 'Escape')
+            return;
+        // Inside a dialog, that dialog's own handlers deal with the key.
+        if (document.activeElement?.closest(DIALOG_SELECTOR))
+            return;
+        if (overlayStack[overlayStack.length - 1]?.panel !== container)
+            return;
+        // In a toast: part of the trap. Tab goes on through the toasts and
+        // back into the overlay; Escape is the toast region's own business.
+        if (document.activeElement?.closest(TOAST_REGION_SELECTOR)) {
+            if (event.key === 'Tab')
+                cycleTrappedFocus(container, event);
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'Escape') {
+            options.onEscape?.(event);
+            return;
+        }
+        (getFocusableElements(container)[0] ?? container).focus();
     }
+    document.addEventListener('keydown', handleKeydown);
+    return () => {
+        document.removeEventListener('keydown', handleKeydown);
+        joined?.leave();
+    };
 }

package/dist/util/hydration.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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;

package/dist/util/hydration.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+/**
+ * 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 function groupBinding(read, choose, restore) {
+    return {
+        get value() {
+            return read();
+        },
+        set value(next) {
+            if (next === null || next === undefined)
+                restore();
+            else
+                choose(next);
+        },
+    };
+}
+/**
+ * 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 function resetValueOf(inputs) {
+    for (const input of inputs) {
+        if (input?.defaultChecked)
+            return input.__value;
+    }
+    return undefined;
+}

package/dist/util/keyboard-inset.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How much of the bottom of the page the on-screen keyboard covers.
+ *
+ * Browsers disagree on what a keyboard does. Some shrink the layout viewport,
+ * and everything pinned to the bottom moves up by itself. Others (iOS Safari,
+ * and Chrome on Android by default) leave the layout alone and only shrink
+ * the *visual* viewport, so a bar pinned to the bottom ends up behind the
+ * keyboard. The difference between the two viewports is the part to lift a
+ * bar by; where the layout has already shrunk, it is 0.
+ */
+/** The covered height in px, or 0 where it cannot be told (the server, an old browser). */
+export declare function readKeyboardInset(): number;
+/**
+ * Calls `onChange` with the inset now, and again whenever it changes. Call it
+ * in the browser; the returned function stops it.
+ */
+export declare function watchKeyboardInset(onChange: (inset: number) => void): () => void;

package/dist/util/keyboard-inset.js

@@ -0,0 +1,53 @@
+/**
+ * How much of the bottom of the page the on-screen keyboard covers.
+ *
+ * Browsers disagree on what a keyboard does. Some shrink the layout viewport,
+ * and everything pinned to the bottom moves up by itself. Others (iOS Safari,
+ * and Chrome on Android by default) leave the layout alone and only shrink
+ * the *visual* viewport, so a bar pinned to the bottom ends up behind the
+ * keyboard. The difference between the two viewports is the part to lift a
+ * bar by; where the layout has already shrunk, it is 0.
+ */
+/** The covered height in px, or 0 where it cannot be told (the server, an old browser). */
+export function readKeyboardInset() {
+    if (typeof window === "undefined")
+        return 0;
+    const viewport = window.visualViewport;
+    if (!viewport)
+        return 0;
+    // Pinch zoom shrinks the visual viewport too, and is not a keyboard.
+    if (Math.abs(viewport.scale - 1) > 0.01)
+        return 0;
+    const layoutHeight = document.documentElement.clientHeight;
+    const inset = layoutHeight - viewport.height - viewport.offsetTop;
+    // A pixel of rounding is not a keyboard either.
+    return inset > 1 ? Math.round(inset) : 0;
+}
+/**
+ * Calls `onChange` with the inset now, and again whenever it changes. Call it
+ * in the browser; the returned function stops it.
+ */
+export function watchKeyboardInset(onChange) {
+    if (typeof window === "undefined")
+        return () => { };
+    const viewport = window.visualViewport;
+    let last = -1;
+    const update = () => {
+        const next = readKeyboardInset();
+        if (next === last)
+            return;
+        last = next;
+        onChange(next);
+    };
+    update();
+    if (!viewport)
+        return () => { };
+    viewport.addEventListener("resize", update);
+    viewport.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+        viewport.removeEventListener("resize", update);
+        viewport.removeEventListener("scroll", update);
+        window.removeEventListener("resize", update);
+    };
+}

package/dist/util/media-grid.d.ts

@@ -0,0 +1,50 @@
+/** Types and pure helpers for `MediaGrid`. Kept out of the component so they can be tested without a DOM. */
+export type MediaGridKey = string | number;
+export type MediaGridItemType = "image" | "video";
+/** Payload of `onselect`. */
+export interface MediaGridSelectDetail<T> {
+    item: T;
+    /** False when the activation cleared the item's selection. */
+    selected: boolean;
+    /** Every selected key after the change: one or none unless `multiple`. */
+    keys: MediaGridKey[];
+}
+/** Every built-in string. Pass a partial object to `strings` to translate. */
+export interface MediaGridStrings {
+    /** Accessible name of an item's delete button. */
+    deleteLabel: (label: string) => string;
+    /** Accessible name of a video item; an image is named by its label alone. */
+    videoLabel: (label: string) => string;
+    /** Announced, and never shown, while `loading` is set. */
+    loading: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    /**
+     * How to get around by keyboard. Read once when focus enters the grid,
+     * and shown below it while it has keyboard focus. Keep it to one short
+     * sentence.
+     */
+    keyboardHint: string;
+}
+export declare const MEDIA_GRID_STRINGS: MediaGridStrings;
+export { isVideoUrl } from "./media.js";
+/**
+ * Columns in the rendered grid, read from the top edge of each tile in DOM
+ * order: the first row ends where the top edge changes. The layout is CSS
+ * `auto-fill`, so only the browser knows the answer.
+ */
+export declare function columnCount(tops: readonly number[]): number;
+export type MediaGridMove = "left" | "right" | "up" | "down" | "rowStart" | "rowEnd" | "first" | "last";
+/**
+ * Index a navigation key lands on. Nothing wraps. Moving down from the row
+ * above a short last row lands on the last item, so the last row can always
+ * be reached from any column.
+ */
+export declare function moveIndex(index: number, move: MediaGridMove, columns: number, total: number): number;
+/**
+ * The move a key asks for in a grid of tiles, or undefined for a key that is
+ * not a navigation key. Left and Right follow what is on screen, which is
+ * mirrored in a right-to-left layout; Ctrl with Home or End goes to the first
+ * or last tile. Shared by `MediaGrid` and `PhotoGrid`.
+ */
+export declare function moveForKey(event: Pick<KeyboardEvent, "key" | "ctrlKey">, rtl: boolean): MediaGridMove | undefined;

package/dist/util/media-grid.js

@@ -0,0 +1,81 @@
+/** Types and pure helpers for `MediaGrid`. Kept out of the component so they can be tested without a DOM. */
+export const MEDIA_GRID_STRINGS = {
+    deleteLabel: (label) => `Delete ${label}`,
+    videoLabel: (label) => `${label}, video`,
+    loading: "Loading media",
+    emptyTitle: "No media yet",
+    emptyDescription: "Images and videos you upload appear here.",
+    keyboardHint: "Use the arrow keys to move between items.",
+};
+// The rule is shared with `ImageUpload`; re-exported so this module's exports stay as they were.
+export { isVideoUrl } from "./media.js";
+/**
+ * Columns in the rendered grid, read from the top edge of each tile in DOM
+ * order: the first row ends where the top edge changes. The layout is CSS
+ * `auto-fill`, so only the browser knows the answer.
+ */
+export function columnCount(tops) {
+    if (tops.length === 0)
+        return 1;
+    let count = 1;
+    while (count < tops.length && Math.abs(tops[count] - tops[0]) < 1)
+        count += 1;
+    return count;
+}
+/**
+ * Index a navigation key lands on. Nothing wraps. Moving down from the row
+ * above a short last row lands on the last item, so the last row can always
+ * be reached from any column.
+ */
+export function moveIndex(index, move, columns, total) {
+    if (total === 0)
+        return -1;
+    const last = total - 1;
+    const rowStart = index - (index % columns);
+    switch (move) {
+        case "left":
+            return Math.max(0, index - 1);
+        case "right":
+            return Math.min(last, index + 1);
+        case "up":
+            return index - columns >= 0 ? index - columns : index;
+        case "down": {
+            if (index + columns <= last)
+                return index + columns;
+            // A row exists below, but not under this column.
+            return rowStart + columns <= last ? last : index;
+        }
+        case "rowStart":
+            return rowStart;
+        case "rowEnd":
+            return Math.min(last, rowStart + columns - 1);
+        case "first":
+            return 0;
+        case "last":
+            return last;
+    }
+}
+const KEY_MOVES = {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    Home: "rowStart",
+    End: "rowEnd",
+};
+/**
+ * The move a key asks for in a grid of tiles, or undefined for a key that is
+ * not a navigation key. Left and Right follow what is on screen, which is
+ * mirrored in a right-to-left layout; Ctrl with Home or End goes to the first
+ * or last tile. Shared by `MediaGrid` and `PhotoGrid`.
+ */
+export function moveForKey(event, rtl) {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        return (event.key === "ArrowLeft") !== rtl ? "left" : "right";
+    }
+    if (event.ctrlKey && event.key === "Home")
+        return "first";
+    if (event.ctrlKey && event.key === "End")
+        return "last";
+    if (!event.ctrlKey)
+        return KEY_MOVES[event.key];
+    return undefined;
+}

package/dist/util/media.d.ts

@@ -0,0 +1,5 @@
+/** How the library tells a video from an image by its address. Shared by `ImageUpload` and `MediaGrid`. */
+/** True for a path or file name with a video extension, before any query or hash. */
+export declare function isVideoPath(path: string): boolean;
+/** True for a video data URL, or a URL whose path has a video extension. */
+export declare function isVideoUrl(url: string): boolean;

package/dist/util/media.js

@@ -0,0 +1,10 @@
+/** How the library tells a video from an image by its address. Shared by `ImageUpload` and `MediaGrid`. */
+const VIDEO_EXTENSION = /\.(mp4|m4v|webm|ogv|mov)$/i;
+/** True for a path or file name with a video extension, before any query or hash. */
+export function isVideoPath(path) {
+    return VIDEO_EXTENSION.test(path.split(/[?#]/)[0]);
+}
+/** True for a video data URL, or a URL whose path has a video extension. */
+export function isVideoUrl(url) {
+    return url.startsWith("data:video/") || isVideoPath(url);
+}

package/dist/util/overlay-chrome.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The chrome of an overlay at large text: the header of a BottomSheet, Drawer,
+ * Modal or SlideUp, and the padding of its footer.
+ *
+ * Tailwind's spacing is in rem, so at `html { font-size: 200% }` the gutters,
+ * the gap above the title, the title and the close button all doubled. On a
+ * phone that left a third of a half-height sheet to what the sheet was opened
+ * for. This is navigation chrome, as the app bar is (see AppBar): it says
+ * where you are and how to leave, and it is not what the user enlarged the
+ * text to read. So it is laid out in px, and its title grows to 1.3 times its
+ * size and stops. The content, and whatever the app puts in the footer, scale
+ * in full. docs/ACCESSIBILITY.md has the reasoning against WCAG 1.4.4.
+ */
+/**
+ * On the header box: the spacing scale in px for everything inside it, so
+ * `px-6`, `gap-4`, `size-8` and the 44px of `TOUCH_HIT_AREA` are the sizes
+ * they are at 100% text. Only for a box that holds chrome alone: an app's
+ * Button inside it would stop growing too, which is why a footer spells its
+ * padding out in px instead.
+ */
+export declare const OVERLAY_CHROME = "[--spacing:4px]";
+/**
+ * How a title wraps: onto as many lines as it needs, between words, and a
+ * word wider than the whole line is cut rather than left sticking out.
+ */
+export declare const OVERLAY_TITLE_WRAP = "[overflow-wrap:break-word]";
+/**
+ * On the title while the text is enlarged (`textIsEnlarged`): a word that does
+ * not fit at the end of a line is hyphenated by the rules of the page's
+ * `lang`, where the browser has them, before it is cut.
+ *
+ * Not at the default text size, and not narrowed with `hyphenate-limit-chars`:
+ * `hyphens: auto` hyphenates at the end of every line, not only where a word
+ * is too wide, and what a browser offers as a hyphenation point is the
+ * platform's ("sett-ings", "histor-y" in Chromium on macOS). A title that
+ * wraps between words today would get those. A limit, where it is supported
+ * at all (not in Safari), turns a hyphenated break of a shorter word into a
+ * plain cut.
+ */
+export declare const OVERLAY_TITLE_HYPHENS = "hyphens-auto";
+/**
+ * Whether the reader has enlarged the text: the root font size is above the
+ * 16px every browser starts from. Read when an overlay opens. False on the
+ * server and until then, which is the layout at the default size.
+ */
+export declare function textIsEnlarged(): boolean;
+/** A title of 20px (`text-xl`): up to 26px, on the same 1.4 line. */
+export declare const OVERLAY_TITLE_XL = "text-[length:min(1.25rem,26px)] leading-[1.4]";
+/** A title of 24px (`text-2xl`): up to 31.2px, on the same 4/3 line. */
+export declare const OVERLAY_TITLE_2XL = "text-[length:min(1.5rem,31.2px)] leading-[calc(4/3)]";
+/** The "×" of a close button: a control, so the size it is at 100%. */
+export declare const OVERLAY_CLOSE_GLYPH = "text-[24px] leading-[32px]";