@scalewing/react 1.37.0 → 1.39.0

package/dist/components/ColumnChart.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { columnChartModes, } from '../column-chart-bars.js';
+import { assertColumnChartInput, } from '../column-chart-input.js';
+import { columnChartLayout } from '../column-chart-layout.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { ChartCalloutList } from './column-chart/ChartCalloutList.js';
+import { ColumnChartDrawing } from './column-chart/ColumnChartDrawing.js';
+export { columnChartModes };
+const noCallouts = [];
+/**
+ * Columns for each category (a week, a month), stacked or grouped by
+ * series, with an optional line on its own right-hand scale whose zero
+ * and grid lines are level with the columns', the current period boxed
+ * and callouts pinned above their columns. It fills its container's width
+ * and is laid out for it: a narrow chart labels fewer categories and lists
+ * its callouts under the plot, never scrolling sideways. The drawing is
+ * hidden from assistive technology; a visually hidden table named by
+ * `label` carries every figure, and the callouts stay a list. Put it on
+ * the surface (a `Card`) with a `ChartLegend` above it naming each series
+ * (`bar` in its tone), the line (`line`, `accent`) and the box (`box`,
+ * `accent`). Input it cannot draw throws a `RangeError`.
+ */
+export const ColumnChart = forwardRef(function ColumnChart({ callouts = noCallouts, categories, className, formatTick, formatValue = formatBarChartValue, highlight, label, line, mode = 'stacked', series, ...rest }, ref) {
+    assertColumnChartInput({
+        label,
+        categories,
+        series,
+        mode,
+        line,
+        highlight,
+        callouts,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastLineValue = line?.values.at(-1);
+    const layout = columnChartLayout({
+        width,
+        categories,
+        series: series.map((s) => s.values),
+        mode,
+        line: line
+            ? {
+                values: line.values,
+                endLabel: line.endLabel === false || lastLineValue === undefined
+                    ? null
+                    : formatValue(lastLineValue),
+            }
+            : null,
+        highlight: highlight ?? null,
+        callouts,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(ColumnChartDrawing, { calloutTones: callouts.map((callout) => callout.tone), layout: layout, tones: series.map((s) => s.tone) }), _jsx(ChartTable, { caption: label, columns: [
+                    ...series.map((s) => s.label),
+                    ...(line ? [line.label] : []),
+                ], rows: categories.map((category, index) => ({
+                    key: `${category}-${index}`,
+                    header: category,
+                    cells: [
+                        ...series.map((s) => formatValue(s.values[index])),
+                        ...(line ? [formatValue(line.values[index])] : []),
+                    ],
+                    current: index === highlight,
+                })) }), _jsx(ChartCalloutList, { callouts: callouts, visible: layout.compact })] }));
+});

