@scalewing/react 1.29.0 → 1.31.0

package/dist/components/SectionNav.d.ts

@@ -1,5 +1,8 @@
 import { type ReactNode } from 'react';
 import { type Breakpoint } from '../css/breakpoints.js';
+import { type SectionNavAppearance } from '../css/css-section-nav-filled.js';
+export type { SectionNavAppearance };
+export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
 export type SectionNavItem = {
     id: string;
     label: string;
@@ -11,6 +14,20 @@ export type SectionNavItem = {
     current?: 'page' | 'location' | boolean;
     /** A decorative glyph before the label. */
     icon?: ReactNode;
+    /**
+     * How many things wait in the section, such as tasks to do: a filled pill
+     * after the label, read as part of the link's name ("Tasks 3"). A whole
+     * number; 0 (or none) shows no pill. There is no cap: a long number
+     * widens the link.
+     */
+    count?: number;
+    /**
+     * What the count means, in the consumer's words ("3 tasks to do"): read
+     * in the link's name in place of the bare number ("Tasks 3 tasks to
+     * do"; "Tasks 3 waiting" with "3 waiting"), the pill then hidden from
+     * assistive technology. Needs `count`.
+     */
+    countLabel?: string;
 };
 type SectionNavLabel = {
     'aria-label': string;
@@ -33,6 +50,13 @@ export type SectionNavProps = SectionNavLabel & {
      * marked by a bar at its start) instead of a row (marked by an underline).
      */
     verticalFrom?: Breakpoint;
+    /**
+     * How the current item is marked: `underline` (default) under a hairline
+     * row, or a bar at its start in a side list; `filled`, a quiet row of
+     * page buttons whose current one takes a soft fill, for an area's
+     * sub-navigation beside its name.
+     */
+    appearance?: SectionNavAppearance;
 };
 /**
  * A page's secondary navigation between the sections of one area, such as
@@ -40,5 +64,4 @@ export type SectionNavProps = SectionNavLabel & {
  * workspace's own navigation, in a row that wraps or, from `verticalFrom`,
  * a side list. The current item carries `aria-current`.
  */
-export declare function SectionNav({ items, onNavigate, verticalFrom, ...label }: SectionNavProps): import("react").JSX.Element;
-export {};
+export declare function SectionNav({ appearance, items, onNavigate, verticalFrom, ...label }: SectionNavProps): import("react").JSX.Element;

package/dist/components/SectionNav.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
 import { breakpoints } from '../css/breakpoints.js';
 import { sectionNavVerticalClass } from '../css/css-section-nav.js';
+import { assertSectionNavAppearance, } from '../css/css-section-nav-filled.js';
+export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
 function plainPress(event) {
     return (event.button === 0 &&
         !event.defaultPrevented &&
@@ -20,6 +22,12 @@ function assertItems(items) {
         throw new RangeError('SectionNav items need nonempty ids and labels');
     if (new Set(items.map((item) => item.id)).size !== items.length)
         throw new RangeError('SectionNav items need unique ids');
+    if (items.some((item) => item.count !== undefined &&
+        (!Number.isInteger(item.count) || item.count < 0)))
+        throw new RangeError('SectionNav item counts are whole numbers from 0');
+    if (items.some((item) => item.countLabel !== undefined &&
+        (!item.countLabel.trim() || item.count === undefined)))
+        throw new RangeError('SectionNav item countLabel is nonempty and comes with a count');
 }
 function assertBreakpoint(verticalFrom) {
     if (verticalFrom !== undefined && !breakpoints.includes(verticalFrom))
@@ -31,10 +39,11 @@ function assertBreakpoint(verticalFrom) {
  * workspace's own navigation, in a row that wraps or, from `verticalFrom`,
  * a side list. The current item carries `aria-current`.
  */
-export function SectionNav({ items, onNavigate, verticalFrom, ...label }) {
+export function SectionNav({ appearance = 'underline', items, onNavigate, verticalFrom, ...label }) {
     assertItems(items);
     assertBreakpoint(verticalFrom);
-    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom)), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": ariaCurrent(item.current), className: "sw-section-nav-link", href: item.href, 
+    assertSectionNavAppearance(appearance);
+    return (_jsx("nav", { className: cx('sw-section-nav', verticalFrom && sectionNavVerticalClass(verticalFrom), appearance === 'filled' && 'sw-section-nav-filled'), ...label, children: _jsx("ul", { className: "sw-section-nav-list", children: items.map((item) => (_jsx("li", { children: _jsxs("a", { "aria-current": ariaCurrent(item.current), className: "sw-section-nav-link", href: item.href, 
                     // Only a given onNavigate attaches a handler, so the links
                     // render from a server component without one.
                     onClick: onNavigate
@@ -44,5 +53,5 @@ export function SectionNav({ items, onNavigate, verticalFrom, ...label }) {
                             event.preventDefault();
                             onNavigate(item);
                         }
-                        : undefined, children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-section-nav-icon", children: item.icon })) : null, item.label] }) }, item.id))) }) }));
+                        : undefined, children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-section-nav-icon", children: item.icon })) : null, item.label, item.count ? (_jsxs(_Fragment, { children: [item.countLabel ? (_jsx("span", { className: "sw-sr-only", children: ` ${item.countLabel}` })) : (' '), _jsx("span", { "aria-hidden": item.countLabel ? true : undefined, className: "sw-section-nav-count", children: item.count })] })) : null] }) }, item.id))) }) }));
 }

package/dist/components/Table.d.ts

@@ -1,10 +1,18 @@
 import { type HTMLAttributes } from 'react';
 import { type TableLayout, type TableVerticalAlign } from './table/table-layout.js';
 export { TableCell, type TableCellProps, type TableColumnWidth, type TableSort, } from './table/TableCell.js';
+export { TableRow, type TableRowProps, type TableRowVariant, } from './table/TableRow.js';
+export type { TableCellTone } from '../css/css-table-ledger.js';
+export { tableCellTones, tableRowVariants } from '../css/css-table-ledger.js';
 export type { TableLayout, TableVerticalAlign };
 export type TableDensity = 'comfortable' | 'compact';
 export type TableProps = HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
+    /**
+     * Pins the header row to the top of the table's own scroll region
+     * (default). In a table with a sticky `TableFooter` that fits its width
+     * the region does not scroll, so the header pins to the page's top.
+     */
     stickyHeader?: boolean;
     /**
      * `auto` (default) sizes each column by its content. `fixed` sizes the
@@ -23,10 +31,20 @@ export type TableProps = HTMLAttributes<HTMLTableElement> & {
      * should start on its first line.
      */
     verticalAlign?: TableVerticalAlign;
+    /**
+     * Draws a hairline between columns, at the inline start of every cell
+     * after a row's first, for a ledger read across as well as down.
+     */
+    columnRules?: boolean;
 };
 /** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
 export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
+    /**
+     * Pins the header row to the top of the table's own scroll region
+     * (default). In a table with a sticky `TableFooter` that fits its width
+     * the region does not scroll, so the header pins to the page's top.
+     */
     stickyHeader?: boolean;
     /**
      * `auto` (default) sizes each column by its content. `fixed` sizes the
@@ -45,14 +63,40 @@ export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttrib
      * should start on its first line.
      */
     verticalAlign?: TableVerticalAlign;
+    /**
+     * Draws a hairline between columns, at the inline start of every cell
+     * after a row's first, for a ledger read across as well as down.
+     */
+    columnRules?: boolean;
 } & import("react").RefAttributes<HTMLTableElement>>;
 export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
 export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
 export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
-export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
-    selected?: boolean;
+export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement> & {
+    /**
+     * Pins the footer, such as a total row, to the bottom edge while the rows
+     * scroll under it: to the page while the table fits its width (the
+     * sticky header then pins to the page's top too, under any sticky
+     * AppHeader, which covers it), or to the table's own region while the
+     * table scrolls sideways in it. A sticky ActionBar covers a pinned
+     * footer, and so does a Dialog's pinned footer, so do not pair them.
+     */
+    sticky?: boolean;
 };
-export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
-    selected?: boolean;
-} & import("react").RefAttributes<HTMLTableRowElement>>;
+/**
+ * The table's footer (`tfoot`): a total row, its cells at weight 600 under
+ * a heavier rule. A row header in it (`TableCell as="th" scope="row"`)
+ * names the total.
+ */
+export declare const TableFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    /**
+     * Pins the footer, such as a total row, to the bottom edge while the rows
+     * scroll under it: to the page while the table fits its width (the
+     * sticky header then pins to the page's top too, under any sticky
+     * AppHeader, which covers it), or to the table's own region while the
+     * table scrolls sideways in it. A sticky ActionBar covers a pinned
+     * footer, and so does a Dialog's pinned footer, so do not pair them.
+     */
+    sticky?: boolean;
+} & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/components/Table.js

@@ -4,11 +4,13 @@ import { cx } from '../class-names.js';
 import { ScrollRegion } from './ScrollRegion.js';
 import { assertTableLayout, assertTableVerticalAlign, } from './table/table-layout.js';
 export { TableCell, } from './table/TableCell.js';
+export { TableRow, } from './table/TableRow.js';
+export { tableCellTones, tableRowVariants } from '../css/css-table-ledger.js';
 /** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
-export const Table = forwardRef(function Table({ children, className, density = 'comfortable', layout = 'auto', stickyHeader = true, verticalAlign = 'middle', ...rest }, ref) {
+export const Table = forwardRef(function Table({ children, className, columnRules = false, density = 'comfortable', layout = 'auto', stickyHeader = true, verticalAlign = 'middle', ...rest }, ref) {
     assertTableLayout(layout);
     assertTableVerticalAlign(verticalAlign);
-    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', layout === 'fixed' && 'sw-table-fixed', stickyHeader && 'sw-table-sticky', verticalAlign === 'top' && 'sw-table-top', className), ...rest, children: children }) }));
+    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", markFits: true, children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', layout === 'fixed' && 'sw-table-fixed', stickyHeader && 'sw-table-sticky', verticalAlign === 'top' && 'sw-table-top', columnRules && 'sw-table-column-rules', className), ...rest, children: children }) }));
 });
 export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
     return _jsx("thead", { ref: ref, className: className, ...rest });
@@ -16,6 +18,11 @@ export const TableHeader = forwardRef(function TableHeader({ className, ...rest
 export const TableBody = forwardRef(function TableBody({ className, ...rest }, ref) {
     return _jsx("tbody", { ref: ref, className: className, ...rest });
 });
-export const TableRow = forwardRef(function TableRow({ className, selected = false, ...rest }, ref) {
-    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', className), ...rest }));
+/**
+ * The table's footer (`tfoot`): a total row, its cells at weight 600 under
+ * a heavier rule. A row header in it (`TableCell as="th" scope="row"`)
+ * names the total.
+ */
+export const TableFooter = forwardRef(function TableFooter({ className, sticky = false, ...rest }, ref) {
+    return (_jsx("tfoot", { ref: ref, className: cx(sticky && 'sw-table-footer-sticky', className), ...rest }));
 });

package/dist/components/action-menu/ActionMenuList.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, } from 'react';
+import { Fragment, useId, useLayoutEffect, useRef, } from 'react';
 import { cx } from '../../class-names.js';
 import { useAnchoredPopover } from '../use-anchored-popover.js';
 /**
@@ -26,12 +26,12 @@ export function ActionMenuList({ id, align, header, label, items, focusIndex, tr
         header !== null &&
         header !== false &&
         header !== '';
-    const menu = (_jsx("div", { "aria-describedby": hasHeader ? headerId : undefined, "aria-label": label, className: hasHeader ? 'sw-action-menu-items' : 'sw-action-menu-list', id: hasHeader ? undefined : id, onKeyDown: onKeyDown, ref: hasHeader ? undefined : menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    onSelect(item);
-                }
-            }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { lang: item.lang, children: item.label })] }, item.id))) }));
+    const menu = (_jsx("div", { "aria-describedby": hasHeader ? headerId : undefined, "aria-label": label, className: hasHeader ? 'sw-action-menu-items' : 'sw-action-menu-list', id: hasHeader ? undefined : id, onKeyDown: onKeyDown, ref: hasHeader ? undefined : menuRef, role: "menu", children: items.map((item, index) => (_jsxs(Fragment, { children: [item.separatorBefore && index > 0 ? (_jsx("div", { className: "sw-action-menu-separator", role: "separator" })) : null, _jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault();
+                            onSelect(item);
+                        }
+                    }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { lang: item.lang, children: item.label }), item.detail ? (_jsxs("span", { className: "sw-action-menu-detail", children: [' ', _jsx("span", { lang: item.detailLang, children: item.detail }), _jsx("span", { "aria-hidden": "true", className: "sw-action-menu-chevron" })] })) : null] })] }, item.id))) }));
     if (!hasHeader)
         return menu;
     // The header is not a menu item: it sits above the menu in the same

package/dist/components/combobox/ComboboxPopup.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import { type ComboboxEntry } from './entries.js';
+import { type ComboboxGroup } from './types.js';
+type ComboboxPopupProps = {
+    listId: string;
+    listLabel: string;
+    groups: readonly ComboboxGroup[];
+    entries: readonly ComboboxEntry[];
+    activeId: string | undefined;
+    emptyText: string;
+    note?: string;
+    noteId: string;
+    inputRef: RefObject<HTMLInputElement | null>;
+    onActivate: (entry: ComboboxEntry) => void;
+    onChoose: (entry: ComboboxEntry) => void;
+    onDismiss: () => void;
+};
+/**
+ * The open list beside the input, on the popover layer and at least as
+ * wide as the input: a heading per group, each option's label, badge and
+ * description, then the action; the empty text when nothing matches, and
+ * the note under it all.
+ */
+export declare function ComboboxPopup({ activeId, emptyText, entries, groups, inputRef, listId, listLabel, note, noteId, onActivate, onChoose, onDismiss, }: ComboboxPopupProps): import("react").JSX.Element;
+export {};

package/dist/components/combobox/ComboboxPopup.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useLayoutEffect, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { Badge } from '../Badge.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+function keepInputFocus(event) {
+    // A press in the list never takes focus from the input.
+    event.preventDefault();
+}
+function EntryBadge({ badge }) {
+    if (!badge)
+        return null;
+    return (_jsx(Badge, { size: "sm", tone: badge.tone ?? 'neutral', children: badge.label }));
+}
+/**
+ * The open list beside the input, on the popover layer and at least as
+ * wide as the input: a heading per group, each option's label, badge and
+ * description, then the action; the empty text when nothing matches, and
+ * the note under it all.
+ */
+export function ComboboxPopup({ activeId, emptyText, entries, groups, inputRef, listId, listLabel, note, noteId, onActivate, onChoose, onDismiss, }) {
+    const popupRef = useRef(null);
+    useAnchoredPopover(popupRef, inputRef, inputRef, onDismiss, {
+        align: 'start',
+        flipInline: true,
+    });
+    // At least as wide as the input, and kept so when the input resizes.
+    useLayoutEffect(() => {
+        const popup = popupRef.current;
+        const input = inputRef.current;
+        if (!popup || !input)
+            return;
+        const fit = () => {
+            popup.style.minWidth = `${input.offsetWidth}px`;
+        };
+        fit();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(input);
+        return () => observer.disconnect();
+    }, [inputRef]);
+    useLayoutEffect(() => {
+        if (activeId)
+            document.getElementById(activeId)?.scrollIntoView?.({ block: 'nearest' });
+    }, [activeId]);
+    const options = entries.filter((entry) => entry.kind === 'option');
+    const action = entries.find((entry) => entry.kind === 'action');
+    function renderEntry(entry) {
+        const disabled = entry.kind === 'option' && entry.option.disabled;
+        return (_jsx("div", { "aria-disabled": disabled || undefined, "aria-selected": entry.id === activeId, className: cx('sw-combobox-option', entry.kind === 'action' && 'sw-combobox-action'), id: entry.id, onClick: () => onChoose(entry), onMouseDown: keepInputFocus, 
+            // The pointer moves the active option, as the arrow keys do.
+            onMouseMove: () => {
+                if (entry.id !== activeId)
+                    onActivate(entry);
+            }, role: "option", children: entry.kind === 'option' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-combobox-label", children: entry.option.label }), _jsx(EntryBadge, { badge: entry.option.badge }), entry.option.description ? (_jsx("span", { className: "sw-combobox-description", children: entry.option.description })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-combobox-label", children: entry.action.label }), _jsx(EntryBadge, { badge: entry.action.badge })] })) }, entry.id));
+    }
+    return (_jsxs("div", { className: "sw-combobox-popup", onMouseDown: keepInputFocus, ref: popupRef, children: [entries.length > 0 ? (_jsxs("div", { "aria-label": listLabel, className: "sw-combobox-list", id: listId, role: "listbox", children: [groups.map((group, groupIndex) => {
+                        const groupEntries = options.filter((entry) => entry.kind === 'option' && entry.groupIndex === groupIndex);
+                        if (groupEntries.length === 0)
+                            return null;
+                        if (!group.label)
+                            return (_jsx(Fragment, { children: groupEntries.map(renderEntry) }, `${listId}-group-${groupIndex}`));
+                        const headingId = `${listId}-group-${groupIndex}`;
+                        return (_jsxs("div", { "aria-labelledby": headingId, role: "group", children: [_jsx("div", { className: "sw-combobox-heading", id: headingId, role: "presentation", children: group.label }), groupEntries.map(renderEntry)] }, headingId));
+                    }), action ? renderEntry(action) : null] })) : null, options.length === 0 ? (_jsx("div", { "aria-hidden": "true", className: "sw-combobox-empty", children: emptyText })) : null, note ? (_jsx("div", { className: "sw-combobox-note", id: noteId, children: note })) : null] }));
+}

package/dist/components/combobox/entries.d.ts

@@ -0,0 +1,18 @@
+import { type ComboboxAction, type ComboboxGroup, type ComboboxOption } from './types.js';
+/** One row the arrow keys move over: an option in a group, or the action. */
+export type ComboboxEntry = {
+    kind: 'option';
+    key: string;
+    id: string;
+    index: number;
+    option: ComboboxOption;
+    groupIndex: number;
+} | {
+    kind: 'action';
+    key: string;
+    id: string;
+    index: number;
+    action: ComboboxAction;
+};
+/** The list's rows in order, each with a stable key and a DOM id under `listId`. */
+export declare function comboboxEntries(listId: string, groups: readonly ComboboxGroup[], action: ComboboxAction | undefined): ComboboxEntry[];

package/dist/components/combobox/entries.js

@@ -0,0 +1,34 @@
+/*
+ * Each row's key and DOM id come from its value, not its place, so an
+ * option keeps its id (and stays the active one) when the consumer's
+ * results change under it, and a new option never inherits an old id.
+ */
+const encoder = new TextEncoder();
+/** The value as hex, so any value makes a unique, valid id part. */
+function idPart(value) {
+    return Array.from(encoder.encode(value), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The list's rows in order, each with a stable key and a DOM id under `listId`. */
+export function comboboxEntries(listId, groups, action) {
+    const entries = [];
+    groups.forEach((group, groupIndex) => {
+        for (const option of group.options)
+            entries.push({
+                kind: 'option',
+                key: `option:${option.value}`,
+                id: `${listId}-option-${idPart(option.value)}`,
+                index: entries.length,
+                option,
+                groupIndex,
+            });
+    });
+    if (action)
+        entries.push({
+            kind: 'action',
+            key: 'action',
+            id: `${listId}-action`,
+            index: entries.length,
+            action,
+        });
+    return entries;
+}

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,63 @@
+import { type BadgeTone } from '../../css/css-data.js';
+/** A short tag after an option's label, such as "Warning" or "Blocked". */
+export type ComboboxBadge = {
+    label: string;
+    tone?: BadgeTone;
+};
+/** One suggestion in a Combobox. */
+export type ComboboxOption = {
+    value: string;
+    label: string;
+    /** A muted line of detail after the label, such as "3 items · updated Sep 28". */
+    description?: string;
+    badge?: ComboboxBadge;
+    /** Shown, read as unavailable, and never chosen, such as an archived item. */
+    disabled?: boolean;
+};
+/** A run of suggestions under a heading, such as "All items". */
+export type ComboboxGroup = {
+    /** The group's heading; a group without one has no heading. */
+    label?: string;
+    options: readonly ComboboxOption[];
+};
+/** A command at the end of the list, such as "+ New entry “acme”". */
+export type ComboboxAction = {
+    label: string;
+    onPress: () => void;
+    badge?: ComboboxBadge;
+};
+export declare const comboboxSizes: readonly ["md", "xs"];
+export type ComboboxSize = (typeof comboboxSizes)[number];
+export type ComboboxProps = {
+    /** The input's name, drawn above it unless `labelVisuallyHidden`. */
+    label: string;
+    labelVisuallyHidden?: boolean;
+    /** The text in the input; the consumer filters `groups` from it. */
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    groups: readonly ComboboxGroup[];
+    /** Called with the chosen option's value; the consumer sets `inputValue`. */
+    onSelect: (value: string) => void;
+    action?: ComboboxAction;
+    /**
+     * Shown in the list, and announced, when no group has an option, such as
+     * "Nothing matches".
+     */
+    emptyText: string;
+    /**
+     * The words announced for the number of options while the list is open,
+     * such as `(n) => \`${n} items\``; without it only the empty text is
+     * announced.
+     */
+    countText?: (count: number) => string;
+    /** The list's name when it differs from the input's, such as "Results". */
+    listLabel?: string;
+    /** A muted line under the suggestions, such as how to find more. */
+    note?: string;
+    placeholder?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: ComboboxSize;
+};

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+export const comboboxSizes = ['md', 'xs'];

package/dist/components/combobox/validate.d.ts

@@ -0,0 +1,3 @@
+import { type ComboboxProps } from './types.js';
+/** Fails closed on blank words, duplicate values and unknown sizes. */
+export declare function assertCombobox(props: ComboboxProps): void;

package/dist/components/combobox/validate.js

@@ -0,0 +1,44 @@
+import { badgeTones } from '../../css/css-data.js';
+import { comboboxSizes, } from './types.js';
+function blank(text) {
+    return typeof text !== 'string' || !text.trim();
+}
+function assertBadge(badge) {
+    if (badge === undefined)
+        return;
+    if (blank(badge.label))
+        throw new RangeError('A Combobox badge needs a nonempty label');
+    if (badge.tone !== undefined && !badgeTones.includes(badge.tone))
+        throw new RangeError(`Unknown Combobox badge tone: ${String(badge.tone)}`);
+}
+/** Fails closed on blank words, duplicate values and unknown sizes. */
+export function assertCombobox(props) {
+    if (blank(props.label))
+        throw new RangeError('Combobox needs a nonempty label');
+    if (blank(props.emptyText))
+        throw new RangeError('Combobox needs a nonempty emptyText');
+    if (props.listLabel !== undefined && blank(props.listLabel))
+        throw new RangeError('A Combobox listLabel must not be blank');
+    if (props.size !== undefined && !comboboxSizes.includes(props.size))
+        throw new RangeError(`Unknown Combobox size: ${String(props.size)}`);
+    const values = new Set();
+    for (const group of props.groups) {
+        if (group.label !== undefined && blank(group.label))
+            throw new RangeError('A Combobox group label must not be blank');
+        for (const option of group.options) {
+            if (blank(option.value) || blank(option.label))
+                throw new RangeError('Combobox options need nonempty values and labels');
+            if (values.has(option.value))
+                throw new RangeError(`Duplicate Combobox option: ${option.value}`);
+            values.add(option.value);
+            assertBadge(option.badge);
+        }
+    }
+    if (props.action) {
+        if (blank(props.action.label))
+            throw new RangeError('A Combobox action needs a nonempty label');
+        if (typeof props.action.onPress !== 'function')
+            throw new TypeError('A Combobox action needs onPress');
+        assertBadge(props.action.badge);
+    }
+}

package/dist/components/field/SearchFrame.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+type SearchFrameProps = {
+    children: ReactNode;
+    leading?: ReactNode;
+    clearLabel: string;
+    /** Shown while the input holds text and is enabled. */
+    showClear: boolean;
+    onClear: () => void;
+};
+/**
+ * The search field's frame: the consumer's glyph at the start (hidden from
+ * assistive technology), the input, and a clear button at the end while
+ * there is text. Clearing calls `onClear` and puts focus back in the input.
+ */
+export declare function SearchFrame({ children, clearLabel, leading, onClear, showClear, }: SearchFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/field/SearchFrame.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A press on the frame's chrome (the glyph or the padding) focuses the
+ * input, as on an adorned field; a press on the input keeps the browser's
+ * own caret placement, and the clear button runs its own action.
+ */
+function focusSearchInput(event) {
+    const input = event.currentTarget.querySelector('input');
+    const target = event.target;
+    if (!input || input.disabled || target === input)
+        return;
+    event.preventDefault();
+    // The clear button keeps focus in the input: no blur, and its click
+    // still runs.
+    if (target.closest('.sw-field-search-clear'))
+        return;
+    input.focus();
+}
+/**
+ * The search field's frame: the consumer's glyph at the start (hidden from
+ * assistive technology), the input, and a clear button at the end while
+ * there is text. Clearing calls `onClear` and puts focus back in the input.
+ */
+export function SearchFrame({ children, clearLabel, leading, onClear, showClear, }) {
+    return (_jsxs("span", { className: "sw-field-adorned sw-field-search", onMouseDown: focusSearchInput, children: [leading != null && leading !== false ? (_jsx("span", { "aria-hidden": "true", className: "sw-field-search-leading", children: leading })) : null, children, showClear ? (_jsx("button", { "aria-label": clearLabel, className: "sw-field-search-clear", onClick: (event) => {
+                    // Focus first, so a consumer that moves focus in onClear wins.
+                    event.currentTarget.parentElement
+                        ?.querySelector('input')
+                        ?.focus();
+                    onClear();
+                }, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "sw-field-search-cross" }) })) : null] }));
+}

package/dist/components/table/TableCell.d.ts

@@ -1,4 +1,5 @@
 import { type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { type TableCellTone } from '../../css/css-table-ledger.js';
 import { type TableColumnWidth } from './table-layout.js';
 export type { TableColumnWidth };
 type TableCellAlign = 'start' | 'end';
@@ -38,5 +39,12 @@ export type TableCellProps = ((Omit<TdHTMLAttributes<HTMLTableCellElement>, 'wid
      * it as no width.
      */
     width?: TableColumnWidth;
+    /**
+     * Colours the cell's text: `success` and `danger` for signed figures
+     * (money in, a shortfall), `accent` for a figure to act on, `muted` for
+     * a quiet one, in the theme's colour as `Text color` uses it. A colour
+     * is never the only signal: keep the sign or the words.
+     */
+    tone?: TableCellTone;
 };
 export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/TableCell.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cx } from '../../class-names.js';
+import { assertTableCellTone, } from '../../css/css-table-ledger.js';
 import { assertTableColumnWidth, tableColumnWidthClass, } from './table-layout.js';
 const tableSorts = ['ascending', 'descending', 'none'];
 /** `sort` and `onSort` come together, on a header cell, with a known value. */
@@ -14,14 +15,15 @@ function assertSort(as, sort, onSort) {
     if (!tableSorts.includes(sort))
         throw new RangeError(`Unknown TableCell sort: ${String(sort)}`);
 }
-export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', children, className, numeric = false, onSort, sort, truncate = false, width, ...rest }, ref) {
+export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', children, className, numeric = false, onSort, sort, tone, truncate = false, width, ...rest }, ref) {
     assertSort(as, sort, onSort);
     assertTableColumnWidth(width);
+    assertTableCellTone(tone);
     const Component = as;
     const alignmentClass = numeric
         ? 'sw-table-numeric'
         : align === 'end'
             ? 'sw-table-end'
             : undefined;
-    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : (children) }));
+    return (_jsx(Component, { ref: ref, "aria-sort": sort === undefined || sort === 'none' ? undefined : sort, className: cx(alignmentClass, truncate && 'sw-table-clip', tone && `sw-table-tone-${tone}`, width && tableColumnWidthClass(width), className), ...rest, children: sort !== undefined && onSort ? (_jsxs("button", { className: "sw-table-sort", onClick: onSort, type: "button", children: [children, _jsx("span", { "aria-hidden": "true", className: cx('sw-table-sort-glyph', `sw-table-sort-${sort}`) })] })) : (children) }));
 });