@scalewing/react 1.27.0 → 1.28.0

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/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 {};

package/dist/components/toast/ToastContent.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+/**
+ * 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 function ToastContent({ action, children, icon, onAction, title, }) {
+    if (!icon && !title && !action)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: "sw-toast-row", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-toast-icon", children: icon })) : null, _jsxs("div", { className: "sw-toast-body", children: [title ? _jsx("strong", { className: "sw-toast-title", children: title }) : null, title ? _jsx("div", { className: "sw-toast-detail", children: children }) : children] }), action ? (_jsx(Button, { className: "sw-toast-action", onPress: onAction, size: "sm", variant: "ghost", children: action.label })) : null] }));
+}
+export function assertToastContent(title, action) {
+    if (title !== undefined && (typeof title !== 'string' || !title.trim()))
+        throw new RangeError('Toast title must not be empty');
+    if (action !== undefined &&
+        (typeof action.label !== 'string' ||
+            !action.label.trim() ||
+            typeof action.onPress !== 'function'))
+        throw new RangeError('Toast action needs a label and an onPress');
+}

package/dist/components/toast/use-toast-hold.d.ts

@@ -0,0 +1,28 @@
+import { type FocusEvent, type PointerEvent, type FocusEventHandler, type PointerEventHandler } from 'react';
+type ToastHoldOptions = {
+    open: boolean;
+    /** Only a toast that takes the pointer (an action or the line) holds. */
+    enabled: boolean;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+};
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export declare function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }: ToastHoldOptions): {
+    paused: boolean;
+    returnFocus: (node: HTMLElement) => void;
+    handlers: {
+        onBlur: (event: FocusEvent<HTMLDivElement>) => void;
+        onFocus: (event: FocusEvent<HTMLDivElement>) => void;
+        onPointerEnter: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/toast/use-toast-hold.js

@@ -0,0 +1,53 @@
+import { useCallback, useRef, useState, } from 'react';
+/**
+ * Whether the toast's time is held: the pointer is over it or focus is
+ * inside it. Each time it opens or closes it starts unheld (a toast that
+ * closes under the pointer gets no pointerleave). It also remembers where
+ * focus came from, so `returnFocus` can give it back when the toast closes
+ * with focus inside (its own action, or the consumer closing it).
+ */
+export function useToastHold({ enabled, onBlur, onFocus, onPointerEnter, onPointerLeave, open, }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [wasOpen, setWasOpen] = useState(open);
+    const cameFromRef = useRef(null);
+    if (wasOpen !== open) {
+        setWasOpen(open);
+        setHovered(false);
+        setFocused(false);
+    }
+    const returnFocus = useCallback((node) => {
+        const cameFrom = cameFromRef.current;
+        cameFromRef.current = null;
+        if (!node.contains(node.ownerDocument.activeElement))
+            return;
+        if (cameFrom?.isConnected)
+            cameFrom.focus();
+    }, []);
+    return {
+        paused: enabled && (hovered || focused),
+        returnFocus,
+        handlers: {
+            onBlur: (event) => {
+                onBlur?.(event);
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    setFocused(false);
+            },
+            onFocus: (event) => {
+                onFocus?.(event);
+                const from = event.relatedTarget;
+                if (from instanceof HTMLElement && !event.currentTarget.contains(from))
+                    cameFromRef.current = from;
+                setFocused(true);
+            },
+            onPointerEnter: (event) => {
+                onPointerEnter?.(event);
+                setHovered(true);
+            },
+            onPointerLeave: (event) => {
+                onPointerLeave?.(event);
+                setHovered(false);
+            },
+        },
+    };
+}

package/dist/components/toast/use-toast-timer.d.ts

@@ -0,0 +1,15 @@
+type ToastTimerOptions = {
+    /** The timer runs only while the toast is open and does not travel. */
+    running: boolean;
+    /** While true, the time left is held, as on hover or focus. */
+    paused: boolean;
+    /** The whole time the toast stays, in ms. */
+    duration: number;
+    onExpire: () => void;
+};
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export declare function useToastTimer({ duration, onExpire, paused, running, }: ToastTimerOptions): void;
+export {};

package/dist/components/toast/use-toast-timer.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Closes the toast once `duration` ms have run, counting only the time it is
+ * not paused. Opening it again (or a new duration) starts the count over.
+ */
+export function useToastTimer({ duration, onExpire, paused, running, }) {
+    const leftRef = useRef(duration);
+    const expireRef = useRef(onExpire);
+    useEffect(() => {
+        expireRef.current = onExpire;
+    }, [onExpire]);
+    // A fresh count each time the toast opens or its duration changes.
+    useEffect(() => {
+        leftRef.current = duration;
+    }, [duration, running]);
+    useEffect(() => {
+        if (!running || paused)
+            return;
+        const started = Date.now();
+        let fired = false;
+        const timer = window.setTimeout(() => {
+            fired = true;
+            leftRef.current = duration;
+            expireRef.current();
+        }, leftRef.current);
+        return () => {
+            window.clearTimeout(timer);
+            // After it fired the count is whole again (a consumer that keeps the
+            // toast open gets the full time on its next run, not none).
+            if (!fired)
+                leftRef.current = Math.max(0, leftRef.current - (Date.now() - started));
+        };
+    }, [duration, paused, running]);
+}

package/dist/css/css-components.js

@@ -13,12 +13,14 @@ import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
 import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
+import { cssDialogFrameClasses } from './css-dialog-frame.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
+import { cssNoticeClasses } from './css-notice.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
@@ -34,6 +36,7 @@ import { cssFieldClasses } from './css-field.js';
 import { cssStepperClasses } from './css-stepper.js';
 import { cssStepsClasses } from './css-steps.js';
 import { cssToastClasses } from './css-toast.js';
+import { cssToastCardClasses } from './css-toast-card.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
 import { cssPopupHostRules } from './stacking.js';
 /*
@@ -133,6 +136,8 @@ ${cssSectionNavClasses()}
 
 ${cssDialogClasses()}
 
+${cssDialogFrameClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}
@@ -147,6 +152,8 @@ ${cssSpinnerClasses()}
 
 ${cssProgressClasses()}
 
+${cssNoticeClasses()}
+
 ${cssTooltipClasses()}
 
 ${cssInfoTipClasses()}
@@ -175,6 +182,8 @@ ${cssSplitClasses()}
 
 ${cssToastClasses()}
 
+${cssToastCardClasses()}
+
 ${cssResponsiveClasses()}
 
 ${cssBoxBorderClasses()}

package/dist/css/css-denomination-grid.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './css-denomination-label.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
@@ -254,6 +255,8 @@ ${cssDenominationEntryClasses()}
 
 ${cssDenominationAlignedClasses()}
 
+${cssDenominationLabelClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -295,5 +298,6 @@ export function denominationGridClassCatalog() {
         ...denominationCellToneClassCatalog(),
         ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
+        ...denominationLabelClassCatalog(),
     ];
 }

package/dist/css/css-denomination-label.d.ts

@@ -0,0 +1,10 @@
+export declare const denominationLabelAppearances: readonly ["tone", "plain"];
+/**
+ * How a grid's row labels look: `tone` (the default) marks each label with
+ * its row's tone, a stripe at its start and the words in the tone; `plain`
+ * sets the words in the text color at label weight, with no stripe.
+ */
+export type DenominationLabelAppearance = (typeof denominationLabelAppearances)[number];
+export declare const denominationLabelsPlainClass = "sw-denomination-labels-plain";
+export declare function cssDenominationLabelClasses(): string;
+export declare function denominationLabelClassCatalog(): string[];

package/dist/css/css-denomination-label.js

@@ -0,0 +1,36 @@
+import { breakpointQuery } from './breakpoints.js';
+export const denominationLabelAppearances = ['tone', 'plain'];
+export const denominationLabelsPlainClass = 'sw-denomination-labels-plain';
+const plain = `.${denominationLabelsPlainClass}`;
+/*
+ * Plain row labels: the text color, no stripe, and the strip's label cell
+ * back to its column's own padding. The row's tone still colors its total.
+ * Emitted after the grid's rules (and its narrow-screen padding), and one
+ * class more specific, so it wins at every width.
+ */
+export function cssDenominationLabelClasses() {
+    return `${plain} .sw-denomination-label {
+  border-inline-start: 0;
+  color: var(--sw-color-text);
+}
+
+/* The total under a phone's label keeps its row's tone. */
+${plain} .sw-denomination-total-inline { color: var(--sw-denomination-tone); }
+
+.sw-denomination-strip${plain} .sw-denomination-label {
+  padding-inline-start: var(--sw-space-2);
+}
+
+.sw-denomination-strip${plain} .sw-denomination-label::before { content: none; }
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-denomination-strip${plain} .sw-denomination-label { padding-inline-start: var(--sw-space-1); }
+}
+
+@media (forced-colors: active) {
+  ${plain} .sw-denomination-label { color: CanvasText; }
+}`;
+}
+export function denominationLabelClassCatalog() {
+    return [denominationLabelsPlainClass];
+}

package/dist/css/css-dialog-frame.d.ts

@@ -0,0 +1,2 @@
+export declare function cssDialogFrameClasses(): string;
+export declare function dialogFrameClassCatalog(): string[];

package/dist/css/css-dialog-frame.js

@@ -0,0 +1,83 @@
+/*
+ * The dialog's frame beyond its title: a consumer icon before the title, a
+ * muted description under it, and a footer pinned to the bottom edge.
+ *
+ * With an icon or a description the header row centers its parts (the
+ * icon, the title over the description, the close button). The footer is
+ * sticky to the bottom of the dialog's own scrollport, bleeds to its
+ * edges under a hairline, and sits on the solid surface so content
+ * scrolling under it never shows through: the summary figure first, the
+ * actions at the end, wrapping under one another on a narrow sheet. In a
+ * bottom sheet its surface reaches the sheet's bottom edge and its own
+ * padding clears the home indicator (see the sheet rules in css-dialog.ts).
+ */
+export function cssDialogFrameClasses() {
+    return `.sw-dialog-header-framed {
+  align-items: center;
+  gap: var(--sw-space-3);
+}
+
+.sw-dialog-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-dialog-description { margin: 0; }
+
+.sw-dialog-footer {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-top: 1px solid var(--sw-color-border);
+  /* Sticky insets count from the scrollport's padding edge: step past the
+     dialog's own padding to sit on its bottom edge. */
+  bottom: calc(-1 * var(--sw-space-5));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
+  padding: var(--sw-space-3) var(--sw-space-5);
+  position: sticky;
+}
+
+.sw-dialog-footer-status {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* With no summary the live region stays in the dialog, so a first figure
+   is still announced, but it takes no room in the footer. */
+.sw-dialog-footer-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-dialog-footer-actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-footer { border-top-color: CanvasText; }
+}`;
+}
+export function dialogFrameClassCatalog() {
+    return [
+        'sw-dialog-header-framed',
+        'sw-dialog-icon',
+        'sw-dialog-titles',
+        'sw-dialog-description',
+        'sw-dialog-footer',
+        'sw-dialog-footer-status',
+        'sw-dialog-footer-actions',
+    ];
+}

package/dist/css/css-dialog.js

@@ -4,6 +4,8 @@ import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const title = typographyVariants.title;
 /* The modal's height cap: a space-8 strip of backdrop stays in view. */
 const maxHeight = 'min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8))';
+/* How far a sheet's pinned footer steps past the sheet's bottom padding. */
+const sheetFooterOffset = 'calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)))';
 export function dialogSheetClass(sheetBelow) {
     return `sw-dialog-sheet-below-${sheetBelow}`;
 }
@@ -11,9 +13,11 @@ export function dialogSheetClass(sheetBelow) {
  * Below the breakpoint the dialog is a bottom sheet: docked to the bottom
  * edge at the full viewport width, the top corners rounded and the bottom
  * ones square, the same height cap (so the whole space-8 strip of backdrop
- * shows above it), and padding that clears the safe areas. Emitted after
- * `sw-dialog-lg` so it wins at equal specificity. No grabber: there is no
- * drag gesture.
+ * shows above it), and padding that clears the safe areas. A pinned
+ * footer steps past that padding so its surface reaches the bottom edge,
+ * and pads itself clear of the home indicator. Emitted after
+ * `sw-dialog-lg` and `sw-dialog-xl` so it wins at equal specificity. No
+ * grabber: there is no drag gesture.
  */
 function sheetRules() {
     return breakpoints
@@ -33,6 +37,12 @@ function sheetRules() {
   .${dialogSheetClass(breakpoint)}[open] {
     animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
   }
+
+  .${dialogSheetClass(breakpoint)} .sw-dialog-footer {
+    bottom: ${sheetFooterOffset};
+    margin-bottom: ${sheetFooterOffset};
+    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
+  }
 }`)
         .join('\n\n');
 }
@@ -64,7 +74,8 @@ function closeButtonRules() {
   gap: var(--sw-space-2);
 }
 
-.sw-dialog-header > :first-child {
+.sw-dialog-header > :is(h2, h3),
+.sw-dialog-titles {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -128,6 +139,10 @@ export function cssDialogClasses() {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+.sw-dialog-xl {
+  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+}
+
 ${sheetRules()}
 
 ${sheetMotionRules()}
@@ -147,6 +162,7 @@ export function dialogClassCatalog() {
     return [
         'sw-dialog',
         'sw-dialog-lg',
+        'sw-dialog-xl',
         ...breakpoints.map((breakpoint) => dialogSheetClass(breakpoint)),
         'sw-dialog-header',
         'sw-dialog-close',

package/dist/css/css-notice.d.ts

@@ -0,0 +1,22 @@
+export declare const noticeTones: readonly ["info", "success", "warning", "danger"];
+export declare const noticeVariants: readonly ["default", "band"];
+/** `default` is a rounded note in the flow; `band` a full-width strip of page chrome. */
+export type NoticeVariant = (typeof noticeVariants)[number];
+/** The notice's meaning: information, a good outcome, a caution, a refusal. */
+export type NoticeTone = (typeof noticeTones)[number];
+/**
+ * How much of a tone's color the notice's fill mixes into the surface. Info
+ * uses the derived accent tint instead (ADR 0011), which already keeps the
+ * accent readable on every palette.
+ */
+export declare const noticeTintShare = 0.1;
+/**
+ * How far the notice's words move from the tone's color toward the text
+ * color, so they read darker than the tone on a light fill (lighter on a
+ * dark one) and keep 4.5:1 on the tint (`notice.test.tsx`).
+ */
+export declare const noticeInkTextShare = 0.3;
+/** The semantic color a tone is drawn from. */
+export declare function noticeToneColor(tone: NoticeTone): string;
+export declare function cssNoticeClasses(): string;
+export declare function noticeClassCatalog(): string[];