@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/dock-controls/triggers.css

@@ -10,6 +10,16 @@
    tab-button.css. */
 
 @layer components {
+    /* BD.W-DOCK-CORE (A8) — `.dock-trigger` is the UNIFIED dock overlay-trigger register.
+       DockSelectTrigger, DockDropdownTrigger, AND DockPopoverTrigger all compose it (each
+       also keeps its legacy class for back-compat-free continuity within this file), so a
+       popover trigger inside a dock is byte-identical geometry + style + baseline alignment
+       to the dropdown trigger — the prior three-divergent-contracts misalignment (A8) is
+       gone. The hover-SCALE is OFF on all three (below): a scaling trigger shifts its
+       portaled-content anchor mid-open; the SelectTrigger's documented no-scale reason is
+       generalized to the whole family (clean break — the dropdown's lone hover-scale is
+       retired, no alias). */
+    .dock-trigger,
     .dock-select-trigger,
     .dock-dropdown-trigger {
         display: inline-flex;
@@ -63,20 +73,25 @@
        control members (icon/tab/select/dropdown) now lift on hover as one register,
        mirroring the unified glass-tier `--dock-control-hover-bg` cross-fade. The
        lone `.dock-dropdown-trigger:hover` scale rule is RETIRED into this group. */
+    /* BD.W-DOCK-CORE (A8) — hover lifts the FILL only; the hover-SCALE is RETIRED across
+       the whole trigger family so portaled content anchors smoothly (the SelectTrigger's
+       documented no-scale reason, generalized — clean break, no alias). */
+    .dock-trigger:hover:not(:disabled),
     .dock-select-trigger:hover:not(:disabled),
     .dock-dropdown-trigger:hover:not(:disabled) {
         background: var(--dock-control-hover-bg);
         color: var(--btn-hover-color, var(--foreground));
-        scale: var(--scale-hover-dock);
     }
 
     /* AZ.W-REGISTER-IOS — the iOS press darken-plus-shrink (see the icon-button). */
+    .dock-trigger:active:not(:disabled),
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
         background: var(--dock-control-press-bg);
         scale: var(--scale-press-dock);
     }
 
+    .dock-trigger:focus:not(:focus-visible),
     .dock-select-trigger:focus:not(:focus-visible),
     .dock-dropdown-trigger:focus:not(:focus-visible) {
         box-shadow: none;
@@ -86,6 +101,7 @@
     /* focus-visible ring + disabled paint hoisted to the shared `:where()`
        group in dock.css; this rule adds only the box-shadow fade transition.
        `scale` keeps the AT.W7-dock-b press micro-feedback spring. */
+    .dock-trigger:focus-visible,
     .dock-select-trigger:focus-visible,
     .dock-dropdown-trigger:focus-visible {
         transition:
@@ -96,6 +112,12 @@
             box-shadow var(--dock-motion-fast);
     }
 
+    .dock-trigger:is(
+        .is-active,
+        .active,
+        [aria-expanded="true"],
+        [aria-pressed="true"]
+    ),
     .dock-select-trigger:is(
         .is-active,
         .active,

package/src/styles/dock-controls.css

@@ -41,6 +41,24 @@
 @import "./dock-controls/touch-floor.css";
 
 @layer components {
+    /* BD.W-DOCK-CORE (A12) — the draggable-item GRAB squish. A grabbed dock item
+       (`.glass-drag-lift`, written by useDockItemDrag while the gesture is in flight)
+       deforms with the volume-preserving `--stretch` register (the SHARED useLiquidFlex
+       "tanh" squish the tab indicator + dock morph already speak — ONE squish source, no
+       forked deformation). The grab follows the pointer via the JS-written `transform:
+       translate` (the compositor follow); this rule adds the gel-squish scale ON the
+       grabbed plate (stretch along the drag axis, compress across — volume-preserving).
+       The dock grabbable cursor + touch-action sit on `.glass-drag-grabbable` (the dock
+       root) via segmented-tabs.css. At rest `--stretch` is unset → 1/1 (no deform). The
+       global PRM gate strips `scale` → no squish under reduce (the gesture still follows).
+       Horizontal docks stretch X / compress Y; vertical stretch Y / compress X. */
+    .glass-dock.dock-items-draggable:not(.vertical) .dock-icon-button.glass-drag-lift {
+        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
+    }
+    .glass-dock.dock-items-draggable.vertical .dock-icon-button.glass-drag-lift {
+        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
+    }
+
     /* AV.W9.3 — momentum-gated dock-control press spring. The `:active` squish
        toward `--scale-press-dock` settles on a NO-OVERSHOOT spring (Apple,
        "Designing Fluid Interfaces": default 100% damping — no bounce — for a tap;

package/src/styles/dock.css

@@ -17,7 +17,12 @@
  *                            three-region body).
  *   - dock/morph.css       — the W01 single-scalar morph chrome + state response
  *                            (--dock-expand-t interp, collapsed/summary, held /
- *                            open, the W55 adaptive-legibility bucket).
+ *                            open).
+ *   - dock/adaptive-legibility.css — the darken-over-light self-engage (the
+ *                            continuous backdrop-luma tint clamp, the warm-chromatic
+ *                            dock ink, the @container light bucket, contrast-color()
+ *                            refinement, the PRM reveal-blur carve). Split from
+ *                            morph.css to keep both partials under the 500-line bound.
  *   - dock/density.css     — the W45 density × --dock-scale cascade.
  *   - dock/layers.css      — the `.dock-layer` crossfade + hit-test + reveal-
  *                            stagger contract + the `layout="grid"` tile grid.
@@ -35,23 +40,53 @@
    @import in cascade order; each opens its own `@layer components` so the layered
    cascade is preserved bit-for-bit (the carve-isomorphism gate is the witness). */
 @import "./dock/shell.css";
+/* BG.W-CLOSEFIX-9SITE — the `#persistent` region + vertical layer-stack body carved out
+   of shell.css's tail to hold the no-god-module 500-line bound. @import-ed IMMEDIATELY
+   AFTER dock/shell.css and BEFORE dock/morph.css, in the SAME @layer components — the
+   persistent-region block was the tail of shell.css (disjoint selectors), so the carve
+   is isomorphic (same layer, same source order → ZERO visual delta). */
+@import "./dock/shell-regions.css";
+/* BI.W-DOCK-SPINE — the GREENFIELD three-z-layer plate SPINE (L0 `.dock-plate` clip-path
+   lens off `--dock-t` / L1 `.dock-controls` overflow:visible / L2 top-layer). @import-ed
+   AFTER the structural shell + BEFORE morph.css so the plate BASE surface lands first and
+   morph.css's collapsed↔expanded interp (retargeted onto `.dock-plate`) source-order-wins.
+   Splits `.glass-dock`'s triple identity (surface + clip aperture + item container) — the
+   FAM-3 dock-disease terminal cure. */
+@import "./dock/dock.css";
 @import "./dock/morph.css";
+@import "./dock/adaptive-legibility.css";
 @import "./dock/density.css";
 @import "./dock/shape.css";
 @import "./dock/layers.css";
 @import "./dock/layer-group.css";
+/* BI.W-DOCK-CROSSFADE — the ONE crossfade-slot rule (`.dock-crossfade`/`.dock-face`/
+   `.dock-face-content`), the FOLD of `DockLayerGroup`/`DockLayer`/`useLayerTransition`
+   into a two-child opacity overlap on the per-face `--dock-t` + a measure-once peak
+   `min-block-size` + the G12 content-wrapper clip. @import-ed AFTER layers/layer-group
+   (their `.dock-layer-item-host` FLIP crossfade is superseded — the element no longer
+   renders) into its own `@layer components`. */
+@import "./dock/crossfade.css";
 @import "./dock/overflow.css";
-@import "./dock/stack-rail.css";
+/* BI.W-DOCK-OVERFLOW — the fits-branch pure-CSS Gaussian fisheye (the EXCLUSIVE-mode
+   enhancement, opt-in behind [data-dock-fisheye]; the native scroll track above is the
+   universal floor). @import-ed AFTER overflow.css so the fisheye scale reads the same
+   [data-dock-overflow] mode signal in source order. */
+@import "./dock/fisheye.css";
+@import "./dock/popover.css";
 @import "./dock/section.css";
-@import "./dock/morph-bridge.css";
+/* BI.W-DOCK-RETIRES — `morph-bridge.css` (the V↔H goo teardrop), `fission-bridge.css` +
+   `fission-island.css` (the 1→N fission goo), and `siri.css` (the Siri island) are
+   DEFINITION-ABSENT (decided-terminal, clean break, no alias). The goo `filter:url()`
+   stacked over `backdrop-filter` was the prime UF-C3 Safari suspect; it is gone. The V↔H
+   swap is the crossfade (`crossfade.css`). */
 /* BC.W-AX-DOCK-CTA-SEAT — the [data-cta-pending] CTA-receive landing seat (the static
    resting-geometry reserve + the plain transition:opacity FLIP reveal). Last in the
    dock cascade — a net-new surface around the byte-untouched useDockCtaReceive morph. */
 @import "./dock/cta-seat.css";
 /* BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar field surface (the W55
    active-field tint legibility seam + the `.glass-menu-row` result rows). A net-new
-   surface on a `[data-search]` dock around the byte-untouched morph-bridge metaball;
-   CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
+   surface on a `[data-search]` dock; the pill→field morph is the dock's OWN `--dock-morph-t`
+   glide (box-inviolate); CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
 @import "./dock/search.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
@@ -77,6 +112,23 @@
     initial-value: 0;
 }
 
+/* BI.W-DOCK-SPINE — the ONE plate scalar. `useDockSpring` (W-DOCK-SPRING-UNIFY) writes it
+   per-frame onto the L0 `.dock-plate` element; the plate's `clip-path` visible-extent
+   morph reads it, and NO control-family selector does — so a per-frame write recomputes
+   the plate clip ONLY, not the 10-selector control `:where()` subtree (the A′-4 ~13fps
+   restyle-storm cure). `inherits: false` is LOAD-BEARING here (the opposite of
+   `--dock-morph-t`, which MUST inherit to its descendant readers): the plate scalar has
+   NO descendant reader, so keeping it un-inherited is what scopes the per-frame restyle to
+   the single plate element. `initial-value: 0` = the collapsed-progress floor (the safe
+   resting clip on a non-supporting engine). During the transitional window the plate
+   ALIASES it to the live `--dock-morph-t` (dock/dock.css); SPRING-UNIFY makes it the sole
+   driver + deletes the scalar zoo. */
+@property --dock-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
 /* BB.W-DOCK-MORPH-FAMILY (e) — the `@property`-registered dock-scale axis. The
    dock-scale cascade is `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,
    1))` (tokens/sizing.css). UNregistered, that `calc()` substitutes ONCE at `:root`
@@ -144,10 +196,19 @@
     .dock-tab-button:focus-visible,
     .dock-select-trigger:focus-visible,
     .dock-dropdown-trigger:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
+        /* BI.W-DOCK-CONTROLS (value.js P5) — the ONE ring register. Every dock
+           control reads `--dock-ring` (defaults to `--focus-ring-shadow`, byte-
+           identical), so a consumer retunes every dock ring from one token. */
+        box-shadow: var(--dock-ring);
         outline: none;
     }
 
+    /* The ACTIVE SEAT yields to consumer indicator content — a control hosting the
+       consumer's own indicator suppresses the dock ring so that content reads. */
+    .glass-dock [data-ring-yield]:focus-visible {
+        box-shadow: none;
+    }
+
     .dock-icon-button:disabled,
     .dock-tab-button:disabled,
     .dock-select-trigger:disabled,

package/src/styles/draw-in.css

@@ -0,0 +1,89 @@
+/* draw-in.css
+   BI.W-DRAW-IN — the codified self-drawing arrival register (D-MOTION PASS-1 §2.4;
+   SUFFUSION-MAP R21). ONE named law for a hairline / divider / underline that DRAWS
+   ITSELF in — `.draw-rule` / `[data-draw-in]`.
+
+   THE LAW: a rule drawing itself NEVER overshoots past full width. Draw-in is a
+   SPATIAL channel on the NO-OVERSHOOT arrival ease `--ease-out-expo` (REUSED from the
+   §6 easing table, scheme-spring.css — never re-minted; a duplicate alias reds
+   proof:animation-coherence), categorically NOT a spring. This closes UF-G6 ("refined
+   drawing animations … codify this to not be ad-hoc … the divider draw-in is a bit
+   too bouncy. Needs smoothing.") — the ad-hoc masthead divider rode `--ease-cartoon-
+   punch` (+22% overshoot); it re-points onto this register (a rule that strikes past
+   its own end and springs back reads as jitter, not craft).
+
+   Compositor-only: the draw rides `transform: scaleX()` (the DEFAULT) OR a `clip-path:
+   inset()` wipe — NEVER `width`/`inline-size` (proof:no-layout-animation holds by
+   construction; proof:draw-in asserts the keyframes touch no reflow prop).
+
+   The clock is `--draw-in-duration = calc(<base> * var(--motion-tempo))` — the tuned
+   masthead-strike base (0.52s) co-scaled by the ONE governing `--motion-tempo` axis
+   (property-regs.css §M11) so draw-in tightens/loosens in lockstep with every other
+   motion clock (P7 one-clock). The direction anchors at the drawing edge via
+   `--draw-in-origin` (default `left`); a delay stages a strike via `--draw-in-delay`.
+
+   PRM: the base rule paints the rule at rest (`scaleX(1)` / no clip) and the animation
+   engages ONLY under `prefers-reduced-motion: no-preference`, so under reduce (and on a
+   gap engine) the rule is STATIC — the opacity is kept, `scaleX` snaps to 1, zero
+   motion frames.
+
+   The register NAMES the shared arrival law; it does NOT re-author the two hero-scale
+   draw MEMBERS — CompletionSeal's gold `--seal-draw` stroke-dashoffset wipe and
+   HandMark's `draw-on` (dashoffset / clip-path) both keep their OWN recipes; they are
+   recorded as members (the ≥2-consumer evidence) in
+   docs/tranches/BI/audit/W-DRAW-IN-REGISTER.md. */
+
+:root {
+    /* The draw-in clock — a hairline draws itself in <base> × tempo. */
+    --draw-in-duration: calc(0.52s * var(--motion-tempo));
+}
+
+/* The scaleX draw (the DEFAULT) — a rule grows from its anchored edge to full width. */
+@keyframes draw-rule-in {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+/* The clip-path wipe (the opt-in alternate — `.draw-rule--wipe` / `[data-draw-in="wipe"]`).
+   For a rule whose own transform is load-bearing (it cannot spend `scaleX`), the reveal
+   rides a compositor-safe `clip-path: inset()` wipe on the SAME expo arrival. */
+@keyframes draw-rule-wipe {
+    from {
+        clip-path: inset(0 100% 0 0);
+    }
+    to {
+        clip-path: inset(0 0 0 0);
+    }
+}
+
+/* The RESTING rule — painted at full width. This is the static fallback on a gap engine
+   AND the PRM (reduce) end-state (the animation engages only under no-preference, so
+   under reduce the rule simply reads at scaleX(1), no motion frames). */
+.draw-rule,
+[data-draw-in] {
+    transform-origin: var(--draw-in-origin, left);
+    transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    /* The scaleX draw — the DEFAULT register (everything that is NOT the wipe opt-in). */
+    .draw-rule:not(.draw-rule--wipe),
+    [data-draw-in]:not([data-draw-in="wipe"]) {
+        transform: scaleX(0);
+        animation: draw-rule-in var(--draw-in-duration) var(--ease-out-expo)
+            var(--draw-in-delay, 0s) both;
+    }
+
+    /* The clip-path wipe opt-in. */
+    .draw-rule--wipe,
+    [data-draw-in="wipe"] {
+        transform: none;
+        clip-path: inset(0 100% 0 0);
+        animation: draw-rule-wipe var(--draw-in-duration) var(--ease-out-expo)
+            var(--draw-in-delay, 0s) both;
+    }
+}

package/src/styles/drawer.css

@@ -18,12 +18,65 @@
  */
 
 /* The snap-fraction scalar the house `useDrawerSnap` engine writes per frame. The
- * content root's inline `transform` reads it (DrawerContent.vue) — typed so the
- * default (1 = fully open) keeps a no-snap content-sized sheet seated open. */
+ * content root's inline `transform` reads it (DrawerContent.vue). BG.W-DRAWER-PAINT-BIND
+ * (NO-MASKING-FALLBACK edict, USER 07-03) — the registered default is `0` (the CSS
+ * CLOSED state / offscreen), NEVER `1`. A `1` initial seated the sheet FULL-OPEN
+ * whenever the engine's `writeScalar` was dead, silently MASKING the model↔paint sever
+ * (the sheet looked open while the scalar was never written). At `0` an un-written
+ * sheet reads offscreen — the dead writer fails LOUD (the sheet is invisible), never
+ * hidden. The live engine seats + slides the sheet in from this closed base. */
 @property --glass-drawer-t {
     syntax: "<number>";
     inherits: false;
-    initial-value: 1;
+    initial-value: 0;
+}
+
+/* BD.W-OVERLAY-STAGE-COUPLE — `--stage-t`, the ONE registered STAGING scalar (0 =
+ * closed/un-staged → 1 = fully staged). The whole modal band rides this ONE knob:
+ * the drawer's surface FREEZE (A), the scrim DEEPEN (B), the page RECEDE+SCALE (C),
+ * the opt-in blur ENGAGE (D) are all pure `calc()` reads OF it.
+ *
+ * BI.W-DRAWER-PERF — `inherits: false`. The scalar is SCOPED-written onto each reader
+ * root DIRECTLY (the sheet · the scrim `[data-stage-scrim]` · the page-wrapper
+ * `[data-stage-wrapper]`), and every consumer reads it on the SAME element it is
+ * written to — no cross-subtree inheritance is relied upon. `inherits: false` is what
+ * makes the scoping cheap: a write on the app-root wrapper recalcs ONLY the wrapper,
+ * not the whole app subtree an `inherits: true` write on that ancestor would invalidate
+ * (the 120× main-thread lever the `documentElement` writer paid; the drawer's per-frame
+ * writer is the hot path). An un-written reader resolves `initial-value: 0` (the
+ * resting/un-staged state) — a dead writer fails to a resting page, never a masked
+ * full-staged one.
+ *
+ * THE SINGLE WRITER (fold C1·R2 — no dual scalar desync). `useDrawerSnap.writeScalar`
+ * writes BOTH `--glass-drawer-t` (the sheet's per-element translate) AND `--stage-t`
+ * (the scene scalar, on each reader root) in the SAME call — atomically, never
+ * separately, so the two can never desync on a drag-cancel / fling-overshoot /
+ * interrupted snap. A plain modal (Dialog/Command) flips `--stage-t` 0→1 on
+ * `--spring-snappy` at open (DialogContent.vue, scoped to the same reader roots); the
+ * close-write removes the inline value so the registered property reverts to its
+ * `initial-value: 0` (the stale-latch fix). EVERY consumer `clamp(0, …, 1)`-bounds it
+ * (a `--ease-cartoon-punch` fling can overshoot >1 — the page-scale / radius / scrim
+ * must not run past their endpoints). */
+@property --stage-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+/* The stage-t FLIP transition (the centered-modal glide; the registered-property
+ * stale-latch fix, fold C3·R7).
+ *
+ * The drawer's single writer (useDrawerSnap) drives `--stage-t` per frame (NO
+ * transition — the spring IS the clock) and REMOVES the inline value on close → each
+ * reader root reverts to `initial-value: 0`. The centered modal (DialogContent) has no
+ * detent, so it FLIPS `--stage-t` 0→1 on open via the `data-stage-flip` marker written
+ * onto each reader root (BI.W-DRAWER-PERF — off `:root`); this rule owns the FLIP
+ * TRANSITION (a snappy spring) so the value glides 0→1 rather than snapping. Scoped to
+ * `[data-stage-flip]` so it fires ONLY during the modal flip — the drawer's per-frame
+ * scalar writes carry no marker, so the spring never double-smooths the drag. */
+[data-stage-scrim][data-stage-flip],
+[data-stage-wrapper][data-stage-flip] {
+    transition: --stage-t var(--spring-snappy-duration, 0.4s) var(--spring-snappy, ease);
 }
 
 :root {
@@ -131,6 +184,99 @@
     margin-top: 0;
 }
 
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (A): the surface FREEZE, composed AT THE
+ * ELEMENT. A detented sheet is SEE-THROUGH at peek/half (the page bleeds) and
+ * SOLIDIFIES toward a warm-tinted card at full (page does not bleed, blur → 0). This
+ * is the iOS-27 bottom-sheet crown the live α-0.95-at-every-detent flattened.
+ *
+ * A TWO-SEGMENT lerp on the ONE `--stage-t` knob (the self-standing crown — the wave
+ * owns BOTH endpoints so it does not block on BE.W-SHEET-TRANSLUCENT, fold C3·R1):
+ *   • DESCENT  t ∈ [0, 0.85] — the transmissive crown sinks `--glass-bg-overlay` α
+ *     toward the shipped see-through `--glass-bg-sheet` floor (`--glass-opacity-sheet:
+ *     0.74`). At peek/half the page bleeds through.
+ *   • SOLIDIFY t ∈ [0.85, 1] — `--sheet-freeze` lerps the descended plate toward a
+ *     WARM-TINTED card-mix (NOT bare `--card` — the gray-at-full carve hole, fold
+ *     C1·R4); `backdrop-filter` blur decays to 0 (a solid plate has no backdrop to
+ *     bend — a Safari win, no wasted sample behind an opaque plate).
+ *
+ * Composed AT THE ELEMENT (the `[data-surface=opaque]` substitution-safe path) via
+ * element-level `color-mix` — NEVER an ancestor `filter` (which would clobber the
+ * sheet's own backdrop-filter, the dock-hub goo-tear lesson, §7). `--stage-t` reads
+ * the `:root` scalar the single writer drives (mirrored from `--glass-drawer-t`).
+ */
+.glass-drawer[data-glass-drawer-snap-points="true"] {
+    /* the DESCENT fraction — 0 at closed → 1 at the commit floor (t=0.85). */
+    --sheet-descent: clamp(0, calc(var(--stage-t) / 0.85), 1);
+    /* the SOLIDIFY fraction — 0 below the commit floor → 1 at full (t=1). */
+    --sheet-freeze: clamp(0, calc((var(--stage-t) - 0.85) / 0.15), 1);
+    /* the transmissive crown plate: the warm overlay fill sunk toward the shipped
+       see-through `--glass-bg-sheet` floor across the descent. */
+    --sheet-crown: color-mix(
+        in oklab,
+        color-mix(
+            in oklab,
+            var(--glass-bg-overlay),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        ),
+        var(--glass-bg-sheet) calc(var(--sheet-descent) * 100%)
+    );
+    /* the warm-tinted SOLID escape (fold C1·R4 — a warm card-mix toward the EXPLICIT
+       warm `--glass-capsule-warm` amber, NEVER bare `--card` and NEVER the
+       `--glass-tint-source` alias which resolves back to `--card` and would be a
+       no-op warm; build-trap-(d) safe — a warm oklch color, never bare `transparent`).
+       At the shared 16% warm floor a dark full sheet stays C ≥ 0.02 warm — no
+       charcoal holiday at full. */
+    --sheet-solid: color-mix(
+        in oklab,
+        var(--card),
+        var(--glass-capsule-warm) var(--glass-capsule-warm-floor, 16%)
+    );
+    background: color-mix(
+        in oklab,
+        var(--sheet-crown),
+        var(--sheet-solid) calc(var(--sheet-freeze) * 100%)
+    );
+    /* BG.W-BACKDROP-BLUR-ENGAGE (F5.4) — the sheet's own backdrop blur ENGAGES off the
+       LIVE gesture scalar `--glass-drawer-t`, not a fixed duration: it builds 0 → full as
+       the finger pulls the sheet in (reaching full by the shared `--glass-blur-engage-knee`
+       ~35% pull — the iOS quick-coalesce), tracks the finger 1:1 during the drag (the
+       scalar is written per-frame), and de-blurs on the trailing dismiss over the
+       DRAWER_SNAP spring's OWN settle (the scalar glides to 0 on close) — the ONE
+       sanctioned fixed-clock leg, delivered for free by the drag scalar's spring. The
+       SOLIDIFY leg (`1 - --sheet-freeze`) still decays the blur to 0 at the full-commit
+       floor (a solid plate has no backdrop to bend — the Safari win). The engage scalar
+       + the `--glass-blur-engage-knee` curve constant are the shared engage primitive
+       minted in surfaces.css; the blur recipe is inlined here (the raw `/styles` partial
+       ships unresolved-`@apply`-free) reading `--glass-blur-engage-t` on the SAME
+       `--glass-blur-overlay-radius` rung, with the sheet's own `saturate` leg on top. At
+       `--glass-drawer-t: 0` (closed) the engage resolves 0 → NO blur (no wasted sample
+       behind an offscreen sheet; NO-MASKING-FALLBACK — a dead writer shows an un-blurred
+       plate, never a masking full blur). NO `transition: backdrop-filter` — the gesture
+       IS the clock. */
+    --glass-blur-engage-t: calc(
+        clamp(0, calc(var(--glass-drawer-t) / var(--glass-blur-engage-knee, 0.35)), 1) *
+            (1 - var(--sheet-freeze))
+    );
+    /* Unprefixed ONLY — Lightning CSS emits the `-webkit-` companion (the single-source
+       authorship discipline, per `.btn-glass`); hand-authoring both doubles the prefix. */
+    backdrop-filter: blur(
+            calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t))
+        )
+        saturate(1.6);
+}
+
+/* The `surface=opaque` explicit escape still wins (it sets the solid plate
+   unconditionally regardless of detent) — the freeze is the DEFAULT glass crown; the
+   opt-out plate is the consumer's hard override. Source order keeps the opaque rule
+   (declared above) — re-assert it here so it beats the snap-points freeze at equal
+   specificity for a detented opaque sheet. */
+.glass-drawer[data-glass-drawer-snap-points="true"][data-surface="opaque"] {
+    background: color-mix(in srgb, var(--card), transparent 0%);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
 /* Direction variants — the content root tags itself with the drag axis
    (`data-glass-drawer-direction`). Bottom is the default; the others ride the same
    surface so a top/side sheet inherits the grammar. The side-lens (left/right) is
@@ -222,6 +368,60 @@
     background-color: var(--drawer-snap-rule-color);
 }
 
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (B): the scrim DEEPEN. The scrim α tracks
+ * `--stage-t` so a peek drawer barely dims and a full drawer commits hard (the live
+ * fixed-α-0.8 at every detent is the born-RED). Reuses the SHIPPED warm
+ * `--overlay-scrim-ink` (the F7 warm near-black, never flat black), now t-coupled.
+ * `clamp(0,…,1)` bounds the fling overshoot. The scrim element gains
+ * `[data-stage-scrim]` (DrawerOverlay.vue) and reads the inherited `:root` scalar.
+ */
+[data-stage-scrim] {
+    background: color-mix(
+        in srgb,
+        var(--overlay-scrim-ink)
+            calc((0.28 + clamp(0, var(--stage-t), 1) * 0.44) * 100%),
+        transparent
+    );
+}
+
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (C): the page RECEDE + SCALE. The page wrapper
+ * scales `1 → 0.95` + corner-radius blooms as `--stage-t → 1` (the iOS "card recedes"
+ * depth cue — the honest `stage=` enum drives it). `scale` +
+ * `border-radius` ONLY — NO `filter` (the ancestor-filter trap: `filter` on the app
+ * root establishes a containing block for `position:fixed` and force-rasterizes the
+ * page subtree every frame — fold C2·R1; §7). The wrapper is the consumer's app-root
+ * marker (`demo/App.vue` mounts `[data-stage-wrapper]`); when the honest
+ * `stage="none|dim"` enum is set the marker carries no `--stage-t` drive (or the
+ * `data-stage-scale` gate is absent) so (C) is a real no-op, never a lie. Under PRM
+ * `stage="scale"` degrades to `dim` at the SFC (no `data-stage-scale` attr) so the
+ * page never transforms (fold C1·R6) — this rule only fires when the scale gate is on.
+ */
+[data-stage-wrapper][data-stage-scale] {
+    scale: calc(1 - 0.05 * clamp(0, var(--stage-t), 1));
+    border-radius: calc(var(--radius-panel) * clamp(0, var(--stage-t), 1));
+    transform-origin: 50% 0; /* recede toward the top, iOS */
+    overflow: clip;
+}
+
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (D): the blur ENGAGE (opt-in `immersive`, the
+ * Command spotlight). BI.W-DRAWER-PERF — the scrim's backdrop blur ENGAGES at a FIXED
+ * depth (16px), NOT a per-frame radius ramp on `--stage-t`. A `blur(calc(--stage-t *
+ * 16px))` re-rasterizes the blur kernel EVERY frame (the cardinal Safari sin, §L7 /
+ * fold C2·R); the DIM ramps instead via the scrim α coupling (the `[data-stage-scrim]`
+ * rule above, already `--stage-t`-driven) — the backdrop blur snaps to depth while the
+ * dim tracks the detent (MOTION-LADDER §1.3: the backdrop blur engages fast at a fixed
+ * depth, the dim ramps; a symmetric radius ramp reads wrong). The scrim fades in over
+ * its `animate="fade"` enter, so the fixed blur reads as coalescing, never a pop.
+ * Default OFF.
+ */
+[data-stage-scrim][data-stage-immersive] {
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+}
+
 /* Reduced-motion — the house `SpringProgress` snaps the detent deterministically
    under `prefers-reduced-motion: reduce` (its `respectReducedMotion` jumps the
    `--glass-drawer-t` scalar to target in one frame, zero motion frames); here we

package/src/styles/glass/a11y-fallback.css

@@ -35,6 +35,12 @@
         --glass-level: 0.3;
         --glass-tint-source: var(--glass-tint-ink);
         --glass-tint-strength: var(--glass-tint-strength-aa);
+        /* BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — definition is the MID rung of the SAME
+           a11y ladder `--glass-level: 0.3` rides: an explicit "more contrast" request
+           lifts every glass surface to the DEFINED tier library-wide (a read-carrying
+           warm rim + the warm-cream floor), joining the level+tint escape as ONE
+           coordinated bracket, not a third fork. */
+        --glass-definition: 1;
     }
 }
 
@@ -167,79 +173,16 @@
     }
 }
 
