@scalewing/react 1.28.0 → 1.30.0

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/css-variables.js

@@ -1,10 +1,18 @@
-import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+import { categoricalColorKeys, categoricalColors, onCategorical, controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
 function colorDeclarations(theme) {
     return [
         ...semanticColorKeys.map((key) => `  --sw-color-${key}: ${theme.colors[key]};`),
         `  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`,
     ].join('\n');
 }
+/* The categorical fills of the theme's scheme and the glyph drawn on them. */
+function categoricalDeclarations(theme) {
+    const fills = categoricalColors[theme.colorScheme];
+    return [
+        ...categoricalColorKeys.map((key) => `  --sw-categorical-${key}: ${fills[key]};`),
+        `  --sw-categorical-on: ${onCategorical};`,
+    ].join('\n');
+}
 function glassDeclarations(theme) {
     return `  --sw-glass-blur: ${theme.glass.blur}px;
   --sw-glass-saturate: ${theme.glass.saturate};
@@ -54,11 +62,13 @@ export function cssVariables(light, dark) {
     return `:root,
 [data-theme='light'] {
 ${colorDeclarations(light)}
+${categoricalDeclarations(light)}
 ${sharedDeclarations(light)}
 }
 
 [data-theme='dark'] {
 ${colorDeclarations(dark)}
+${categoricalDeclarations(dark)}
 ${sharedDeclarations(dark)}
 }`;
 }

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, Tooltip, the DateField and CalendarButton calendar) over
- *    everything in the page.
+ * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu
+ *    list, MultiSelect panel, 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]};`;
 }
@@ -33,6 +50,9 @@ const openPopups = [
     '.sw-select-list',
     // Rendered only while open; on the top layer where the popover API exists.
     '.sw-action-menu-list',
+    // MultiSelect's panel. Rendered only while open; on the top layer where
+    // the popover API exists.
+    '.sw-multi-select-panel',
     '.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

@@ -10,6 +10,7 @@ import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
+import { glyphTileClassCatalog } from './css-glyph-tile.js';
 import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
@@ -37,6 +38,7 @@ import { sectionNavClassCatalog } from './css-section-nav.js';
 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 { splitClassCatalog } from './css-split.js';
 import { toastClassCatalog } from './css-toast.js';
 import { toastCardClassCatalog } from './css-toast-card.js';
@@ -71,6 +73,7 @@ export function utilityClassCatalog() {
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...multiSelectClassCatalog(),
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
@@ -80,6 +83,7 @@ export function utilityClassCatalog() {
         ...spinnerClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
+        ...glyphTileClassCatalog(),
         ...tooltipClassCatalog(),
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, }
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
+export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, type NoticeProps, type NoticeRole, type NoticeTone, type NoticeVariant, } from './components/Notice.js';
 export { Progress, progressTones, type ProgressProps, type ProgressTone, } from './components/Progress.js';
 export { Tooltip, type TooltipProps, type TooltipRelationship, } from './components/Tooltip.js';
@@ -31,12 +32,13 @@ 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 { 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

@@ -6,6 +6,7 @@ export { DateField, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
+export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, } from './components/Notice.js';
 export { Progress, progressTones, } from './components/Progress.js';
 export { Tooltip, } from './components/Tooltip.js';
@@ -28,11 +29,12 @@ 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 { 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';