@scalewing/react 1.6.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @scalewing/react
 
+## 1.8.0
+
+### Minor Changes
+
+- 7d46059: A `DenominationGrid` `strip` wider than its container now scrolls sideways
+  inside its own region instead of widening the page (for example an
+  eleven-column strip on a 390 px phone, or a six-column strip inside an
+  outlined card inside another card). The region is a keyboard-focusable
+  `group` named after the grid's `label`, like `Table`'s scroll wrapper, and
+  the row labels and the header corner above them stay pinned at the start
+  while the counts scroll under them, so each column head stays over its
+  counts. The pinned label draws its tone stripe as its own box, so the stripe
+  moves with it in every browser.
+
+  Reduce Transparency now takes effect on every glass surface it lists: the
+  fallback block is emitted after all component rules, where before most glass
+  rules (app header, sticky table head, dialog, toast and others) came after it
+  and kept their blur. The block lists glass surfaces only: the filled
+  secondary button left it, so it keeps its own fill and text colors.
+
+  New generated classes: `.sw-denomination-scroll` (the scroll region) and
+  `.sw-denomination-label-body` (the icon, label, and phone total inside the
+  row label cell). `Table` and the strip now share one generated scroll-region
+  rule; `.sw-table-wrap` output is unchanged. No prop changes. See
+  `docs/requests/teisoro-denomination-grid.md`.
+
+## 1.7.0
+
+### Minor Changes
+
+- 2444ec5: Button `variant="tertiary"` is a solid fill on `--sw-color-tertiary` with
+  `--sw-color-onTertiary`. `secondary` now fills with `--sw-color-secondary`
+  and draws `--sw-button-secondary-border`, which stays the hairline unless a
+  palette fills the secondary action (for example `signal`). The stylesheet
+  emits the new semantic colour properties. Default and cerulean themes look
+  unchanged.
+- 622ab77: `Card variant="filled"` (`.sw-card-filled`) is a quiet `--sw-color-subtle`
+  fill with no border, for plain information apart from pressable rows.
+
+### Patch Changes
+
+- Updated dependencies [b5a56b7]
+- Updated dependencies [2444ec5]
+- Updated dependencies [622ab77]
+  - @scalewing/tokens@1.3.0
+
 ## 1.6.1
 
 ### Patch Changes

package/README.md

@@ -66,6 +66,8 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Separator` divides sections with a token-colored line. It is horizontal by default; use `orientation="vertical"` in a flex row. Set `decorative` when the line only supports layout so assistive technology ignores it.
 
+`Card` defaults to `glass`; `outlined` and `elevated` are solid surfaces, and `filled` is a quiet `--sw-color-subtle` fill with no border for plain information apart from pressable rows.
+
 `Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
 
 `Text` takes an optional `align` (`start`, `center`, `end`) mapped to generated `sw-text-align-*` classes, for a heading that must stay centered when it wraps.
@@ -85,7 +87,7 @@ Every `Box`-based component (`Box`, `Stack`, `Inline`, `Card`, `Grid`, …) take
 
 Values outside the catalog throw a `RangeError`. There is no per-breakpoint span and no arbitrary column template.
 
