@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/tokens/sizing.css

@@ -174,7 +174,7 @@
     --dock-menubar-reserve: 4rem;
 
     /* AX.W45 — the dock geometry multiplier. `--dock-scale` threads the WHOLE
-       `.glass-dock[data-density]` geometry cascade (box, padding, gap, tab,
+       `.glass-dock[data-size]` geometry cascade (box, padding, gap, tab,
        tile-min, glyph) via `calc(<base> * --dock-scale)`, so a single knob grows
        every dock axis in lockstep. The WCAG 2.5.5 44px floor survives as a `max(…,
        44px)` clamp INSIDE the scaled control-size.
@@ -200,7 +200,7 @@
        dock-layer coarse default (--dock-coarse-scale, below) is the fallback the
        coarse block reads; a consumer setting --dock-mobile-scale on ANY ancestor
        wins the fallback (R5-1 — the knob must reach the geometry cascade, not be
-       shadowed by a hard-pin on .glass-dock[data-density]). The coarse block in
+       shadowed by a hard-pin on .glass-dock[data-size]). The coarse block in
        dock/overflow.css RE-DECLARES --dock-scale so the descendant --dock-local-scale
        lift re-flows into it (the substitution-vs-inheritance trap). */
     --dock-mobile-scale: initial;
@@ -219,7 +219,7 @@
        component layer); this is a DEFAULT, not a ceiling.
 
        BB.W-PERF-PRODUCER A′-6 — the glyph rides the per-DENSITY box, not a flat rem.
