@axiapps/axi-design 1.35.0 → 1.37.0

package/dist/axi.css

@@ -743,6 +743,49 @@ button.axi-panel--tile:hover,
   padding: 1px 5px;
 }
 
+/* ---------- link ---------- */
+/* The same trap .axi-code was pulled out of, one component later. `.axi-prose
+   a` was the language's only word for a link, and it is reachable only by
+   adopting a whole typography layer - so a consumer with a "learn more" beside
+   a setting, or a docs URL in a modal footer, writes its own. One real consumer
+   had fifteen of them, hand-spelled, and a third of those were <button>s
+   calling an openExternal bridge rather than anchors at all.
+
+   Both selectors, one rule, for the reason written at .axi-code: a link in
+   rendered markdown and a link in interface copy are the same object, and the
+   last time this language spelled one object twice the two copies drifted.
+   There is a test that they stay one rule.
+
+   The underline is stated rather than inherited. An <a href> draws one by
+   default and a <button> does not, so leaving it to the user agent is exactly
+   how the two spellings would come apart - the declaration is a no-op on the
+   anchor and load-bearing on the button. Same for the background, border and
+   padding resets: they say nothing about an anchor and are the whole reason a
+   button can wear this class.
+
+   `font-family` and `font-size` inherit, but the weight does not: a link is
+   600 wherever it lands, and `font: inherit` would quietly take that away.
+
+   The hover is written `:where(:hover)` so it weighs one class and the ink
+   layer still lands on top - see rule 6's addendum. A link in a caption that
+   says `axi-link axi-ink-dim` must stay dim under the cursor, and the plain
+   `:hover` form is what made the danger button read white under one. */
+.axi-link,
+.axi-prose a {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  color: var(--axi-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.axi-link:where(:hover),
+.axi-prose a:where(:hover) { color: var(--axi-text); }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a
@@ -2359,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; }
@@ -2410,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
@@ -2423,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. */
@@ -2745,10 +2856,9 @@ textarea.axi-input {
 
 .axi-prose p { margin: 0 0 16px; }
 .axi-prose strong { color: var(--axi-text); font-weight: 800; }
-/* Prose is the one place a link should announce itself: a reader scanning an
-   article is looking for them, and inheriting the body ink would hide them. */
-.axi-prose a { color: var(--axi-accent); font-weight: 600; text-underline-offset: 2px; }
-.axi-prose a:hover { color: var(--axi-text); }
+/* A link is drawn beside .axi-code in primitives.css, in one rule with
+   `.axi-link`, because a link in an article and a link in interface copy are
+   the same object. See the comment there. */
 
 .axi-prose ul, .axi-prose ol { margin: 0 0 16px; padding-left: 22px; }
 .axi-prose li { margin: 0 0 7px; }
@@ -2794,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/docs/RULES.md

@@ -703,6 +703,20 @@ whole section exists to prevent.
 The test to write is not "does `.axi-code` exist". It is "are both spellings in
 the same rule", because only the second one fails when someone splits them.
 
+This has now happened twice. `.axi-prose a` was the language's only word for a
+link, and the same consumer had fifteen hand-spelled ones — a third of them
+`<button>`s calling a desktop bridge rather than anchors at all, which is what
+made the drift concrete rather than theoretical: an `<a href>` draws its own
+underline and a `<button>` does not, so the two spellings were not merely
+allowed to come apart, they had already come apart. When you lift a
+layer-scoped style out, look for the declarations the layer was getting for
+free from its element. Those are the ones the new spelling silently loses.
+
+Two instances is a pattern, so the check belongs at the top of the list when
+adding anything: grep `src/` for the component's style living behind a layer
+prefix. If it does, it has consumers you cannot see, and they have already
+drawn their own.
+
 ### A refusal holds at every level, not just the one it was written for
 
 The rail refuses two accent fills inside itself. That is why

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.35.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/primitives.css

@@ -450,6 +450,49 @@ button.axi-panel--tile:hover,
   padding: 1px 5px;
 }
 
+/* ---------- link ---------- */
+/* The same trap .axi-code was pulled out of, one component later. `.axi-prose
+   a` was the language's only word for a link, and it is reachable only by
+   adopting a whole typography layer - so a consumer with a "learn more" beside
+   a setting, or a docs URL in a modal footer, writes its own. One real consumer
+   had fifteen of them, hand-spelled, and a third of those were <button>s
+   calling an openExternal bridge rather than anchors at all.
+
+   Both selectors, one rule, for the reason written at .axi-code: a link in
+   rendered markdown and a link in interface copy are the same object, and the
+   last time this language spelled one object twice the two copies drifted.
+   There is a test that they stay one rule.
+
+   The underline is stated rather than inherited. An <a href> draws one by
+   default and a <button> does not, so leaving it to the user agent is exactly
+   how the two spellings would come apart - the declaration is a no-op on the
+   anchor and load-bearing on the button. Same for the background, border and
+   padding resets: they say nothing about an anchor and are the whole reason a
+   button can wear this class.
+
+   `font-family` and `font-size` inherit, but the weight does not: a link is
+   600 wherever it lands, and `font: inherit` would quietly take that away.
+
+   The hover is written `:where(:hover)` so it weighs one class and the ink
+   layer still lands on top - see rule 6's addendum. A link in a caption that
+   says `axi-link axi-ink-dim` must stay dim under the cursor, and the plain
+   `:hover` form is what made the danger button read white under one. */
+.axi-link,
+.axi-prose a {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  color: var(--axi-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.axi-link:where(:hover),
+.axi-prose a:where(:hover) { color: var(--axi-text); }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a

package/src/prose.css

@@ -28,10 +28,9 @@
 
 .axi-prose p { margin: 0 0 16px; }
 .axi-prose strong { color: var(--axi-text); font-weight: 800; }
-/* Prose is the one place a link should announce itself: a reader scanning an
-   article is looking for them, and inheriting the body ink would hide them. */
-.axi-prose a { color: var(--axi-accent); font-weight: 600; text-underline-offset: 2px; }
-.axi-prose a:hover { color: var(--axi-text); }
+/* A link is drawn beside .axi-code in primitives.css, in one rule with
+   `.axi-link`, because a link in an article and a link in interface copy are
+   the same object. See the comment there. */
 
 .axi-prose ul, .axi-prose ol { margin: 0 0 16px; padding-left: 22px; }
 .axi-prose li { margin: 0 0 7px; }
@@ -77,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); }