@axiapps/axi-design 1.36.0 → 1.37.0

package/dist/axi.css

@@ -2402,9 +2402,68 @@ textarea.axi-input {
 /* The row under the cursor comes forward on the neutral ramp. Not an ink:
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
-   about. */
-.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
+   about.
+
+   ONE SURFACE, MANY ELEMENTS - the attachment below, and on the sticky head,
+   the pinned column and the prose table's head, which are the four places in
+   this language where that is the shape of the problem. Everywhere else a
+   themed fill lands on a single box: a panel, a rail, a toolbar, one hovered
+   row of a palette. A table's surfaces are ASSEMBLED. A hovered row is every
+   cell in it, a sticky head is a row of `th`, a pinned name column is one cell
+   per row - one strip to the eye and N painting areas to the renderer. A theme
+   is allowed to make any surface a gradient and glass makes all three of them
+   one, so each cell restarts the ramp and the strip arrives as a row of
+   separately lit boxes with a seam at every boundary.
+
+   Fixed is the same idiom as `body`, `.axi-mast` and `.axi-sheet`, for the
+   reason .axi-mast gives at length: an element shows its SHARE of one light
+   rather than its own private copy of it. Give the cells of a strip a shared
+   painting area and they resolve back into the one surface they were always
+   drawing. Note what the fix does NOT depend on: which box ends up shared. A
+   filtered ancestor - any panel under a glass theme, since --axi-surface-filter
+   is a backdrop-filter and establishes a containing block, the trap that
+   token's own comment points at - takes the painting area from the viewport and
+   makes it the panel's. Both are shared by every cell in the band, so both are
+   continuous; the ancestor only decides where the light sits, which is a
+   question with no wrong answer here. What is not available is the obvious
+   alternative of filling the container and leaving the cells transparent: a
+   sticky head has to carry its own fill, because a fill on `thead` stays
+   behind while the cells travel. */
+.axi-table tbody tr:hover :is(td, th) {
+  background: var(--axi-surface-raised);
+  background-attachment: fixed;
+  color: var(--axi-text);
+}
 /* The measured value in a row, as opposed to its supporting numbers. */
+/* A row that is the one currently shown somewhere else -- a detail pane, a
+   chart, a second table. `aria-current`, for the same reason `aria-sort` above
+   carries the sorted column and `.axi-rail__item[aria-current]` carries the
+   chosen place: the attribute a screen reader already needs in order to announce
+   the row is the whole fact, and a class beside it would be a second source of
+   truth for one thing.
+
+   The fill is the float step, not the raised one, and the reason is the hover
+   directly above: hovering a row ALREADY raises it, so a selection drawn at the
+   raised step is indistinguishable from the row under the cursor -- and every
+   consumer who has hand-written this state has hit that and reached for a hue
+   instead, which is rule 2's tinted-everything failure arrived at honestly.
+   Hover is a transient lift and selection is a held one, so selection sits one
+   step beyond it and hovering a selected row must not pull it back down.
+
+   No accent, and no leading edge either. The accent is for one claim per screen
+   and a selected row spends it on something a detail pane usually spends again;
+   an edge would need a border reserved on every cell of every row, which is the
+   grid-of-boxes rule 8 refuses. The attachment is the one-surface-many-elements
+   case, same as the hover. */
+.axi-table tbody tr[aria-current] :is(td, th) {
+  background: var(--axi-surface-float);
+  background-attachment: fixed;
+  color: var(--axi-text);
+}
+.axi-table tbody tr[aria-current]:hover :is(td, th) {
+  background: var(--axi-surface-float);
+  background-attachment: fixed;
+}
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
 .axi-table__who { display: flex; align-items: center; gap: 9px; }
@@ -2453,8 +2512,14 @@ textarea.axi-input {
      --axi-surface-float exists: rows travel behind both of these, and a glass
      theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
      would have numbers sliding through it. Opaque is not a look here, it is
-     the requirement. */
+     the requirement.
+
+     Opaque and a gradient, under glass, which is why the attachment is here:
+     the head is a row of cells and this is the one-surface-many-elements case
+     the hover rule explains. Nothing about the sticky positioning changes it -
+     a sticky box is still its own painting area. */
   background: var(--axi-surface-float);
+  background-attachment: fixed;
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
 }
 /* The first column stays. It holds the row's name, and a name scrolled out of
@@ -2466,7 +2531,10 @@ textarea.axi-input {
   position: sticky;
   left: 0;
   z-index: 1;
+  /* The same strip as the head, turned ninety degrees, so the same attachment:
+     one cell per row means forty painting areas down a single column. */
   background: var(--axi-surface-float);
+  background-attachment: fixed;
   border-right: var(--axi-border-control) solid var(--axi-ink-line);
 }
 /* The corner belongs to both and has to outrank both. */
@@ -2836,9 +2904,16 @@ textarea.axi-input {
   overflow: hidden;
   font-size: 13.5px;
 }
