@mkbabb/glass-ui 3.13.0 → 4.0.1

package/dist/styles/critical-partition.mjs

@@ -0,0 +1,140 @@
+/*
+ * critical-partition.mjs — the CRITICAL_PARTITION boundary manifest
+ * (BB.W-CSS-CRITICAL — the render-blocking `/styles` split).
+ *
+ * The SINGLE source of the critical/deferred partition of the resolved
+ * `@mkbabb/glass-ui/styles` draw. The build (vite.style-assets.ts
+ * publishStyleAssets) reads it to emit `dist/styles/critical.css` +
+ * `dist/styles/deferred.css`; the gate (scripts/proof-css-critical.mjs) reads
+ * it to assert the partition is byte-complete + manifest-driven. There is NO
+ * second hand-extracted critical block (W4 — the manifest is the sole source).
+ *
+ * The partition is drawn at the EXISTING thin-root-over-partials cascade
+ * boundary (AY.W-CSS1) — whole `src/styles/index.css` @import partials are
+ * bucketed, never a partial-content re-author (the partial CONTENTS are
+ * untouched; a cross-partial rule move is a triumvirate trigger, see the wave
+ * spec §Triumvirate). The two emitted files each @import their bucket's
+ * partials in the SAME cascade order the monolith index.css declares (load
+ * order is load-bearing), and CRITICAL loads BEFORE DEFERRED in the consumer
+ * so the deferred component recipes still cascade-correctly over the critical
+ * glass ladder.
+ *
+ * CRITICAL (./styles/critical) — the above-the-fold paint surface a consumer's
+ * FIRST PAINT requires: the whole token cascade (every visual axis is a custom
+ * property the chrome reads), the √φ typography scale + semantic type classes,
+ * the @theme aliases + the `.dark` variant selector, and the 5-rung glass
+ * ladder + specular/refract. Small (the token + ladder + type surface, not the
+ * component recipes) — under the recorded gzip ceiling (W3).
+ *
+ * DEFERRED (./styles/deferred) — the below-the-fold + late-mount tail: every
+ * component recipe + the transitions/animations/scroll-driven/view-transition
+ * grammar + utilities + the menu/configurator/instrument-chassis/hover-popover/
+ * drawer/segmented-tabs/select/icon-chip component partials, PLUS the folded SFC
+ * `<style scoped>` payload (`../glass-ui.css`) and the emitted Tailwind
+ * component-utility surface (`components.css`). These decorate components that
+ * mount after first paint or sit below the fold; their late arrival shifts no
+ * above-the-fold pixel (the FOUC-safe floor, W5).
+ *
+ * The `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
+ * utilities pair with glass for paper-on-glass compositions that mount with the
+ * content surfaces (below-the-fold), not the chrome's first paint.
+ */
+
+/**
+ * The two non-fold buckets — each entry is a `src/styles/*.css` partial that the
+ * monolith `src/styles/index.css` @imports at the top level (lines 149-182).
+ * The order within each list mirrors the monolith's declared cascade order.
+ */
+export const CRITICAL_PARTIALS = Object.freeze([
+    "tokens.css",
+    "typography.css",
+    "theme.css",
+    "glass.css",
+    "glass-specular-track.css",
+    "glass-refract.css",
+]);
+
+export const DEFERRED_PARTIALS = Object.freeze([
+    "paper.css",
+    "dock.css",
+    "dock-controls.css",
+    "cards.css",
+    "feedback-tone.css",
+    "floating-panel.css",
+    "transitions.css",
+    "animations.css",
+    "scroll-driven.css",
+    "scroll-choreography.css",
+    "view-transition.css",
+    "utilities.css",
+    "menu.css",
+    "configurator.css",
+    "instrument-chassis.css",
+    "hover-popover.css",
+    "drawer.css",
+    "segmented-tabs.css",
+    "select.css",
+    "icon-chip.css",
+    "border-progress.css",
+]);
+
+/**
+ * The build-time folds that land in DEFERRED (NOT a `src/styles/*.css` partial;
+ * the publishStyleAssets folds appended to the dist copy of index.css). The SFC
+ * scoped payload (`../glass-ui.css`) + the Tailwind component-utility surface
+ * (`./components.css`) are below-the-fold component decoration — they MUST NOT
+ * leak into critical (the W2 byte-complete-in-one-bucket + W3 ceiling bite).
+ * Relative to `dist/styles/` (where critical.css/deferred.css are emitted).
+ */
+export const DEFERRED_FOLDS = Object.freeze([
+    "../glass-ui.css",
+    "./components.css",
+]);
+
+/**
+ * The `@source` build-scan backstop directive (the consumer-JIT content-scan
+ * reach for glass-ui's own component utilities — a backstop for the
+ * components.css self-emit). It backstops the DEFERRED component utilities, so
+ * it rides DEFERRED. The value is the exact directive the monolith index.css
+ * carries (re-grounded at HEAD: `@source "../*.js";`).
+ */
+export const DEFERRED_SOURCE_DIRECTIVE = '@source "../*.js";';
+
+/**
+ * The recorded critical-subset gzip ceiling (bytes), measured on the FULLY
+ * RESOLVED consumer draw (the critical partials' @import roots resolved
+ * RECURSIVELY through their nested tokens/* + glass/* sub-partials — the real
+ * first-paint byte a consumer's bundler emits, NOT the one-level approximation
+ * profile-bundle uses for the monolith budget). The committed, reviewed
+ * baseline (the profile-bundle read-baseline discipline): a regression that
+ * folds a component recipe back into critical climbs the emitted critical.css
+ * resolved gzip over this → RED (W3). Re-base via the gate's `--rebaseline`
+ * flag with a recorded rationale, never silently.
+ *
+ * Measured at this authoring (HEAD bdbcd479, post-build): the critical subset
+ * resolved to raw 347266 / gzip 105460 — the token cascade (tokens.css gzip
+ * ~62KiB) + the 5-rung glass ladder (glass.css gzip ~27KiB) + typography +
+ * theme + specular/refract. It is roughly half the monolith's fully-resolved
+ * gzip (~230KiB), so the deferred tail (component recipes + SFC scoped payload
+ * + components.css utility surface, ~125KiB gzip) loads NON-blocking after
+ * first paint — the render-block win. The ceiling carries ~4% headroom over
+ * the measured baseline (the profile-bundle re-base convention). If the
+ * re-measured render-block under W-LIGHTHOUSE shows this critical subset is
+ * STILL over the mobile-ms floor, the inline-critical-head-block path routes to
+ * the named BB.W-CSS-CRITICAL-INLINE successor (a triumvirate trigger, NOT a
+ * token-value edit here).
+ *
+ * RE-BASE (BB liquid-glass band): the critical subset grew to raw 427015 / gzip
+ * 131469 — NOT a component-recipe leak (the critical bucket is still the 6
+ * documented token+glass+type partials; w2 partials-disjoint + w4 hold), but the
+ * legitimate GROWTH of the critical token cascade + glass ladder by the BB
+ * liquid-glass band: the deep-glass token family (tokens/glass-deep.css), the
+ * --glass-accent rim axis, the W-LENSING refract evolution, the W-DARK-MATERIAL
+ * dark-arm + the on-glass-fg / surface-axis registers — all of which live in the
+ * critical tokens/* + glass/* sub-partials by construction. Ceiling lifted
+ * 110000 → 137000 (~4.2% headroom over the measured 131469, the profile-bundle
+ * re-base convention) to carry the BB glass-band critical surface. The
+ * render-block FLOOR stays W-LIGHTHOUSE's W3-arm-1 mobile-ms gate (the binding
+ * perf truth); this ceiling guards against a recipe revert-toward-monolith.
+ */
+export const CRITICAL_GZIP_CEILING = 137000;