package/dist/components/DataBar.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes } from 'react';
+import { type DataBarTone, dataBarTones } from '../css/css-data-bar.js';
+export type { DataBarTone };
+export { dataBarTones };
+export type DataBarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-hidden'> & {
+    /** One end of the range, in the domain's units. */
+    from: number;
+    /** The other end; the bar runs between the two whichever is larger. */
+    to: number;
+    /** The domain's least value, at the track's inline start. */
+    min: number;
+    /** The domain's greatest value, at the track's inline end. */
+    max: number;
+    /**
+     * What the bar means (default `neutral`): `success` for money in,
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
+     */
+    tone?: DataBarTone;
+};
+/**
+ * A horizontal range bar for a table cell or a list row: a bar from `from`
+ * to `to` on a track whose domain runs from `min` to `max`, such as where a
+ * statement's line leaves the running total, or a day's difference on a
+ * domain from below zero to above it, which draws a zero line. It is
+ * decorative (`aria-hidden`): the figure is the cell's own text, so keep
+ * the value beside it. Values past the domain are clamped to it;
+ * non-finite numbers, a `min` not under `max` or an unknown tone throw a
+ * `RangeError`.
+ */
+export declare const DataBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children" | "aria-hidden"> & {
+    /** One end of the range, in the domain's units. */
+    from: number;
+    /** The other end; the bar runs between the two whichever is larger. */
+    to: number;
+    /** The domain's least value, at the track's inline start. */
+    min: number;
+    /** The domain's greatest value, at the track's inline end. */
+    max: number;
+    /**
+     * What the bar means (default `neutral`): `success` for money in,
+     * `muted` for money out (an outflow is not an error, so it is never
+     * danger), `strong` for a subtotal, `accent` for a counted or recorded
+     * figure and `danger` for a shortage, never for cash leaving.
+     */
+    tone?: DataBarTone;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/DataBar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { dataBarTones } from '../css/css-data-bar.js';
+import { dataBarGeometry } from '../data-bar-geometry.js';
+export { dataBarTones };
+/**
+ * A horizontal range bar for a table cell or a list row: a bar from `from`
+ * to `to` on a track whose domain runs from `min` to `max`, such as where a
+ * statement's line leaves the running total, or a day's difference on a
+ * domain from below zero to above it, which draws a zero line. It is
+ * decorative (`aria-hidden`): the figure is the cell's own text, so keep
+ * the value beside it. Values past the domain are clamped to it;
+ * non-finite numbers, a `min` not under `max` or an unknown tone throw a
+ * `RangeError`.
+ */
+export const DataBar = forwardRef(function DataBar({ className, from, max, min, style, to, tone = 'neutral', ...rest }, ref) {
+    if (!dataBarTones.includes(tone))
+        throw new RangeError(`DataBar tone must be one of ${dataBarTones.join(', ')}; received ${String(tone)}`);
+    const { start, size, zero, zeroEnd } = dataBarGeometry(from, to, min, max);
+    return (_jsx("span", { ref: ref, className: cx('sw-data-bar', `sw-data-bar-${tone}`, zero !== null && 'sw-data-bar-diverging', zeroEnd !== null && `sw-data-bar-zero-${zeroEnd}`, className), style: {
+            ...style,
+            ...(zero === null ? {} : { '--sw-data-bar-zero': zero }),
+        }, ...rest, "aria-hidden": "true", children: _jsx("span", { className: "sw-data-bar-fill", style: {
+                '--sw-data-bar-start': start,
+                '--sw-data-bar-size': size,
+            } }) }));
+});

