zabi-components 8.0.0 → 9.0.0

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

@@ -1,8 +1,23 @@
 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;
+    /** The compact form for a phone: one row, docked, sliding out from the edge it sits on. */
+    snackbar?: boolean;
+    /** A touch or a pen drags the toast away, sideways (and down, in the snackbar). */
+    swipeToDismiss?: boolean;
+    /** Draws the time bar (`true`/`false`); unset, it is left out of a snackbar toast with nothing to press. */
+    timeLine?: boolean;
 }
 declare const ToasterToast: import("svelte").Component<Props, {}, "">;
 type ToasterToast = ReturnType<typeof ToasterToast>;

package/dist/molecules/UnsavedChangesBar.svelte

@@ -0,0 +1,223 @@
+<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 { getAppShell } from "../util/app-shell.js";
+    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);
+
+    /** In a shell whose footer lies over the scroller the bar floats above the footer, which already clears the home indicator. */
+    const shell = getAppShell();
+    const aboveFooter = $derived(shell?.footerOverlays === true);
+
+    /** 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}
+    data-toast-clear={dirty ? "" : undefined}
+    class={cn(
+        "focus-ring",
+        dirty &&
+            "material-layer-regular sticky z-sticky flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-container px-4 py-3",
+        // Clear of the home indicator on a phone.
+        dirty &&
+            (position === "top"
+                ? "top-2"
+                : aboveFooter
+                  ? "bottom-[calc(var(--app-shell-footer-overlay,0px)+0.5rem)]"
+                  : "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>

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

@@ -0,0 +1,43 @@
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+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;
+};
+declare const UnsavedChangesBar: import("svelte").Component<Props, {}, "">;
+type UnsavedChangesBar = ReturnType<typeof UnsavedChangesBar>;
+export default UnsavedChangesBar;

package/dist/molecules/index.d.ts

@@ -2,8 +2,12 @@ export { default as Alert } from './Alert.svelte';
 export { default as ComponentDemo } from './ComponentDemo.svelte';
 export { default as ContactForm } from './ContactForm.svelte';
 export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownItem } from './DropdownItem.svelte';
+export type { DropdownItemIcon, DropdownItemTone, DropdownOption, } from '../util/dropdown.js';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
+export { default as MediaGrid } from './MediaGrid.svelte';
+export type { MediaGridItemType, MediaGridKey, MediaGridSelectDetail, MediaGridStrings, } from '../util/media-grid.js';
 export { default as Modal } from './Modal.svelte';
 export { default as NavigationMenu } from './NavigationMenu.svelte';
 export { default as NavigationMenuList } from './NavigationMenuList.svelte';
@@ -23,4 +27,51 @@ export { default as Header } from './Header.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
 export { default as Toaster } from './Toaster.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as ChipGroup } from './ChipGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentedControlIcon, SegmentedControlOption, } from '../util/segmented-control.js';
+export { default as SortableList } from './SortableList.svelte';
+export type { SortableListAnnouncement, SortableListReorderDetail, SortableListRow, SortableListStrings, } from '../util/sortable-list.js';
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as SwipeableListItem } from './SwipeableListItem.svelte';
+export { DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS } from '../util/swipeable-list-item.js';
+export type { SwipeableListItemAction, SwipeableListItemStrings } from '../util/swipeable-list-item.js';
+export { default as PullToRefresh } from './PullToRefresh.svelte';
+export { DEFAULT_PULL_TO_REFRESH_STRINGS } from '../util/pull-to-refresh.js';
+export type { PullToRefreshStrings } from '../util/pull-to-refresh.js';
+export { default as CollapsibleGroup } from './CollapsibleGroup.svelte';
+export type { CollapsibleHeadingLevel, CollapsibleTriggerProps, CollapsibleTriggerState, } from '../util/collapsible.js';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export type { ConfirmDialogCancelReason, ConfirmDialogResult, ConfirmDialogVariant, } from '../util/confirm-dialog.js';
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerCloseReason, DrawerSide, DrawerSize, } from '../util/drawer.js';
+export { default as UnsavedChangesBar } from './UnsavedChangesBar.svelte';
+export { default as AppBar } from './AppBar.svelte';
+export { default as BottomTabBar } from './BottomTabBar.svelte';
+export type { BottomTabBarIcon, BottomTabBarItem, } from '../util/bottom-tab-bar.js';
+export { default as BottomSheet } from './BottomSheet.svelte';
+export type { BottomSheetCloseReason, BottomSheetSnap, } from '../util/bottom-sheet.js';
+export { default as StickyActionBar } from './StickyActionBar.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export type { CalendarEvent, CalendarStrings, CalendarTone, } from '../util/calendar.js';
+export { default as PhotoGrid } from './PhotoGrid.svelte';
+export { default as PhotoViewer } from './PhotoViewer.svelte';
+export type { Photo, PhotoGridSelectDetail, PhotoGridStrings, PhotoKey, PhotoStatus, PhotoViewerAction, PhotoViewerCloseReason, PhotoViewerStrings, } from '../util/photo.js';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { DEFAULT_AVATAR_GROUP_STRINGS } from '../util/avatar.js';
+export type { AvatarGroupStrings, AvatarPerson } from '../util/avatar.js';
+export { default as LineChart } from './LineChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export type { ChartColor, ChartColorName, ChartDatum, ChartFormat, ChartSeries, } from '../util/chart.js';
+export { default as Stepper } from './Stepper.svelte';
+export type { StepperItem, StepperLayout, StepperStep, StepperStepState, StepperStrings, } from '../util/stepper.js';
 export * from './toast-store.js';
+export { DEFAULT_TOASTER_STRINGS, TOAST_DURATIONS } from '../util/toaster.js';
+export type { ToasterStrings, ToasterMode, ToastPauseChange, ToastDuration } from '../util/toaster.js';
+export { DEFAULT_SELECT_STRINGS } from '../util/select.js';
+export type { SelectStrings, SelectPresentation } from '../util/select.js';
+export { DEFAULT_SIDEBAR_BRAND_HEADER_STRINGS, DEFAULT_SIDEBAR_FOOTER_STRINGS, } from '../util/sidebar.js';
+export type { SidebarBrandHeaderStrings, SidebarFooterStrings } from '../util/sidebar.js';
+export { DEFAULT_COMPONENT_DEMO_STRINGS, DEFAULT_CONTACT_FORM_STRINGS, DEFAULT_PROPS_TABLE_STRINGS, } from '../util/ready-made-strings.js';
+export type { ComponentDemoStrings, ContactFormStrings, PropsTableStrings, } from '../util/ready-made-strings.js';

package/dist/molecules/index.js

@@ -2,8 +2,10 @@ export { default as Alert } from './Alert.svelte';
 export { default as ComponentDemo } from './ComponentDemo.svelte';
 export { default as ContactForm } from './ContactForm.svelte';
 export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownItem } from './DropdownItem.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
+export { default as MediaGrid } from './MediaGrid.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as NavigationMenu } from './NavigationMenu.svelte';
 export { default as NavigationMenuList } from './NavigationMenuList.svelte';
@@ -23,4 +25,33 @@ export { default as Header } from './Header.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
 export { default as Toaster } from './Toaster.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as ChipGroup } from './ChipGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export { default as SortableList } from './SortableList.svelte';
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as SwipeableListItem } from './SwipeableListItem.svelte';
+export { DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS } from '../util/swipeable-list-item.js';
+export { default as PullToRefresh } from './PullToRefresh.svelte';
+export { DEFAULT_PULL_TO_REFRESH_STRINGS } from '../util/pull-to-refresh.js';
+export { default as CollapsibleGroup } from './CollapsibleGroup.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as UnsavedChangesBar } from './UnsavedChangesBar.svelte';
+export { default as AppBar } from './AppBar.svelte';
+export { default as BottomTabBar } from './BottomTabBar.svelte';
+export { default as BottomSheet } from './BottomSheet.svelte';
+export { default as StickyActionBar } from './StickyActionBar.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as PhotoGrid } from './PhotoGrid.svelte';
+export { default as PhotoViewer } from './PhotoViewer.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { DEFAULT_AVATAR_GROUP_STRINGS } from '../util/avatar.js';
+export { default as LineChart } from './LineChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as Stepper } from './Stepper.svelte';
 export * from './toast-store.js';
+export { DEFAULT_TOASTER_STRINGS, TOAST_DURATIONS } from '../util/toaster.js';
+export { DEFAULT_SELECT_STRINGS } from '../util/select.js';
+export { DEFAULT_SIDEBAR_BRAND_HEADER_STRINGS, DEFAULT_SIDEBAR_FOOTER_STRINGS, } from '../util/sidebar.js';
+export { DEFAULT_COMPONENT_DEMO_STRINGS, DEFAULT_CONTACT_FORM_STRINGS, DEFAULT_PROPS_TABLE_STRINGS, } from '../util/ready-made-strings.js';

package/dist/molecules/toast-store.d.ts

@@ -1,17 +1,70 @@
+import type { ToastDuration } from '../util/toaster.js';
 export type ToastLevel = 'success' | 'error' | 'warning' | 'info';
+/**
+ * One action offered inside a toast, such as Undo.
+ *
+ * A toast with an action stays until it is dismissed, unless you give it a
+ * `duration` (a named length or milliseconds): a keyboard user has to reach the button first, and the toaster
+ * may be far away in the tab order (WCAG 2.2.1). `focusToasts()` moves focus
+ * there. The action must still not be the only way to do the thing: offer it
+ * elsewhere in the page as well.
+ */
+export interface ToastAction {
+    /** Button text, and its accessible name. */
+    label: string;
+    onclick: () => void;
+    /** Close the toast after the handler runs. Defaults to `true`. */
+    dismissOnClick?: boolean;
+}
 export interface ToastItem {
     id: string;
-    /** Primary line (always shown). */
+    /**
+     * What the toast says. Always shown: as its one line, or under `title`
+     * when it has one.
+     */
     message: string;
     type: ToastLevel;
+    /** A heading over the message. Without it the message stands alone. */
     title?: string;
-    /** Expandable body; UI can fall back to `message`. */
+    /**
+     * The long version, kept behind a button that opens it. Only a toast
+     * with `detail` has that button.
+     */
     detail?: string;
     /**
-     * Auto-dismiss duration in milliseconds.
-     * When omitted, the toaster uses 14s. Use `0` to keep the toast until dismissed manually.
+     * How long the toast stays: `"short"` (3 s, a few words that need no
+     * reading time), `"medium"` (7 s), `"long"` (14 s), `"persistent"`
+     * (until it is dismissed: what the user has to act on, and errors), or
+     * a number of milliseconds, where `0` is persistent too. What is given
+     * here always wins.
+     *
+     * When omitted, the toaster decides: an error and a toast with an
+     * `action` stay until dismissed. Everything else goes by its title and
+     * message together: up to 120 characters gets `medium` (or the
+     * Toaster's `defaultDuration`), 121 to 240 gets `long`, and more than
+     * 240 stays until dismissed.
      */
-    duration?: number;
+    duration?: ToastDuration;
+    /** An action button in the toast, such as Undo. */
+    action?: ToastAction;
+    /**
+     * `false` leaves the close button out, for a short timed confirmation
+     * that nobody has to act on: the toast then has no control, takes no
+     * taps (they reach the page under it) and cannot be held. Ignored, and
+     * the button shown, for a toast that stays (an error, one with an
+     * action, `"persistent"`), one with `detail`, and under a Toaster with
+     * `showCountdown`. Defaults to `true`.
+     */
+    closable?: boolean;
+    /**
+     * Whether the thin bar along the bottom, which empties over the toast's
+     * time, is drawn. Unset, the Toaster decides: it is drawn, except under
+     * a confirmation in the snackbar that has nothing to press (the case
+     * `closable: false` makes), where it is left out. `true` or `false`
+     * here wins over the Toaster's `timeLine`. The sentence a screen reader
+     * finds for the time left stays either way.
+     */
+    timeLine?: boolean;
 }
 export declare const toastStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<ToastItem[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
@@ -19,20 +72,43 @@ export declare const toastStore: {
         message: string;
         type?: ToastLevel;
         /** Same semantics as {@link ToastItem.duration}. */
-        duration?: number;
+        duration?: ToastDuration;
         id?: string;
         title?: string;
         detail?: string;
+        action?: ToastAction;
+        closable?: boolean;
+        timeLine?: boolean;
     }): string;
     dismiss: (id: string) => void;
     clear(): void;
 };
 export declare function pushToast(options: {
     message: string;
+    /**
+     * Gives the toast a name of your own. Pushing with the id of a toast that
+     * is showing replaces it in place, with its time started again, so
+     * "Saved" pushed three times is one toast.
+     */
+    id?: string;
     type?: ToastLevel;
     /** Same semantics as {@link ToastItem.duration}. */
-    duration?: number;
+    duration?: ToastDuration;
     title?: string;
     detail?: string;
+    /** An action button in the toast, such as Undo. See {@link ToastAction}. */
+    action?: ToastAction;
+    /** `false` leaves the close button out of a short timed toast. See {@link ToastItem.closable}. */
+    closable?: boolean;
+    /** `false` leaves the time bar out, `true` forces it. See {@link ToastItem.timeLine}. */
+    timeLine?: boolean;
 }): string;
 export declare function dismissToast(id: string): void;
