@axiapps/axi-design 1.9.0 → 1.11.0

package/dist/axi.css

@@ -24,6 +24,15 @@
   --axi-text-dim: #a7b0be;
   --axi-text-faint: #7c8695;
   --axi-scrim: rgba(6, 7, 9, .72); /* behind a drawer */
+  /* What a surface does to whatever is behind it. `none` here, and `none` is
+     genuinely inert - it paints nothing and, unlike a transform, establishes
+     no containing block, so the fixed-descendant trap rule 4 documents stays
+     closed. It exists so a theme has somewhere to put the answer: a glass
+     theme makes the surfaces translucent and restates this token, and the
+     blur arrives on every surface at once without one component learning the
+     word. This is the toll the Themes section describes - a theme cannot
+     invent a capability, so the capability is declared here first, inert. */
+  --axi-surface-filter: none;
 
   /* --- accent & status --- */
   --axi-accent: #ffc53d;
@@ -31,6 +40,13 @@
      enough to pass contrast on this ground; an app choosing a dark accent
      overrides this to --axi-text rather than editing components. */
   --axi-accent-ink: var(--axi-ink-line);
+  /* Text drawn on top of a STATUS fill (an ok/warn/danger chip, a close
+     button gone red). Identical to --axi-ink-line today, which is precisely
+     why it has to exist: components were spelling this "the outline colour"
+     and it happened to read correctly. A theme that makes the outline light
+     would otherwise put light text on a bright fill and lose the word. Same
+     idea as --axi-accent-ink above, for the fills that are not the accent. */
+  --axi-ink-on-fill: var(--axi-ink-line);
   --axi-meta: #4ec3ff;            /* the one cool ink: meta only, never a status */
   --axi-ok: #2fd38a;
   --axi-warn: #ff7a2f;
@@ -49,6 +65,15 @@
      block instead of admitting bare literals. */
   --axi-offset-panel-hover: 10px;
   --axi-offset-control-hover: 6px;
+  /* The block itself, composed once. A component asks for "the panel block",
+     not for an offset it then has to assemble into a shadow correctly four
+     times per file - and a theme gets one place to restate what raising a
+     thing looks like. The shape is still rule 3's: two equal offsets, zero
+     blur, the outline ink. */
+  --axi-shadow-panel: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  --axi-shadow-control: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  --axi-shadow-panel-hover: var(--axi-offset-panel-hover) var(--axi-offset-panel-hover) 0 var(--axi-ink-line);
+  --axi-shadow-control-hover: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
   /* The form is sharp. A hard outline, a hard block and a rounded corner are
      three decisions, and the rounded one softens the other two: the corner is
      the first place a flat outlined shape can start looking like a button in
@@ -157,6 +182,8 @@ a { color: inherit; }
   .axi-pill:hover,
   .axi-pill[aria-pressed="true"]:hover,
   .axi-select:hover,
+  .axi-picker__btn:hover,
+  .axi-picker__btn[aria-expanded="true"],
   .axi-card:hover,
   .axi-drawer__close:hover {
     transform: none !important;
@@ -176,9 +203,19 @@ a { color: inherit; }
    us to ship a component for it. */
 .axi-panel {
   background: var(--axi-surface);
+  /* What the surface does to whatever is behind it. `none` in the main theme,
+     which is inert: unlike a transform, `backdrop-filter: none` establishes no
+     containing block, so rule 4's fixed-descendant trap is not reopened here.
+     A theme that makes the surfaces translucent restates this token and the
+     blur arrives everywhere at once. Carried only by the surfaces something
+     can actually be behind - a panel, a popover, an overlay, the scrim. A
+     chip, a switch, a page number and a card glyph sit directly on their
+     parent's fill with nothing but that fill behind them, so the filter would
+     cost a compositor layer each to blur a flat colour. */
+  backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
-  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
   /* A panel owns its padding so every consumer doesn't have to invent one;
      override per instance with --axi-panel-pad where a tighter or looser
      fit is genuinely called for. */
@@ -205,13 +242,13 @@ a { color: inherit; }
    vision and costs no colour. */
 .axi-btn:hover {
   color: var(--axi-text);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
 }
 .axi-btn--primary {
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
 }
 /* The one button that rests with a block already under it, so the generic
    hover's translate alone would move element and block together and leave the
@@ -219,7 +256,7 @@ a { color: inherit; }
    rule 4 warns about. It lifts the way a panel does: the block deepens too. */
 .axi-btn--primary:hover {
   color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control-hover);
 }
 .axi-btn--ghost { background: transparent; }
 .axi-btn--dashed { background: transparent; border-style: dashed; }
