@scalewing/react 1.36.0 → 1.38.0

package/dist/components/Table.js

@@ -3,15 +3,21 @@ import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
 import { ScrollRegion } from './ScrollRegion.js';
 import { assertTableLayout, assertTableStickyHeader, assertTableVerticalAlign, } from './table/table-layout.js';
+import { assertTableMaxHeight, tableMaxHeightStyle, } from './table/table-max-height.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, columnRules = false, density = 'comfortable', layout = 'auto', stickyHeader = true, verticalAlign = 'middle', ...rest }, ref) {
+/**
+ * A wide table scrolls inside its own `ScrollRegion`, named after the
+ * table; a bounded one (`maxHeight`) scrolls its rows in it too.
+ */
+export const Table = forwardRef(function Table({ children, className, columnRules = false, density = 'comfortable', layout = 'auto', maxHeight, stickyHeader = true, verticalAlign = 'middle', ...rest }, ref) {
     assertTableLayout(layout);
     assertTableStickyHeader(stickyHeader);
     assertTableVerticalAlign(verticalAlign);
-    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 !== false && 'sw-table-sticky', stickyHeader === 'page' && 'sw-table-sticky-page', verticalAlign === 'top' && 'sw-table-top', columnRules && 'sw-table-column-rules', className), ...rest, children: children }) }));
+    assertTableMaxHeight(maxHeight, stickyHeader);
+    const bounded = maxHeight !== undefined;
+    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: cx('sw-table-wrap', bounded && 'sw-table-bounded'), markFits: !bounded, style: tableMaxHeightStyle(maxHeight), children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', layout === 'fixed' && 'sw-table-fixed', stickyHeader !== false && 'sw-table-sticky', stickyHeader === 'page' && 'sw-table-sticky-page', 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 });

package/dist/components/Tabs.d.ts

@@ -1,16 +1,10 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type AccessibleName } from '../accessible-name.js';
 export type TabItem = {
     id: string;
     label: ReactNode;
 };
-type TabsLabel = {
-    'aria-label': string;
-    'aria-labelledby'?: never;
-} | {
-    'aria-label'?: never;
-    'aria-labelledby': string;
-};
-export type TabsProps = TabsLabel & {
+export type TabsProps = AccessibleName & {
     /** Prefix for the tab and panel ids, so a `TabPanel` can point back at its tab. */
     id: string;
     items: readonly TabItem[];
@@ -58,4 +52,3 @@ export type TabPanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
 };
 /** The content of one tab, labelled by its tab and hidden while another tab is current. */
 export declare function TabPanel({ children, className, id, tabsId, value, ...rest }: TabPanelProps): import("react").JSX.Element;
-export {};

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { cx } from '../../class-names.js';
 import { denominationLabelWidthClass } from '../../css/css-denomination-aligned.js';
 import { denominationFramedClass, denominationScrollFramedClass, } from '../../css/css-denomination-appearance.js';
@@ -18,6 +19,7 @@ function TotalHead({ totalLabel }) {
     return (_jsx("th", { className: "sw-denomination-head sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-denomination-total-label", children: totalLabel }) }));
 }
 export function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+    const idPrefix = useId();
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
     // the column count and whether a total column takes a share.
