neba 1.12.0 → 1.15.0

package/dist/tailwind.css

@@ -59,6 +59,23 @@
 :root,
 .light,
 [data-theme='light'] {
+  /* CodeBlock's `auto` palette, declared on every theme root as the colour tokens
+     are, so a block follows the nearest root rather than the document's. */
+  --neba-code-auto-bg: oklch(98.4% 0.003 262);
+  --neba-code-auto-fg: oklch(30% 0.016 262);
+  --neba-code-auto-comment: oklch(58% 0.022 262);
+  --neba-code-auto-keyword: oklch(48% 0.19 322);
+  --neba-code-auto-string: oklch(46% 0.12 148);
+  --neba-code-auto-number: oklch(50% 0.14 48);
+  --neba-code-auto-function: oklch(48% 0.17 264);
+  --neba-code-auto-type: oklch(45% 0.1 214);
+  --neba-code-auto-variable: oklch(45% 0.12 28);
+  --neba-code-auto-tag: oklch(48% 0.18 22);
+  --neba-code-auto-attr: oklch(47% 0.13 82);
+  --neba-code-auto-meta: oklch(52% 0.05 262);
+  --neba-code-auto-add: oklch(45% 0.14 152);
+  --neba-code-auto-del: oklch(48% 0.18 25);
+
   /* Neutral surfaces and content */
   --neba-surface: oklch(100% 0 0);
   --neba-fg: oklch(24% 0.015 262);
@@ -83,6 +100,13 @@
   --neba-fill-alpha: 88%;
   --neba-blur: blur(9px) saturate(1.5);
 
+  /* How much of the family's accent a focus ring is. The ring sits 2px off the
+     control, so what it is read against is the page, and on a white sheet 55%
+     of any accent is 2.2 to 2.6:1 — under the 3:1 a focus indicator needs, on
+     the controls where the ring is all the focus there is. 80% clears 3.4:1 for
+     every family. The dark sheet keeps 55%, which already clears 3.2:1. */
+  --neba-ring-alpha: 80%;
+
   /* Frosted, not polished. A single tile of greyscale fractal noise laid over
      the fill in `overlay` is what separates sandblasted acrylic from a pane of
      glass — and it is the one thing a flat fill can never fake. Kept at 12% in
@@ -126,6 +150,25 @@
   --neba-panel-hover: rgb(255 255 255 / 0.82);
   --neba-panel-press: rgb(255 255 255 / 0.92);
 
+  /* The one surface in the library that is a groove rather than a sheet: the
+     track a Switch's thumb runs along.
+
+     It is the ladder above turned over, and it has to be. The panel is white
+     laid on the page, so on a light theme the track came out *lighter* than
+     what it sits on — and the thumb is `--neba-surface`, which is white. A
+     white disc on a white track is what made an off switch read as an empty
+     pill: 1.02:1, which is no edge at all. The thumb is the light on the track,
+     and light needs something under it to be light against.
+
+     So the groove darkens what is behind it instead of brightening it, which is
+     also what a groove is. It stays translucent for the same reason every other
+     surface here does — the blur behind it is what makes it acrylic rather than
+     paint — and it stays neutral because the family is what "on" says. On the
+     dark theme the panel was already darker than the thumb, so these are the
+     panel's own two steps and nothing moves. */
+  --neba-groove: rgb(16 24 40 / 0.14);
+  --neba-groove-hover: rgb(16 24 40 / 0.19);
+
   /* Pointer spotlight and release afterglow, over a filled surface. Tinted
      variants use their own accent instead — see the derived block. The flash is
      only a shade brighter than the spotlight it replaces: the press is carried
@@ -172,6 +215,13 @@
      as a move. Nothing else may use it. */
   --neba-duration-window: 240ms;
 
+  /* How high every portalled surface sits: a menu, a dialog, a drawer, a
+     tooltip, a toast. One number, because they are all the same kind of thing
+     — something drawn over the page the reader was looking at — and because
+     the value a host needs is its own. A site whose fixed header is at 1200
+     sets this once rather than beating fourteen `z-50`s with a selector. */
+  --neba-z-portal: 50;
+
   /* Color families -------------------------------------------------------
      Chroma sits just under the sRGB gamut boundary for each family's lightness
      — around 90% of the maximum, close enough to be vivid and far enough that
@@ -247,7 +297,7 @@
        clears 4:1 on white and 5.3:1 on the dark sheet.
 
      The order is the mechanism, not a preference: slots are handed out in
-     sequence and never cycled, which is what keeps the *adjacent* pairs — the
+     sequence, repeating only past the eighth, which is what keeps the *adjacent* pairs — the
      only ones that touch in a stack or a legend — the ones that were checked.
      A ninth series is not a ninth colour; it is an "Other" row, or a second
      chart. Series one is the primary hue because a one-series chart should look
@@ -329,6 +379,20 @@
   --neba-chart-div-on-3: var(--neba-fg);
   --neba-chart-div-on-4: var(--neba-fg);
   --neba-chart-div-on-5: var(--neba-surface);
+
+  /* The same decision for a label on one of the eight series colours: a share
+     written on a pie slice. The eight sit at one lightness, so the two inks
+     are within a tenth of each other on the light sheet and the slightly
+     better one is taken per slot; on the dark sheet the surface wins by more
+     than 2:1 on every one of them. */
+  --neba-chart-on-1: var(--neba-fg);
+  --neba-chart-on-2: var(--neba-surface);
+  --neba-chart-on-3: var(--neba-fg);
+  --neba-chart-on-4: var(--neba-surface);
+  --neba-chart-on-5: var(--neba-fg);
+  --neba-chart-on-6: var(--neba-surface);
+  --neba-chart-on-7: var(--neba-fg);
+  --neba-chart-on-8: var(--neba-fg);
 }
 
 /* ---------------------------------------------------------------------------
@@ -336,31 +400,93 @@
  *
  * Fills stay mid-tone rather than pale, so a filled button on a dark surface
  * does not glare; the readable-on-surface `accent` is what lightens.
+ *
+ * Ink and hairlines are picked against the *raised* sheet, not against the bare
+ * one, and that is the one rule this theme does not share with the light block.
+ *
+ * The panel ladder is opacity: `--neba-panel` and its two steps lay white over
+ * whatever is behind them. On a white page that changes nothing — white over
+ * white is white — so a light-theme value measured on `--neba-surface` still
+ * reads the same inside a Card, inside a popup, under a table header. On a
+ * near-black page every step multiplies the bed's luminance instead, and the
+ * steps compound: a Card is 2.1x the page, and a header band inside that Card
+ * is 4.9x. Ink tuned against the bare sheet loses most of its contrast the
+ * moment it sits on a raised one, which is exactly where secondary text,
+ * disabled text and structural rules live.
+ *
+ * Which is also why the dark ladder is 5/7/9% rather than the 7/10/13% it was.
+ * Those three were picked for how a sheet reads against the page, and at the
+ * time the page was all they were checked against; compounded they put a table
+ * header at 7.5x the sheet and squeezed the whole ink hierarchy into the top of
+ * the range. Lowering them costs less than it looks: the light theme's own
+ * ladder moves a sheet's lightness by *nothing at all* — it is the hairline and
+ * the plate edge that say where a Card begins there — and the dark sheet still
+ * lifts by 0.05 in `oklch` L on top of both.
+ *
+ * The four values below are then solved against a table header inside a Card,
+ * the deepest bed the library composes for itself, and checked back down the
+ * ladder:
+ *
+ * - `--neba-muted-fg` reads 5.05:1 there and 4.34:1 with a page shell around it
+ *   as well — the light theme reads 4.33-4.64:1 everywhere, so this is parity at
+ *   every depth. At the old 66% on the old ladder the same header came out at
+ *   3.3:1, and a segmented button's unchosen label and a field's placeholder
+ *   were not far above it.
+ * - `--neba-disabled-fg` lands inside the 2.0-2.4:1 the light theme reads at.
+ *   Disabled text is exempt from 4.5:1 and is meant to be quiet, but at the old
+ *   48% it fell to 1.8:1 on a panel — a disabled menu row or segment was not
+ *   quiet, it was gone.
+ * - `--neba-border` sits *above* the ladder. The light hairline is 0.09 below
+ *   every bed it is drawn on; the old dark one was 0.11 above the bare sheet
+ *   but 0.02 to 0.05 *below* a raised one, so a tree's rails and a chart's grid
+ *   on a Card came out darker than the sheet under them — a black scratch where
+ *   the design language asks for an edge catching the light. It is more present
+ *   on the bare page than the light hairline is, and that is the trade: one
+ *   value cannot be a whisper across a ladder that moves.
  * ------------------------------------------------------------------------- */
 
 @media (prefers-color-scheme: dark) {
   :root:not(.light):not([data-theme='light']) {
+    --neba-code-auto-bg: oklch(19.5% 0.014 262);
+    --neba-code-auto-fg: oklch(90% 0.012 262);
+    --neba-code-auto-comment: oklch(60% 0.024 262);
+    --neba-code-auto-keyword: oklch(76% 0.13 324);
+    --neba-code-auto-string: oklch(80% 0.13 148);
+    --neba-code-auto-number: oklch(81% 0.12 62);
+    --neba-code-auto-function: oklch(78% 0.12 258);
+    --neba-code-auto-type: oklch(82% 0.1 210);
+    --neba-code-auto-variable: oklch(82% 0.09 32);
+    --neba-code-auto-tag: oklch(77% 0.13 22);
+    --neba-code-auto-attr: oklch(85% 0.11 92);
+    --neba-code-auto-meta: oklch(70% 0.05 262);
+    --neba-code-auto-add: oklch(80% 0.14 152);
+    --neba-code-auto-del: oklch(75% 0.15 25);
+
     --neba-surface: oklch(19% 0.012 262);
     --neba-fg: oklch(95% 0.008 262);
-    --neba-muted-fg: oklch(66% 0.014 262);
-    --neba-border: oklch(30% 0.012 262);
+    --neba-muted-fg: oklch(72% 0.014 262);
+    --neba-border: oklch(38% 0.012 262);
 
     --neba-disabled-bg: oklch(27% 0.012 262);
-    --neba-disabled-fg: oklch(48% 0.012 262);
-    --neba-disabled-border: oklch(32% 0.012 262);
+    --neba-disabled-fg: oklch(52% 0.012 262);
+    --neba-disabled-border: oklch(40% 0.012 262);
 
     --neba-fill-alpha: 87%;
     --neba-blur: blur(9px) saturate(1.3);
+    --neba-ring-alpha: 55%;
 
     --neba-plate-edge: rgb(255 255 255 / 0.12);
     --neba-plate-top: rgb(255 255 255 / 0.16);
     --neba-sheen: linear-gradient(148deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 52%);
 
-    --neba-glass-bg: rgb(255 255 255 / 0.07);
+    --neba-glass-bg: rgb(255 255 255 / 0.05);
+
+    --neba-panel: rgb(255 255 255 / 0.05);
+    --neba-panel-hover: rgb(255 255 255 / 0.07);
+    --neba-panel-press: rgb(255 255 255 / 0.09);
 
-    --neba-panel: rgb(255 255 255 / 0.07);
-    --neba-panel-hover: rgb(255 255 255 / 0.1);
-    --neba-panel-press: rgb(255 255 255 / 0.13);
+    --neba-groove: rgb(255 255 255 / 0.05);
+    --neba-groove-hover: rgb(255 255 255 / 0.07);
 
     --neba-glow-on-fill: rgb(255 255 255 / 0.13);
     --neba-flash-on-fill: rgb(255 255 255 / 0.18);
@@ -448,32 +574,60 @@
     --neba-chart-div-on-3: var(--neba-surface);
     --neba-chart-div-on-4: var(--neba-surface);
     --neba-chart-div-on-5: var(--neba-fg);
+
+    --neba-chart-on-1: var(--neba-surface);
+    --neba-chart-on-2: var(--neba-surface);
+    --neba-chart-on-3: var(--neba-surface);
+    --neba-chart-on-4: var(--neba-surface);
+    --neba-chart-on-5: var(--neba-surface);
+    --neba-chart-on-6: var(--neba-surface);
+    --neba-chart-on-7: var(--neba-surface);
+    --neba-chart-on-8: var(--neba-surface);
   }
 }
 
 .dark,
 [data-theme='dark'] {
+  --neba-code-auto-bg: oklch(19.5% 0.014 262);
+  --neba-code-auto-fg: oklch(90% 0.012 262);
+  --neba-code-auto-comment: oklch(60% 0.024 262);
+  --neba-code-auto-keyword: oklch(76% 0.13 324);
+  --neba-code-auto-string: oklch(80% 0.13 148);
+  --neba-code-auto-number: oklch(81% 0.12 62);
+  --neba-code-auto-function: oklch(78% 0.12 258);
+  --neba-code-auto-type: oklch(82% 0.1 210);
+  --neba-code-auto-variable: oklch(82% 0.09 32);
+  --neba-code-auto-tag: oklch(77% 0.13 22);
+  --neba-code-auto-attr: oklch(85% 0.11 92);
+  --neba-code-auto-meta: oklch(70% 0.05 262);
+  --neba-code-auto-add: oklch(80% 0.14 152);
+  --neba-code-auto-del: oklch(75% 0.15 25);
+
   --neba-surface: oklch(19% 0.012 262);
   --neba-fg: oklch(95% 0.008 262);
-  --neba-muted-fg: oklch(66% 0.014 262);
-  --neba-border: oklch(30% 0.012 262);
+  --neba-muted-fg: oklch(72% 0.014 262);
+  --neba-border: oklch(38% 0.012 262);
 
   --neba-disabled-bg: oklch(27% 0.012 262);
-  --neba-disabled-fg: oklch(48% 0.012 262);
-  --neba-disabled-border: oklch(32% 0.012 262);
+  --neba-disabled-fg: oklch(52% 0.012 262);
+  --neba-disabled-border: oklch(40% 0.012 262);
 
   --neba-fill-alpha: 87%;
   --neba-blur: blur(9px) saturate(1.3);
+  --neba-ring-alpha: 55%;
 
   --neba-plate-edge: rgb(255 255 255 / 0.12);
   --neba-plate-top: rgb(255 255 255 / 0.16);
   --neba-sheen: linear-gradient(148deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0) 52%);
 