-       The value.js D5-1 companion trace: `density="spacious"` grew the shelf + pad +
+       The value.js D5-1 companion trace: `size="lg"` grew the shelf + pad +
        gap but the glyph stayed 1.25rem (it rode `--dock-scale` only, NOT the
        per-density `--dock-layer-height` axis density.css scales). Now the glyph is a
        RATIO of `--dock-layer-height` (`--dock-icon-glyph-ratio`, default 0.5 → a
@@ -228,10 +228,10 @@
        PRESERVED transitively — `--dock-layer-height` already rides it (density.css).
        The WCAG glyph-floor holds via `max(…, --dock-icon-glyph-floor)` (a 16px floor
        so a sub-1 density/coarse register can never drop the glyph below the legible
-       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-density]`
+       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-size]`
        (density.css) — at `:root` it is the inline fallback below, so this `:root`
        declaration resolves the fallback ladder; density.css RE-RESOLVES `--dock-icon-glyph`
-       inside each `[data-density]` scope so the density-painted height flows in (the
+       inside each `[data-size]` scope so the density-painted height flows in (the
        substitution-vs-inheritance trap the overflow.css R5-1 sweep documents). The
        toggle mirror `.dark-mode-toggle-button > svg` reads the SAME `--dock-icon-glyph`
        so both glyphs move onto the density axis together. */
@@ -248,7 +248,7 @@
        `--dock-scale`-keyed `--dock-icon-glyph` the nav icons paint so the docked
        toggle is optically uniform out of the box. Like `--dock-icon-glyph` this
        `:root` declaration resolves the fallback ladder; density.css RE-RESOLVES it
-       inside each `[data-density]` scope and overflow.css RE-DECLARES it in the
+       inside each `[data-size]` scope and overflow.css RE-DECLARES it in the
        coarse block, so the density-painted + coarse-scaled `--dock-icon-glyph` flows
        in (the substitution-vs-inheritance trap closed on all three registers — a
        `:root`-only knob would freeze at the `:root` `--dock-scale` while the glyph
@@ -288,6 +288,44 @@
        coherently on touch. The 0.25rem base stays the ratified tight floor. */
     --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
 
+    /* BI.W-DOCK-OVERFLOW (§Inbound T-52 c — DECIDED BUILD, not optional). `--dock-pill-h`
+       is THE ONE authoritative EXPORTED dock-pill (outer block) height rung. A consumer
+       reserving a band for the floating dock (a scroll-padding-bottom, a fixed spacer, an
+       anti-collision gutter) reads THIS token instead of RE-DERIVING control-height +
+       padding per repo — the T-57 band-reservation re-derivation drift class the speedtest
+       consumer cures locally today. Tracks the EXPANDED control row (`--dock-layer-height`)
+       plus the dock's own block padding (`--dock-padding-block`, the shell.css pad); it
+       resolves at `:root` off the fallback ladder AND re-resolves inside each
+       `[data-size]`/coarse scope transitively (`--dock-layer-height` already threads
+       `--dock-scale` at every density rung), so ONE token tracks the painted pill height on
+       every rung + pointer. Consumers override the pieces (`--dock-layer-height` via density
+       / `--dock-padding-block`), never re-derive the sum. */
+    --dock-pill-h: calc(
+        var(--dock-layer-height, 2.5rem) + 2 * var(--dock-padding-block, 0.375rem)
+    );
+
+    /* BI.W-DOCK-OVERFLOW (§Inbound T-52 b) — the native-scroll-track ring-room reserve.
+       `--dock-scroll-safe-inset` is ≥ the focus-ring weight (`--focus-ring-width`, 2px) so
+       a FLUSH first/last item's focus-ring arc renders WHOLE inside the scroll port's
+       PADDED clip box (the port adds this as padding + pulls it back with an equal negative
+       margin, so the dock layout is unchanged — the canonical no-cross-axis-clip scroll-
+       strip idiom; overflow.css). `--dock-scroll-gutter` is the `scroll-padding-inline`
+       recenter gutter so `scrollIntoView` (useSelectionGroup, on every select) lands a
+       selected member with ≥1px port slack, never jammed flush against the port edge. */
+    --dock-scroll-safe-inset: calc(var(--focus-ring-width, 2px) + 1px);
+    --dock-scroll-gutter: var(--dock-scroll-safe-inset);
+
+    /* BI.W-DOCK-OVERFLOW — the pure-CSS Gaussian fisheye knobs (dock/fisheye.css). The
+       fits-branch magnify amplitude + the falloff sigma (a UNITLESS px window — the writer
+       writes `--x`/`--dock-px` as unitless numbers so `pow()`/`exp()` operate on
+       `<number>`). Consumers retune the hump strength/spread from these two handles. */
+    --dock-fisheye-amp: 0.6;
+    --dock-fisheye-sigma: 64;
+    /* The per-frame `--dock-px` ease clock (fisheye.css `transition: --dock-px … linear`).
+       80ms is the G4-measured buttery-hump ease (not the settle of a spring — a linear
+       pointer-follow smoothing); tokenized so it is retunable + coherence-clean. */
+    --dock-fisheye-duration: 80ms;
+
     /* AX.W45-TUNE Q3/C3 + C5 — the dock-control family reads a real GLASS register
        on hover/active, NOT a same-hue `--card` mix at an alpha adjacent to the dock's
        own `--glass-bg-dock` substrate (a sub-1%-ΔL no-op — the loud Q3 tell: "nothing
@@ -393,6 +431,23 @@
        family), never as an interactive register. */
     --dock-selected-accent: color-mix(in oklab, var(--foreground) 14%, transparent);
 
+    /* BI.W-DOCK-CONTROLS (value.js P5 — the ONE ring contract). `--dock-ring` is
+       THE single ring register EVERY dock control reads for its focus-visible /
+       selection ring — the focus-ring shadow, the selected accent, and the picker
+       triggers collapse onto ONE token (a consumer retunes every dock ring from a
+       single `:root { --dock-ring: … }` override, the `--focus-ring-shadow`
+       token-first axis). Defaults to the shared `--focus-ring-shadow` so the ring
+       is byte-identical to before.
+
+       THE ACTIVE SEAT YIELDS TO CONSUMER INDICATOR CONTENT. A dock control that
+       hosts consumer indicator content in its active seat carries `data-ring-yield`
+       — the dock's own ring/accent defers so the consumer's own indicator reads
+       (the seam value.js's letter-rail ask names). The standalone letter-rail
+       PRIMITIVE is declined-terminal: the greenfield dock + the DockStack facet
+       mode IS the rail register (a future letter-rail consumer binds the DockStack
+       seam + `data-ring-yield`, never a second rail component). */
+    --dock-ring: var(--focus-ring-shadow);
+
     /* AZ.W-REGISTER-IOS — the iOS press-DARKEN. Press today scales only
        (`--scale-press-dock`, C4-INV-4); iOS lands "darken + shrink". This token
        is a tier BELOW resting — `--glass-bg-resting` mixed ~7% toward `--foreground`
@@ -433,7 +488,7 @@
     --dock-label-ratio: 0.5088;
 
     /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
-       NON-dock coarse-pointer surfaces (`Button size="icon"`,
+       NON-dock coarse-pointer surfaces (`Button iconOnly`,
        ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
        named rung the `@media (pointer: coarse)` block in utilities.css reads,
        retiring the per-consumer one-liner `min-h-[44px]` patches. Equals

package/src/styles/tokens.css

@@ -21,10 +21,23 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The ten partials @import in
+/* CSS @import rules must precede every other rule. The partials @import in
    cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
-   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
+   BB.W-CARVE3, and scheme-motion's §2 EASING block into scheme-spring.css at
+   BD.W-CUT — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
+/* BD.W-CUT (no-god-module carve) — scheme-motion's §2 EASING block (spring
+   linear() curves + per-spring duration clocks + goo-flow curves + bezier
+   cores/aliases) carved into scheme-spring.css to hold the 500-line bound,
+   @import-ed IMMEDIATELY AFTER scheme-motion.css (adjacent same-selector :root
+   blocks at the same cascade slot — the spring/easing tokens resolve in order). */
+@import "./tokens/scheme-spring.css";
+/* BI.W-REGISTER-TABLE — the named motion registers (enter-overlay/menu/tooltip/
+   transient + the named exit clocks) over the ONE `.glass-reveal` recipe. @import-ed
+   IMMEDIATELY AFTER scheme-spring.css because it READS the parity-fixed `--spring-*` /
+   `--spring-*-duration` clocks (READ-ONLY — the W-GLASS-CAL fence); adjacent same-
+   selector :root block at the same cascade slot (order-invariant custom properties). */
+@import "./tokens/motion-registers.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";
@@ -42,4 +55,14 @@
 @import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";
 @import "./tokens/dark-arm.css";
+/* BI.W-STYLE-REDRAIN — the .dark saturate/brightness luminosity-lift companion cohort
+   carved out of dark-arm.css to hold the no-god-module 500-line bound; its own .dark
+   block @import-ed IMMEDIATELY AFTER dark-arm.css (the tokens are the sole .dark
+   writers → cascade-order-invariant, computed values byte-identical). */
+@import "./tokens/dark-arm-glass.css";
 @import "./tokens/property-regs.css";
+/* BI.W-STYLE-REDRAIN — the §11b moving-specular :root/.dark magnitude cohort + the
+   interaction/scroll DRIVE @property registrations carved out of property-regs.css to
+   hold the 500-line bound; @import-ed IMMEDIATELY AFTER it (order-invariant @property
+   registrations + the sole-writer specular :root/.dark cohort → byte-isomorphic). */
+@import "./tokens/property-regs-specular.css";

package/src/styles/transitions.css

@@ -19,82 +19,59 @@
         opacity: 0;
     }
 
-    /* ── Fade-slide (spring in, accelerate out) ── */
-    .fade-slide-enter-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-out),
-            transform var(--spring-smooth-duration) var(--spring-smooth);
-    }
-    .fade-slide-leave-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-in),
-            transform var(--duration-fast) var(--ease-in);
-    }
-    .fade-slide-enter-from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    .fade-slide-leave-to {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-
-    /* ── Dialog scale (bouncy spring in, ease out) ── */
-    .dialog-scale-enter-active {
-        transition:
-            opacity var(--duration-slow) var(--ease-out),
-            transform var(--spring-bouncy-duration) var(--spring-bouncy);
-    }
-    .dialog-scale-leave-active {
-        transition:
-            opacity var(--duration-normal) var(--ease-standard),
-            transform var(--duration-normal) var(--ease-standard);
-    }
-    .dialog-scale-enter-from {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
-    .dialog-scale-leave-to {
-        opacity: 0;
-        transform: scale(0.95) translateY(8px);
-    }
+    /* BI.W-REGISTER-TABLE — `fade-slide` RETIRED (census-dead: 0 src/ consumers; the
+       demo showcase tile is deleted with it). Clean break, no alias — an overlay
+       entrance rides `.glass-reveal` + its `data-reveal` register, not a hand-rolled
+       Vue-<Transition> recipe. */
 
-    /* ── Spring pop (bouncy in, fast out) ── */
-    .pop-enter-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-out),
-            transform var(--spring-bouncy-duration) var(--spring-bouncy);
-    }
-    .pop-leave-active {
-        transition:
-            opacity var(--duration-fast) var(--ease-out),
-            transform var(--duration-fast) var(--ease-out);
-    }
-    .pop-enter-from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    .pop-leave-to {
-        opacity: 0;
-        transform: scale(0.95);
+    /* ── Route-enter (BG.W-ROUTE-TRANSITION — the bare keyed atomic swap entrance) ──
+     *
+     * The AppShell route swap is a bare keyed `<component :is :key="route.path"
+     * class="route-enter">` — NO Vue `<Transition>` wrapper (the swap unmounts the old +
+     * mounts the new in ONE atomic patch, so it cannot wedge by construction; the
+     * leave-window race + the `.scroll-build`×`<Transition>` collision that froze the
+     * route are structurally impossible). The liquid enter is therefore a pure ON-MOUNT
+     * `@keyframes` on the keyed component — it lands on EVERY route root (StoryPage,
+     * SectionLanding, hero, intro, auth-shell, NotFound), closing the old
+     * `.story-page-article`-only selector gap. The iOS-NavStack vertical settle: a
+     * SPATIAL spring rise (snappy, P2/P4), fade COUPLED to the transform (P3),
+     * `backwards` fill-mode so the from-state holds before the first frame (no
+     * flash-of-final).
+     *
+     * BG.W-CORNER-ALIAS-KILL — the fill is `backwards`, NEVER `both`/`forwards`.
+     * The route root is the universal ancestor: a `both` fill keeps APPLYING the
+     * `to` keyframe's transform forever (the engine reports a filled identity
+     * `matrix(1,0,0,1,0,0)` — a computed transform ≠ `none`), which makes the
+     * route root a PERMANENT fixed-position containing block (CSS Transforms
+     * §containing-block) and silently re-parents every `position: fixed`
+     * descendant (the full-bleed field wash trapped to the article box — the
+     * white square-corner wedge behind every rounded card). `to` ≡ base
+     * (opacity 1 / transform none), so `backwards` is paint-identical at rest
+     * and RELEASES the transform channel at settle.
+     *
+     * ── BI.W-E10-AURORA-ENTRANCE — THE FIELD / CONTENT SPLIT ──────────────────
+     * `gl-route-enter` is the CONTENT-enter register ONLY — the opacity fade is
+     * COUPLED to the transform rise (P3), so it is a content settle, NEVER an
+     * atomic whole-root neutral fade of the FIELD. The full-bleed page FIELD is a
+     * frame-0 PERSISTENT layer that lives OUTSIDE this animated subtree: the shell
+     * `<Aurora>` mounts at the AppShell root ABOVE the keyed route component, and a
+     * hero route's own full-bleed field `<Teleport>`s to `<body>` (the same
+     * corner-alias escape above). So the field paints its palette-derived GROUND
+     * from frame 0 and the CONTENT enters OVER the already-colored field — the
+     * content fades/rises, the field does NOT fade in from a repulsive gray
+     * (UF-E10 / value.js T-60). This register must never be re-scoped to fade a
+     * `position: fixed` full-bleed field: keep the field a persistent frame-0
+     * layer and the enter content-only. */
+    .route-enter {
+        animation: gl-route-enter var(--spring-snappy-duration) var(--spring-snappy) backwards;
     }
 
-    /* ── Dropdown (fast opacity + snappy spring transform) ── */
-    .dropdown-enter-active {
-        transition:
-            opacity var(--duration-instant) var(--ease-out),
-            transform var(--spring-snappy-duration) var(--spring-snappy);
-    }
-    .dropdown-leave-active {
-        transition:
-            opacity var(--duration-instant) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
-    }
-    .dropdown-enter-from,
-    .dropdown-leave-to {
-        opacity: 0;
-        transform: scale(0.96) translateY(4px);
-    }
+    /* BI.W-REGISTER-TABLE — `dialog-scale` / `pop` / `dropdown` RETIRED (census-dead:
+       0 src/ consumers each; the demo showcase tiles are deleted with them). Clean
+       break, no alias. The overlay/menu entrances they duplicated now ride the ONE
+       `.glass-reveal` recipe bound by `data-reveal` (enter-overlay / enter-menu) — the
+       register table replaces the per-recipe fork. `pane-swap` (below, live dock
+       consumer) + `fade` / `tab-fade` / `metric-swap` are KEPT. */
 
     /* ── Tab fade ── */
     .tab-fade-enter-active,
@@ -149,63 +126,30 @@
         transform-origin: center bottom;
     }
 