+/**
+ * Moves keyboard focus to the newest toast, so its action can be reached
+ * without tabbing through the page. Bind it to a shortcut of your own; the
+ * library registers none. Returns false when there is no toast to focus.
+ *
+ * Focus returns to where it was when that toast is dismissed.
+ */
+export declare function focusToasts(): boolean;

package/dist/molecules/toast-store.js

@@ -15,8 +15,12 @@ function createToastStore() {
                 duration: options.duration,
                 title: options.title,
                 detail: options.detail,
+                action: options.action,
+                closable: options.closable,
+                timeLine: options.timeLine,
             };
-            update((list) => [...list, item]);
+            // A toast pushed with the id of one that is showing replaces it where it stands.
+            update((list) => list.some((t) => t.id === id) ? list.map((t) => (t.id === id ? item : t)) : [...list, item]);
             return id;
         },
         dismiss,
@@ -32,3 +36,23 @@ export function pushToast(options) {
 export function dismissToast(id) {
     toastStore.dismiss(id);
 }
+/**
+ * Moves keyboard focus to the newest toast, so its action can be reached
+ * without tabbing through the page. Bind it to a shortcut of your own; the
+ * library registers none. Returns false when there is no toast to focus.
+ *
+ * Focus returns to where it was when that toast is dismissed.
+ */
+export function focusToasts() {
+    if (typeof document === 'undefined')
+        return false;
+    const toasts = document.querySelectorAll('[data-zabi-toaster] [data-toast-id]');
+    const newest = toasts[toasts.length - 1];
+    // The action if the toast has one, else its first control.
+    const target = newest?.querySelector('[data-toast-action]') ??
+        newest?.querySelector('button');
+    if (!target)
+        return false;
+    target.focus();
+    return document.activeElement === target;
+}