-  --neba-glass-bg: rgb(255 255 255 / 0.07);
+  --neba-glass-bg: rgb(255 255 255 / 0.05);
 
-  --neba-panel: rgb(255 255 255 / 0.07);
-  --neba-panel-hover: rgb(255 255 255 / 0.1);
-  --neba-panel-press: rgb(255 255 255 / 0.13);
+  --neba-panel: rgb(255 255 255 / 0.05);
+  --neba-panel-hover: rgb(255 255 255 / 0.07);
+  --neba-panel-press: rgb(255 255 255 / 0.09);
+
+  --neba-groove: rgb(255 255 255 / 0.05);
+  --neba-groove-hover: rgb(255 255 255 / 0.07);
 
   --neba-glow-on-fill: rgb(255 255 255 / 0.13);
   --neba-flash-on-fill: rgb(255 255 255 / 0.18);
@@ -552,6 +706,15 @@
   --neba-chart-div-on-3: var(--neba-surface);
   --neba-chart-div-on-4: var(--neba-surface);
   --neba-chart-div-on-5: var(--neba-fg);
+
+  --neba-chart-on-1: var(--neba-surface);
+  --neba-chart-on-2: var(--neba-surface);
+  --neba-chart-on-3: var(--neba-surface);
+  --neba-chart-on-4: var(--neba-surface);
+  --neba-chart-on-5: var(--neba-surface);
+  --neba-chart-on-6: var(--neba-surface);
+  --neba-chart-on-7: var(--neba-surface);
+  --neba-chart-on-8: var(--neba-surface);
 }
 
 /* ---------------------------------------------------------------------------
@@ -562,6 +725,22 @@
  * is repeated for every theme root because a custom property resolves its
  * `var()`s on the element that declares it — declaring these only on `:root`
  * would freeze them to the light values inside a `.dark` subtree.
+ *
+ * `on-tint` is the one that is not a strength of the base colour, and it is
+ * here for the same reason `on-solid` exists. A `soft` surface is a wash of the
+ * family's own `accent`, so writing the label in that accent puts a colour on a
+ * pale copy of itself: the ink and the bed move together and the gap between
+ * them cannot be opened by changing either one. It tops out at 4.5:1 the moment
+ * the wash passes about 9%, and `soft-press` is 25%. Measured, an `on` Toggle,
+ * a `text` Chip and a highlighted menu row all sat between 3.4:1 and 4.5:1, in
+ * *both* themes — this is not a dark-mode failure.
+ *
+ * Pulling the ink 28% toward `--neba-fg` breaks the coupling, and it flips with
+ * the theme on its own: toward near-black on a white page, toward near-white on
+ * a dark one. The family's hue survives — a primary on-tint is still plainly
+ * blue — and the worst family on the strongest wash clears 4.5:1 in both.
+ * `accent` itself is untouched, so what a TextLink or a Statistic's delta is
+ * written in on the bare sheet does not change.
  * ------------------------------------------------------------------------- */
 
 :root,