-`DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that moves under the label on a phone. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
+`DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that moves under the label on a phone. A strip wider than its container scrolls sideways inside its own keyboard-focusable region, named after `label`, with the row labels pinned at the start; the page never scrolls sideways. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
 
 `FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected. Native radios provide arrow and Space navigation; disabled options are skipped.
 

package/dist/components/ScrollRegion.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+type ScrollRegionProps = {
+    children: ReactNode;
+    className: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+/**
+ * Private wrapper that scrolls wide content inside its own box (see
+ * `scrollRegionRules`). It is a keyboard stop named after its content, so a
+ * wide table with no focusable cell can still be scrolled sideways from the
+ * keyboard and is announced as one group.
+ */
+export declare function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ScrollRegionProps): import("react").JSX.Element;
+export {};

package/dist/components/ScrollRegion.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Private wrapper that scrolls wide content inside its own box (see
+ * `scrollRegionRules`). It is a keyboard stop named after its content, so a
+ * wide table with no focusable cell can still be scrolled sideways from the
+ * keyboard and is announced as one group.
+ */
+export function ScrollRegion({ children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) {
+    return (_jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: className, role: "group", tabIndex: 0, children: children }));
+}

package/dist/components/Table.d.ts

@@ -4,11 +4,7 @@ export type TableProps = HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;
 };
-/**
- * The scroll wrapper is a keyboard stop named after the table, so a wide
- * table with no focusable cell can still be scrolled sideways from the
- * keyboard and is announced as one group.
- */
+/** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
 export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
     density?: TableDensity;
     stickyHeader?: boolean;

package/dist/components/Table.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
-/**
- * The scroll wrapper is a keyboard stop named after the table, so a wide
- * table with no focusable cell can still be scrolled sideways from the
- * keyboard and is announced as one group.
- */
+import { ScrollRegion } from './ScrollRegion.js';
+/** A wide table scrolls inside its own `ScrollRegion`, named after the table. */
 export const Table = forwardRef(function Table({ children, className, density = 'comfortable', stickyHeader = true, ...rest }, ref) {
-    return (_jsx("div", { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", role: "group", tabIndex: 0, children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
+    return (_jsx(ScrollRegion, { "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
 });
 export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
     return _jsx("thead", { ref: ref, className: className, ...rest });

package/dist/components/denomination-grid/DenominationStrip.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellView } from '../../denomination-cells.js';
+import { ScrollRegion } from '../ScrollRegion.js';
 export function DenominationStrip({ label, columns, rows, zeroLabel, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
-    return (_jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx("td", { className: "sw-denomination-corner" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsxs("th", { className: "sw-denomination-label", scope: "row", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }), columns.map((column, index) => {
-                            const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-                            return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
-                        }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll", children: _jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx("td", { className: "sw-denomination-corner" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
+                                const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+                                return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
+                            }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }) }));
 }

package/dist/css/css-button.js

@@ -11,7 +11,8 @@ export function buttonClassNames(options) {
 function variantRules() {
     return [
         `.sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }`,
-        `.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }`,
+        `.sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }`,
+        `.sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }`,
         `.sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }`,
         `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
     ].join('\n');

package/dist/css/css-components.js

@@ -26,6 +26,32 @@ import { cssGridSpanClasses } from './css-grid-span.js';
 import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
 import { cssToastClasses } from './css-toast.js';