-    /* ── Toast contract (AI.W4-M.3 doc; no source motion change) ──
-     *
-     * `<Toast>` (reka-ui-backed `ToastRoot`, see
-     * `components/ui/toast/Toast.vue`) consumes reka's
-     * `tw-animate-css` choreography directly through the
-     * `data-[state=open]:animate-in` / `data-[state=closed]:animate-out`
-     * + `data-[state=open]:slide-in-from-{top,bottom}-full` +
-     * `data-[state=closed]:fade-out-80 / slide-out-to-right-full`
-     * class chain. The contract that emerges from those defaults is
-     * the canonical entrance / dwell / exit grammar:
-     *
-     *   • ENTRANCE — slide-in from the viewport edge (top on mobile,
-     *     bottom on desktop ≥ sm), opacity 0 → 1, ~200ms with the
-     *     `tw-animate-css` ease-out curve. The slide direction is the
-     *     viewport origin so the toast reads as "arriving from
-     *     somewhere", not as "popping in from nowhere".
-     *
-     *   • DWELL — no motion. The toast sits at its rest position for
-     *     the consumer-specified `duration` (default 5000ms via
-     *     `use-toast.ts` `TOAST_REMOVE_DELAY`). The dwell is the
-     *     READING window; any motion here competes with the user's
-     *     read.
+    /* ── Toast contract (BI.W-REGISTER-TABLE — the enter-transient binding) ──
      *
-     *   • EXIT — fade-out (opacity 1 → 0.2) combined with a
-     *     slide-out-to-right (the canonical "swipe-end-mimicking"
-     *     direction), ~150ms. The right-out direction lets a
-     *     timeout-driven exit feel like a swipe even when the user
-     *     didn't swipe; consistency with the swipe-end gesture
-     *     (`data-[swipe=end]`).
+     * `<Toast>` (reka-ui `ToastRoot`, components/toast/Toast.vue) MATERIALIZES via
+     * the `enter-transient` register — `.glass-reveal[data-reveal="transient"]` — a
+     * CENTER-SEED bloom (scale-from ~0.5, decongest-blur, fade, on the gentle transient
+     * spring; MOTION-LADDER M5), NOT the retired slide-in-from-viewport-edge. The reka
+     * `tw-animate-css` data-state choreography (`data-[state=open]:animate-in` /
+     * `animate-out` / `slide-in-from-*-full` / `fade-out-80`) + the Toast's own
+     * `transition-[opacity,transform]` are RETIRED (clean break, no alias). The prior
+     * AY.W-MOTION "§6 DELIBERATE KEEP" exemption is SUPERSEDED: every glass-ui overlay now
+     * speaks ONE enter grammar, the register table. `.glass-reveal` owns:
      *
-     * Per the FD2 §4 rule (HANDOFF-AS-DRAIN-THEN-FILL): the toast
-     * itself does NOT drain-then-fill (single notification, single
-     * surface). The grammar is single-event entrance + dwell + exit;
-     * the next toast (if any) enters on its own contract.
+     *   • ENTRANCE — the @starting-style bloom (transform-origin center → the surface
+     *     coalesces from its own seed), on the transient spring + its 2%-settle clock.
+     *   • DWELL — no motion (the READING window; default 5000ms via use-toast.ts).
+     *   • EXIT — the `glass-reveal-out` keyframe reka's `usePresence` awaits, on the tight
+     *     `--exit-transient-duration` (100ms) no-overshoot `--ease-out`.
      *
-     * §6 EASING-DOCTRINE EXEMPTION (AY.W-MOTION — DELIBERATE KEEP).
-     * Every glass-ui-OWNED entrance surface (`dialog-scale`, `pop`,
-     * `dropdown`, `fade-slide`, `dock-in`) rides the house `--spring-*`
-     * enter / `--ease-out`/`--ease-standard` exit vocabulary (the §6
-     * doctrine, tokens.css:162-190). The Toast does NOT — and that is
-     * BY DESIGN, not an unexamined default. The reka-ui `ToastRoot`
-     * primitive OWNS its data-state choreography: the entrance slide
-     * direction tracks the viewport origin AND the swipe-end gesture
-     * (`data-[swipe=end]:slide-out-to-right-full`), so the entrance/exit
-     * are coupled to reka's `tw-animate-css` data-state machinery. The §6
-     * spring vocabulary governs glass-ui-OWNED surfaces; the reka-Toast
-     * entrance is not one — re-authoring it onto a `<Transition>` would
-     * fork the primitive's swipe-coupled contract (and `tw-animate-css`
-     * is the shipped optionalPeer this contract depends on). The gate
-     * (proof:animation-coherence) carries the Toast surface in its
-     * REGISTER_ASSIGNMENT_ALLOW set so this keep reads as a gated,
-     * deliberate exemption.
-     *
-     * PRM is honoured at the `@media (prefers-reduced-motion: reduce)`
-     * block below — the slide motion retires; the fade-in/out
-     * remains. No source motion change; this comment block IS the
-     * documentation closure for the toast contract row.
+     * The swipe-drag gesture is PRESERVED — reka drives the `translate-x` (with
+     * `transition-none` during the active move); the reveal's own `translate` leg springs
+     * the cancel/settle back. `tw-animate-css` stays a shipped optionalPeer for the other
+     * overlays' animate-in paths, but the Toast no longer depends on it. PRM is honoured
+     * by `.glass-reveal`'s own reduced-motion carve (glass/reveal.css) — scale/translate/
+     * blur snap, the fade survives. This block IS the closure for the toast contract row.
      */
 
     /* ── Reduced motion: preserve fades, remove transform/scale motion ── */