@@ -603,6 +782,7 @@
   --neba-primary-soft: color-mix(in srgb, var(--neba-primary-accent) 10%, transparent);
   --neba-primary-soft-hover: color-mix(in srgb, var(--neba-primary-accent) 17%, transparent);
   --neba-primary-soft-press: color-mix(in srgb, var(--neba-primary-accent) 25%, transparent);
+  --neba-primary-on-tint: color-mix(in oklab, var(--neba-primary-accent) 72%, var(--neba-fg));
   --neba-primary-panel: color-mix(in srgb, var(--neba-primary-accent) 8%, var(--neba-glass-bg));
   --neba-primary-panel-hover: color-mix(
     in srgb,
@@ -616,7 +796,11 @@
   );
   --neba-primary-line: color-mix(in srgb, var(--neba-primary-accent) 22%, transparent);
   --neba-primary-line-hover: color-mix(in srgb, var(--neba-primary-accent) 40%, transparent);
-  --neba-primary-ring: color-mix(in srgb, var(--neba-primary-accent) 55%, transparent);
+  --neba-primary-ring: color-mix(
+    in srgb,
+    var(--neba-primary-accent) var(--neba-ring-alpha),
+    transparent
+  );
 
   --neba-secondary-fill: color-mix(
     in srgb,
@@ -636,6 +820,7 @@
   --neba-secondary-soft: color-mix(in srgb, var(--neba-secondary-accent) 10%, transparent);
   --neba-secondary-soft-hover: color-mix(in srgb, var(--neba-secondary-accent) 17%, transparent);
   --neba-secondary-soft-press: color-mix(in srgb, var(--neba-secondary-accent) 25%, transparent);
+  --neba-secondary-on-tint: color-mix(in oklab, var(--neba-secondary-accent) 72%, var(--neba-fg));
   --neba-secondary-panel: color-mix(in srgb, var(--neba-secondary-accent) 8%, var(--neba-glass-bg));
   --neba-secondary-panel-hover: color-mix(
     in srgb,
@@ -649,7 +834,11 @@
   );
   --neba-secondary-line: color-mix(in srgb, var(--neba-secondary-accent) 22%, transparent);
   --neba-secondary-line-hover: color-mix(in srgb, var(--neba-secondary-accent) 40%, transparent);
-  --neba-secondary-ring: color-mix(in srgb, var(--neba-secondary-accent) 55%, transparent);
+  --neba-secondary-ring: color-mix(
+    in srgb,
+    var(--neba-secondary-accent) var(--neba-ring-alpha),
+    transparent
+  );
 
   --neba-success-fill: color-mix(
     in srgb,
@@ -669,6 +858,7 @@
   --neba-success-soft: color-mix(in srgb, var(--neba-success-accent) 10%, transparent);
   --neba-success-soft-hover: color-mix(in srgb, var(--neba-success-accent) 17%, transparent);
   --neba-success-soft-press: color-mix(in srgb, var(--neba-success-accent) 25%, transparent);
+  --neba-success-on-tint: color-mix(in oklab, var(--neba-success-accent) 72%, var(--neba-fg));
   --neba-success-panel: color-mix(in srgb, var(--neba-success-accent) 8%, var(--neba-glass-bg));
   --neba-success-panel-hover: color-mix(
     in srgb,
@@ -682,7 +872,11 @@
   );
   --neba-success-line: color-mix(in srgb, var(--neba-success-accent) 22%, transparent);
   --neba-success-line-hover: color-mix(in srgb, var(--neba-success-accent) 40%, transparent);
-  --neba-success-ring: color-mix(in srgb, var(--neba-success-accent) 55%, transparent);
+  --neba-success-ring: color-mix(
+    in srgb,
+    var(--neba-success-accent) var(--neba-ring-alpha),
+    transparent
+  );
 
   --neba-warning-fill: color-mix(
     in srgb,
@@ -702,6 +896,7 @@
   --neba-warning-soft: color-mix(in srgb, var(--neba-warning-accent) 12%, transparent);
   --neba-warning-soft-hover: color-mix(in srgb, var(--neba-warning-accent) 20%, transparent);
   --neba-warning-soft-press: color-mix(in srgb, var(--neba-warning-accent) 28%, transparent);
+  --neba-warning-on-tint: color-mix(in oklab, var(--neba-warning-accent) 72%, var(--neba-fg));
   --neba-warning-panel: color-mix(in srgb, var(--neba-warning-accent) 8%, var(--neba-glass-bg));
   --neba-warning-panel-hover: color-mix(
     in srgb,
@@ -715,7 +910,11 @@
   );
   --neba-warning-line: color-mix(in srgb, var(--neba-warning-accent) 26%, transparent);
   --neba-warning-line-hover: color-mix(in srgb, var(--neba-warning-accent) 44%, transparent);
-  --neba-warning-ring: color-mix(in srgb, var(--neba-warning-accent) 55%, transparent);
+  --neba-warning-ring: color-mix(
+    in srgb,
+    var(--neba-warning-accent) var(--neba-ring-alpha),
+    transparent
+  );
 
   --neba-danger-fill: color-mix(
     in srgb,
@@ -735,6 +934,7 @@
   --neba-danger-soft: color-mix(in srgb, var(--neba-danger-accent) 10%, transparent);
   --neba-danger-soft-hover: color-mix(in srgb, var(--neba-danger-accent) 17%, transparent);
   --neba-danger-soft-press: color-mix(in srgb, var(--neba-danger-accent) 25%, transparent);
+  --neba-danger-on-tint: color-mix(in oklab, var(--neba-danger-accent) 72%, var(--neba-fg));
   --neba-danger-panel: color-mix(in srgb, var(--neba-danger-accent) 8%, var(--neba-glass-bg));
   --neba-danger-panel-hover: color-mix(
     in srgb,
@@ -748,7 +948,11 @@
   );
   --neba-danger-line: color-mix(in srgb, var(--neba-danger-accent) 22%, transparent);
   --neba-danger-line-hover: color-mix(in srgb, var(--neba-danger-accent) 40%, transparent);
-  --neba-danger-ring: color-mix(in srgb, var(--neba-danger-accent) 55%, transparent);
+  --neba-danger-ring: color-mix(
+    in srgb,
+    var(--neba-danger-accent) var(--neba-ring-alpha),
+    transparent
+  );
 
   --neba-info-fill: color-mix(in srgb, var(--neba-info-solid) var(--neba-fill-alpha), transparent);
   --neba-info-fill-hover: color-mix(
@@ -764,12 +968,13 @@
   --neba-info-soft: color-mix(in srgb, var(--neba-info-accent) 10%, transparent);
   --neba-info-soft-hover: color-mix(in srgb, var(--neba-info-accent) 17%, transparent);
   --neba-info-soft-press: color-mix(in srgb, var(--neba-info-accent) 25%, transparent);
+  --neba-info-on-tint: color-mix(in oklab, var(--neba-info-accent) 72%, var(--neba-fg));
   --neba-info-panel: color-mix(in srgb, var(--neba-info-accent) 8%, var(--neba-glass-bg));
   --neba-info-panel-hover: color-mix(in srgb, var(--neba-info-accent) 16%, var(--neba-glass-bg));
   --neba-info-panel-press: color-mix(in srgb, var(--neba-info-accent) 24%, var(--neba-glass-bg));
   --neba-info-line: color-mix(in srgb, var(--neba-info-accent) 22%, transparent);
   --neba-info-line-hover: color-mix(in srgb, var(--neba-info-accent) 40%, transparent);
-  --neba-info-ring: color-mix(in srgb, var(--neba-info-accent) 55%, transparent);
+  --neba-info-ring: color-mix(in srgb, var(--neba-info-accent) var(--neba-ring-alpha), transparent);
 
   /* A chart's chrome: the grid, the axis rules, the baseline.
 
@@ -793,6 +998,33 @@
   --neba-chart-gap: var(--neba-surface);
 }
 
+/* ---------------------------------------------------------------------------
+ * The `text` plate
+ *
+ * `--n-soft*` is a wash — an alpha of the family's accent — so what it comes out
+ * as depends on whatever is painted behind it, and `--n-on-tint` is solved for
+ * *one* wash over the page. A Badge, an Avatar and an AppLogo are marks a caller
+ * puts **inside** other things, and the moment one lands on something that is
+ * itself painted the sum is a bed nobody solved an ink for. Measured, a `text`
+ * Badge read 3.9:1 on a selected row and 1.45:1 on a filled surface — which is
+ * not faint, it is gone.
+ *
+ * So the wash is laid on the page's own surface rather than on the caller's: an
+ * opaque colour with the wash as a one-stop gradient over it, which is the
+ * arrangement Table uses for a row. The plate then reads what it always read on
+ * the page, and reads it on every bed, because there is no longer a bed to
+ * depend on.
+ *
+ * It is here rather than in Tailwind for `styles.css`'s usual reason: the
+ * arbitrary-property form of a gradient whose two stops are the same `var()` is
+ * expressible and nobody would want to read it.
+ * ------------------------------------------------------------------------- */
+
+.neba-tint-plate {
+  background-color: var(--neba-surface);
+  background-image: linear-gradient(var(--n-soft-hover), var(--n-soft-hover));
+}
+
 /* ---------------------------------------------------------------------------
  * Sheet titles
  *
@@ -805,9 +1037,16 @@
  * This is in CSS rather than in Tailwind because the selector is the point:
  * `[&_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit]` is expressible and nobody
  * would want to read it twice.
+ *
+ * The class is written twice for `neba-link`'s reason. One class plus a
+ * `:where()` is one class, and `.prose h2` and `.vp-doc h2` are one class plus a
+ * tag — so the browser's own bold was being replaced by the *article's*, and a
+ * `<Card title={<h2>…</h2>}>` inside rendered Markdown came out at 24px where
+ * the card asked for 15px. Two classes clears both and still loses to anything
+ * a caller writes with two of their own.
  * ------------------------------------------------------------------------- */
 
-.neba-title :where(h1, h2, h3, h4, h5, h6) {
+.neba-title.neba-title :where(h1, h2, h3, h4, h5, h6) {
   font: inherit;
   margin: 0;
 }
@@ -917,6 +1156,81 @@
   text-decoration-color: var(--n-underline-hover);
 }
 
+/* ---------------------------------------------------------------------------
+ * Text a finger types into, on iOS
+ *
+ * Safari on iOS zooms the page in whenever a field under 16px takes the focus,
+ * and leaves it zoomed after the keyboard goes. The library's `md` field is
+ * 13px, so tapping into the ordinary field on the ordinary phone moved the whole
+ * page. The only fix that holds is the size: `maximum-scale` in a viewport tag
+ * also takes pinch-zoom away from everybody who needs it.
+ *
+ * `-webkit-touch-callout` is the property only WebKit on iOS and iPadOS has,
+ * which keeps every other browser, and desktop Safari, at the size the design
+ * set. `1em` is the size the field inherits from its shell, so a field already
+ * over 16px keeps its own; the doubled class is `.neba-link`'s reason.
+ * ------------------------------------------------------------------------- */
+
+@supports (-webkit-touch-callout: none) {
+  .neba-input.neba-input {
+    font-size: max(1em, 16px);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Forced colours
+ *
+ * A forced palette — Windows' contrast themes — replaces every colour with a
+ * handful of system ones and draws no `box-shadow` and no background image at
+ * all. Three things the library draws are lost to that: the plate that is the
+ * edge of a filled control, the bar and the thumb that say a value by being a
+ * colour, and the fill of a switch that says it is on. Nothing here applies in
+ * any other mode, so the ordinary look does not change.
+ *
+ * The indicators opt out of the palette with `forced-color-adjust: none` and
+ * are drawn in the system's own `Highlight`, which is what a forced theme uses
+ * to say "chosen" and so cannot clash with it.
+ * ------------------------------------------------------------------------- */
+
+@media (forced-colors: active) {
+  /* A hairline where the plate was. The focus ring still replaces it. */
+  .neba-glow.neba-glow:not(:focus-visible),
+  .neba-switch.neba-switch:not(:focus-visible) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  /* Behind `@supports` as well, which every browser that can be in a forced
+     palette passes: a colour that cannot opt out of the palette would be
+     replaced by it, and a fill the same colour as its track says nothing. */
+  @supports (forced-color-adjust: none) {
+    .neba-progress-track.neba-progress-track,
+    .neba-slider-rail.neba-slider-rail {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+
+    .neba-progress-indicator.neba-progress-indicator,
+    .neba-slider-indicator.neba-slider-indicator,
+    .neba-switch.neba-switch[data-checked] {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+
+    .neba-switch-thumb.neba-switch-thumb,
+    .neba-slider-thumb.neba-slider-thumb {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .neba-switch.neba-switch[data-checked] .neba-switch-thumb {
+      background-color: HighlightText;
+    }
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Code blocks
  *
@@ -987,8 +1301,28 @@
   --n-code-mark-edge: color-mix(in oklab, var(--n-code-fg) 45%, transparent);
 }
 
-.neba-code[data-code-theme='dark'],
-:where(.dark, [data-theme='dark']) .neba-code[data-code-theme='auto'] {
+.neba-code[data-code-theme='auto'] {
+  /* The theme roots hold both palettes, so the nearest `.dark`, `.light` or
+     `data-theme` decides, and the system setting where there is none. A
+     descendant selector could only ask whether any ancestor was dark, which
+     painted a light panel inside a dark page with the dark palette. */
+  --n-code-bg: var(--neba-code-auto-bg);
+  --n-code-fg: var(--neba-code-auto-fg);
+  --n-code-comment: var(--neba-code-auto-comment);
+  --n-code-keyword: var(--neba-code-auto-keyword);
+  --n-code-string: var(--neba-code-auto-string);
+  --n-code-number: var(--neba-code-auto-number);
+  --n-code-function: var(--neba-code-auto-function);
+  --n-code-type: var(--neba-code-auto-type);
+  --n-code-variable: var(--neba-code-auto-variable);
+  --n-code-tag: var(--neba-code-auto-tag);
+  --n-code-attr: var(--neba-code-auto-attr);
+  --n-code-meta: var(--neba-code-auto-meta);
+  --n-code-add: var(--neba-code-auto-add);
+  --n-code-del: var(--neba-code-auto-del);
+}
+
+.neba-code[data-code-theme='dark'] {
   --n-code-bg: oklch(19.5% 0.014 262);
   --n-code-fg: oklch(90% 0.012 262);
 
@@ -1006,26 +1340,6 @@
   --n-code-del: oklch(75% 0.15 25);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) .neba-code[data-code-theme='auto'] {
-    --n-code-bg: oklch(19.5% 0.014 262);
-    --n-code-fg: oklch(90% 0.012 262);
-
-    --n-code-comment: oklch(60% 0.024 262);
-    --n-code-keyword: oklch(76% 0.13 324);
-    --n-code-string: oklch(80% 0.13 148);
-    --n-code-number: oklch(81% 0.12 62);
-    --n-code-function: oklch(78% 0.12 258);
-    --n-code-type: oklch(82% 0.1 210);
-    --n-code-variable: oklch(82% 0.09 32);
-    --n-code-tag: oklch(77% 0.13 22);
-    --n-code-attr: oklch(85% 0.11 92);
-    --n-code-meta: oklch(70% 0.05 262);
-    --n-code-add: oklch(80% 0.14 152);
-    --n-code-del: oklch(75% 0.15 25);
-  }
-}
-
 /*
  * `mono` is the one theme that follows the page, and the only one with no hue
  * in it at all: the structure is carried by weight and by how far a run is
@@ -1262,8 +1576,16 @@
   border-inline-start-color: var(--n-code-mark-edge);
 }
 
+/*
+ * The numbers and the prompts are drawn, not read. Generated content is in the
+ * accessibility tree, so a screen reader went down a block saying "1 const a
+ * equals 1, 2 const b…". The `/ ''` is the alternative text a browser speaks
+ * instead, which is nothing; a browser that does not know the syntax drops the
+ * second declaration and keeps the first, and reads the number as before.
+ */
 .neba-code-line[data-line]::before {
   content: attr(data-line);
+  content: attr(data-line) / '';
   order: 0;
   flex: none;
   width: var(--n-code-gutter, 2ch);
@@ -1276,6 +1598,7 @@
 
 .neba-code-line[data-prompt]::after {
   content: attr(data-prompt);
+  content: attr(data-prompt) / '';
   order: 1;
   flex: none;
   margin-inline-end: 0.75em;
@@ -1463,6 +1786,82 @@
  * change at the same moment — including when a consumer has moved them.
  * ------------------------------------------------------------------------- */
 
+/* Every breakpoint slot is cleared on the element that reads it, and that is
+   what keeps a nested component from reading its ancestor's layout.
+
+   A custom property inherits, and a slot the element did not write is
+   therefore whatever the nearest ancestor wrote — so a grid inside a grid item
+   resolved the *item's* `--n-span-md` and came out a third of the width it had
+   asked for. Only the breakpoints a caller names are emitted, which is what
+   keeps the inline style to one property, so there is nothing on the element
+   to overwrite the inherited value with.
+
+   An inline style wins over this rule, so a component that really did name a
+   breakpoint is untouched. What is deliberately *not* cleared is the resolved
+   slot beside each of these: `--n-cols` and `--n-gap-x` are read by a grid's
+   items rather than by the grid, and inheriting is how they get there. */
+.neba-grid,
+.neba-flex {
+  --n-gap-x-xs: initial;
+  --n-gap-x-sm: initial;
+  --n-gap-x-md: initial;
+  --n-gap-x-lg: initial;
+  --n-gap-x-xl: initial;
+  --n-gap-y-xs: initial;
+  --n-gap-y-sm: initial;
+  --n-gap-y-md: initial;
+  --n-gap-y-lg: initial;
+  --n-gap-y-xl: initial;
+}
+
+.neba-grid,
+.neba-gallery {
+  --n-cols-xs: initial;
+  --n-cols-sm: initial;
+  --n-cols-md: initial;
+  --n-cols-lg: initial;
+  --n-cols-xl: initial;
+}
+
+.neba-flex {
+  --n-flex-dir-xs: initial;
+  --n-flex-dir-sm: initial;
+  --n-flex-dir-md: initial;
+  --n-flex-dir-lg: initial;
+  --n-flex-dir-xl: initial;
+}
+
+.neba-measure {
+  --n-max-w-xs: initial;
+  --n-max-w-sm: initial;
+  --n-max-w-md: initial;
+  --n-max-w-lg: initial;
+  --n-max-w-xl: initial;
+}
+
+.neba-grid-item {
+  --n-span-xs: initial;
+  --n-span-sm: initial;
+  --n-span-md: initial;
+  --n-span-lg: initial;
+  --n-span-xl: initial;
+  --n-span-w-xs: initial;
+  --n-span-w-sm: initial;
+  --n-span-w-md: initial;
+  --n-span-w-lg: initial;
+  --n-span-w-xl: initial;
+  --n-grow-xs: initial;
+  --n-grow-sm: initial;
+  --n-grow-md: initial;
+  --n-grow-lg: initial;
+  --n-grow-xl: initial;
+  --n-offset-xs: initial;
+  --n-offset-sm: initial;
+  --n-offset-md: initial;
+  --n-offset-lg: initial;
+  --n-offset-xl: initial;
+}
+
 /* The two gutters, shared: a GridContainer and a Flex ask the same question
    and `spacing` has to mean the same number on both.
 
@@ -1506,13 +1905,30 @@
      the container, so this re-resolves on its own at every breakpoint. */
   --n-track: calc((100% + var(--n-gap-x, 0px)) / var(--n-cols, 12));
 
-  /* Inseparable from the width above it: `flex` stops the row from resizing
-     the item, `min-width` stops a long unbroken word from doing the same, and
-     `box-sizing` is what makes the percentage mean the whole item. */
+  /* What a span that is a share of the row works out to, named rather than
+     written into `width` so that a breakpoint which goes back to a number can
+     point at it. */
+  --n-col-width: calc(var(--n-track) * min(var(--n-span), var(--n-cols, 12)) - var(--n-gap-x, 0px));
+
+  /* `auto` and `grow` are the two widths a column count cannot reach — the
+     contents' own width, with and without the space left over in the row — so
+     they are a cascade of their own rather than a value inside the one above.
+     A caller who names a number at a wider breakpoint points this back at the
+     arithmetic, which is what lets the two mix in one map. */
+  --n-span-w: var(--n-span-w-xs, var(--n-col-width));
+  --n-grow: var(--n-grow-xs, 0);
+
+  /* Inseparable from the width above it: the row must not resize the item,
+     `min-width` stops a long unbroken word from doing the same, `max-width`
+     holds an `auto` item inside the row it is in, and `box-sizing` is what
+     makes the percentage mean the whole item. */
   box-sizing: border-box;
-  flex: 0 0 auto;
+  flex-grow: var(--n-grow);
+  flex-shrink: 0;
+  flex-basis: auto;
   min-width: 0;
-  width: calc(var(--n-track) * min(var(--n-span), var(--n-cols, 12)) - var(--n-gap-x, 0px));
+  max-width: 100%;
+  width: var(--n-span-w);
   margin-inline-start: calc(var(--n-track) * min(var(--n-offset), var(--n-cols, 12)));
 }
 
@@ -1538,6 +1954,8 @@
 
   .neba-grid-item {
     --n-span: var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12)));
+    --n-span-w: var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width)));
+    --n-grow: var(--n-grow-sm, var(--n-grow-xs, 0));
     --n-offset: var(--n-offset-sm, var(--n-offset-xs, 0));
   }
 }
@@ -1564,6 +1982,8 @@
 
   .neba-grid-item {
     --n-span: var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12))));
+    --n-span-w: var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))));
+    --n-grow: var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0)));
     --n-offset: var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0)));
   }
 }
