@scalewing/react 1.37.0 → 1.39.0

package/dist/components/chart/ChartTable.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 function ChartTable({ caption, columns, rows }) {
+    return (_jsx("div", { className: "sw-sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: caption }), columns.length > 0 ? (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), columns.map((column, index) => (_jsx("th", { scope: "col", children: column }, `${column}-${index}`)))] }) })) : null, _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { "aria-current": row.current ? 'true' : undefined, children: [_jsx("th", { scope: "row", children: row.header }), row.cells.map((cell, index) => (_jsx("td", { children: cell }, index)))] }, row.key))) })] }) }));
+}

package/dist/components/chart/ChartValueAxis.d.ts

@@ -0,0 +1,14 @@
+import { type ChartPlot, type ChartTick } from '../../chart-axis.js';
+export type ChartValueAxisProps = {
+    plot: ChartPlot;
+    ticks: readonly ChartTick[];
+    /** The side its words sit on: the plot's start, or its end for a line's own scale. */
+    side: 'start' | 'end';
+    /** Draws the grid lines across the plot (the start axis does). */
+    grid?: boolean;
+};
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export declare function ChartValueAxis({ grid, plot, side, ticks, }: ChartValueAxisProps): import("react").JSX.Element;

package/dist/components/chart/ChartValueAxis.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartGap } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+/**
+ * A value axis inside a chart's SVG: a grid line at each tick across the
+ * plot, the zero line set apart, and each tick's words beside the plot.
+ */
+export function ChartValueAxis({ grid = false, plot, side, ticks, }) {
+    const x = side === 'start' ? plot.left - chartGap : plot.right + chartGap;
+    return (_jsx("g", { children: ticks.map((tick) => (_jsxs("g", { children: [grid ? (_jsx("line", { className: tick.value === 0 ? 'sw-chart-zero' : 'sw-chart-grid', x1: plot.left, x2: plot.right, y1: tick.y, y2: tick.y })) : null, _jsx("text", { className: cx('sw-chart-tick', side === 'end' && 'sw-chart-tick-line'), dominantBaseline: "central", textAnchor: side === 'start' ? 'end' : 'start', x: x, y: tick.y, children: tick.label })] }, tick.value))) }));
+}

package/dist/components/chart/use-chart-width.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export declare function useChartWidth(ref: RefObject<HTMLElement | null>): number;

package/dist/components/chart/use-chart-width.js

@@ -0,0 +1,34 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+import { chartFallbackWidth } from '../../chart-metrics.js';
+/**
+ * Follows the width a chart is given, so its drawing is laid out in its
+ * own pixels: on mount, before the first paint, and whenever its box
+ * changes size. On the server it reports `chartFallbackWidth`, and a browser with
+ * no ResizeObserver measures on window resizes instead.
+ */
+export function useChartWidth(ref) {
+    const [width, setWidth] = useState(chartFallbackWidth);
+    // Before paint, so a phone never shows the wide layout first.
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const next = Math.round(box.getBoundingClientRect().width);
+            if (next > 0)
+                setWidth(next);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}

package/dist/components/column-chart/ChartCalloutList.d.ts

@@ -0,0 +1,16 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+export type ChartCalloutListProps = {
+    callouts: readonly {
+        text: string;
+        tone?: CategoricalColor;
+    }[];
+    /** Shows the list under the plot; otherwise it is kept for assistive technology only. */
+    visible: boolean;
+};
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export declare function ChartCalloutList({ callouts, visible }: ChartCalloutListProps): import("react").JSX.Element | null;

package/dist/components/column-chart/ChartCalloutList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+/**
+ * A chart's callouts as a list of their words, each after a dot in its
+ * hue: shown under the plot on a compact chart, where they no longer fit
+ * above it, and otherwise kept for assistive technology (`sw-sr-only`)
+ * while the drawing pins them above their columns.
+ */
+export function ChartCalloutList({ callouts, visible }) {
+    if (callouts.length === 0)
+        return null;
+    return (_jsx("ul", { className: cx('sw-chart-callouts', !visible && 'sw-sr-only'), role: "list", children: callouts.map((callout, index) => (_jsxs("li", { className: cx('sw-chart-callout', callout.tone && `sw-chart-tone-${callout.tone}`), children: [_jsx("span", { "aria-hidden": "true", className: "sw-chart-callout-dot" }), callout.text] }, `${callout.text}-${index}`))) }));
+}

package/dist/components/column-chart/ColumnChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+import { type ColumnChartLayout } from '../../column-chart-layout.js';
+export type ColumnChartDrawingProps = {
+    layout: ColumnChartLayout;
+    /** Each series' hue, in series order. */
+    tones: readonly CategoricalColor[];
+    /** Each callout's hue, in callout order. */
+    calloutTones: readonly (CategoricalColor | undefined)[];
+};
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export declare function ColumnChartDrawing({ calloutTones, layout, tones, }: ColumnChartDrawingProps): import("react").JSX.Element;

package/dist/components/column-chart/ColumnChartDrawing.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartColumnRadius, chartDotRadius, } from '../../chart-metrics.js';
+import { cx } from '../../class-names.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+function toneClass(tone) {
+    return tone ? `sw-chart-tone-${tone}` : undefined;
+}
+/**
+ * A column chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axes, the boxed
+ * period, the columns, the line and its last value, the category labels
+ * and the callouts with their leaders. It is laid out in its own pixels,
+ * left to right whatever the writing direction, as a time axis reads.
+ */
+export function ColumnChartDrawing({ calloutTones, layout, tones, }) {
+    const { plot } = layout;
+    return (_jsxs("svg", { "aria-hidden": "true", className: "sw-chart-svg", direction: "ltr", focusable: "false", height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, children: [_jsx(ChartValueAxis, { grid: true, plot: plot, side: "start", ticks: layout.ticks }), layout.highlight ? (_jsx("rect", { className: "sw-chart-highlight sw-chart-tone-accent", height: layout.highlight.height, rx: chartBoxRadius, width: layout.highlight.width, x: layout.highlight.x, y: layout.highlight.y })) : null, layout.columns.map((column) => (_jsx("rect", { className: cx('sw-chart-column', toneClass(tones[column.series])), height: column.height, rx: Math.min(chartColumnRadius, column.width / 2, column.height / 2), width: column.width, x: column.x, y: column.y }, `${column.series}-${column.category}`))), layout.line ? (_jsxs("g", { className: "sw-chart-tone-accent", children: [_jsx("polyline", { className: "sw-chart-line", points: layout.line.points.map((p) => `${p.x},${p.y}`).join(' ') }), _jsx(ChartValueAxis, { plot: plot, side: "end", ticks: layout.lineTicks }), layout.line.end || layout.line.points.length === 1 ? (_jsx("circle", { className: "sw-chart-dot", cx: layout.line.points.at(-1).x, cy: layout.line.points.at(-1).y, r: chartDotRadius })) : null, layout.line.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.line.end.x, y: layout.line.end.y, children: layout.line.end.text })) : null] })) : null, layout.categoryLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.index))), layout.callouts.map((callout) => (_jsxs("g", { className: toneClass(calloutTones[callout.order]), children: [_jsx("line", { className: "sw-chart-leader", x1: callout.x, x2: callout.x, y1: callout.leaderStart, y2: callout.leaderEnd }), _jsx("text", { className: "sw-chart-callout-text", textAnchor: callout.anchor, x: callout.textX, y: callout.textY, children: callout.text })] }, callout.order)))] }));
+}

