@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/dock/overflow.css

@@ -0,0 +1,201 @@
+/* dock/overflow.css — the OVER-cap overflow strategies (AX.W06 carve).
+ *
+ * Carved from the dock.css god-module (slice 25). This partial owns the
+ * `overflow=` axis: the `overflow="scroll"` inline/block scroll ports
+ * (`.dock-scroll-x` / `.dock-scroll-y`, hidden scrollbar, momentum-trapped), the
+ * W04 CONTENT-DRIVEN `overflow="wrap"` intrinsic-flex recipe (the
+ * `.dock-overflow-wrap` pill↔card radius + floating-tier elevation morph on the
+ * ONE `--dock-expand-t` scalar — RELOCATED verbatim, never re-authored), and the
+ * W45 D15 single coarse-pointer `--dock-scale` multiplier.
+ *
+ * @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). */
+
+@layer components {
+    /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
+       The default contract grows-to-fit then overflows visibly past the
+       axis cap. `overflow="scroll"` instead makes the dock the scroll port
+       on its layout axis, pairing the existing cap with a hidden-scrollbar
+       scroll region so over-cap content stays reachable. The rounded pill
+       masks the scroll edge; both axes keep their cap. */
+
+    /* Inline axis (horizontal docks). The active layer becomes the scroll
+       port: `min-width: 0` releases the flex item's `min-content` floor so
+       it can shrink under the clamped `.dock-layers` track, then `overflow-x:
+       auto` scrolls its over-cap content. `.dock-layers` must KEEP clipping
+       so the pill's rounded edge masks the scroll boundary — hence the
+       grow-mode `overflow-x: visible` (`.dock-layers`, above) is overridden
+       back to `hidden` here. */
+    .glass-dock.dock-scroll-x.expanded:not(.dock-overflow-wrap) > .dock-layers {
+        overflow-x: hidden;
+    }
+
+    .glass-dock.dock-scroll-x .dock-layer--full {
+        min-width: 0;
+        overflow-x: auto;
+        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
+           scrolling the page behind it (the dock is a self-contained scroll
+           port, not a window into the route scroller). */
+        overscroll-behavior-x: contain;
+    }
+
+    .glass-dock.dock-scroll-x .dock-layer--full::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Block axis (vertical rails). The root keeps its `max-block-size` cap
+       and scrolls its over-cap children — cap + scroll is the correct
+       pairing the grow-mode contract split apart. Ties the
+       `.vertical.always-expanded` visible default on specificity and wins on
+       source order. */
+    .glass-dock.vertical.dock-scroll-y {
+        overflow-y: auto;
+        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. */
+        overscroll-behavior-y: contain;
+    }
+
+    .glass-dock.vertical.dock-scroll-y::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* ── `overflow="wrap"` recipe — CONTENT-DRIVEN intrinsic flex reflow ──
+       (AX.W04 F0). Parallel to the `.dock-scroll-{x,y}` hooks the
+       `overflow="scroll"` member emits, `overflow="wrap"` emits this class.
+       (HORIZONTAL-ONLY — GlassDock.vue guards the emit on
+       `orientation !== 'vertical'`; a vertical rail grows-to-fit + clamps via
+       `--dock-max-block-size`, its own overflow story.)
+
+       The reflow is INTRINSIC: `flex-wrap: wrap` is ALWAYS-ON (no viewport MQ),
+       and the dock shrink-wraps to content with `max-inline-size` capping it at
+       the canonical `--dock-max-inline-size` token (the SAME cap every
+       overflow strategy reads — `min(80vw, 64rem)` default, consumer-overridable
+       per-instance). So the layer wraps to N rows EXACTLY when its intrinsic row
+       exceeds the cap — at ANY viewport width — and collapses to one row when it
+       fits. The magic-640 `@media` snap-back + the `--dock-overflow-bp` token are
+       DELETED (the inherited mobile-responsive debt, origin 078dd79). */
+    .glass-dock.dock-overflow-wrap {
+        white-space: normal;
+        /* The content-driven cap. The dock ALREADY shrink-wraps to its content's
+           intrinsic width (the base `.glass-dock` rule), so `max-inline-size` caps
+           that intrinsic width at `--dock-max-inline-size`: under the cap the
+           shrink-wrap wins → one row; over the cap the dock holds at the cap and the
+           inner `flex-wrap: wrap` row reflows to N rows. ONE token, no breakpoint.
+           (The `min(max-content, …)` form is INVALID CSS — the math functions reject
+           the `max-content` intrinsic keyword, computing the property to its initial
+           `none` and silently dropping the cap; intrinsic-shrink + this plain cap IS
+           the valid `min(max-content, cap)`.) */
+        max-inline-size: var(--dock-max-inline-size);
+        padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem))
+            var(--dock-wrap-padding-inline, 0.625rem);
+
+        /* F4 — the pill↔card radius morph. A wrap dock is a FINITE multi-row CARD
+           surface when expanded and a stadium PILL when collapsed — the SAME
+           pill↔card morph the big-dock `shape-card` path rides. The corner glides
+           on the `--dock-expand-t` W01 single-scalar: `--radius-pill` at expand-t 0
+           (collapsed), `--dock-card-radius` at expand-t 1 (expanded — UNIFIED on
+           the SAME finite-radius token the big-dock card uses; the bare 16px
+           `--radius-2xl` literal is DELETED). ONE register, no discrete snap. */
+        border-radius: calc(
+            var(--radius-pill) +
+                (var(--dock-card-radius) - var(--radius-pill)) *
+                var(--dock-expand-t, 1)
+        );
+
+        /* F1 — the card-tier elevation morph ("material thickens as glass flexes
+           larger", WWDC25 §219). The wrap dock lifts from the flat thin-pill
+           `--shadow-dock` glow onto the FLOATING-tier stack (the `--shadow-dock-wrap`
+           token names the canonical composite on `:root`; a consumer retints the
+           whole card shadow by overriding THAT one token per the cartoon-shadow
+           contract). The three floating layers — drop / material-rim / under-cast —
+           fade in driven by the SAME `--dock-expand-t` scalar the radius glides on:
+           `--dock-wrap-elev` is the scalar as a 0→1 percent, so each layer's alpha
+           tracks the corner morph in LOCKSTEP (ONE clock, ONE register). At
+           expand-t 0 (collapsed/pill) the floating layers are 0%-alpha (invisible)
+           → only the base `--shadow-dock` glow shows; at expand-t 1 (expanded/card)
+           the full floating stack grounds the multi-row silhouette. The per-layer
+           recipe mirrors `--shadow-dock-wrap` (= `--shadow-xl` + `--glass-material-rim`
+           + `--glass-under-shadow-vivid`) so the token stays the source-of-record. */
+        --dock-wrap-elev: calc(var(--dock-expand-t, 1) * 100%);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--shadow-dock-override, var(--shadow-dock)),
+            0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent),
+            0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent),
+            0 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent);
+    }
+
+    .glass-dock.dock-overflow-wrap .dock-layer--full {
+        flex-wrap: wrap;
+        justify-content: center;
+        height: auto;
+        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
+        gap: var(--dock-wrap-row-gap, 0.25rem)
+            var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem));
+        /* AX.W04 — NO `transition: min-height` JS-morph (the AW.W3b spring-keyed
+           min-height detector is RETIRED — the false `proof:dock-layering-polish`
+           wrap-reflow claim is STRUCK). The reflow is intrinsic flex: rows
+           appear/vanish on the cap crossing with no second clock. The radius +
+           shadow lift ride the `--dock-expand-t` scalar (the W01 single clock),
+           NOT a CSS transition on the retired `--dock-motion-resize` list. */
+    }
+
+    .glass-dock.dock-overflow-wrap .dock-layer--summary {
+        height: auto;
+        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
+    }
+
+    .glass-dock.dock-overflow-wrap .dock-separator {
+        display: none;
+    }
+
+    /* Collapsed, a wrap dock is the single-row summary PILL. `white-space: nowrap`
+       keeps the summary on one line; the inline cap stays `max-inline-size:
+       var(--dock-max-inline-size)` (inherited from the `.dock-overflow-wrap` rule
+       above) so the collapsed box still shrink-wraps to the small summary's
+       max-content (NOT the full cap). The
+       radius morph resolves to `--radius-pill` at collapsed (--dock-expand-t 0) and
+       the box-shadow to the flat `--shadow-dock` glow (--dock-wrap-elev 0%). */
+    .glass-dock.dock-overflow-wrap.collapsed {
+        white-space: nowrap;
+    }
+
+    /* AX.W45 D15 / AX.W51 D18 RECONCILE — the coarse-pointer dock growth now rides
+       the GLOBAL `--ui-scale` comfort axis, NOT a parallel dock-only 1.5×. The
+       library-wide `@media (pointer: coarse) { :root { --ui-scale:
+       var(--ui-coarse-scale, 1.5) } }` block (tokens.css) lifts the master scalar,
+       and `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1))` (its
+       re-homed definition) inherits it FOR FREE — so the dock grows ~1.5× on touch
+       WITH the buttons/inputs/badges (ONE consistent touch scale; at HEAD the dock
+       grew but the rest of the library did not — the three-scale split this resolves).
+       The whole density cascade (box + padding + gap + tab + tile-min + glyph) scales
+       in LOCKSTEP through its existing `calc(<base> * --dock-scale)` chain, zero edit.
+
+       This block keeps ONLY the dock-LOCAL extras the global axis cannot supply:
+         • `--dock-local-scale: var(--dock-mobile-scale, 1)` — the dock-local EXTRA
+           multiplier (default 1 → no extra; the dock matches the global comfort by
+           default). A consumer who wants the dock LARGER than the library on touch
+           sets `--dock-mobile-scale` and it STACKS on top of the global coarse default
+           (NOT a parallel hardcoded 1.5 — the no-double-scale reconcile).
+         • the 44px touch floor: `--dock-control-floor` + `--size-icon-btn` lift to
+           `--dock-touch-target` so the `max(…, floor)` clamp in the scaled control-size
+           guarantees ≥ 44px regardless of the scalar (a sub-1 scale cannot drop the
+           target). `--size-icon-btn` keeps its floor for STANDALONE icon-button
+           surfaces (a routed gear, no dock ancestor) that read it directly.
+       Fine pointer byte-identical (`--ui-scale` stays 1).
+
+       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare `.glass-dock`:
+       the always-present density setter (0,2,0) would shadow a bare (0,1,0) rule. The
+       presence-selector (0,2,0) wins by source order, lifting `--dock-local-scale` +
+       the floor so the cascade re-resolves at touch scale. */
+    @media (pointer: coarse) {
+        .glass-dock[data-density] {
+            --dock-local-scale: var(--dock-mobile-scale, 1);
+            --dock-control-floor: var(--dock-touch-target, 2.75rem);
+            --size-icon-btn: var(--dock-touch-target, 2.75rem);
+        }
+    }
+}

