@axiapps/axi-design 1.9.0 → 1.11.0

package/src/primitives.css

@@ -10,9 +10,19 @@
    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. */
@@ -39,13 +49,13 @@
    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
@@ -53,7 +63,7 @@
    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; }
@@ -79,13 +89,13 @@
 }
 .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
@@ -95,7 +105,7 @@
 .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);
 }
 
@@ -169,9 +179,9 @@
   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;
@@ -234,8 +244,11 @@
 /* ---------- 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);
@@ -256,16 +269,24 @@
   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. */
@@ -277,7 +298,8 @@
     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;
@@ -299,3 +321,127 @@
   .axi-select option:checked { color: var(--axi-text); }
   .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; }

package/src/prose.css

@@ -57,7 +57,7 @@
   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; }
 

package/src/shells.css

@@ -63,16 +63,17 @@
   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;
@@ -90,9 +91,10 @@
   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 ---------- */
@@ -107,9 +109,10 @@
   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 {
@@ -118,7 +121,7 @@
   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
@@ -131,7 +134,11 @@
    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);
@@ -149,15 +156,16 @@
   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
@@ -205,12 +213,13 @@
 .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; }
@@ -236,7 +245,7 @@
 }
 .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; }
@@ -304,10 +313,70 @@
 .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; }
@@ -317,9 +386,136 @@
      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); }

package/src/tokens.css

@@ -20,6 +20,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;
@@ -27,6 +36,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;
@@ -45,6 +61,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