package/dist/components/LineChart.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes } from 'react';
+import { type ChartStrokeTone } from '../css/chart-tones.js';
+import { type LineChartMarker, type LineChartPeriod, type LineChartPoint } from '../line-chart-input.js';
+import { type LineChartCurve, lineChartCurves } from '../line-chart-path.js';
+export type { LineChartCurve, LineChartMarker, LineChartPeriod, LineChartPoint, };
+export { lineChartCurves };
+export type LineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+};
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export declare const LineChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Names the chart: the caption of the table that carries its figures. */
+    label: string;
+    /** Heads the table's value column; defaults to `label`. */
+    valueLabel?: string;
+    /** The values by date (`YYYY-MM-DD`), in date order. */
+    points: readonly LineChartPoint[];
+    /**
+     * `linear` (the default) joins each point to the next; `step` holds a
+     * value until the next date, as a balance that changes on a day does.
+     */
+    curve?: LineChartCurve;
+    /** Fills the area between the line and zero with a tint of its tone. */
+    area?: boolean;
+    /** The line's stroke tone (default `accent`). */
+    tone?: ChartStrokeTone;
+    /** Downward triangles on the line at some of its dates, with words. */
+    markers?: readonly LineChartMarker[];
+    /** Heads the table's column of marker words; required with markers. */
+    markersLabel?: string;
+    /** The dates labelled on the time axis; the first and last by default. */
+    ticks?: readonly string[];
+    /** A period to box, such as the current week. */
+    highlight?: LineChartPeriod;
+    /** Writes the last value beside the plot's end (default `true`). */
+    endLabel?: boolean;
+    /** Writes each figure in the table and the last value. */
+    formatValue?: (value: number) => string;
+    /** Writes the value axis; defaults to `formatValue`. */
+    formatTick?: (value: number) => string;
+    /** Writes a date for the time axis and the table; the date itself by default. */
+    formatDate?: (date: string) => string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/LineChart.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBarChartValue } from '@scalewing/tokens';
+import { forwardRef, useImperativeHandle, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { assertLineChartInput, lineChartDay, } from '../line-chart-input.js';
+import { lineChartLayout } from '../line-chart-layout.js';
+import { lineChartRows } from '../line-chart-table.js';
+import { lineChartCurves } from '../line-chart-path.js';
+import { ChartTable } from './chart/ChartTable.js';
+import { useChartWidth } from './chart/use-chart-width.js';
+import { LineChartDrawing } from './line-chart/LineChartDrawing.js';
+export { lineChartCurves };
+const none = [];
+const sameDate = (date) => date;
+/**
+ * A value over time: a line through its points by date, straight or in
+ * steps, optionally over a tinted area, with markers on chosen dates, a
+ * boxed period and its last value beside the plot. It fills its
+ * container's width and is laid out for it, labelling fewer dates when
+ * they would meet, never scrolling sideways. The drawing is hidden from
+ * assistive technology; a visually hidden table named by `label` carries
+ * every date, value and marker. Pair it with a `ChartLegend` (`line` in its
+ * tone, `marker` in each marker's, `box` in `accent`), on the surface.
+ * Input it cannot draw throws a `RangeError`.
+ */
+export const LineChart = forwardRef(function LineChart({ area = false, className, curve = 'linear', endLabel = true, formatDate = sameDate, formatTick, formatValue = formatBarChartValue, highlight, label, markers = none, markersLabel, points, ticks, tone = 'accent', valueLabel, ...rest }, ref) {
+    assertLineChartInput({
+        label,
+        valueLabel,
+        points,
+        curve,
+        tone,
+        markers,
+        markersLabel,
+        ticks,
+        highlight,
+    });
+    const box = useRef(null);
+    useImperativeHandle(ref, () => box.current, []);
+    const width = useChartWidth(box);
+    const lastPoint = points.at(-1);
+    const tickDates = ticks ??
+        [...new Set([points[0]?.x, lastPoint?.x])].filter((date) => date !== undefined);
+    const layout = lineChartLayout({
+        width,
+        points: points.map((p) => ({ day: lineChartDay('x', p.x), y: p.y })),
+        curve,
+        area,
+        markers: markers.map((m) => ({
+            day: lineChartDay('x', m.x),
+            label: m.label,
+        })),
+        ticks: tickDates.map((date) => ({
+            day: lineChartDay('tick', date),
+            text: formatDate(date),
+        })),
+        highlight: highlight
+            ? {
+                from: lineChartDay('from', highlight.from),
+                to: lineChartDay('to', highlight.to),
+            }
+            : null,
+        endLabel: endLabel && lastPoint ? formatValue(lastPoint.y) : null,
+        formatTick: formatTick ?? formatValue,
+    });
+    return (_jsxs("div", { ref: box, className: cx('sw-chart', className), ...rest, children: [_jsx(LineChartDrawing, { layout: layout, markerTones: markers.map((m) => m.tone), tone: tone }), _jsx(ChartTable, { caption: label, columns: [
+                    valueLabel ?? label,
+                    ...(markers.length > 0 ? [markersLabel] : []),
+                ], rows: lineChartRows({
+                    formatDate,
+                    formatValue,
+                    highlight,
+                    markers,
+                    points,
+                }) })] }));
+});

package/dist/components/Pagination.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes } from 'react';
+import { type AccessibleName } from '../accessible-name.js';
+/** The steps' accessible names, in the product's words. */
+export type PaginationLabels = {
+    /** Names the step to the page before, such as "Previous page". */
+    previous: string;
+    /** Names the step to the page after, such as "Next page". */
+    next: string;
+};
+export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'aria-label' | 'aria-labelledby'> & AccessibleName & {
+    /** The page shown, from 1. */
+    page: number;
+    /** How many pages there are, from 1. */
+    pageCount: number;
+    /** Called with the page a step goes to; never past either end. */
+    onPageChange: (page: number) => void;
+    /**
+     * What the page shows, in the product's words, such as "1–25 of 130
+     * changes". It is announced politely when it changes.
+     */
+    rangeLabel: string;
+    labels: PaginationLabels;
+};
+/**
+ * Previous and next steps through a list shown a page at a time, beside
+ * the consumer's words for what the page shows, in a navigation landmark
+ * named by `aria-label` or `aria-labelledby`. Each step is an icon-only
+ * neutral Button named by `labels`. At either end its step looks disabled
+ * (`aria-disabled`) but stays a Tab stop, so focus is never dropped when
+ * the last page is reached, and a press there does nothing. Invalid pages
+ * or an empty step label (`labels.previous` or `labels.next`) throw a
+ * `RangeError`.
+ */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Pagination.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { assertPaginationLabels, assertPaginationPages, paginationStep, } from '../pagination-pages.js';
+import { Button } from './Button.js';
+/**
+ * Previous and next steps through a list shown a page at a time, beside
+ * the consumer's words for what the page shows, in a navigation landmark
+ * named by `aria-label` or `aria-labelledby`. Each step is an icon-only
+ * neutral Button named by `labels`. At either end its step looks disabled
+ * (`aria-disabled`) but stays a Tab stop, so focus is never dropped when
+ * the last page is reached, and a press there does nothing. Invalid pages
+ * or an empty step label (`labels.previous` or `labels.next`) throw a
+ * `RangeError`.
+ */
+export const Pagination = forwardRef(function Pagination({ className, labels, onPageChange, page, pageCount, rangeLabel, ...rest }, ref) {
+    assertPaginationPages(page, pageCount);
+    assertPaginationLabels(labels);
+    const step = (direction) => {
+        const target = paginationStep(page, pageCount, direction);
+        return (_jsx(Button, { "aria-disabled": target === null || undefined, "aria-label": labels[direction], className: "sw-pagination-step", disabledAppearance: "neutral", onPress: () => {
+                if (target !== null)
+                    onPageChange(target);
+            }, size: "sm", variant: "neutral", children: _jsx("span", { "aria-hidden": "true", className: `sw-pagination-glyph sw-pagination-glyph-${direction}` }) }));
+    };
+    return (_jsxs("nav", { ref: ref, className: cx('sw-pagination', className), ...rest, children: [_jsx("span", { "aria-atomic": "true", "aria-live": "polite", className: "sw-pagination-range", children: rangeLabel }), _jsxs("span", { className: "sw-pagination-steps", children: [step('previous'), step('next')] })] }));
+});

