zabi-components 8.0.0 → 9.0.0

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

package/dist/util/overlay-chrome.js

@@ -0,0 +1,56 @@
+/**
+ * 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 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 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 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 function textIsEnlarged() {
+    if (typeof document === "undefined")
+        return false;
+    return parseFloat(getComputedStyle(document.documentElement).fontSize) > 16;
+}
+/** A title of 20px (`text-xl`): up to 26px, on the same 1.4 line. */
+export 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 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 const OVERLAY_CLOSE_GLYPH = "text-[24px] leading-[32px]";

package/dist/util/overlay.d.ts

@@ -0,0 +1,71 @@
+/**
+ * What Modal, SlideUp and Drawer share beyond `focus-utils.ts`: the scroll
+ * lock on `<body>` and the Tab cycle inside the panel. One copy, so the
+ * overlays cannot drift apart and keep working when nested in any order.
+ */
+/**
+ * Stops the page behind an overlay from scrolling. Ref-counted on `<body>`
+ * (`data-zabi-scroll-lock`), so nested overlays share one lock and the page
+ * scrolls again only when the last one has released it.
+ *
+ * Call it when the overlay opens, in the browser, and call the returned
+ * function when it closes.
+ */
+export declare function lockBodyScroll(): () => void;
+/**
+ * Keeps Tab inside `container`: call it from the panel's `keydown` handler.
+ * Focusables are re-queried on every Tab, so content added while the overlay
+ * is open stays inside the cycle. A Tab that comes from a dialog nested in the
+ * container is left to that dialog. The toasts on screen are in the cycle too,
+ * after the container's own controls: see `getToastFocusables`.
+ */
+export declare function trapTabKey(container: HTMLElement | undefined, event: KeyboardEvent): void;
+/**
+ * Watches a scrolling box in an overlay and reports whether it has to be a
+ * Tab stop itself: true when its content is taller than it and holds nothing
+ * that can take focus, so the keyboard would otherwise have no way to scroll
+ * it. The answer changes with the viewport and with the content, so it is
+ * reported again whenever either does.
+ *
+ * Call it when the overlay opens, in the browser; the returned function stops it.
+ */
+export declare function watchScrollerNeedsFocus(box: HTMLElement, onChange: (needsFocus: boolean) => void): () => void;
+/**
+ * Keeps an overlay on the part of the screen the on-screen keyboard leaves.
+ *
+ * Where the keyboard covers the page instead of shrinking it (iOS Safari,
+ * Chrome on Android), a panel at the bottom of a `fixed inset-0` root ends up
+ * behind it, footer and all. This moves the root's bottom edge up to the top
+ * of the keyboard (and its top edge down, if the browser has panned the
+ * screen), so everything laid out against the root follows: a sheet's height,
+ * a pinned footer, a drawer's end. `data-keyboard-open` is set on the root
+ * meanwhile. The field that has focus is scrolled back into view once the
+ * root has its new size. Where the page shrinks by itself, nothing is done.
+ *
+ * The root is usually the backdrop as well: while it is moved, its dimming is
+ * carried on past its edges, so the page does not show undimmed where the
+ * keyboard was while that slides away.
+ *
+ * `root` is the overlay's outermost, fixed element. Call it when the overlay
+ * opens, in the browser; the returned function stops it and puts the root back.
+ */
+export declare function followKeyboard(root: HTMLElement): () => void;
+/**
+ * Says that `footer` is pinned to the bottom of an open overlay, so what is
+ * drawn over the overlays (the toast stack) can stay off it. Call it when the
+ * footer is rendered, in the browser; the returned function withdraws it.
+ */
+export declare function registerOverlayFooter(footer: HTMLElement): () => void;
+/**
+ * Says that `header` is the top of an open overlay and holds its close
+ * button, so the toast stack starts below it and never lies over the one
+ * control that always closes the overlay. Call it when the header is
+ * rendered, in the browser; the returned function withdraws it.
+ */
+export declare function registerOverlayHeader(header: HTMLElement): () => void;
+/** The footer of the overlay on top, if it has one. */
+export declare function topOverlayFooter(): HTMLElement | null;
+/** The header of the overlay on top, if it has one. */
+export declare function topOverlayHeader(): HTMLElement | null;
+/** Calls `listener` whenever a registered header or footer appears, goes, moves or changes size. */
+export declare function watchOverlayFooters(listener: () => void): () => void;

package/dist/util/overlay.js