@@ -27,5 +29,5 @@ export function DenominationStrip({ className, framed, label, columns, rows, zer
             '--sw-denomination-columns': columns.length,
             '--sw-denomination-total': hasTotals ? 1 : 0,
         };
-    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

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

@@ -4,6 +4,8 @@ type EntryCellProps = {
     entry: DenominationGridEntry;
     column: DenominationGridColumn;
     index: number;
+    /** The value cell under this count, which describes it, if any. */
+    describedBy?: string;
 };
 /**
  * One editable count of a strip row: a full-width `Stepper` named by the
@@ -11,5 +13,5 @@ type EntryCellProps = {
  * message from the entry, and the cell's tone on its border (an accent one
  * is the Stepper's changed look).
  */
-export declare function EntryCell({ row, entry, column, index }: EntryCellProps): import("react").JSX.Element;
+export declare function EntryCell({ row, entry, column, index, describedBy, }: EntryCellProps): import("react").JSX.Element;
 export {};

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

@@ -9,8 +9,8 @@ import { columnName } from './ColumnHeadText.js';
  * message from the entry, and the cell's tone on its border (an accent one
  * is the Stepper's changed look).
  */
-export function EntryCell({ row, entry, column, index }) {
+export function EntryCell({ row, entry, column, index, describedBy, }) {
     const max = entry.max?.[index] ?? undefined;
     const tone = row.cellTones?.[index];
-    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
+    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { "aria-describedby": describedBy, changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
 }

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

@@ -4,10 +4,16 @@ type StripRowProps = {
     columns: readonly DenominationGridColumn[];
     zeroLabel: string;
     hasTotals: boolean;
+    /** A per-grid prefix that keeps the value cells' ids unique on the page. */
+    idPrefix: string;
+    /** The row's place in the grid, for its value cells' ids. */
+    rowIndex: number;
 };
 /**
  * One strip row: its pinned label (with the phone total under it), a count
- * per column, read-only or entered, and its total.
+ * per column, read-only or entered, and its total. With a `valueRow`, the
+ * value line follows it and takes the total; each entry count is described
+ * by the value under it.
  */
-export declare function StripRow({ row, columns, zeroLabel, hasTotals, }: StripRowProps): import("react").JSX.Element;
+export declare function StripRow({ row, columns, zeroLabel, hasTotals, idPrefix, rowIndex, }: StripRowProps): import("react").JSX.Element;
 export {};

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

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellToneClassNames } from '../../css/css-denomination-cell-tones.js';
 import { denominationCellView } from '../../denomination-cells.js';
 import { EntryCell } from './EntryCell.js';
 import { RowLabelLine } from './RowLabelLine.js';
+import { StripTotalCell, StripTotalInline } from './StripTotal.js';
+import { hasValue, StripValueRow, valueCellId } from './StripValueRow.js';
 /**
  * One count, read-only: the zero label, a signed delta, and the cell's tone.
  * The value has its own box, which the `pill` tone appearance fills.
@@ -14,9 +16,16 @@ function CountCell({ row, index, zeroLabel, }) {
 }
 /**
  * One strip row: its pinned label (with the phone total under it), a count
- * per column, read-only or entered, and its total.
+ * per column, read-only or entered, and its total. With a `valueRow`, the
+ * value line follows it and takes the total; each entry count is described
+ * by the value under it.
  */
-export function StripRow({ row, columns, zeroLabel, hasTotals, }) {
-    const { entry } = row;
-    return (_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed', row.emphasis === 'quiet' && 'sw-denomination-row-quiet', row.disabled && 'sw-denomination-row-disabled'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => entry ? (_jsx(EntryCell, { column: column, entry: entry, index: index, row: row }, column.key)) : (_jsx(CountCell, { index: index, row: row, zeroLabel: zeroLabel }, column.key))), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: row.total ?? '' }) })) : null] }));
+export function StripRow({ row, columns, zeroLabel, hasTotals, idPrefix, rowIndex, }) {
+    const { entry, valueRow } = row;
+    // With a value line, the total is on it, not on the counts.
+    const total = valueRow ? undefined : row.total;
+    const describedBy = (index) => hasValue(valueRow?.cells[index])
+        ? valueCellId(idPrefix, rowIndex, index)
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed', row.emphasis === 'quiet' && 'sw-denomination-row-quiet', row.disabled && 'sw-denomination-row-disabled'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx(RowLabelLine, { row: row }), _jsx(StripTotalInline, { total: total })] }) }), columns.map((column, index) => entry ? (_jsx(EntryCell, { column: column, describedBy: describedBy(index), entry: entry, index: index, row: row }, column.key)) : (_jsx(CountCell, { index: index, row: row, zeroLabel: zeroLabel }, column.key))), hasTotals ? _jsx(StripTotalCell, { total: total }) : null] }), valueRow ? (_jsx(StripValueRow, { columns: columns, hasTotals: hasTotals, idPrefix: idPrefix, row: row, rowIndex: rowIndex, valueRow: valueRow })) : null] }));
 }

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

@@ -0,0 +1,11 @@
+/**
+ * A strip row's total cell: the consumer's total, or empty. Below md it is
+ * visually hidden, and `StripTotalInline` shows it under the row's name.
+ */
+export declare function StripTotalCell({ total }: {
+    total: string | undefined;
+}): import("react").JSX.Element;
+/** The total under a row's name on a phone; the cell reads it to everyone. */
+export declare function StripTotalInline({ total }: {
+    total: string | undefined;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A strip row's total cell: the consumer's total, or empty. Below md it is
+ * visually hidden, and `StripTotalInline` shows it under the row's name.
+ */
+export function StripTotalCell({ total }) {
+    return (_jsx("td", { className: "sw-denomination-total", children: _jsx("span", { className: "sw-denomination-total-value", children: total ?? '' }) }));
+}
+/** The total under a row's name on a phone; the cell reads it to everyone. */
+export function StripTotalInline({ total }) {
+    return total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: total })) : null;
+}

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

@@ -0,0 +1,25 @@
+import { type DenominationGridColumn, type DenominationGridRow, type DenominationGridValueRow } from './types.js';
+/**
+ * The id of a value cell, which the count above it is described by: the
+ * grid's prefix and the cell's place, never consumer text, so it is always
+ * one valid token of an id list.
+ */
+export declare function valueCellId(idPrefix: string, rowIndex: number, columnIndex: number): string;
+/** Whether a value cell shows something: not `null` and not blank. */
+export declare function hasValue(cell: string | null | undefined): cell is string;
+type StripValueRowProps = {
+    row: DenominationGridRow;
+    valueRow: DenominationGridValueRow;
+    columns: readonly DenominationGridColumn[];
+    hasTotals: boolean;
+    /** A per-grid prefix that keeps the value cells' ids unique on the page. */
+    idPrefix: string;
+    rowIndex: number;
+};
+/**
+ * The value line under a strip row: its name in the label column (with the
+ * row's total under it on a phone), a centred value per column, and the
+ * row's total. It keeps the row's tone, so a toned total stays toned.
+ */
+export declare function StripValueRow({ row, valueRow, columns, hasTotals, idPrefix, rowIndex, }: StripValueRowProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { StripTotalCell, StripTotalInline } from './StripTotal.js';
+import { denominationValueRowClass } from '../../css/css-denomination-value-row.js';
+/**
+ * The id of a value cell, which the count above it is described by: the
+ * grid's prefix and the cell's place, never consumer text, so it is always
+ * one valid token of an id list.
+ */
+export function valueCellId(idPrefix, rowIndex, columnIndex) {
+    return `${idPrefix}value-${rowIndex}-${columnIndex}`;
+}
+/** Whether a value cell shows something: not `null` and not blank. */
+export function hasValue(cell) {
+    return typeof cell === 'string' && cell.trim() !== '';
+}
+/**
+ * The value line under a strip row: its name in the label column (with the
+ * row's total under it on a phone), a centred value per column, and the
+ * row's total. It keeps the row's tone, so a toned total stays toned.
+ */
+export function StripValueRow({ row, valueRow, columns, hasTotals, idPrefix, rowIndex, }) {
+    return (_jsxs("tr", { "aria-disabled": row.disabled || undefined, className: cx('sw-denomination-row', denominationValueRowClass, `sw-denomination-row-${row.tone ?? 'neutral'}`, row.disabled && 'sw-denomination-row-disabled'), children: [_jsx("th", { "aria-label": `${row.label} ${valueRow.label}`, className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [_jsx("span", { className: "sw-denomination-label-line", children: _jsx("span", { className: "sw-denomination-label-text", children: valueRow.label }) }), _jsx(StripTotalInline, { total: row.total })] }) }), columns.map((column, index) => {
+                const cell = valueRow.cells[index];
+                return (_jsx("td", { className: "sw-denomination-value", id: valueCellId(idPrefix, rowIndex, index), children: hasValue(cell) ? cell : '' }, column.key));
+            }), hasTotals ? _jsx(StripTotalCell, { total: row.total }) : null] }));
+}

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

@@ -45,6 +45,20 @@ export type DenominationGridEntry = {
      */
     limitAppearance?: StepperLimitAppearance;
 };
+/**
+ * A line under a strip row that gives each column's value, such as the
+ * money its count adds up to: its own table row on the subtle fill, named
+ * in the label column, one consumer-formatted value per column centred
+ * under its count (`null` or `''` leaves a cell blank, such as for a zero
+ * count), and the row's `total` in the total column. The grid does no
+ * arithmetic and no currency formatting.
+ */
+export type DenominationGridValueRow = {
+    /** The line's name in the label column, such as "Value". */
+    label: string;
+    /** One formatted value, or `null` for none, per column. */
+    cells: readonly (string | null)[];
+};
 export type DenominationGridRow = {
     id: string;
     label: string;
@@ -80,6 +94,11 @@ export type DenominationGridRow = {
      * `entry.errors` wins.
      */
     entry?: DenominationGridEntry;
+    /**
+     * A value line under this row (the `strip` layout only); the row's
+     * `total` moves to it, and each entry count is described by its value.
+     */
+    valueRow?: DenominationGridValueRow;
 };
 export type DenominationGridProps = {
     label: string;

package/dist/components/denomination-grid/validate-value-row.d.ts

@@ -0,0 +1,6 @@
+import { type DenominationGridColumn, type DenominationGridLayout, type DenominationGridRow } from './types.js';
+/**
+ * Value rows: the strip layout only, a name that is not blank, and one
+ * formatted value or null per column.
+ */
+export declare function assertDenominationValueRows(layout: DenominationGridLayout, columns: readonly DenominationGridColumn[], rows: readonly DenominationGridRow[]): void;

package/dist/components/denomination-grid/validate-value-row.js

@@ -0,0 +1,30 @@
+/**
+ * Value rows: the strip layout only, a name that is not blank, and one
+ * formatted value or null per column.
+ */
+export function assertDenominationValueRows(layout, columns, rows) {
+    const valueRows = rows.flatMap((row) => row.valueRow == null ? [] : [row.valueRow]);
+    if (valueRows.length === 0)
+        return;
+    if (layout !== 'strip')
+        throw new RangeError('value rows need the strip layout');
+    for (const valueRow of valueRows) {
+        if (typeof valueRow !== 'object')
+            throw new RangeError('a value row is an object of label and cells');
+        if (typeof valueRow.label !== 'string' || !valueRow.label.trim())
+            throw new RangeError('a value row needs a label');
+        if (!fitsColumns(valueRow.cells, columns.length))
+            throw new RangeError('a value row needs one string or null per column');
+    }
+}
+function fitsColumns(cells, columnCount) {
+    if (!Array.isArray(cells) || cells.length !== columnCount)
+        return false;
+    // An index loop, not every(): every() skips the holes of a sparse array.
+    for (let index = 0; index < columnCount; index += 1) {
+        const cell = cells[index];
+        if (cell !== null && typeof cell !== 'string')
+            return false;
+    }
+    return true;
+}

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

@@ -7,7 +7,10 @@ export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
      * `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.
+     * `total` is a total mid-table, such as a subtotal the rows above add up
+     * to: its cells at weight 600 under a 2 px rule, as a
+     * `TableFooter` total is; name it with a row header and keep it in the
+     * body. `default` is a row of its own.
      */
     variant?: TableRowVariant;
     /**
@@ -40,7 +43,10 @@ export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAtt
      * `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.
+     * `total` is a total mid-table, such as a subtotal the rows above add up
+     * to: its cells at weight 600 under a 2 px rule, as a
+     * `TableFooter` total is; name it with a row header and keep it in the
+     * body. `default` is a row of its own.
      */
     variant?: TableRowVariant;
     /**

package/dist/components/table/TableRow.js

@@ -25,5 +25,5 @@ export const TableRow = forwardRef(function TableRow({ className, onClick, press
             forwarding.current = false;
         }
     };
-    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', pressable && 'sw-table-row-press', className), onClick: pressable || onClick ? press : undefined, ...rest }));
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', variant === 'total' && 'sw-table-row-total', struck && 'sw-table-row-struck', pressable && 'sw-table-row-press', className), onClick: pressable || onClick ? press : undefined, ...rest }));
 });

package/dist/components/table/table-max-height.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+import type { TableStickyHeader } from './table-layout.js';
+/**
+ * A table's bounded height, counted in rows: the table's region is as tall
+ * as `rows` single-line body rows plus its header row and, when it has one,
+ * its footer row, and the rest of the rows scroll inside the region. Rows
+ * taller than one line show fewer at a time.
+ */
+export type TableMaxHeight = {
+    rows: number;
+};
+/**
+ * A bounded table pins its header to its own region (`stickyHeader` true,
+ * the default); `'page'` and `false` contradict that and throw, as do a
+ * value that is not `{ rows }` and a row count that is not a whole number
+ * from 1.
+ */
+export declare function assertTableMaxHeight(maxHeight: TableMaxHeight | undefined, stickyHeader: TableStickyHeader): void;
+/** The row count the generated `sw-table-bounded` height reads. */
+export declare function tableMaxHeightStyle(maxHeight: TableMaxHeight | undefined): CSSProperties | undefined;

package/dist/components/table/table-max-height.js

@@ -0,0 +1,23 @@
+/**
+ * A bounded table pins its header to its own region (`stickyHeader` true,
+ * the default); `'page'` and `false` contradict that and throw, as do a
+ * value that is not `{ rows }` and a row count that is not a whole number
+ * from 1.
+ */
+export function assertTableMaxHeight(maxHeight, stickyHeader) {
+    if (maxHeight === undefined)
+        return;
+    if (typeof maxHeight !== 'object' || maxHeight === null)
+        throw new RangeError(`Table maxHeight must be a row count, { rows }: ${String(maxHeight)}`);
+    const rows = maxHeight.rows;
+    if (typeof rows !== 'number' || !Number.isInteger(rows) || rows < 1)
+        throw new RangeError(`Table maxHeight rows must be a whole number from 1: ${String(rows)}`);
+    if (stickyHeader !== true)
+        throw new RangeError(`Table maxHeight pins the header to the table's own region; stickyHeader ${String(stickyHeader)} cannot be used with it`);
+}
+/** The row count the generated `sw-table-bounded` height reads. */
+export function tableMaxHeightStyle(maxHeight) {
+    if (maxHeight === undefined)
+        return undefined;
+    return { '--sw-table-max-rows': maxHeight.rows };
+}

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

@@ -1,14 +1,16 @@
 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 & {
+import { type BlockScrollOverflow, type ScrollOverflow } from '../scroll-overflow.js';
+/** A box's overflow on both axes, and whether it has been measured yet. */
+export type MeasuredScrollOverflow = ScrollOverflow & BlockScrollOverflow & {
     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 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.
+ * Follows which edges of a scroll box have more content past them, the
+ * inline start and end and the top and bottom: on mount, on every scroll,
+ * and whenever the box or its content changes 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 inline edge set fits its content's width. A box whose height
+ * follows its content never reports a block edge.
  */
 export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): MeasuredScrollOverflow;

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

@@ -1,16 +1,31 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { noScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
+import { blockScrollOverflow, noBlockScrollOverflow, noScrollOverflow, sameBlockScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
 const unmeasured = {
     ...noScrollOverflow,
+    ...noBlockScrollOverflow,
     measured: false,
 };
+function measureBox(box) {
+    return {
+        ...scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth),
+        ...blockScrollOverflow(box.scrollTop, box.scrollHeight, box.clientHeight),
+        measured: true,
+    };
+}
+function sameMeasure(current, next) {
+    return (current.measured &&
+        sameScrollOverflow(current, next) &&
+        sameBlockScrollOverflow(current, next));
+}
 /**
- * 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 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.
+ * Follows which edges of a scroll box have more content past them, the
+ * inline start and end and the top and bottom: on mount, on every scroll,
+ * and whenever the box or its content changes 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 inline edge set fits its content's width. A box whose height
+ * follows its content never reports a block edge.
  */
 export function useScrollOverflow(ref) {
     const [overflow, setOverflow] = useState(unmeasured);
@@ -25,10 +40,8 @@ export function useScrollOverflow(ref) {
         function measure() {
             if (!box)
                 return;
-            const next = scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth);
-            setOverflow((current) => current.measured && sameScrollOverflow(current, next)
-                ? current
-                : { ...next, measured: true });
+            const next = measureBox(box);
+            setOverflow((current) => (sameMeasure(current, next) ? current : next));
         }
         measure();
         box.addEventListener('scroll', measure, { passive: true });

package/dist/css/chevron.d.ts

@@ -1,5 +1,8 @@
 /**
- * The stroked chevron Accordion and Select share: two muted sides of a
- * `space-2` square, turned by each surface to point where it needs.
+ * A stroked chevron in `color`: two sides of a `space-2` square (its
+ * bottom and right borders, so forced colours keep it), turned by each
+ * surface to point where it needs.
  */
-export declare const chevronStroke = "border-bottom: 2px solid var(--sw-color-muted);\n  border-right: 2px solid var(--sw-color-muted);\n  box-sizing: border-box;\n  height: var(--sw-space-2);\n  width: var(--sw-space-2);";
+export declare function chevronStrokeIn(color: string): string;
+/** The muted chevron Accordion, Select and the menus share. */
+export declare const chevronStroke: string;

package/dist/css/chevron.js

@@ -1,9 +1,14 @@
 /**
- * The stroked chevron Accordion and Select share: two muted sides of a
- * `space-2` square, turned by each surface to point where it needs.
+ * A stroked chevron in `color`: two sides of a `space-2` square (its
+ * bottom and right borders, so forced colours keep it), turned by each
+ * surface to point where it needs.
  */
-export const chevronStroke = `border-bottom: 2px solid var(--sw-color-muted);
-  border-right: 2px solid var(--sw-color-muted);
+export function chevronStrokeIn(color) {
+    return `border-bottom: 2px solid ${color};
+  border-right: 2px solid ${color};
   box-sizing: border-box;
   height: var(--sw-space-2);
   width: var(--sw-space-2);`;
+}
+/** The muted chevron Accordion, Select and the menus share. */
+export const chevronStroke = chevronStrokeIn('var(--sw-color-muted)');

package/dist/css/css-components.js

@@ -4,6 +4,8 @@ import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssChartClasses } from './css-chart.js';
+import { cssDataBarClasses } from './css-data-bar.js';
+import { cssPaginationClasses } from './css-pagination.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
 import { cssChromeClasses } from './css-chrome.js';
@@ -137,6 +139,10 @@ ${cssCalendarButtonClasses()}
 
 ${cssChartClasses()}
 
+${cssDataBarClasses()}
+
+${cssPaginationClasses()}
+
 ${cssChromeClasses()}
 
 ${cssSectionNavClasses()}

package/dist/css/css-data-bar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What a range bar's fill means: the start or a carried figure (`neutral`),
+ * money in (`success`), money out (`muted`, never danger: an outflow is not
+ * an error), a subtotal (`strong`) and what was counted or recorded
+ * (`accent`).
+ */
+export declare const dataBarTones: readonly ["neutral", "success", "muted", "strong", "accent"];
+export type DataBarTone = (typeof dataBarTones)[number];
+export declare const dataBarToneMixes: Record<DataBarTone, {
+    color: 'muted' | 'success' | 'text' | 'accent';
+    share: number;
+}>;
+/** A tone's fill: its colour, mixed into the surface by its share. */
+export declare function dataBarToneFill(tone: DataBarTone): string;
+export declare function cssDataBarClasses(): string;
+export declare function dataBarClassCatalog(): string[];