@scalewing/react 1.35.0 → 1.35.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.35.1
+
+### Patch Changes
+
+- 521903d: `Table` `stickyHeader` (`true` or `'page'`) now pins the whole `TableHeader` as one group (Teisoro F-011 task 2200): the `thead` is sticky, not each `thead th`, so a row under the column headings (such as a running total) stays in view right under them with all its cells, `td` as well as `th`, where before only its `th` pinned (at the same edge as the headings) and its `td` cells scrolled away. Every pinned head cell is on the glass (solid under Reduce Transparency, the system canvas in forced colours) and draws its row rule on its own `::before` instead of a collapsed bottom border, which stayed behind as the row moved and left a gap the rows under it showed through. No public API change, no new class, no new tokens, no new dependency.
+
 ## 1.35.0
 
 ### Minor Changes

package/README.md

@@ -416,7 +416,7 @@ A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `
 
 A ledger read across as well as down takes `Table` `columnRules` (a hairline at the inline start of every cell after a row's first, mirrored right to left) and `TableCell` `tone` (`success`, `danger`, `muted` or `accent`: the cell's text in the theme colour, as `Text color` uses it; never the only signal, so keep the sign or the words). `TableRow` `variant="sub"` (default `"default"`) sets a row under the one above, as a batch's items: its row header, a `TableCell as="th" scope="row"`, is indented a `space-6` step with a guide bar at the indent (a sub row without a row header is not indented). `TableRow` `struck` keeps a voided row on the record: the subtle fill and the text muted and struck through, toned cells included; it works with either variant. A line-through is not read aloud, so say why in the row, such as a `Badge` "Voided": a Badge in a line of text is not struck, but one that is itself a flex item (a direct child of `Inline`) is, so put it in the title's line. A row header in the body or footer (`th scope="row"`) reads as body text. An unknown `tone` or `variant` throws a `RangeError`.
 
-`Table` `stickyHeader` pins the header row: `true` (default) to the top of the table's own scroll region, `false` lets it scroll away, and `'page'` pins it to the page's top as the page scrolls. With `'page'`, while the table fits its width its region stops being a scroll box (`sw-table-sticky-page`), so the header stays in view under any sticky `AppHeader` (which covers it); a table wider than its region scrolls sideways in it and pins inside it. Use it for a long table whose last row, such as a non-sticky `TableFooter` total, should scroll with the rows. An unknown value throws a `RangeError`.
+`Table` `stickyHeader` pins the header: the whole `TableHeader` as one group, every row in it (the column headings and any row under them, such as a running total) with all its cells, `th` and `td`, each row under the one above, on the glass with its row and column rules. `true` (default) pins it to the top of the table's own scroll region, `false` lets it scroll away, and `'page'` pins it to the page's top as the page scrolls. With `'page'`, while the table fits its width its region stops being a scroll box (`sw-table-sticky-page`), so the header stays in view under any sticky `AppHeader` (which covers it); a table wider than its region scrolls sideways in it and pins inside it. Use it for a long table whose last row, such as a non-sticky `TableFooter` total, should scroll with the rows. An unknown value throws a `RangeError`.
 
 ```tsx
 <Table aria-label="Site census" stickyHeader="page">

package/dist/css/css-components.js