@@ -0,0 +1,240 @@
+/**
+ * What Modal, SlideUp and Drawer share beyond `focus-utils.ts`: the scroll
+ * lock on `<body>` and the Tab cycle inside the panel. One copy, so the
+ * overlays cannot drift apart and keep working when nested in any order.
+ */
+import { cycleTrappedFocus, DIALOG_SELECTOR, getFocusableElements } from "./focus-utils.js";
+import { readKeyboardInset } from "./keyboard-inset.js";
+/**
+ * Stops the page behind an overlay from scrolling. Ref-counted on `<body>`
+ * (`data-zabi-scroll-lock`), so nested overlays share one lock and the page
+ * scrolls again only when the last one has released it.
+ *
+ * Call it when the overlay opens, in the browser, and call the returned
+ * function when it closes.
+ */
+export function lockBodyScroll() {
+    const body = document.body;
+    const count = Number(body.dataset.zabiScrollLock ?? "0");
+    if (count === 0) {
+        body.dataset.zabiScrollLockOverflow = body.style.overflow;
+        body.style.overflow = "hidden";
+    }
+    body.dataset.zabiScrollLock = String(count + 1);
+    return () => {
+        const next = Number(body.dataset.zabiScrollLock ?? "1") - 1;
+        if (next <= 0) {
+            body.style.overflow = body.dataset.zabiScrollLockOverflow ?? "";
+            delete body.dataset.zabiScrollLock;
+            delete body.dataset.zabiScrollLockOverflow;
+        }
+        else {
+            body.dataset.zabiScrollLock = String(next);
+        }
+    };
+}
+/**
+ * Keeps Tab inside `container`: call it from the panel's `keydown` handler.
+ * Focusables are re-queried on every Tab, so content added while the overlay
+ * is open stays inside the cycle. A Tab that comes from a dialog nested in the
+ * container is left to that dialog. The toasts on screen are in the cycle too,
+ * after the container's own controls: see `getToastFocusables`.
+ */
+export function trapTabKey(container, event) {
+    if (event.key !== "Tab" || !container)
+        return;
+    // A nested dialog handles its own Tab cycle.
+    const owner = event.target?.closest?.(DIALOG_SELECTOR);
+    if (owner && owner !== container)
+        return;
+    cycleTrappedFocus(container, event);
+}
+/**
+ * Watches a scrolling box in an overlay and reports whether it has to be a
+ * Tab stop itself: true when its content is taller than it and holds nothing
+ * that can take focus, so the keyboard would otherwise have no way to scroll
+ * it. The answer changes with the viewport and with the content, so it is
+ * reported again whenever either does.
+ *
+ * Call it when the overlay opens, in the browser; the returned function stops it.
+ */
+export function watchScrollerNeedsFocus(box, onChange) {
+    const measure = () => {
+        onChange(box.scrollHeight > box.clientHeight && getFocusableElements(box).length === 0);
+    };
+    measure();
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : undefined;
+    resize?.observe(box);
+    const mutation = new MutationObserver(measure);
+    mutation.observe(box, { childList: true, subtree: true, characterData: true });
+    return () => {
+        resize?.disconnect();
+        mutation.disconnect();
+    };
+}
+/**
+ * Keeps an overlay on the part of the screen the on-screen keyboard leaves.
+ *
+ * Where the keyboard covers the page instead of shrinking it (iOS Safari,
+ * Chrome on Android), a panel at the bottom of a `fixed inset-0` root ends up
+ * behind it, footer and all. This moves the root's bottom edge up to the top
+ * of the keyboard (and its top edge down, if the browser has panned the
+ * screen), so everything laid out against the root follows: a sheet's height,
+ * a pinned footer, a drawer's end. `data-keyboard-open` is set on the root
+ * meanwhile. The field that has focus is scrolled back into view once the
+ * root has its new size. Where the page shrinks by itself, nothing is done.
+ *
+ * The root is usually the backdrop as well: while it is moved, its dimming is
+ * carried on past its edges, so the page does not show undimmed where the
+ * keyboard was while that slides away.
+ *
+ * `root` is the overlay's outermost, fixed element. Call it when the overlay
+ * opens, in the browser; the returned function stops it and puts the root back.
+ */
+export function followKeyboard(root) {
+    if (typeof window === "undefined")
+        return () => { };
+    const viewport = window.visualViewport;
+    const restore = () => {
+        root.style.bottom = "";
+        root.style.top = "";
+        root.style.boxShadow = "";
+        delete root.dataset.keyboardOpen;
+    };
+    let last = "";
+    const update = () => {
+        const inset = readKeyboardInset();
+        // How far the browser has panned the screen to show the field. It
+        // counts when the pan is complete as well: nothing of the page is
+        // under the keyboard then (the inset is 0), and the top of the root
+        // is as far above the screen as the keyboard is tall.
+        const shorter = !!viewport &&
+            Math.abs(viewport.scale - 1) <= 0.01 &&
+            document.documentElement.clientHeight - viewport.height > 1;
+        const panned = shorter ? Math.max(0, Math.round(viewport.offsetTop)) : 0;
+        const key = `${inset}:${panned}`;
+        if (key === last)
+            return;
+        last = key;
+        if (inset > 0 || panned > 0) {
+            root.style.bottom = inset > 0 ? `${inset}px` : "";
+            root.style.top = panned > 0 ? `${panned}px` : "";
+            root.dataset.keyboardOpen = "true";
+            // The root is the backdrop too. What it no longer covers is under
+            // the keyboard, but shows for a moment while the keyboard slides
+            // away: the dimming goes on past the root's edges.
+            const dim = getComputedStyle(root).backgroundColor;
+            root.style.boxShadow =
+                dim && dim !== "transparent" && dim !== "rgba(0, 0, 0, 0)"
+                    ? `0 0 0 100vmax ${dim}`
+                    : "";
+        }
+        else {
+            restore();
+        }
+        notifyOverlayFooters();
+        const active = document.activeElement;
+        if (inset > 0 && active instanceof HTMLElement && root.contains(active)) {
+            active.scrollIntoView?.({ block: "nearest" });
+        }
+    };
+    update();
+    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);
+        restore();
+    };
+}
+const overlayParts = [];
+const footerListeners = new Set();
+function notifyOverlayFooters() {
+    for (const listener of footerListeners)
+        listener();
+}
+function registerOverlayPart(part, element) {
+    const panel = element.closest(DIALOG_SELECTOR);
+    let entry = panel ? overlayParts.find((candidate) => candidate.panel === panel) : undefined;
+    if (!entry) {
+        entry = { panel };
+        overlayParts.push(entry);
+    }
+    const mine = entry;
+    mine[part] = element;
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(notifyOverlayFooters) : undefined;
+    observer?.observe(element);
+    notifyOverlayFooters();
+    // An overlay that slides in is still on its way when its parts are
+    // rendered, and a move is not a change of size: say so again once the
+    // panel has come to rest.
+    let frame = 0;
+    const settle = () => {
+        frame = 0;
+        if (typeof panel?.getAnimations === "function" && panel.getAnimations().length > 0) {
+            frame = requestAnimationFrame(settle);
+            return;
+        }
+        notifyOverlayFooters();
+    };
+    if (panel && typeof requestAnimationFrame === "function")
+        frame = requestAnimationFrame(settle);
+    return () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        observer?.disconnect();
+        if (mine[part] === element)
+            delete mine[part];
+        if (!mine.header && !mine.footer) {
+            const index = overlayParts.indexOf(mine);
+            if (index !== -1)
+                overlayParts.splice(index, 1);
+        }
+        notifyOverlayFooters();
+    };
+}
+/**
+ * Says that `footer` is pinned to the bottom of an open overlay, so what is
+ * drawn over the overlays (the toast stack) can stay off it. Call it when the
+ * footer is rendered, in the browser; the returned function withdraws it.
+ */
+export function registerOverlayFooter(footer) {
+    return registerOverlayPart("footer", footer);
+}
+/**
+ * Says that `header` is the top of an open overlay and holds its close
+ * button, so the toast stack starts below it and never lies over the one
+ * control that always closes the overlay. Call it when the header is
+ * rendered, in the browser; the returned function withdraws it.
+ */
+export function registerOverlayHeader(header) {
+    return registerOverlayPart("header", header);
+}
+/** The parts of the overlay opened last that has registered any. */
+function topOverlayParts() {
+    for (let index = overlayParts.length - 1; index >= 0; index -= 1) {
+        const entry = overlayParts[index];
+        if (entry.header?.isConnected || entry.footer?.isConnected)
+            return entry;
+    }
+    return undefined;
+}
+/** The footer of the overlay on top, if it has one. */
+export function topOverlayFooter() {
+    const footer = topOverlayParts()?.footer;
+    return footer?.isConnected ? footer : null;
+}
+/** The header of the overlay on top, if it has one. */
+export function topOverlayHeader() {
+    const header = topOverlayParts()?.header;
+    return header?.isConnected ? header : null;
+}
+/** Calls `listener` whenever a registered header or footer appears, goes, moves or changes size. */
+export function watchOverlayFooters(listener) {
+    footerListeners.add(listener);
+    return () => {
+        footerListeners.delete(listener);
+    };
+}