package/dist/components/ScrollRegion.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 type ScrollRegionProps = {
     children: ReactNode;
     className: string;
@@ -6,6 +6,8 @@ type ScrollRegionProps = {
     'aria-labelledby'?: string;
     /** Adds `sw-scroll-fits` once measured with content that fits its width. */
     markFits?: boolean;
+    /** Generated custom properties only, such as a bounded table's row count. */
+    style?: CSSProperties;
 };
 /**
  * Private wrapper that scrolls wide content inside its own box (see
@@ -14,9 +16,11 @@ type ScrollRegionProps = {
  * keyboard and is announced as one group. While content is scrolled out past
  * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
  * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
- * the table goes on. With `markFits`, a measured region whose content fits
- * its width carries `sw-scroll-fits`, so a table with a sticky footer can
- * stop being a scroll box and pin its header and footer to the page.
+ * the table goes on. A region of bounded height that scrolls its rows marks
+ * its top and bottom the same way (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`). With `markFits`, a measured region whose content
+ * fits its width carries `sw-scroll-fits`, so a table with a sticky footer
+ * can stop being a scroll box and pin its header and footer to the page.
  */
-export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits, }: ScrollRegionProps): import("react").JSX.Element;
+export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits, style, }: ScrollRegionProps): import("react").JSX.Element;
 export {};

package/dist/components/ScrollRegion.js

