@mkbabb/glass-ui 4.0.0 → 4.0.1

package/src/styles/border-progress.css

@@ -0,0 +1,109 @@
+/* BB.W-BORDER-PROGRESS — progress IS the element's border.
+ *
+ * The masked-conic ring consumption (the registration lives in
+ * tokens/property-regs.css §18, mirroring the specular split: the @property reg
+ * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
+ * into the border band so ONLY the band paints AND it FOLLOWS the host
+ * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
+ * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
+ * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
+ * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
+ * not an opaque overlay).
+ *
+ * Compositor-only: the sweep rides the registered `--border-progress-fill`
+ * <percentage>; no layout property animates (`proof:no-layout-animation`). The
+ * unregistered fallback is safe (the `initial-value` paints the resting ring; the
+ * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
+ * 16.4+, within the deployment floor). */
+
+.border-progress {
+    position: relative;
+    display: block;
+    border-radius: var(--border-progress-radius, 16px);
+    /* The host reserves the border band the ring paints into (allocation-free —
+       the content box is untouched, no reflow). */
+    padding: 0;
+}
+
+/* The ring layer — inset over the host, the border band the conic paints into.
+   The `border` width IS the band thickness; the conic is mask-composited so the
+   padding-box (interior) is EXCLUDED from the border-box (the radius-following
+   cut-out). */
+.border-progress__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--border-progress-width, 12px) solid transparent;
+    pointer-events: none;
+    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
+       from the top (12 o'clock) clockwise to the fill fraction; past it is
+       transparent so the resting band shows ONLY the filled spectrum. */
+    background:
+        conic-gradient(
+            from 0deg,
+            var(--border-progress-spectrum, var(--section-color-7)),
+            transparent var(--border-progress-fill, 0%),
+            transparent 100%
+        );
+    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
+       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
+       which follows `border-radius` exactly (a border-image cannot). */
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
+}
+
+/* THE COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
+   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
+   bottom edge only; it composes WITH the border-band cut-out above (the mask
+   stack intersects), so the bottom register reuses the exact conic + radius
+   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
+.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    -webkit-mask-composite: xor, source-in;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    mask-composite: exclude, intersect;
+}
+
+/* The content box — the host's own surface (a glass card, a chassis). It is
+   untouched by the ring (backdrop-intact); the ring sits over the border band
+   only. */
+.border-progress__content {
+    position: relative;
+    z-index: 1;
+    border-radius: inherit;
+    height: 100%;
+}
+
+/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
+   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
+   new value). Compositor-only (filter brightness, never a layout property). */
+@media (prefers-reduced-motion: no-preference) {
+    .border-progress[data-milestone] .border-progress__ring {
+        animation: border-progress-milestone-pulse
+            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
+    }
+}
+
+@keyframes border-progress-milestone-pulse {
+    0% {
+        filter: brightness(1);
+    }
+    40% {
+        filter: brightness(1.35);
+    }
+    100% {
+        filter: brightness(1);
+    }
+}

package/src/styles/cards.css

@@ -17,6 +17,82 @@
     :where(.dark) .paper-texture {
         background-blend-mode: screen;
     }
+
+    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC sibling of `.paper-texture`.
+       Paints the two-frequency `--paper-grid-texture` engineering-grid as a
+       card's INTERIOR ground, clipped to the plate's own `border-radius`
+       automatically (a host `background-image`), so the math/grid brand pillar
+       reads THROUGH a document-register card at the ambient `--paper-grid-
+       opacity` — not only in the page margin an opaque plate occludes. A
+       decoration-only register (NOT a tier): it composes ON TOP of any glass/
+       paper tier, exactly like `.paper-texture` / `cartoon-surface` /
+       `veil-surface`.
+
+       THE SEAM (the two-pseudo-budget reveal, recorded — the Triumvirate's
+       through-glass-read locate-the-seam, NOT a token-α loop): a glass tier
+       already claims BOTH pseudos — `::before` is the moving-specular catch-
+       light (glass/material.css) and `::after` is the grain overlay
+       (glass/ladder.css). A `.paper-grid::after` would CLOBBER the grain's
+       `background-image` on the SAME single pseudo — so the grid + grain could
+       not compose (the orthogonality the spec requires). The grid therefore
+       rides the HOST element's `background-image` longhand: the glass tier's
+       `background:` SHORTHAND sets the translucent fill `background-color`, and
+       a later `background-image` longhand COEXISTS with that color (the image
+       paints OVER the color, UNDER the content + UNDER both pseudos), so the
+       grid is the card's own underlay felt THROUGH the glass tint with ZERO
+       pseudo contention — grain (`::after`) + specular (`::before`) + grid
+       (host bg-image) all paint at once. The host bg-image is clipped by the
+       host `border-radius` by construction (no `border-radius: inherit` pseudo
+       needed). A STATIC raster — gradient-stack `background-image`, one
+       compositor-cached paint, no per-frame repaint (the W6 paint-path
+       discipline). The ambient strength lives in the line-ink alpha (the
+       `--paper-grid-opacity`-scaled `--foreground` mix, scale-paper.css) since
+       a host bg-image has no independent layer-opacity — so ONE knob
+       (`--paper-grid-opacity`) still tunes the through-card strength. */
+    .paper-grid {
+        background-image: var(--paper-grid-texture);
+        background-repeat: repeat;
+        background-size:
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            calc(var(--paper-grid-texture-size) * 4)
+                calc(var(--paper-grid-texture-size) * 4),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size),
+            var(--paper-grid-texture-size) var(--paper-grid-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    /* The scheme-aware dark arm — PLAIN-ancestor `.dark` (NOT a scoped
+       `:global()`; the recurring scoped-global-drop trap, recorded; this is a
+       library CSS partial, but the discipline holds). The line ink is
+       `--foreground`-derived, so the warm-cream foreground flips dark→light in
+       the `.dark` block and the grid ink auto-lifts off the near-black `--card`
+       interior with NO parallel `--paper-grid-*-dark` family — only the BLEND
+       flips (light `multiply` → dark `screen`, the legible-on-dark equivalent
+       the `.paper-texture` dark arm uses). */
+    :where(.dark) .paper-grid,
+    .dark .paper-grid {
+        background-blend-mode: screen;
+    }
+}
+
+/* ═══════════════════════════════════════════════
+   A11y — the geometric grid honors the SAME transparency idiom the organic
+   paper register establishes (paper.css). A reduced-transparency user gets a
+   clean card interior, no texture; the static grid needs no motion gate (the
+   PRM block guards a future drift only). One a11y idiom, not a grid-local fork.
+   ═══════════════════════════════════════════════ */
+@media (prefers-reduced-transparency: reduce) {
+    .paper-grid {
+        background-image: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .paper-grid {
+        /* Static raster at rest; guard a future `@property` transform drift. */
+        animation: none !important;
+    }
 }
 
 /* ── Cartoon surface decoration ───────────────────────────────────

package/src/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/src/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).
@@ -222,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/src/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%;
     }