@scalewing/react 1.29.0 → 1.31.0

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(),
     ];
 }

package/dist/css/stacking.d.ts

@@ -1,10 +1,16 @@
 export declare const stackingOrder: {
     readonly stickyCell: 1;
-    readonly bottomChrome: 2;
-    readonly popupHost: 3;
-    readonly topChrome: 4;
+    readonly stickyFooter: 2;
+    readonly bottomChrome: 3;
+    readonly popupHost: 4;
+    readonly topChrome: 5;
     readonly popup: 10;
 };
 export type StackingLayer = keyof typeof stackingOrder;
+export declare const joinedControlOrder: {
+    readonly pressed: 1;
+    readonly focused: 2;
+};
+export declare function joinedZIndex(layer: keyof typeof joinedControlOrder): string;
 export declare function zIndex(layer: StackingLayer): string;
 export declare function cssPopupHostRules(): string;

package/dist/css/stacking.js

@@ -4,28 +4,45 @@
  *
  * 1. `stickyCell`: a sticky table header cell or row label over the cells
  *    that scroll under it.
- * 2. `bottomChrome`: the sticky ActionBar over the page flow it follows.
- * 3. `popupHost`: a glass surface (glass Card, Accordion) while it holds an
+ * 2. `stickyFooter`: a sticky table footer (a pinned total row) over the
+ *    cells and pinned header cells that scroll under it, and under the
+ *    ActionBar, which stays the page's last word at the bottom edge.
+ * 3. `bottomChrome`: the sticky ActionBar over the page flow it follows.
+ * 4. `popupHost`: a glass surface (glass Card, Accordion) while it holds an
  *    open popup. Backdrop blur makes that surface its own stacking context, so
  *    its popup can only paint as high as the surface does; lifting the surface
  *    over the ActionBar keeps an open list tappable where the bar would cover
  *    it, and over the next surface in the flow.
- * 4. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
+ * 5. `topChrome`: the sticky AppHeader or sticky Tabs strip, over a lifted
  *    surface that scrolls up under it (the header is the page's way back, the
  *    strip its way between sections, and a popup opens downward).
- * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, MultiSelect panel, Tooltip, the DateField and CalendarButton
+ * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu
+ *    list, MultiSelect panel, Combobox list, Tooltip, the DateField and CalendarButton
  *    calendar) over everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
  */
 export const stackingOrder = {
     stickyCell: 1,
-    bottomChrome: 2,
-    popupHost: 3,
-    topChrome: 4,
+    stickyFooter: 2,
+    bottomChrome: 3,
+    popupHost: 4,
+    topChrome: 5,
     popup: 10,
 };
+/*
+ * The order inside a joined control (an attached ButtonGroup), which is
+ * its own stacking context (`isolation: isolate`), so these never meet the
+ * page's layers: a pressed button's ring over its neighbours, and the
+ * focused button's ring over both.
+ */
+export const joinedControlOrder = {
+    pressed: 1,
+    focused: 2,
+};
+export function joinedZIndex(layer) {
+    return `z-index: ${joinedControlOrder[layer]};`;
+}
 export function zIndex(layer) {
     return `z-index: ${stackingOrder[layer]};`;
 }
@@ -36,6 +53,9 @@ const openPopups = [
     // MultiSelect's panel. Rendered only while open; on the top layer where
     // the popover API exists.
     '.sw-multi-select-panel',
+    // Combobox's list. Rendered only while open; on the top layer where the
+    // popover API exists.
+    '.sw-combobox-popup',
     '.sw-tooltip:not([hidden])',
     // DateField and CalendarButton share it. Rendered only while open; on the
     // top layer where the popover API exists.

package/dist/css/stylesheet.js

@@ -39,6 +39,7 @@ import { dialogClassCatalog } from './css-dialog.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
+import { comboboxClassCatalog } from './css-combobox.js';
 import { splitClassCatalog } from './css-split.js';
 import { toastClassCatalog } from './css-toast.js';
 import { toastCardClassCatalog } from './css-toast-card.js';
@@ -74,6 +75,7 @@ export function utilityClassCatalog() {
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
         ...multiSelectClassCatalog(),
+        ...comboboxClassCatalog(),
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),

package/dist/index.d.ts

@@ -25,20 +25,21 @@ export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone,
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
-export { Field, type FieldProps, type FieldSize } from './components/Field.js';
+export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
 export { Stepper, type StepperProps, type StepperWidth, } from './components/Stepper.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, type NavProps } from './components/Nav.js';
-export { SectionNav, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
+export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
+export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableColumnWidth, type TableDensity, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableSort, type TableVerticalAlign, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';

package/dist/index.js

@@ -23,18 +23,19 @@ export { Dialog, dialogSizes, } from './components/Dialog.js';
 export { StatTile, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
-export { Field } from './components/Field.js';
+export { Field, fieldVariants, } from './components/Field.js';
 export { Step, Steps, } from './components/Steps.js';
 export { Stepper, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav } from './components/Nav.js';
-export { SectionNav, } from './components/SectionNav.js';
+export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
+export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, } from './components/Table.js';
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';