zabi-components 8.0.0 → 9.0.0

package/dist/molecules/BarChart.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type ChartColor, type ChartDatum, type ChartFormat } from "../util/chart.js";
+/**
+ * A bar chart of one set of values, drawn as plain SVG: upright bars from
+ * a zero line, a label under each and its value over it. A bar is drawn
+ * the way `Progress` draws its fill, and with a `yMax` each bar stands in
+ * a track up to it, as a `Progress` does: so many of so many.
+ *
+ * It is a `figure`: the `label` is its caption, the drawing is hidden
+ * from assistive technology, and the same numbers are in a real table
+ * (off screen unless `showTable`). The bars are one colour, since the
+ * labels tell them apart; a datum may carry its own.
+ */
+type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** The bars, in order: a `label`, a `value`, and a `color` of its own if it needs one. */
+    data: ChartDatum[];
+    /** The colour of the bars: a theme colour by name or any CSS colour. Without it, the first series colour. */
+    color?: ChartColor;
+    /** The top of the value axis, and the ceiling each bar is measured against: with it every bar stands in a track that reaches it. Without it, the highest value rounded up to a tick, and no tracks. */
+    yMax?: number;
+    /** How a value is written: `number` (default), `percent` (72 is "72 %"), or a function. */
+    yFormat?: ChartFormat;
+    /** Height of the drawing in px. The width is the container's. */
+    height?: number;
+    /** The caption, and what the chart is called. */
+    label: string;
+    /** Keeps the caption for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    /** Writes each value over its bar. */
+    showValues?: boolean;
+    /** Shows the data table under the chart; otherwise it is there for assistive technology only. */
+    showTable?: boolean;
+    /** The heading of the table's first column. */
+    categoryTitle?: string;
+    /** The heading of the table's value column. */
+    valueTitle?: string;
+    /** The language of the built-in number formats. Without it, the runtime's. */
+    locale?: string;
+    /** Stands the chart on a panel of the thick material (frosted glass), for a chart that floats over a wash, a tint or a picture. On a plain card it shows nothing: leave it off there. */
+    glass?: boolean;
+    class?: string;
+};
+declare const BarChart: import("svelte").Component<Props, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/molecules/BottomSheet.svelte

