zabi-components 8.0.0 → 9.0.0

package/dist/molecules/StickyActionBar.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { findScrollParent, getAppShell } from "../util/app-shell.js";
+    import { cn } from "../util/cn.js";
+    import { watchKeyboardInset } from "../util/keyboard-inset.js";
+    import { reserveScrollPaddingBottom } from "../util/scroll-padding.js";
+    import { resolveScrolledUnder, watchScrollEdge, type ScrollEdgeMode } from "../util/scroll-edge.js";
+
+    /**
+     * Keeps a form's main button on screen: at the bottom of whatever
+     * scrolls, and above the on-screen keyboard when that is up.
+     *
+     * Put it after the form's last field. It is sticky, not fixed, so it
+     * keeps its place in the flow and the last field can always be scrolled
+     * clear of it. A form shorter than the screen ends where its fields end,
+     * and so would the bar: make the form a column as tall as the screen
+     * (`flex min-h-full flex-col`) and the bar takes the bottom of it.
+     *
+     * ```svelte
+     * <form class="flex min-h-full flex-col" onsubmit={save}>
+     *     <div class="space-y-4 p-4">
+     *         <Input label="Name" bind:value={name} />
+     *         …
+     *     </div>
+     *     <StickyActionBar>
+     *         <Button type="submit" size="lg" fullWidth>Save visit</Button>
+     *     </StickyActionBar>
+     * </form>
+     * ```
+     *
+     * Where the keyboard covers the bottom of the page instead of shrinking
+     * it (iOS Safari, Chrome on Android), the bar rises above it. The covered
+     * part is read from `window.visualViewport`, and the bar is raised by as
+     * much of its own scrolling box as the keyboard covers: the keyboard's
+     * full height in a box that ends at the bottom of the screen, less in
+     * one that ends above a tab bar or inside a sheet. It never leaves its
+     * box. It takes a bottom margin of the same size, so the content gains
+     * that much room to scroll, which a short form needs to bring its last
+     * field above the keyboard. Where the page shrinks by itself, nothing is
+     * done.
+     *
+     * While it is mounted the bar also sets `scroll-padding-bottom` on its
+     * scrolling ancestor (or the page) to its own height plus that rise, so a
+     * field that takes focus is brought into view above the bar, not under
+     * it. Use one bar per scrolling box: two would both stick to the same
+     * edge, one on top of the other.
+     *
+     * In an `AppShell`, a screen with a form is a task of its own: leave the
+     * tab bar out (no `footer`) and let this bar be the bottom of the screen.
+     * With a tab bar it sits directly above it: the shell's footer lies over
+     * the scroller, and the bar sticks to the footer's top edge, not under it.
+     *
+     * The bar is flush with the page and page-coloured while the form ends
+     * where the bar is; once content is under it, it turns to frosted glass
+     * with a hairline above it.
+     *
+     * `UnsavedChangesBar` is the other bar at the bottom of a form. That one
+     * appears only while there is something to save, announces itself, and
+     * brings its own Save and Discard. This one is always there, holds the
+     * buttons you give it, and follows the keyboard.
+     */
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
+        /**
+         * Accessible name. With it the bar is a group, so a screen reader
+         * says what the buttons belong to; without it, it is a plain box.
+         */
+        label?: string;
+        /**
+         * When the bar shows the glass and the hairline. `auto` follows the
+         * scroll position: flush at the end of the content, glass while
+         * content is under it. `always` is glass all the time, `never` flush
+         * all the time.
+         */
+        scrollEdge?: ScrollEdgeMode;
+        class?: string;
+        /** Added after the offset and margin the bar sets while the keyboard is up. */
+        style?: string;
+        /** The main action, and at most one or two beside it. */
+        children?: Snippet;
+    };
+
+    let {
+        label,
+        scrollEdge = "auto",
+        class: className = "",
+        style = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    let host: HTMLDivElement | undefined = $state();
+
+    /**
+     * In a shell with a footer the footer lies over the bottom of the scroller
+     * by this much: the bar sticks above it, and the box it scrolls in
+     * extends under it.
+     */
+    const shell = getAppShell();
+    const underFooter = $derived(shell?.footerOverlays === true);
+    const footerHeight = $derived(shell?.footerHeight ?? 0);
+
+    /** Content is under the bar: from the shell if there is one, else from its own scroller. */
+    let ownScrolled = $state(false);
+    $effect(() => {
+        if (shell || scrollEdge !== "auto" || !host) return;
+        return watchScrollEdge(findScrollParent(host), (edge) => (ownScrolled = edge.bottom));
+    });
+    const scrolledUnder = $derived(
+        resolveScrolledUnder(scrollEdge, shell ? shell.scrolledBottom : ownScrolled),
+    );
+    /** Height of the keyboard over the page, in px. 0 on the server and where the page shrinks by itself. */
+    let keyboardInset = $state(0);
+    /**
+     * How far the bar is raised from the bottom of its scrolling box, in px.
+     * Not the keyboard's height: only the part of this box the keyboard covers.
+     */
+    let lift = $state(0);
+
+    $effect(() =>
+        watchKeyboardInset((inset) => {
+            keyboardInset = inset;
+        }),
+    );
+
+    /**
+     * The keyboard covers the screen from the bottom of the visual viewport
+     * down. The bar has to rise by as much of its own scrolling box as lies
+     * under that line: all of the keyboard's height when the box ends at the
+     * bottom of the screen, less when it ends higher (above a tab bar, in a
+     * sheet), nothing when it ends above the keyboard. It never leaves the
+     * box: a box wholly under the keyboard keeps its bar at its own top.
+     */
+    $effect(() => {
+        const bar = host;
+        if (!bar || keyboardInset === 0) {
+            lift = 0;
+            return;
+        }
+        const container = findScrollParent(bar);
+        const measure = () => {
+            const viewport = window.visualViewport;
+            if (!viewport) return;
+            const keyboardTop = viewport.offsetTop + viewport.height;
+            // Where the bar sticks: the box's content edge, inside its
+            // border and its own bottom padding.
+            const padding = container
+                ? parseFloat(getComputedStyle(container).paddingBottom) || 0
+                : 0;
+            const boxBottom = container
+                ? container.getBoundingClientRect().top +
+                  container.clientTop +
+                  container.clientHeight -
+                  padding
+                : document.documentElement.clientHeight;
+            const boxHeight =
+                (container ? container.clientHeight : document.documentElement.clientHeight) -
+                padding;
+            const room = Math.max(0, boxHeight - bar.getBoundingClientRect().height);
+            lift = Math.round(Math.min(Math.max(boxBottom - keyboardTop, 0), room));
+        };
+        measure();
+        // The box moves on the screen when the page scrolls or is resized.
+        // Captured, so a scroll of any ancestor is heard.
+        window.addEventListener("scroll", measure, { capture: true, passive: true });
+        window.addEventListener("resize", measure);
+        window.visualViewport?.addEventListener("resize", measure);
+        window.visualViewport?.addEventListener("scroll", measure);
+        // An overlay moves itself up over the keyboard, and its content with
+        // it: the box then ends above the keyboard, and the bar is not raised
+        // a second time. That move is heard here, whichever came first.
+        const resized =
+            container && typeof ResizeObserver === "function"
+                ? new ResizeObserver(measure)
+                : undefined;
+        if (container) resized?.observe(container);
+        return () => {
+            resized?.disconnect();
+            window.removeEventListener("scroll", measure, true);
+            window.removeEventListener("resize", measure);
+            window.visualViewport?.removeEventListener("resize", measure);
+            window.visualViewport?.removeEventListener("scroll", measure);
+        };
+    });
+
+    /**
+     * The browser scrolls a focused field into view, to the edge of the
+     * scroll container: under this bar, since it lies over that edge.
+     */
+    $effect(() => {
+        const bar = host;
+        if (!bar) return;
+        // The bar's own offset from the bottom of the box: what the keyboard
+        // lifts it by, or the footer it sits above, whichever is more.
+        const raised = Math.max(lift, footerHeight);
+        const container = findScrollParent(bar) ?? document.documentElement;
+        const reservation = reserveScrollPaddingBottom(container);
+        const reserve = () => {
+            reservation.set(Math.ceil(bar.getBoundingClientRect().height) + raised);
+        };
+        reserve();
+        const observer =
+            typeof ResizeObserver === "function" ? new ResizeObserver(reserve) : undefined;
+        observer?.observe(bar);
+        return () => {
+            observer?.disconnect();
+            reservation.release();
+        };
+    });
+
+    const keyboardOpen = $derived(keyboardInset > 0);
+
+    /**
+     * Where it sticks. On its own the box ends at the bottom and the bar is
+     * lifted by `lift`. Over a footer it sticks above the footer, and the
+     * keyboard lifts it only as far as it reaches past the footer: the box
+     * extends under the footer, so `lift` counts from the box's bottom.
+     */
+    const offsetStyle = $derived.by(() => {
+        const overlay = "var(--app-shell-footer-overlay, 0px)";
+        if (!underFooter) return lift > 0 ? `bottom: ${lift}px; margin-bottom: ${lift}px;` : "";
+        if (lift > 0) {
+            return `bottom: max(${lift}px, ${overlay}); margin-bottom: max(0px, calc(${lift}px - ${overlay}));`;
+        }
+        return `bottom: ${overlay};`;
+    });
+</script>
+
+<!-- Nothing here takes focus by itself, and the bar never moves focus. -->
+<div
+    bind:this={host}
+    role={label ? "group" : undefined}
+    aria-label={label}
+    data-keyboard-open={keyboardOpen ? "true" : undefined}
+    data-bar-edge="bottom"
+    data-scrolled-under={String(scrolledUnder)}
+    class={cn(
+        // `mt-auto`: in a column taller than its fields, the bar goes to the bottom.
+        "material-bar sticky bottom-0 z-sticky mt-auto flex flex-wrap items-center justify-end gap-[8px] pt-3",
+        "pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))]",
+        // The home indicator is under the keyboard while that is up, and under
+        // the footer, which already clears it, when there is one.
+        keyboardOpen || underFooter ? "pb-3" : "pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        className,
+    )}
+    style="{offsetStyle} {style}"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,78 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ScrollEdgeMode } from "../util/scroll-edge.js";
+/**
+ * Keeps a form's main button on screen: at the bottom of whatever
+ * scrolls, and above the on-screen keyboard when that is up.
+ *
+ * Put it after the form's last field. It is sticky, not fixed, so it
+ * keeps its place in the flow and the last field can always be scrolled
+ * clear of it. A form shorter than the screen ends where its fields end,
+ * and so would the bar: make the form a column as tall as the screen
+ * (`flex min-h-full flex-col`) and the bar takes the bottom of it.
+ *
+ * ```svelte
+ * <form class="flex min-h-full flex-col" onsubmit={save}>
+ *     <div class="space-y-4 p-4">
+ *         <Input label="Name" bind:value={name} />
+ *         …
+ *     </div>
+ *     <StickyActionBar>
+ *         <Button type="submit" size="lg" fullWidth>Save visit</Button>
+ *     </StickyActionBar>
+ * </form>
+ * ```
+ *
+ * Where the keyboard covers the bottom of the page instead of shrinking
+ * it (iOS Safari, Chrome on Android), the bar rises above it. The covered
+ * part is read from `window.visualViewport`, and the bar is raised by as
+ * much of its own scrolling box as the keyboard covers: the keyboard's
+ * full height in a box that ends at the bottom of the screen, less in
+ * one that ends above a tab bar or inside a sheet. It never leaves its
+ * box. It takes a bottom margin of the same size, so the content gains
+ * that much room to scroll, which a short form needs to bring its last
+ * field above the keyboard. Where the page shrinks by itself, nothing is
+ * done.
+ *
+ * While it is mounted the bar also sets `scroll-padding-bottom` on its
+ * scrolling ancestor (or the page) to its own height plus that rise, so a
+ * field that takes focus is brought into view above the bar, not under
+ * it. Use one bar per scrolling box: two would both stick to the same
+ * edge, one on top of the other.
+ *
+ * In an `AppShell`, a screen with a form is a task of its own: leave the
+ * tab bar out (no `footer`) and let this bar be the bottom of the screen.
+ * With a tab bar it sits directly above it: the shell's footer lies over
+ * the scroller, and the bar sticks to the footer's top edge, not under it.
+ *
+ * The bar is flush with the page and page-coloured while the form ends
+ * where the bar is; once content is under it, it turns to frosted glass
+ * with a hairline above it.
+ *
+ * `UnsavedChangesBar` is the other bar at the bottom of a form. That one
+ * appears only while there is something to save, announces itself, and
+ * brings its own Save and Discard. This one is always there, holds the
+ * buttons you give it, and follows the keyboard.
+ */
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
+    /**
+     * Accessible name. With it the bar is a group, so a screen reader
+     * says what the buttons belong to; without it, it is a plain box.
+     */
+    label?: string;
+    /**
+     * When the bar shows the glass and the hairline. `auto` follows the
+     * scroll position: flush at the end of the content, glass while
+     * content is under it. `always` is glass all the time, `never` flush
+     * all the time.
+     */
+    scrollEdge?: ScrollEdgeMode;
+    class?: string;
+    /** Added after the offset and margin the bar sets while the keyboard is up. */
+    style?: string;
+    /** The main action, and at most one or two beside it. */
+    children?: Snippet;
+};
+declare const StickyActionBar: import("svelte").Component<Props, {}, "">;
+type StickyActionBar = ReturnType<typeof StickyActionBar>;
+export default StickyActionBar;