package/dist/styles/critical.css

@@ -0,0 +1,12 @@
+/* BB.W-CSS-CRITICAL — the CRITICAL /styles subset (off
+   src/styles/critical-partition.mjs CRITICAL_PARTITION; do not
+   hand-edit — the manifest is the SOLE partition source). Each
+   @import is a whole cascade partial in the monolith's declared
+   load order; critical ∪ deferred is byte-complete. */
+
+@import "./tokens.css";
+@import "./typography.css";
+@import "./theme.css";
+@import "./glass.css";
+@import "./glass-specular-track.css";
+@import "./glass-refract.css";

package/dist/styles/deferred.css

@@ -0,0 +1,31 @@
+/* BB.W-CSS-CRITICAL — the DEFERRED /styles subset (off
+   src/styles/critical-partition.mjs CRITICAL_PARTITION; do not
+   hand-edit — the manifest is the SOLE partition source). Each
+   @import is a whole cascade partial in the monolith's declared
+   load order; critical ∪ deferred is byte-complete. */
+
+@import "./paper.css";
+@import "./dock.css";
+@import "./dock-controls.css";
+@import "./cards.css";
+@import "./feedback-tone.css";
+@import "./floating-panel.css";
+@import "./transitions.css";
+@import "./animations.css";
+@import "./scroll-driven.css";
+@import "./scroll-choreography.css";
+@import "./view-transition.css";
+@import "./utilities.css";
+@import "./menu.css";
+@import "./configurator.css";
+@import "./instrument-chassis.css";
+@import "./hover-popover.css";
+@import "./drawer.css";
+@import "./segmented-tabs.css";
+@import "./select.css";
+@import "./icon-chip.css";
+@import "./border-progress.css";
+@import "../glass-ui.css";
+@import "./components.css";
+
+@source "../*.js";