@@ -0,0 +1,608 @@
+<script lang="ts">
+    import { zabiCommonStrings } from "../util/zabi-strings.js";
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import X from "@lucide/svelte/icons/x";
+    import {
+        nextSnap,
+        normaliseSnapPoints,
+        settleSnap,
+        type BottomSheetCloseReason,
+        type BottomSheetSnap,
+    } from "../util/bottom-sheet.js";
+    import { cn } from "../util/cn.js";
+    import {
+        OVERLAY_CHROME,
+        OVERLAY_TITLE_HYPHENS,
+        OVERLAY_TITLE_WRAP,
+        OVERLAY_TITLE_XL,
+        textIsEnlarged,
+    } from "../util/overlay-chrome.js";
+    import {
+        focusFirstElement,
+        joinOverlayStack,
+        recoverStrayFocus,
+        returnFocus,
+        saveFocus,
+    } from "../util/focus-utils.js";
+    import {
+        followKeyboard,
+        lockBodyScroll,
+        registerOverlayFooter,
+        registerOverlayHeader,
+        trapTabKey,
+        watchScrollerNeedsFocus,
+    } from "../util/overlay.js";
+    import { portal as portalTo } from "../util/portal.js";
+    import { attachSheetDrag, FLICK_VELOCITY, prefersReducedMotion } from "../util/sheet-drag.js";
+    import { generateId } from "../util/ssr-safe.js";
+
+    /**
+     * A panel that slides up from the bottom of the screen for a picker, a
+     * set of filters or a short form, and rests at half or full height.
+     *
+     * It is a modal dialog, on the same footing as Modal, SlideUp and Drawer:
+     * focus moves in and stays in, the page behind does not scroll, and
+     * Escape, the backdrop, the close button or a swipe down close it and
+     * return focus to what opened it.
+     *
+     * ```svelte
+     * <BottomSheet bind:isOpen title="Filters" bind:snap>
+     *     …
+     *     {#snippet footer()}
+     *         <Button onclick={apply}>Show results</Button>
+     *     {/snippet}
+     * </BottomSheet>
+     * ```
+     *
+     * The grip at the top drags the sheet between its snap points and, past
+     * the lowest, closed. It is also a button that moves the sheet a step, so
+     * the same is there for a keyboard and a screen reader. A swipe on the
+     * content scrolls the content; it moves the sheet only when the content
+     * is at its top and the swipe goes down. A box inside the content that
+     * scrolls by itself (a long list, a text area) keeps every swipe that
+     * starts on it, at its top too, and so does anything carrying
+     * `data-sheet-no-drag` (a map, a wheel, a swipeable row) or a range input.
+     *
+     * From the `md` breakpoint up the sheet is still attached to the bottom
+     * edge, centred and no wider than 40rem.
+     *
+     * Other attributes (`id`, `data-*`, ...) land on the `role="dialog"` panel.
+     */
+    type Props = Omit<
+        HTMLAttributes<HTMLDivElement>,
+        // `onclose` is also a DOM event handler; ours carries a reason instead.
+        "class" | "title" | "onclose" | "onkeydown"
+    > & {
+        isOpen?: boolean;
+        /** Heading of the sheet, and its accessible name. */
+        title: string;
+        description?: string;
+        /**
+         * The heights the sheet can rest at: `half` of the screen, `full`
+         * down from the status bar. With one, the grip only drags.
+         */
+        snapPoints?: BottomSheetSnap[];
+        /**
+         * The snap point the sheet is at. Bindable. It opens at the one you
+         * pass, or at the lowest of `snapPoints`. It is kept while the sheet
+         * is closed: one left at `full` opens at `full` again, bound or not.
+         * Set it when you open the sheet to start somewhere else.
+         */
+        snap?: BottomSheetSnap;
+        /**
+         * The sheet is as tall as its content, up to half the screen, instead
+         * of half the screen whatever it holds. It has one resting height, so
+         * `snapPoints` and `snap` are ignored and the grip only drags. Off by
+         * default.
+         */
+        fit?: boolean;
+        /**
+         * With `fit`: the tallest the sheet grows before its content scrolls.
+         * `half` (the default) is half the screen; `full` is down from the
+         * status bar, like the `full` snap point. Ignored without `fit`.
+         */
+        fitMax?: "half" | "full";
+        /**
+         * Render the overlay in `document.body`, so an ancestor with a
+         * transform, filter or clipped overflow cannot trap it; pass `false`
+         * to render in place. The theme class belongs on `<html>` or `<body>`;
+         * set lower, it does not reach a portalled sheet.
+         */
+        portal?: boolean;
+        /**
+         * When false, Escape, a backdrop click, the close button and a swipe
+         * down do not close the sheet. Focus stays trapped, the grip still
+         * moves it between snap points, and setting `isOpen` yourself still
+         * closes it.
+         */
+        dismissible?: boolean;
+        /** Fired when the sheet closes itself, with what the user did. */
+        onclose?: (detail: { reason: BottomSheetCloseReason }) => void;
+        /**
+         * Hears every keydown in the sheet, after the sheet has handled
+         * Escape. The Tab cycle is kept either way.
+         */
+        onkeydown?: (event: KeyboardEvent) => void;
+        /** Accessible name of the close button. */
+        closeLabel?: string;
+        /** Accessible name of the grip while its button takes the sheet up a step. */
+        expandLabel?: string;
+        /** Accessible name of the grip while its button takes the sheet down a step. */
+        collapseLabel?: string;
+        /**
+         * CSS selector, looked up inside the panel, of the control that takes
+         * focus when the sheet opens (a search field, say). Without it, or
+         * with no match, the first control does: the grip, or the close button.
+         */
+        initialFocus?: string;
+        /** Extra classes for the dialog panel. */
+        class?: string;
+        children?: Snippet;
+        /** Pinned to the bottom of the panel, below the scrolling content. */
+        footer?: Snippet;
+    };
+
+    let {
+        isOpen = $bindable<Exclude<Props["isOpen"], undefined>>(),
+        title,
+        description = "",
+        snapPoints,
+        snap = $bindable(),
+        fit = false,
+        fitMax = "half",
+        portal = true,
+        dismissible = true,
+        onclose,
+        onkeydown,
+        closeLabel: closeLabelGiven,
+        expandLabel: expandLabelGiven,
+        collapseLabel: collapseLabelGiven,
+        initialFocus,
+        class: className = "",
+        children,
+        footer,
+        ...restProps
+    }: Props = $props();
+
+    /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
+    const common = zabiCommonStrings();
+    const closeLabel = $derived(closeLabelGiven ?? common().close);
+    const expandLabel = $derived(expandLabelGiven ?? common().expand);
+    const collapseLabel = $derived(collapseLabelGiven ?? common().collapse);
+
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (isOpen === undefined) isOpen = false;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    // Used only where --duration-slow cannot be read.
+    const SLIDE_MS = 300;
+
+    const titleId = generateId("bottom-sheet-title");
+    const descriptionId = generateId("bottom-sheet-description");
+
+    let root = $state<HTMLDivElement>();
+    let panel = $state<HTMLDivElement>();
+    let header = $state<HTMLDivElement>();
+    let scroller = $state<HTMLDivElement>();
+    let footerElement = $state<HTMLDivElement>();
+
+    /**
+     * Read as the overlay opens: with the text enlarged, a long word in the
+     * title is hyphenated before it is cut (util/overlay-chrome.ts).
+     */
+    let enlargedText = $state(false);
+    $effect(() => {
+        if (isOpen) enlargedText = textIsEnlarged();
+    });
+    let focusActive = false;
+    let scrollerNeedsFocus = $state(false);
+    /** Position among the open overlays; lifts a sheet opened later above the earlier ones. */
+    let depth = $state(0);
+
+    const points = $derived(fit ? normaliseSnapPoints(["half"]) : normaliseSnapPoints(snapPoints));
+    /** The snap point in effect: the one asked for if it is in use, else the lowest. */
+    const currentSnap = $derived(snap && points.includes(snap) ? snap : points[0]);
+    const stepTo = $derived(nextSnap(points, currentSnap));
+
+    /**
+     * `100%` is the overlay, which is the viewport. Full height stops at the
+     * status bar, so the close button stays in reach; half is never so low
+     * that a short screen leaves no room for content, and never above full.
+     */
+    const FULL = "calc(100% - env(safe-area-inset-top, 0px))";
+    const HALF = `min(max(50%, 18rem), ${FULL})`;
+    const snapHeight = $derived(currentSnap === "full" ? FULL : HALF);
+
+    /** While a drag is on: the height and offset it has moved the panel to, in px. */
+    let dragging = $state(false);
+    let dragHeight = $state<number | null>(null);
+    let dragOffset = $state(0);
+    /**
+     * False from opening until the slide-in has ended. The panel's height
+     * transition is for snapping and settling a drag; while the sheet arrives
+     * a late change of height (the overlay shrinking over a keyboard, a snap
+     * set as it opens) would ride the spring and move the content after the
+     * eye has landed on it. Until then the height is applied at once.
+     */
+    let arrived = $state(false);
+
+    function close(reason: BottomSheetCloseReason) {
+        if (!dismissible) return;
+        isOpen = false;
+        if (focusActive) {
+            focusActive = false;
+            returnFocus();
+        }
+        onclose?.({ reason });
+    }
+
+    /**
+     * Slides the panel up from the bottom edge. Skipped where motion is unwanted or unsupported.
+     * Returns how long the slide takes in ms: 0 when there is none.
+     */
+    function slideIn(container: HTMLElement): number {
+        if (typeof container.animate !== "function" || prefersReducedMotion()) return 0;
+        // Arriving is a smooth slide to rest on the standard curve, with no
+        // overshoot (the spring is for snapping and settling a drag). Read
+        // from the element so a theme that overrides the tokens is followed.
+        // Where the tokens cannot be read (no stylesheet) or the engine
+        // rejects the easing, plain ease-out.
+        const style = getComputedStyle(container);
+        const duration = parseDuration(style.getPropertyValue("--duration-slow"));
+        const standard = style.getPropertyValue("--ease-standard").trim();
+        const frames = [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }];
+        try {
+            container.animate(frames, { duration, easing: standard || "ease-out" });
+        } catch {
+            container.animate(frames, { duration, easing: "ease-out" });
+        }
+        return duration;
+    }
+
+    /** `300ms`, `0.3s` or `0s` to milliseconds; the fallback when it is not a time. */
+    function parseDuration(value: string): number {
+        const match = /^\s*(-?\d*\.?\d+)(ms|s)\s*$/.exec(value);
+        if (!match) return SLIDE_MS;
+        const ms = parseFloat(match[1]) * (match[2] === "s" ? 1000 : 1);
+        return ms >= 0 ? ms : SLIDE_MS;
+    }
+
+    /** The snap points in px, lowest first, for the screen as it is now. */
+    function measureSnapHeights(): number[] {
+        if (!root) return [];
+        // A fitted sheet rests at the height its content gives it.
+        if (fit && panel) return [panel.getBoundingClientRect().height];
+        const available = root.clientHeight - parseFloat(getComputedStyle(root).paddingTop || "0");
+        const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        const half = Math.min(Math.max(root.clientHeight * 0.5, 18 * rem), available);
+        return points.map((point) => (point === "full" ? available : half));
+    }
+
+    function stepSnap() {
+        if (stepTo) snap = stepTo;
+    }
+
+    $effect(() => {
+        const box = scroller;
+        if (!isOpen || !box) {
+            scrollerNeedsFocus = false;
+            return;
+        }
+        return watchScrollerNeedsFocus(box, (needsFocus) => (scrollerNeedsFocus = needsFocus));
+    });
+
+    // Where the on-screen keyboard covers the page, the overlay keeps to what
+    // is left above it. The snap heights are shares of the overlay, so half
+    // is half of what can be seen, and the footer stays above the keyboard.
+    $effect(() => {
+        const overlay = root;
+        if (!isOpen || !overlay) return;
+        return followKeyboard(overlay);
+    });
+
+    // For the toast stack, which stays off a pinned footer.
+    $effect(() => {
+        const pinned = footerElement;
+        if (!isOpen || !pinned) return;
+        return registerOverlayFooter(pinned);
+    });
+
+    // And the header, with the close button, which the stack starts below.
+    $effect(() => {
+        const top = header;
+        if (!isOpen || !top) return;
+        return registerOverlayHeader(top);
+    });
+
+    $effect(() => {
+        const container = panel;
+        if (isOpen && container) {
+            saveFocus();
+            focusActive = true;
+            const unlockScroll = lockBodyScroll();
+            const overlay = joinOverlayStack(container);
+            depth = overlay.depth;
+            arrived = false;
+            const arrival = setTimeout(() => (arrived = true), slideIn(container));
+            const t = setTimeout(() => {
+                // Something inside has taken focus already (a field that
+                // focuses itself as it mounts): leave it there. `initialFocus`
+                // is the consumer saying where focus goes, so it still decides.
+                const active = document.activeElement;
+                const inside = !!active && active !== container && container.contains(active);
+                if (inside && !(initialFocus && container.querySelector(initialFocus))) return;
+                focusFirstElement(container, initialFocus);
+            }, 0);
+            // If the focused control is disabled or removed, focus lands on
+            // `<body>`; take Tab and Escape back from there.
+            const stopRecovery = recoverStrayFocus(container, {
+                onEscape: () => close("escape"),
+            });
+            return () => {
+                clearTimeout(t);
+                clearTimeout(arrival);
+                arrived = false;
+                stopRecovery();
+                overlay.leave();
+                unlockScroll();
+                dragging = false;
+                dragHeight = null;
+                dragOffset = 0;
+                if (focusActive) {
+                    focusActive = false;
+                    returnFocus();
+                }
+            };
+        }
+    });
+
+    $effect(() => {
+        const zone = header;
+        const container = panel;
+        if (!isOpen || !zone || !container) return;
+
+        let heights: number[] = [];
+        let startHeight = 0;
+        let startIndex = 0;
+
+        /** How much of the sheet shows after the pointer has moved `distance` down. */
+        const shown = (distance: number) =>
+            Math.min(Math.max(startHeight - distance, 0), heights[heights.length - 1]);
+
+        return attachSheetDrag(
+            { handleZone: zone, scroller },
+            {
+                onStart() {
+                    heights = measureSnapHeights();
+                    startHeight = container.getBoundingClientRect().height;
+                    startIndex = points.indexOf(currentSnap);
+                    dragging = true;
+                },
+                onMove(distance) {
+                    const height = shown(distance);
+                    const lowest = heights[0];
+                    if (height >= lowest) {
+                        dragHeight = height;
+                        dragOffset = 0;
+                        return;
+                    }
+                    // Below the lowest snap point the sheet keeps its size and
+                    // slides off; one that cannot be closed only gives a little.
+                    dragHeight = lowest;
+                    dragOffset = (lowest - height) * (dismissible ? 1 : 0.2);
+                },
+                onEnd(distance, velocity) {
+                    const index = settleSnap({
+                        heights,
+                        startIndex,
+                        height: shown(distance),
+                        velocity,
+                        flick: FLICK_VELOCITY,
+                        canClose: dismissible,
+                    });
+                    dragging = false;
+                    dragHeight = null;
+                    dragOffset = 0;
+                    if (index === -1) close("swipe");
+                    else snap = points[index];
+                },
+                onCancel() {
+                    dragging = false;
+                    dragHeight = null;
+                    dragOffset = 0;
+                },
+            },
+        );
+    });
+
+    function handleBackdropClick(event: Event) {
+        if (event.target === event.currentTarget) close("backdrop");
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        // `defaultPrevented` means a nested dialog already handled the key.
+        // Prevented here even when not dismissible, so a dialog underneath
+        // does not take the Escape as its own.
+        if (event.key === "Escape" && !event.defaultPrevented) {
+            event.preventDefault();
+            close("escape");
+        }
+        onkeydown?.(event);
+    }
+
+    /**
+     * 44px wide and tall in px: the target must not shrink, and need not grow
+     * with the text. It is flush with the top edge of the panel, so it has
+     * the panel's radius; that also clears the mark inside it, a 4px pill
+     * 10px in (2px + 10px).
+     */
+    const gripClasses =
+        "absolute top-0 left-1/2 flex h-[44px] w-[80px] -translate-x-1/2 cursor-grab items-start justify-center rounded-overlay pt-[10px] active:cursor-grabbing";
+
+    /**
+     * The focus ring of the grip button, drawn inside its box. The usual ring
+     * reaches 4px outside it, and the title row starts 28px down, inside the
+     * 44px box: outside, the ring cut across the title. Same gap and ring,
+     * handed to the same property `.focus-ring` uses, only inset.
+     */
+    const gripFocusClasses =
+        "focus-ring focus-visible:[--tw-ring-offset-shadow:inset_0_0_0_2px_var(--zabi-focus-ring-offset-color),inset_0_0_0_4px_var(--zabi-focus-ring-color)]";
+</script>
+
+<!-- The bar of the grip. Drawn in the text colour where colours are forced:
+a background is dropped there, and the grip would be gone. -->
+{#snippet gripMark()}
+    <span
+        class="block h-1 w-9 rounded-pill bg-current text-description forced-colors:bg-[CanvasText]"
+        aria-hidden="true"
+    ></span>
+{/snippet}
+
+{#if isOpen}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- `overflow-clip`, not `hidden`: a clipped box is a scroll container
+    nobody can scroll. The panel waits below the screen while it slides in, so
+    the root has overflow to scroll, and WebKit scrolls it to bring the
+    focused grip into view: the sheet rose to the top of the screen, and sat
+    32px high (the filler under the panel) once the slide had ended. -->
+    <div
+        bind:this={root}
+        class="group/overlay fixed inset-0 z-modal overflow-clip pt-[env(safe-area-inset-top)] {dismissible
+            ? 'cursor-pointer'
+            : 'cursor-default'} bg-overlay"
+        style:z-index={depth > 0 ? `calc(var(--z-modal) + ${depth})` : undefined}
+        data-overlay-depth={depth}
+        use:portalTo={portal}
+        onclick={handleBackdropClick}
+        onkeydown={handleKeydown}
+        role="presentation"
+    >
+        <div
+            bind:this={panel}
+            class={cn(
+                // The glass is a layer behind the content (`::before`), not a filter on
+                // the panel: a backdrop-filter would make the panel the containing
+                // block of every fixed-position popover inside it.
+                "material-layer-thick absolute inset-x-0 bottom-0 mx-auto flex w-full cursor-default flex-col rounded-t-overlay",
+                "max-h-[calc(100dvh-env(safe-area-inset-top,0px))] pb-[env(safe-area-inset-bottom)]",
+                // Over the keyboard: no taller than what is left, and the home
+                // indicator it would clear is under the keyboard.
+                "group-data-keyboard-open/overlay:max-h-[calc(100%_-_env(safe-area-inset-top,0px))] group-data-keyboard-open/overlay:pb-0",
+                // Clear of the notch and the rounded corners in landscape.
+                "pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
+                // Snapping and settling spring; the overshoot may lift the panel a
+                // few px, so the filler continues its fill under the screen edge.
+                // The panel's own background is transparent now (the fill is on its
+                // layer), so the filler paints the material token itself: it follows
+                // the same fallbacks.
+                "transition-[height,transform] duration-(--duration-slow) ease-spring motion-reduce:transition-none",
+                "after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-8 after:content-[''] after:bg-(--color-material-thick)",
+                "md:w-[min(100%,40rem)]",
+                className,
+            )}
+            style:height={dragHeight !== null ? `${dragHeight}px` : fit ? "auto" : snapHeight}
+            style:max-height={fit ? (fitMax === "full" ? FULL : HALF) : undefined}
+            style:transform={dragOffset > 0 ? `translateY(${dragOffset}px)` : undefined}
+            style:transition={dragging || !arrived ? "none" : undefined}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={description ? descriptionId : undefined}
+            tabindex="-1"
+            data-snap={currentSnap}
+            data-dragging={dragging ? "true" : undefined}
+            {...restProps}
+            onkeydown={(event) => trapTabKey(panel, event)}
+        >
+            <!-- The whole header drags the sheet, in both directions.
+            `touch-none`: otherwise the browser takes a touch here for itself.
+            Chrome: laid out in px, with a title that stops at 1.3 times its
+            size (util/overlay-chrome.ts). The gutters of the content and
+            the footer are px with it, so the three stay in line. -->
+            <div bind:this={header} class="relative shrink-0 touch-none px-4 pt-7 pb-3 {OVERLAY_CHROME}">
+                {#if stepTo}
+                    <button
+                        type="button"
+                        data-sheet-grip
+                        class={cn(gripFocusClasses, gripClasses)}
+                        aria-label={stepTo === "full" ? expandLabel : collapseLabel}
+                        onclick={stepSnap}
+                    >
+                        {@render gripMark()}
+                    </button>
+                {:else}
+                    <div data-sheet-grip class={gripClasses}>
+                        {@render gripMark()}
+                    </div>
+                {/if}
+                <div class="flex items-start justify-between gap-[8px]">
+                    <div class="min-w-0 flex-1">
+                        <h2
+                            id={titleId}
+                            class="{OVERLAY_TITLE_XL} font-semibold text-headline {OVERLAY_TITLE_WRAP} {enlargedText ? OVERLAY_TITLE_HYPHENS : ''}"
+                        >
+                            {title}
+                        </h2>
+                    </div>
+                    <!-- `aria-disabled`, not `disabled` or removed: the button may hold focus when `dismissible` turns false, and a disabled or missing element would drop focus out of the trap. -->
+                    <!-- 8px in from the end edge of the panel: its radius
+                    (control) plus that is the panel's (overlay). -->
+                    <button
+                        type="button"
+                        onclick={() => close("close-button")}
+                        class="focus-ring -mt-2 -me-2 flex size-11 shrink-0 items-center justify-center rounded-control text-description transition-colors motion-reduce:transition-none {dismissible
+                            ? 'cursor-pointer hover:bg-surface-overlay-hover hover:text-headline'
+                            : 'cursor-not-allowed opacity-50'}"
+                        aria-label={closeLabel}
+                        aria-disabled={dismissible ? undefined : "true"}
+                    >
+                        <X size={20} aria-hidden="true" />
+                    </button>
+                </div>
+            </div>
+
+            <!-- `pt-1`: a scroll container clips, and the focus ring of a
+            first control needs the room. `overscroll-contain`: the page
+            behind must not take over when the content reaches an end. -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <div
+                bind:this={scroller}
+                data-bottom-sheet-content
+                class={cn(
+                    "min-h-0 flex-1 overflow-y-auto overscroll-contain px-[16px] pt-[4px] pb-[16px]",
+                    scrollerNeedsFocus &&
+                        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring",
+                )}
+                tabindex={scrollerNeedsFocus ? 0 : undefined}
+                role={scrollerNeedsFocus ? "group" : undefined}
+                aria-labelledby={scrollerNeedsFocus ? titleId : undefined}
+            >
+                <!-- With the content, not in the header: at half height on a
+                small screen every fixed line is taken from the content. -->
+                {#if description}
+                    <p id={descriptionId} class="mb-3 text-sm text-description">
+                        {description}
+                    </p>
+                {/if}
+                {@render children?.()}
+            </div>
+
+            {#if footer}
+                <div
+                    bind:this={footerElement}
+                    class="flex shrink-0 flex-wrap justify-end gap-[8px] border-t border-border-overlay px-[16px] py-[12px]"
+                >
+                    {@render footer()}
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}