@scalewing/react 1.29.0 → 1.30.0

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

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from 'react';
+import { type TableRowVariant } from '../../css/css-table-ledger.js';
+export type { TableRowVariant };
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `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.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+};
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+    /**
+     * `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.
+     */
+    variant?: TableRowVariant;
+    /**
+     * A voided row kept on the record: the subtle fill and the text muted
+     * and struck through, toned cells included. A line-through is not read
+     * aloud, so say why in the row, such as a `Badge` "Voided" in the
+     * title's line (a Badge in a line of text is not struck; one that is a
+     * flex item, a direct child of `Inline`, is). Works with either variant.
+     */
+    struck?: boolean;
+} & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/table/TableRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../class-names.js';
+import { assertTableRowVariant, } from '../../css/css-table-ledger.js';
+export const TableRow = forwardRef(function TableRow({ className, selected = false, struck = false, variant = 'default', ...rest }, ref) {
+    assertTableRowVariant(variant);
+    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', className), ...rest }));
+});

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

@@ -1,9 +1,14 @@
 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 & {
+    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, so the
- * box renders as it always has until it is measured.
+ * 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.
  */
-export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): ScrollOverflow;
+export declare function useScrollOverflow(ref: RefObject<HTMLElement | null>): MeasuredScrollOverflow;

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

