zabi-components 7.0.2 → 8.1.0

package/dist/molecules/ToasterToast.svelte

@@ -2,55 +2,121 @@
     import { onMount } from 'svelte';
     import { cubicOut } from 'svelte/easing';
     import { slide, fade, fly } from 'svelte/transition';
-    import {
-        AlertCircle,
-        AlertTriangle,
-        CheckCircle,
-        ChevronDown,
-        Info,
-        X,
-    } from '@lucide/svelte';
+    import AlertCircle from '@lucide/svelte/icons/circle-alert';
+    import AlertTriangle from '@lucide/svelte/icons/triangle-alert';
+    import CheckCircle from '@lucide/svelte/icons/circle-check-big';
+    import ChevronDown from '@lucide/svelte/icons/chevron-down';
+    import Info from '@lucide/svelte/icons/info';
+    import X from '@lucide/svelte/icons/x';
     import Button from '../atoms/Button.svelte';
     import { toastStore, type ToastItem } from './toast-store.js';
+    import { cn } from "../util/cn.js";
+    import {
+        DEFAULT_TOASTER_STRINGS,
+        resolveToastDuration,
+        TOAST_SECONDS_AFTER_HOLD,
+        type ToastDuration,
+        type ToasterStrings,
+        type ToastPauseChange,
+    } from "../util/toaster.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         toast: ToastItem;
+        /** Every word the toast says by itself; the Toaster passes its own. */
+        strings?: ToasterStrings;
+        /** Shows the time left as a sentence, with a button that stops the timer. */
+        showCountdown?: boolean;
+        /** What a toast pushed without a duration gets, in place of medium; the Toaster passes its own. */
+        defaultDuration?: ToastDuration;
+        /** Called when a pointer, a finger or focus starts or stops holding the timer. */
+        onpausechange?: (detail: ToastPauseChange) => void;
     }
 
-    let { toast }: Props = $props();
-
-    /** Seconds until auto-dismiss; `0` means no countdown (manual dismiss only). */
-    function autoDismissSeconds(duration: number | undefined): number {
-        if (duration === undefined) return 14;
-        if (duration <= 0) return 0;
-        return Math.max(1, Math.ceil(duration / 1000));
-    }
-
-    const maxSeconds = $derived(autoDismissSeconds(toast.duration));
+    let {
+        class: className = "",
+        toast,
+        strings = DEFAULT_TOASTER_STRINGS,
+        showCountdown = false,
+        defaultDuration,
+        onpausechange,
+    }: Props = $props();
 
     let count = $state(0);
     let timerActive = $state(false);
     let isExpanded = $state(false);
+    /**
+     * What holds the timer (WCAG 2.2.1): a mouse or a stylus over the toast,
+     * a finger on it, keyboard focus inside it.
+     */
+    let hovered = $state(false);
+    let held = $state(false);
+    let focusWithin = $state(false);
+    const paused = $derived(hovered || held || focusWithin);
 
     let intervalRef: ReturnType<typeof setInterval> | undefined;
 
-    const expandableText = $derived((toast.detail ?? toast.message).trim());
+    const title = $derived(toast.title?.trim() ?? "");
+    const message = $derived(toast.message.trim());
+
+    /**
+     * What a toast pushed with neither a title nor a message says: a word
+     * for its type. A toast with a message says the message.
+     */
+    const fallbackTitle = $derived(
+        toast.type === 'success'
+            ? strings.successTitle
+            : toast.type === 'error'
+              ? strings.errorTitle
+              : toast.type === 'warning'
+                ? strings.warningTitle
+                : strings.infoTitle,
+    );
+
+    /** The first line: the title, or the message when there is no title. */
+    const headerTitle = $derived(title || message || fallbackTitle);
+    /** The second line: the message, under a title that says something else. */
+    const secondLine = $derived(title && message && message !== title ? message : "");
 
+    /**
+     * The part that opens and closes is `detail`, when the toast was given
+     * one: the long version. The message is never folded away.
+     */
+    const expandableText = $derived((toast.detail ?? "").trim());
     const hasExpandable = $derived(expandableText.length > 0);
 
