@axiapps/axi-design 1.42.0 → 1.44.0

package/dist/themes/flat.css

@@ -16,6 +16,7 @@
   --axi-text: #e8eaed;
   --axi-text-dim: #8b929e;
   --axi-text-faint: #5d6577;
+  --axi-scrim: rgba(4, 5, 8, .72);
   --axi-shadow-panel: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
   --axi-shadow-control: 0 1px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045);
   --axi-shadow-panel-hover: 0 6px 18px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);

package/docs/RULES.md

@@ -222,6 +222,31 @@ Every lift is turned off under `@media (prefers-reduced-motion: reduce)`, in
 diamond still rotates, because a rotation that never changes is geometry and
 not motion.
 
+### A hover reveals no control
+
+A control that exists only while the cursor is over it exists for nobody on a
+touch screen, for nobody using a keyboard, and for nobody who has not already
+found it. Three sites in one consumer had this shape: an open-link glyph at
+`opacity: 0` until its card was hovered, and two help tips faded in the same
+way. The glyph was the only way off the card. On a phone it was not there.
+
+So: **a hover changes an element's depth, and may brighten its ink, and never
+its presence.** What is on screen is on screen. If a control is worth having it
+is drawn at rest, and if it is not worth drawing at rest it is not worth having.
+
+The one thing a hover may bring in is an annotation of something already
+present — a `.axi-tooltip` naming what a glyph does — and only because the
+same tip answers focus. A tip that answers hover alone is a control-shaped
+hole for everyone the first paragraph names.
+
+The other half of this is a **dimmed** thing, which is what a consumer reaches
+for when one series in a legend is isolated and the rest should recede.
+`opacity: .3` on the rest is rule 2's faded ink, and it is what left those
+keys unreadable. Receding is a step down the neutral ramp — `--axi-text-faint`
+— which stays legible at every step, and a hover brings a receded key back to
+plain so it can be found again. Nothing in the language fades, and this is one
+more place that holds.
+
 ## 5. Filled means status, outlined means annotation
 
 A filled chip asserts a value about the thing. An outlined chip in the cool ink
@@ -323,6 +348,21 @@ a colour that is a fill's contrast pair — `.axi-btn--primary`'s accent ink —
 too, because an ink there would put a status colour on the accent block and cost
 the label its legibility, which is rule 5's reason for the chip.
 
+Applying this everywhere it was owed had one consequence worth naming, because
+it is the rule arriving rather than a regression: hovering the **current**
+breadcrumb used to turn it accent, and now it does not move. `[aria-current]`
+outweighs a wrapped hover, which is the rail's stated refusal — the current item
+does not brighten further under the cursor — reaching the one component that had
+been disagreeing with it by accident of specificity.
+
+Two things about *checking* this, both learned by getting them wrong. Weigh one
+compound, never a selector list: a rule that lists two wrapped hovers beside a
+state weighs as the state if you measure the list, and reports the two correct
+hovers as offenders. And compare a hover only against a resting rule that
+matches the **same element**: an `<a>` inside `.axi-prose` takes the container's
+colour by inheritance, which no specificity can lose to, so measuring the link's
+hover against the container's rule asks a question neither rule is answering.
+
 ## 7. The diamond is the family motif
 
 A 45°-rotated outlined square. Bullet, status dot, language marker, and scaled
@@ -404,6 +444,51 @@ fact has no magnitude to draw: rendering "no" as a short bar says "a little
 bit" as loudly as a faded fill says "30%". That series is a row of marks of
 one size, differing only in ink, which is `.axi-ticks`.
 
+### The matrix is the bound on "not at all"
+
+The first corollary says this language does not draw a heatmap, and as written
+that is too wide. It is true of a *distribution* — one series along one
+categorical axis — because there a bar is always available, and reaching for
+tint over length is choosing the illegible encoding when the legible one was
+free.
+
+A matrix is not that shape. Two categorical axes, both of them orderings the
+reader navigates by — forty players down the side, sixty five-second buckets
+across — and a quantity at each intersection. The plane is spent. There is no
+third dimension left to give a length to, a bar per cell is 2400 bars four
+pixels wide, and neither axis can be re-sorted by the value because both are
+already sorted by something the reader needs: down the side by subgroup, across
+by time. "Or not at all" would mean the shape is undrawable, and it is the only
+shape that answers *who was doing this, and when*.
+
+So a matrix may encode its quantity as intensity, under one condition — and the
+condition is rule 9's own argument rather than an exemption from it. Rule 9 does
+not object to intensity. It objects to intensity being the ONLY copy of the
+number, and the illegible one. **A matrix cell prints its value.** The digit is
+the legible copy, the band is what lets the eye find the shape without reading
+two thousand numbers one at a time, and a reader who wants a figure reads the
+figure. A matrix cell with no number in it is a heatmap, and for a heatmap the
+corollary stands exactly as written.
+
+Two further bounds, both of them rules already here rather than new ones.
+
+The steps are **discrete and opaque**. A continuous alpha ramp of the accent
+over the field is a faded accent, which is rule 2 — and it fails on its own
+terms as well, because the cells a reader scans for are the low ones and those
+are the ones a ramp makes hardest to see. Four steps, each a `color-mix()` of
+the accent into `--axi-surface-paint`, so every band is a computed opaque
+colour. The flat companion and not `--axi-surface`, because a surface token is
+allowed to hold a gradient and `color-mix()` takes colours only; get that wrong
+and the bands do not fade, they vanish.
+
+And the band is the cell's **fill**, which settles what a row state may do to
+it. Hover and selection raise a row by filling its cells, and a cell whose fill
+is the data has no room for that — so on any table, a cell carrying a value in
+its fill keeps it, and the row state is drawn by the leading edge and by every
+cell that has nothing to say. That is not a concession to the matrix: it is the
+edge-not-fill answer rule 8's selection already gives, arriving a second time
+for the same reason.
+
 ## 10. A chart's ink is the accent
 
 One series is the accent. A second, for comparison, is the neutral ramp —