package/dist/components/line-chart/LineChartDrawing.d.ts

@@ -0,0 +1,17 @@
+import { type ChartStrokeTone } from '../../css/chart-tones.js';
+import { type LineChartLayout } from '../../line-chart-layout.js';
+export type LineChartDrawingProps = {
+    layout: LineChartLayout;
+    tone: ChartStrokeTone;
+    /** Each marker's tone, in marker order. */
+    markerTones: readonly ChartStrokeTone[];
+};
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export declare function LineChartDrawing({ layout, markerTones, tone, }: LineChartDrawingProps): import("react").JSX.Element;

package/dist/components/line-chart/LineChartDrawing.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBoxRadius, chartDotRadius } from '../../chart-metrics.js';
+import { svgPoints } from '../../line-chart-path.js';
+import { ChartValueAxis } from '../chart/ChartValueAxis.js';
+/**
+ * A line chart's picture, hidden from assistive technology (the table
+ * beside it carries every figure): the grid and value axis, the boxed
+ * period, the area and line in the line's tone with a dot and words at its
+ * last value, the date labels, and each marker's triangle and words in its
+ * own tone. It is laid out in its own pixels, left to right whatever the
+ * writing direction, as a time axis reads.
+ */
+export function LineChartDrawing({ layout, markerTones, tone, }) {
+    const { last, plot } = layout;
+    return (_jsxs("svg", { "aria-hidden": "true", className: "sw-chart-svg", direction: "ltr", focusable: "false", height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, children: [_jsx(ChartValueAxis, { grid: true, plot: plot, side: "start", ticks: layout.ticks }), layout.highlight ? (_jsx("rect", { className: "sw-chart-highlight sw-chart-tone-accent", height: layout.highlight.height, rx: chartBoxRadius, width: layout.highlight.width, x: layout.highlight.x, y: layout.highlight.y })) : null, _jsxs("g", { className: `sw-chart-tone-${tone}`, children: [layout.area.length > 0 ? (_jsx("polygon", { className: "sw-chart-area", points: svgPoints(layout.area) })) : null, _jsx("polyline", { className: "sw-chart-line", points: svgPoints(layout.path) }), last && (layout.end || layout.path.length === 1) ? (_jsx("circle", { className: "sw-chart-dot", cx: last.x, cy: last.y, r: chartDotRadius })) : null, layout.end ? (_jsx("text", { className: "sw-chart-end-label", dominantBaseline: "central", x: layout.end.x, y: layout.end.y, children: layout.end.text })) : null] }), layout.markers.map((marker) => (_jsxs("g", { className: `sw-chart-tone-${markerTones[marker.order]}`, children: [_jsx("polygon", { className: "sw-chart-marker", points: marker.triangle }), marker.labelShown ? (_jsx("text", { className: "sw-chart-marker-label", textAnchor: "middle", x: marker.labelX, y: marker.labelY, children: marker.label })) : null] }, marker.order))), layout.dateLabels.map((label) => (_jsx("text", { className: "sw-chart-category", textAnchor: "middle", x: label.x, y: label.y, children: label.text }, label.day)))] }));
+}

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