package/dist/styles/dock/density.css

@@ -11,6 +11,30 @@
  * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
  * carve is isomorphic (same layer, same source order → ZERO visual delta). */
 
+/* ── BB.W-HIERARCHY2 — the CONTENT-side anti-collision gutter ───────────────────
+   `--dock-content-safe-inset` is the structural CONTENT-side counterpart to the
+   dock-collision SEAT fix (W-CHIP-GRAZE + W-DOCK-RAIL-SEAT-FINAL own the chip-fan
+   SEAT — the chips fan off-canvas into the rail's dead gutter, chipOverMain:false on
+   EVERY route by topology). This token reserves a guaranteed safe-inset gutter on the
+   CONTENT column so the page-title band is structurally clear of any chip reach even
+   on a route added WITHOUT a per-route audit (the anti-gameability the gestalt gate
+   wants). It is keyed to the dock reach (`--dock-rail-extend-length`, the rail's
+   beyond-edge overrun) so the content gutter tracks the dock geometry in lockstep,
+   and it rides `--dock-scale` transitively through that reach token.
+
+   THE DE-OVERLOAD IS BINDING (distinct geometry concerns, distinct tokens):
+   `--dock-control-safe-inset` (per-density, below) is the dock CONTROL plate-clearance
+   inset (the painted plate floors a notch below its track cell — BA.W-DOCK-GEOMETRY,
+   owned by proof:dock-plate-clearance); `--dock-content-safe-inset` is the CONTENT-band
+   gutter (the content column reserves dead inline space the chips can never share).
+   The two close the collision from BOTH sides — the chip seat (the SEAT waves) AND the
+   content gutter (this token) — coordinated on the SAME dead inline gutter: the content
+   gutter is the RESERVE, the gutter-fan lands the chips in it (ONE gutter, two
+   consumers). NEVER re-point this AT --dock-control-safe-inset (the de-overload). */
+:root {
+    --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem);
+}
+
 @layer components {
     /* AX.W45 — the density cascade is threaded by the ONE `--dock-scale`
        multiplier (default 1, lifted to `--dock-mobile-scale` on coarse pointers).
@@ -39,6 +63,19 @@
             calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The
+           painted control plate floors a notch BELOW its track cell so the maximal
+           hover (×--scale-hover-dock 1.1) / active silhouette stays inside the
+           cross-axis clip box with ≥1px margin (the lozenge dies at the plate
+           diameter, not at the clip edge). The inset is a per-SIDE fraction of the
+           control size (0.1 → an 80%-of-cell painted plate, the iOS-26 inset
+           register), so it scales with EVERY density rung in lockstep AND rides the
+           `--dock-scale` coarse multiplier transitively through --dock-control-size.
+           The control families route it through `padding` + `background-clip:
+           content-box`, so the HIT BOX stays the full --dock-control-size (the WCAG
+           2.5.5 44px floor stays on the CELL, never the inset plate) while the
+           PAINTED plate insets within it. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
         );
@@ -87,6 +124,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale)
         );
@@ -131,6 +170,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale)
         );
@@ -174,6 +215,8 @@
             calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale)
         );
@@ -203,6 +246,27 @@
         );
     }
 
+    /* BB.W-PERF-PRODUCER A′-6 — RE-RESOLVE the glyph token inside the density-painted
+       scope. `--dock-icon-glyph` (offsets-sizing.css) is a RATIO of
+       `--dock-layer-height`, but density.css paints `--dock-layer-height` ONLY on
+       `.glass-dock[data-density]` — the `:root` `--dock-icon-glyph` definition reads
+       `--dock-layer-height` at `:root` (the inline fallback ladder), so it would
+       FREEZE at the fallback rather than track the per-rung painted height (the SAME
+       substitution-vs-inheritance trap the R5-1 sweep fixed for
+       `--dock-collapsed-summary-min-size` in overflow.css). Re-resolving it HERE, on
+       the element that paints `--dock-layer-height`, lets the per-density height flow
+       into the glyph so a `spacious` dock's glyph grows in lockstep with the shelf
+       (the value.js D5-1 defect). The formula is IDENTICAL to the `:root` definition;
+       only the resolution element moves. The WCAG floor + the `--dock-icon-glyph-ratio`
+       knob ride through unchanged; the `.dark-mode-toggle-button > svg` mirror reads
+       the same re-resolved token so both glyphs track the density axis. */
+    .glass-dock[data-density] {
+        --dock-icon-glyph: max(
+            calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+            var(--dock-icon-glyph-floor)
+        );
+    }
+
     /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN
        box is narrow the audacious-dock label glyphs compress so the chrome
        doesn't overflow its host (≤14px below 30rem, 15px 30–45rem). Keyed off

package/dist/styles/dock/layers.css

@@ -3,7 +3,9 @@
  *
  * Carved from the dock.css god-module (slice 25). This partial owns the dock's
  * layer model: the `.dock-layers` grid container + the FLIP-driven box-size morph
- * (the `--dock-morph-size` calc off the ONE `--dock-morph-t` scalar), the unified
+ * (BB.W-DOCK-MORPH-FAMILY — a `transform: scale()` over a reserved settled `to`
+ * footprint, the live `--dock-morph-scale` derived off the ONE `--dock-morph-t`
+ * scalar; NO per-frame layout-axis lerp), the unified
  * `.is-active` / `.is-leaving` 3-state crossfade + hit-test contract (the
  * a11y-006 anchor), the per-child reveal stagger (the `--dock-stagger-*` ramp),
  * and the `layout="grid"` 2D tile-grid arrangement. The `.dock-layer-group` /
@@ -37,46 +39,66 @@
     }
 
 