@@ -1596,6 +2016,11 @@
       --n-span-lg,
       var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12))))
     );
+    --n-span-w: var(
+      --n-span-w-lg,
+      var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))))
+    );
+    --n-grow: var(--n-grow-lg, var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0))));
     --n-offset: var(--n-offset-lg, var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0))));
   }
 }
@@ -1640,6 +2065,17 @@
       --n-span-xl,
       var(--n-span-lg, var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12)))))
     );
+    --n-span-w: var(
+      --n-span-w-xl,
+      var(
+        --n-span-w-lg,
+        var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))))
+      )
+    );
+    --n-grow: var(
+      --n-grow-xl,
+      var(--n-grow-lg, var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0))))
+    );
     --n-offset: var(
       --n-offset-xl,
       var(--n-offset-lg, var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0))))
@@ -1760,6 +2196,22 @@
   border-radius: inherit;
 }
 
+/*
+ * The same target for a control in a tight row — a Carousel's dots, a
+ * NumberField's two steppers, a window's traffic lights. Grown to the full
+ * height, and along the row only into half the gap on each side: grown to 24px
+ * that way too, each one would lie over its neighbour, and a press on the right
+ * half of a dot would land on the next one. `--n-hit-gap` is the gap the row
+ * is laid out with.
+ */
+.neba-hit-row::before {
+  content: '';
+  position: absolute;
+  inset-block: min(0px, calc((var(--n-hit, 1.5rem) - 100%) / -2));
+  inset-inline: calc(var(--n-hit-gap, 0px) / -2);
+  border-radius: inherit;
+}
+
 /* ---------------------------------------------------------------------------
  * Interaction light
  *
@@ -2016,6 +2468,24 @@
   animation-direction: var(--n-anim-direction, normal);
   animation-fill-mode: both;
   animation-play-state: var(--n-anim-state, running);
+
+  /* The shape of an effect is its own. The slots inherit like any custom
+     property, and only the ones an effect uses are written, so an effect nested
+     in another took the outer one's start state: a fade inside an AnimateReveal
+     ran from full opacity to full opacity. `initial` leaves each keyframe on its
+     own fallback, and a value written on the element itself still wins. The
+     play state is not reset here, because a split's pieces and a staggered
+     child read it from their root; a `transition` writes its own instead. */
+  --n-anim-opacity: initial;
+  --n-anim-scale: initial;
+  --n-anim-x: initial;
+  --n-anim-y: initial;
+  --n-anim-angle: initial;
+  --n-anim-angle-to: initial;
+  --n-anim-clip: initial;
+  --n-anim-ease: initial;
+  --n-anim-timeline: initial;
+  --n-anim-range: initial;
 }
 
 /*
@@ -2117,6 +2587,15 @@
   animation-name: neba-anim-blink;
 }
 
+/* Held still, a blink rests at full opacity rather than wherever the pulse had
+   got to: a paused recording light left half drawn, or invisible at a floor of
+   zero, is a rendering fault rather than a pause. It starts over when it runs
+   again. The second selector is a staggered blink's pieces. */
+.neba-anim-blink[data-state='paused'],
+[data-state='paused'] > .neba-anim-blink {
+  animation-name: none;
+}
+
 /*
  * Reveal: an edge travelling across something that is already there.
  *
@@ -2304,7 +2783,12 @@
   animation-name: neba-anim-marquee-y;
 }
 
-.neba-marquee[data-pause-on-hover]:hover .neba-marquee-track {
+/* `:focus-within` beside `:hover` for the same reason the prop exists at all. A
+   pointer stops the strip so a link on it can be aimed at; a keyboard reaches
+   that link by tabbing to it, and a strip that kept moving would be carrying the
+   focused element off the screen. */
+.neba-marquee[data-pause-on-hover]:hover .neba-marquee-track,
+.neba-marquee[data-pause-on-hover]:focus-within .neba-marquee-track {
   animation-play-state: paused;
 }
 