@@ -0,0 +1,10 @@
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export declare const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export declare const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export declare const chartBoxDash = "3 3";
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export declare const chartLeaderDash = "2 2";
+/** The gap between grouped columns side by side, at most. */
+export declare const chartColumnGap = 2;

package/dist/css/chart-marks.js

@@ -0,0 +1,15 @@
+/*
+ * The sizes every chart's marks share, so a legend swatch is drawn at the
+ * size of the mark it names. They are geometry, not theme values: the
+ * colours come from `chart-tones.ts` and the type from the caption variant.
+ */
+/** A line's thickness (a chart's line and a legend's line swatch), in px. */
+export const chartLineWidth = 2;
+/** A hairline: a grid line, a leader, the boxed period's dashed edge. */
+export const chartHairline = 1;
+/** The boxed period's dashes: 3 px drawn, 3 px left out. */
+export const chartBoxDash = '3 3';
+/** A callout's leader: finer dashes, 2 px drawn, 2 px left out. */
+export const chartLeaderDash = '2 2';
+/** The gap between grouped columns side by side, at most. */
+export const chartColumnGap = chartLineWidth;

package/dist/css/chart-tones.d.ts

@@ -0,0 +1,68 @@
+import { type CategoricalColor } from '@scalewing/tokens';
+/** Where a mark's colour comes from: a semantic or a categorical colour. */
+export type ChartColorSource = {
+    semantic: 'accent' | 'success' | 'warning' | 'danger' | 'muted' | 'text';
+} | {
+    categorical: CategoricalColor;
+};
+/**
+ * A colour mixed into the surface or toward the text colour by a share of
+ * its own (1 is the colour unmixed).
+ */
+export type ChartColorMix = ChartColorSource & {
+    share: number;
+    into: 'surface' | 'text';
+};
+/**
+ * The statement tones a range bar's fill takes (see DataBar). `danger` is
+ * for a shortage, never for cash leaving: an outflow is `muted`.
+ */
+export declare const statementFillTones: readonly ["neutral", "success", "muted", "strong", "accent", "danger"];
+/**
+ * Every fill tone: the categorical colours (a chart's series), then the
+ * statement tones a range bar adds. `neutral` is in both and is one grey.
+ */
+export declare const chartFillTones: readonly ("danger" | "muted" | "accent" | "success" | CategoricalColor | "strong")[];
+export type ChartFillTone = CategoricalColor | (typeof statementFillTones)[number];
+/** The tones a line, a marker or the boxed period is drawn in. */
+export declare const chartStrokeTones: readonly ["accent", "success", "warning", "danger", "neutral"];
+export type ChartStrokeTone = (typeof chartStrokeTones)[number];
+/** Every tone a chart or a legend swatch can take. */
+export type ChartTone = ChartFillTone | ChartStrokeTone;
+export declare const chartTones: readonly ChartTone[];
+/**
+ * How much of a categorical colour a column's fill mixes into the surface:
+ * a lighter fill, so a line drawn over the columns stands apart, that
+ * keeps 1.5:1 on the surface in every palette and scheme.
+ */
+export declare const categoricalFillShare = 0.72;
+/**
+ * How much of the danger colour its fill mixes into the surface (a
+ * shortage's range bar, never cash leaving): a light red, at 1.5:1 or more
+ * on the surface in every palette and scheme, as every other fill.
+ */
+export declare const dangerFillShare = 0.4;
+/** Each fill tone's colour, mixed into the surface. */
+export declare const chartFillMixes: Record<ChartFillTone, ChartColorMix>;
+/** Each stroke tone's colour: a semantic colour, or muted for neutral. */
+export declare const chartStrokeColors: Record<ChartStrokeTone, ChartColorSource>;
+/**
+ * How much of a line's stroke the area under it takes, over transparency:
+ * a quiet tint behind the line, decorative (the line carries the values).
+ */
+export declare const chartAreaShare = 0.12;
+/** How much of a hue's colour its words keep, moved toward the text colour. */
+export declare const categoricalInkShare = 0.3;
+/** How much of a semantic colour its words keep, moved toward the text colour. */
+export declare const semanticInkShare = 0.5;
+/** The tones whose words are drawn beside a mark: a series' and a stroke's. */
+export declare const chartInkTones: readonly ["green", "blue", "orange", "purple", "teal", "rose", "accent", "success", "warning", "danger", "neutral"];
+export type ChartInkTone = (typeof chartInkTones)[number];
+/** The words beside a mark: its tone moved toward the text colour. */
+export declare const chartInkMixes: Record<ChartInkTone, ChartColorMix>;
+/** A mix as CSS: the colour alone when unmixed. */
+export declare function chartColorMix(mix: ChartColorMix): string;
+/** A fill tone's colour. */
+export declare function chartFill(tone: ChartFillTone): string;
+export declare function cssChartToneClasses(): string;
+export declare function chartToneClassCatalog(): string[];

