@axiapps/axi-design 1.43.0 → 1.45.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 —
@@ -421,6 +506,28 @@ their meanings inside a chart, so nothing else may borrow them for a category.
 The status inks still mean status inside a plot: a line drawn in `--axi-danger`
 is asserting that the quantity is bad, not that it is the third series.
 
+### A chart's furniture recedes
+
+Rule 10 is about the series. Everything drawn *around* a series - gridlines,
+the axis, tick labels, the hover band, a brush - is furniture, and furniture is
+drawn in the neutral ramp so the series are the only colour in the plot. The
+grid sits a step below the rule, at `--axi-grid`, because a rule divides two
+things and a grid is only what a value is read against; the axis is a rule at
+the hairline; tick labels are the faint ink with tabular figures. A point, a
+bar or a slice keeps its own fill and takes the hairline ink edge every small
+object takes under rule 3. Nothing in a chart is dashed: a dash is decoration,
+and a threshold is one of the few lines in a chart meant to be read.
+
+One accent is spent inside a plot, and only on the one thing in it you can
+grab - a brush's travellers. The hover band is already under the pointer and
+needs no colour to be found.
+
+An app that draws its charts with a library gets the same furniture by
+wrapping the chart in `.axi-chart`, which binds these decisions to the
+library's own element classes. The binding is written without `!important`:
+a consumer that hands the library an inline style has drawn a second design,
+and the remedy is to stop handing it, not for the language to shout over it.
+
 ## 11. An indicator of work animates a composited property
 
 Spinners, progress strips and pulses almost always report on something
@@ -501,6 +608,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
@@ -795,10 +944,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.43.0",
+  "version": "1.45.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/base.css

@@ -72,3 +72,43 @@ a { color: inherit; }
     transform: none !important;
   }
 }
+
+/* The scrollbar is chrome, and chrome is drawn in the language's own ink. A
+   browser's default bar is a light capsule on a light channel, which is two
+   things this language does not have: a colour at partial opacity over the
+   ground (rule 2) and the one radius the system refuses (see --axi-radius).
+   The consumer that first themed it had written both anyway - a 999px thumb
+   in white at 35% - in its own stylesheet, because the language said nothing
+   here, and a decision the language leaves unsaid is one every consumer makes
+   differently.
+
+   So: the thumb is the rule ink, a rectangle, in a transparent channel. The
+   channel is transparent rather than the ground for the reason the well's fill
+   gives: an opaque page colour inside a translucent pane is a black patch, and
+   a bar runs down the inside of panes and wells as often as down the page.
+
+   Two spellings, one per engine, and neither is a fallback for the other.
+   `::-webkit-scrollbar` is the only spelling that controls the SHAPE - the
+   standard `scrollbar-color` pair recolours whatever the engine draws, and
+   what Chromium draws is a capsule with arrow buttons, the shape this language
+   refuses. Worse, Chromium (121+) switches the pseudo-elements off entirely the
+   moment either standard property is set, so writing both does not combine
+   them: it hands Chromium the capsule and throws the rectangle away. (The
+   consumer this replaces had written both, and had been tuning a webkit block
+   Chromium stopped reading, for years.) So the standard pair is scoped to the
+   engines that have no pseudo-element to disable, which today is Firefox, and
+   the pseudo-elements carry the design everywhere else. scrollbar-color
+   inherits, so the root says it once; scrollbar-width does not, so it is set
+   on everything.
+
+   The quiet-scroll rule in utilities.css still wins where it applies: those
+   selectors carry a class and these carry none, so a strip that has asked for
+   no bar gets none, and everything else gets this one. */
+@supports not selector(::-webkit-scrollbar) {
+  html { scrollbar-color: var(--axi-rule) transparent; }
+  * { scrollbar-width: thin; }
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--axi-rule); border-radius: 0; }

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,160 @@
   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);