-    const headerTitle = $derived.by(() => {
-        const t = toast.title?.trim();
-        if (t) return t;
-        switch (toast.type) {
-            case 'success':
-                return 'Changes saved';
-            case 'error':
-                return 'Something went wrong';
-            case 'warning':
-                return 'Please review';
-            default:
-                return 'Notice';
-        }
+    /**
+     * Seconds until the toast closes by itself; `0` is never. What the app
+     * said for this toast wins. Otherwise it goes by what the toast is and by
+     * how much there is to read in it: the two lines that are shown, not the
+     * detail behind its button.
+     */
+    const maxSeconds = $derived.by(() => {
+        const ms = resolveToastDuration(
+            {
+                duration: toast.duration,
+                type: toast.type,
+                hasAction: !!toast.action,
+                textLength: headerTitle.length + secondLine.length,
+            },
+            defaultDuration,
+        );
+        return ms <= 0 ? 0 : Math.max(1, Math.ceil(ms / 1000));
+    });
+
+    /** The time left as words: for the sentence, or for a screen reader to find. */
+    const countdownText = $derived(
+        paused ? strings.pausedClosesIn(count) : strings.closesIn(count),
+    );
+
+    // Said to the app as well: `data-paused` is the same thing in the markup.
+    let reportedPause = false;
+    $effect(() => {
+        const now = paused;
+        if (now === reportedPause) return;
+        reportedPause = now;
+        onpausechange?.({ id: toast.id, paused: now });
     });
 
     const statusIconClass = $derived(
@@ -90,6 +156,10 @@
         timerActive = true;
 
         intervalRef = setInterval(() => {
+            // The state, not the `paused` derived: a tick can land while the
+            // toast is animating out, and reading a derived then warns
+            // (`derived_inert`).
+            if (hovered || held || focusWithin) return;
             count -= 1;
             if (count <= 0) {
                 stopTimer();
@@ -109,44 +179,171 @@
         toastStore.dismiss(toast.id);
     }
 
+    /** The toast closes even if the handler throws, unless the action opted out. */
+    function handleAction() {
+        const action = toast.action;
+        if (!action) return;
+        try {
+            action.onclick();
+        } finally {
+            if (action.dismissOnClick !== false) {
+                toastStore.dismiss(toast.id);
+            }
+        }
+    }
+
+    let expandButton = $state<HTMLButtonElement>();
+    let dismissButton = $state<HTMLButtonElement>();
+
+    /**
+     * Okay closes the details and goes with them. Focus moves to the button
+     * that opens them again, or it would fall to the page and a keyboard
+     * user would be at the top of it.
+     */
     function handleOkay() {
         isExpanded = false;
+        expandButton?.focus();
+    }
+
+    /** The stop button goes with the sentence it is in: focus stays in the toast. */
+    function handleStop(event: MouseEvent) {
+        const held = event.currentTarget === document.activeElement;
+        stopTimer();
+        if (held) dismissButton?.focus();
     }
 
-    const toastEnter = { y: 18, duration: 260, opacity: 0, easing: cubicOut };
-    const toastLeave = { y: 14, duration: 300, opacity: 0, easing: cubicOut };
+    /**
+     * The kind of pointer last seen on the toast. After a tap a browser makes
+     * up mouse events for it, `mouseenter` among them and never a
+     * `mouseleave`: taken for a mouse, a tap held the timer for good.
+     */
+    let lastPointer: string | undefined;
+
+    function handlePointerEnter(event: PointerEvent) {
+        lastPointer = event.pointerType;
+        // A mouse, or a stylus in range. A finger is over the toast only while it is on it.
+        if (event.pointerType !== "touch") hovered = true;
+    }
+
+    function handlePointerLeave(event: PointerEvent) {
+        if (event.pointerType !== "touch") hovered = false;
+    }
+
+    function handleMouseEnter() {
+        if (lastPointer !== "touch") hovered = true;
+    }
+
+    function handlePointerDown(event: PointerEvent) {
+        lastPointer = event.pointerType;
+        if (event.pointerType === "touch") held = true;
+    }
+
+    /**
+     * The finger lifts, or the browser takes the touch for a scroll. The
+     * timer runs again, with time left to do something about the toast: it
+     * was held because someone was reading it.
+     */
+    function handlePointerRelease(event: PointerEvent) {
+        if (event.pointerType !== "touch" || !held) return;
+        held = false;
+        if (timerActive) count = Math.max(count, Math.min(TOAST_SECONDS_AFTER_HOLD, maxSeconds));
+    }
+
+    function handleFocusOut(event: FocusEvent) {
+        const next = event.relatedTarget as Node | null;
+        if (!next || !(event.currentTarget as HTMLElement).contains(next)) {
+            focusWithin = false;
+        }
+    }
+
+    /** No movement where motion is unwanted: the toast appears and goes at once. */
+    const reducedMotion =
+        typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const motion = (duration: number) => (reducedMotion ? 0 : duration);
+
+    const toastEnter = { y: 18, duration: motion(260), opacity: 0, easing: cubicOut };
+    const toastLeave = { y: 14, duration: motion(300), opacity: 0, easing: cubicOut };
 </script>
 
 <div
-    class="pointer-events-auto relative w-full min-w-[18rem] overflow-hidden rounded-2xl border border-border bg-surface-1 shadow-xl"
+    class={cn("pointer-events-auto relative w-full min-w-[min(18rem,100%)] shrink-0 overflow-hidden rounded-overlay border border-border-overlay bg-surface-overlay shadow-lg", className)}
     in:fly={toastEnter}
     out:fly={toastLeave}
-    role={toast.type === 'error' ? 'alert' : 'status'}
+    onpointerenter={handlePointerEnter}
+    onpointerleave={handlePointerLeave}
+    onpointerdown={handlePointerDown}
+    onpointerup={handlePointerRelease}
+    onpointercancel={handlePointerRelease}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={() => (hovered = false)}
+    onfocusin={() => (focusWithin = true)}
+    onfocusout={handleFocusOut}
+    role="group"
+    aria-label={headerTitle}
+    data-toast-id={toast.id}
+    data-paused={paused}
 >
-    <div class="p-4">
-        <div class="flex items-start gap-3">
-            <div class="shrink-0 pt-0.5">
+    <!-- Padding and gaps in px: at 200% text on a phone, room that grew with
+    the text left the text itself a column too narrow for one long word. -->
+    <div class="p-[16px]">
+        <!-- The title keeps 8rem at least, icon included. When the toast has
+        less beside its buttons (320px with enlarged text), the buttons go to a
+        line of their own under it, at the end. -->
+        <div class="flex flex-wrap items-start gap-x-[12px] gap-y-[4px]">
+            <!-- Live region holds only title + message, so the countdown and buttons are never re-announced. -->
+            <div
+                class="flex min-w-0 flex-[1_1_8rem] items-start gap-[12px]"
+                role={toast.type === 'error' ? 'alert' : 'status'}
+                aria-atomic="true"
+            >
+            <!-- 20px at every text size, as the padding and the gap beside it
+            are px: an icon that grew with the text took the room the text
+            needed. Lowered so it stays at the middle of the first line. -->
+            <div class="shrink-0 mt-[calc((1.5rem_-_20px)_/_2)]">
                 {#if toast.type === 'success'}
-                    <CheckCircle class="size-5 {statusIconClass}" aria-hidden="true" />
+                    <CheckCircle class="size-[20px] {statusIconClass}" aria-hidden="true" />
                 {:else if toast.type === 'error'}
-                    <AlertCircle class="size-5 {statusIconClass}" aria-hidden="true" />
+                    <AlertCircle class="size-[20px] {statusIconClass}" aria-hidden="true" />
                 {:else if toast.type === 'warning'}
-                    <AlertTriangle class="size-5 {statusIconClass}" aria-hidden="true" />
+                    <AlertTriangle class="size-[20px] {statusIconClass}" aria-hidden="true" />
                 {:else}
-                    <Info class="size-5 {statusIconClass}" aria-hidden="true" />
+                    <Info class="size-[20px] {statusIconClass}" aria-hidden="true" />
                 {/if}
             </div>
-            <h4 class="min-w-0 flex-1 text-base font-semibold text-headline">
-                {headerTitle}
-            </h4>
-            <div class="flex shrink-0 items-center gap-0.5">
+            <div class="min-w-0 flex-1">
+                <!-- A heading when the app gave the toast a title (or nothing
+                at all); a message on its own is a sentence, not a heading. -->
+                {#if title || !message}
+                    <h4 class="text-base font-semibold text-headline [overflow-wrap:anywhere]">
+                        {headerTitle}
+                    </h4>
+                {:else}
+                    <p class="text-base font-medium text-headline [overflow-wrap:anywhere]" data-toast-message>
+                        {headerTitle}
+                    </p>
+                {/if}
+                {#if secondLine}
+                    <p class="mt-1 text-sm text-description [overflow-wrap:anywhere]" data-toast-message>
+                        {secondLine}
+                    </p>
+                {/if}
+                {#if toast.action}
+                    <!-- The button sits outside the live region, so this is how a screen reader user hears that there is one. -->
+                    <span class="sr-only">{strings.actionAvailable(toast.action.label)}</span>
+                {/if}
+            </div>
+            </div>
+            <div class="ms-auto flex shrink-0 items-center gap-1">
                 {#if hasExpandable}
                     <button
                         type="button"
-                        class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                        class="focus-ring cursor-pointer inline-flex items-center justify-center rounded-control p-1 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px] text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline active:bg-surface-active focus:outline-none"
                         aria-expanded={isExpanded}
-                        aria-controls="toaster-expand-{toast.id}"
-                        aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
+                        aria-controls={isExpanded ? `toaster-expand-${toast.id}` : undefined}
+                        aria-label={isExpanded ? strings.collapse : strings.expand}
+                        bind:this={expandButton}
                         onclick={() => (isExpanded = !isExpanded)}
                     >
                         <ChevronDown
@@ -159,26 +356,41 @@
                 {/if}
                 <button
                     type="button"
-                    class="focus-ring cursor-pointer rounded-md p-1 text-description transition-colors hover:bg-base-100 hover:text-headline focus:outline-none"
+                    class="focus-ring cursor-pointer inline-flex items-center justify-center rounded-control p-1 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px] text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline active:bg-surface-active focus:outline-none"
                     onclick={handleDismiss}
-                    aria-label="Dismiss notification"
+                    aria-label={strings.dismiss}
+                    bind:this={dismissButton}
                 >
                     <X class="size-5" aria-hidden="true" />
                 </button>
             </div>
         </div>
 
+        {#if toast.action}
+            <!-- Indented to the title: past the 20px status icon and its 12px gap. -->
+            <div class="mt-3 pl-[32px]">
+                <Button
+                    variant="secondary"
+                    size="sm"
+                    text={toast.action.label}
+                    type="button"
+                    data-toast-action
+                    onclick={handleAction}
+                />
+            </div>
+        {/if}
+
         {#if hasExpandable && isExpanded}
             <div
                 id="toaster-expand-{toast.id}"
                 class="mt-3"
-                transition:slide={{ duration: 200 }}
+                transition:slide={{ duration: motion(200) }}
             >
                 <p class="text-sm text-description">{expandableText}</p>
                 <Button
                     variant="primary"
                     size="sm"
-                    text="Okay"
+                    text={strings.okay}
                     type="button"
                     class="mt-3"
                     onclick={handleOkay}
@@ -187,25 +399,30 @@
         {/if}
     </div>
 
-    {#if timerActive}
-        <div class="px-4 pb-3" transition:fade={{ duration: 180 }}>
-            <p class="text-xs text-description">
-                This message will close in {count} seconds.
+    {#if timerActive && showCountdown}
+        <div class="px-[16px] pb-3" transition:fade={{ duration: motion(180) }}>
+            <p class="text-xs text-description" data-toast-countdown>
+                {countdownText}
                 <button
                     type="button"
-                    class="focus-ring cursor-pointer rounded-sm text-link underline-offset-2 hover:underline focus:outline-none"
-                    onclick={stopTimer}
+                    class="focus-ring cursor-pointer rounded-control text-link underline-offset-2 hover:underline active:underline focus:outline-none pointer-coarse:inline-flex pointer-coarse:items-center pointer-coarse:min-h-[44px]"
+                    onclick={handleStop}
                 >
-                    Click to stop
+                    {strings.stop}
                 </button>
             </p>
         </div>
+    {:else if timerActive}
+        <!-- The bar below shows the time left to the eye. For a screen reader
+        it is here as words: outside the live region, so it is found when the
+        toast is read and is not spoken again every second. -->
+        <p class="sr-only" data-toast-countdown>{countdownText}</p>
     {/if}
 
     {#if timerActive}
         <div
             class="pointer-events-none absolute bottom-0 left-0 right-0 h-1 bg-border/70"
-            transition:fade={{ duration: 180 }}
+            transition:fade={{ duration: motion(180) }}
             aria-hidden="true"
         >
             <div

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

@@ -1,6 +1,17 @@
 import { type ToastItem } from './toast-store.js';
+import { type ToastDuration, type ToasterStrings, type ToastPauseChange } from "../util/toaster.js";
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     toast: ToastItem;
+    /** Every word the toast says by itself; the Toaster passes its own. */
+    strings?: ToasterStrings;
+    /** Shows the time left as a sentence, with a button that stops the timer. */
+    showCountdown?: boolean;
+    /** What a toast pushed without a duration gets, in place of medium; the Toaster passes its own. */
+    defaultDuration?: ToastDuration;
+    /** Called when a pointer, a finger or focus starts or stops holding the timer. */
+    onpausechange?: (detail: ToastPauseChange) => void;
 }
 declare const ToasterToast: import("svelte").Component<Props, {}, "">;
 type ToasterToast = ReturnType<typeof ToasterToast>;

package/dist/molecules/UnsavedChangesBar.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+    import { DEFAULT_UNSAVED_CHANGES_BAR_TEXTS, zabiStringsFor } from "../util/zabi-strings.js";
+    import { tick, untrack, type Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Button from "../atoms/Button.svelte";
+    import { cn } from "../util/cn.js";
+
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "role"> & {
+        /** Shows the bar. Set it while the form differs from what is saved. */
+        dirty?: boolean;
+        /** Shown in the bar, and announced once when it appears. */
+        message?: string;
+        /** Accessible name of the bar as a landmark. */
+        label?: string;
+        saveLabel?: string;
+        discardLabel?: string;
+        /**
+         * Save shows its loading state and Discard is disabled. Set by the
+         * bar itself while a promise from `onsave` is pending.
+         */
+        saving?: boolean;
+        /**
+         * Called when Save is activated. Return a promise to keep the bar in
+         * its saving state until it settles. The bar does not hide itself:
+         * clear `dirty` once the save has gone through.
+         */
+        onsave?: () => void | Promise<unknown>;
+        /** Called when Discard is activated. */
+        ondiscard?: () => void;
+        /**
+         * Called when the promise from `onsave` rejects; the bar stays.
+         * Without it the error goes to the global error handler.
+         */
+        onerror?: (error: unknown) => void;
+        /**
+         * Which edge of its scroll container the bar sticks to. It is sticky,
+         * not fixed, so it keeps its place in the flow: put it after the
+         * form's last field (`bottom`) or before its first (`top`).
+         */
+        position?: "bottom" | "top";
+        /** Extra buttons, placed before Discard. */
+        actions?: Snippet;
+        /** Extra classes for the bar. */
+        class?: string;
+    };
+
+    let {
+        dirty = false,
+        message: messageGiven,
+        label: labelGiven,
+        saveLabel: saveLabelGiven,
+        discardLabel: discardLabelGiven,
+        saving = false,
+        onsave,
+        ondiscard,
+        onerror,
+        position = "bottom",
+        actions,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    /** Each text: the prop, else the app-wide word from a `ZabiStringsProvider` above this one, else English. */
+    const provided = zabiStringsFor("unsavedChangesBar");
+    const message = $derived(messageGiven ?? provided()?.message ?? DEFAULT_UNSAVED_CHANGES_BAR_TEXTS.message);
+    const label = $derived(labelGiven ?? provided()?.label ?? DEFAULT_UNSAVED_CHANGES_BAR_TEXTS.label);
+    const saveLabel = $derived(saveLabelGiven ?? provided()?.saveLabel ?? DEFAULT_UNSAVED_CHANGES_BAR_TEXTS.saveLabel);
+    const discardLabel = $derived(discardLabelGiven ?? provided()?.discardLabel ?? DEFAULT_UNSAVED_CHANGES_BAR_TEXTS.discardLabel);
+
+    /** True while a promise returned by `onsave` is pending. */
+    let pending = $state(false);
+    const busy = $derived(saving || pending);
+
+    let host: HTMLDivElement | undefined = $state();
+    /** Where focus was before it came into the bar; it goes back there when the bar leaves. */
+    let cameFrom: HTMLElement | null = null;
+
+    async function save() {
+        if (busy) return;
+        // A synchronous throw is the caller's bug: it propagates.
+        const result = onsave?.();
+        if (!(result instanceof Promise)) return;
+        pending = true;
+        try {
+            await result;
+        } catch (error) {
+            // The bar stays, so the caller can show what went wrong. Never
+            // swallowed: with no `onerror` it is reported like any other
+            // uncaught error.
+            if (onerror) onerror(error);
+            else if (typeof reportError === "function") reportError(error);
+            else console.error(error);
+        } finally {
+            pending = false;
+        }
+    }
+
+    function discard() {
+        if (busy) return;
+        ondiscard?.();
+    }
+
+    function handleFocusIn(event: FocusEvent) {
+        const from = event.relatedTarget;
+        if (from instanceof HTMLElement && !host?.contains(from)) cameFrom = from;
+    }
+
+    function canTakeFocus(element: HTMLElement | null): element is HTMLElement {
+        return (
+            !!element &&
+            element.isConnected &&
+            !(element as HTMLButtonElement).disabled &&
+            !host?.contains(element)
+        );
+    }
+
+    /**
+     * While busy, Save is loading and stays focusable, so focus that is on
+     * it is left there. Discard is disabled, and a disabled button drops
+     * focus on `<body>`: focus that was on it (or on an action that is gone)
+     * is held on the bar instead, and handed to Save if the bar is still
+     * there afterwards (a rejected save).
+     */
+    let wasBusy = false;
+    $effect.pre(() => {
+        const now = busy;
+        untrack(() => {
+            const changed = now !== wasBusy;
+            wasBusy = now;
+            // Read before the buttons change: afterwards focus may be gone.
+            if (!changed || !host?.contains(document.activeElement)) return;
+            void tick().then(() => {
+                if (now) {
+                    const active = document.activeElement;
+                    const usable =
+                        !!active &&
+                        active !== host &&
+                        !!host?.contains(active) &&
+                        !(active as HTMLButtonElement).disabled;
+                    if (!usable) host?.focus();
+                } else if (dirty && document.activeElement === host) {
+                    host?.querySelector<HTMLElement>("[data-unsaved-changes-save]")?.focus();
+                }
+            });
+        });
+    });
+
+    /**
+     * When the bar leaves, its buttons go with it. If focus was on one, send
+     * it back to where it came from, usually the field the user was editing;
+     * failing that it stays on the (now empty) host, which keeps the user's
+     * place in the page instead of dropping them at the top.
+     */
+    let wasDirty = false;
+    $effect.pre(() => {
+        const now = dirty;
+        untrack(() => {
+            const leaving = wasDirty && !now;
+            wasDirty = now;
+            if (!leaving || !host?.contains(document.activeElement)) return;
+            const target = canTakeFocus(cameFrom) ? cameFrom : host;
+            cameFrom = null;
+            void tick().then(() => {
+                const active = document.activeElement;
+                // Never from an element that has taken focus meanwhile.
+                if (active && active !== document.body && !host?.contains(active)) return;
+                target.focus();
+            });
+        });
+    });
+</script>
+
+<!--
+  The host is always rendered and empty until `dirty`. The message is a live
+  region, and a live region is only announced when its text changes inside an
+  element that was already there. The status is on the message alone, so the
+  buttons are not read out with it, and nothing here takes focus on appearing.
+-->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+    bind:this={host}
+    tabindex="-1"
+    role={dirty ? "region" : undefined}
+    aria-label={dirty ? label : undefined}
+    aria-busy={dirty && busy ? "true" : undefined}
+    data-position={position}
+    class={cn(
+        "focus-ring",
+        dirty &&
+            "sticky z-sticky flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-container border border-border-overlay bg-surface-overlay px-4 py-3 shadow-lg",
+        // Clear of the home indicator on a phone.
+        dirty && (position === "top" ? "top-2" : "bottom-[max(0.5rem,env(safe-area-inset-bottom))]"),
+        dirty && className,
+    )}
+    onfocusin={handleFocusIn}
+    {...restProps}
+>
+    <p role="status" class={dirty ? "min-w-0 text-sm font-medium text-body" : "sr-only"}>
+        {dirty ? message : ""}
+    </p>
+    {#if dirty}
+        <div class="flex flex-wrap items-center gap-2">
+            {@render actions?.()}
+            <Button variant="ghost" onclick={discard} disabled={busy}>
+                {discardLabel}
+            </Button>
+            <Button onclick={save} loading={busy} data-unsaved-changes-save>
+                {saveLabel}
+            </Button>
+        </div>
+    {/if}
+</div>