package/dist/css/chart-tones.js

@@ -0,0 +1,130 @@
+import { categoricalColorKeys, categoricalHues, } from '@scalewing/tokens';
+import { isOneOf } from '../is-one-of.js';
+/** A source as its custom property. */
+function sourceProperty(source) {
+    return 'semantic' in source
+        ? `var(--sw-color-${source.semantic})`
+        : `var(--sw-categorical-${source.categorical})`;
+}
+/**
+ * The statement tones a range bar's fill takes (see DataBar). `danger` is
+ * for a shortage, never for cash leaving: an outflow is `muted`.
+ */
+export const statementFillTones = [
+    'neutral',
+    'success',
+    'muted',
+    'strong',
+    'accent',
+    'danger',
+];
+/**
+ * Every fill tone: the categorical colours (a chart's series), then the
+ * statement tones a range bar adds. `neutral` is in both and is one grey.
+ */
+export const chartFillTones = [
+    ...categoricalColorKeys,
+    ...statementFillTones.filter((tone) => tone !== 'neutral'),
+];
+/** The tones a line, a marker or the boxed period is drawn in. */
+export const chartStrokeTones = [
+    'accent',
+    'success',
+    'warning',
+    'danger',
+    'neutral',
+];
+export const chartTones = [
+    ...new Set([...chartFillTones, ...chartStrokeTones]),
+];
+/**
+ * How much of a categorical colour a column's fill mixes into the surface:
+ * a lighter fill, so a line drawn over the columns stands apart, that
+ * keeps 1.5:1 on the surface in every palette and scheme.
+ */
+export const categoricalFillShare = 0.72;
+/**
+ * How much of the danger colour its fill mixes into the surface (a
+ * shortage's range bar, never cash leaving): a light red, at 1.5:1 or more
+ * on the surface in every palette and scheme, as every other fill.
+ */
+export const dangerFillShare = 0.4;
+/** Each fill tone's colour, mixed into the surface. */
+export const chartFillMixes = {
+    ...Object.fromEntries(categoricalHues.map((hue) => [
+        hue,
+        { categorical: hue, share: categoricalFillShare, into: 'surface' },
+    ])),
+    neutral: { semantic: 'muted', share: 0.65, into: 'surface' },
+    success: { semantic: 'success', share: 0.55, into: 'surface' },
+    muted: { semantic: 'muted', share: 0.35, into: 'surface' },
+    strong: { semantic: 'text', share: 0.85, into: 'surface' },
+    accent: { semantic: 'accent', share: 1, into: 'surface' },
+    danger: { semantic: 'danger', share: dangerFillShare, into: 'surface' },
+};
+/** Each stroke tone's colour: a semantic colour, or muted for neutral. */
+export const chartStrokeColors = {
+    accent: { semantic: 'accent' },
+    success: { semantic: 'success' },
+    warning: { semantic: 'warning' },
+    danger: { semantic: 'danger' },
+    neutral: { semantic: 'muted' },
+};
+/**
+ * How much of a line's stroke the area under it takes, over transparency:
+ * a quiet tint behind the line, decorative (the line carries the values).
+ */
+export const chartAreaShare = 0.12;
+/** How much of a hue's colour its words keep, moved toward the text colour. */
+export const categoricalInkShare = 0.3;
+/** How much of a semantic colour its words keep, moved toward the text colour. */
+export const semanticInkShare = 0.5;
+/** The tones whose words are drawn beside a mark: a series' and a stroke's. */
+export const chartInkTones = [...categoricalHues, ...chartStrokeTones];
+/** The words beside a mark: its tone moved toward the text colour. */
+export const chartInkMixes = {
+    ...Object.fromEntries(categoricalHues.map((hue) => [
+        hue,
+        { categorical: hue, share: categoricalInkShare, into: 'text' },
+    ])),
+    accent: { semantic: 'accent', share: semanticInkShare, into: 'text' },
+    success: { semantic: 'success', share: semanticInkShare, into: 'text' },
+    warning: { semantic: 'warning', share: semanticInkShare, into: 'text' },
+    danger: { semantic: 'danger', share: semanticInkShare, into: 'text' },
+    neutral: { semantic: 'muted', share: 1, into: 'text' },
+};
+/** A mix as CSS: the colour alone when unmixed. */
+export function chartColorMix(mix) {
+    const color = sourceProperty(mix);
+    if (mix.share === 1)
+        return color;
+    return `color-mix(in srgb, ${color} ${Math.round(mix.share * 100)}%, var(--sw-color-${mix.into}))`;
+}
+/** A fill tone's colour. */
+export function chartFill(tone) {
+    return chartColorMix(chartFillMixes[tone]);
+}
+/*
+ * A tone class hands its roles to the marks inside it as custom
+ * properties, `--sw-chart-fill`, `--sw-chart-stroke` and `--sw-chart-ink`,
+ * so a legend swatch, a column, a line and a label each read the role it
+ * draws. A tone sets only the roles it has.
+ */
+function toneDeclarations(tone) {
+    const declarations = [];
+    if (isOneOf(chartFillTones, tone))
+        declarations.push(`--sw-chart-fill: ${chartFill(tone)};`);
+    if (isOneOf(chartStrokeTones, tone))
+        declarations.push(`--sw-chart-stroke: ${sourceProperty(chartStrokeColors[tone])};`);
+    if (isOneOf(chartInkTones, tone))
+        declarations.push(`--sw-chart-ink: ${chartColorMix(chartInkMixes[tone])};`);
+    return declarations.join(' ');
+}
+export function cssChartToneClasses() {
+    return chartTones
+        .map((tone) => `.sw-chart-tone-${tone} { ${toneDeclarations(tone)} }`)
+        .join('\n');
+}
+export function chartToneClassCatalog() {
+    return chartTones.map((tone) => `sw-chart-tone-${tone}`);
+}

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-chart.d.ts → css-bar-chart.d.ts}

@@ -5,5 +5,5 @@
  */
 export declare const barChartTones: readonly ["accent", "success", "warning", "danger"];
 export type BarChartTone = (typeof barChartTones)[number];
-export declare function cssChartClasses(): string;
-export declare function chartClassCatalog(): string[];
+export declare function cssBarChartClasses(): string;
+export declare function barChartClassCatalog(): string[];