@axiapps/axi-design 1.43.0 → 1.44.0

package/dist/axi.css

@@ -425,13 +425,69 @@ a.axi-panel--tile:hover,
 button.axi-panel--tile:hover,
 .axi-panel--tile[role='button']:hover { box-shadow: var(--axi-shadow-control-hover); }
 
+/* The one of these you picked. A grid of panels, tiles or cards where one is
+   chosen - a theme picker, a fight picker, a leader you have opened - and the
+   surface has to say which.
+
+   Not the accent fill a rail item takes. A rail item is a word, and a word can
+   be printed on the accent; a panel carries content, and an accent fill drowns
+   it. The answer is the third weight .axi-rail__nav--quiet already found for
+   the same reason: the surface rises and the accent arrives on the edge. A
+   whole edge here rather than the leading one, because a grid is read in two
+   directions and has no leading side to light.
+
+   Keyed off what the element already says, the way .axi-panel--tile keys its
+   press off being an <a> or a <button> rather than off a second class. The
+   language has one spelling per selection semantics, and this rule takes all
+   of them rather than inventing a fourth: `aria-current` for a place you
+   navigated to (a rail item, a tab, a table row), `aria-pressed` for a toggle
+   (a pill), `aria-selected` for an option in a listbox (a picker option). A
+   consumer that marks a card by appending a border utility has told assistive
+   tech nothing at all, and that is the defect this replaces rather than the
+   missing fill - ten sites in one consumer, six different bases, three
+   invented extra marks, and not one of them announced.
+
+   The fourth arm is a <label> wrapping its own radio, which is the correct
+   markup for a picker made of panels: the input carries the state, so the
+   label has no attribute to set and copying the state onto one would be a
+   second source of truth that can disagree. This is the language's only
+   :has(), and the child combinator is the whole point - `> input:checked`
+   means this panel IS the control, where a descendant match would light a
+   panel up for any checkbox buried in its content.
+
+   Both spellings on one rule, per "a style only reachable through a layer will
+   be re-invented": .axi-card is a shell and .axi-panel a primitive, and a
+   consumer marking one of them must not have to find out which file its
+   selected state was written in. The fill is the `background` shorthand and
+   not the -paint companion, because --axi-surface-raised is a surface token
+   and a theme is allowed to make a surface a gradient. */
+:is(.axi-card, .axi-panel):is(
+  [aria-current],
+  [aria-pressed='true'],
+  [aria-selected='true'],
+  :has(> input:checked)
+) {
+  background: var(--axi-surface-raised);
+  border-color: var(--axi-accent);
+}
+
 /* ---------- well ---------- */
 /* The panel's inverse: a field sunk into the surface around it rather than
    raised off it. No block, because a recess casts nothing, and the rule rather
    than the ink for its edge - see --axi-well-fill in src/tokens.css for why
    both of those follow from the same fact. Reach for this wherever a second
    panel inside a panel was the instinct: a picker list beside a table, a column
-   of cards standing on the page, a trough a bar fills. */
+   of cards standing on the page, a trough a bar fills.
+
+   .axi-split__nav is the first of those three named as a part rather than left
+   to the consumer to remember, and it is in THIS rule rather than restating the
+   fill next to the split pane. Two rules that agree today are two rules that
+   disagree after the next edit - see "A style only reachable through a layer
+   will be re-invented" in docs/RULES.md, which is the same argument arriving
+   from the other direction. The split pane's slot cannot be a well by
+   convention: a consumer who forgets the second class gets a picker with no
+   recess, and the language has no way to notice. */
+.axi-split__nav,
 .axi-well {
   background: var(--axi-well-fill);
   border: var(--axi-border-control) solid var(--axi-well-line);
@@ -530,6 +586,43 @@ button.axi-panel--tile:hover,
    icon-only button has no label to pad around, so the 20px sides meant for
    one produced a wide rectangle around a single glyph - visible in this
    language's own gallery, in the example titled "Alone in a button". */
+/* Icon over label rather than beside it. Not a style choice - it is the only
+   thing that makes a bar of equal actions fit a phone. Measured on the
+   consumer that needed it: four icon+label actions side by side want 387px of
+   the 337px available at 393px wide, and every label is one unbreakable word,
+   so min-content equals max-content and flex-shrink has nothing to give. The
+   last action simply runs off the screen. Stacked, the same four come to
+   ~291px.
+
+   min-width: 0 because that failure has a second half. A flex item's default
+   min-width is its content, so a button in a row refuses to shrink below its
+   own label even when the row is told to divide the space - which is the same
+   trap .axi-tabs__tab documents for its label and .axi-split__body for its
+   track.
+
+   The label is addressed as an element because a stacked button has two
+   children and only one of them is words; naming a part would make every
+   consumer add a class to say what the span already says. :where() so it
+   spends no specificity - the ink layer and any modifier still out-rank it,
+   which is the contract src/utilities.css is owed. */
+.axi-btn--stack {
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.axi-btn--stack > :where(span) {
+  /* Both, and the pair is the point: max-width caps it against the button,
+     min-width: 0 is what lets it shrink at all. A flex item's default
+     min-width is its content, so max-width alone leaves the ellipsis
+     unreachable - the label overflows the cap instead of truncating inside
+     it. tests/tokens.test.mjs pins the pair for every truncating rule in the
+     language, and it caught this one. */
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .axi-btn--sm   { --axi-btn-pad: 8px 13px; --axi-btn-size: 12px; }
 .axi-btn--xs   { --axi-btn-pad: 5px 9px;  --axi-btn-size: 11px; }
 .axi-btn--icon { --axi-btn-pad: 7px; }
@@ -828,7 +921,7 @@ button.axi-panel--tile:hover,
    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 {
+.axi-prose :where(a) {
   padding: 0;
   background: none;
   border: 0;
@@ -841,7 +934,7 @@ button.axi-panel--tile:hover,
   cursor: pointer;
 }
 .axi-link:where(:hover),
-.axi-prose a:where(:hover) { color: var(--axi-text); }
+.axi-prose :where(a:hover) { color: var(--axi-text); }
 
 /* ---------- quiet action ---------- */
 /* A control that is only its label. Not a button - it draws no box, takes no
@@ -967,8 +1060,8 @@ button.axi-panel--tile:hover,
    disclosure that drops back flat the moment the pointer moves into the list
    it opened severs the two: the lift is what says this box and that popover
    are one control. */
-.axi-select:hover,
-.axi-picker__btn:hover,
+.axi-select:where(:hover),
+.axi-picker__btn:where(:hover),
 .axi-picker__btn[aria-expanded='true'] {
   color: var(--axi-text);
   box-shadow: var(--axi-shadow-control);
@@ -995,7 +1088,7 @@ button.axi-panel--tile:hover,
     backdrop-filter: var(--axi-surface-filter);
     box-shadow: var(--axi-shadow-panel);
   }
-  .axi-select option {
+  .axi-select :where(option) {
     display: flex; align-items: center; gap: 9px;
     padding: 8px 9px;
     border-radius: var(--axi-radius-sm);
@@ -1010,7 +1103,7 @@ button.axi-panel--tile:hover,
      level's fill - and this popover is filled with --axi-surface-raised, which
      a theme may take translucent, so an opaque row here is the black patch
      --axi-well-fill exists to prevent. Same for the picker's rows below. */
-  .axi-select option:hover, .axi-select option:focus {
+  .axi-select :where(option:hover, option:focus) {
     background: var(--axi-well-fill); color: var(--axi-text);
   }
   /* The page-wide focus ring sits 2px outside its element; inside a picker
@@ -1109,7 +1202,7 @@ button.axi-panel--tile:hover,
   color: transparent;
   font-weight: 900;
 }
-.axi-picker__opt:hover, .axi-picker__opt:focus {
+.axi-picker__opt:where(:hover, :focus) {
   background: var(--axi-well-fill); color: var(--axi-text);
 }
 /* The page-wide focus ring sits 2px outside its element; inside a popover
@@ -1296,6 +1389,68 @@ textarea.axi-input {
 /* A horizontal run that wraps rather than overflowing. */
 .axi-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--axi-row-gap, 10px); }
 
+/* ---------- split pane ---------- */
+/* A picker on the left choosing what the surface on the right shows. Thirteen
+   sections of one consumer are this shape, and a fourteenth had hand-built it
+   inline because there was no name for it.
+
+   It is two objects on one plane and not two panels, which is the whole reason
+   it needs naming: a picker list beside a table is the first case --axi-well's
+   own comment names, and the thing the list picks is the raised counterpart to
+   that recess. Drawn as two panels it read flat - a hairline parting one field,
+   with the list's scrollbar carving a groove down the middle of it - because
+   nothing in it was an object.
+
+   The body carries the CONTROL step, not the panel's. A split pane lives
+   inside a panel that has already paid a 6px block, and rule 8's counterpart
+   settles what a second one nested in it reads as: two planes arguing. The
+   consumer that derived this shape by hand got the outline and left out the
+   block entirely, which is a rule 3 failure in the other direction - a
+   boundary drawn around content that is standing on the surface behind it.
+   Outlined and blocked, at the weight that says "the contents of a box".
+
+   The radius follows the form step and not the footprint. The body is
+   panel-sized in area and control-weight in form, and .axi-panel--tile already
+   settled that argument the same way.
+
+   `minmax(0, 1fr)` rather than `1fr`: a table in a `1fr` track cannot shrink
+   below its own content, and every cell in .axi-table is `nowrap`, so the
+   column blows out and takes the pane's width with it. `1fr` is
+   `minmax(auto, 1fr)` and `auto` is a content floor.
+
+   No breakpoint of its own. Under 640px the two stack, which is layout.css's
+   one breakpoint and deliberately still its only one - .axi-table--fixed
+   already makes a 360px pane work, so a pane narrow enough to need a second
+   breakpoint is one --fixed was written for. */
+.axi-split {
+  display: grid;
+  grid-template-columns: var(--axi-split-nav-w, 280px) minmax(0, 1fr);
+  gap: var(--axi-split-gap, 10px);
+  /* A split pane is routinely the flex child that fills a section's height,
+     and a grid that cannot shrink below its content pushes the section past
+     its own cap - the same reason .axi-palette__list says it. */
+  min-height: 0;
+}
+/* The picker is a well, declared as one in the same rule as .axi-well in
+   src/primitives.css rather than restated here. This part only says what the
+   slot adds: it scrolls, and it may not out-grow the row it sits in. Its
+   scrollbar is hidden by the language's quiet-scroll rule in
+   src/utilities.css, which is where that decision lives for every strip. */
+.axi-split__nav { overflow-y: auto; min-height: 0; }
+.axi-split__body {
+  /* Paired with the track's minmax(0, 1fr): the track stops the COLUMN
+     growing, this stops the ITEM, whose min-width is `auto` by default and is
+     what an ellipsis inside it is actually fighting. */
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  box-shadow: var(--axi-shadow-control);
+}
+
 @media (max-width: 640px) {
   /* The fallback must match the resting rule's (var(--axi-gutter), 18px) -
      README.md documents --axi-page-pad's fallback as --axi-gutter, and a
@@ -1303,6 +1458,12 @@ textarea.axi-input {
      mobile, which is the one viewport where the gutter matters most. */
   .axi-page { padding-inline: var(--axi-page-pad, var(--axi-gutter)); }
   .axi-grid { grid-template-columns: 1fr; }
+  /* The picker stops being a column beside the thing it picks and becomes the
+     row above it. It keeps a height cap - a picker that grows to twenty rows
+     pushes the result it picked off the screen, which is the one thing the
+     stacked form must not do. */
+  .axi-split { grid-template-columns: 1fr; }
+  .axi-split__nav { max-height: var(--axi-split-nav-h, 200px); }
 }
 
 /* --- shells.css --- */
@@ -1311,14 +1472,23 @@ textarea.axi-input {
    redefining them, so a change to .axi-panel moves the notice, the toolbar,
    the popover and the card together. */
 
-/* The small uppercase heading that labels a panel's contents. */
+/* The small uppercase heading that labels a panel's contents.
+
+   The gap under it is a knob because the eyebrow heads more than one size of
+   thing. 14px is the figure for a panel at its resting padding; a tile is one
+   form step down and its padding is one density step down with it, so the
+   eyebrow inside one reads the tighter figure in the rule below, the same way
+   .axi-panel--tile reads --axi-panel-pad at a tighter fallback of its own. An
+   eyebrow sitting in a row - a sheet's head, a toolbar - wants no gap at all,
+   and says so with the knob rather than with an inline margin. */
 .axi-eyebrow {
-  margin: 0 0 14px;
+  margin: 0 0 var(--axi-eyebrow-gap, 14px);
   font: var(--axi-t-eyebrow);
   letter-spacing: var(--axi-ls-eyebrow);
   text-transform: uppercase;
   color: var(--axi-text-faint);
 }
+.axi-panel--tile .axi-eyebrow { margin-bottom: var(--axi-eyebrow-gap, 6px); }
 
 /* ---------- masthead ---------- */
 /* Opaque, because content scrolls under it. Which is also why it paints the
@@ -1403,9 +1573,35 @@ textarea.axi-input {
    it shrinks an item - so one tab too many sent the last item in source order
    to a second row instead of taking width off the widest one. The strip is the
    item that can give: it scrolls, and the row stays a row. */
-.axi-mast .axi-tabs { margin-left: auto; flex-shrink: 1; min-width: 0; overflow-x: auto; }
-.axi-tabs a,
-.axi-tabs button {
+.axi-mast .axi-tabs { margin-left: auto; }
+/* A strip with more tabs than room scrolls rather than losing them.
+
+   .axi-tabs is `display: flex` with no wrap, so a strip too wide for its
+   container overflows - and outside a scroll container the tabs past the edge
+   are simply unreachable. The language already believed this twice and could
+   say it in neither place a consumer could use: once here, behind .axi-mast,
+   and once at the 640px breakpoint below, where EVERY strip scrolls. A
+   standalone strip above that breakpoint with one tab too many had nowhere to
+   look, and the consumer that hit it wrote `overflow-x: auto` on its own
+   wrapper - the same re-invention docs/RULES.md describes, arriving a fourth
+   time.
+
+   A modifier rather than the base rule, and this is the part worth arguing.
+   `overflow-x: auto` computes `overflow-y` from `visible` to `auto`, so a
+   strip that scrolls is also a strip that clips vertically - a focus ring, a
+   badge hanging off a tab, a popover anchored to one. Every strip paying that
+   to fix the strips that are too long is the wrong trade; the strips that are
+   too long say so.
+
+   The bar is NOT hidden here, and the quiet-scroll rule in src/utilities.css
+   deliberately does not name this. That rule is about a bar drawn down the
+   side of a narrow strip, where the object's own edge is already a vertical
+   line and a count elsewhere already says how many rows there are. A tab strip
+   that scrolls horizontally has no second signal: the bar is the only thing
+   saying there are more tabs. Same reason .axi-table__scroll keeps its. */
+.axi-tabs--scroll,
+.axi-mast .axi-tabs { flex-shrink: 1; min-width: 0; overflow-x: auto; }
+.axi-tabs :where(a, button) {
   padding: 8px 16px;
   font: 800 13.5px/1 var(--axi-sans);
   color: var(--axi-text-dim); text-decoration: none;
@@ -1414,8 +1610,7 @@ textarea.axi-input {
   border: var(--axi-border-control) solid transparent;
   border-radius: var(--axi-radius-sm);
 }
-.axi-tabs a:hover,
-.axi-tabs button:hover { color: var(--axi-text); border-color: var(--axi-rule); }
+.axi-tabs :where(a:hover, button:hover) { color: var(--axi-text); border-color: var(--axi-rule); }
 /* The current tab is filled and blocked - the same treatment a pressed pill
    gets, because it is the same idea: this one is on. */
 .axi-tabs a[aria-current="page"],
@@ -1447,13 +1642,13 @@ textarea.axi-input {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.axi-tabs .axi-tabs__close {
+.axi-tabs :where(.axi-tabs__close) {
   padding: 0 6px;
   font: var(--axi-t-micro);
   color: var(--axi-text-faint);
   border-color: transparent;
 }
-.axi-tabs .axi-tabs__close:hover { color: var(--axi-text); border-color: transparent; }
+.axi-tabs :where(.axi-tabs__close:hover) { color: var(--axi-text); border-color: transparent; }
 
 /* ---------- rail ---------- */
 /* Vertical navigation, for a set too large for a tab strip to hold. Same
@@ -1527,7 +1722,7 @@ textarea.axi-input {
   border-radius: var(--axi-radius-sm);
   cursor: pointer;
 }
-.axi-rail__item:hover { color: var(--axi-text); background: var(--axi-surface-raised); }
+.axi-rail__item:where(:hover) { color: var(--axi-text); background: var(--axi-surface-raised); }
 /* The same treatment a pressed pill and a current tab get. Only ever one of
    these on screen. Any aria-current value, because the right one depends on
    what the rail navigates - `page` for a view, `location` for a place within
@@ -1590,7 +1785,7 @@ textarea.axi-input {
   border-radius: var(--axi-radius-sm);
   cursor: pointer;
 }
-.axi-rail__subitem:hover { color: var(--axi-text-dim); background: var(--axi-surface-raised); }
+.axi-rail__subitem:where(:hover) { color: var(--axi-text-dim); background: var(--axi-surface-raised); }
 .axi-rail__subitem[aria-current] { color: var(--axi-text); }
 /* An annotation on an item, not a measurement of it, so rule 5 draws it
    outlined rather than filled. */
@@ -1738,13 +1933,13 @@ textarea.axi-input {
   box-shadow: var(--axi-shadow-panel);
 }
 .axi-menu__pop[hidden] { display: none; }
-.axi-menu__pop label {
+.axi-menu__pop :where(label) {
   display: flex; gap: 9px; align-items: flex-start;
   padding: 7px 8px; border-radius: var(--axi-radius-sm);
   font-size: 13px; font-weight: 600; color: var(--axi-text-dim); cursor: pointer;
 }
 /* A hovered row sinks - the same fill the select's and the picker's rows use. */
-.axi-menu__pop label:hover { background: var(--axi-well-fill); color: var(--axi-text); }
+.axi-menu__pop :where(label:hover) { background: var(--axi-well-fill); color: var(--axi-text); }
 .axi-menu__pop input { margin: 3px 0 0; }
 
 /* ---------- command palette ---------- */
@@ -1805,14 +2000,16 @@ textarea.axi-input {
 }
 /* min-height: 0 because the panel is a flex column and a list that cannot
    shrink below its content pushes the panel past its own max-height. The
-   scrollbar is hidden: at twelve rows behind a fixed cap the bar is a channel
-   carved down the side of a small panel to report a fact the row count in the
-   bar has already given. */
+   scrollbar is hidden, but not here: that decision is the language's and not
+   this component's, and it now lives once, in src/utilities.css under "the
+   quiet scroll", with this selector in the same rule as every other strip that
+   makes it. The argument that produced it was written here first - at twelve
+   rows behind a fixed cap the bar is a channel carved down the side of a small
+   panel to report a fact the row count in the bar has already given - and it is
+   preserved in full at the rule. */
 .axi-palette__list {
   flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0;
-  scrollbar-width: none;
 }
-.axi-palette__list::-webkit-scrollbar { width: 0; height: 0; }
 /* One .axi-palette__section per group of rows, each opening with a
    .axi-palette__group heading. The section is a named part rather than left to
    the consumer's wrapper so the rule between groups can be stated as what it
@@ -1834,7 +2031,7 @@ textarea.axi-input {
   color: var(--axi-text-dim);
   font: var(--axi-t-small); text-align: left; cursor: pointer;
 }
-.axi-palette__row:hover { background: var(--axi-surface-raised); color: var(--axi-text); }
+.axi-palette__row:where(:hover) { background: var(--axi-surface-raised); color: var(--axi-text); }
 .axi-palette__row[data-active] { background: var(--axi-accent); color: var(--axi-accent-ink); }
 /* The row's own ink is set above, but a row carries a glyph and a second line
    of text that were coloured on their own; on the filled row they all become
@@ -1866,7 +2063,7 @@ textarea.axi-input {
   cursor: pointer;
   transition: transform .1s, box-shadow .1s, color .1s;
 }
-.axi-palette__trigger:hover {
+.axi-palette__trigger:where(:hover) {
   color: var(--axi-text);
   box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
@@ -2013,7 +2210,7 @@ textarea.axi-input {
   color: var(--axi-text-faint);
 }
 .axi-card__go { margin-left: auto; color: var(--axi-accent); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
-.axi-card:hover .axi-card__go { color: var(--axi-text); }
+.axi-card:where(:hover) :where(.axi-card__go) { color: var(--axi-text); }
 
 /* ---------- drawer ---------- */
 /* A scrim's layer is not a property of the scrim. It is "directly below the
@@ -2086,7 +2283,7 @@ textarea.axi-input {
   font-size: 15px; font-weight: 900; cursor: pointer;
   transition: transform .1s, box-shadow .1s;
 }
-.axi-drawer__close:hover {
+.axi-drawer__close:where(:hover) {
   background: var(--axi-accent); color: var(--axi-accent-ink);
   box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
@@ -2228,7 +2425,7 @@ textarea.axi-input {
   -webkit-app-region: drag;
 }
 .axi-titlebar__btns { margin-left: auto; display: flex; height: 100%; -webkit-app-region: no-drag; }
-.axi-titlebar__btns button {
+.axi-titlebar__btns :where(button) {
   width: 44px;
   border: 0;
   background: transparent;
@@ -2239,10 +2436,10 @@ textarea.axi-input {
 /* No lift here. A window button is chrome, not content: it has nothing to
    lift off, and 44px of movement in the corner of every screen is exactly
    the scattered motion rule 4 rations. It answers on the neutral ramp. */
-.axi-titlebar__btns button:hover { background: var(--axi-surface); color: var(--axi-text); }
+.axi-titlebar__btns :where(button:hover) { background: var(--axi-surface); color: var(--axi-text); }
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
-.axi-titlebar__btns button:last-child:hover { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
+.axi-titlebar__btns :where(button:last-child:hover) { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }
 
@@ -2261,8 +2458,8 @@ textarea.axi-input {
   flex-wrap: wrap;
   font: var(--axi-t-small);
 }
-.axi-crumbs a { color: var(--axi-text-dim); text-decoration: none; }
-.axi-crumbs a:hover { color: var(--axi-accent); }
+.axi-crumbs :where(a) { color: var(--axi-text-dim); text-decoration: none; }
+.axi-crumbs :where(a:hover) { color: var(--axi-accent); }
 /* 7px, matching the prose bullet (src/prose.css) exactly, with the same
    --axi-border-hairline outline: rule 7 calls the motif "a 45deg-rotated
    outlined square", and a bare fill with no border does not match it. The
@@ -2296,7 +2493,7 @@ textarea.axi-input {
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
 }
-.axi-pages__n:hover { color: var(--axi-text); }
+.axi-pages__n:where(:hover) { color: var(--axi-text); }
 .axi-pages__n[aria-current="page"] {
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
@@ -2309,7 +2506,12 @@ textarea.axi-input {
 @media (max-width: 640px) {
   .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
   .axi-mast .axi-tabs { margin-left: 0; }
-  .axi-tabs { width: 100%; overflow-x: auto; }
+  /* Every strip scrolls on a phone, whether or not it asked. This cannot join
+     the shared rule above - a media-query rule and an unconditional one are
+     different rules by construction - so the values are pinned against it by
+     test instead: the arm may declare nothing the modifier does not, and
+     nothing at a different value. */
+  .axi-tabs { width: 100%; flex-shrink: 1; min-width: 0; overflow-x: auto; }
   /* The offset blocks eat horizontal room a phone does not have, so the panel
      step drops to the control step here rather than to an invented number.
      The card's hover has to come down with it - left alone it kept deepening
@@ -2601,7 +2803,17 @@ textarea.axi-input {
    resting cell rule (`.axi-table :where(td, tbody th)`, also one class) and
    wins on order, while an ink class in utilities.css - one class, later file -
    wins over both. */
-.axi-table :where(tbody tr:hover) :where(td, th) {
+/* A DATA FILL SURVIVES A ROW STATE, and the `:not()` sits inside `:where()`
+   so saying so costs no specificity. A matrix cell's band IS its value (rule 9,
+   "the matrix is the bound on not at all") - washing it on the way past the row
+   you want deletes the reading. The row state is not weakened by this: it is
+   drawn by the leading edge below, and by every cell that has nothing to say.
+   Which is the edge-not-fill answer the selection rule below reaches on its own
+   grounds, arriving here a second time.
+
+   Nothing changes for a table with no `data-heat` in it, which is every table
+   in this language but one. */
+.axi-table :where(tbody tr:hover) :where(td:not([data-heat]), th:not([data-heat])) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
@@ -2636,7 +2848,7 @@ textarea.axi-input {
 .axi-table :where(tbody tr) > :where(td, th):first-child {
   border-inline-start: var(--axi-border-control) solid transparent;
 }
-.axi-table tbody tr[aria-current] :is(td, th) {
+.axi-table tbody tr[aria-current] :is(td, th):where(:not([data-heat])) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);
@@ -2797,6 +3009,115 @@ textarea.axi-input {
 }
 .axi-table th:first-child .axi-table__sort { justify-content: flex-start; }
 
+/* ---------- matrix ---------- */
+/* Two categorical axes and a quantity where they cross: forty players down the
+   side, sixty five-second buckets across, a count in each cell. Rule 9's
+   "the matrix is the bound on not at all" is the whole argument for this
+   existing at all, and the short form is: the plane is spent, so there is no
+   third dimension left to give the quantity a LENGTH, and both axes are
+   already sorted by something the reader needs so neither can be re-sorted by
+   the value. Intensity is what is left, and it is admissible here because the
+   cell also prints its number - the digit is the legible copy rule 9 demands,
+   and the band is only what lets the eye find the shape without reading two
+   thousand figures one at a time. A matrix cell with nothing written in it is
+   a heatmap and rule 9 refuses it.
+
+   This is a MODIFIER and not a component, and that is the finding rather than
+   a convenience. Everything structural a matrix field needs, this table
+   already had: --sticky for the ruler that stays, --pinned for the names that
+   stay, --dense for sixty columns' padding, --fixed plus a <colgroup> for
+   proportional cells, and .axi-table__scroll for the frame they move inside.
+   The consumer measured against here had hand-written all five, and had got
+   --sticky wrong in exactly the way that modifier's comment warns about: its
+   ruler was --axi-surface-raised, so under glass the rows slid through it.
+   The only thing genuinely missing was the quantity.
+
+   What the modifier changes is the CELL, which stops being a number in a
+   column and becomes a patch in a field: centred rather than right-aligned,
+   because a band is read by position and not by its digits lining up, and
+   unpadded because the padding is the field. The name column keeps the base
+   table's left alignment and its gutter - it is still a name. */
+.axi-table--matrix { border-collapse: separate; border-spacing: 0; }
+.axi-table--matrix thead th { padding: 0 0 6px; text-align: center; }
+.axi-table--matrix :is(td, tbody th) {
+  padding: 0;
+  text-align: center;
+  height: var(--axi-matrix-cell, 24px);
+}
+/* `min-width` and not `width`: under the default auto layout this is the floor
+   a one-digit column cannot fall below, and under --fixed a <colgroup> takes
+   over entirely (fixed layout ignores both min and max - see --fixed). */
+.axi-table--matrix :is(td, tbody th):not(:first-child) {
+  min-width: var(--axi-matrix-cell, 24px);
+}
+.axi-table--matrix :is(td, tbody th):first-child {
+  text-align: left;
+  padding: 0 10px 0 0;
+}
+/* The four bands. Each is a color-mix() of the accent into the surface's flat
+   companion, which makes every one of them a computed OPAQUE colour - the
+   accent at 18% alpha over the field would be rule 2's faded ink, and it also
+   fails on its own terms, because the cells a reader is scanning for are the
+   quiet ones and an alpha ramp is where those disappear.
+
+   --axi-surface-paint and not --axi-surface, and this is the trap: a surface
+   token is allowed to hold a gradient (rule 1's one relief, which is how a
+   glass theme exists), color-mix() takes colours and nothing else, and an
+   invalid color-mix() is dropped at computed-value time. Spell it --axi-surface
+   and the bands do not fade - they vanish, silently, in whichever theme paints
+   a gradient. That is measured, not hypothetical: it is why
+   --axi-surface-paint exists (see tokens.css).
+
+   Four steps and not a continuous ramp, because a band is also where the digit
+   has to change ink, and a step is the only thing a flip can happen ON. The
+   top two carry --axi-accent-ink for the same reason .axi-btn--primary does:
+   past roughly half strength the field is the accent and the text on it is the
+   accent's companion, not the text ramp. */
+.axi-table--matrix :is(td, tbody th)[data-heat='1'] {
+  background-color: color-mix(in srgb, var(--axi-accent) 18%, var(--axi-surface-paint));
+}
+.axi-table--matrix :is(td, tbody th)[data-heat='2'] {
+  background-color: color-mix(in srgb, var(--axi-accent) 42%, var(--axi-surface-paint));
+}
+.axi-table--matrix :is(td, tbody th)[data-heat='3'] {
+  background-color: color-mix(in srgb, var(--axi-accent) 70%, var(--axi-surface-paint));
+  color: var(--axi-accent-ink);
+}
+.axi-table--matrix :is(td, tbody th)[data-heat='4'] {
+  background-color: color-mix(in srgb, var(--axi-accent) 100%, var(--axi-surface-paint));
+  color: var(--axi-accent-ink);
+}
+/* A matrix whose columns are a TIMELINE rather than a list of categories, which
+   changes two things and only two.
+
+   The column labels move left. A label over a category names the column and
+   belongs centred over it; a label on a ruler names a MOMENT, and centring it
+   puts the text half a cell to the right of the instant it is pointing at.
+
+   And the division gets a line. `[data-tick]` marks the columns that carry a
+   label - every thirtieth second, not every bucket, because at a five-second
+   resolution a five-minute fight is sixty columns and a timestamp over each is
+   unreadable at the width a cell allows. The line is the RULE, at the hairline
+   step: it is the same line that parts the rows, continued down the field,
+   which is the whole reason it is not drawn on every column. Sixty ruled
+   columns is a spreadsheet; the bands are meant to be the figure. */
+.axi-table--ruler thead th { text-align: left; }
+.axi-table--ruler :is(thead th, td, tbody th)[data-tick] {
+  border-left: var(--axi-border-hairline) solid var(--axi-rule);
+}
+/* A change of category down the rows - a subgroup, a team, a date. Heavier than
+   the hairline that parts two rows of one group, and heavier in INK rather than
+   in weight: the same line, drawn darker. Going up a form step instead would
+   put a control-weight line inside running content, which is rule 8's grid of
+   boxes, and the boundary would then compete with the head's own lid.
+
+   An attribute and not a class, per rule 13, and on the row because that is
+   what starts: the consumer compares one row's category with the previous
+   row's, which is a fact only it can know. */
+.axi-table tbody tr[data-group-start] > :is(td, th) {
+  border-top: var(--axi-border-hairline) solid var(--axi-ink-line);
+}
+
 /* ---------- meter ---------- */
 /* Rule 9: a proportion is a length. The track is the ground, the fill is the
    value, and the fill is one ink at full strength - a tinted or faded bar is
@@ -2846,6 +3167,61 @@ textarea.axi-input {
   font-variant-numeric: tabular-nums;
 }
 
+/* ---------- readout ---------- */
+/* A short run of labelled readings: logs seen, uploaded, failed; the session's
+   start and its length; a setting and the switch that sets it. The shape of
+   every status card in a dashboard's side column, and the one the consumer
+   that had four of them built by hand each time.
+
+   Rule 8 settles how it is drawn. The eye runs down the value column - that is
+   the whole point of stacking the readings - so it is a table's interior:
+   rows parted by the rule at the hairline weight, no outline and no block on
+   any row, nothing raised inside the panel that is already the raised thing.
+   It is not a table element because it is two cells wide, has no head, and
+   the reading in the second cell is as often a control as a figure; a <dl> is
+   what the document structure calls for and the classes sit on it.
+
+   The key is the meter list's name and the value is the meter list's value,
+   restated here rather than aliased because the two lists are laid out
+   differently and rule-8's test - is there a column? - is the same for both.
+
+   Row padding is a knob at two fallbacks, like the eyebrow's gap: 7px at
+   panel density, and 3px inside a tile, where a hairline already holds the
+   rows apart and 3px is still a clear gap at this type size. */
+.axi-readout {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+.axi-readout__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: var(--axi-readout-pad, 7px) 0;
+}
+.axi-readout__row + .axi-readout__row {
+  border-top: var(--axi-border-hairline) solid var(--axi-rule);
+}
+.axi-readout__k {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font: var(--axi-t-small);
+  font-weight: 700;
+  color: var(--axi-text-dim);
+}
+.axi-readout__v {
+  flex: none;
+  margin: 0;
+  text-align: right;
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  color: var(--axi-text);
+  font-variant-numeric: tabular-nums;
+}
+.axi-panel--tile .axi-readout__row { padding-block: var(--axi-readout-pad, 3px); }
+
 /* ---------- bars ---------- */
 /* The same rule stood on end. The baseline is drawn at the control weight
    because it is an axis - the one line in a chart that is structure rather
@@ -2975,6 +3351,34 @@ textarea.axi-input {
   text-transform: uppercase;
   color: var(--axi-text-dim);
 }
+/* A key you can press, to isolate the series it names. The state is the
+   attribute rule 13 asks for: `aria-pressed="true"` on the key that is
+   isolated, and nothing at all on the others - which of them recede is the
+   legend's to work out, from whether any key is pressed, rather than a second
+   attribute the consumer has to compute and keep in step.
+
+   Receding is a step down the neutral ramp and not an opacity, which is rule
+   4's "nothing fades" reaching the legend: the consumer this was written for
+   had the rest of the keys at `opacity: .3` and they were unreadable, which
+   is the one thing a legend must not be. A receded key brightens back to
+   plain under the cursor so it can be found again - the hover is wrapped so it
+   costs nothing against an ink, and the receded rule steps aside for it.
+
+   The button reset and the hover are :where()-wrapped for the reason the ink
+   layer gives: an inked key keeps its ink. The pressed and receded colours are
+   the state's own meaning and stay at full weight. */
+.axi-legend__key:where(button) {
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition: color .1s;
+}
+.axi-legend__key:where(button:hover) { color: var(--axi-text); }
+.axi-legend__key[aria-pressed="true"] { color: var(--axi-text); }
+.axi-legend:has([aria-pressed="true"]) .axi-legend__key:where(:not([aria-pressed="true"], :hover)) {
+  color: var(--axi-text-faint);
+}
 
 /* --- feedback.css --- */
 /* axi design language - feedback.
@@ -3147,8 +3551,8 @@ textarea.axi-input {
 
 /* --- utilities.css --- */
 /* axi design language - utilities.
-   Two families of single-purpose class and one state, and the file is last in
-   the cascade
+   Two families of single-purpose class, one state and one refusal, and the file
+   is last in the cascade
    because that is the whole point of it: a utility has to be able to overrule
    the component it sits inside, and it is not allowed to buy that with
    !important or with a padded selector.
@@ -3251,6 +3655,7 @@ textarea.axi-input {
 .axi-chip--action:is(:disabled, [aria-disabled="true"]),
 .axi-drawer__close:is(:disabled, [aria-disabled="true"]),
 .axi-input:is(:disabled, [aria-disabled="true"]),
+.axi-legend__key:where(button):is(:disabled, [aria-disabled="true"]),
 .axi-link:is(:disabled, [aria-disabled="true"]),
 .axi-palette__row:is(:disabled, [aria-disabled="true"]),
 .axi-palette__trigger:is(:disabled, [aria-disabled="true"]),
@@ -3263,11 +3668,65 @@ textarea.axi-input {
 .axi-select:is(:disabled, [aria-disabled="true"]),
 .axi-switch:is(:disabled, [aria-disabled="true"]),
 .axi-table__sort:is(:disabled, [aria-disabled="true"]),
-.axi-menu__pop label:is(:disabled, [aria-disabled="true"]),
-.axi-prose a:is(:disabled, [aria-disabled="true"]),
-.axi-tabs a:is(:disabled, [aria-disabled="true"]),
-.axi-tabs button:is(:disabled, [aria-disabled="true"]),
-.axi-titlebar__btns button:is(:disabled, [aria-disabled="true"]) {
+.axi-menu__pop :where(label):is(:disabled, [aria-disabled="true"]),
+.axi-prose :where(a):is(:disabled, [aria-disabled="true"]),
+.axi-tabs :where(a, button):is(:disabled, [aria-disabled="true"]),
+.axi-titlebar__btns :where(button):is(:disabled, [aria-disabled="true"]) {
   opacity: .5;
   cursor: not-allowed;
 }
+
+/* ---------- the quiet scroll ---------- */
+/* A scrollbar down the side of a narrow strip is a channel, not information.
+
+   The language had already decided this and said it in exactly one place, on
+   .axi-palette__list, with the argument written inline: at twelve rows behind
+   a fixed cap the bar reports a fact the row count in the bar has already
+   given. Said only there, it was the language's only word for the decision -
+   and the consumer that needed the same thing for its own strips could not
+   reach it, so it wrote the rule again. Five times, in its own stylesheet, for
+   two rails and a picker slot, twice with a `*` descendant arm because the
+   element that actually scrolls sits one level inside a component it does not
+   control. That is the third instance of the pattern in docs/RULES.md ("A style
+   only reachable through a layer will be re-invented"), and the remedy is the
+   same one: give the decision a name a consumer can spend, and put every
+   spelling of it in ONE rule.
+
+   So: one rule. The class is what a consumer says about its own scroller; the
+   four component parts beside it are the strips the language ships. Two rules
+   that agree today are two rules that disagree after the next edit.
+
+   This is a refusal rather than a utility - it says what NOT to draw - which is
+   why it is here rather than beside each component even though nothing needs
+   the last-in-cascade position to win. One fact about parts living in three
+   different source files has one home, the same as the dead state above.
+
+   Why these four and not everything that scrolls. The strip is the test: a
+   rail is 208px wide and a palette list sits in a small floating panel, so the
+   bar costs a measurable share of the width AND draws a second vertical line
+   beside the object's own edge. A table's horizontal bar is the opposite case
+   and .axi-table__scroll keeps it on purpose (see src/data.css) - there the bar
+   is the only thing telling you a column is off-screen. Nothing here reaches a
+   descendant: `*` would take the table's bar away the moment someone put one
+   in a rail.
+
+   `.axi-rail` and `.axi-rail__nav` both, because either can be the scroller.
+   The rail declares `overflow-y: auto` and is the scroller by default, but a
+   rail with something pinned below its list - a "back" action at the floor -
+   scrolls the nav instead and leaves the rail still. Both are the same strip
+   and the decision cannot depend on which one the consumer chose. */
+.axi-scroll-quiet,
+.axi-palette__list,
+.axi-rail,
+.axi-rail__nav,
+.axi-split__nav {
+  scrollbar-width: none;
+}
+.axi-scroll-quiet::-webkit-scrollbar,
+.axi-palette__list::-webkit-scrollbar,
+.axi-rail::-webkit-scrollbar,
+.axi-rail__nav::-webkit-scrollbar,
+.axi-split__nav::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}