@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/dock.css

@@ -40,33 +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";
-/* BE.W-DOCK-FISSION — the 1→N stretch-and-snap goo bridge (the sibling of morph-bridge's
-   1→1 V↔H crossfade; the per-seam `--neck-t` neck STRETCH→THIN→SNAP-BACK recoil + the
-   jubilance ripple/splash FLOOR). @import-ed into the LIBRARY cascade beside morph-bridge
-   so a consumer importing `@mkbabb/glass-ui/styles` gets the fission delights — the recipe
-   is `v-for`-shaped on `.dock-fission-piece`, compositor-only, PRM-removed, Safari-safe
-   (the REGULAR `filter: url()`, never backdrop-filter). The demo's island FACE/layout
-   (`.liquid-island-*`) stays demo-only (liquid-morph.css); this file owns only the
-   `.dock-fission-bridge`/`.dock-fission-piece` BEHAVIOR. */
-@import "./dock/fission-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
@@ -92,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`
@@ -159,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,51 +18,64 @@
  */
 
 /* 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. `inherits: true` so
- * a single writer at `:root` reaches the portaled scrim AND the page-wrapper sibling
- * AND the sheet descendants from ONE write (the scrim is NOT a descendant of the
- * content, so a content-local mirror could never reach it — the `:root` write is the
- * cross-subtree path).
+ * 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 at `: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;
- * the close-write removes the inline value so the registered property reverts to its
- * `initial-value: 0` (the stale-latch fix). `initial-value: 0` so an un-staged page never
- * recedes. 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). */
+ * (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: true;
+    inherits: false;
     initial-value: 0;
 }
 
-/* The stage-t transition + close-write reset (the registered-property stale-latch
- * fix, fold C3·R7).
+/* 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 and
- * REMOVES the inline value on close → the registered property reverts to its
- * `initial-value: 0`. The centered modal (DialogContent) flips it 0→1 on open via the
- * `data-stage-flip` marker on `:root`; this rule owns the FLIP TRANSITION (a snappy
- * spring) so the dialog's `:root --stage-t` value glides 0→1 rather than snapping — a
- * CSS-owned transition, NOT an inline `transition` shorthand on `:root` (which would
- * clobber unrelated root transitions). On close the marker is dropped and the inline
- * value removed → the property reverts to 0 (no stale full-staged latch on re-open). */
-:root[data-stage-flip] {
+ * 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);
 }
 
@@ -224,12 +237,31 @@
         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) * (1 - var(--sheet-freeze)))
-        )
-        saturate(1.6);
-    -webkit-backdrop-filter: blur(
-            calc(var(--glass-blur-overlay-radius, 20px) * (1 - var(--sheet-freeze)))
+            calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t))
         )
         saturate(1.6);
 }
@@ -356,7 +388,7 @@
 /*
  * 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), retiring the dead `shouldScaleBackground` boolean. `scale` +
+ * 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
@@ -375,15 +407,19 @@
 
 /*
  * BD.W-OVERLAY-STAGE-COUPLE — coupling (D): the blur ENGAGE (opt-in `immersive`, the
- * Command spotlight). The scrim's `backdrop-filter` radius ramps `0 → deep` on
- * `--stage-t`. ONE-SHOT over the open window (gated to the modal-flip 0→1 via
- * `[data-stage-immersive]`, NEVER the drawer's per-frame scalar — the §L7 Safari
- * fence: a per-frame full-viewport re-blur is the cardinal sin, fold C2·R). WebKit
- * pays the sample once as the flip lands. Default OFF.
+ * 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(calc(clamp(0, var(--stage-t), 1) * 16px));
-    -webkit-backdrop-filter: blur(calc(clamp(0, var(--stage-t), 1) * 16px));
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
 }
 
 /* Reduced-motion — the house `SpringProgress` snaps the detent deterministically

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. */

package/src/styles/glass/control-surfaces.css