+/*
+ * Reduce Transparency swaps every glass surface for the solid surface. It is
+ * emitted after every component rule: at equal specificity the later rule wins,
+ * so a glass rule emitted after this block would keep its blur.
+ */
+function reducedTransparencyRules() {
+    return `@media (prefers-reduced-transparency: reduce) {
+  .sw-card-glass,
+  .sw-app-header,
+  .sw-badge-neutral,
+  .sw-segmented,
+  .sw-table-sticky thead th,
+  .sw-denomination-strip .sw-denomination-label,
+  .sw-denomination-strip thead .sw-denomination-corner:first-child,
+  .sw-bar-chart-track,
+  .sw-dialog,
+  .sw-accordion,
+  .sw-select-list,
+  .sw-action-menu-list,
+  .sw-toast {
+    background: var(--sw-color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}`;
+}
 function textVariantRules() {
     return Object.entries(typographyVariants)
         .map(([name, variant]) => {
@@ -74,23 +100,9 @@ export function cssComponentClasses() {
   box-shadow: var(--sw-elevation-sm);
 }
 
-@media (prefers-reduced-transparency: reduce) {
-  .sw-card-glass,
-  .sw-app-header,
-  .sw-button-secondary,
-  .sw-badge-neutral,
-  .sw-segmented,
-  .sw-table-sticky thead th,
-  .sw-bar-chart-track,
-  .sw-dialog,
-  .sw-accordion,
-  .sw-select-list,
-  .sw-action-menu-list,
-  .sw-toast {
-    background: var(--sw-color-surface);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
+/* Plain information on a quiet fill, apart from rows that press. */
+.sw-card-filled {
+  background: var(--sw-color-subtle);
 }
 
 .sw-text-align-start { text-align: start; }
@@ -159,5 +171,7 @@ ${cssSplitClasses()}
 
 ${cssToastClasses()}
 
-${cssResponsiveClasses()}`;
+${cssResponsiveClasses()}
+
+${reducedTransparencyRules()}`;
 }

package/dist/css/css-data.js

@@ -1,4 +1,5 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
+import { scrollRegionRules } from './css-scroll-region.js';
 export const badgeTones = [
     'neutral',
     'accent',
@@ -134,15 +135,7 @@ export function cssDataClasses() {
   cursor: not-allowed;
 }
 
-.sw-table-wrap {
-  overflow: auto;
-  width: 100%;
-}
-
-.sw-table-wrap:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: calc(-1 * var(--sw-focus-ring-width));
-}
+${scrollRegionRules('.sw-table-wrap')}
 
 .sw-table {
   border-collapse: collapse;

package/dist/css/css-denomination-grid.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { scrollRegionRules } from './css-scroll-region.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
 const label = typographyVariants.label;
@@ -20,6 +21,8 @@ export function cssDenominationGridClasses() {
 
 ${toneRules()}
 
+${scrollRegionRules('.sw-denomination-scroll')}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -49,20 +52,56 @@ ${toneRules()}
 }
 
 .sw-denomination-label {
-  align-items: center;
   border-inline-start: var(--sw-space-1) solid var(--sw-denomination-tone);
   color: var(--sw-denomination-tone);
-  display: flex;
-  flex-wrap: wrap;
   font-size: ${label.fontSize}px;
   font-weight: ${label.fontWeight};
-  gap: var(--sw-space-2);
   letter-spacing: ${label.letterSpacing}px;
   line-height: ${label.lineHeight}px;
   min-width: 0;
   text-align: start;
 }
 
+.sw-denomination-tiles .sw-denomination-label,
+.sw-denomination-label-body {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+/*
+ * The row labels and the header corner above them stay in view while a wide
+ * strip scrolls under them, so each column head stays over its counts.
+ */
+.sw-denomination-strip .sw-denomination-label,
+.sw-denomination-strip thead .sw-denomination-corner:first-child {
+  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));
+  inset-inline-start: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+/*
+ * A collapsed-table border does not travel with a sticky cell in every
+ * browser, so the pinned label draws its tone stripe as its own box.
+ */
+.sw-denomination-strip .sw-denomination-label {
+  border-inline-start: 0;
+  padding-inline-start: calc(var(--sw-space-2) + var(--sw-space-1));
+}
+
+.sw-denomination-strip .sw-denomination-label::before {
+  background: var(--sw-denomination-tone);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  width: var(--sw-space-1);
+}
+
 .sw-denomination-icon {
   display: inline-flex;
   flex: none;
@@ -172,14 +211,16 @@ ${toneRules()}
 @media ${breakpointQuery('below', 'md')} {
   .sw-denomination-strip .sw-denomination-total { display: none; }
   .sw-denomination-total-inline { display: block; }
-  .sw-denomination-strip .sw-denomination-label { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip th,
   .sw-denomination-strip td { padding: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-label { padding-inline-start: calc(var(--sw-space-1) * 2); }
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
 @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; }
   .sw-denomination-cell-zero { color: GrayText; opacity: 1; }
   .sw-denomination-cell-negative,
   .sw-denomination-row-signed .sw-denomination-cell-positive,
@@ -190,6 +231,7 @@ ${toneRules()}
 export function denominationGridClassCatalog() {
     return [
         'sw-denomination-grid',
+        'sw-denomination-scroll',
         ...badgeTones.map((tone) => `sw-denomination-row-${tone}`),
         'sw-denomination-strip',
         'sw-denomination-head',
@@ -197,6 +239,7 @@ export function denominationGridClassCatalog() {
         'sw-denomination-row',
         'sw-denomination-row-signed',
         'sw-denomination-label',
+        'sw-denomination-label-body',
         'sw-denomination-label-text',
         'sw-denomination-icon',
         'sw-denomination-cell',

package/dist/css/css-palettes.js

@@ -1,4 +1,4 @@
-import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, semanticColorKeys, } from '@scalewing/tokens';
+import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 function paletteCustomProperties(id, scheme) {
     const overlay = colorsForPalette(id, scheme);
     const theme = createTheme({ colorScheme: scheme, palette: id });
@@ -8,6 +8,10 @@ function paletteCustomProperties(id, scheme) {
             lines.push(`  --sw-color-${key}: ${theme.colors[key]};`);
         }
     }
+    // The secondary outline derives from these three, so it follows them.
+    if (overlay.secondary || overlay.surface || overlay.border) {
+        lines.push(`  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`);
+    }
     lines.push(`  --sw-glass-blur: ${theme.glass.blur}px;`);
     lines.push(`  --sw-glass-saturate: ${theme.glass.saturate};`);
     lines.push(`  --sw-glass-fill: ${theme.glass.fill};`);

package/dist/css/css-scroll-region.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A scroll region is a full-width box that scrolls its own content when the
+ * content is wider (or taller) than the box, so a wide table never widens the
+ * page. It is a keyboard stop, so its focus ring is drawn inside its edge
+ * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
+ * strip share it.
+ */
+export declare function scrollRegionRules(selector: string): string;

package/dist/css/css-scroll-region.js

@@ -0,0 +1,18 @@
+/**
+ * A scroll region is a full-width box that scrolls its own content when the
+ * content is wider (or taller) than the box, so a wide table never widens the
+ * page. It is a keyboard stop, so its focus ring is drawn inside its edge
+ * where an ancestor's clipping cannot hide it. Table and the DenominationGrid
+ * strip share it.
+ */
+export function scrollRegionRules(selector) {
+    return `${selector} {
+  overflow: auto;
+  width: 100%;
+}
+
+${selector}:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}`;
+}

package/dist/css/css-variables.js

@@ -1,8 +1,9 @@
-import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+import { 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]};`)
-        .join('\n');
+    return [
+        ...semanticColorKeys.map((key) => `  --sw-color-${key}: ${theme.colors[key]};`),
+        `  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`,
+    ].join('\n');
 }
 function glassDeclarations(theme) {
     return `  --sw-glass-blur: ${theme.glass.blur}px;

package/dist/palette/harvest.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #3E3E24;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #C9C2AE;
+  --sw-button-secondary-border: #C9C2AE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #CEA453;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3D5238;
+  --sw-button-secondary-border: #3D5238;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(60, 52, 40, 0.72);

package/dist/palette/mocha.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #473333;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E0CBA8;
+  --sw-button-secondary-border: #E0CBA8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #E8C69F;
   --sw-color-onAccent: #101214;
   --sw-color-border: #6B5353;
+  --sw-button-secondary-border: #6B5353;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(65, 59, 53, 0.72);

package/dist/palette/postcard.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #A33B2B;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #D0D0B8;
+  --sw-button-secondary-border: #D0D0B8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #EEAF90;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3A4158;
+  --sw-button-secondary-border: #3A4158;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(66, 54, 51, 0.72);

package/dist/palette/signal.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #1D1D1F;
+  --sw-color-onSecondary: #FFFFFF;
+  --sw-color-tertiary: #7C5CD6;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-button-secondary-border: #1D1D1F;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-color-secondary: #F5F5F7;
+  --sw-color-onSecondary: #101214;
+  --sw-color-tertiary: #C4B5FD;
+  --sw-color-onTertiary: #101214;
+  --sw-button-secondary-border: #F5F5F7;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}

package/dist/palette/sunburst.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #A33B20;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E5C48A;
+  --sw-button-secondary-border: #E5C48A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #FAA968;
   --sw-color-onAccent: #101214;
   --sw-color-border: #1A5A70;
+  --sw-button-secondary-border: #1A5A70;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 53, 43, 0.72);

package/dist/palette/synthwave.css

@@ -18,6 +18,7 @@
   --sw-color-accent: #FF2A6D;
   --sw-color-onAccent: #101214;
   --sw-color-border: #4A2C6A;
+  --sw-button-secondary-border: #4A2C6A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(69, 31, 44, 0.72);

package/dist/styles.css

@@ -7,11 +7,17 @@
   --sw-color-muted: #6E6E73;
   --sw-color-accent: #5B3DF5;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #FFFFFF;
+  --sw-color-onSecondary: #1D1D1F;
+  --sw-color-tertiary: #48484A;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-color-subtle: #F2F2F5;
   --sw-color-danger: #B42318;
   --sw-color-onDanger: #FFFFFF;
   --sw-color-success: #087443;
   --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
+  --sw-button-secondary-border: #D2D2D7;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -64,11 +70,17 @@
   --sw-color-muted: #A1A1A6;
   --sw-color-accent: #A78BFA;
   --sw-color-onAccent: #101214;
+  --sw-color-secondary: #1C1C1E;
+  --sw-color-onSecondary: #F5F5F7;
+  --sw-color-tertiary: #D1D1D6;
+  --sw-color-onTertiary: #101214;
+  --sw-color-subtle: #2C2C2E;
   --sw-color-danger: #F97066;
   --sw-color-onDanger: #101214;
   --sw-color-success: #5BE0A0;
   --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
+  --sw-button-secondary-border: #3A3A3C;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -134,6 +146,36 @@
   --sw-glass-specular: rgba(222, 244, 254, 0.28);
 }
 
+[data-theme='light'][data-palette='signal'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #1D1D1F;
+  --sw-color-onSecondary: #FFFFFF;
+  --sw-color-tertiary: #7C5CD6;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-button-secondary-border: #1D1D1F;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='signal'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-color-secondary: #F5F5F7;
+  --sw-color-onSecondary: #101214;
+  --sw-color-tertiary: #C4B5FD;
+  --sw-color-onTertiary: #101214;
+  --sw-button-secondary-border: #F5F5F7;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}
+
 [data-theme='light'][data-palette='navy'] {
   --sw-color-accent: #0A2540;
   --sw-color-onAccent: #FFFFFF;
@@ -342,6 +384,7 @@
   --sw-color-accent: #A33B20;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E5C48A;
+  --sw-button-secondary-border: #E5C48A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -357,6 +400,7 @@
   --sw-color-accent: #FAA968;
   --sw-color-onAccent: #101214;
   --sw-color-border: #1A5A70;
+  --sw-button-secondary-border: #1A5A70;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 53, 43, 0.72);
@@ -372,6 +416,7 @@
   --sw-color-accent: #3E3E24;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #C9C2AE;
+  --sw-button-secondary-border: #C9C2AE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -387,6 +432,7 @@
   --sw-color-accent: #CEA453;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3D5238;
+  --sw-button-secondary-border: #3D5238;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(60, 52, 40, 0.72);
@@ -402,6 +448,7 @@
   --sw-color-accent: #A33B2B;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #D0D0B8;
+  --sw-button-secondary-border: #D0D0B8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -417,6 +464,7 @@
   --sw-color-accent: #EEAF90;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3A4158;
+  --sw-button-secondary-border: #3A4158;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(66, 54, 51, 0.72);
@@ -432,6 +480,7 @@
   --sw-color-accent: #473333;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E0CBA8;
+  --sw-button-secondary-border: #E0CBA8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -447,6 +496,7 @@
   --sw-color-accent: #E8C69F;
   --sw-color-onAccent: #101214;
   --sw-color-border: #6B5353;
+  --sw-button-secondary-border: #6B5353;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(65, 59, 53, 0.72);
@@ -472,6 +522,7 @@
   --sw-color-accent: #FF2A6D;
   --sw-color-onAccent: #101214;
   --sw-color-border: #4A2C6A;
+  --sw-button-secondary-border: #4A2C6A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(69, 31, 44, 0.72);
@@ -700,23 +751,9 @@ body {
   box-shadow: var(--sw-elevation-sm);
 }
 
-@media (prefers-reduced-transparency: reduce) {
-  .sw-card-glass,
-  .sw-app-header,
-  .sw-button-secondary,
-  .sw-badge-neutral,
-  .sw-segmented,
-  .sw-table-sticky thead th,
-  .sw-bar-chart-track,
-  .sw-dialog,
-  .sw-accordion,
-  .sw-select-list,
-  .sw-action-menu-list,
-  .sw-toast {
-    background: var(--sw-color-surface);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
+/* Plain information on a quiet fill, apart from rows that press. */
+.sw-card-filled {
+  background: var(--sw-color-subtle);
 }
 
 .sw-text-align-start { text-align: start; }
@@ -779,7 +816,8 @@ body {
 }
 
 .sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
-.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }
+.sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }
+.sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }
 .sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
 .sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
@@ -2217,6 +2255,16 @@ body {
 .sw-denomination-row-danger { --sw-denomination-tone: var(--sw-color-danger); }
 .sw-denomination-row-warning { --sw-denomination-tone: var(--sw-color-warning); }
 
+.sw-denomination-scroll {
+  overflow: auto;
+  width: 100%;
+}
+
+.sw-denomination-scroll:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
 .sw-denomination-strip {
   border-collapse: collapse;
   width: 100%;
@@ -2246,20 +2294,56 @@ body {
 }
 
 .sw-denomination-label {
-  align-items: center;
   border-inline-start: var(--sw-space-1) solid var(--sw-denomination-tone);
   color: var(--sw-denomination-tone);
-  display: flex;
-  flex-wrap: wrap;
   font-size: 15px;
   font-weight: 600;
-  gap: var(--sw-space-2);
   letter-spacing: -0.2px;
   line-height: 20px;
   min-width: 0;
   text-align: start;
 }
 
+.sw-denomination-tiles .sw-denomination-label,
+.sw-denomination-label-body {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+/*
+ * The row labels and the header corner above them stay in view while a wide
+ * strip scrolls under them, so each column head stays over its counts.
+ */
+.sw-denomination-strip .sw-denomination-label,
+.sw-denomination-strip thead .sw-denomination-corner:first-child {
+  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));
+  inset-inline-start: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+/*
+ * A collapsed-table border does not travel with a sticky cell in every
+ * browser, so the pinned label draws its tone stripe as its own box.
+ */
+.sw-denomination-strip .sw-denomination-label {
+  border-inline-start: 0;
+  padding-inline-start: calc(var(--sw-space-2) + var(--sw-space-1));
+}
+
+.sw-denomination-strip .sw-denomination-label::before {
+  background: var(--sw-denomination-tone);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  width: var(--sw-space-1);
+}
+
 .sw-denomination-icon {
   display: inline-flex;
   flex: none;
@@ -2369,14 +2453,16 @@ body {
 @media not all and (min-width: 48rem) {
   .sw-denomination-strip .sw-denomination-total { display: none; }
   .sw-denomination-total-inline { display: block; }
-  .sw-denomination-strip .sw-denomination-label { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip th,
   .sw-denomination-strip td { padding: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-label { padding-inline-start: calc(var(--sw-space-1) * 2); }
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
 @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; }
   .sw-denomination-cell-zero { color: GrayText; opacity: 1; }
   .sw-denomination-cell-negative,
   .sw-denomination-row-signed .sw-denomination-cell-positive,
@@ -2563,3 +2649,23 @@ body {
 @media not all and (min-width: 48rem) {
   .sw-hide-below-md { display: none; }
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-card-glass,
+  .sw-app-header,
+  .sw-badge-neutral,
+  .sw-segmented,
+  .sw-table-sticky thead th,
+  .sw-denomination-strip .sw-denomination-label,
+  .sw-denomination-strip thead .sw-denomination-corner:first-child,
+  .sw-bar-chart-track,
+  .sw-dialog,
+  .sw-accordion,
+  .sw-select-list,
+  .sw-action-menu-list,
+  .sw-toast {
+    background: var(--sw-color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

package/dist/theme/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
-import { createTheme, semanticColorKeys, } from '@scalewing/tokens';
+import { createTheme, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 const ThemeContext = createContext(null);
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
@@ -16,6 +16,7 @@ function themeCssVars(theme) {
     for (const key of semanticColorKeys) {
         vars[`--sw-color-${key}`] = theme.colors[key];
     }
+    vars['--sw-button-secondary-border'] = secondaryActionBorder(theme.colors);
     vars['--sw-glass-blur'] = `${theme.glass.blur}px`;
     vars['--sw-glass-saturate'] = String(theme.glass.saturate);
     vars['--sw-glass-fill'] = theme.glass.fill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "^1.2.0"
+    "@scalewing/tokens": "^1.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",