@@ -222,14 +166,6 @@
             transition-duration: 0.1s !important;
         }
 
-        .fade-slide-enter-active,
-        .fade-slide-leave-active,
-        .dialog-scale-enter-active,
-        .dialog-scale-leave-active,
-        .pop-enter-active,
-        .pop-leave-active,
-        .dropdown-enter-active,
-        .dropdown-leave-active,
         .pane-swap-enter-active,
         .pane-swap-leave-active,
         .metric-swap-enter-active,
@@ -240,14 +176,6 @@
             animation-duration: 0.01ms !important;
         }
 
-        .fade-slide-enter-from,
-        .fade-slide-leave-to,
-        .dialog-scale-enter-from,
-        .dialog-scale-leave-to,
-        .pop-enter-from,
-        .pop-leave-to,
-        .dropdown-enter-from,
-        .dropdown-leave-to,
         .pane-swap-enter-from,
         .pane-swap-leave-to,
         .metric-swap-enter-from,
@@ -259,5 +187,42 @@
             animation-duration: 0.01ms !important;
             transform: none !important;
         }
+
+        /* P6 — route-enter KEEPS the fade, DROPS the spatial rise (the vestibular
+           floor; the page settles to its terminal state with zero transform frames).
+           `backwards` fill (BG.W-CORNER-ALIAS-KILL — the same release discipline;
+           opacity-only here, but ONE fill register across both arms). */
+        .route-enter {
+            animation: gl-route-fade var(--duration-fast) var(--ease-out) backwards;
+        }
+    }
+}
+
+/* The route-enter keyframes — unlayered (pure `@keyframes`, layer-agnostic, the
+   animations.css convention). Referenced by the `.route-enter` recipe above.
+
+   BG.W-ROUTE-ENTER-VISIBLE (fix b) — the rise lifts 0.75rem (12px) → 1.25rem (20px),
+   the perceptible 16–24px band the §2.6 fix names. 12px was sub-perceptual once the
+   route-chunk stall (now pre-resolved off the beat, router.ts fix a) is out of the
+   clock — the surviving rise-tail read as a plain fade. 20px on --spring-snappy +
+   `backwards` (P2/P4 — the SPATIAL leg on the spring, the from-state held before the
+   first composited frame) makes the decelerating vertical settle READ in paint. The
+   distance is the sole change; the spring clock + fill register are untouched. */
+@keyframes gl-route-enter {
+    from {
+        opacity: 0;
+        transform: translateY(1.25rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+@keyframes gl-route-fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
     }
 }

package/src/styles/typography/scale.css

@@ -145,6 +145,16 @@
         22rem
     ); /* φ^(11/2) — peak 352px (fast.com peg) */
 