@@ -93,38 +93,42 @@
        specificity). `:focus-visible` Baseline Widely — no fallback. */
     .input-pill:focus-visible {
         outline: none;
-        border-color: var(--color-accent-opaque, var(--ring));
-        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
+        /* BG.W-DESHADCN — the focus fallback reads the renamed house
+           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
+        border-color: var(--color-accent-opaque, var(--focus-ring-color));
+        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--focus-ring-color) 30%, transparent));
     }
 
     /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The forgiving `:where(:user-invalid, .user-invalid-fallback,
-       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
-       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
-       fallback class for engines without `:user-invalid` (css §3.2; NOT a
-       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
-       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
-       serves APP-DRIVEN validity — a custom key match, an async server check —
-       where there is no native constraint to trip `:user-invalid`, so the app
-       sets the ARIA attribute and the library's own ring paints with no
-       `:deep()` re-paint at the consumer. The destructive/success tints reuse
-       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       The `:where(:user-invalid, [aria-invalid="true"])` group is ONE rule
+       covering TWO trigger surfaces: native constraint-validation
+       (`:user-invalid`, Baseline Chrome 119+/Safari 16.5+ on the target set) AND
+       (AW.W18) the imperative `[aria-invalid="true"]` attribute. The
+       `[aria-invalid]` arm serves APP-DRIVEN validity — a custom key match, an
+       async server check — where there is no native constraint to trip
+       `:user-invalid`, so the app sets the ARIA attribute and the library's own
+       ring paints with no `:deep()` re-paint at the consumer. The legacy
+       `.user-invalid-fallback` / `.user-valid-fallback` class members (for
+       engines without `:user-invalid`) were COLLAPSED at BG.NF.2
+       W-LEGACY-LADDER-COLLAPSE — the aria-BRIDGE half of `useUserInvalidAria`
+       KEEPS (a11y, not a ladder). The destructive/success tints reuse the
+       semantic tokens via `color-mix` per the house pattern (W2). Non-color
        reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
        asterisk — the border/bg shift is the supplementary cue, never the sole
        one. `:user-valid` is intentionally subtle (border only, no bg fill) so
        a long valid form is not a wall of green. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
+    .input-pill:where(:user-invalid, [aria-invalid="true"]) {
         border-color: var(--destructive);
         background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
     }
-    .input-pill:where(:user-valid, .user-valid-fallback) {
+    .input-pill:where(:user-valid) {
         border-color: var(--success);
     }
     /* Invalid + keyboard-focused → destructive ring (overrides the accent
        `:focus-visible` ring above by order + the extra invalid compound). The
        `[aria-invalid]` arm rides the same widened group so an app-driven
        invalid field shows the destructive ring on focus too. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
+    .input-pill:where(:user-invalid, [aria-invalid="true"]):focus-visible {
         border-color: var(--destructive);
         /* BB.W-INVALID-RING — the shared destructive ring register (the
            --focus-ring-shadow sibling). The byte-identical recipe is now ONE

package/src/styles/glass/deep.css

@@ -34,11 +34,81 @@
  * BEFORE the a11y @media brackets (which still win by the :root level re-point).
  */
 @layer components {
-    /* The deep decoration: re-point the floating rung's blur token to the deep
-       family. The base `.glass-floating` rule (`backdrop-filter:
-       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
-       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
+    /* The deep decoration: COMPUTE the deep LERP here (at the consuming element) +
+       re-point the floating rung's blur token to it.
+
+       THE FREEZE-FIX (BG.W-GLASS-DEPTH-TIER — the C18 dual-engine painted dead-knob,
+       2026-07-05). The LERP intermediates read `var(--glass-depth)`, a REGISTERED
+       `@property` (`inherits: true; initial-value: 1`). Per the CSS Properties &
+       Values API a `var()` to a registered custom property inside ANOTHER custom
+       property is eager-substituted with the referenced property's COMPUTED value AT
+       THE DECLARING ELEMENT. So these intermediates MUST be declared HERE (on
+       `.glass-deep`), NOT at `:root` (tokens/glass-deep.css) — at `:root` the tier
+       grade is not yet in scope and `--glass-depth` computes to its `initial-value` 1,
+       freezing the whole calc at the depth-1 endpoint (every deep surface paints the
+       16px / 1.8 ceiling, tier grade inert). The tier map below sets `--glass-depth`
+       per tier ON THE BASE RUNG the `.glass-deep` decoration composes with (same
+       element), so declared here `var(--glass-depth)` resolves to the element's LIVE
+       tier grade and the ladder PAINTS: content ~14px < popover ~15px < menu 16px.
+
+       The composition is IDENTICAL to the retired `:root` form — same endpoints
+       (`--glass-blur-floating-radius` depth-0 floor / `--glass-blur-deep-radius`
+       depth-1 ceiling, `--glass-saturate-floating` / `--glass-saturate-deep`), same
+       `* var(--glass-level)` clarity scale (so the opaque escape + the a11y brackets
+       reach the deep plate through the ONE level path; at `--glass-level: 0` the deep
+       blur resolves blur(0)). Only the DECLARING SELECTOR moved (:root → .glass-deep).
+       The base `.glass-floating` rule (`backdrop-filter: var(--glass-blur-floating)`)
+       then paints the deep blur — the Apple-deep register, opt-in. */
     .glass-deep {
+        --glass-blur-deep-active-radius:
+            calc(
+                (
+                    var(--glass-blur-floating-radius)
+                    + (var(--glass-blur-deep-radius) - var(--glass-blur-floating-radius))
+                    * var(--glass-depth)
+                )
+                * var(--glass-level)
+            );
+        --glass-saturate-deep-active:
+            calc(
+                var(--glass-saturate-floating)
+                + (var(--glass-saturate-deep) - var(--glass-saturate-floating))
+                * var(--glass-depth)
+            );
+        --glass-blur-deep:
+            blur(var(--glass-blur-deep-active-radius))
+            saturate(var(--glass-saturate-deep-active));
         --glass-blur-floating: var(--glass-blur-deep);
     }
+
+    /* ── The tier-ladder depth MAP (BG.W-GLASS-DEPTH-TIER) ──────────────────────
+       Map --glass-depth onto the tier ladder so the deep register's thickness
+       tracks surface PROMINENCE by construction: the overlay/menu rungs default a
+       HIGHER depth than the content rungs (menu > popover > button). Each rung sets
+       the ONE --glass-depth scalar from its named grade (tokens/glass-deep.css) — a
+       pure per-rung DEFAULT, NOT a new blur recipe. So a deep surface inherits its
+       tier's depth: a `deep` Card (glass-floating glass-deep) resolves the popover
+       grade (~15px), the hero CTA button (glass-wash btn-glass glass-deep) resolves
+       the content grade (~14px), a deep overlay/modal reaches the full 16px ceiling
+       — thickness tracks prominence by construction, ZERO new machinery.
+
+       D5-SAFE: no rung reads var(--glass-blur-deep) here — --glass-depth only DRIVES
+       the deep LERP (glass-deep.css), so a NON-deep tier surface is BYTE-UNCHANGED
+       (a plain popover stays the calm 13px; the calm ladder never reads --glass-depth)
+       and only a `.glass-deep`-composed surface consumes the graded depth.
+
+       SUBSTITUTION-vs-INHERITANCE (the recorded seam): zero-specificity :where() so
+       a consumer overrides the default at the element (`--glass-depth` inline / a
+       higher-specificity rule). To retune a whole band from an ancestor, override the
+       named grade token (`--glass-depth-popover: …`) — the tier rules read it, so it
+       cascades in (the per-band twin of the global --glass-depth ancestor dial). */
+    :where(.glass-overlay) {
+        --glass-depth: var(--glass-depth-menu);
+    }
+    :where(.glass-floating) {
+        --glass-depth: var(--glass-depth-popover);
+    }
+    :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) {
+        --glass-depth: var(--glass-depth-content);
+    }
 }