@scalewing/react 1.28.0 → 1.30.0

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

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

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from 'react';
+import { type TableRowVariant } from '../../css/css-table-ledger.js';
+export type { TableRowVariant };
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `sub` sets the row under the one above it, as an item of a batch: its
+     * row header (`TableCell as="th" scope="row"`) is indented with a guide
+     * bar at the indent; a sub row without a row header is not indented.
+     * `default` is a row of its own.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+};
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `sub` sets the row under the one above it, as an item of a batch: its
+     * row header (`TableCell as="th" scope="row"`) is indented with a guide
+     * bar at the indent; a sub row without a row header is not indented.
+     * `default` is a row of its own.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+} & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/table/TableRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../class-names.js';
+import { assertTableRowVariant, } from '../../css/css-table-ledger.js';
+export const TableRow = forwardRef(function TableRow({ className, selected = false, struck = false, variant = 'default', ...rest }, ref) {
+    assertTableRowVariant(variant);
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', struck && 'sw-table-row-struck', className), ...rest }));
+});

package/dist/components/use-scroll-overflow.d.ts

@@ -1,9 +1,14 @@
 import { type RefObject } from 'react';
 import { type ScrollOverflow } from '../scroll-overflow.js';
+/** A box's overflow, and whether it has been measured yet. */
+export type MeasuredScrollOverflow = ScrollOverflow & {
+    measured: boolean;
+};
 /**
  * Follows which inline edges of a scroll box have more content past them:
  * on mount, on every scroll, and whenever the box or its content changes
- * size. Before mount (and on the server) it reports no overflow, so the
- * box renders as it always has until it is measured.
+ * size. Before mount (and on the server) it reports no overflow and
+ * `measured: false`, so the box renders as it always has until it is
+ * measured; a measured box with neither edge set fits its content.
  */
-export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): ScrollOverflow;
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): MeasuredScrollOverflow;

package/dist/components/use-scroll-overflow.js

@@ -1,23 +1,34 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { noScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
+const unmeasured = {
+    ...noScrollOverflow,
+    measured: false,
+};
 /**
  * Follows which inline edges of a scroll box have more content past them:
  * on mount, on every scroll, and whenever the box or its content changes
- * size. Before mount (and on the server) it reports no overflow, so the
- * box renders as it always has until it is measured.
+ * size. Before mount (and on the server) it reports no overflow and
+ * `measured: false`, so the box renders as it always has until it is
+ * measured; a measured box with neither edge set fits its content.
  */
 export function useScrollOverflow(ref) {
-    const [overflow, setOverflow] = useState(noScrollOverflow);
+    const [overflow, setOverflow] = useState(unmeasured);
     useEffect(() => {
         const box = ref.current;
         if (!box)
             return;
+        // The metrics hold on a box that does not scroll (a fitting table
+        // region set to overflow: visible): scrollWidth still reports content
+        // past its edge, so the box turns back into a scroll box as it widens.
+        // Keep it that way; a scroll-container-only check would pin it open.
         function measure() {
             if (!box)
                 return;
             const next = scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth);
-            setOverflow((current) => sameScrollOverflow(current, next) ? current : next);
+            setOverflow((current) => current.measured && sameScrollOverflow(current, next)
+                ? current
+                : { ...next, measured: true });
         }
         measure();
         box.addEventListener('scroll', measure, { passive: true });

package/dist/css/css-action-menu.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -114,6 +115,43 @@ export function cssActionMenuClasses() {
   color: var(--sw-color-danger);
 }
 
+/*
+ * A command's detail: its current value at the inline end in the muted
+ * colour, then a chevron pointing to the inline end (mirrored right to
+ * left). A long value wraps between words, never inside one (the command
+ * itself may break anywhere), and the chevron stays last.
+ */
+.sw-action-menu-detail {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+  overflow-wrap: normal;
+  padding-inline-start: var(--sw-space-3);
+  text-align: end;
+}
+
+.sw-action-menu-chevron {
+  ${chevronStroke}
+  flex: none;
+  transform: rotate(-45deg);
+}
+
+.sw-action-menu-chevron:dir(rtl) {
+  transform: rotate(135deg);
+}
+
+/* A hairline that sets a command apart from the ones above. */
+.sw-action-menu-separator {
+  border-top: 1px solid var(--sw-color-border);
+  margin-block: var(--sw-space-1);
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-chevron { border-color: CanvasText; }
+}
+
 /* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
 @media ${coarsePointerQuery} {
   .sw-action-menu-trigger {
@@ -135,5 +173,8 @@ export function actionMenuClassCatalog() {
         'sw-action-menu-items',
         'sw-action-menu-item',
         'sw-action-menu-item-danger',
+        'sw-action-menu-detail',
+        'sw-action-menu-chevron',
+        'sw-action-menu-separator',
     ];
 }

package/dist/css/css-button-group-attached.d.ts

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

package/dist/css/css-button-group-attached.js

@@ -0,0 +1,70 @@
+import { breakpointQuery } from './breakpoints.js';
+import { joinedZIndex } from './stacking.js';
+/*
+ * An attached ButtonGroup is one joined control, such as Previous, Today
+ * and Next: its direct Button children side by side with no gap and one
+ * height, their borders overlapping into single dividers, the inner
+ * corners square and the outer ones the sm radius. It keeps its row on a
+ * phone (it never stacks) and sizes to its buttons, even in a Stack that
+ * would stretch it, so `justify` does not apply.
+ *
+ * A borderless variant (primary, tertiary, ghost, danger) draws its
+ * divider in its own text colour at low strength, so a joined row of them
+ * still reads as separate buttons; forced colours draw every border.
+ *
+ * The group is its own stacking context: a pressed button's ring paints
+ * over its neighbours and the focused button's standard outer ring over
+ * both, so neither is covered by the next button.
+ */
+export function cssButtonGroupAttachedClasses() {
+    const group = '.sw-button-group.sw-button-group-attached';
+    return `${group} {
+  align-items: stretch;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  isolation: isolate;
+  max-width: 100%;
+  width: fit-content;
+}
+
+${group} > .sw-button {
+  border-radius: 0;
+}
+
+${group} > .sw-button + .sw-button {
+  margin-inline-start: -1px;
+}
+
+${group} > .sw-button:first-child {
+  border-end-start-radius: var(--sw-radius-sm);
+  border-start-start-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button:last-child {
+  border-end-end-radius: var(--sw-radius-sm);
+  border-start-end-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+  border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+${group} > .sw-button[aria-pressed='true'] {
+  position: relative;
+  ${joinedZIndex('pressed')}
+}
+
+${group} > .sw-button:focus-visible {
+  position: relative;
+  ${joinedZIndex('focused')}
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${group} { align-items: stretch; flex-direction: row; }
+  ${group} > * { width: auto; }
+}`;
+}
+export function buttonGroupAttachedClassCatalog() {
+    return ['sw-button-group-attached'];
+}