@scalewing/react 1.37.0 → 1.38.0

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[];

package/dist/css/css-data-bar.js

@@ -0,0 +1,107 @@
+/**
+ * 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 const dataBarTones = [
+    'neutral',
+    'success',
+    'muted',
+    'strong',
+    'accent',
+];
+/*
+ * Each tone is a semantic colour, mixed into the surface where the board
+ * draws a lighter fill: the bar is decorative (the figure is the cell's
+ * text), so the mixes keep the tones apart from one another rather than
+ * meeting a text contrast: every tone at 1.5:1 or more on the surface, and
+ * the three greys (out, start, subtotal) 1.5:1 or more from the next one,
+ * in every palette and scheme (`data-bar.test.tsx`). `accent` is the
+ * accent itself.
+ */
+export const dataBarToneMixes = {
+    neutral: { color: 'muted', share: 0.65 },
+    success: { color: 'success', share: 0.55 },
+    muted: { color: 'muted', share: 0.35 },
+    strong: { color: 'text', share: 0.85 },
+    accent: { color: 'accent', share: 1 },
+};
+/** A tone's fill: its colour, mixed into the surface by its share. */
+export function dataBarToneFill(tone) {
+    const { color, share } = dataBarToneMixes[tone];
+    if (share === 1)
+        return `var(--sw-color-${color})`;
+    return `color-mix(in srgb, var(--sw-color-${color}) ${Math.round(share * 100)}%, var(--sw-color-surface))`;
+}
+function toneRules() {
+    return dataBarTones
+        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${dataBarToneFill(tone)}; }`)
+        .join('\n');
+}
+/*
+ * A range bar fills its container's width: a track with no fill of its own,
+ * a spacing step 4 tall, and the bar placed on it by two shares the
+ * component sets (`--sw-data-bar-start`, `--sw-data-bar-size`), with
+ * logical insets so a right-to-left table mirrors it. A diverging domain
+ * draws a hairline at zero (`--sw-data-bar-zero`) across the track, under
+ * the bar, and the bar's end at zero is square (`sw-data-bar-zero-start`
+ * or `-end`), so it meets the line as BarChart's diverging bars do.
+ * Forced colours draw the bar and the line in the system text colour;
+ * the figure beside it carries the meaning there, as always.
+ */
+export function cssDataBarClasses() {
+    return `.sw-data-bar {
+  display: block;
+  height: var(--sw-space-4);
+  min-width: var(--sw-space-6);
+  position: relative;
+  width: 100%;
+}
+
+.sw-data-bar-fill {
+  border-radius: calc(var(--sw-radius-sm) / 2);
+  inset-block: 0;
+  inset-inline-start: calc(var(--sw-data-bar-start, 0) * 100%);
+  position: absolute;
+  width: calc(var(--sw-data-bar-size, 0) * 100%);
+}
+
+${toneRules()}
+
+.sw-data-bar-diverging::before {
+  background: var(--sw-color-border);
+  content: '';
+  inset-block: calc(-1 * var(--sw-space-1));
+  inset-inline-start: calc(var(--sw-data-bar-zero, 0) * 100%);
+  /* Centred on zero, mirrored right to left. */
+  margin-inline-start: -0.5px;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-data-bar-zero-start > .sw-data-bar-fill {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.sw-data-bar-zero-end > .sw-data-bar-fill {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-data-bar > .sw-data-bar-fill,
+  .sw-data-bar-diverging::before { background: CanvasText; }
+}`;
+}
+export function dataBarClassCatalog() {
+    return [
+        'sw-data-bar',
+        'sw-data-bar-fill',
+        'sw-data-bar-diverging',
+        'sw-data-bar-zero-start',
+        'sw-data-bar-zero-end',
+        ...dataBarTones.map((tone) => `sw-data-bar-${tone}`),
+    ];
+}

package/dist/css/css-pagination.d.ts

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

package/dist/css/css-pagination.js

@@ -0,0 +1,63 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStrokeIn } from './chevron.js';
+import { iconButtonRules } from './css-icon-button.js';
+const caption = typographyVariants.caption;
+/*
+ * A pager: the consumer's range words at the inline start in the muted
+ * caption, the previous and next steps at the end, wrapping under the
+ * words on a narrow column. The steps are icon-only neutral Buttons,
+ * square at their size and the touch target on a coarse pointer
+ * (`iconButtonRules`).
+ *
+ * Their glyph is private control chrome: the shared stroked chevron
+ * (`chevron.ts`) in the button's colour, pointing toward the inline start
+ * for the previous page and the end for the next; right to left one flip
+ * of the turned chevron mirrors both. It is the chevron Accordion, Select
+ * and the menus draw, not DateField's month steps (an SVG at a larger
+ * size inside the calendar).
+ */
+export function cssPaginationClasses() {
+    return `.sw-pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-pagination-range {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-pagination-steps {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}
+
+${iconButtonRules('sw-pagination-step')}
+
+.sw-pagination-glyph {
+  ${chevronStrokeIn('currentColor')}
+  display: block;
+}
+
+.sw-pagination-glyph-previous { transform: translateX(25%) rotate(135deg); }
+.sw-pagination-glyph-next { transform: translateX(-25%) rotate(-45deg); }
+.sw-pagination-glyph:dir(rtl) { scale: -1 1; }`;
+}
+export function paginationClassCatalog() {
+    return [
+        'sw-pagination',
+        'sw-pagination-range',
+        'sw-pagination-steps',
+        'sw-pagination-step',
+        'sw-pagination-glyph',
+        'sw-pagination-glyph-previous',
+        'sw-pagination-glyph-next',
+    ];
+}

package/dist/css/css-scroll-region.d.ts

@@ -1,3 +1,4 @@
+export declare const scrollShadeColor = "color-mix(in srgb, var(--sw-color-text) 28%, transparent)";
 /**
  * The shade each inline edge of `selector` draws while `useScrollOverflow`
  * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is

package/dist/css/css-scroll-region.js

@@ -7,10 +7,10 @@
  * inherited variables, so a scroll region inside another never takes its
  * ancestor's shade.
  */
-const shadeColor = 'color-mix(in srgb, var(--sw-color-text) 28%, transparent)';
+export const scrollShadeColor = 'color-mix(in srgb, var(--sw-color-text) 28%, transparent)';
 function edgeShade(side) {
     const offset = side === 'left' ? 'var(--sw-space-6)' : 'calc(-1 * var(--sw-space-6))';
-    return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${shadeColor}`;
+    return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${scrollShadeColor}`;
 }
 /**
  * The shade each inline edge of `selector` draws while `useScrollOverflow`
@@ -61,7 +61,12 @@ ${selector}:focus-visible {
 ${scrollShadeRules(selector)}`;
 }
 export function scrollRegionClassCatalog() {
-    return ['sw-scroll-more-start', 'sw-scroll-more-end'];
+    return [
+        'sw-scroll-more-start',
+        'sw-scroll-more-end',
+        'sw-scroll-more-top',
+        'sw-scroll-more-bottom',
+    ];
 }
 /**
  * A region whose start column is pinned (sticky, on an opaque fill) hides
@@ -76,7 +81,7 @@ export function pinnedStartShadeRules(region, pinned) {
         .map((cell) => `${region}.sw-scroll-more-start${direction} ${cell}::after`)
         .join(',\n');
     return `${after('')} {
-  background: linear-gradient(to right, ${shadeColor}, transparent);
+  background: linear-gradient(to right, ${scrollShadeColor}, transparent);
   content: '';
   inset-block: 0;
   inset-inline-start: 100%;
@@ -86,7 +91,7 @@ export function pinnedStartShadeRules(region, pinned) {
 }
 
 ${after(':dir(rtl)')} {
-  background: linear-gradient(to left, ${shadeColor}, transparent);
+  background: linear-gradient(to left, ${scrollShadeColor}, transparent);
 }
 
 @media (forced-colors: active) {

package/dist/css/css-table-bounded-edges.d.ts

@@ -0,0 +1 @@
+export declare function cssTableBoundedEdgeClasses(): string;

package/dist/css/css-table-bounded-edges.js

@@ -0,0 +1,132 @@
+import { scrollShadeColor } from './css-scroll-region.js';
+const region = '.sw-table-bounded';
+/*
+ * While rows are scrolled out past the top or bottom of a bounded region
+ * (`sw-scroll-more-top`, `sw-scroll-more-bottom`), that edge draws the
+ * scroll shade, a spacing step 5 deep, in the colour of the inline edges'
+ * shade. A pinned row covers the region's own edge, so the shade is cast
+ * from the pinned row instead: the header's last row extends its rule's
+ * `::before` downward into a gradient, and a sticky footer's first row
+ * extends its 2 px rule's `::before` upward into one. Both are drawn
+ * inside their pinned group's layer, over the rows that scroll under
+ * them, and no cell moves. Only the header's last row casts it, so a
+ * header cell that spans rows (`rowSpan`) from an earlier row casts none
+ * under its column. An edge with nothing pinned on it, such as a bounded
+ * table without a sticky footer, shades the region's own edge with a
+ * background layer fixed to the box, under the rows as the inline shade
+ * is. Forced colours draw no shade; the system scrollbar is the cue.
+ */
+function shadeRules() {
+    const shade = (direction) => `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
+    const headCells = `${region}.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before`;
+    const footCells = `${region}.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before`;
+    const noHead = ':not(:has(> .sw-table > thead))';
+    const noPinnedFoot = ':not(:has(> .sw-table > .sw-table-footer-sticky))';
+    const ownTop = `${region}.sw-scroll-more-top${noHead}`;
+    const ownBottom = `${region}.sw-scroll-more-bottom${noPinnedFoot}`;
+    const ownBoth = `${region}.sw-scroll-more-top.sw-scroll-more-bottom${noHead}${noPinnedFoot}`;
+    return `${headCells} {
+  background: ${shade('bottom')};
+  border-bottom: 0;
+  border-top: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: auto;
+  inset-block-start: calc(100% - 1px);
+}
+
+${footCells} {
+  background: ${shade('top')};
+  border-bottom: 2px solid var(--sw-color-border);
+  border-top: 0;
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  inset-block-end: calc(100% - 1px);
+  inset-block-start: auto;
+}
+
+${ownTop},
+${ownBottom} {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+${ownTop} {
+  background-image: ${shade('bottom')};
+  background-position: top;
+}
+
+${ownBottom} {
+  background-image: ${shade('top')};
+  background-position: bottom;
+}
+
+${ownBoth} {
+  background-image: ${shade('bottom')}, ${shade('top')};
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  ${headCells},
+  ${footCells} { background: none; border-color: CanvasText; }
+  ${ownTop},
+  ${ownBottom},
+  ${ownBoth} { background-image: none; }
+}`;
+}
+/*
+ * The region's focus ring is its own outline, drawn inside its edge, and
+ * the pinned header and sticky footer paint over it. While the region has
+ * keyboard focus, those pinned cells carry the ring's part they cover: an
+ * inset line at the top of the header's first row and the bottom of the
+ * footer's last row, and at the outer side of each pinned row's first and
+ * last cell (mirrored right to left). The parts are custom properties set
+ * on the cell they belong to and joined in one shadow, so a corner cell
+ * carries two. The side parts sit on the first and last cells, so they
+ * show while the region is scrolled to that inline edge, and a header
+ * cell spanning rows (`rowSpan`) puts a later row's first cell off the
+ * edge, where its side part would land mid-header. Forced colours drop
+ * shadows; the outline shows beside the rows there.
+ */
+function focusRules() {
+    const focused = `${region}:focus-visible`;
+    const head = `${focused} > .sw-table-sticky > thead`;
+    const foot = `${focused} > .sw-table > .sw-table-footer-sticky`;
+    const cells = (group, row = 'tr', cell = ':is(th, td)') => `${group} > ${row} > ${cell}`;
+    const both = (row, cell) => `${cells(head, row, cell)},\n${cells(foot, row, cell)}`;
+    const ring = 'var(--sw-focus-ring-width)';
+    const line = (x, y) => `inset ${x} ${y} 0 0 var(--sw-color-accent)`;
+    const none = '0 0 transparent';
+    return `${both('tr', ':is(th, td)')} {
+  box-shadow: var(--sw-table-ring-block, ${none}), var(--sw-table-ring-start, ${none}), var(--sw-table-ring-end, ${none});
+}
+
+${cells(head, 'tr:first-child')} {
+  --sw-table-ring-block: ${line('0', ring)};
+}
+
+${cells(foot, 'tr:last-child')} {
+  --sw-table-ring-block: ${line('0', `calc(-1 * ${ring})`)};
+}
+
+${both('tr', ':first-child')} {
+  --sw-table-ring-start: ${line(ring, '0')};
+}
+
+${both('tr', ':last-child')} {
+  --sw-table-ring-end: ${line(`calc(-1 * ${ring})`, '0')};
+}
+
+${both('tr', ':first-child:dir(rtl)')} {
+  --sw-table-ring-start: ${line(`calc(-1 * ${ring})`, '0')};
+}
+
+${both('tr', ':last-child:dir(rtl)')} {
+  --sw-table-ring-end: ${line(ring, '0')};
+}`;
+}
+export function cssTableBoundedEdgeClasses() {
+    return `${shadeRules()}
+
+${focusRules()}`;
+}

package/dist/css/css-table-bounded.d.ts

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

package/dist/css/css-table-bounded.js

@@ -0,0 +1,73 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { cssTableBoundedEdgeClasses } from './css-table-bounded-edges.js';
+import { tableCellPadding, tableRuleWidth, tableSortMinHeight, } from './css-table-metrics.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/** A header row whose line is `line` tall: that line and its padding twice. */
+function headBlock(line) {
+    return `calc(${line} + 2 * var(--sw-table-cell-pad))`;
+}
+/*
+ * A bounded table (`Table maxHeight`, `sw-table-bounded` on its region)
+ * is as tall as its row count (`--sw-table-max-rows`) of single-line body
+ * rows, plus one header row when it has a `thead` and one footer row when
+ * it has a `tfoot`, from the measures its cells are drawn with
+ * (`css-table-metrics.ts`): a body row is the body line, the cell padding
+ * twice and its rule; a header row is the caption line and the padding
+ * twice (a pinned header cell draws its rule inside itself), or the sort
+ * button's height where a header sorts (the touch target on a coarse
+ * pointer). Compact density swaps the padding. Rows of two lines or with
+ * controls, a second header or footer row, and a horizontal scrollbar
+ * that takes room (classic scrollbars) leave fewer rows showing.
+ *
+ * The region already scrolls (`overflow: auto`), so the rows past that
+ * height scroll inside it, and the pinned header group (`thead`, top 0)
+ * and a sticky footer (bottom 0) pin to the region's own edges: it is
+ * their nearest scroll box. A bounded region is never marked
+ * `sw-scroll-fits`, so it never stops being a scroll box for the page
+ * pinning in `css-table-page-pin.ts`. Printed, every row shows.
+ */
+function heightRules() {
+    const sorting = '.sw-table-bounded:has(> .sw-table > thead .sw-table-sort)';
+    return `.sw-table-bounded {
+  --sw-table-cell-pad: ${tableCellPadding.comfortable.block};
+  --sw-table-head-block: 0px;
+  --sw-table-foot-rows: 0;
+  max-height: calc((var(--sw-table-max-rows) + var(--sw-table-foot-rows)) * (${body.lineHeight}px + 2 * var(--sw-table-cell-pad) + ${tableRuleWidth}) + var(--sw-table-head-block));
+}
+
+.sw-table-bounded:has(> .sw-table-compact) {
+  --sw-table-cell-pad: ${tableCellPadding.compact.block};
+}
+
+.sw-table-bounded:has(> .sw-table > thead) {
+  --sw-table-head-block: ${headBlock(`${caption.lineHeight}px`)};
+}
+
+${sorting} {
+  --sw-table-head-block: ${headBlock(`max(${caption.lineHeight}px, ${tableSortMinHeight})`)};
+}
+
+@media ${coarsePointerQuery} {
+  ${sorting} {
+    --sw-table-head-block: ${headBlock(`max(${caption.lineHeight}px, ${touchTarget})`)};
+  }
+}
+
+.sw-table-bounded:has(> .sw-table > tfoot) {
+  --sw-table-foot-rows: 1;
+}
+
+@media print {
+  .sw-table-bounded { max-height: none; }
+}`;
+}
+export function cssTableBoundedClasses() {
+    return `${heightRules()}
+
+${cssTableBoundedEdgeClasses()}`;
+}
+export function tableBoundedClassCatalog() {
+    return ['sw-table-bounded'];
+}

package/dist/css/css-table-ledger.d.ts

@@ -1,8 +1,11 @@
 /** The colours a cell's text can take: a signed figure or a quiet value. */
 export declare const tableCellTones: readonly ["success", "danger", "muted", "accent"];
 export type TableCellTone = (typeof tableCellTones)[number];
-/** A row's place in the table: a row of its own, or one under the row above. */
-export declare const tableRowVariants: readonly ["default", "sub"];
+/**
+ * A row's place in the table: a row of its own, one under the row above,
+ * or a total of the rows above it, mid-table.
+ */
+export declare const tableRowVariants: readonly ["default", "sub", "total"];
 export type TableRowVariant = (typeof tableRowVariants)[number];
 export declare function assertTableCellTone(tone: unknown): void;
 export declare function assertTableRowVariant(variant: unknown): void;

package/dist/css/css-table-ledger.js

@@ -1,7 +1,10 @@
 /** The colours a cell's text can take: a signed figure or a quiet value. */
 export const tableCellTones = ['success', 'danger', 'muted', 'accent'];
-/** A row's place in the table: a row of its own, or one under the row above. */
-export const tableRowVariants = ['default', 'sub'];
+/**
+ * A row's place in the table: a row of its own, one under the row above,
+ * or a total of the rows above it, mid-table.
+ */
+export const tableRowVariants = ['default', 'sub', 'total'];
 export function assertTableCellTone(tone) {
     if (tone !== undefined && !tableCellTones.includes(tone))
         throw new RangeError(`Unknown TableCell tone: ${String(tone)}`);

package/dist/css/css-table-metrics.d.ts

@@ -0,0 +1,14 @@
+export declare const tableCellPadding: {
+    readonly comfortable: {
+        readonly block: "var(--sw-space-2)";
+        readonly inline: "var(--sw-space-3)";
+    };
+    readonly compact: {
+        readonly block: "var(--sw-space-1)";
+        readonly inline: "var(--sw-space-2)";
+    };
+};
+/** The rule under every row (a collapsed cell border). */
+export declare const tableRuleWidth = "1px";
+/** The least height of a sortable header's button on a fine pointer. */
+export declare const tableSortMinHeight = "var(--sw-control-xs-min-height)";

package/dist/css/css-table-metrics.js

@@ -0,0 +1,13 @@
+/*
+ * The measures a table's cells are drawn with, shared by the cell rules
+ * (`css-table.ts`, `css-table-sort.ts`) and the bounded table's height
+ * (`css-table-bounded.ts`), so a change to one moves the other with it.
+ */
+export const tableCellPadding = {
+    comfortable: { block: 'var(--sw-space-2)', inline: 'var(--sw-space-3)' },
+    compact: { block: 'var(--sw-space-1)', inline: 'var(--sw-space-2)' },
+};
+/** The rule under every row (a collapsed cell border). */
+export const tableRuleWidth = '1px';
+/** The least height of a sortable header's button on a fine pointer. */
+export const tableSortMinHeight = 'var(--sw-control-xs-min-height)';

package/dist/css/css-table-sort.js

@@ -1,4 +1,5 @@
 import { chevronStroke } from './chevron.js';
+import { tableSortMinHeight } from './css-table-metrics.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 /*
  * A sortable header's button keeps the header's own text style (caption,
@@ -63,7 +64,7 @@ export function cssTableSortClasses() {
   letter-spacing: inherit;
   /* A step of room for the focus ring, taken back so the name stays on the cell's edge. */
   margin-inline: calc(-1 * var(--sw-space-1));
-  min-height: var(--sw-control-xs-min-height);
+  min-height: ${tableSortMinHeight};
   padding: 0 var(--sw-space-1);
   text-align: inherit;
 }

package/dist/css/css-table-total-row.d.ts

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