+}
+
+/* ---------- library charts ---------- */
+/* The language draws its own bars, plot and ticks above. An app that needs a
+   stacked area, a brush or a pie reaches for a charting library instead, and
+   the library arrives with its own furniture: a dashed grey grid, a #666 axis,
+   a slate tooltip with a half-rem corner. Every series it draws is the
+   consumer's data and keeps its own colour (rule 10). Everything drawn AROUND
+   the series is furniture, and furniture is the language's.
+
+   This is the binding for recharts, which is the library the suite uses. It
+   is scoped to `.axi-chart` so a chart opts in by wrapping, and it reaches the
+   library's elements by the class names recharts puts on them. recharts spreads
+   stroke and fill onto its SVG as presentation attributes, which a stylesheet
+   outranks, so nothing here needs to be passed into the library - and nothing
+   here is written with !important. A consumer that hands the library an inline
+   `contentStyle` has written a second design for the tooltip, and the answer
+   is to stop writing it, not for the language to shout over it: the tooltip is
+   `.axi-tooltip--flow` as custom content, drawn once, like every other tooltip.
+
+   The grammar is the one every component here already follows. Furniture is
+   drawn in the neutral ramp and recedes: the grid at --axi-grid, a step below
+   the rule (see tokens.css); the axis as a rule at the hairline weight, the
+   same line the table draws between rows; tick labels in the faint ink with
+   tabular figures, so a y-axis whose digits change width holds still. Every
+   small object standing on a series - a point, a bar, a slice - takes the ink
+   edge rule 3 gives every other small object, at the hairline because it is a
+   mark and not a raised surface, and keeps its fill, because the fill is which
+   series it belongs to. The hover band is the raised step's -paint companion
+   (a `fill` cannot be a gradient) rather than a white wash, which is rule 2.
+
+   The brush is the one place an accent is spent. Its two travellers are the
+   only thing in any chart you can grab, and they are small: a target you have
+   to find before you can use it is what the accent is for, unlike the hover
+   band, which is already under the pointer. The slide between them is the
+   surface as one paint, the trough behind them a well. One accent in the plot,
+   on the one control.
+
+   Solid, never dashed. A dash is decoration, and fifteen charts of dashes is a
+   texture rather than a scale; the reference line - a threshold, a claim - is
+   solid too, because it is one of the few lines in a chart meant to be read. */
+.axi-chart {
+  /* Every figure in a chart is a label of a number, so the whole scope reads
+     tabular. Nothing else is declared on the scope: a chart's size belongs to
+     the library's container and the consumer's layout. */
+  font-variant-numeric: tabular-nums;
+}
+.axi-chart .recharts-cartesian-grid line {
+  stroke: var(--axi-grid);
+  stroke-dasharray: none;
+  stroke-width: 1;
+}
+/* Stripes are a second background inside a chart that already has one. */
+.axi-chart .recharts-cartesian-grid-bg,
+.axi-chart .recharts-cartesian-gridstripes-horizontal,
+.axi-chart .recharts-cartesian-gridstripes-vertical { display: none; }
+
+.axi-chart .recharts-cartesian-axis-line {
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-cartesian-axis-tick-line { stroke: var(--axi-rule); }
+.axi-chart .recharts-cartesian-axis-tick-value { fill: var(--axi-text-faint); }
+.axi-chart .recharts-label,
+.axi-chart .recharts-legend-item-text { fill: var(--axi-text-dim); color: var(--axi-text-dim); }
+/* The legend is a key, so it reads as labels rather than as chips - the same
+   type .axi-legend__key sets. */
+.axi-chart .recharts-legend-wrapper {
+  font: var(--axi-t-micro);
+  letter-spacing: var(--axi-ls-micro);
+  text-transform: uppercase;
+}
+
+/* The hover band. A fill change rather than a wash: the next surface up, as
+   one paint, edged with the rule at the hairline like every line here. */
+.axi-chart .recharts-tooltip-cursor {
+  fill: var(--axi-surface-raised-paint);
+  fill-opacity: 1;
+  stroke: var(--axi-rule);
+  stroke-width: var(--axi-border-hairline);
+}
+/* A line chart's cursor is a crosshair, not a band, so it stays a line. */
+.axi-chart .recharts-curve.recharts-tooltip-cursor {
+  fill: none;
+  stroke: var(--axi-rule);
+  stroke-dasharray: none;
+}
+
+/* Small objects standing on a series keep their fill and take the ink edge. */
+.axi-chart .recharts-line-dot,
+.axi-chart .recharts-scatter-symbol > path,
+.axi-chart .recharts-pie-sector > path,
+.axi-chart .recharts-bar-rectangle > path {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-active-dot > * {
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-bar-background-rectangle { fill: var(--axi-well-fill); }
+
+.axi-chart .recharts-reference-line-line {
+  stroke: var(--axi-text-faint);
+  stroke-width: var(--axi-border-hairline);
+  stroke-dasharray: none;
+}
+
+/* The brush: a well, a slide, two travellers, and the preview curve dropped to
+   furniture weight because it is context rather than data you read off. */
+.axi-chart .recharts-brush > rect:first-of-type {
+  fill: var(--axi-well-fill);
+  stroke: var(--axi-well-line);
+  stroke-width: var(--axi-border-control);
+}
+.axi-chart .recharts-brush-slide {
+  fill: var(--axi-surface-paint);
+  fill-opacity: 1;
+}
+.axi-chart .recharts-brush-traveller > rect {
+  fill: var(--axi-accent);
+  stroke: var(--axi-ink-line);
+  stroke-width: var(--axi-border-hairline);
+}
+.axi-chart .recharts-brush-traveller > line { stroke: var(--axi-accent-ink); }
+.axi-chart .recharts-brush-texts { fill: var(--axi-text-faint); }
+.axi-chart .recharts-brush .recharts-curve {
+  stroke: var(--axi-text-faint);
+  fill: none;
+}