-    /* AX.W01 — the box size morph reads the SAME `--dock-morph-t` scalar as the
-       root chrome (ONE clock, co-temporal by construction). `useLayerTransition`
-       measures the from→to size ONCE per swap (the allowed one-time FLIP
-       measurement) and writes `--dock-morph-from`/`--dock-morph-to` px on the
-       morphing element; the live scalar interpolates between them. The size lands
-       on the morph AXIS — `inline-size` for a horizontal `.dock-layers` (always
-       inline) + a horizontal inner stack, `block-size` for a vertical inner stack.
-       Gated on the root `[data-morphing]`, so at REST the intrinsic / `width:100%`
-       rules below hold (the morph vars are cleared on settle). Replaces the prior
-       `transition: width var(--dock-motion-resize)` inline-FLIP — there is NO CSS
-       transition on the size axis; the spring writes the scalar, CSS reads it. The
-       active pane is REVEALED through the clip aperture as the box grows (the W2
-       clip-reveal contract). */
+    /* BB.W-DOCK-MORPH-FAMILY (a)/(b) — the box morph is now a COMPOSITOR TRANSFORM
+       over a RESERVED SETTLED footprint, NOT a per-frame `inline-size` lerp (the C3
+       "too slow and laggy" relayout-every-frame defect). `useLayerTransition` /
+       the orchestrator still measure the from→to size ONCE per swap (the allowed
+       one-time FLIP measurement) and write `--dock-morph-from`/`--dock-morph-to` px
+       on the morphing element — but the layout axis is set to the SETTLED `to`
+       value (ONE layout solve, the box reserves its end footprint from frame 0), and
+       the live `--dock-morph-t` scalar drives a `transform: scale()` between the
+       from/to RATIO and 1. The content lays out COMPLETE at `to` behind the
+       `overflow: clip` aperture (shell.css), and the scaled-down box reads as the
+       smaller in-flight footprint (the clip uncovers the scaled box, never a
+       half-painted growing layout — the reveal-seat (b) fix). `--dock-morph-ratio`
+       is `from/to` (guarded: `to:0` → ratio 0); `--dock-morph-scale` runs
+       `ratio → 1` as `t: 0 → 1`. `transform-origin` anchors the pinned edge
+       (inline-start for the horizontal aperture) so the box grows from the correct
+       side. NO `inline-size`/`block-size` reads the live scalar — the CDP Layout
+       track stays FLAT through the morph (the F1 compositor-bound floor). */
     .glass-dock[data-morphing] .dock-layers,
     .glass-dock[data-morphing] .dock-layer-stack {
-        --dock-morph-size: calc(
-            var(--dock-morph-from, 0px) +
-                (var(--dock-morph-to, 0px) - var(--dock-morph-from, 0px)) *
-                var(--dock-morph-t, 0)
+        --dock-morph-ratio: calc(
+            var(--dock-morph-from, 0px) / max(var(--dock-morph-to, 1px), 1px)
         );
-        inline-size: var(--dock-morph-size);
+        --dock-morph-scale: calc(
+            var(--dock-morph-ratio) +
+                (1 - var(--dock-morph-ratio)) * var(--dock-morph-t, 0)
+        );
+        /* The box RESERVES its settled `to` footprint — a single layout solve, NOT
+           the live scalar calc. The transform composites over it. */
+        inline-size: var(--dock-morph-to);
+        transform: scaleX(var(--dock-morph-scale));
+        transform-origin: left center;
+        will-change: transform;
     }
 
     /* AZ.W-DOCK-TAXONOMY (move 2) — a VERTICAL dock's outer `.dock-layers` morphs the
        BLOCK axis (its collapse↔expand shrinks `height`, not `width`). The orchestrator
        measures/writes the same `--dock-morph-from/to` span on the block axis
        (`outerLayerAxis` is now the resolved orientation; `morphAxisProp` maps
-       vertical→`block-size`), so the CSS lands the scalar on `block-size` and lets the
-       inline axis stay intrinsic. This is the wiring that gives a collapsible vertical
-       dock the height-morph the mandate names. */
+       vertical→`block-size`).
+       BB.W-DOCK-MORPH-FAMILY (a)/(b) — the vertical box reserves its settled `to`
+       BLOCK footprint + composites a `scaleY()` over it on the SAME `--dock-morph-t`
+       scalar (the inverse axis of the horizontal `scaleX`), `transform-origin` at the
+       block-start pinned edge. NO live-scalar `block-size` calc → no per-frame
+       relayout on the vertical axis either. */
     .glass-dock.vertical[data-morphing] .dock-layers {
         inline-size: auto;
-        block-size: var(--dock-morph-size);
+        block-size: var(--dock-morph-to);
+        transform: scaleY(var(--dock-morph-scale));
+        transform-origin: center top;
+        will-change: transform;
     }
 