+/* A markdown table's head is a row of cells filled from a themed surface, so
+   it is the one-surface-many-elements case `.axi-table tbody tr:hover` sets
+   out in data.css, and it takes the same attachment. Nothing here is sticky,
+   which makes no difference: the seam is per-cell repetition of the gradient,
+   not anything to do with scrolling. */
 .axi-prose th {
   text-align: left; padding: 10px 12px;
-  background: var(--axi-surface-raised); color: var(--axi-text);
+  background: var(--axi-surface-raised);
+  background-attachment: fixed;
+  color: var(--axi-text);
   font: var(--axi-t-micro); letter-spacing: var(--axi-ls-micro); text-transform: uppercase;
 }
 .axi-prose td { padding: 10px 12px; border-top: var(--axi-border-hairline) solid var(--axi-rule); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/data.css

@@ -100,9 +100,68 @@
 /* The row under the cursor comes forward on the neutral ramp. Not an ink:
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
-   about. */
-.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
+   about.
+
+   ONE SURFACE, MANY ELEMENTS - the attachment below, and on the sticky head,
+   the pinned column and the prose table's head, which are the four places in
+   this language where that is the shape of the problem. Everywhere else a
+   themed fill lands on a single box: a panel, a rail, a toolbar, one hovered
+   row of a palette. A table's surfaces are ASSEMBLED. A hovered row is every
+   cell in it, a sticky head is a row of `th`, a pinned name column is one cell
+   per row - one strip to the eye and N painting areas to the renderer. A theme
+   is allowed to make any surface a gradient and glass makes all three of them
+   one, so each cell restarts the ramp and the strip arrives as a row of
+   separately lit boxes with a seam at every boundary.
+
+   Fixed is the same idiom as `body`, `.axi-mast` and `.axi-sheet`, for the
+   reason .axi-mast gives at length: an element shows its SHARE of one light
+   rather than its own private copy of it. Give the cells of a strip a shared
+   painting area and they resolve back into the one surface they were always
+   drawing. Note what the fix does NOT depend on: which box ends up shared. A
+   filtered ancestor - any panel under a glass theme, since --axi-surface-filter
+   is a backdrop-filter and establishes a containing block, the trap that
+   token's own comment points at - takes the painting area from the viewport and
+   makes it the panel's. Both are shared by every cell in the band, so both are
+   continuous; the ancestor only decides where the light sits, which is a
+   question with no wrong answer here. What is not available is the obvious
+   alternative of filling the container and leaving the cells transparent: a
+   sticky head has to carry its own fill, because a fill on `thead` stays
+   behind while the cells travel. */
+.axi-table tbody tr:hover :is(td, th) {
+  background: var(--axi-surface-raised);
+  background-attachment: fixed;
+  color: var(--axi-text);
+}
 /* The measured value in a row, as opposed to its supporting numbers. */
+/* A row that is the one currently shown somewhere else -- a detail pane, a
+   chart, a second table. `aria-current`, for the same reason `aria-sort` above
+   carries the sorted column and `.axi-rail__item[aria-current]` carries the
+   chosen place: the attribute a screen reader already needs in order to announce
+   the row is the whole fact, and a class beside it would be a second source of
+   truth for one thing.
+
+   The fill is the float step, not the raised one, and the reason is the hover
+   directly above: hovering a row ALREADY raises it, so a selection drawn at the
+   raised step is indistinguishable from the row under the cursor -- and every
+   consumer who has hand-written this state has hit that and reached for a hue
+   instead, which is rule 2's tinted-everything failure arrived at honestly.
+   Hover is a transient lift and selection is a held one, so selection sits one
+   step beyond it and hovering a selected row must not pull it back down.
+
+   No accent, and no leading edge either. The accent is for one claim per screen
+   and a selected row spends it on something a detail pane usually spends again;
+   an edge would need a border reserved on every cell of every row, which is the
+   grid-of-boxes rule 8 refuses. The attachment is the one-surface-many-elements
+   case, same as the hover. */
+.axi-table tbody tr[aria-current] :is(td, th) {
+  background: var(--axi-surface-float);
+  background-attachment: fixed;
+  color: var(--axi-text);
+}
+.axi-table tbody tr[aria-current]:hover :is(td, th) {
+  background: var(--axi-surface-float);
+  background-attachment: fixed;
+}
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
 .axi-table__who { display: flex; align-items: center; gap: 9px; }
@@ -151,8 +210,14 @@
      --axi-surface-float exists: rows travel behind both of these, and a glass
      theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
      would have numbers sliding through it. Opaque is not a look here, it is
-     the requirement. */
+     the requirement.
+
+     Opaque and a gradient, under glass, which is why the attachment is here:
+     the head is a row of cells and this is the one-surface-many-elements case
+     the hover rule explains. Nothing about the sticky positioning changes it -
+     a sticky box is still its own painting area. */
   background: var(--axi-surface-float);
+  background-attachment: fixed;
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
 }
 /* The first column stays. It holds the row's name, and a name scrolled out of
@@ -164,7 +229,10 @@
   position: sticky;
   left: 0;
   z-index: 1;
+  /* The same strip as the head, turned ninety degrees, so the same attachment:
+     one cell per row means forty painting areas down a single column. */
   background: var(--axi-surface-float);
+  background-attachment: fixed;
   border-right: var(--axi-border-control) solid var(--axi-ink-line);
 }
 /* The corner belongs to both and has to outrank both. */

package/src/prose.css

@@ -76,9 +76,16 @@
   overflow: hidden;
   font-size: 13.5px;
 }
+/* A markdown table's head is a row of cells filled from a themed surface, so
+   it is the one-surface-many-elements case `.axi-table tbody tr:hover` sets
+   out in data.css, and it takes the same attachment. Nothing here is sticky,
+   which makes no difference: the seam is per-cell repetition of the gradient,
+   not anything to do with scrolling. */
 .axi-prose th {
   text-align: left; padding: 10px 12px;
-  background: var(--axi-surface-raised); color: var(--axi-text);
+  background: var(--axi-surface-raised);
+  background-attachment: fixed;
+  color: var(--axi-text);
   font: var(--axi-t-micro); letter-spacing: var(--axi-ls-micro); text-transform: uppercase;
 }
 .axi-prose td { padding: 10px 12px; border-top: var(--axi-border-hairline) solid var(--axi-rule); }