-/* ── @supports fallbacks for non-backdrop-filter browsers ── */
-@layer components {
-    /* GUARD 1 — the NO-BLUR-AT-ALL engine (supports NEITHER the unprefixed NOR the
-       webkit form): paint an opaque-leaning plate so text stays legible without any
-       blur. AY.W-A11Y-PERF O-2b note: this is the floor for the theoretical
-       neither-supported case. The Safari ≤17 webkit-only trap (supports the `-webkit-`
-       form, so this `@supports not (… or …)` is FALSE and the fallback does NOT fire)
-       is closed at the SOURCE OF THE PREFIX: O-2a's build pass guarantees the shipped
-       dist carries the `-webkit-backdrop-filter:` pair, so a Safari-17 engine renders
-       the BLUR off the prefixed rule (it no longer falls through to a transparent
-       unprefixed-only surface). The trap closes where the prefix is emitted, not here. */
-    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-        .glass-wash {
-            background: color-mix(in srgb, var(--card) 80%, transparent);
-        }
-        .glass-quiet {
-            background: color-mix(in srgb, var(--card) 88%, transparent);
-        }
-        .glass-resting {
-            background: color-mix(in srgb, var(--card) 94%, transparent);
-        }
-        .glass-floating {
-            background: color-mix(in srgb, var(--card) 98%, transparent);
-        }
-        .glass-overlay {
-            background: var(--card);
-        }
-        .glass-btn {
-            background: color-mix(in srgb, var(--background) 92%, transparent);
-        }
-    }
-
-    /* GUARD 2 — the WEBKIT-ONLY engine (supports `-webkit-backdrop-filter` but NOT the
-       unprefixed `backdrop-filter` — Safari ≤17). With O-2a's build-emitted prefix the
-       shipped rung carries the `-webkit-backdrop-filter:` pair, so this engine PAINTS
-       the blur off that prefixed declaration. This guard exists to DOCUMENT-and-confirm
-       that path (and would re-assert the translucent glass identity if a future change
-       ever stripped the rung bg under this engine) — it re-states the rungs' translucent
-       glass-mix so a webkit-only engine that DID get the prefix keeps the glass look,
-       never the opaque GUARD-1 plate. The `proof:webkit-backdrop` gate asserts the
-       shipped dist carries BOTH guards. */
-    @supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))) {
-        .glass-wash {
-            background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-quiet {
-            background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-resting {
-            background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-floating {
-            background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-overlay {
-            background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-btn {
-            background: var(--glass-bg-wash);
-        }
-    }
-}
-
-/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
-   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
-   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
-   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
-   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
-   override values have one source. NOT a live+dead alias — `:has()` is the
-   enhancement, this the documented degradation path. */
-@supports not selector(:has(*)) {
-    .glass-card.is-focus-within {
-        --card-focus-shadow: var(--shadow-md);
-        --card-focus-border: var(--glass-border-floating);
-    }
-}
+/* ── Legacy backdrop-filter + :has() capability ladders COLLAPSED
+   (BG.NF.2 W-LEGACY-LADDER-COLLAPSE — the NO-MASKING-FALLBACK floor).
+   The former GUARD-1 (no-blur opaque plate) + GUARD-2 (webkit-only glass-mix
+   restatement) `@supports` arms served engines supporting NEITHER form / the
+   webkit-only form (Safari ≤17) — years pre-target (target = current Chrome +
+   current Safari). `backdrop-filter` is Baseline on that set, and the real
+   webkit path is the BUILD-EMITTED `-webkit-backdrop-filter:` prefix pair
+   (`vite.style-assets.ts` O-2a), asserted in the shipped dist by
+   `proof:webkit-backdrop`, NOT a live source-side restatement. The
+   `@supports not selector(:has(*))` `.is-focus-within` arm (AQ.W3) collapsed
+   too — `:has()` is Chrome 105+/Safari 15.4+ AND its `Card.vue` toggler never
+   existed on disk (an orphan behind a lying comment); `.glass-card:has(:focus-
+   visible)` (`glass/surfaces.css`) is the sole focus-elevation mechanism. */