-    /* A vertical inner group morphs the BLOCK axis — the same span lands on
-       block-size, and the inline axis stays intrinsic. */
+    /* A vertical inner group morphs the BLOCK axis — the same settled-footprint
+       reserve + `scaleY()` composite over it. */
     .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
         inline-size: auto;
-        block-size: var(--dock-morph-size);
+        block-size: var(--dock-morph-to);
+        transform: scaleY(var(--dock-morph-scale));
+        transform-origin: center top;
+        will-change: transform;
     }
 
     /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
@@ -311,10 +333,12 @@
        from these state rules; they keep only their non-overflow concerns.
 
        AX.W01 — `:not([data-morphing])` gate: at REST expanded the layers fill the
-       box (`width:100%`), but DURING the morph the FLIP from→to px (the
-       `--dock-morph-size` calc above) is the SOLE size authority — a `width:100%`
-       here would win on specificity and snap the box past the spring. The gate
-       hands the size to the scalar for the morph and back to 100% on settle. */
+       box (`width:100%`), but DURING the morph the reserved `to`-footprint +
+       `transform: scale()` (BB.W-DOCK-MORPH-FAMILY, above) is the SOLE size
+       authority — a `width:100%` here would win on specificity and fight the
+       reserved footprint. The gate hands the box to the transform for the morph and
+       back to 100% on settle (the transform/reserve vanish when `[data-morphing]`
+       clears). */
     .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers {
         width: 100%;
     }

