@scalewing/react 1.27.0 → 1.29.0

package/dist/components/Notice.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, } from 'react';
+import { cx } from '../class-names.js';
+import { noticeTones, noticeVariants, } from '../css/css-notice.js';
+export { noticeTones, noticeVariants };
+const noticeRoles = ['status', 'alert', 'none'];
+function defaultRole(tone, variant) {
+    if (variant === 'band')
+        return 'none';
+    return tone === 'danger' ? 'alert' : 'status';
+}
+/**
+ * The message's parts, without the empty ones (`false`, `null`,
+ * `undefined`, `''`) a condition leaves; fragments flatten.
+ */
+function messageParts(children) {
+    return Children.toArray(children).filter((part) => part !== '');
+}
+/** A sentence, even one with values interpolated, may share the title's row. */
+function isText(parts) {
+    return parts.every((part) => typeof part === 'string' || typeof part === 'number');
+}
+function assertNoticeProps(tone, title, role, variant, hasMessage) {
+    if (!noticeVariants.includes(variant))
+        throw new RangeError(`Unknown Notice variant: ${String(variant)}`);
+    if (!noticeTones.includes(tone))
+        throw new RangeError(`Unknown Notice tone: ${String(tone)}`);
+    if (title !== undefined && (typeof title !== 'string' || !title.trim()))
+        throw new RangeError('Notice title must not be empty');
+    if (role !== undefined && !noticeRoles.includes(role))
+        throw new RangeError(`Unknown Notice role: ${String(role)}`);
+    if (title === undefined && !hasMessage)
+        throw new RangeError('Notice needs a title or a message');
+}
+/**
+ * A tinted note in the page's flow: information, a good outcome, a caution
+ * or a refusal, with an optional bold lead, glyph and one action. It stays
+ * until the consumer removes it. `variant="band"` is the same note as a
+ * full-width strip of page chrome. Pass `tabIndex={-1}` and a ref to move
+ * focus to it.
+ */
+export const Notice = forwardRef(function Notice({ action, children, className, icon, role, title, tone, variant = 'default', ...rest }, ref) {
+    const parts = messageParts(children);
+    const hasMessage = parts.length > 0;
+    assertNoticeProps(tone, title, role, variant, hasMessage);
+    const announced = role ?? defaultRole(tone, variant);
+    return (_jsxs("div", { ...rest, ref: ref, className: cx('sw-notice', `sw-notice-${tone}`, variant === 'band' && 'sw-notice-band', className), role: announced === 'none' ? undefined : announced, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-notice-icon", children: icon })) : null, _jsxs("div", { className: cx('sw-notice-content', hasMessage && !isText(parts) && 'sw-notice-stacked'), children: [title ? _jsx("strong", { className: "sw-notice-title", children: title }) : null, hasMessage ? _jsx("div", { className: "sw-notice-body", children: children }) : null] }), action ? _jsx("div", { className: "sw-notice-action", children: action }) : null] }));
+});

package/dist/components/Progress.d.ts

@@ -1,4 +1,6 @@
-export type ProgressTone = 'accent' | 'success' | 'danger';
+import { type ProgressTone, progressTones } from '../css/css-progress.js';
+export { progressTones };
+export type { ProgressTone };
 export type ProgressProps = {
     label: string;
     value: number;

package/dist/components/Progress.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { progressTones } from '../css/css-progress.js';
+export { progressTones };
 export function Progress({ label, value, max, tone = 'accent', showCount = true, }) {
     if (!label.trim())
         throw new RangeError('label must not be empty');
@@ -8,6 +10,8 @@ export function Progress({ label, value, max, tone = 'accent', showCount = true,
         throw new RangeError('max must be a positive finite number');
     if (!Number.isFinite(value) || value < 0 || value > max)
         throw new RangeError('value must be finite and within 0..max');
+    if (!progressTones.includes(tone))
+        throw new RangeError(`Unknown Progress tone: ${String(tone)}`);
     const labelId = useId();
     return (_jsxs("div", { className: `sw-progress sw-progress-${tone}`, children: [_jsxs("div", { className: "sw-progress-heading", children: [_jsx("span", { className: "sw-progress-label", id: labelId, children: label }), showCount ? (_jsxs("span", { "aria-hidden": "true", className: "sw-progress-count", children: [value, " / ", max] })) : null] }), _jsx("progress", { "aria-labelledby": labelId, className: "sw-progress-bar", max: max, value: value })] }));
 }

package/dist/components/SegmentedControl.d.ts

@@ -2,6 +2,14 @@ import { type ReactNode } from 'react';
 export type SegmentedItem = {
     id: string;
     label: ReactNode;
+    /**
+     * A consumer mark before the label, such as a `GlyphTile` or a Lucide
+     * glyph, hidden from assistive technology (the label names the item).
+     * When any item has one, every item of a compact track takes the `md`
+     * control height and label type on a subtle track; a filled track keeps
+     * its look and gains the marks. A falsy value (`0`, `''`) is no icon.
+     */
+    icon?: ReactNode;
 };
 type SegmentedLabel = {
     'aria-label': string;

package/dist/components/SegmentedControl.js

@@ -5,6 +5,7 @@ import { cx } from '../class-names.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
+    const withIcons = items.some((item) => item.icon);
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
             return;
@@ -22,12 +23,12 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
     }
     // The wrapper is always rendered, so an error that appears later swaps
     // text into a live region that already exists and the group keeps focus.
-    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
                     const selected = item.id === value;
-                    return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
+                    return (_jsxs("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                             if (!selected) {
                                 onChange?.(item.id);
                             }
-                        }, role: "radio", type: "button", children: item.label }, item.id));
+                        }, role: "radio", type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Toast.d.ts

@@ -1,8 +1,10 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { toastTones, type ToastTone } from '../css/css-toast.js';
-export { toastTones };
-export type { ToastTone };
-export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover'> & {
+import { toastPlacements, type ToastPlacement } from '../css/css-toast-card.js';
+import { type ToastAction } from './toast/ToastContent.js';
+export { toastPlacements, toastTones };
+export type { ToastAction, ToastPlacement, ToastTone };
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover' | 'title'> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /**
@@ -19,6 +21,20 @@ export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popo
     tone?: ToastTone;
     /** A consumer glyph before the message, hidden from assistive technology. */
     icon?: ReactNode;
+    /** A bold first line; the children become the muted detail under it. */
+    title?: string;
+    /**
+     * One press at the end of the toast, such as "Open". It runs `onPress`,
+     * then closes the toast. The toast takes the pointer while it has one.
+     */
+    action?: ToastAction;
+    /** A thin line under the message that runs down with the time left. */
+    showRemaining?: boolean;
+    /**
+     * `bottom` (default) centers it near the bottom edge; `top-end` puts it
+     * in the top corner at the end of the line, as a card.
+     */
+    placement?: ToastPlacement;
     children: ReactNode;
 };
-export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, tone, icon, ...rest }: ToastProps): import("react").JSX.Element;
+export declare function Toast({ action, anchor, children, className, icon, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open, placement, showRemaining, style, target, timeoutMs, title, tone, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -1,11 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useEffect, useRef, } from 'react';
+import { useCallback, useLayoutEffect, useRef, } from 'react';
 import { cx } from '../class-names.js';
 import { toastTones } from '../css/css-toast.js';
+import { toastPlacements } from '../css/css-toast-card.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { applyTravelVars, clearTravelVars, travelTranslate, } from '../toast-travel.js';
-export { toastTones };
+import { assertToastContent, ToastContent, } from './toast/ToastContent.js';
+import { useToastHold } from './toast/use-toast-hold.js';
+import { useToastTimer } from './toast/use-toast-timer.js';
+export { toastPlacements, toastTones };
 const DEFAULT_TIMEOUT_MS = 800;
 /** A warning or an error must be read, not glimpsed. */
 const URGENT_TIMEOUT_MS = 6000;
@@ -17,10 +21,28 @@ function defaultTimeout(tone) {
 function travels(anchor, target) {
     return Boolean(anchor && target);
 }
-export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs, tone = 'neutral', icon, ...rest }) {
+function reducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+export function Toast({ action, anchor = null, children, className, icon, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open, placement = 'bottom', showRemaining = false, style, target = null, timeoutMs, title, tone = 'neutral', ...rest }) {
+    assertToastContent(title, action);
+    if (!toastPlacements.includes(placement))
+        throw new RangeError(`Unknown Toast placement: ${String(placement)}`);
     const nodeRef = useRef(null);
     const dismissAfter = timeoutMs ?? defaultTimeout(tone);
     const moving = travels(anchor, target);
+    const interactive = !moving && (Boolean(action) || showRemaining);
+    const { handlers, paused, returnFocus } = useToastHold({
+        enabled: interactive,
+        onBlur,
+        onFocus,
+        onPointerEnter,
+        onPointerLeave,
+        open,
+    });
+    const close = useCallback(() => onOpenChange(false), [onOpenChange]);
     useLayoutEffect(() => {
         const node = nodeRef.current;
         if (!node || typeof node.showPopover !== 'function') {
@@ -28,6 +50,7 @@ export function Toast({ anchor = null, children, className, onOpenChange, open,
         }
         if (!open) {
             if (node.matches(':popover-open')) {
+                returnFocus(node);
                 node.hidePopover();
             }
             clearTravelVars(node);
@@ -44,28 +67,28 @@ export function Toast({ anchor = null, children, className, onOpenChange, open,
         if (!node.matches(':popover-open')) {
             node.showPopover();
         }
-    }, [anchor, moving, open, target]);
-    useEffect(() => {
-        if (!open) {
-            return;
-        }
-        const reducedMotion = typeof window.matchMedia === 'function' &&
-            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        if (moving && !reducedMotion) {
-            return;
-        }
-        const timer = window.setTimeout(() => {
-            onOpenChange(false);
-        }, dismissAfter);
-        return () => {
-            window.clearTimeout(timer);
-        };
-    }, [dismissAfter, moving, open, onOpenChange]);
+    }, [anchor, moving, open, returnFocus, target]);
+    // A travelling toast closes when its animation ends, unless motion is
+    // reduced; every other toast closes on the timer, held while paused.
+    useToastTimer({
+        duration: dismissAfter,
+        onExpire: close,
+        paused,
+        running: open && (!moving || reducedMotion()),
+    });
     function onAnimationEnd(event) {
         if (event.target !== event.currentTarget || !moving) {
             return;
         }
         onOpenChange(false);
     }
-    return (_jsx("div", { ...rest, ref: nodeRef, className: cx('sw-toast', tone !== 'neutral' && `sw-toast-${tone}`, moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, popover: "manual", role: tone === 'danger' ? 'alert' : 'status', children: icon ? (_jsxs("div", { className: "sw-toast-row", children: [_jsx("span", { "aria-hidden": "true", className: "sw-toast-icon", children: icon }), _jsx("div", { className: "sw-toast-body", children: children })] })) : (children) }));
+    return (_jsxs("div", { ...rest, ref: nodeRef, className: cx('sw-toast', tone !== 'neutral' && `sw-toast-${tone}`, !moving && placement !== 'bottom' && `sw-toast-${placement}`, interactive && 'sw-toast-interactive', paused && 'sw-toast-paused', moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, ...handlers, popover: "manual", role: tone === 'danger' ? 'alert' : 'status', style: showRemaining
+            ? {
+                ...style,
+                '--sw-toast-duration': `${dismissAfter}ms`,
+            }
+            : style, children: [_jsx(ToastContent, { action: action, icon: icon, onAction: () => {
+                    action?.onPress();
+                    close();
+                }, title: title, children: children }), showRemaining && open && !moving ? (_jsx("span", { "aria-hidden": "true", className: "sw-toast-remaining" })) : null] }));
 }

package/dist/components/checkbox/CheckboxControl.d.ts

@@ -0,0 +1,9 @@
+import { type InputHTMLAttributes } from 'react';
+type CheckboxControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+/**
+ * The native checkbox and its drawn mark, the one markup Checkbox's
+ * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
+ * and MultiSelect's rows so the two cannot drift apart.
+ */
+export declare function CheckboxControl(props: CheckboxControlProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox/CheckboxControl.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The native checkbox and its drawn mark, the one markup Checkbox's
+ * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
+ * and MultiSelect's rows so the two cannot drift apart.
+ */
+export function CheckboxControl(props) {
+    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
+}

package/dist/components/denomination-grid/DenominationStrip.d.ts

@@ -1,4 +1,7 @@
 import { type DenominationGridProps } from './types.js';
-type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'>;
-export declare function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
+    /** The row labels' appearance class, if any. */
+    className?: string;
+};
+export declare function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

package/dist/components/denomination-grid/DenominationStrip.js

@@ -16,7 +16,7 @@ function TotalHead({ totalLabel }) {
         return _jsx("td", { className: "sw-denomination-corner sw-denomination-total-head" });
     return (_jsx("th", { className: "sw-denomination-head sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-denomination-total-label", children: totalLabel }) }));
 }
-export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
     // the column count and whether a total column takes a share.
@@ -26,5 +26,5 @@ export function DenominationStrip({ label, columns, rows, zeroLabel, totalLabel,
             '--sw-denomination-columns': columns.length,
             '--sw-denomination-total': hasTotals ? 1 : 0,
         };
-    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned'), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth)), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned'), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

package/dist/components/denomination-grid/DenominationTiles.d.ts

@@ -1,4 +1,7 @@
 import { type DenominationGridProps } from './types.js';
-type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel' | 'rowRole'>> & Pick<DenominationGridProps, 'subtotal'>;
-export declare function DenominationTiles({ label, columns, rows, rowRole, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;
+type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel' | 'rowRole'>> & Pick<DenominationGridProps, 'subtotal'> & {
+    /** The row labels' appearance class, if any. */
+    className?: string;
+};
+export declare function DenominationTiles({ className, label, columns, rows, rowRole, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;
 export {};

package/dist/components/denomination-grid/DenominationTiles.js

@@ -21,8 +21,8 @@ function showsRowLabel(rowCount, row) {
 function namesRow(rowCount, row, gridLabel) {
     return showsRowLabel(rowCount, row) || row.label !== gridLabel;
 }
-export function DenominationTiles({ label, columns, rows, rowRole, subtotal, zeroLabel, }) {
-    return (_jsx("div", { "aria-label": label, className: "sw-denomination-grid sw-denomination-tiles", role: "group", children: rows.map((row) => {
+export function DenominationTiles({ className, label, columns, rows, rowRole, subtotal, zeroLabel, }) {
+    return (_jsx("div", { "aria-label": label, className: cx('sw-denomination-grid sw-denomination-tiles', className), role: "group", children: rows.map((row) => {
             const labelled = showsRowLabel(rows.length, row);
             const named = namesRow(rows.length, row, label);
             // A named section is a region; role="group" keeps the name without

package/dist/components/denomination-grid/types.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationLabelAppearance } from '../../css/css-denomination-label.js';
 import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
 export type { DenominationLabelWidth };
 export type DenominationGridTone = BadgeTone;
@@ -102,4 +103,12 @@ export type DenominationGridProps = {
      * strip has a label column.
      */
     labelWidth?: DenominationLabelWidth;
+    /**
+     * `tone` (the default) marks each row label with its row's tone: a
+     * stripe at its start and the words in the tone. `plain` sets every row
+     * label in the text color at label weight with no stripe, for a grid
+     * whose rows need no color to tell apart; a row's tone still colors its
+     * total.
+     */
+    labelAppearance?: DenominationLabelAppearance;
 };

package/dist/components/dialog/DialogFooter.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type ActionBarSummary } from '../action-bar/ActionBarSummary.js';
+type DialogFooterProps = {
+    summary?: ActionBarSummary;
+    children?: ReactNode;
+};
+/**
+ * The dialog's pinned footer: the summary figure (in a polite live region,
+ * as in ActionBar) at the start, the actions at the end. Rendered only when
+ * the dialog has a footer or a summary, and then always with its status
+ * region, so a new figure is announced.
+ */
+export declare function DialogFooter({ children, summary }: DialogFooterProps): import("react").JSX.Element;
+export {};

package/dist/components/dialog/DialogFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionBarSummaryLine, } from '../action-bar/ActionBarSummary.js';
+/**
+ * The dialog's pinned footer: the summary figure (in a polite live region,
+ * as in ActionBar) at the start, the actions at the end. Rendered only when
+ * the dialog has a footer or a summary, and then always with its status
+ * region, so a new figure is announced.
+ */
+export function DialogFooter({ children, summary }) {
+    return (_jsxs("div", { className: "sw-dialog-footer", children: [_jsx("div", { className: "sw-dialog-footer-status", role: "status", children: summary ? _jsx(ActionBarSummaryLine, { summary: summary }) : null }), children ? (_jsx("div", { className: "sw-dialog-footer-actions", children: children })) : null] }));
+}

package/dist/components/dialog/DialogTitle.d.ts

@@ -1,15 +1,22 @@
+import { type ReactNode } from 'react';
 type DialogTitleProps = {
     id: string;
     level: 2 | 3;
     title: string;
+    /** A muted line under the title, which describes the dialog. */
+    description?: string;
+    descriptionId?: string;
+    /** A consumer glyph or tile before the title, hidden from assistive technology. */
+    icon?: ReactNode;
     /** The close button's accessible name; without it there is no button. */
     closeLabel?: string;
     onClose: () => void;
 };
 /**
- * The dialog's title, which names it through `aria-labelledby`. With a
- * `closeLabel` it shares a row with an icon-only ghost close button at its
- * end; without one it is the title alone, as it always was.
+ * The dialog's title, which names it through `aria-labelledby`. Alone it is
+ * the heading, as it always was. With an icon, a description or a
+ * `closeLabel` it is a row: the icon, the title over its description, and
+ * an icon-only ghost close button at the end.
  */
-export declare function DialogTitle({ closeLabel, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogTitle.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
 import { Button } from '../Button.js';
 import { Text } from '../Text.js';
 /**
- * The dialog's title, which names it through `aria-labelledby`. With a
- * `closeLabel` it shares a row with an icon-only ghost close button at its
- * end; without one it is the title alone, as it always was.
+ * The dialog's title, which names it through `aria-labelledby`. Alone it is
+ * the heading, as it always was. With an icon, a description or a
+ * `closeLabel` it is a row: the icon, the title over its description, and
+ * an icon-only ghost close button at the end.
  */
-export function DialogTitle({ closeLabel, id, level, onClose, title, }) {
+export function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
     const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
-    if (!closeLabel)
+    if (!closeLabel && !icon && !description)
         return heading;
-    return (_jsxs("div", { className: "sw-dialog-header", children: [heading, _jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })] }));
+    return (_jsxs("div", { className: cx('sw-dialog-header', Boolean(icon || description) && 'sw-dialog-header-framed'), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-dialog-icon", children: icon })) : null, description ? (_jsxs("div", { className: "sw-dialog-titles", children: [heading, _jsx(Text, { as: "p", className: "sw-dialog-description", color: "muted", id: descriptionId, variant: "caption", children: description })] })) : (heading), closeLabel ? (_jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })) : null] }));
 }

package/dist/components/multi-select/MultiSelectPanel.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import { type MultiSelectAlign, type MultiSelectOption } from './types.js';
+type MultiSelectPanelProps = {
+    id: string;
+    label: string;
+    align: MultiSelectAlign;
+    options: readonly MultiSelectOption[];
+    checked: ReadonlySet<string>;
+    allLabel: string;
+    clearLabel: string;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    onToggle: (value: string, checked: boolean) => void;
+    onAll: () => void;
+    onClear: () => void;
+    /** Closes the panel, returning focus to the trigger when asked. */
+    onClose: (restoreFocus: boolean) => void;
+};
+/**
+ * The open panel: a group named by the label on the popover layer beside
+ * the trigger, with All and Clear over one checkbox per option. The first
+ * checkbox takes focus as it opens; Escape closes it and returns focus to
+ * the trigger; focus or a press moving outside it closes it.
+ */
+export declare function MultiSelectPanel({ align, allLabel, checked, clearLabel, id, label, onAll, onClear, onClose, onToggle, options, triggerRef, }: MultiSelectPanelProps): import("react").JSX.Element;
+export {};

package/dist/components/multi-select/MultiSelectPanel.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from 'react';
+import { Button } from '../Button.js';
+import { CheckboxControl } from '../checkbox/CheckboxControl.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+/**
+ * The open panel: a group named by the label on the popover layer beside
+ * the trigger, with All and Clear over one checkbox per option. The first
+ * checkbox takes focus as it opens; Escape closes it and returns focus to
+ * the trigger; focus or a press moving outside it closes it.
+ */
+export function MultiSelectPanel({ align, allLabel, checked, clearLabel, id, label, onAll, onClear, onClose, onToggle, options, triggerRef, }) {
+    const panelRef = useRef(null);
+    useAnchoredPopover(panelRef, triggerRef, triggerRef, () => onClose(false), {
+        align,
+        flipInline: true,
+    });
+    useLayoutEffect(() => {
+        panelRef.current
+            ?.querySelector('.sw-multi-select-option input')
+            ?.focus();
+    }, []);
+    function onKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        onClose(true);
+    }
+    function onBlur(event) {
+        const next = event.relatedTarget;
+        if (!(next instanceof Node))
+            return;
+        if (panelRef.current?.contains(next) || triggerRef.current?.contains(next))
+            return;
+        onClose(false);
+    }
+    return (_jsxs("div", { "aria-label": label, className: "sw-multi-select-panel", id: id, onBlur: onBlur, onKeyDown: onKeyDown, ref: panelRef, role: "group", children: [_jsxs("div", { className: "sw-multi-select-commands", children: [_jsx(Button, { onPress: onAll, size: "sm", variant: "ghost", children: allLabel }), _jsx(Button, { onPress: onClear, size: "sm", variant: "ghost", children: clearLabel })] }), options.map((option) => (_jsx("div", { className: option.separatorBefore
+                    ? 'sw-multi-select-row sw-multi-select-row-separated'
+                    : 'sw-multi-select-row', children: _jsxs("label", { className: "sw-checkbox-label sw-multi-select-option", children: [_jsx(CheckboxControl, { checked: checked.has(option.value), onChange: (event) => onToggle(option.value, event.currentTarget.checked) }), option.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-multi-select-icon", children: option.icon })) : null, _jsx("span", { className: "sw-multi-select-text", children: option.label })] }) }, option.value)))] }));
+}

package/dist/components/multi-select/types.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type InlineAlign } from '../../anchored-position.js';
+/** One choice in a MultiSelect. */
+export type MultiSelectOption = {
+    value: string;
+    label: string;
+    /** A consumer mark before the label, such as a `GlyphTile`; hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Draws a hairline before this option, to set a group of options apart. */
+    separatorBefore?: boolean;
+};
+export type MultiSelectAlign = InlineAlign;
+export type MultiSelectProps = {
+    /**
+     * What is chosen, such as "Show": the muted lead of the trigger and the
+     * name of the panel of checkboxes.
+     */
+    label: string;
+    options: readonly MultiSelectOption[];
+    /** The checked values; `onChange` reports them in the options' order. */
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+    /** The command that checks every option, such as "All". */
+    allLabel: string;
+    /** The command that clears every option, such as "Clear". */
+    clearLabel: string;
+    /**
+     * The trigger's words after the label, naming what is chosen, such as
+     * "All entries" or "2 services". The consumer writes it.
+     */
+    summary: string;
+    disabled?: boolean;
+    /** The trigger edge the panel lines up with (default start). */
+    align?: MultiSelectAlign;
+};

package/dist/components/multi-select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/multi-select/validate.d.ts

@@ -0,0 +1,3 @@
+import { type MultiSelectProps } from './types.js';
+/** Fails closed on words or options a MultiSelect cannot show. */
+export declare function assertMultiSelect({ allLabel, align, clearLabel, label, options, summary, value, }: Pick<MultiSelectProps, 'allLabel' | 'align' | 'clearLabel' | 'label' | 'options' | 'summary' | 'value'>): void;

package/dist/components/multi-select/validate.js

@@ -0,0 +1,25 @@
+function isBlank(text) {
+    return typeof text !== 'string' || !text.trim();
+}
+/** Fails closed on words or options a MultiSelect cannot show. */
+export function assertMultiSelect({ allLabel, align, clearLabel, label, options, summary, value, }) {
+    if (isBlank(label) || isBlank(summary))
+        throw new RangeError('MultiSelect needs a label and a summary');
+    if (isBlank(allLabel) || isBlank(clearLabel))
+        throw new RangeError('MultiSelect needs an allLabel and a clearLabel');
+    if (options.length === 0)
+        throw new RangeError('MultiSelect needs at least one option');
+    const values = new Set();
+    for (const option of options) {
+        if (isBlank(option.value) || isBlank(option.label))
+            throw new RangeError('MultiSelect options need a value and a label');
+        if (values.has(option.value))
+            throw new RangeError(`Duplicate MultiSelect value: ${option.value}`);
+        values.add(option.value);
+    }
+    for (const checked of value)
+        if (!values.has(checked))
+            throw new RangeError(`Unknown MultiSelect value: ${checked}`);
+    if (align !== undefined && align !== 'start' && align !== 'end')
+        throw new RangeError(`Unknown MultiSelect align: ${String(align)}`);
+}

package/dist/components/toast/ToastContent.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+/** One press in the toast, such as "Open" for what was just saved. */
+export type ToastAction = {
+    label: string;
+    onPress: () => void;
+};
+type ToastContentProps = {
+    title?: string;
+    icon?: ReactNode;
+    action?: ToastAction;
+    /** Runs the action, then closes the toast. */
+    onAction: () => void;
+    children: ReactNode;
+};
+/**
+ * What the toast says. Children alone render as they always have; with a
+ * title, an icon or an action they go in a row: the icon, the bold title
+ * over the children as a muted detail, and the action at the end.
+ */
+export declare function ToastContent({ action, children, icon, onAction, title, }: ToastContentProps): import("react").JSX.Element;
+export declare function assertToastContent(title: string | undefined, action: ToastAction | undefined): void;
+export {};