zabi-components 8.1.0 → 9.0.0

package/dist/molecules/ToasterToast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { onMount, untrack } from 'svelte';
     import { cubicOut } from 'svelte/easing';
     import { slide, fade, fly } from 'svelte/transition';
     import AlertCircle from '@lucide/svelte/icons/circle-alert';
@@ -11,10 +11,15 @@
     import Button from '../atoms/Button.svelte';
     import { toastStore, type ToastItem } from './toast-store.js';
     import { cn } from "../util/cn.js";
+    import { createVelocityTracker, DRAG_SLOP, FLICK_VELOCITY, prefersReducedMotion, timeOf } from "../util/sheet-drag.js";
     import {
         DEFAULT_TOASTER_STRINGS,
+        easeStandard,
         resolveToastDuration,
+        toastsReplaced,
+        toastTexts,
         TOAST_SECONDS_AFTER_HOLD,
+        TOAST_SWIPE_DISMISS_FRACTION,
         type ToastDuration,
         type ToasterStrings,
         type ToastPauseChange,
@@ -32,6 +37,12 @@
         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;
     }
 
     let {
@@ -41,6 +52,9 @@
         showCountdown = false,
         defaultDuration,
         onpausechange,
+        snackbar = false,
+        swipeToDismiss = true,
+        timeLine,
     }: Props = $props();
 
     let count = $state(0);
@@ -57,27 +71,11 @@
 
     let intervalRef: ReturnType<typeof setInterval> | undefined;
 
-    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 : "");
+    const texts = $derived(toastTexts(toast, strings));
+    const title = $derived(texts.title);
+    const message = $derived(texts.message);
+    const headerTitle = $derived(texts.headerTitle);
+    const secondLine = $derived(texts.secondLine);
 
     /**
      * The part that opens and closes is `detail`, when the toast was given
@@ -105,6 +103,39 @@
         return ms <= 0 ? 0 : Math.max(1, Math.ceil(ms / 1000));
     });
 
+    /**
+     * A short timed toast pushed with `closable: false` has no control at
+     * all. A toast that stays, or has a button of any kind to press, keeps
+     * its close button: there must always be a way to dismiss that is not a
+     * gesture.
+     */
+    const bare = $derived(
+        toast.closable === false &&
+            maxSeconds > 0 &&
+            !toast.action &&
+            !hasExpandable &&
+            !showCountdown &&
+            toast.type !== 'error',
+    );
+
+    /**
+     * The bar says "you have this long to press". A confirmation with nothing
+     * to press, in the snackbar, has no use for it (and WCAG 2.2.1 is about
+     * time to act, of which there is none), so it is left out there unless
+     * asked for. The stack keeps it. The toast's own setting wins over the Toaster's.
+     */
+    const drawTimeLine = $derived(toast.timeLine ?? timeLine ?? !(snackbar && bare));
+
+    /**
+     * What a screen reader hears is a live region that is in the page
+     * empty and gets its words afterwards: one that is inserted already
+     * filled is the pattern screen readers are least dependable on. So the
+     * words are put in a moment after the toast is mounted (the toast is
+     * still coming in then). The server's markup has them at once.
+     */
+    let spoken = $state(typeof document === 'undefined');
+    const SPEAK_AFTER_MS = 100;
+
     /** 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),
@@ -147,11 +178,11 @@
         timerActive = false;
     }
 
-    onMount(() => {
+    /** (Re)starts the timer from the full time; a toast that stays has none. */
+    function startTimer() {
+        stopTimer();
         const max = maxSeconds;
-        if (max <= 0) {
-            return () => {};
-        }
+        if (max <= 0) return;
         count = max;
         timerActive = true;
 
@@ -166,8 +197,15 @@
                 toastStore.dismiss(toast.id);
             }
         }, 1000);
+    }
+
+    onMount(() => {
+        startTimer();
+        const speak = setTimeout(() => (spoken = true), SPEAK_AFTER_MS);
 
         return () => {
+            clearTimeout(speak);
+            clearTimeout(settleTimer);
             if (intervalRef !== undefined) {
                 clearInterval(intervalRef);
                 intervalRef = undefined;
@@ -175,6 +213,22 @@
         };
     });
 
+    // The same id pushed again replaces the toast in place: new words, the full time again.
+    let shownToast: ToastItem | undefined;
+    $effect(() => {
+        const current = toast;
+        if (shownToast === undefined) {
+            shownToast = current;
+            return;
+        }
+        if (current === shownToast) return;
+        shownToast = current;
+        untrack(() => {
+            isExpanded = false;
+            startTimer();
+        });
+    });
+
     function handleDismiss() {
         toastStore.dismiss(toast.id);
     }
@@ -213,29 +267,141 @@
     }
 
     /**
-     * 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.
+     * A mouse or a stylus holds the timer once it has moved over the toast,
+     * not when the toast arrives under it: a browser sends `pointerenter` to
+     * an element that appears under a pointer at rest, and a toast shown
+     * where the last click was would otherwise be held until the mouse is
+     * moved away. A finger holds it while it is on the toast.
      */