@@ -501,6 +586,48 @@ that must be rejected, one per prohibition. The rule above is therefore a check
 rather than a promise — the same treatment rule 3's weights get in
 `tests/tokens.test.mjs`.
 
+## 13. A state is an attribute, and the appearance follows it
+
+Every state this language draws is keyed off an attribute the element already
+carries, never off a class invented to describe the look. `[aria-current]` on a
+rail item, a tab, a table row and a picked panel. `[aria-pressed="true"]` on a
+pill. `[aria-selected="true"]` on a listbox option. `[aria-disabled="true"]`
+beside `:disabled`, in 26 places. `[aria-sort]` on the sorted column,
+`[aria-expanded]` on the thing that opens. One spelling per semantics, and the
+semantics decides which — not the appearance, which is why a rail item and a
+picked panel share `[aria-current]` while looking nothing alike.
+
+The reason is not tidiness. **A state that exists only as an appearance is not a
+state.** A consumer that marks the chosen card with a class has drawn a mark
+sighted users can see and told everyone else nothing, and no amount of styling
+fixes it from our side — the information was never in the document. Keying the
+style off the attribute makes the two inseparable: you cannot get the look
+without emitting the state, and you cannot emit the state and fail to get the
+look.
+
+This is also what stops the language growing a second vocabulary. An invented
+`--selected` modifier would be a synonym for `[aria-current]` that a screen
+reader cannot read, and the two would drift the first time one of them got a
+tweak. There is no `.axi-panel--selected` for the same reason there is no
+`.axi-btn--off`.
+
+Two consequences when adding a component:
+
+- **Find the attribute before writing the rule.** If the state the component
+  needs already has an ARIA spelling, use it, even if the look is unlike every
+  other user of that attribute. If it genuinely has none, that is the moment to
+  ask whether the state is real.
+- **A state the markup holds needs no attribute at all.** A `<label>` wrapping
+  its own radio is the correct markup for a picker; the input holds the state,
+  so the label has nothing to set, and copying it onto the label would be a
+  second source of truth that can disagree with the first. That case is matched
+  structurally — `:has(> input:checked)`, the language's only `:has()`, with the
+  child combinator load-bearing: a descendant match would fire on any checkbox
+  buried in the component's content.
+
+`tests/tokens.test.mjs` holds this rule to the components that carry it, so it
+is a check rather than a promise.
+
 ## Tokens
 
 Three layers, in `src/tokens.css` — the only file permitted to contain a colour
@@ -548,6 +675,7 @@ instead of joining it.
 | Table corner | 3 | where the two cross |
 | Sticky chrome | 40 | `.axi-mast` |
 | Popovers | 41 | `.axi-menu__pop`, `.axi-picker__pop` |
+| Sheet scrim | 44 | `.axi-scrim--sheet` |
 | Sheet | 45 | `.axi-sheet` |
 | Scrim | 50 | `.axi-scrim` |
 | Drawer | 51 | `.axi-drawer` |
@@ -572,6 +700,15 @@ A negative `z-index` inside a component's own `isolation` context — the sigil'
 backing shape — is not a layer and is not listed. It is invisible outside the
 component that owns it.
 
+The scrim appears twice, and that is the table saying something rather than
+repeating itself. A scrim's rung is not a property of the scrim; it is "directly
+below the thing I dismiss", so a language with two dismissible surfaces at two
+rungs has two scrims. Reading the single 50 as the scrim's own number is what
+makes a sheet impossible to scrim: at 50 over the sheet's 45 the scrim covers
+the sheet completely, every click lands on the dismiss handler, and the surface
+opens dead. So when you add a dismissible surface, check whether it needs a
+scrim rung directly beneath it, and add both rows together.
+
 ## Light mode
 
 Not shipped. The system is *structured* for it: no component contains a colour
@@ -684,6 +821,44 @@ The line to hold is the one-for-one rule above, not a list of layers. A theme
 that restates the block still paints every component; a theme that invents one
 does not.
 