package/dist/styles/dock/morph.css

@@ -34,24 +34,55 @@
        during the morph, so the read resolves the correct in-flight blend (collapse
        1→0 via `1 - t`; expand 0→1 via `t`); on settle `[data-morphing]` clears and
        expand-t snaps to the exact class endpoint. */
-    .glass-dock:not(.vertical).expanded,
-    .glass-dock:not(.vertical).always-expanded {
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the `--dock-expand-t` directional derivation is
+       ORIENTATION-AGNOSTIC. The derivation reads the per-swap morph scalar + the
+       synchronously-set `.expanded`/`.collapsed` class — there is NO axis in this
+       blend (a `t`-vs-`1-t` directional read), so the `:not(.vertical)` qualifier is
+       DROPPED here. A collapsing VERTICAL dock now derives the same in-flight
+       expand-t (the box-size arm `layers.css` already morphs `block-size` on
+       `--dock-morph-t`; this gives the chrome the matching directional scalar). The
+       earlier "a vertical rail is ALWAYS-EXPANDED" assumption is retired since
+       vertical-collapse shipped — `alwaysExpanded` defaults false (GlassDock.vue),
+       so a genuinely-collapsing vertical dock gets its chrome on the ONE clock. */
+    .glass-dock.expanded,
+    .glass-dock.always-expanded {
         --dock-expand-t: 1;
     }
 
-    .glass-dock:not(.vertical).collapsed {
+    .glass-dock.collapsed {
         --dock-expand-t: 0;
     }
 
-    .glass-dock:not(.vertical).expanded[data-morphing],
-    .glass-dock:not(.vertical).always-expanded[data-morphing] {
+    .glass-dock.expanded[data-morphing],
+    .glass-dock.always-expanded[data-morphing] {
         --dock-expand-t: var(--dock-morph-t);
     }
 
-    .glass-dock:not(.vertical).collapsed[data-morphing] {
+    .glass-dock.collapsed[data-morphing] {
         --dock-expand-t: calc(1 - var(--dock-morph-t));
     }
 
+    /* BB.W-LIQUID-REVEAL — the dock-expand LIQUID-OPEN bloom beat (DOCK-EXPAND-CONSUMER).
+       The dock pill BLOOMS open from its collapsed circle: a coupled `filter` blur-
+       settle decongest reading the SAME `--dock-expand-t` directional scalar the chrome
+       interp rides (the W-DOCK-MORPH-FAMILY morph mechanism is UNTOUCHED — this is a
+       SURFACE arm, NOT a morph-axis layout edit). Collapsed (`--dock-expand-t` 0) the
+       dock content reads a faint `blur(--dock-reveal-blur)` decongest; as it expands
+       (`--dock-expand-t` → 1) the blur SETTLES to 0 so the chrome clarifies AS the pill
+       blooms — the iOS "light-bending modulation" arrival on the dock's own pixels
+       (`filter`, NOT `backdrop-filter`, so the resting glass-tier plate blur the dock
+       carries is never clobbered). Compositor-safe (a `filter` radius interp, never a
+       layout property — the proof:no-layout-animation floor). The beat rides the ONE
+       `--dock-expand-t` scalar, so it tracks the `DOCK_SPRING` clock with NO second
+       clock + NO re-added CSS transition (the morph already animates `--dock-morph-t`).
+       PRM: the `--dock-reveal-blur` knob is zeroed under reduce (the carve below). */
+    .glass-dock {
+        --dock-reveal-blur: 3px;
+        filter: blur(
+            calc(var(--dock-reveal-blur) * (1 - var(--dock-expand-t, 1)))
+        );
+    }
+
     /* The morphing root chrome — background / border-color interpolate between the
        collapsed and expanded endpoints on the ONE `--dock-expand-t` scalar. Scoped
        to the horizontal dock (`:not(.vertical)`) — the inline-axis aperture morph;
@@ -98,6 +129,43 @@
         );
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL chrome-interp un-gate (BB-1). The
+       bg/border interp is AXIS-INVARIANT (a color mix reads the scalar with no
+       axis), so the vertical dock interpolates its plate between the SAME
+       collapsed↔expanded endpoints on the SAME `--dock-expand-t` scalar the
+       horizontal block reads — the ONE `DOCK_SPRING` clock, no second clock, no
+       re-added CSS transition. This PARALLEL `.vertical` block (specificity 0,2,0,
+       source-order AFTER the shell.css static `.glass-dock.vertical` plate so it
+       wins at equal specificity) is the inverse-axis twin of the horizontal block
+       above — the box-size morph already rides `block-size` on `layers.css`'s
+       `--dock-morph-t`; this gives the plate chrome the matching directional blend
+       so the vertical collapse↔expand no longer SNAPS its bg/border discretely. At
+       the rest endpoints `--dock-expand-t` resolves to the class value (0 collapsed
+       / 1 expanded), so the resting look is exact — byte-equivalent to the shell.css
+       static plate it supersedes during the morph. */
+    .glass-dock.vertical {
+        background: color-mix(
+            in srgb,
+            color-mix(
+                in oklab,
+                var(--glass-bg-dock, var(--glass-bg-wash)),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
+                calc(var(--dock-expand-t, 1) * 100%),
+            color-mix(
+                in oklab,
+                var(--glass-bg-wash),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--glass-border-dock, var(--glass-border-wash))
+                calc(var(--dock-expand-t, 1) * 100%),
+            var(--glass-border-floating)
+        );
+    }
+
     /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
        wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
        its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
@@ -142,6 +210,35 @@
         );
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL padding interp is the AXIS-INVERSE
+       of the horizontal layout-isolation contract above. The vertical collapse↔
+       expand is a BLOCK-HEIGHT aperture (the box-size arm morphs `block-size`,
+       layers.css), so the CROSS (inline) axis MUST be invariant across the morph —
+       else the dock's outer WIDTH changes on collapse and reflows its horizontal
+       siblings (the §1 contract, mirrored onto the vertical axis). So `padding-
+       inline` is PINNED at the expanded inline value in BOTH states, and ONLY
+       `padding-block` morphs to tighten the collapsed pill on the morph axis. The
+       collapsed block-pad endpoint is the EXPANDED inline pad (max'd with the
+       consumer `--dock-collapsed-padding` handle) so the height-pinned-cross collapsed
+       pill is SYMMETRIC. Specificity 0,2,0 source-order after shell.css's static
+       `.glass-dock.vertical` padding so this wins at equal specificity; at the rest
+       endpoints `--dock-expand-t` is the class value so the look is exact. Scoped to
+       the NON-scroll/non-wrap vertical dock. */
+    .glass-dock.vertical:not(.dock-overflow-wrap) {
+        --dock-pad-collapsed: max(
+            var(--dock-padding-inline, 0.5rem),
+            var(--dock-collapsed-padding, 0px)
+        );
+        /* inline padding is INVARIANT — the cross axis, pinned both states so the
+           outer inline-size never changes → 0px horizontal sibling reflow. */
+        padding-inline: var(--dock-padding-inline, 0.5rem);
+        padding-block: calc(
+            var(--dock-pad-collapsed) +
+                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
     /* AX.W01 — the collapsed padding / background / border-color are RETIRED here
        (the `--dock-expand-t` morph block above is the single authority for those
        three axes — they interpolate, never snap). `.collapsed` keeps only its
@@ -330,7 +427,15 @@
        ink, which clears ~10:1). */
     :where(.glass-dock) {
         --glass-tint-source: var(--glass-tint-ink);
-        --glass-tint-strength: var(--glass-tint-strength-aa);
+        /* BC.W-AUDIT — the scope-7 completion: the dock JOINS the content-tier
+           sub-perceptual FLOOR by default (translucent warm liquid glass, NOT a grey
+           slab), and the FULL AA darken engages ONLY under the genuine bright signal —
+           the `@container --glass-backdrop: light` bucket below, written by the dock's
+           own sampled-luminance observer over a bright backdrop (aurora/DockStage) OR a
+           consumer's explicit bucket. The prior unconditional AA (20% ink-ward) darkened
+           the dock to grey over EVERY calm light page — the iOS-27 dynamic model done
+           wrong (darken-always vs darken-when-bright). The full glass rebuild is BC. */
+        --glass-tint-strength: var(--glass-tint-strength-floor);
         --dock-fg-on-aurora: var(--glass-tint-ink);
         --muted-foreground: var(--foreground);
     }
@@ -372,3 +477,15 @@
         }
     }
 }
+
+/* BB.W-LIQUID-REVEAL — the dock-expand bloom beat's blur-settle is OFF under
+   `prefers-reduced-motion: reduce` (the vestibular floor). The morph itself snaps
+   instantly under PRM (the `DOCK_SPRING` `respectReducedMotion` in
+   dockMorphContext.ts), and zeroing `--dock-reveal-blur` here removes the resting
+   collapsed-pill decongest blur too — a reduced-motion dock reads crisp at every
+   state, no in-between blur frames. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-dock {
+        --dock-reveal-blur: 0px;
+    }
+}

package/dist/styles/dock/overflow.css

@@ -33,6 +33,15 @@
     .glass-dock.dock-scroll-x .dock-layer--full {
         min-width: 0;
         overflow-x: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (block) axis explicitly
+           `visible`. A single-axis `overflow-x: auto` makes the OTHER axis compute
+           from `visible` to `auto` (the MDN single-axis-clip-degrades caveat), so
+           the 40px-tall block axis would clip the 1.1× hover / full active control
+           circle top+bottom — the lozenge. Pinning `overflow-y: visible` keeps the
+           block axis genuinely un-clipped so a control's inset plate paints past the
+           track; the inline scroll port (the real over-cap content axis) is
+           untouched. */
+        overflow-y: visible;
         scrollbar-width: none;
         /* Trap the inline-scroll momentum at the dock's own boundary so a
            wheel/trackpad gesture that bottoms out the pill does NOT chain into
@@ -52,6 +61,12 @@
        source order. */
     .glass-dock.vertical.dock-scroll-y {
         overflow-y: auto;
+        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (inline) axis explicitly
+           `visible` (the vertical-dock twin of the horizontal pin above). A
+           single-axis `overflow-y: auto` would compute the inline axis from
+           `visible` to `auto`, clipping a vertical control's inset plate left+right.
+           The block scroll port (the real over-cap axis) is untouched. */
+        overflow-x: visible;
         scrollbar-width: none;
         /* Same momentum-trap as the inline port — a rail that bottoms out must
            not chain its remaining wheel delta into the page scroller behind it. */
@@ -231,8 +246,22 @@
                --dock-collapsed-padding / --dock-layer-tab-size paint at the global 1.5×
                while the density box paints at 1.17× — a desync the R5-2 register would
                introduce). The formulas are IDENTICAL to their :root definitions; only
-               the resolution element moves so the lifted --dock-scale flows in. */
-            --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+               the resolution element moves so the lifted --dock-scale flows in.
+               BB.W-PERF-PRODUCER A′-6 — --dock-icon-glyph is now a RATIO of the
+               density-painted --dock-layer-height (offsets-sizing.css + the density.css
+               [data-density] re-resolve). This coarse block @imports AFTER density.css
+               in the SAME @layer at the SAME specificity, so its --dock-icon-glyph
+               source-order-WINS on coarse pointers — it MUST carry the density-aware
+               formula too (the flat `1.25rem * --dock-scale` here would re-freeze the
+               glyph at the flat rem on touch, re-introducing the D5-1 defect the wave
+               fixes). --dock-layer-height re-resolves transitively at the lifted
+               --dock-scale (re-declared above), so the glyph tracks both the density
+               box AND the coarse register. Formula identical to the :root + density
+               re-resolve; only the resolution element moves. */
+            --dock-icon-glyph: max(
+                calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+                var(--dock-icon-glyph-floor)
+            );
             --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
             --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
             /* --dock-collapsed-summary-min-size derives from --dock-layer-height (the