@@ -2378,10 +2862,52 @@
   animation: neba-anim-caret 1s step-end infinite;
 }
 
+/* ---------------------------------------------------------------------------
+ * Text arriving from somewhere else
+ *
+ * One word of a streamed answer, fading in as it lands. The animation is on the
+ * word's own element and runs **once, on mount**, which is the whole mechanism:
+ * React keys the words by position, so a word already on screen keeps its
+ * element as the text grows and never fades again, and only the ones that have
+ * just arrived are new elements. The last word grows a character at a time
+ * inside the element it already has, so it does not flicker either.
+ *
+ * Opacity and nothing else, for the reason every floating surface in this
+ * library arrives that way: a word that also travels drags the rest of the line
+ * with it, and a reader is in the middle of the sentence it is joining.
+ * ------------------------------------------------------------------------- */
+
+@keyframes neba-stream-word-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.neba-stream-word {
+  animation: neba-stream-word-in var(--neba-duration) var(--neba-ease) both;
+}
+
+/* The block at the end of a stream. The same caret an `AnimateTyping` draws,
+   because two blinking blocks at two rates on one screen is two cursors. */
+.neba-stream-caret {
+  display: inline-block;
+  inline-size: 0.5em;
+  block-size: 1em;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+  background-color: var(--n-accent);
+  animation: neba-anim-caret 1s step-end infinite;
+}
+
 /* Respect a reduced-motion preference. Both layers track the pointer, so they
    are motion in the sense that matters here — drop them entirely. */
 @media (prefers-reduced-motion: reduce) {
-  :root {
+  /* Every root the durations are declared on, and not only `:root`: a nested
+     `.light` box declares them again, and on `:root` alone the preference was
+     undone for everything inside one. */
+  :root,
+  .light,
+  [data-theme='light'] {
     --neba-duration: 0ms;
     --neba-duration-fill: 0ms;
   }
@@ -2434,15 +2960,42 @@
    * about whether anything is happening; an entrance that does not play has
    * still delivered its content, which is the only thing it was ever carrying.
    *
-   * `animation: none` rather than a zero duration, because the shorthand also
-   * clears `fill-mode` — and it is the fill that was holding an untriggered
-   * element on its own first frame at `opacity: 0`. Left in place, respecting a
-   * reader's preference would blank the page.
+   * So an effect that runs is cut to its last frame, a millisecond once on the
+   * clock. That is where `mode="out"` leaves content gone and a rotation leaves
+   * it at its `to` angle, and a run that ends fires `animationend`, which a
+   * pattern that unmounts on it is waiting for. `animation: none` switched all
+   * of that off and left leaving content on screen.
+   *
+   * An effect that has not been let go, or is held, has no animation at all and
+   * shows the element as it is. The fill would otherwise keep it on its first
+   * frame, which for an entrance waiting on a hover is an invisible element. A
+   * float never ends, so it has no last frame and simply stops.
    */
-  .neba-anim,
+  .neba-anim {
+    animation-duration: 1ms;
+    animation-delay: 0ms;
+    animation-iteration-count: 1;
+  }
+
+  @supports (animation-timeline: view()) {
+    .neba-anim {
+      animation-timeline: auto;
+    }
+  }
+
+  /* The word has arrived either way; the fade was only ever how it got there.
+     A millisecond, so it still ends on its last frame. */
+  .neba-stream-word {
+    animation-duration: 1ms;
+  }
+
+  .neba-anim[data-state='paused'],
+  [data-state='paused'] .neba-anim,
+  .neba-anim-float,
   .neba-marquee-track,
   .neba-headline-item,
-  .neba-typing-caret {
+  .neba-typing-caret,
+  .neba-stream-caret {
     animation: none;
   }
 
@@ -2452,4 +3005,24 @@
     background: var(--n-anim-glow, var(--n-accent));
     animation: none;
   }
+
+  /* A marquee that cannot move is a row of content, so it is drawn as one:
+     the copies go, and the strip stops clipping and wraps. Stopped with its
+     copies still laid down, it cut long content off at the edge and showed
+     short content two or four times over. The component renders one copy too;
+     this is what holds in the first paint, before it has asked. */
+  .neba-marquee {
+    overflow: visible;
+    flex-wrap: wrap;
+  }
+
+  .neba-marquee-track {
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+
+  .neba-marquee-track[aria-hidden='true'] {
+    display: none;
+  }
 }