@scalewing/react 1.28.0 → 1.30.0

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

@@ -15,12 +15,14 @@ import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
 import { cssSelectClasses } from './css-select.js';
+import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
+import { cssGlyphTileClasses } from './css-glyph-tile.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
@@ -53,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,
@@ -60,6 +63,7 @@ function reducedTransparencyRules() {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-multi-select-panel,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
@@ -144,6 +148,8 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssMultiSelectClasses()}
+
 ${cssActionBarClasses()}
 
 ${cssSwitchClasses()}
@@ -154,6 +160,8 @@ ${cssProgressClasses()}
 
 ${cssNoticeClasses()}
 
+${cssGlyphTileClasses()}
+
 ${cssTooltipClasses()}
 
 ${cssInfoTipClasses()}

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-glyph-tile.d.ts

@@ -0,0 +1,5 @@
+export declare const glyphTileSizes: readonly ["sm", "md", "lg"];
+/** `sm` 24, `md` 28 (the xs control height), `lg` 32. */
+export type GlyphTileSize = (typeof glyphTileSizes)[number];
+export declare function cssGlyphTileClasses(): string;
+export declare function glyphTileClassCatalog(): string[];

package/dist/css/css-glyph-tile.js

@@ -0,0 +1,57 @@
+import { categoricalColorKeys } from '@scalewing/tokens';
+export const glyphTileSizes = ['sm', 'md', 'lg'];
+const tileSide = {
+    sm: 'var(--sw-space-5)',
+    md: 'var(--sw-control-xs-min-height)',
+    lg: 'var(--sw-space-6)',
+};
+function hueRules() {
+    return categoricalColorKeys
+        .map((key) => `.sw-glyph-tile-${key} { --sw-glyph-tile-fill: var(--sw-categorical-${key}); }`)
+        .join('\n');
+}
+function sizeRules() {
+    return Object.entries(tileSide)
+        .map(([size, side]) => `.sw-glyph-tile-${size} { height: ${side}; width: ${side}; }`)
+        .join('\n');
+}
+/*
+ * A rounded square in a categorical fill with the consumer's glyph centred
+ * in white, sized to spacing step 4 whatever the glyph's own size. It is
+ * decoration: the words beside it carry the meaning. Forced colors drop the
+ * fill, so a border keeps the tile's shape and the glyph takes the text
+ * color.
+ */
+export function cssGlyphTileClasses() {
+    return `.sw-glyph-tile {
+  align-items: center;
+  background: var(--sw-glyph-tile-fill);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-categorical-on);
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+}
+
+.sw-glyph-tile > svg {
+  flex: none;
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+${hueRules()}
+
+${sizeRules()}
+
+@media (forced-colors: active) {
+  .sw-glyph-tile { border: 1px solid CanvasText; color: CanvasText; }
+}`;
+}
+export function glyphTileClassCatalog() {
+    return [
+        'sw-glyph-tile',
+        ...categoricalColorKeys.map((key) => `sw-glyph-tile-${key}`),
+        ...glyphTileSizes.map((size) => `sw-glyph-tile-${size}`),
+    ];
+}

package/dist/css/css-multi-select.d.ts

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

package/dist/css/css-multi-select.js

@@ -0,0 +1,156 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
+import { zIndex } from './stacking.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+/*
+ * The trigger: a glass control at the md height with the muted label, the
+ * summary and Select's chevron. The panel: a glass popover beside it (as
+ * ActionMenu's list), All and Clear over a hairline, then one checkbox row
+ * per option at the md height, the whole row its label; a separated row
+ * starts after a hairline. Checkboxes reuse Checkbox's generated control.
+ */
+export function cssMultiSelectClasses() {
+    return `.sw-multi-select {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.sw-multi-select-trigger {
+  align-items: center;
+  appearance: none;
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
+}
+
+.sw-multi-select-trigger::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  margin-inline-start: var(--sw-space-2);
+  transform: translateY(-25%) rotate(45deg);
+}
+
+.sw-multi-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-multi-select-trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-multi-select-label {
+  color: var(--sw-color-muted);
+  font-weight: 500;
+}
+
+.sw-multi-select-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-multi-select-panel {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  inset: auto;
+  margin: 0;
+  /* The viewport, not --sw-select-max: the list is short and should show
+     whole rather than scroll inside a 22rem cap. */
+  max-height: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  min-width: var(--sw-select-max);
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  width: max-content;
+  ${zIndex('popup')}
+}
+
+.sw-multi-select-commands {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--sw-space-1);
+  padding-bottom: var(--sw-space-1);
+}
+
+.sw-multi-select-row-separated {
+  border-top: 1px solid var(--sw-color-border);
+  margin-top: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-checkbox-label.sw-multi-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  padding-inline: var(--sw-space-2);
+  width: 100%;
+}
+
+.sw-multi-select-option:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-multi-select-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-multi-select-text {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-multi-select-trigger::after { border-color: CanvasText; }
+  .sw-multi-select-panel { border-color: CanvasText; }
+  .sw-multi-select-commands,
+  .sw-multi-select-row-separated { border-color: CanvasText; }
+}`;
+}
+export function multiSelectClassCatalog() {
+    return [
+        'sw-multi-select',
+        'sw-multi-select-trigger',
+        'sw-multi-select-label',
+        'sw-multi-select-summary',
+        'sw-multi-select-panel',
+        'sw-multi-select-commands',
+        'sw-multi-select-row',
+        'sw-multi-select-row-separated',
+        'sw-multi-select-option',
+        'sw-multi-select-icon',
+        'sw-multi-select-text',
+    ];
+}

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-segmented.js

@@ -1,6 +1,60 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 const body = typographyVariants.body;
 const data = typographyVariants.data;
+const label = typographyVariants.label;
+/*
+ * Items with a mark (a glyph tile before the label) centre the mark and
+ * the label a space-2 gap apart; the mark keeps its size. On the compact
+ * track every item also takes the md control height and label type, so
+ * the row stays even; the track is the subtle fill (two classes, so
+ * reduced transparency keeps it) and the selected item is the surface
+ * raised by the small elevation, so the choice shows on a white canvas
+ * too. A filled track keeps its own look and only gains the marks. The
+ * error outline is restated after these rules so an icon track keeps it.
+ * In forced colours the selected item is outlined in Highlight; a focused
+ * selected item keeps that outline, offset by the focus ring's offset.
+ */
+function iconRules() {
+    const compact = '.sw-segmented-with-icons:not(.sw-segmented-filled)';
+    return `.sw-segmented${compact} {
+  background: var(--sw-color-subtle);
+  border-color: transparent;
+}
+
+${compact} .sw-segmented-item-selected {
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-segmented-with-icons .sw-segmented-item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  justify-content: center;
+}
+
+${compact} .sw-segmented-item {
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented-item-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-segmented.sw-segmented-with-icons[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented${compact} { border-color: CanvasText; }
+  ${compact} .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
+}`;
+}
 /*
  * The control and its error message. The wrapper takes the track's place in
  * the layout: inline beside text and stretched in a Stack (compact), block
@@ -106,6 +160,8 @@ export function cssSegmentedClasses() {
   color: var(--sw-color-onAccent);
 }
 
+${iconRules()}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -122,6 +178,8 @@ export function segmentedClassCatalog() {
         'sw-segmented-item',
         'sw-segmented-item-selected',
         'sw-segmented-filled',
+        'sw-segmented-with-icons',
+        'sw-segmented-item-icon',
         'sw-segmented-disabled',
     ];
 }

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