-    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 handlePointerMove(event: PointerEvent) {
+        if (dragging) {
+            drag(event);
+            return;
+        }
+        if (tracked) maybeStartDrag(event);
+        if (event.pointerType === "touch" || hovered) return;
+        // A move of no distance is not the pointer moving (a browser repeating
+        // its position after the layout changed); one with no such field is.
+        const moved =
+            typeof event.movementX !== "number" ||
+            Number.isNaN(event.movementX) ||
+            event.movementX !== 0 ||
+            event.movementY !== 0;
+        if (moved) hovered = true;
     }
 
+    // Swiping away: a touch or a pen drags the toast sideways, or down in the
+    // snackbar (it is docked at the bottom); past 40% of its width or a flick it
+    // goes, otherwise it settles back. Reuses the sheets' drag constants.
+    let root = $state<HTMLDivElement>();
+    let dragX = $state(0);
+    let dragY = $state(0);
+    let dragging = $state(false);
+    let settling = $state(false);
+    let tracked = false;
+    let pointerId = -1;
+    let startX = 0;
+    let startY = 0;
+    let axis: "x" | "y" | null = null;
+    let swallowClick = false;
+    let settleTimer: ReturnType<typeof setTimeout> | undefined;
+    const trackX = createVelocityTracker();
+    const trackY = createVelocityTracker();
+
     function handlePointerDown(event: PointerEvent) {
-        lastPointer = event.pointerType;
         if (event.pointerType === "touch") held = true;
+        if (!swipeToDismiss || bare || event.pointerType === "mouse" || !event.isPrimary) return;
+        // A button keeps its own press.
+        if ((event.target as Element | null)?.closest?.("button, a[href], input, select, textarea")) return;
+        clearTimeout(settleTimer);
+        settling = false;
+        tracked = true;
+        pointerId = event.pointerId;
+        startX = event.clientX;
+        startY = event.clientY;
+        axis = null;
+        const time = timeOf(event);
+        trackX.reset(event.clientX, time);
+        trackY.reset(event.clientY, time);
+    }
+
+    function drag(event: PointerEvent) {
+        if (event.pointerId !== pointerId) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+        const time = timeOf(event);
+        trackX.add(event.clientX, time);
+        trackY.add(event.clientY, time);
+        dragX = axis === "x" ? dx : 0;
+        dragY = axis === "y" ? Math.max(0, dy) : 0;
+    }
+
+    /** Called for every move of a pointer that is down on the toast, before it is a drag. */
+    function maybeStartDrag(event: PointerEvent) {
+        if (!tracked || event.pointerId !== pointerId) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+        const time = timeOf(event);
+        trackX.add(event.clientX, time);
+        trackY.add(event.clientY, time);
+        if (Math.hypot(dx, dy) < DRAG_SLOP) return;
+        const sideways = Math.abs(dx) > Math.abs(dy);
+        // Up is the way a page scrolls, and in the stack there is no edge to go down to.
+        if (!sideways && (dy < 0 || !snackbar)) {
+            tracked = false;
+            return;
+        }
+        axis = sideways ? "x" : "y";
+        dragging = true;
+        try {
+            root?.setPointerCapture(event.pointerId);
+        } catch {
+            // A pointer that is gone cannot be captured; the drag simply ends.
+        }
+        drag(event);
+    }
+
+    function finishDrag(event: PointerEvent, cancelled: boolean) {
+        if (!tracked || event.pointerId !== pointerId) return;
+        tracked = false;
+        if (!dragging) return;
+        dragging = false;
+        swallowClick = true;
+        setTimeout(() => (swallowClick = false), 0);
+        const width = root?.offsetWidth || 1;
+        const height = root?.offsetHeight || 1;
+        const sideways = axis === "x";
+        const distance = sideways ? dragX : dragY;
+        const velocity = sideways ? trackX.velocity() : trackY.velocity();
+        const flicked = Math.abs(velocity) > FLICK_VELOCITY && Math.sign(velocity) === Math.sign(distance);
+        const far = Math.abs(distance) > (sideways ? width : height) * TOAST_SWIPE_DISMISS_FRACTION;
+        if (!cancelled && (far || flicked)) {
+            if (prefersReducedMotion()) {
+                toastStore.dismiss(toast.id);
+                return;
+            }
+            // Out the way it was going, then gone.
+            settling = true;
+            if (sideways) dragX = Math.sign(distance || 1) * (width + 32);
+            else dragY = height + 32;
+            settleTimer = setTimeout(() => toastStore.dismiss(toast.id), 200);
+            return;
+        }
+        // Back where it was.
+        settling = !prefersReducedMotion();
+        dragX = 0;
+        dragY = 0;
+        settleTimer = setTimeout(() => (settling = false), 220);
+    }
+
+    function handleClickCapture(event: MouseEvent) {
+        if (!swallowClick) return;
+        event.preventDefault();
+        event.stopPropagation();
     }
 
     /**
@@ -244,6 +410,7 @@
      * was held because someone was reading it.
      */
     function handlePointerRelease(event: PointerEvent) {
+        finishDrag(event, event.type === "pointercancel");
         if (event.pointerType !== "touch" || !held) return;
         held = false;
         if (timerActive) count = Math.max(count, Math.min(TOAST_SECONDS_AFTER_HOLD, maxSeconds));
@@ -257,26 +424,78 @@
     }
 
     /** 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 reducedMotion = prefersReducedMotion();
     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 };
+
+    /**
+     * The snackbar comes out from behind the edge it is docked on and goes
+     * back into it: it slides down by its own height and the gap, on the
+     * standard curve, with no overshoot. The region clips it at that edge.
+     */
+    function dock(node: HTMLElement, leaving: boolean) {
+        const distance = node.offsetHeight + 24;
+        return {
+            duration: motion(leaving ? 200 : 280),
+            easing: easeStandard,
+            css: (t: number, u: number) => `transform: translateY(${u * distance}px); opacity: ${Math.min(1, t * 3)}`,
+        };
+    }
+
+    function enter(node: HTMLElement) {
+        return snackbar ? dock(node, false) : fly(node, toastEnter);
+    }
+
+    function leave(node: HTMLElement) {
+        // Dropped for a newer toast that is coming in where it is: gone at once.
+        if (toastsReplaced.delete(toast.id)) return { duration: 0 };
+        return snackbar ? dock(node, true) : fly(node, toastLeave);
+    }
+
+    /** One line of text is centred on the buttons beside it; text that wraps stays at the top. */
+    let textBox = $state<HTMLDivElement>();
+    let oneLine = $state(false);
+    $effect(() => {
+        const box = textBox;
+        void headerTitle;
+        void secondLine;
+        if (!box || typeof getComputedStyle !== 'function') return;
+        const measure = () => {
+            const line = parseFloat(getComputedStyle(box).lineHeight) || 24;
+            oneLine = box.scrollHeight <= line * 1.5;
+        };
+        measure();
+        if (typeof ResizeObserver !== 'function') return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    });
 </script>
 