@@ -1,23 +1,34 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { noScrollOverflow, sameScrollOverflow, scrollOverflow, } from '../scroll-overflow.js';
+const unmeasured = {
+    ...noScrollOverflow,
+    measured: false,
+};
 /**
  * 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, so the
- * box renders as it always has until it is measured.
+ * 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.
  */
 export function useScrollOverflow(ref) {
-    const [overflow, setOverflow] = useState(noScrollOverflow);
+    const [overflow, setOverflow] = useState(unmeasured);
     useEffect(() => {
         const box = ref.current;
         if (!box)
             return;
+        // The metrics hold on a box that does not scroll (a fitting table
+        // region set to overflow: visible): scrollWidth still reports content
+        // past its edge, so the box turns back into a scroll box as it widens.
+        // Keep it that way; a scroll-container-only check would pin it open.
         function measure() {
             if (!box)
                 return;
             const next = scrollOverflow(box.scrollLeft, box.scrollWidth, box.clientWidth);
-            setOverflow((current) => sameScrollOverflow(current, next) ? current : next);
+            setOverflow((current) => current.measured && sameScrollOverflow(current, next)
+                ? current
+                : { ...next, measured: true });
         }
         measure();
         box.addEventListener('scroll', measure, { passive: true });

package/dist/css/css-action-menu.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -114,6 +115,43 @@ export function cssActionMenuClasses() {
   color: var(--sw-color-danger);
 }
 
+/*
+ * A command's detail: its current value at the inline end in the muted
+ * colour, then a chevron pointing to the inline end (mirrored right to
+ * left). A long value wraps between words, never inside one (the command
+ * itself may break anywhere), and the chevron stays last.
+ */
+.sw-action-menu-detail {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+  overflow-wrap: normal;
+  padding-inline-start: var(--sw-space-3);
+  text-align: end;
+}
+
+.sw-action-menu-chevron {
+  ${chevronStroke}
+  flex: none;
+  transform: rotate(-45deg);
+}
+
+.sw-action-menu-chevron:dir(rtl) {
+  transform: rotate(135deg);
+}
+
+/* A hairline that sets a command apart from the ones above. */
+.sw-action-menu-separator {
+  border-top: 1px solid var(--sw-color-border);
+  margin-block: var(--sw-space-1);
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-chevron { border-color: CanvasText; }
+}
+
 /* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
 @media ${coarsePointerQuery} {
   .sw-action-menu-trigger {
@@ -135,5 +173,8 @@ export function actionMenuClassCatalog() {
         'sw-action-menu-items',
         'sw-action-menu-item',
         'sw-action-menu-item-danger',
+        'sw-action-menu-detail',
+        'sw-action-menu-chevron',
+        'sw-action-menu-separator',
     ];
 }

package/dist/css/css-button-group-attached.d.ts

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

package/dist/css/css-button-group-attached.js

@@ -0,0 +1,70 @@
+import { breakpointQuery } from './breakpoints.js';
+import { joinedZIndex } from './stacking.js';
+/*
+ * An attached ButtonGroup is one joined control, such as Previous, Today
+ * and Next: its direct Button children side by side with no gap and one
+ * height, their borders overlapping into single dividers, the inner
+ * corners square and the outer ones the sm radius. It keeps its row on a
+ * phone (it never stacks) and sizes to its buttons, even in a Stack that
+ * would stretch it, so `justify` does not apply.
+ *
+ * A borderless variant (primary, tertiary, ghost, danger) draws its
+ * divider in its own text colour at low strength, so a joined row of them
+ * still reads as separate buttons; forced colours draw every border.
+ *
+ * The group is its own stacking context: a pressed button's ring paints
+ * over its neighbours and the focused button's standard outer ring over
+ * both, so neither is covered by the next button.
+ */
+export function cssButtonGroupAttachedClasses() {
+    const group = '.sw-button-group.sw-button-group-attached';
+    return `${group} {
+  align-items: stretch;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  isolation: isolate;
+  max-width: 100%;
+  width: fit-content;
+}
+
+${group} > .sw-button {
+  border-radius: 0;
+}
+
+${group} > .sw-button + .sw-button {
+  margin-inline-start: -1px;
+}
+
+${group} > .sw-button:first-child {
+  border-end-start-radius: var(--sw-radius-sm);
+  border-start-start-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button:last-child {
+  border-end-end-radius: var(--sw-radius-sm);
+  border-start-end-radius: var(--sw-radius-sm);
+}
+
+${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+  border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+${group} > .sw-button[aria-pressed='true'] {
+  position: relative;
+  ${joinedZIndex('pressed')}
+}
+
+${group} > .sw-button:focus-visible {
+  position: relative;
+  ${joinedZIndex('focused')}
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${group} { align-items: stretch; flex-direction: row; }
+  ${group} > * { width: auto; }
+}`;
+}
+export function buttonGroupAttachedClassCatalog() {
+    return ['sw-button-group-attached'];
+}

package/dist/css/css-button.js

@@ -1,5 +1,6 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
+import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
 const label = typographyVariants.label;
 export function buttonClassNames(options) {
     return [
@@ -93,7 +94,9 @@ export function cssButtonClasses() {
 ${variantRules()}
 ${pressedRules()}
 ${sizeRules()}
-${groupRules()}`;
+${groupRules()}
+
+${cssButtonGroupAttachedClasses()}`;
 }
 export const buttonGroupJustifies = ['start', 'end', 'between'];
 /** The action row: one line from md up, full-width stacked buttons below it. */
@@ -119,5 +122,6 @@ export function buttonClassCatalog() {
         ...buttonSizes.map((size) => `sw-button-${size}`),
         'sw-button-group',
         ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
+        ...buttonGroupAttachedClassCatalog(),
     ];
 }

package/dist/css/css-components.js

@@ -55,6 +55,7 @@ function reducedTransparencyRules() {
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
+  .sw-table .sw-table-footer-sticky :is(th, td),
   .sw-denomination-strip .sw-denomination-label,
   .sw-denomination-strip thead .sw-denomination-corner:first-child,
   .sw-bar-chart-track,

package/dist/css/css-filter-chips.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
+const caption = typographyVariants.caption;
 export function cssFilterChipsClasses() {
     return `.sw-filter-chips {
   border: 0;
@@ -101,11 +102,35 @@ export function cssFilterChipsClasses() {
   opacity: var(--sw-disabled-opacity);
 }
 
+/*
+ * An error: the message under the chips in the danger colour (a polite live
+ * region, out of the layout while empty) and every chip's edge in danger,
+ * the chosen one too (it keeps its accent fill), in normal and forced
+ * colours alike.
+ */
+.sw-filter-chips-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  padding-top: var(--sw-space-2);
+}
+
+.sw-filter-chips-error:empty { position: absolute; }
+
+.sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face {
+  border-color: var(--sw-color-danger);
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .sw-filter-chips-error { color: Mark; }
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
   .sw-filter-chip-count { color: inherit; }
+  /* After the checked rule, so every chip, the chosen one too, takes the edge. */
+  .sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face { border-color: Mark; }
 }`;
 }
 export function filterChipsClassCatalog() {
@@ -118,5 +143,6 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-face',
         'sw-filter-chip-count',
         'sw-filter-chip-quiet',
+        'sw-filter-chips-error',
     ];
 }

package/dist/css/css-section-nav-filled.d.ts

@@ -0,0 +1,6 @@
+/** How a section navigation marks its current item. */
+export declare const sectionNavAppearances: readonly ["underline", "filled"];
+export type SectionNavAppearance = (typeof sectionNavAppearances)[number];
+export declare function assertSectionNavAppearance(appearance: unknown): void;
+export declare function cssSectionNavFilledClasses(): string;
+export declare function sectionNavFilledClassCatalog(): string[];

package/dist/css/css-section-nav-filled.js

@@ -0,0 +1,80 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/** How a section navigation marks its current item. */
+export const sectionNavAppearances = ['underline', 'filled'];
+export function assertSectionNavAppearance(appearance) {
+    if (!sectionNavAppearances.includes(appearance))
+        throw new RangeError(`SectionNav appearance must be one of ${sectionNavAppearances.join(', ')}`);
+}
+/*
+ * `filled`: a quiet bar of page buttons, as an area's sub-navigation beside
+ * its name. No hairline under the row and no underline or start bar, in
+ * the row and the side list; every link is the sm control (32; the 44 px
+ * target on a coarse pointer) with the sm radius and the control's
+ * padding at weight 500, and the current one takes a soft muted fill in
+ * the text colour at the label weight (600), so it reads apart from a
+ * hovered link. A 2 px transparent border keeps room for forced colours,
+ * where the current link's border turns Highlight.
+ *
+ * A count after a label (a number waiting there) is a filled pill: the
+ * danger colour with its on-colour figures (4.5:1 in every palette, as a
+ * danger Button's label), caption size at weight 700, a space-5 less
+ * space-1 (20) high and at least as wide. Forced colours draw its edge.
+ */
+export function cssSectionNavFilledClasses() {
+    // Two classes, so every filled rule outranks the side list's (one class
+    // and :dir), not by source order alone.
+    const filled = '.sw-section-nav.sw-section-nav-filled';
+    return `${filled} .sw-section-nav-list {
+  border-bottom: 0;
+}
+
+/* (0,4,0): outranks the underline and the side list's start bar. */
+[data-theme] ${filled} .sw-section-nav-link {
+  border: 2px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  font-weight: 500;
+  margin-bottom: 0;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-control-sm-padding-inline);
+}
+
+[data-theme] ${filled} .sw-section-nav-link[aria-current] {
+  background: color-mix(in srgb, var(--sw-color-muted) 18%, transparent);
+  border-color: transparent;
+  color: var(--sw-color-text);
+  font-weight: ${label.fontWeight};
+}
+
+[data-theme] .sw-section-nav-count {
+  align-items: center;
+  background: var(--sw-color-danger);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-onDanger);
+  display: inline-flex;
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  justify-content: center;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: 1;
+  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
+  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
+  padding-inline: var(--sw-space-1);
+}
+
+@media ${coarsePointerQuery} {
+  [data-theme] ${filled} .sw-section-nav-link { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  [data-theme] ${filled} .sw-section-nav-link[aria-current] { border-color: Highlight; }
+  [data-theme] .sw-section-nav-count { border: 1px solid CanvasText; }
+}`;
+}
+export function sectionNavFilledClassCatalog() {
+    return ['sw-section-nav-filled', 'sw-section-nav-count'];
+}

package/dist/css/css-section-nav.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { cssSectionNavFilledClasses, sectionNavFilledClassCatalog, } from './css-section-nav-filled.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 export function sectionNavVerticalClass(breakpoint) {
@@ -100,6 +101,8 @@ export function cssSectionNavClasses() {
 
 ${verticalRules()}
 
+${cssSectionNavFilledClasses()}
+
 @media ${coarsePointerQuery} {
   [data-theme] .sw-section-nav-link { min-height: ${touchTarget}; }
 }
@@ -116,5 +119,6 @@ export function sectionNavClassCatalog() {
         'sw-section-nav-link',
         'sw-section-nav-icon',
         ...breakpoints.map(sectionNavVerticalClass),
+        ...sectionNavFilledClassCatalog(),
     ];
 }

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

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

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

@@ -0,0 +1,57 @@
+import { zIndex } from './stacking.js';
+/*
+ * A table footer holds a total: its cells at weight 600 under a heavier
+ * rule, a 2 px line in the border colour across the top of its first row.
+ * The line is each cell's ::before (absolutely placed, a border, so forced
+ * colours keep it), not the cell's own collapsed border, which a sticky
+ * cell would leave behind as it moved.
+ *
+ * A sticky footer pins its cells to the bottom edge on the header's glass
+ * (solid surface under reduced transparency, the system canvas in forced
+ * colours, as the pinned header cells), on the `stickyFooter` layer: over
+ * the cells and the pinned header cells, under the ActionBar, which covers
+ * it, so a page does not pair the two. A table's region is a scroll box,
+ * which would pin it to the region's own bottom; while the table fits its
+ * width (`sw-scroll-fits`) a region that holds a sticky footer stops being
+ * one, so the footer pins to the page's bottom and the sticky header to
+ * its top, under any sticky top chrome (an AppHeader covers it). A table
+ * wider than its region scrolls sideways in it and pins to the region.
+ */
+export function cssTableFooterClasses() {
+    return `.sw-table tfoot :is(th, td) {
+  font-weight: 600;
+  position: relative;
+}
+
+.sw-table tfoot > tr:first-child > :is(th, td)::before {
+  border-top: 2px solid var(--sw-color-border);
+  content: '';
+  /* Over the last body row's 1 px border, so the rule reads 2 px. */
+  inset-block-start: -1px;
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.sw-table .sw-table-footer-sticky :is(th, td) {
+  background: var(--sw-glass-fill);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  bottom: 0;
+  position: sticky;
+  ${zIndex('stickyFooter')}
+}
+
+.sw-table-wrap.sw-scroll-fits:has(> .sw-table > .sw-table-footer-sticky) {
+  overflow: visible;
+}
+
+@media (forced-colors: active) {
+  .sw-table tfoot > tr:first-child > :is(th, td)::before { border-color: CanvasText; }
+  .sw-table .sw-table-footer-sticky :is(th, td),
+  .sw-table-sticky thead th { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
+}`;
+}
+export function tableFooterClassCatalog() {
+    return ['sw-table-footer-sticky', 'sw-scroll-fits'];
+}

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

@@ -0,0 +1,10 @@
+/** 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"];
+export type TableRowVariant = (typeof tableRowVariants)[number];
+export declare function assertTableCellTone(tone: unknown): void;
+export declare function assertTableRowVariant(variant: unknown): void;
+export declare function cssTableLedgerClasses(): string;
+export declare function tableLedgerClassCatalog(): string[];

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

@@ -0,0 +1,122 @@
+/** 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'];
+export function assertTableCellTone(tone) {
+    if (tone !== undefined && !tableCellTones.includes(tone))
+        throw new RangeError(`Unknown TableCell tone: ${String(tone)}`);
+}
+export function assertTableRowVariant(variant) {
+    if (!tableRowVariants.includes(variant))
+        throw new RangeError(`Unknown TableRow variant: ${String(variant)}`);
+}
+function toneRules() {
+    return tableCellTones
+        .map((tone) => `.sw-table .sw-table-tone-${tone} {
+  color: var(--sw-color-${tone});
+}`)
+        .join('\n\n');
+}
+/*
+ * Ledger rules, for a table read across as well as down.
+ *
+ * A cell tone colours the cell's text in the theme's semantic colour, as
+ * Text color does: 4.5:1 on the surface and the canvas in the default
+ * palettes and most named ones (the test names the few palette gaps). A
+ * struck row mutes its toned cells, so no tone sits on the subtle fill.
+ *
+ * Column rules draw a hairline at the inline start of every cell after a
+ * row's first, so bill columns read as columns. A border, so forced
+ * colours keep it and RTL mirrors it; a sticky header cell draws it on
+ * its ::after.
+ *
+ * A row header in the body (`th scope="row"`, such as an entry's name)
+ * reads as body text, not as a column header. The reset is no stronger
+ * than `.sw-table th`, so a cell's numeric, tone and struck rules win.
+ *
+ * A sub row sits under the row above it: its row header is indented a
+ * space-6 step with a guide bar at the indent, so a batch's items or a
+ * change's parts read as parts of one entry. The bar is the header's
+ * ::after (::before is the selected row's bar) and a border, so forced
+ * colours keep it.
+ *
+ * A struck row is a voided one kept on the record: the subtle fill, the
+ * text muted and struck through. A Badge in it (an inline-flex box) is not
+ * struck when it sits in a line of text (it is an atomic inline box; one
+ * that is itself a flex item is struck), so its tag, such as "Voided",
+ * stays plain; its words say why the row is struck, since a line-through
+ * is not read aloud.
+ */
+export function cssTableLedgerClasses() {
+    return `${toneRules()}
+
+.sw-table-column-rules :is(th, td) + :is(th, td) {
+  border-inline-start: 1px solid var(--sw-color-border);
+}
+
+/* A sticky header cell is positioned, so the next cell's fill covers a
+   collapsed border; its rule is a border on its own ::after instead, so
+   forced colours keep it and the logical inset mirrors it. */
+.sw-table-sticky.sw-table-column-rules thead :is(th, td) + :is(th, td)::after {
+  border-inline-start: 1px solid var(--sw-color-border);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+:where(.sw-table tbody, .sw-table tfoot) th[scope='row'] {
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.sw-table-row-sub > th[scope='row'] {
+  padding-inline-start: calc(var(--sw-space-3) + var(--sw-space-6) + var(--sw-space-3));
+  position: relative;
+}
+
+.sw-table-compact .sw-table-row-sub > th[scope='row'] {
+  padding-inline-start: calc(var(--sw-space-2) + var(--sw-space-6) + var(--sw-space-3));
+}
+
+.sw-table-row-sub > th[scope='row']::after {
+  block-size: var(--sw-space-5);
+  border-inline-start: 2px solid var(--sw-color-border);
+  content: '';
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--sw-space-3) + var(--sw-space-6));
+  pointer-events: none;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.sw-table-compact .sw-table-row-sub > th[scope='row']::after {
+  inset-inline-start: calc(var(--sw-space-2) + var(--sw-space-6));
+}
+
+.sw-table .sw-table-row-struck > :is(td, th) {
+  background: var(--sw-color-subtle);
+  color: var(--sw-color-muted);
+  text-decoration: line-through;
+}
+
+.sw-table .sw-table-row-struck > [class*='sw-table-tone-'] {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table-column-rules :is(th, td) + :is(th, td),
+  .sw-table-sticky.sw-table-column-rules thead :is(th, td) + :is(th, td)::after { border-color: CanvasText; }
+  .sw-table-row-sub > th[scope='row']::after { border-color: CanvasText; }
+}`;
+}
+export function tableLedgerClassCatalog() {
+    return [
+        ...tableCellTones.map((tone) => `sw-table-tone-${tone}`),
+        'sw-table-column-rules',
+        'sw-table-row-sub',
+        'sw-table-row-struck',
+    ];
+}

package/dist/css/css-table.js

@@ -1,6 +1,8 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
 import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-layout.js';
+import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
+import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
@@ -89,6 +91,10 @@ ${cssTableLayoutClasses()}
 
 ${cssTableSortClasses()}
 
+${cssTableLedgerClasses()}
+
+${cssTableFooterClasses()}
+
 ${selectedRowRules()}`;
 }
 export function tableClassCatalog() {
@@ -103,5 +109,7 @@ export function tableClassCatalog() {
         'sw-table-row-selected',
         ...tableLayoutClassCatalog(),
         ...tableSortClassCatalog(),
+        ...tableLedgerClassCatalog(),
+        ...tableFooterClassCatalog(),
     ];
 }