package/dist/molecules/SwipeableListItem.svelte

@@ -0,0 +1,334 @@
+<script lang="ts">
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
+    import { tick, type Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Ellipsis from "@lucide/svelte/icons/ellipsis";
+    import { cn } from "../util/cn.js";
+    import { isInsideToastRegion } from "../util/focus-utils.js";
+    import {
+        createVelocityTracker,
+        DRAG_SLOP,
+        FLICK_VELOCITY,
+        prefersReducedMotion,
+        timeOf,
+    } from "../util/sheet-drag.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import {
+        DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS,
+        registerOpenRow,
+        settleSwipe,
+        type SwipeableListItemAction,
+        type SwipeableListItemStrings,
+    } from "../util/swipeable-list-item.js";
+
+    /**
+     * A row with one or two actions behind its inline end, such as Delete on
+     * a draft. A finger swipes the row towards the inline start to show them;
+     * a swipe only shows them, and an action runs when its button is pressed.
+     *
+     * The swipe is a shortcut and never the only way. The row has a "more"
+     * button at its end that opens the same actions for a mouse, a keyboard,
+     * a switch or a screen reader, and they are ordinary buttons once open.
+     * Escape or a press elsewhere closes the row. In a list (`ul`, `ol`,
+     * `List`) one row is open at a time.
+     *
+     * It is the row's content and a group of buttons, not a list item: put
+     * it inside your own `li` or `ListItem`.
+     *
+     * ```svelte
+     * <ul>
+     *     {#each drafts as draft (draft.id)}
+     *         <li>
+     *             <SwipeableListItem
+     *                 actions={[{ id: "delete", label: "Delete", tone: "danger", onselect: () => remove(draft) }]}
+     *             >
+     *                 {draft.title}
+     *             </SwipeableListItem>
+     *         </li>
+     *     {/each}
+     * </ul>
+     * ```
+     */
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> & {
+        /** One or two actions, shown at the inline end. */
+        actions: SwipeableListItemAction[];
+        /** Whether the actions are shown. Bindable. */
+        open?: boolean;
+        /** Runs when the row opens or closes, by whatever means. */
+        onopenchange?: (open: boolean) => void;
+        /**
+         * The button at the end of the row that opens the actions without a
+         * swipe. Without it the swipe is the only way this component offers,
+         * and the app has to give another: the same actions on the page the
+         * row leads to, or in a menu (WCAG 2.5.1, 2.5.7).
+         */
+        showMoreButton?: boolean;
+        /** The words the row says by itself, for another language. */
+        strings?: Partial<SwipeableListItemStrings>;
+        class?: string;
+        /** The row's content. */
+        children?: Snippet;
+    };
+
+    let {
+        actions,
+        open = $bindable<Exclude<Props["open"], undefined>>(),
+        onopenchange,
+        showMoreButton = true,
+        strings,
+        class: className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    // No fallback on a bindable prop (see Collapsible): the default is applied here.
+    const applyDefaults = () => {
+        if (open === undefined) open = false;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("swipeableListItem");
+    const text = $derived(mergeStrings(DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS, provided(), strings));
+    const groupId = generateId("swipeable-actions");
+
+    let root = $state<HTMLDivElement>();
+    let track = $state<HTMLDivElement>();
+    let group = $state<HTMLDivElement>();
+    let moreButton = $state<HTMLButtonElement>();
+
+    /** While a finger drags the row: how many px of the actions show. */
+    let dragged = $state<number | null>(null);
+
+    function setOpen(next: boolean) {
+        if (open === next) return;
+        open = next;
+        onopenchange?.(next);
+    }
+
+    /** Closes the row and puts focus back on the button that opens it, when focus was in the actions. */
+    function close({ returnFocus = false } = {}) {
+        const held = !!group?.contains(document.activeElement);
+        setOpen(false);
+        if (returnFocus || held) moreButton?.focus();
+    }
+
+    async function toggleFromButton() {
+        if (open) {
+            close();
+            return;
+        }
+        setOpen(true);
+        // Opened on purpose, by a press: on to the first action.
+        await tick();
+        group?.querySelector<HTMLElement>("button")?.focus();
+    }
+
+    function select(action: SwipeableListItemAction) {
+        try {
+            action.onselect();
+        } finally {
+            close({ returnFocus: true });
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key !== "Escape" || !open || event.defaultPrevented) return;
+        event.preventDefault();
+        event.stopPropagation();
+        close({ returnFocus: true });
+    }
+
+    // One open row in a list, and a press anywhere else closes this one.
+    $effect(() => {
+        const element = root;
+        if (!open || !element) return;
+        const unregister = registerOpenRow(element, () => setOpen(false));
+        const onPointerDown = (event: PointerEvent) => {
+            const target = event.target;
+            if (target instanceof Node && element.contains(target)) return;
+            // A toast lies over the list; a press on it is for the toast.
+            if (isInsideToastRegion(target)) return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            unregister();
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    });
+
+    // --- The swipe. A finger or a stylus; a mouse has the button. The row
+    // has `touch-action: pan-y`, so a vertical move is the browser's (it
+    // scrolls and cancels the pointer) and only a sideways one comes here.
+    const tracker = createVelocityTracker();
+    let pointerId: number | null = null;
+    let startX = 0;
+    let startY = 0;
+    let startRevealed = 0;
+    let width = 0;
+    let swiping = false;
+    /** 1 where the inline start is on the left, -1 in a right-to-left page. */
+    let direction = 1;
+
+    const revealedAt = (clientX: number) =>
+        Math.max(0, Math.min(width, startRevealed + (startX - clientX) * direction));
+
+    function handlePointerDown(event: PointerEvent) {
+        if (pointerId !== null || event.pointerType === "mouse" || !group || !track) return;
+        pointerId = event.pointerId;
+        startX = event.clientX;
+        startY = event.clientY;
+        swiping = false;
+        width = group.offsetWidth;
+        startRevealed = open ? width : 0;
+        direction = getComputedStyle(track).direction === "rtl" ? -1 : 1;
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+        if (event.pointerId !== pointerId) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+        if (!swiping) {
+            if (Math.abs(dx) < DRAG_SLOP && Math.abs(dy) < DRAG_SLOP) return;
+            // Clearly sideways, or it is not a swipe of the row.
+            if (Math.abs(dx) <= Math.abs(dy)) {
+                pointerId = null;
+                return;
+            }
+            swiping = true;
+            try {
+                track?.setPointerCapture(event.pointerId);
+            } catch {
+                /* a test DOM, or a pointer that is already gone */
+            }
+            // Measured from where the swipe was recognised, so the row does not jump by the slop.
+            startX = event.clientX;
+            tracker.reset(0, timeOf(event));
+        }
+        const revealed = revealedAt(event.clientX);
+        tracker.add(revealed, timeOf(event));
+        // Where motion is unwanted the row does not follow the finger; the actions appear at the end.
+        if (!prefersReducedMotion()) dragged = revealed;
+    }
+
+    function swallowClick(event: MouseEvent) {
+        // The click that ends a swipe is not a press of what is in the row.
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    function finishPointer(event: PointerEvent, cancelled: boolean) {
+        if (event.pointerId !== pointerId) return;
+        pointerId = null;
+        const wasSwiping = swiping;
+        swiping = false;
+        dragged = null;
+        if (!wasSwiping || cancelled) return;
+        const revealed = revealedAt(event.clientX);
+        tracker.add(revealed, timeOf(event));
+        track?.addEventListener("click", swallowClick, { capture: true, once: true });
+        setTimeout(() => track?.removeEventListener("click", swallowClick, true), 0);
+        setOpen(settleSwipe(revealed, width, tracker.velocity(), FLICK_VELOCITY));
+    }
+
+    /** The actions are laid out and can be seen: open, or coming out under a finger. */
+    const shown = $derived(open || dragged !== null);
+
+    /** How far the row is moved, as CSS: by the width of the actions when open. */
+    const shift = $derived.by(() => {
+        if (dragged !== null) return `${dragged}px`;
+        return open ? "var(--swipeable-actions-width, 0px)" : "0px";
+    });
+
+    // The width of the actions, for the row to move by. Measured, since the labels are the app's.
+    $effect(() => {
+        const element = group;
+        const host = root;
+        if (!element || !host) return;
+        const measure = () => host.style.setProperty("--swipeable-actions-width", `${element.offsetWidth}px`);
+        measure();
+        const observer = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : undefined;
+        observer?.observe(element);
+        return () => observer?.disconnect();
+    });
+
+    const actionClasses = (tone: SwipeableListItemAction["tone"]) =>
+        cn(
+            // The ring is drawn inside the button: the row clips what reaches past its ends.
+            "flex min-h-11 min-w-[72px] cursor-pointer flex-col items-center justify-center gap-[4px] px-[12px] py-[8px] text-center text-xs font-medium transition-colors motion-reduce:transition-none focus:outline-none focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-current forced-colors:border forced-colors:border-[ButtonText]",
+            tone === "danger"
+                ? "bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active"
+                : "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active",
+        );
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    {...restProps}
+    bind:this={root}
+    class={cn("relative overflow-x-clip", className)}
+    data-swipeable-list-item
+    data-open={open ? "true" : "false"}
+    onkeydown={handleKeydown}
+>
+    <!-- The row and its actions side by side, the actions past the end of the
+    row until the two are moved over. `pan-y`: a vertical move scrolls. -->
+    <div
+        bind:this={track}
+        class={cn(
+            // Towards the inline start: to the left, or to the right in a right-to-left page.
+            "flex touch-pan-y items-stretch [--swipeable-direction:-1] rtl:[--swipeable-direction:1]",
+            dragged === null && "transition-transform duration-200 ease-out motion-reduce:transition-none",
+        )}
+        style:transform="translateX(calc({shift} * var(--swipeable-direction, -1)))"
+        onpointerdown={handlePointerDown}
+        onpointermove={handlePointerMove}
+        onpointerup={(event) => finishPointer(event, false)}
+        onpointercancel={(event) => finishPointer(event, true)}
+    >
+        <div class="flex min-w-0 shrink-0 basis-full items-center gap-[8px]">
+            <div class="min-w-0 flex-1">
+                {@render children?.()}
+            </div>
+            {#if showMoreButton}
+                <button
+                    bind:this={moreButton}
+                    type="button"
+                    class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-control text-description transition-colors hover:bg-surface-hover hover:text-headline active:bg-surface-active focus:outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none pointer-coarse:size-[44px]"
+                    aria-label={text.actions}
+                    aria-expanded={open}
+                    aria-controls={groupId}
+                    data-swipeable-more
+                    onclick={toggleFromButton}
+                >
+                    <Ellipsis size={20} aria-hidden="true" />
+                </button>
+            {/if}
+        </div>
+        <!-- In the page while closed, so the button above has something to
+        name; out of reach until the row is open. -->
+        <div
+            bind:this={group}
+            id={groupId}
+            role="group"
+            aria-label={text.actions}
+            class={cn("flex shrink-0 items-stretch", !shown && "invisible")}
+            style:max-inline-size="max(66%, {actions.length * 72}px)"
+            inert={!open}
+            data-swipeable-actions
+        >
+            {#each actions as action (action.id)}
+                <button type="button" class={actionClasses(action.tone)} onclick={() => select(action)}>
+                    {#if action.icon}
+                        {@const Icon = action.icon}
+                        <span class="flex" aria-hidden="true"><Icon size={20} /></span>
+                    {/if}
+                    <span class="min-w-0 text-balance break-words">{action.label}</span>
+                </button>
+            {/each}
+        </div>
+    </div>
+</div>