+<!-- Radius: the snackbar's 4px of padding round a control of 8px make 12px (outer = inner + padding). -->
 <div
-    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}
-    onpointerenter={handlePointerEnter}
+    bind:this={root}
+    class={cn(
+        "relative w-full min-w-[min(18rem,100%)] shrink-0 overflow-hidden material-thick",
+        snackbar ? "rounded-container" : "rounded-overlay",
+        // No control in it: a tap goes through to the page.
+        bare ? "pointer-events-none" : "pointer-events-auto",
+        className,
+    )}
+    in:enter
+    out:leave
+    style:transform={dragX !== 0 || dragY !== 0 ? `translate3d(${dragX}px, ${dragY}px, 0)` : undefined}
+    style:opacity={dragging || settling ? Math.max(0.2, 1 - Math.hypot(dragX, dragY) / (root?.offsetWidth || 300)) : undefined}
+    style:transition={settling ? "transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard)" : undefined}
+    style:touch-action={swipeToDismiss && !bare ? (snackbar ? "none" : "pan-y") : undefined}
     onpointerleave={handlePointerLeave}
     onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
     onpointerup={handlePointerRelease}
     onpointercancel={handlePointerRelease}
-    onmouseenter={handleMouseEnter}
+    onclickcapture={handleClickCapture}
     onmouseleave={() => (hovered = false)}
     onfocusin={() => (focusWithin = true)}
     onfocusout={handleFocusOut}
