@scalewing/react 1.36.0 → 1.38.0

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-denomination-grid.js

@@ -5,6 +5,7 @@ import { cssDenominationAppearanceClasses, denominationAppearanceClassCatalog, }
 import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './css-denomination-label.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
+import { cssDenominationValueRowClasses, denominationValueRowClassCatalog, } from './css-denomination-value-row.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -260,6 +261,8 @@ ${cssDenominationLabelClasses()}
 
 ${cssDenominationAppearanceClasses()}
 
+${cssDenominationValueRowClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -303,5 +306,6 @@ export function denominationGridClassCatalog() {
         ...denominationAlignedClassCatalog(),
         ...denominationLabelClassCatalog(),
         ...denominationAppearanceClassCatalog(),
+        ...denominationValueRowClassCatalog(),
     ];
 }

package/dist/css/css-denomination-value-row.d.ts

@@ -0,0 +1,3 @@
+export declare const denominationValueRowClass = "sw-denomination-value-row";
+export declare function cssDenominationValueRowClasses(): string;
+export declare function denominationValueRowClassCatalog(): string[];

package/dist/css/css-denomination-value-row.js

@@ -0,0 +1,54 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+const data = typographyVariants.data;
+const label = typographyVariants.label;
+export const denominationValueRowClass = 'sw-denomination-value-row';
+const valueRow = `.sw-denomination-strip .${denominationValueRowClass}`;
+/*
+ * A value line under a strip row: the subtle fill across the row (its
+ * pinned label too), each value at label size in data weight and tabular
+ * figures (the framed counts' size), centred
+ * under its count in the text colour, never wrapped, padded a space-2 step
+ * down (space-1 below md): shorter than framed counts above it. A disabled
+ * row's line fades its values with the row. Emitted after
+ * the frame's rules and one class more specific, so it wins at every width.
+ */
+export function cssDenominationValueRowClasses() {
+    return `${valueRow},
+${valueRow} .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+${valueRow} :is(th, td) {
+  padding-block: var(--sw-space-2);
+}
+
+${valueRow} .sw-denomination-value {
+  color: var(--sw-color-text);
+  font-size: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+${valueRow}.sw-denomination-row-disabled .sw-denomination-value {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${valueRow} :is(th, td) { padding-block: var(--sw-space-1); }
+  ${valueRow} .sw-denomination-total { padding: 0; }
+}
+
+@media (forced-colors: active) {
+  ${valueRow},
+  ${valueRow} .sw-denomination-label { background: Canvas; }
+  ${valueRow} .sw-denomination-value { color: CanvasText; }
+}`;
+}
+export function denominationValueRowClassCatalog() {
+    return [denominationValueRowClass, 'sw-denomination-value'];
+}

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

package/dist/css/css-table-total-row.js

@@ -0,0 +1,29 @@
+/*
+ * A total row mid-table (`TableRow variant="total"`), such as a subtotal
+ * the rows above add up to before the table goes on: its cells at weight
+ * 600 under the footer's heavier rule, 2 px in the border colour across
+ * its top, as a `TableFooter` total is drawn. The rule is the cells' own
+ * top border, which the collapsed-border model resolves over the row
+ * above's 1 px one, so forced colours keep it (in `CanvasText`) and no
+ * pseudo-element is taken from a selected row's bar or a sub row's guide.
+ * The row takes no fill: on the subtle fill, accent text (a link or an
+ * accent-toned figure) falls under 4.5:1 in several palettes, as the
+ * selected row's note in `css-table.ts` found. A total row belongs in the
+ * body: a pinned header cell draws its rules on its pseudo-elements
+ * instead, and a `TableFooter` already draws the total at the table's
+ * end. A cell's `tone` keeps its colour; a struck total row mutes and
+ * strikes it as any struck row.
+ */
+export function cssTableTotalRowClasses() {
+    return `.sw-table .sw-table-row-total > :is(th, td) {
+  border-top: 2px solid var(--sw-color-border);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
+}`;
+}
+export function tableTotalRowClassCatalog() {
+    return ['sw-table-row-total'];
+}