@axiapps/axi-design 1.42.0 → 1.44.0

package/src/primitives.css

@@ -75,13 +75,69 @@ a.axi-panel--tile:hover,
 button.axi-panel--tile:hover,
 .axi-panel--tile[role='button']:hover { box-shadow: var(--axi-shadow-control-hover); }
 
+/* The one of these you picked. A grid of panels, tiles or cards where one is
+   chosen - a theme picker, a fight picker, a leader you have opened - and the
+   surface has to say which.
+
+   Not the accent fill a rail item takes. A rail item is a word, and a word can
+   be printed on the accent; a panel carries content, and an accent fill drowns
+   it. The answer is the third weight .axi-rail__nav--quiet already found for
+   the same reason: the surface rises and the accent arrives on the edge. A
+   whole edge here rather than the leading one, because a grid is read in two
+   directions and has no leading side to light.
+
+   Keyed off what the element already says, the way .axi-panel--tile keys its
+   press off being an <a> or a <button> rather than off a second class. The
+   language has one spelling per selection semantics, and this rule takes all
+   of them rather than inventing a fourth: `aria-current` for a place you
+   navigated to (a rail item, a tab, a table row), `aria-pressed` for a toggle
+   (a pill), `aria-selected` for an option in a listbox (a picker option). A
+   consumer that marks a card by appending a border utility has told assistive
+   tech nothing at all, and that is the defect this replaces rather than the
+   missing fill - ten sites in one consumer, six different bases, three
+   invented extra marks, and not one of them announced.
+
+   The fourth arm is a <label> wrapping its own radio, which is the correct
+   markup for a picker made of panels: the input carries the state, so the
+   label has no attribute to set and copying the state onto one would be a
+   second source of truth that can disagree. This is the language's only
+   :has(), and the child combinator is the whole point - `> input:checked`
+   means this panel IS the control, where a descendant match would light a
+   panel up for any checkbox buried in its content.
+
+   Both spellings on one rule, per "a style only reachable through a layer will
+   be re-invented": .axi-card is a shell and .axi-panel a primitive, and a
+   consumer marking one of them must not have to find out which file its
+   selected state was written in. The fill is the `background` shorthand and
+   not the -paint companion, because --axi-surface-raised is a surface token
+   and a theme is allowed to make a surface a gradient. */
+:is(.axi-card, .axi-panel):is(
+  [aria-current],
+  [aria-pressed='true'],
+  [aria-selected='true'],
+  :has(> input:checked)
+) {
+  background: var(--axi-surface-raised);
+  border-color: var(--axi-accent);
+}
+
 /* ---------- well ---------- */
 /* The panel's inverse: a field sunk into the surface around it rather than
    raised off it. No block, because a recess casts nothing, and the rule rather
    than the ink for its edge - see --axi-well-fill in src/tokens.css for why
    both of those follow from the same fact. Reach for this wherever a second
    panel inside a panel was the instinct: a picker list beside a table, a column
-   of cards standing on the page, a trough a bar fills. */
+   of cards standing on the page, a trough a bar fills.
+
+   .axi-split__nav is the first of those three named as a part rather than left
+   to the consumer to remember, and it is in THIS rule rather than restating the
+   fill next to the split pane. Two rules that agree today are two rules that
+   disagree after the next edit - see "A style only reachable through a layer
+   will be re-invented" in docs/RULES.md, which is the same argument arriving
+   from the other direction. The split pane's slot cannot be a well by
+   convention: a consumer who forgets the second class gets a picker with no
+   recess, and the language has no way to notice. */
+.axi-split__nav,
 .axi-well {
   background: var(--axi-well-fill);
   border: var(--axi-border-control) solid var(--axi-well-line);
@@ -180,6 +236,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 +571,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 +584,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 +710,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 +738,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 +753,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 +852,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,10 +741,47 @@
   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
+   thing I dismiss", and this language has two things that get dismissed at two
+   different rungs, so the scrim has two.
+
+   The default is the drawer-and-modal rung at 50, which is where
+   --axi-scrim's own value was tuned (its token comment reads "behind a
+   drawer"). `.axi-scrim--sheet` is the same scrim one rung below the sheet at
+   45.
+
+   Without that modifier a sheet cannot be scrimmed at all, and the failure is
+   not cosmetic - it is a dead interface. Both elements are `position: fixed` in
+   the same stacking context with no isolation between them, so at 50 over 45
+   the scrim covers the sheet completely: measured with
+   `document.elementFromPoint` at the centre of an open sheet, the element
+   returned is the scrim. Every click lands on the dismiss handler instead of on
+   the content, so the sheet opens and then does nothing.
+
+   The sheet still wants a scrim even though it is opaque and covers the view,
+   for two reasons the sheet's own note explains. --axi-sheet-top pushes it down
+   under an app's titlebar, so a strip of live page stays visible above it and
+   wants darkening; and the scrim is the click-to-dismiss target for that strip,
+   which is a function rather than an appearance.
+
+   A sheet that opens a modal or a drawer is unaffected: those land at 50 and
+   51, above both the sheet and its scrim, which is the ordering the sheet's own
+   comment argues for. That is why this is a second rung and not a change to the
+   first - moving the scrim below 45 outright would put it under the drawer it
+   was measured for.
+
+   No motion here, deliberately. This language has no transition vocabulary -
+   no duration or easing tokens - and rule 11 is a restriction on work
+   indicators rather than a system for animating chrome. A consumer that fades
+   a scrim in owns that animation, and owns keeping its keyframes off the fill:
+   an enter/exit class that also sets a background is a colour literal standing
+   on top of --axi-scrim, which is how the one consumer here had quietly
+   replaced the token with rgba(10, 14, 18, .85). */
 .axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); backdrop-filter: var(--axi-surface-filter); border: 0; }
+.axi-scrim--sheet { z-index: 44; }
 .axi-drawer {
   position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
   width: min(var(--axi-drawer-width, 560px), 100vw);
@@ -741,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);
@@ -883,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;
@@ -894,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; }
 
@@ -916,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
@@ -951,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);
@@ -964,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/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;
+}