+    /* X7 (value.js P10/T-40) — the DISPLAY/HEADING/TITLE weight axis, tokenised.
+       The three emphatic registers each hard-coded their font-weight literal, so a
+       consumer tuning the bold-letterform character (a lighter title, a heavier
+       display) had to fork every @utility. These name the weight the way the size
+       ladder names --type-*: the semantic.css utilities read them; the literals are
+       byte-identical defaults (display 600, heading/title 700). */
+    --type-weight-display: 600;
+    --type-weight-heading: 700;
+    --type-weight-title: 700;
+
     /* Line heights & letter spacing live at tokens.css §0 as the canonical
        --type-leading-* / --type-tracking-* rungs. theme.css bridges them
        to Tailwind's `leading-*` / `tracking-*` utilities. The duplicate

package/src/styles/typography/semantic.css

@@ -102,7 +102,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
-    font-weight: 600;
+    font-weight: var(--type-weight-display);
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -112,7 +112,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
-    font-weight: 600;
+    font-weight: var(--type-weight-display);
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -122,7 +122,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
-    font-weight: 600;
+    font-weight: var(--type-weight-display);
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -134,7 +134,7 @@ body {
     font-size: var(--type-title);
     line-height: var(--type-leading-heading);
     letter-spacing: var(--type-tracking-tight);
-    font-weight: 700;
+    font-weight: var(--type-weight-title);
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -142,7 +142,7 @@ body {
     font-family: var(--font-text);
     font-size: var(--type-heading);
     line-height: var(--type-leading-heading);
-    font-weight: 700;
+    font-weight: var(--type-weight-heading);
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 

package/src/styles/typography/utilities.css

@@ -146,16 +146,39 @@
         color: var(--section-label-accent, var(--section-color-7));
     }
 
+    /* BG.W-GATE-FIELD-AURORA (EYEBROW-LIGHT-POLISH, +3.12) — the light-arm twin
+       of the dark eyebrow fix (b3d65eec). The mono-caption eyebrow reads
+       `--muted-foreground` (= `--neutral-5`, L40, calibrated AA-vs-PAGE), which
+       composites to only ~4.15:1 over the recessive warm shell field
+       (`[data-paper-field]`, BG.W-FIELD-AURORA) in LIGHT mode — below the
+       10-14px 4.5 bar (dark already clears 6.73, Safari 4.80). Over the warm
+       field ONLY + LIGHT ONLY, warm-mix the eyebrow ink toward `--foreground`
+       (the SAME 22%-toward-`--foreground` recipe the demo header-cluster twin
+       runs, mixed off the RAW `--neutral-5` so a cluster re-point of
+       `--muted-foreground` never double-darkens) so the neutral eyebrow clears
+       AA 4.5 within the warm-no-gray identity. Dark (`.dark`), non-field
+       contexts, the page-muted calibration, AND the `--tinted` accent eyebrow
+       (its own `--section-color-7` identity) are BYTE-UNTOUCHED. */
+    :root:not(.dark)
+        [data-paper-field]
+        .section-label:not(.section-label--tinted) {
+        color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%);
+    }
+
     /* Font-feature helpers */
     .tabular-nums {
         font-variant-numeric: tabular-nums;
     }
 