@@ -56,7 +56,7 @@ function reducedTransparencyRules() {
   .sw-steps-item,
   .sw-badge-neutral,
   .sw-segmented,
-  .sw-table-sticky thead th,
+  .sw-table-sticky thead :is(th, td),
   .sw-table .sw-table-footer-sticky :is(th, td),
   .sw-denomination-strip .sw-denomination-label,
   .sw-denomination-strip thead .sw-denomination-corner:first-child,

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

@@ -9,7 +9,7 @@ import { zIndex } from './stacking.js';
  * 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
+ * the cells and the pinned head group, under the ActionBar, which covers
  * it, so a page does not pair the two. Where it pins (the page or the
  * table's own region) is `css-table-page-pin.ts`.
  */
@@ -41,7 +41,7 @@ export function cssTableFooterClasses() {
 @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; }
+  .sw-table-sticky thead :is(th, td) { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }`;
 }
 export function tableFooterClassCatalog() {

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

@@ -54,9 +54,10 @@ export function cssTableLedgerClasses() {
   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. */
+/* A pinned head cell (in a sticky header group) 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: '';

package/dist/css/css-table-sticky-header.d.ts

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

package/dist/css/css-table-sticky-header.js

@@ -0,0 +1,52 @@
+import { zIndex } from './stacking.js';
+/*
+ * A sticky header pins the table's whole head group, not cell by cell: the
+ * `thead` itself is sticky at the top edge, so every row in it (the column
+ * headings and any row under them, such as a running total) and every cell
+ * in those rows, `th` and `td` alike, stays in view together, each row at
+ * its own offset under the one above. A cell-by-cell pin would leave a
+ * second row's `td` cells to scroll away and stack every row's `th` at the
+ * same edge. Where the group pins (the page or the table's own region) is
+ * `css-table-page-pin.ts`.
+ *
+ * Each pinned cell is on the glass (solid surface under Reduce
+ * Transparency, the system canvas in forced colours), so the rows that
+ * scroll under the group never show through, and positioned, so its rules
+ * can draw on it. A collapsed border stays where the cell was as the cell
+ * moves and leaves a gap the rows under it show through, so a pinned
+ * cell has none at its bottom and draws its row rule as a border on its
+ * own ::before (forced colours keep it), as its column rule is on its
+ * ::after (`css-table-ledger.ts`). The group is on the `stickyCell`
+ * layer, over the body cells and under a pinned footer.
+ */
+export function cssTableStickyHeaderClasses() {
+    return `.sw-table-sticky thead {
+  position: sticky;
+  top: 0;
+  ${zIndex('stickyCell')}
+}
+
+.sw-table-sticky thead :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));
+  border-bottom: 0;
+  position: relative;
+}
+
+.sw-table-sticky thead :is(th, td)::before {
+  border-bottom: 1px solid var(--sw-color-border);
+  content: '';
+  inset-block-end: 0;
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+@media (forced-colors: active) {
+  .sw-table-sticky thead :is(th, td)::before { border-color: CanvasText; }
+}`;
+}
+export function tableStickyHeaderClassCatalog() {
+    return ['sw-table-sticky'];
+}

package/dist/css/css-table.js

@@ -5,8 +5,8 @@ import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-led
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
+import { cssTableStickyHeaderClasses, tableStickyHeaderClassCatalog, } from './css-table-sticky-header.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
-import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 /*
  * A selected row is marked by an accent bar at its inline start and nothing
@@ -75,14 +75,7 @@ export function cssTableClasses() {
   overflow: hidden;
 }
 
-.sw-table-sticky thead th {
-  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));
-  position: sticky;
-  top: 0;
-  ${zIndex('stickyCell')}
-}
+${cssTableStickyHeaderClasses()}
 
 .sw-table-compact th,
 .sw-table-compact td {
@@ -110,7 +103,7 @@ export function tableClassCatalog() {
         'sw-table-end',
         'sw-table-numeric',
         'sw-table-clip',
-        'sw-table-sticky',
+        ...tableStickyHeaderClassCatalog(),
         'sw-table-compact',
         'sw-table-row-selected',
         ...tableLayoutClassCatalog(),

package/dist/css/stacking.js

@@ -2,8 +2,8 @@
  * The one stacking order of the generated stylesheet. Every generated
  * `z-index` reads a layer from here, lowest first:
  *
- * 1. `stickyCell`: a sticky table header cell or row label over the cells
- *    that scroll under it.
+ * 1. `stickyCell`: a sticky table head group (every row in a sticky
+ *    `thead`) or row label over the cells that scroll under it.
  * 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.

package/dist/styles.css

@@ -1600,15 +1600,33 @@ body {
   overflow: hidden;
 }
 
-.sw-table-sticky thead th {
-  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));
+.sw-table-sticky thead {
   position: sticky;
   top: 0;
   z-index: 1;
 }
 
+.sw-table-sticky thead :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));
+  border-bottom: 0;
+  position: relative;
+}
+
+.sw-table-sticky thead :is(th, td)::before {
+  border-bottom: 1px solid var(--sw-color-border);
+  content: '';
+  inset-block-end: 0;
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+@media (forced-colors: active) {
+  .sw-table-sticky thead :is(th, td)::before { border-color: CanvasText; }
+}
+
 .sw-table-compact th,
 .sw-table-compact td {
   padding: var(--sw-space-1) var(--sw-space-2);
@@ -1749,9 +1767,10 @@ body {
   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. */
+/* A pinned head cell (in a sticky header group) 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: '';
@@ -1834,7 +1853,7 @@ body {
 @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; }
+  .sw-table-sticky thead :is(th, td) { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
 .sw-table-wrap.sw-scroll-fits:has(> .sw-table > .sw-table-footer-sticky),
@@ -5671,7 +5690,7 @@ body {
   .sw-steps-item,
   .sw-badge-neutral,
   .sw-segmented,
-  .sw-table-sticky thead th,
+  .sw-table-sticky thead :is(th, td),
   .sw-table .sw-table-footer-sticky :is(th, td),
   .sw-denomination-strip .sw-denomination-label,
   .sw-denomination-strip thead .sw-denomination-corner:first-child,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.35.0",
+  "version": "1.35.1",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",