@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/tokens.css

@@ -32,6 +32,12 @@
    @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";
@@ -49,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):
 

package/src/styles/utilities/btn.css

@@ -79,6 +79,26 @@
     transition-property: height, opacity;
 }
 
+/* ── Disclosure chevron register (BG.W-DISCLOSURE-ROTATE) ────────────────
+   ONE canonical chevron-rotate gesture — the SAME settle clock + arrival curve
+   across EVERY disclosure caret (Accordion / Select / Configurator). The three
+   diverged: Accordion rode a flat `transition-transform duration-200` bezier
+   (zero weight), Select the snappy-clock cartoon-punch, Configurator a scoped
+   `--duration-fast` snappy on the WRONG property (a `transition: transform`
+   never covers the `rotate` Tailwind v4's `rotate-*` writes, so its chevron
+   SNAPPED). This register collapses them onto ONE (substitution over
+   re-declaration): the `rotate` property (the longhand the toggle actually
+   writes), the spring's OWN settle clock `--spring-snappy-duration` (the
+   W-GLASS-CAL per-spring-duration doctrine, not a generic `--duration-*`), and
+   the weighty `--ease-cartoon-punch` arrival (the liquid-weight "morph more on
+   move" register — a small quick control that still carries inertia). PRM:
+   `--ease-cartoon-punch` self-re-aliases to the no-overshoot `--ease-standard`
+   under `prefers-reduced-motion: reduce` (scheme-motion.css), so the caret still
+   flips its state with zero overshoot frames — the vestibular floor. */
+@utility transition-disclosure {
+    transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch);
+}
+
 /* ── Sheet/drawer slide-out animation grammar ──
    The sheet/drawer-panel analogue of the overlay enter (the popover-class
    surfaces now ride the spring-clocked `.glass-reveal`, BB.W-LIQUID-REVEAL).
@@ -263,14 +283,20 @@
    button scale register the §6 doctrine records and the gate asserts across
    `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
    stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
-   on a spring); only the `scale` transform leg springs. */
+   on a spring); only the `scale` transform leg springs.
+
+   BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the `scale` leg now reads the shared
+   `--transition-liquid-spatial` vocabulary token (byte-identical at the default —
+   it resolves to `--spring-smooth` — while the settle clock stays `--spring-smooth-
+   duration`), so a `.motion-calm` scope opts the button lift out of overshoot in
+   lockstep with the base interactive atoms. */
 @utility btn-interactive {
     /* AQ.W3 §W3.2 identity base */
     scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--spring-smooth-duration) var(--spring-smooth),
+        scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
@@ -294,7 +320,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--transition-liquid-spatial),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }

package/src/styles/utilities/components.css

@@ -135,22 +135,22 @@
        register for densely-packed dock clusters. The selectors compose with
        `.metric-badge--label-stacked` so the inline ladder remains untouched
        — these are stacked-only refinements. */
-    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
+    .metric-pill:not([data-dense]).metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.5rem;
         --metric-badge-padding-inline: 0.75rem;
     }
 
-    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
+    .metric-pill[data-dense].metric-badge--label-stacked {
         --metric-badge-padding-block-stacked: 0.25rem;
         --metric-badge-padding-inline: 0.5rem;
     }
 
-    /* AS.W4 — @container style(--density) companion. A pill nested under a host
-       that sets `--density: comfortable | spacious` on a wrapping element picks
-       up the matching padding register with no `data-density` markup contract;
+    /* BH.W-SIZE-UNIFY — the metric-pill padding density is the `dense` boolean
+       (was the `density` axis); the two `[data-dense]`/`:not([data-dense])`
+       attribute rules above are the SOLE register (the `@container style(--density)`
        the attribute rules above stay the SOLE fallback (inv 47).
        The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
-       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
+       just BELOW the `.metric-pill[data-dense]` attribute rules — so a
        pill carrying BOTH the attribute and a `--density` ancestor lands on the
        attribute rule (same tokens, identical paint), while a pill with only the
        ancestor token still resolves the right register (no competing rule sets
@@ -163,21 +163,9 @@
        clean declaration test for style-query support. This relies on
        `@container style()`'s own graceful degradation: an engine without
        style-query support parses the unknown at-rule as invalid, drops the
-       block, and keeps the `[data-density]` attribute base. (The earlier
+       block, and keeps the `[data-dense]` attribute base. (The earlier
        `@supports (container-type: inline-size)` wrapper was wrong — it probed
        SIZE-query support, a distinct feature with a distinct support timeline.) */
-    @container style(--density: spacious) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.5rem;
-            --metric-badge-padding-inline: 0.75rem;
-        }
-    }
-    @container style(--density: comfortable) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.25rem;
-            --metric-badge-padding-inline: 0.5rem;
-        }
-    }
 
     .metric-badge__label {
         letter-spacing: 0.18em;
@@ -202,7 +190,7 @@
         letter-spacing: 0.1em;
     }
 
-    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
+    /* Q.W3 Lane A — the `.glass-dock[data-size="…"]` size rungs that
        set `--dock-tab-h` + `--dock-label-size` were consolidated into
        `dock.css` (their canonical dock-styles home). They formerly lived
        here and resolved only by the index.css import order (utilities.css
@@ -244,7 +232,14 @@
     }
 
     .input-bar-field {
-        font-family: var(--font-mono, monospace);
+        /* BI.W-SURFACE-EXTRACT (value.js P3 — the seated field-chrome `.input-bar`
+           rung ADMIT): the field font family reads a token-first `--input-bar-font`
+           seam so a consumer retunes the seated-field face in ONE write, defaulting
+           byte-identical to the prior `var(--font-mono, monospace)`. The seat rung
+           itself (`.input-bar`, above) is already the P3 "seated field-chrome rung"
+           — reading the shared `--control-pill-*` cohort + the floating glass rung;
+           this token completes the ask's `--input-bar-font` half. */
+        font-family: var(--input-bar-font, var(--font-mono, monospace));
         /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
            seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
            (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The