@@ -10,16 +10,18 @@ import { useScrollOverflow } from './use-scroll-overflow.js';
  * keyboard and is announced as one group. While content is scrolled out past
  * an inline edge, that edge draws a shade (`sw-scroll-more-start`,
  * `sw-scroll-more-end`), so a phone, whose scrollbars hide, still shows that
- * the table goes on. With `markFits`, a measured region whose content fits
- * its width carries `sw-scroll-fits`, so a table with a sticky footer can
- * stop being a scroll box and pin its header and footer to the page.
+ * the table goes on. A region of bounded height that scrolls its rows marks
+ * its top and bottom the same way (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`). With `markFits`, a measured region whose content
+ * fits its width carries `sw-scroll-fits`, so a table with a sticky footer
+ * can stop being a scroll box and pin its header and footer to the page.
  */
-export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits = false, }) {
+export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, markFits = false, style, }) {
     const ref = useRef(null);
     const overflow = useScrollOverflow(ref);
-    return (_jsx("div", { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cx(className, overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end', markFits &&
+    return (_jsx("div", { ref: ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cx(className, overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end', overflow.top && 'sw-scroll-more-top', overflow.bottom && 'sw-scroll-more-bottom', markFits &&
             overflow.measured &&
             !overflow.start &&
             !overflow.end &&
-            'sw-scroll-fits'), role: "group", tabIndex: 0, children: children }));
+            'sw-scroll-fits'), role: "group", style: style, tabIndex: 0, children: children }));
 }

package/dist/components/SectionNav.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type AccessibleName } from '../accessible-name.js';
 import { type Breakpoint } from '../css/breakpoints.js';
 import { type SectionNavAppearance } from '../css/css-section-nav-filled.js';
 export type { SectionNavAppearance };
@@ -29,14 +30,7 @@ export type SectionNavItem = {
      */
     countLabel?: string;
 };
-type SectionNavLabel = {
-    'aria-label': string;
-    'aria-labelledby'?: never;
-} | {
-    'aria-label'?: never;
-    'aria-labelledby': string;
-};
-export type SectionNavProps = SectionNavLabel & {
+export type SectionNavProps = AccessibleName & {
     items: readonly SectionNavItem[];
     /**
      * Called for a plain press on an item (the main button, no modifier key),

package/dist/components/SegmentedControl.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type AccessibleName } from '../accessible-name.js';
 export type SegmentedItem = {
     id: string;
     label: ReactNode;
@@ -11,13 +12,6 @@ export type SegmentedItem = {
      */
     icon?: ReactNode;
 };
-type SegmentedLabel = {
-    'aria-label': string;
-    'aria-labelledby'?: never;
-} | {
-    'aria-label'?: never;
-    'aria-labelledby': string;
-};
 /**
  * `compact` is the quiet chip track for a section switch; `filled` gives every
  * segment the same width and paints the selected one in the accent, for a
@@ -40,7 +34,7 @@ type SegmentedChange = {
     disabled: true;
     onChange?: (id: string) => void;
 };
-export type SegmentedControlProps = SegmentedLabel & SegmentedChange & {
+export type SegmentedControlProps = AccessibleName & SegmentedChange & {
     items: readonly SegmentedItem[];
     value: string;
     variant?: SegmentedControlVariant;

package/dist/components/Table.d.ts

@@ -1,10 +1,11 @@
 import { type HTMLAttributes } from 'react';
 import { type TableLayout, type TableStickyHeader, type TableVerticalAlign } from './table/table-layout.js';
+import { type TableMaxHeight } from './table/table-max-height.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, TableStickyHeader, TableVerticalAlign };
+export type { TableLayout, TableMaxHeight, TableStickyHeader, TableVerticalAlign, };
 export type TableDensity = 'comfortable' | 'compact';
 export type TableProps = HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
@@ -40,8 +41,30 @@ export type TableProps = HTMLAttributes<HTMLTableElement> & {
      * after a row's first, for a ledger read across as well as down.
      */
     columnRules?: boolean;
+    /**
+     * Bounds the table's height, counted in rows (`{ rows: 12 }`): its region
+     * is as tall as that many single-line body rows plus the header row (a
+     * sorting header as tall as its buttons, the touch target on a coarse
+     * pointer) and, when there is one, the footer row, and the rest of the
+     * rows scroll inside it. Rows of two lines or with controls, a second
+     * header or footer row and a horizontal scrollbar that takes room show
+     * fewer rows. The header pins to the region's top and a sticky
+     * `TableFooter` total to its bottom, so a total over every row stays in
+     * view. The region is a keyboard stop named after the table, its focus
+     * ring drawn over the pinned rows too, and an edge with rows scrolled
+     * out past it draws a shade (cast from the pinned header's last row or
+     * the total when there is one). Printed, every row shows. It keeps its
+     * header pinned to the region, so `stickyHeader` `'page'` or `false`
+     * throw with it, as do a value that is not `{ rows }` and a row count
+     * that is not a whole number from 1. Without it (the default) the table
+     * is as tall as its rows.
+     */
+    maxHeight?: TableMaxHeight;
 };
-/** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
+/**
+ * A wide table scrolls inside its own `ScrollRegion`, named after the
+ * table; a bounded one (`maxHeight`) scrolls its rows in it too.
+ */
 export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     /**
@@ -76,6 +99,25 @@ export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttrib
      * after a row's first, for a ledger read across as well as down.
      */
     columnRules?: boolean;
+    /**
+     * Bounds the table's height, counted in rows (`{ rows: 12 }`): its region
+     * is as tall as that many single-line body rows plus the header row (a
+     * sorting header as tall as its buttons, the touch target on a coarse
+     * pointer) and, when there is one, the footer row, and the rest of the
+     * rows scroll inside it. Rows of two lines or with controls, a second
+     * header or footer row and a horizontal scrollbar that takes room show
+     * fewer rows. The header pins to the region's top and a sticky
+     * `TableFooter` total to its bottom, so a total over every row stays in
+     * view. The region is a keyboard stop named after the table, its focus
+     * ring drawn over the pinned rows too, and an edge with rows scrolled
+     * out past it draws a shade (cast from the pinned header's last row or
+     * the total when there is one). Printed, every row shows. It keeps its
+     * header pinned to the region, so `stickyHeader` `'page'` or `false`
+     * throw with it, as do a value that is not `{ rows }` and a row count
+     * that is not a whole number from 1. Without it (the default) the table
+     * is as tall as its rows.
+     */
+    maxHeight?: TableMaxHeight;
 } & import("react").RefAttributes<HTMLTableElement>>;
 export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
@@ -87,7 +129,8 @@ export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement> & {
      * 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
+     * table scrolls sideways in it or is bounded (`Table maxHeight`), where
+     * it stays at the region's bottom. A sticky ActionBar covers a pinned
      * footer, and so does a Dialog's pinned footer, so do not pair them.
      */
     sticky?: boolean;
@@ -103,7 +146,8 @@ export declare const TableFooter: import("react").ForwardRefExoticComponent<HTML
      * 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
+     * table scrolls sideways in it or is bounded (`Table maxHeight`), where
+     * it stays at the region's bottom. A sticky ActionBar covers a pinned
      * footer, and so does a Dialog's pinned footer, so do not pair them.
      */
     sticky?: boolean;

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/chart/ChartTable.d.ts

@@ -0,0 +1,16 @@
+import { type ChartTableRow } from '../../chart-table-rows.js';
+export type ChartTableProps = {
+    caption: string;
+    /** The columns' headers, after the rows' own header column. */
+    columns: readonly string[];
+    rows: readonly ChartTableRow[];
+};
+/**
+ * Every figure a chart draws, as a table kept for assistive technology and
+ * not drawn: it sits in a `sw-sr-only` box, because a table is never
+ * narrower than its contents and would widen the page. Its caption is the
+ * chart's name, with a header per column and per row, and the boxed
+ * period's row marked current. The drawing itself is hidden, so this is
+ * what a screen reader reads.
+ */
+export declare function ChartTable({ caption, columns, rows }: ChartTableProps): import("react").JSX.Element;