-    /* Kinetic: per-character stagger */
+    /* Kinetic: per-character stagger. The per-glyph increment is the single-
+       source `--char-stagger-step` token (scheme-motion.css, 30ms) — DRY with
+       the demo's `.story-section__heading` reveal (story-hero.css); a `:root`
+       override retimes both. (BG.W-SECTION-TYPEWRITER-FADEUP — off the hardcoded
+       `* 30ms` literal.) */
     .char-stagger > .char {
         display: inline-block;
         animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards;
-        animation-delay: calc(var(--char-index, 0) * 30ms);
+        animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step));
     }
 
     /* Letter-pressed treatment — reads as text engraved into the panel

package/src/styles/utilities/a11y-overrides.css

@@ -108,12 +108,12 @@ html.no-transition *:not([data-allow-motion])::after {
    coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
    to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
    `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
-   byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
+   byte-identical. Targets `Button iconOnly` (via the `data-icon-only`
    attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
    mobile Select) triggers.
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
-    [data-size="icon"],
+    [data-icon-only],
     [data-part="trigger"],
     .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);

package/src/styles/utilities/base.css

@@ -205,7 +205,11 @@
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
+            /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the SPATIAL scale leg rides the
+               spring-derived `--transition-liquid-spatial` DEFAULT (the inversion:
+               weight is now the vocabulary, not a per-site --motion-weight opt-in;
+               was the bare `--ease-standard` bezier). `.motion-calm` opts back out. */
+            scale var(--duration-fast) var(--transition-liquid-spatial);
     }
     .interactive-item:hover {
         background-color: color-mix(in srgb, var(--accent) 50%, transparent);
@@ -272,7 +276,11 @@
             box-shadow var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth);
+            /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the scale leg reads the shared
+               `--transition-liquid-spatial` vocabulary token (byte-identical at the
+               default — it resolves to `--spring-smooth` — but now `.motion-calm`
+               opts the press out of overshoot in lockstep with the atoms above). */
+            scale var(--duration-fast) var(--transition-liquid-spatial);
         transform-origin: center center;
     }
     .tap-squish:active {
@@ -287,7 +295,9 @@
     }
 
     /* ── Glass-press — the interactive press register (BB.W-PRESS-UNIFY) ──
-       The CSS half of the `<Card :pressable>` / interactive-glass press. Two
+       The CSS half of the interactive-glass press (an interactive Card at
+       `motion !== "off"` per BH.W-MOTION-AXIS — the `pressable` boolean's successor
+       is interactivity + the motion axis). Two
        coupled legs on ONE `--card-press-t` drive (the `useLiquidPress` writes the
        JS-driven value; the CSS `:active` is the no-JS / SSR floor):