@axiapps/axi-design 1.43.0 → 1.45.0

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); }
 }

package/src/primitives.css

@@ -75,13 +75,91 @@ a.axi-panel--tile:hover,
 button.axi-panel--tile:hover,
 .axi-panel--tile[role='button']:hover { box-shadow: var(--axi-shadow-control-hover); }
 
+/* The status cap rule 5 describes, as a thing you can write. A verdict about
+   the reading inside a panel, a tile or a stat is said once, across its head,
+   in the status ink - directly over the value it judges - and the rest of the
+   outline stays the ink line every other edge in the language is drawn in. Not
+   down the left: a full-height stripe is the box's frame, and five tiles in a
+   row become five coloured frames saying nothing about any one number.
+
+   It recolours the top edge the element already has rather than adding a bar,
+   so it is drawn at the element's own weight by construction - the panel step
+   on a panel, the control step on a tile or a stat - which is rule 5's own
+   argument against a heavy cap on a light frame. The state is an attribute the
+   consumer declares about its data (rule 13), read by the three objects a
+   reading lives in; a card's strip is a different claim (which category) and
+   keeps its own word.
+
+   Four values and no fifth: the accent is not a verdict, and a cap in it would
+   say "picked" about a thing nobody picked. */
+.axi-panel[data-status="ok"],     .axi-stat[data-status="ok"]     { border-top-color: var(--axi-ok); }
+.axi-panel[data-status="warn"],   .axi-stat[data-status="warn"]   { border-top-color: var(--axi-warn); }
+.axi-panel[data-status="danger"], .axi-stat[data-status="danger"] { border-top-color: var(--axi-danger); }
+.axi-panel[data-status="meta"],   .axi-stat[data-status="meta"]   { border-top-color: var(--axi-meta); }
+
+/* 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);
@@ -180,6 +258,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; }
@@ -478,7 +593,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;
@@ -491,7 +606,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
@@ -617,8 +732,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);
@@ -645,7 +760,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);
@@ -660,7 +775,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
@@ -759,7 +874,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

package/src/shells.css

@@ -3,14 +3,23 @@
    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
@@ -95,9 +104,35 @@
    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;
@@ -106,8 +141,7 @@
   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"],
@@ -139,13 +173,13 @@
   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
@@ -219,7 +253,7 @@
   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
@@ -282,7 +316,7 @@
   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. */
@@ -430,13 +464,13 @@
   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 ---------- */
@@ -497,14 +531,16 @@
 }
 /* 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
@@ -526,7 +562,7 @@
   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
@@ -558,7 +594,7 @@
   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);
@@ -705,7 +741,7 @@
   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
@@ -778,7 +814,7 @@
   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);
@@ -920,7 +956,7 @@
   -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;
@@ -931,10 +967,10 @@
 /* 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; }
 
@@ -953,8 +989,8 @@
   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
@@ -988,7 +1024,7 @@
   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);
@@ -1001,7 +1037,12 @@
 @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

package/src/tokens.css

@@ -118,6 +118,20 @@
      --axi-ink-on-fill below, on the other side of the same token. */
   --axi-ground-deep: var(--axi-ink-line);
   --axi-rule: #3a4250;            /* internal rules, inside an outlined panel */
+  /* A gridline is quieter than a rule. A rule divides two things; a grid is
+     scaffolding a value is read against, and it has to sit barely above the
+     ground it is drawn on or the chart becomes a grid of boxes with numbers
+     in them - the failure rule 3 names for tables, arriving in a plot.
+
+     Derived, not picked, and that is the point of its being a token. The one
+     consumer that had drawn a chart grid wrote #262c36 for it: the default
+     rule laid over the default ground at 47%, to within one step per channel,
+     and a fixed slate that stayed slate under glass and under flat while both
+     themes relit their rules. Mixing toward transparent rather than toward
+     the ground keeps it right on a panel fill too, and keeps it following
+     --axi-rule when a theme restates that - so a theme has nothing to say
+     here, and says nothing. */
+  --axi-grid: color-mix(in srgb, var(--axi-rule) 47%, transparent);
   /* --- the well --- */
   /* A field sunk INTO a surface rather than raised off one: a table picker's
      list, a bar's trough, a column of cards standing on the page. The language

package/src/utilities.css

@@ -1,6 +1,6 @@
 /* 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.
@@ -103,6 +103,7 @@
 .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"]),
@@ -115,11 +116,65 @@
 .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;
+}