@@ -287,11 +506,11 @@
 >
     <!-- 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]">
+    <div class={snackbar ? "p-[4px] ps-[12px]" : "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]">
+        <div class="flex flex-wrap {oneLine ? 'items-center' : 'items-start'} gap-x-[12px] gap-y-[4px] {snackbar ? 'min-h-[44px]' : ''}">
             <!-- 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]"
@@ -312,30 +531,41 @@
                     <Info class="size-[20px] {statusIconClass}" aria-hidden="true" />
                 {/if}
             </div>
-            <div class="min-w-0 flex-1">
+            <div class="min-w-0 flex-1" bind:this={textBox}>
                 <!-- 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}
+                        {spoken ? headerTitle : "\u00a0"}
                     </h4>
                 {:else}
                     <p class="text-base font-medium text-headline [overflow-wrap:anywhere]" data-toast-message>
-                        {headerTitle}
+                        {spoken ? headerTitle : "\u00a0"}
                     </p>
                 {/if}
                 {#if secondLine}
                     <p class="mt-1 text-sm text-description [overflow-wrap:anywhere]" data-toast-message>
-                        {secondLine}
+                        {spoken ? secondLine : "\u00a0"}
                     </p>
                 {/if}
-                {#if toast.action}
+                {#if toast.action && spoken}
                     <!-- 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>
+            {#if !bare}
             <div class="ms-auto flex shrink-0 items-center gap-1">
+                {#if snackbar && toast.action}
+                    <Button
+                        variant="text"
+                        size="sm"
+                        text={toast.action.label}
+                        type="button"
+                        data-toast-action
+                        onclick={handleAction}
+                    />
+                {/if}
                 {#if hasExpandable}
                     <button
                         type="button"
@@ -364,9 +594,10 @@
                     <X class="size-5" aria-hidden="true" />
                 </button>
             </div>
+            {/if}
         </div>
 
-        {#if toast.action}
+        {#if toast.action && !snackbar}
             <!-- Indented to the title: past the 20px status icon and its 12px gap. -->
             <div class="mt-3 pl-[32px]">
                 <Button
@@ -419,14 +650,15 @@
         <p class="sr-only" data-toast-countdown>{countdownText}</p>
     {/if}
 
-    {#if timerActive}
+    {#if timerActive && drawTimeLine}
         <div
-            class="pointer-events-none absolute bottom-0 left-0 right-0 h-1 bg-border/70"
+            class="pointer-events-none absolute bottom-0 left-0 right-0 h-1 bg-border/70 forced-colors:outline-1 forced-colors:-outline-offset-1 forced-colors:outline-[color:CanvasText]"
+            data-toast-timeline
             transition:fade={{ duration: motion(180) }}
             aria-hidden="true"
         >
             <div
-                class="h-full {progressFillClass} transition-all duration-1000 ease-linear"
+                class="h-full {progressFillClass} forced-colors:bg-[color:Highlight]! transition-all duration-1000 ease-linear"
                 style="width: {(count / maxSeconds) * 100}%"
             ></div>
         </div>

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

@@ -12,6 +12,12 @@ interface Props {
     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

@@ -3,6 +3,7 @@
     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"> & {
@@ -67,6 +68,10 @@
     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);
@@ -184,12 +189,18 @@
     aria-label={dirty ? label : undefined}
     aria-busy={dirty && busy ? "true" : undefined}
     data-position={position}
+    data-toast-clear={dirty ? "" : undefined}
     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",
+            "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" : "bottom-[max(0.5rem,env(safe-area-inset-bottom))]"),
+        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}

package/dist/molecules/index.d.ts

@@ -27,6 +27,7 @@ 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';
@@ -55,15 +56,19 @@ 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, PhotoViewerAction, PhotoViewerCloseReason, PhotoViewerStrings, } from '../util/photo.js';
+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, ToastPauseChange, ToastDuration } 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';

package/dist/molecules/index.js

@@ -25,6 +25,7 @@ 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';
@@ -45,6 +46,9 @@ 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';

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

@@ -47,6 +47,24 @@ export interface ToastItem {
     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;
@@ -59,12 +77,20 @@ export declare const toastStore: {
         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?: ToastDuration;
@@ -72,6 +98,10 @@ export declare function pushToast(options: {
     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;
 /**