@@ -245,13 +282,13 @@ a { color: inherit; }
 }
 .axi-pill:hover {
   color: var(--axi-text);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
 }
 .axi-pill[aria-pressed="true"] {
   background: var(--axi-pill-fill, var(--axi-accent));
   color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
 }
 /* Spelled out rather than left to source order: `.axi-pill:hover` and
    `.axi-pill[aria-pressed="true"]` have identical specificity, so without this
@@ -261,7 +298,7 @@ a { color: inherit; }
 .axi-pill[aria-pressed="true"]:hover {
   background: var(--axi-pill-fill, var(--axi-accent));
   color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control-hover);
   transform: translate(-2px, -2px);
 }
 
@@ -335,9 +372,9 @@ a { color: inherit; }
   letter-spacing: var(--axi-ls-micro);
   text-transform: uppercase;
 }
-.axi-chip--ok { background: var(--axi-ok); color: var(--axi-ink-line); }
-.axi-chip--warn { background: var(--axi-warn); color: var(--axi-ink-line); }
-.axi-chip--danger { background: var(--axi-danger); color: var(--axi-ink-line); }
+.axi-chip--ok { background: var(--axi-ok); color: var(--axi-ink-on-fill); }
+.axi-chip--warn { background: var(--axi-warn); color: var(--axi-ink-on-fill); }
+.axi-chip--danger { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
 .axi-chip--accent { background: var(--axi-accent); color: var(--axi-accent-ink); }
 .axi-chip--meta {
   background: transparent;
@@ -400,8 +437,11 @@ a { color: inherit; }
 /* ---------- select ---------- */
 /* The closed box is ours everywhere: strip the native control and draw the
    caret, so a select sits alongside the other controls as just another
-   outlined chip instead of announcing the OS. */
-.axi-select {
+   outlined chip instead of announcing the OS. .axi-picker__btn is the same
+   box worn by a button instead of a <select>; the two share every
+   declaration here so a dropdown reads the same whichever half opens it. */
+.axi-select,
+.axi-picker__btn {
   appearance: none;
   padding: 10px 30px 10px 9px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
@@ -422,16 +462,24 @@ a { color: inherit; }
   background-repeat: no-repeat;
   transition: transform .1s, box-shadow .1s;
 }
-.axi-select:hover {
+/* The open trigger keeps the lift. Rule 4 gives the raise to a pointer, but a
+   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-picker__btn[aria-expanded='true'] {
   color: var(--axi-text);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
 }
 
 /* The popup stays OS chrome until a browser lets us style it. Where one does
    (Chromium's base-select), the list is drawn with the same outline and offset
    block as our own popovers, so both dropdown kinds read as one family; where
-   it does not, the closed box above is still ours and the list is native. */
+   it does not, the closed box above is still ours and the list is native -
+   and if that native list is not good enough, .axi-picker below draws the
+   whole thing. */
 @supports (appearance: base-select) {
   /* base-select draws its own ::picker-icon, so the hand-drawn caret above
      would be a second arrow. */
@@ -443,7 +491,8 @@ a { color: inherit; }
     border: var(--axi-border-panel) solid var(--axi-ink-line);
     border-radius: var(--axi-radius);
     background: var(--axi-surface-raised);
-    box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+    backdrop-filter: var(--axi-surface-filter);
+    box-shadow: var(--axi-shadow-panel);
   }
   .axi-select option {
     display: flex; align-items: center; gap: 9px;
@@ -466,6 +515,221 @@ a { color: inherit; }
   .axi-select option::checkmark { content: "\2713"; color: var(--axi-accent); font-weight: 900; }
 }
 
+/* ---------- picker ---------- */
+/* The select's other half. Above, the native popup is left as OS chrome
+   wherever `appearance: base-select` is missing - and that is most places
+   today, including every Electron built on a Chromium older than the
+   property. What lands there is a raised list the language cannot reach: no
+   ink outline, no offset block, its own selection colour instead of the
+   accent. That is rule 3 broken by a box we do not own, so the fix is to stop
+   asking the OS to draw it. .axi-picker is a button and a popover wearing the
+   closed box and the list styling from the @supports branch above, so the two
+   kinds are the same dropdown and a consumer picks by what the platform has.
+
+   Prefer the native <select> where it works: it comes with keyboard handling,
+   typeahead, and a popup that can escape the window. This is what you use
+   when it does not.
+
+   Markup contract - the listbox pattern, and the popover carries the panel
+   weight because it is a raised surface, not a control:
+
+     <div class="axi-picker">
+       <button class="axi-picker__btn" aria-haspopup="listbox"
+               aria-expanded="false" aria-controls="months">Jul 2026</button>
+       <div class="axi-picker__pop" id="months" role="listbox" hidden>
+         <button class="axi-picker__opt" role="option" aria-selected="true">
+           Jul 2026
+         </button>
+       </div>
+     </div>
+
+   Like the menu and the tooltip, the language ships no script: `hidden`,
+   `aria-expanded` and `aria-selected` are the whole state, and the consumer
+   toggles them. gallery.js is the reference wiring, arrow keys and Escape
+   included. */
+.axi-picker { position: relative; display: inline-flex; }
+.axi-picker__btn {
+  display: inline-flex; align-items: center;
+  width: 100%;
+  text-align: left;
+}
+.axi-picker__pop {
+  /* Above .axi-mast's z-index: 40, for the same reason .axi-menu__pop is. */
+  position: absolute; top: calc(100% + 9px); left: 0; z-index: 41;
+  /* Never narrower than the box it came out of, and no wider than its
+     longest row needs. A list that shrinks to the text is a list that has
+     moved, and the eye has to find the column again. */
+  min-width: 100%;
+  max-height: 340px; overflow-y: auto;
+  padding: 6px;
+  background: var(--axi-surface-raised);
+  backdrop-filter: var(--axi-surface-filter);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  /* The block falls outside the popover's own box. An ancestor that clips -
+     a scrolling pane, a panel with overflow: hidden - eats it, and the only
+     shadow on the screen is the one that goes missing. */
+  box-shadow: var(--axi-shadow-panel);
+}
+.axi-picker__pop[hidden] { display: none; }
+/* A popover cannot always live beside its trigger. Inside a pane that scrolls
+   or a panel that clips, `position: absolute` puts the list where the
+   overflow can eat it - and the offset block falls outside the popover's box,
+   so the block is the first thing to go. The way out is the tooltip's
+   contract: append the popover to <body> and set left/top from script, having
+   measured the trigger. The box is unchanged; only who positions it moves. */
+.axi-picker__pop--fixed { position: fixed; }
+.axi-picker__opt {
+  display: flex; align-items: center; gap: 9px;
+  width: 100%;
+  padding: 8px 9px;
+  border: 0;
+  border-radius: var(--axi-radius-sm);
+  background: transparent;
+  color: var(--axi-text-dim);
+  font: var(--axi-t-label);
+  font-size: 12.5px;
+  letter-spacing: var(--axi-ls-label);
+  text-transform: uppercase;
+  text-align: left;
+  cursor: pointer;
+}
+/* The tick is in every row, inked only in the chosen one. Give it to the
+   selected row alone and every label shifts by its width as the choice moves,
+   which turns picking an option into the list twitching. */
+.axi-picker__opt::before {
+  content: "\2713";
+  color: transparent;
+  font-weight: 900;
+}
+.axi-picker__opt:hover, .axi-picker__opt:focus {
+  background: var(--axi-ground); color: var(--axi-text);
+}
+/* The page-wide focus ring sits 2px outside its element; inside a popover
+   this tight that is 2px into the neighbouring row, so pull it back in. */
+.axi-picker__opt:focus-visible { outline-offset: -3px; }
+.axi-picker__opt[aria-selected='true'] { color: var(--axi-text); }
+.axi-picker__opt[aria-selected='true']::before { color: var(--axi-accent); }
+
+/* ---------- avatar ---------- */
+/* A square, because a circle is the one shape this language does not have:
+   --axi-radius is 0, and a round avatar would be the only rounded thing on
+   the page. It follows the radius scale like everything else, so a consumer
+   who wants round avatars sets --axi-radius-sm and gets rounded controls
+   everywhere - which is the honest version of the request.
+   Flat: outlined, no block. An avatar is content inside a panel, the same as
+   .axi-stat and .axi-table__rank, not a thing raised off it. */
+.axi-avatar {
+  width: var(--axi-avatar-size, 40px);
+  height: var(--axi-avatar-size, 40px);
+  flex: none;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: var(--axi-ground);
+  color: var(--axi-text-dim);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  text-transform: uppercase;
+}
+.axi-avatar--accent { background: var(--axi-accent); color: var(--axi-accent-ink); }
+/* object-fit rather than a background-image, so the <img>'s alt text survives
+   and a broken source is visible rather than silently blank. */
+.axi-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* --- forms.css --- */
+/* axi design language - forms.
+   Real inputs, styled. Every control here is an actual <input> or <textarea>
+   with `appearance: none`, never a <div> wearing a class: a checkbox that is
+   not an <input> does not submit with its form, does not toggle from the
+   keyboard, and is not announced as a checkbox. The language styles controls;
+   it does not reimplement them.
+
+   Rule 3's flat case governs the geometry: a control inside a panel is
+   outlined and carries no block, exactly as .axi-input and .axi-switch
+   already are. Rule 5 governs the state: the fill is what says "on".
+
+   The focus ring is deliberately absent from this file. base.css draws one
+   page-wide on :focus-visible, and appearance: none does not remove it - it
+   removes the browser's own. Suppressing the outline anywhere here would make
+   every control in it unusable by keyboard. */
+
+/* ---------- checkbox and radio ---------- */
+/* One box, two marks. --axi-radius is 0, so both are square and a round radio
+   would be the only rounded shape in the language - the first place a flat
+   outlined form starts looking like some other framework's. So they are told
+   apart by their mark instead: the checkbox gets a check, the radio gets the
+   family diamond (rule 7).
+
+   Both read the same two knobs on purpose. A form holding checkboxes and
+   radios together should not need two properties set to the same value to
+   keep its controls the same size. */
+.axi-check,
+.axi-radio {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  flex: none;
+  width: var(--axi-check-size, 22px);
+  height: var(--axi-check-size, 22px);
+  display: inline-grid;
+  place-items: center;
+  background: var(--axi-ground);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  cursor: pointer;
+}
+/* The mark is always in the DOM and revealed with opacity rather than being
+   created on :checked, so the box never changes size as it toggles. */
+.axi-check::after {
+  content: "";
+  width: 55%;
+  height: 30%;
+  opacity: 0;
+  border-left: var(--axi-border-control) solid var(--axi-accent-ink);
+  border-bottom: var(--axi-border-control) solid var(--axi-accent-ink);
+  transform: translateY(-12%) rotate(-45deg);
+}
+.axi-check:checked { background: var(--axi-check-fill, var(--axi-accent)); }
+.axi-check:checked::after { opacity: 1; }
+/* The radio's mark is the diamond itself, so it is drawn in the fill rather
+   than on it - there is no filled box underneath it to sit on. It takes the
+   hairline outline rule 7's diamond wears at this scale (see the prose
+   bullet, src/prose.css, the other place a diamond this small is drawn) -
+   the mark is revealed with opacity, so the hairline is hidden along with
+   the fill in the unchecked state and never leaks out on its own. */
+.axi-radio::after {
+  content: "";
+  width: 46%;
+  height: 46%;
+  opacity: 0;
+  background: var(--axi-check-fill, var(--axi-accent));
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+}
+.axi-radio:checked::after { opacity: 1; }
+.axi-check:disabled,
+.axi-radio:disabled { cursor: not-allowed; opacity: .5; }
+
+/* ---------- textarea ---------- */
+/* Not a component: the same .axi-input a single-line field uses, with the two
+   things a <textarea> needs that an <input> does not. The font is restated
+   because a textarea does not inherit the page font in any browser, and a
+   form whose notes field is monospace while its name field is not is a bug
+   nobody files and everybody sees.
+
+   Resizing is vertical only. A textarea dragged wider than its field breaks
+   the column its form is laid out in, and the reader who did it has no way
+   to discover that the layout is not at fault. */
+textarea.axi-input {
+  min-height: var(--axi-textarea-h, 90px);
+  resize: vertical;
+  font-family: var(--axi-sans);
+  line-height: 1.5;
+}
+
 /* --- layout.css --- */
 /* axi design language - layout.
    Three measures, one grid, two spacing helpers. Deliberately small: a
@@ -581,16 +845,17 @@ a { color: inherit; }
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   border-color: var(--axi-ink-line);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
 }
 
 /* ---------- notice ---------- */
 .axi-notice {
   display: flex; gap: 14px; padding: 15px 18px;
   background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
-  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 .axi-notice__icon {
   flex: none; width: 26px; height: 26px;
@@ -608,9 +873,10 @@ a { color: inherit; }
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
   padding: 14px;
   background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
-  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 
 /* ---------- menu popover ---------- */
@@ -625,9 +891,10 @@ a { color: inherit; }
   width: var(--axi-menu-width, 310px);
   max-height: 340px; overflow-y: auto; padding: 8px;
   background: var(--axi-surface-raised);
+  backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
-  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 .axi-menu__pop[hidden] { display: none; }
 .axi-menu__pop label {
@@ -636,7 +903,7 @@ a { color: inherit; }
   font-size: 13px; font-weight: 600; color: var(--axi-text-dim); cursor: pointer;
 }
 .axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
-.axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
+.axi-menu__pop input { margin: 3px 0 0; }
 
 /* ---------- tooltip ---------- */
 /* One line of ink on the darkest surface in the language, so it reads over
@@ -649,7 +916,11 @@ a { color: inherit; }
    exists nowhere else, because a keyboard or touch user may never see it. */
 .axi-tooltip {
   position: fixed;
-  z-index: 99999;
+  /* Layer 70: above the drawer and its scrim, above toasts, below a
+     showModal()-ed dialog's top layer - which it was below anyway, since the
+     top layer is above every z-index. 99999 was not a layer, it was an
+     argument with one. */
+  z-index: 70;
   padding: 5px 8px;
   background: var(--axi-ink-line);
   color: var(--axi-text);
@@ -667,15 +938,16 @@ a { color: inherit; }
   display: flex; flex-direction: column; gap: 11px;
   padding: 22px 16px 14px;
   background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
-  box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
   font: inherit; color: inherit; text-decoration: none; cursor: pointer;
   transition: transform .1s, box-shadow .1s;
 }
 .axi-card:hover {
   transform: translate(-3px, -3px);
-  box-shadow: var(--axi-offset-panel-hover) var(--axi-offset-panel-hover) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel-hover);
 }
 /* The top strip is drawn from the card itself so a renderer does not have to
    emit an extra element for it. It is opt-in: a card only gets a strip when
@@ -723,12 +995,13 @@ a { color: inherit; }
 .axi-card:hover .axi-card__go { color: var(--axi-text); }
 
 /* ---------- drawer ---------- */
-.axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); border: 0; }
+.axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); backdrop-filter: var(--axi-surface-filter); border: 0; }
 .axi-drawer {
   position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
   width: min(var(--axi-drawer-width, 560px), 100vw);
   display: flex; flex-direction: column;
   background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
   border-left: var(--axi-border-panel) solid var(--axi-ink-line);
 }
 .axi-drawer[hidden], .axi-scrim[hidden] { display: none; }