+### A change to the language is not finished until every theme wears it
+
+The one-for-one rule above is written as an obligation on a *theme* — here is
+what a new theme owes the language. Read only that way it has a hole in it, and
+the hole is every change that goes the other direction. A token added to
+`tokens.css`, a component added to `src/`, a look retuned: each of those is a
+change to the thing the themes are mirroring, and none of them is finished when
+the main theme looks right. There are three themes — the language itself in
+`src/tokens.css`, `flat`, and `glass` — and a change lands in all three or it
+has not landed.
+
+That is the symmetric half of the toll already stated above. **A new theme
+capability costs a main-theme token first; a change to the main theme costs
+every theme a look.** Neither direction is optional, and the second is the one
+easy to skip, because the default theme is the one on screen while you work.
+
+What "answered in every theme" means depends on the shape of the change:
+
+- **A new token.** Every theme either restates it or can point at why it does
+  not need to. Two reasons count. The default is inert — `--axi-surface-filter`
+  and `--axi-ground-image` are `none`, so a theme that wants neither is already
+  correct. Or the token aliases one the theme did restate —
+  `--axi-surface-float: var(--axi-surface)`, so `flat` restating the surface
+  restates the float with it. A token holding a literal of its own is answered
+  by neither of those, and every theme has to say it. This is checked; see
+  below.
+- **A new component.** It renders under all three, and you look at it under all
+  three. The gallery's theme switcher is there for exactly the reason the accent
+  switcher is: a component that hard-coded something looks fine until you
+  change the thing it hard-coded. A panel that reads as a panel on opaque slate
+  can vanish on a translucent one.
+- **A retuned look.** The `-paint` companions are the case that made this a
+  section. Lifting them meant every surface a theme grades needs a flat
+  companion beside it, and both themes had to be edited in the same commit as
+  the tokens — edit one and the other hands a gradient straight to
+  `background-color`, which is not a subtle failure but it is an invisible one
+  from the theme you happened to be looking at.
+
 **What is mechanically enforced.** `tests/themes.test.mjs` reads every
 `dist/themes/*.css` and checks the mirror rather than trusting it: the file
 contains exactly one rule, its selector is `[data-axi-theme="<id>"]` for the
@@ -693,6 +868,16 @@ non-empty value, and every property it declares is already declared in
 takes a second selector. An invented token fails the last. The suite passes
 vacuously while no theme exists, and binds the moment the first file lands.
 
+The section above is checked from the other side by the same file: a token that
+*any* theme restates must be restated by *every* theme, unless that theme
+inherits an answer already — the main-theme default is inert, or the token
+aliases another the theme did restate, and the check follows the alias chain
+rather than taking the two reasons on trust. So a token one theme has an opinion
+about cannot be a token another theme forgot. What no test can check is the
+third bullet, the look you did not look at: a component can paint under all
+three themes and still be wrong under two of them, and the only instrument for
+that is the theme switcher in the gallery.
+
 ## Adding a component
 
 1. Which rule justifies it? If none, write the rule first or stop.
@@ -702,7 +887,11 @@ vacuously while no theme exists, and binds the moment the first file lands.
    [Themes](#themes).
 4. Add it to the gallery, and check it with the accent switcher — if it does
    not follow the accent, it hard-coded something.
-5. `npm run build` and commit `dist/axi.css` with your source change.
+5. Then check it with the theme switcher, under all three — the language,
+   `flat` and `glass`. Translucent surfaces and a 16px corner break different
+   things than opaque ones do, and a component is not done until it reads right
+   under each. See [Themes](#themes).
+6. `npm run build` and commit `dist/axi.css` with your source change.
 
 ### A style only reachable through a layer will be re-invented
 
@@ -733,10 +922,30 @@ 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.
+The third instance was not behind a layer prefix at all, and it widens the
+rule. `.axi-palette__list` hid its scrollbar with the argument written inline —
+a bar down the side of a small panel reporting a fact the row count has already
+given. That was the language's only word for the decision, and the decision was
+about *strips*, not about palettes. The same consumer needed it for two rails
+and a picker slot and could not reach it, so it wrote the rule again five times
+in its own stylesheet — twice with a `*` descendant arm, because the element
+that actually scrolls sits one level inside a component it does not control,
+which is the sledgehammer a consumer reaches for when the language gives it no
+name. The remedy is unchanged: one rule, every spelling in it, and a class the
+consumer can spend (`.axi-scroll-quiet`, in `src/utilities.css`).
+
+So the check is not only "is this style behind a layer prefix". It is **is this
+style the only statement of a decision that is broader than the component
+stating it**. A component's own inline reasoning is the tell: if the comment
+argues about a category of thing — a strip, a recess, a reading — and the
+selector names one member of that category, the rest of the category has
+nowhere to look.
+
+Three instances, 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,
+and read the comments on any single-selector rule you are about to copy. If
+either applies, 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
 

package/package.json

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

@@ -139,7 +139,17 @@
    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);
@@ -174,7 +184,7 @@
 .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);
@@ -335,6 +345,115 @@
 }
 .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
@@ -384,6 +503,61 @@
   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
@@ -513,3 +687,31 @@
   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);
+}

package/src/layout.css

@@ -37,6 +37,68 @@
 /* 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
@@ -44,4 +106,10 @@
      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); }
 }