package/src/styles/dock/shell.css

@@ -0,0 +1,457 @@
+/* dock/shell.css — the `.glass-dock` structural skeleton (AX.W06 carve).
+ *
+ * Carved from the dock.css god-module (slice 25). This partial owns the dock's
+ * STATIC structural surface: the `.glass-dock` root + the W02 single-axis
+ * `overflow: clip` morph aperture, the paper-grain `::after`, the vertical-root
+ * column layout, the shape/variant plates (rail · instrument-strip · the
+ * horizontal shape-rounded/card + the W56 squircle), the position helpers, and
+ * the W45 `#persistent` / vertical three-region body. The dynamic single-scalar
+ * morph chrome lives in dock/morph.css; the density × `--dock-scale` cascade in
+ * dock/density.css; the layer crossfade/hit-test in dock/layers.css.
+ *
+ * @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). */
+
+@layer components {
+    .glass-dock {
+        --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
+        /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
+           live as semantic tokens (defaults in `tokens.css`). When
+           content exceeds the cap, the appropriate axis container
+           scrolls with a mask-fade. Consumers override per-instance by
+           setting `--dock-max-block-size` / `--dock-max-inline-size`
+           on a `.glass-dock` directly. */
+        --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
+        --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
+           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
+           is the px the child rises from as it fades in. Consumers retune the
+           cascade feel per instance.
+
+           AX.W02 — `--dock-stagger-step` is the per-child onset BEAT: each
+           successive control's reveal starts this fraction-of-morph later than the
+           one before it, so the row fills outer→in. ONE token × the child index
+           replaces the hand-typed 0.08/0.16/0.24/0.32/0.4 onset ladder — the onset
+           is `step × (childIndex − 1)`, capped (the cap below). 0.08 = ~5% of the
+           ~0.32s morph between items — inside Emil Kowalski's 30–60ms stagger band,
+           never the >100ms "slideshow" register. The onset rides the NORMALIZED
+           morph progress (`--dock-expand-t`), NOT a wall-clock timer, so a fast
+           flick and a slow hover-open both choreograph correctly and an interrupted
+           morph orphans no timers.
+
+           AX.W45 DK1/DK7 — the window NARROWED 0.55 → 0.4. The per-child onset caps
+           at `step × 5 = 0.40` (child 6+), so the LAST detail child used to finish at
+           `0.40 + 0.55 = 0.95` of the morph — it barely appeared until 95% through
+           (the "shrunken icon does not appear for a while" tail). Tightening the
+           window to 0.4 lands the last child at `0.40 + 0.4 = 0.80` (the iOS front-
+           loaded register: stagger the EXPANDING detail, never the persistent/summary
+           glyph). The step (0.08, Kowalski's band) is KEPT — it is the window, not the
+           beat, that was too wide. The summary/persistent glyph is front-loaded
+           structurally (onset 0, scalar-keyed below). */
+        --dock-stagger-window-size: 0.4;
+        --dock-stagger-rise: 4px;
+        --dock-stagger-step: 0.08;
+        /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
+           radius (default --radius-dock-card = --radius-3xl, density-scaled
+           below); `--dock-tile-min` is the grid tile minimum (auto-fill track
+           floor). Both are density-scaled (compact tighter, spacious looser) — the
+           card radius + tile size ride the density cascade, never magic numbers. */
+        --dock-card-radius: var(--radius-dock-card);
+        --dock-tile-min: 4.5rem;
+        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
+           mints the stacking context once so a portaled popover over `--z-dock`
+           stays above the dock during a hover scale (the load-bearing
+           stacking-context guarantee). Covers every dock scale site. */
+        scale: 1;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        /* AW.W1 — the dock does NOT establish a default inline-size container.
+           `container-type: inline-size` applies `contain: inline-size`, which
+           makes an element's inline size INDEPENDENT of its contents — fatally
+           incompatible with a shrink-to-fit pill: under it `.glass-dock` cannot
+           size to its content and collapses to its padding floor (~19px) with the
+           active layer overflowing (the 3.3.0 regression — every horizontal dock,
+           collapsed AND always-expanded, rendered as a sliver). The `dock`-named
+           container is now OPT-IN via the `containerName` prop: a consumer
+           embedding the dock in a width-CONSTRAINED host (a 320px sidebar) sets
+           `containerName="dock"` to get the descendant container-query reads (the
+           audacious-label compression below), trading shrink-to-fit for the
+           host-constrained width it already has there. The default free-floating
+           dock shrink-wraps to its content (AV.W16 TW3 made this a default and
+           silently broke dock sizing for the common case). */
+        border-radius: var(--radius-dock);
+        white-space: nowrap;
+        max-inline-size: var(--dock-max-inline-size);
+        padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem);
+        /* AX.W55 — the dock SHELL composes the oklab tint at the ELEMENT (not via the
+           pre-substituted `--glass-bg-dock` token, which resolves its tint at the
+           `:root` 0% strength before the @container bucket can re-point it — the
+           substitution-vs-inheritance trap). Wrapping here lets the bright-bucket
+           block below (which re-points --glass-tint-source/-strength on `.glass-dock`)
+           reach the shell: the inner `--glass-bg-dock` mix is a 0% no-op at rest, the
+           outer element mix does the adaptive darken. Zero-delta at the `0%` default
+           (both mixes resolve to the flat dock bg = byte-identical to today). */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-dock, var(--glass-bg-resting)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        backdrop-filter: var(--dock-surface-blur);
+        border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
+        /* AV.W15 M3 — the full-perimeter `--glass-edge-light` rim rides as the
+           leading inset layer of the dock shadow stack (the navigation-band
+           silhouette catch-light, distinct from the top-only highlight). */
+        box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock));
+    }
+
+    /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
+       Migrated from `overflow: hidden` to a SINGLE-AXIS `overflow: clip` on the
+       MORPH axis (horizontal clips X / visible Y; vertical clips Y / visible X),
+       gated on a `data-morphing` attribute the driver owns (set at gesture START,
+       cleared on SETTLE). The clip PERSISTS through the morph — content is laid
+       out ONCE at its natural size behind the aperture and the growing/shrinking
+       box uncovers it, never spills it — and lifts to `visible` only at REST
+       expanded (so grown content + the focus ring paint past the box). The
+       prior `.expanded { overflow: visible }` (bound synchronously to
+       `visualExpanded`) lifted the clip at frame 0, leaving no aperture to reveal
+       through; the `:not([data-morphing])` guard holds the clip for the whole
+       gesture and lifts it on the final paint.
+
+       `overflow: clip` is PAINT-ONLY (not a scroll container): it never
+       participates in `scrollIntoView`/scroll-anchoring, cannot be a
+       scroll-driven-animation `scroller`, and drops the `min-width:0` scroll-box
+       dance for the non-scroll shell. The cross axis is ALWAYS explicitly
+       `visible` (the MDN single-axis-clip-degrades-to-hidden caveat). The
+       legitimate scroll ports (`.dock-scroll-{x,y}`, `overflow: auto`) STAY
+       `auto` — they are NOT migrated. AT.W7-dock-a's orthogonality holds: the
+       `containerName` opt-in does not touch the clip. */
+    .glass-dock:not(.vertical) {
+        overflow-x: clip;
+        overflow-y: visible;
+    }
+
+    .glass-dock.vertical {
+        overflow-x: visible;
+        overflow-y: clip;
+    }
+
+    /* DURING a morph the clip is the aperture — keyed off `data-morphing`, NOT
+       off `.expanded`, so it survives the whole gesture and the box reveals its
+       content rather than letting it spill. */
+    .glass-dock[data-morphing]:not(.vertical) {
+        overflow-x: clip;
+        overflow-y: visible;
+    }
+
+    .glass-dock[data-morphing].vertical {
+        overflow-x: visible;
+        overflow-y: clip;
+    }
+
+    /* AT REST EXPANDED — lift the morph-axis clip (grown content + focus ring
+       paint past the box). Fires ONLY when NOT morphing; the [data-morphing]
+       rules above win during the gesture by being more specific + later. */
+    .glass-dock.expanded:not([data-morphing]),
+    .glass-dock.always-expanded:not([data-morphing]) {
+        overflow: visible;
+    }
+
+    /* AX.W04 F6 — the vertical-dock max-block-size + internal-scroll CONTRACT.
+       A vertical rail caps at `--dock-max-block-size` (the `.vertical` rule), but
+       at rest the `overflow: visible` above let over-cap content SPILL — forcing a
+       consumer (bbnf-buddy ToolsLayer) to hand-anchor a max-height + scroll. Ship
+       the contract here: at rest a vertical column scrolls its OWN block axis when
+       content exceeds the cap (cross axis stays `visible` for focus rings + grown
+       popovers). When content fits under the cap (`height:auto` < cap) nothing
+       scrolls — the scroll port only engages on real over-cap content. The
+       block-axis morph clip stays `data-morphing`-gated above; this is the
+       AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
+       anchor the column to the viewport without re-deriving the scroll plumbing. */
+    .glass-dock.vertical.always-expanded:not([data-morphing]),
+    .glass-dock.vertical.expanded:not([data-morphing]) {
+        overflow-x: visible;
+        overflow-y: auto;
+        scrollbar-width: none;
+        overscroll-behavior-y: contain;
+    }
+
+    .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar,
+    .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar {
+        display: none;
+    }
+
+    .glass-dock::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        opacity: var(--glass-grain-opacity);
+        pointer-events: none;
+        mix-blend-mode: overlay;
+    }
+
+    .dark .glass-dock::after {
+        mix-blend-mode: soft-light;
+    }
+
+    /* Vertical rails grow-to-fit then clamp at `--dock-max-block-size` (the
+       AX.W04 F6 contract). At rest a capped column scrolls its OWN block axis
+       internally (the `.vertical.always-expanded:not([data-morphing])` port above)
+       so a consumer setting `--dock-max-block-size` gets a viewport-anchored
+       scrollable tool palette without hand-anchoring it. `overflow="wrap"` is
+       horizontal-only (the class is not emitted for a vertical orientation); a
+       vertical column's natural overflow story is this cap + internal scroll. No
+       edge-fade mask — the scroll is scrollbar-hidden, not feathered. */
+    .glass-dock.vertical {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: flex-start;
+        /* AX.W45 D13-b — H/V PROPORTION PARITY. The hardcoded `gap: 0.25rem` + the
+           density-blind `--dock-vertical-padding` override are DELETED. The vertical
+           dock now reads the SAME `--dock-layer-gap` / `--dock-padding-*` density
+           cascade the horizontal dock tunes, so `density="spacious"` paints a LARGER
+           gap than `compact` on BOTH axes (the density axis was dead on the vertical
+           dock). ONE token ladder, both orientations; the `--dock-scale` multiplier
+           threads it for free (the cascade is `calc(* --dock-scale)`-keyed). */
+        gap: var(--dock-layer-gap, 0.375rem);
+        white-space: normal;
+        width: auto;
+        height: auto;
+        max-block-size: var(--dock-max-block-size);
+        /* overflow on the block (morph) axis is the data-morphing-gated clip
+           shell above; the cross axis stays visible there. */
+        padding: var(--dock-padding-block, 0.375rem);
+        border-radius: var(--radius-dock);
+        /* AX.W01 — a vertical rail is ALWAYS-EXPANDED (no collapse↔expand morph),
+           so its root padding/background/border-color never morph; the prior
+           `padding/background/border-color var(--dock-motion-*)` transition arms
+           are DELETED (a residual root CSS-transition on the morph-chrome props is
+           the second-clock smell the single-scalar rebuild retires). The block-axis
+           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
+           via the `--dock-morph-t` scalar (the size `calc()` above), never a CSS
+           transition here. KEPT: the DECORATIVE hover-scale + press-squish (the
+           individual `scale`/`transform`) and the box-shadow fade — these are
+           interaction polish on the static rail, NOT the morph. */
+        transition:
+            box-shadow var(--dock-motion-standard),
+            transform var(--dock-motion-resize),
+            scale var(--dock-motion-resize);
+    }
+
+    .glass-dock.variant-rail {
+        padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem));
+        background: var(--glass-bg-dock, var(--glass-bg-wash));
+        border-color: var(--glass-border-dock, var(--glass-border-wash));
+    }
+
+    .glass-dock.variant-rail.shape-pill {
+        border-radius: var(--radius-pill);
+    }
+
+    .glass-dock.variant-rail.shape-rounded {
+        border-radius: var(--radius-xl);
+    }
+
+    /* AW.W3b — horizontal-root shape rules. The `shape-*` class previously bound
+       ONLY under `.variant-rail`; on a horizontal `variant-dock` the prop silently
+       no-op'd (the root hardwired `--radius-dock` = `--radius-pill`). These rules
+       close that documented-but-dead prop — `shape="rounded"` / `shape="card"` now
+       paint on a horizontal dock. Scoped to `variant-dock:not(.vertical)` so the
+       rail + instrument-strip variants (which own their own radius) are untouched. */
+    .glass-dock.variant-dock:not(.vertical).shape-rounded {
+        border-radius: var(--radius-xl);
+    }
+
+    /* The big-dock CARD shell — a FINITE concentric radius above 2xl, below pill.
+       It does NOT collapse to a stadium. Collapsed it returns to a pill (the morph
+       target); the pill↔card radius now MORPHS on the SAME `--dock-expand-t` scalar
+       the box + chrome ride (ONE clock, no discrete snap) — `--radius-pill` at
+       expand-t 0 (collapsed), `--dock-card-radius` at expand-t 1 (expanded). The
+       prior two discrete `.shape-card` / `.shape-card.collapsed` rules + their
+       reliance on the deleted `border-radius var(--dock-motion-resize)` transition
+       are RETIRED for this single interpolation. */
+    .glass-dock.variant-dock:not(.vertical).shape-card {
+        border-radius: calc(
+            var(--radius-pill) +
+                (var(--dock-card-radius) - var(--radius-pill)) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
+    /* AX.W56 — the big-dock IS the one squircle surface (the rounded-vs-squircle
+       policy: cards/pills/panels stay round, big-docks + the like → superellipse).
+       The squircle reads markedly better at the large `--radius-dock-card` (24px)
+       shell — an `@supports`-gated ENHANCEMENT only (Chrome 139+, no FF/Safari 2026).
+       The `border-radius` arc is the cross-engine CONTRACT; the squircle is the
+       better tier (NOT a degraded fallback). The shape is now the tokenized
+       `var(--corner-shape-bigdock)` (theme.css) so it is as overridable as the
+       radius — a consumer retints the corner shape from `:root`, and W42's
+       dock-morph reads the same `--corner-k-*` vocabulary. The `@supports`
+       condition tests the LITERAL `superellipse(2)` (a `var()` is not evaluable in
+       an `@supports` query) — the same Chrome-139 feature the token resolves to. */
+    @supports (corner-shape: superellipse(2)) {
+        .glass-dock.variant-dock:not(.vertical).shape-card {
+            corner-shape: var(--corner-shape-bigdock);
+        }
+    }
+
+    /* AJ-W1-δ — `instrument-strip` variant (per G-AJ-D7 Path 1).
+     *
+     * The speedtest survey cockpit's vertical rail needs chassis-strip
+     * aesthetics, not the dock-rail's stadium-pill chrome. Adopts the
+     * surface vocabulary of the `<InstrumentChassis>` family so the
+     * strip reads as a journey-station slot — the same surface the
+     * speedtest + complete + thankyou stations ride.
+     *
+     * The variant intentionally inherits the rail variant's vertical
+     * layout (orientation: vertical; flex-direction: column) — the
+     * orientation + fitContent computeds in GlassDock.vue branch on
+     * `variant === "instrument-strip"` alongside the existing rail
+     * branch. Only the surface vocabulary changes vs the rail:
+     *   - Border-radius drops from `--radius-pill` to `--radius-card`
+     *     (matches `<InstrumentChassis> { border-radius: var(--radius-card) }`).
+     *   - Background plate routes through `--glass-bg-chassis` (0.28α
+     *     per tokens.css §V) instead of `--glass-bg-wash`.
+     *   - Border routes through `--glass-border-quiet` to match the
+     *     chassis primitive's at-rest stroke.
+     *   - Box-shadow routes through `--glass-shadow-quiet` plus the
+     *     inset-bottom hairline matching the chassis primitive
+     *     (instrument-chassis.css:42-45).
+     *
+     * The `.shape-pill` / `.shape-rounded` class hooks are still emitted
+     * by the template but no rule binds them under
+     * `.variant-instrument-strip` — chassis-strip carries ONE canonical
+     * border-radius (`--radius-card`), per the chassis family. */
+    .glass-dock.variant-instrument-strip {
+        padding: var(
+            --dock-instrument-strip-padding,
+            var(--dock-padding-inline, 0.75rem)
+        );
+        /* AX.W55 — the chassis-strip threads the SAME oklab tint wrapper the five
+           rungs + the dock shell (--glass-bg-dock) carry, so the adaptive darken
+           reaches it. Zero-delta at the `0%` rest default (the mix is 0% toward the
+           source = byte-identical to the flat `var(--glass-bg-chassis)`); it only
+           activates under the bright bucket below. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-chassis, var(--glass-bg-wash)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        border: 1px solid var(--glass-border-quiet, var(--glass-border-resting));
+        border-radius: var(--radius-card);
+        box-shadow:
+            var(--glass-shadow-quiet, var(--shadow-dock)),
+            inset 0 -0.5px 0 0 rgb(0 0 0 / 0.06);
+    }
+
+    /* Engraved-bezel inner stroke — matches `<InstrumentChassis>::before`
+     * (instrument-chassis.css:85-93). The chassis-strip silhouette without
+     * this stroke reads as a flat plate; with it the strip reads as the
+     * polished sleeve of an instrument-panel module. The `::before`
+     * z-index sits above the chassis backdrop but below the slotted
+     * content (the MetricBadge stack), matching the chassis primitive's
+     * z-order. The host `.glass-dock` is already `position: relative`. */
+    .glass-dock.variant-instrument-strip::before {
+        content: "";
+        position: absolute;
+        inset: 0.5px;
+        border-radius: calc(var(--radius-card) - 0.5px);
+        border: 1px solid var(--surface-tint-4);
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .dark .glass-dock.variant-instrument-strip::before {
+        border-color: var(--surface-tint-6);
+    }
+
+    .glass-dock:where(.fixed) {
+        z-index: var(--z-dock);
+    }
+
+    .dock-inline {
+        margin: 0 auto;
+    }
+
+    .dock-sticky {
+        position: sticky;
+        top: 0;
+        z-index: var(--z-dock);
+        margin: 0 auto;
+    }
+
+    /* AX.W45 D13-a — the PERSISTENT region (the iOS Now-Playing / Stage-Manager
+       idiom done STRUCTURALLY). The `#persistent` slot lives in-flow as a root flex
+       SIBLING of the morph-region (`.dock-layers`) in BOTH collapsed AND expanded —
+       NEVER `:inert`, NEVER a crossfade pane, NEVER a `registerGroup` morph target.
+       It is a stable always-present rail beside the expand-on-demand content region,
+       so a consumer keeps a control visible while collapsed WITHOUT hand-duplicating
+       it into both the `#default` and `#collapsed` slots. The region co-laid by the
+       root flex/grid; the morph scalar `--dock-morph-t` co-drives only its chrome
+       (it inherits the root padding/radius morph), it is NOT a morph TARGET. It holds
+       steady (no jitter) while the morph-region's aperture animates on the ONE
+       spring. `align-items: center` keeps it on the dock's centerline; the
+       `--dock-layer-gap` separates it from the morph region (same rhythm both
+       orientations). */
+    .dock-persistent {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: var(--dock-layer-gap, 0.375rem);
+    }
+
+    .glass-dock:not(.vertical) .dock-persistent {
+        flex-direction: row;
+    }
+
+    .glass-dock.vertical .dock-persistent {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The persistent region + the morph region share the dock's gap rhythm. The
+       region renders only when the consumer authors a `#persistent` slot
+       (GlassDock.vue guards it with `v-if="$slots.persistent"`), so a dock with no
+       persistent controls is byte-identical to before (no empty flex item). */
+    .glass-dock:not(.vertical) .dock-persistent + .dock-layers {
+        margin-inline-start: var(--dock-layer-gap, 0.375rem);
+    }
+
+    .glass-dock.vertical .dock-persistent + .dock-layers {
+        margin-block-start: var(--dock-layer-gap, 0.375rem);
+    }
+
+    /* AX.W45-TUNE C7 — the VERTICAL three-region body. The vertical dock's default
+       slot is now wrapped in a structural `.dock-layers` column (parity with the
+       horizontal morph-region container) instead of a bare slot. A vertical dock is
+       always-expanded (no width morph), so this `.dock-layers` is NOT the grid-stacked
+       crossfade pair the horizontal `.dock-layers` is — it is a single column stack
+       carrying the dock's `--dock-layer-gap` rhythm so authored item groups +
+       `<DockSeparator>` rules read with the correct vertical cadence. The base
+       `.dock-layers { display: grid }` is re-pointed to a column flex here (the
+       vertical body is content-stacked, not pane-stacked). */
+    .glass-dock.vertical .dock-layer--vertical-body {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--dock-layer-gap, 0.375rem);
+        min-width: 0;
+    }
+
+    /* The OPTIONAL trailing `#collapsed` section (the vertical analogue of the
+       horizontal summary pane) — a persistent secondary group below a structural
+       `<DockSeparator>`, sharing the column's gap rhythm. Renders only when the
+       consumer authors a `#collapsed` slot (GlassDock.vue guards it), so a vertical
+       dock with no collapsed slot keeps the prior single-stack body. */
+    .glass-dock.vertical .dock-layer--vertical-section {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--dock-layer-gap, 0.375rem);
+    }
+}