@@ -754,7 +1027,7 @@ a { color: inherit; }
 }
 .axi-drawer__close:hover {
   background: var(--axi-accent); color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
 }
 .axi-drawer__body { overflow-y: auto; padding: 18px 24px 30px; }
@@ -822,10 +1095,70 @@ a { color: inherit; }
 .axi-titlebar__btns 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-line); }
+.axi-titlebar__btns 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; }
 
+/* ---------- breadcrumbs ---------- */
+/* A path, not a control strip. The separator is the family diamond (rule 7)
+   drawn in the rule ink, so it reads as punctuation rather than as a third
+   link the reader could click.
+   The current crumb is NOT filled. Rule 5 reserves a fill for a state
+   something is in - pressed, on, current-as-in-selected - and the last crumb
+   is a position, not a control that is on. It takes the full text ink and the
+   label weight instead. */
+.axi-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  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); }
+/* 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
+   hairline, not one of the two form steps, is the established weight for a
+   diamond this small - at 6px a 2px border on each side would leave only a
+   2px fill, too tight to read as a diamond at all. */
+.axi-crumbs__sep {
+  width: 7px; height: 7px; flex: none;
+  background: var(--axi-rule);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+}
+.axi-crumbs [aria-current="page"] { color: var(--axi-text); font-weight: 800; }
+
+/* ---------- pagination ---------- */
+/* The same idea .axi-tabs already expresses, applied to a row of pages: the
+   current one is filled and blocked, because "this one is on" is what a fill
+   means here. Written as its own component rather than as a tabs modifier
+   because a pager sits under content and a tab strip sits in a titlebar, and
+   the two disagree about everything except that treatment. */
+.axi-pages { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
+.axi-pages__n {
+  min-width: 36px;
+  padding: 8px 10px;
+  text-align: center;
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  color: var(--axi-text-dim);
+  text-decoration: none;
+  background: var(--axi-surface-raised);
+  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[aria-current="page"] {
+  background: var(--axi-accent);
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-shadow-control);
+}
+/* The elided run between two page numbers. Not a control and never focusable:
+   it is the only thing in the row a reader cannot go to. */
+.axi-pages__gap { color: var(--axi-text-faint); padding: 0 2px; }
+
 @media (max-width: 640px) {
   .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
   .axi-tabs { margin-left: 0; width: 100%; overflow-x: auto; }
@@ -835,13 +1168,140 @@ a { color: inherit; }
      to the panel hover block, so a card on a hover-emulating touch device
      jumped further than it does on the desktop it was tuned for. */
   .axi-notice, .axi-toolbar, .axi-card {
-    box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+    box-shadow: var(--axi-shadow-control);
   }
   .axi-card:hover {
-    box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+    box-shadow: var(--axi-shadow-control-hover);
   }
 }
 
+/* ---------- modal ---------- */
+/* A real <dialog>. Focus trapping, Esc-to-close, inertness for everything
+   behind it and promotion to the top layer all come from the browser, and
+   none of them can be had from CSS - so the alternative was a <div> plus a
+   focus trap this language has no script to write.
+   That choice has one visible cost, and it is named here rather than left to
+   be discovered: a <dialog> brings its own ::backdrop, so the modal styles
+   that instead of reusing .axi-scrim. The two look identical and are not the
+   same element. Reusing .axi-scrim would have meant giving up <dialog>.
+   Panel weight and panel block: it is the most raised thing on the page. */
+.axi-modal {
+  padding: 0;
+  max-width: min(var(--axi-modal-width, 560px), calc(100vw - 32px));
+  background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
+  color: var(--axi-text);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-shadow-panel);
+}
+.axi-modal::backdrop { background: var(--axi-scrim); backdrop-filter: var(--axi-surface-filter); }
+/* The head and foot are divided from the body by rules, not by outlines: they
+   are parts of one raised thing, and rule 8's reading applies - a line inside
+   a raised surface separates its parts, it does not raise them. */
+.axi-modal__head {
+  display: flex; align-items: center; gap: 12px;
+  padding: 15px 18px;
+  border-bottom: var(--axi-border-control) solid var(--axi-rule);
+}
+.axi-modal__head h2 { font: var(--axi-t-h3); letter-spacing: var(--axi-ls-h3); margin: 0; }
+.axi-modal__body { padding: 18px; font: var(--axi-t-small); color: var(--axi-text-dim); }
+.axi-modal__foot {
+  display: flex; justify-content: flex-end; gap: 9px;
+  padding: 15px 18px;
+  border-top: var(--axi-border-control) solid var(--axi-rule);
+}
+
+/* ---------- accordion ---------- */
+/* <details>/<summary>, so it opens and closes with no script and is
+   announced as a disclosure. The native marker is removed and replaced with
+   the family diamond, which rotates a quarter turn on [open] - a transform,
+   so it is inside rule 4's rationing without needing rule 11. */
+.axi-accordion {
+  background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-shadow-panel);
+}
+/* Stacked accordions need the gap the block occupies, or each one's block
+   lands on the next one's outline. */
+.axi-accordion + .axi-accordion { margin-top: calc(var(--axi-offset-panel) + 8px); }
+.axi-accordion__head {
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 18px;
+  cursor: pointer;
+  list-style: none;
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  color: var(--axi-text);
+}
+.axi-accordion__head::-webkit-details-marker { display: none; }
+.axi-accordion__head::before {
+  content: "";
+  width: 8px; height: 8px; flex: none;
+  background: var(--axi-accent);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+  transition: transform .12s;
+}
+/* A 135deg turn, not the quarter turn "45deg to 180deg" might suggest by the
+   numbers alone: a literal quarter turn on a square lands back on the same
+   silhouette and would erase the open/closed cue. */
+.axi-accordion[open] .axi-accordion__head::before { transform: rotate(180deg); }
+.axi-accordion__body {
+  padding: 0 18px 16px 38px;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
+/* ---------- toasts ---------- */
+/* Layer 60, between the drawer and the tooltip.
+   The region is a layout box and nothing else, sized only by its content -
+   it sets no width or height of its own, so an empty one is zero-area and
+   pointer-events: none is not there to stop it covering the page. It is
+   there because the flex gaps between stacked toasts would otherwise eat
+   clicks aimed at the corner beneath them. The toasts themselves take their
+   events back.
+   This language ships no script, so appearing, stacking and leaving on a
+   timer are the consumer's: insert a .axi-toast into the region and remove it
+   when it is done. That is the same contract .axi-menu already publishes for
+   its open state, not a new kind of promise. */
+.axi-toasts {
+  position: fixed;
+  right: var(--axi-gutter);
+  bottom: var(--axi-gutter);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: calc(var(--axi-offset-control) + 9px);
+  pointer-events: none;
+}
+/* Control weight and control block, not panel: a stack of four panels over
+   the page is a wall. A toast is a chip-sized raised thing. */
+.axi-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 15px;
+  background: var(--axi-surface-raised);
+  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);
+  font: var(--axi-t-small);
+  color: var(--axi-text);
+}
+.axi-toast__dot {
+  width: 10px; height: 10px; flex: none;
+  background: var(--axi-accent);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+}
+.axi-toast--ok .axi-toast__dot { background: var(--axi-ok); }
+.axi-toast--warn .axi-toast__dot { background: var(--axi-warn); }
+.axi-toast--danger .axi-toast__dot { background: var(--axi-danger); }
+
 /* --- data.css --- */
 /* axi design language - data.
    Numbers, and the shapes numbers are drawn as. Everything here is panel
@@ -1123,6 +1583,75 @@ a { color: inherit; }
   color: var(--axi-text-dim);
 }
 
+/* --- feedback.css --- */
+/* axi design language - feedback.
+   Things that report on work, and things that report on how work went. Rule
+   11 governs the first kind and is the one rule in this language described as
+   non-negotiable: an indicator of work may animate only `transform` and
+   `opacity`, because those are the two the compositor runs off the main
+   thread. A spinner animated by layout freezes with the work it reports on,
+   and a frozen spinner tells the reader the app crashed at the exact moment
+   it was working hardest. tests/motion.test.mjs enforces it. */
+
+/* ---------- spinner ---------- */
+/* The family motif, turning. A square rotated 45deg is the diamond, so the
+   loop runs 45deg -> 405deg: one full turn that begins and ends on the
+   motif rather than on a square.
+   That start and end also make it correct under reduced motion for free.
+   base.css only shortens the animation to one .01ms iteration; it never sets
+   animation-fill-mode, so once that instant run finishes the element reverts
+   to its specified transform: rotate(45deg) - the motif at rest, and visually
+   identical to where the loop begins. */
+@keyframes axi-spin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
+.axi-spinner {
+  display: inline-block;
+  flex: none;
+  width: var(--axi-spinner-size, 20px);
+  height: var(--axi-spinner-size, 20px);
+  border: var(--axi-border-control) solid var(--axi-accent);
+  border-radius: var(--axi-radius-sm);
+  transform: rotate(45deg);
+  animation: axi-spin 1.1s linear infinite;
+}
+
+/* ---------- indeterminate meter ---------- */
+/* The .axi-meter that does not know how far along it is. The fill keeps a
+   fixed width and travels; `width` is never animated, which is the whole of
+   rule 11. --axi-meter-v is ignored in this mode - there is no value to
+   express, which is what indeterminate means. */
+@keyframes axi-meter-busy {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(400%); }
+}
+.axi-meter--busy .axi-meter__fill {
+  width: 25%;
+  animation: axi-meter-busy 1.3s ease-in-out infinite;
+}
+/* base.css only ever sets animation-duration and animation-iteration-count
+   under reduced motion; it never touches animation-fill-mode. The shorthand
+   above resets animation-fill-mode to its default, none, so once the .01ms
+   run finishes the element reverts to its specified style rather than
+   holding the keyframe it ended on - here that is transform: none and the
+   fill's own width: 25%, a left-anchored quarter-width bar. That is already
+   the right thing to show: visible, and unmistakably not finished. This rule
+   states transform: none explicitly rather than relying on the revert, so
+   the "at rest" case is not accidental. */
+@media (prefers-reduced-motion: reduce) {
+  .axi-meter--busy .axi-meter__fill { transform: none; }
+}
+
+/* ---------- notice status ---------- */
+/* Rule 5: the icon is the part of a notice that asserts something, so the
+   status lives there. The body text stays in the reading ink at every status
+   - a whole paragraph in the danger ink is the tinted-everything failure rule
+   2 exists to prevent, and it is unreadable besides. */
+.axi-notice--ok .axi-notice__icon { background: var(--axi-ok); }
+.axi-notice--warn .axi-notice__icon { background: var(--axi-warn); }
+.axi-notice--danger .axi-notice__icon { background: var(--axi-danger); }
+.axi-notice--ok b { color: var(--axi-ok); }
+.axi-notice--warn b { color: var(--axi-warn); }
+.axi-notice--danger b { color: var(--axi-danger); }
+
 /* --- prose.css --- */
 /* axi design language - prose.
    A single class wrapping rendered markdown, so a content pipeline can emit
@@ -1183,7 +1712,7 @@ a { color: inherit; }
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
 }
 .axi-prose pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.6; }