@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/dock/layers.css

@@ -0,0 +1,355 @@
+/* dock/layers.css — the `.dock-layer` crossfade + hit-test + reveal-stagger
+ * contract (AX.W06 carve).
+ *
+ * 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
+ * `.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` /
+ * rail / stack live in dock/layer-group.css; the overflow strategies in
+ * dock/overflow.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 {
+    /* J.W3.A — outer collapsed↔expanded pair drives width via FLIP.
+       `useLayerTransition` measures the natural width before/after the
+       slot swap and animates `width` between fixed pixel values via
+       the `--dock-motion-resize` spring; this eliminates the
+       `width: auto` non-interpolation diagnosed in R1+R6. The two
+       layers stack on a CSS grid (1/1 area) and crossfade opacity
+       in step with the FLIP. Spatial motion (width) is automatically
+       suppressed by the global `prefers-reduced-motion` gate in
+       `utilities.css` (which strips width from transition-property).
+       Opacity transitions remain — the 0.1s shortened cadence in PRM
+       still reads as a snap.
+
+       J.W3.C — when the active layer's natural width exceeds
+       `--dock-max-inline-size`, the dock root clips and the layer
+       scrolls horizontally with a mask-fade. `min-width: 0` lets the
+       grid item shrink under the cap (default min-content is the
+       child's intrinsic width which would prevent the clamp). */
+    .dock-layers {
+        display: grid;
+        min-width: 0;
+    }
+
+
+    /* 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). */
+    .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)
+        );
+        inline-size: var(--dock-morph-size);
+    }
+
+    /* A vertical inner group morphs the BLOCK axis — the same span lands on
+       block-size, and the inline axis stays intrinsic. */
+    .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
+        inline-size: auto;
+        block-size: var(--dock-morph-size);
+    }
+
+    /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
+       stagger directional scalar is the per-swap progress directly: `--dock-morph-t`
+       reads onto an inheriting `--dock-expand-t` on the morphing stack so the new
+       pane's children cascade in as it reveals. The geometry scalar
+       (`--dock-morph-t`) stays registered + non-inheriting on the root; this is the
+       small-subtree inheriting alias the stagger reads (the inheritance-bomb guard
+       only concerns the `:root`-wide write, which never happens). */
+    .glass-dock[data-morphing] .dock-layer-stack {
+        --dock-expand-t: var(--dock-morph-t, 1);
+    }
+
+    /* Horizontal dock content grows visibly when the active layer's natural
+       width exceeds the content area (grow-to-fit; consumers needing wrap opt
+       into `overflow="wrap"`). No edge-fade mask — content never clips or scrolls,
+       so a feather has nothing to feather and only bleeds a stray ramp onto
+       the edge controls. */
+    .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers {
+        overflow-x: visible;
+    }
+
+    /* ── Layer crossfade + hit-test contract (ONE vocabulary) ──────────────
+       AX.W02 — the outer `.dock-layer` (GlassDock's built-in collapsed↔expanded
+       pair) and the inner `.dock-layer-item-host` (a DockLayer inside a
+       DockLayerGroup) now share ONE active-state vocabulary: `.is-active` /
+       `.is-leaving`. The prior `.layer-active` / `.is-active` / `.is-leaving`
+       TRIPLE collapsed to the pair — both surfaces drive crossfade + hit-test off
+       the same two state classes, and the morph orchestrator fold (one engine per
+       dock) means the box, both panes, and every child stagger ride one
+       `--dock-morph-t` clock. The greppable-sync tombstone that kept the two
+       never-merged vocabularies in lockstep is DELETED — there is nothing to keep
+       in sync once the vocabulary is one.
+
+       The 3-state active/inactive/leaving visibility contract here is LOAD-BEARING
+       (the a11y-006 anchor): the inactive layer leaves the hit-test tree
+       (`visibility:hidden`), the leaving layer stays painted-but-untouchable
+       through its fade (`visibility:visible` + `pointer-events:none`), and the
+       active layer shows IMMEDIATELY (`visibility 0s`, no fade-in delay). One
+       owner governs each concern — size = the spring scalar, opacity = the CSS
+       crossfade below, visibility = this 3-state fork.
+
+       An inactive layer must leave the paint AND hit-test tree: `opacity:0` alone
+       leaves the box answering `elementFromPoint()`, so an inactive layer's button
+       intercepts clicks meant for the active one. `visibility:hidden` removes it
+       from both while KEEPING it in layout flow, so the FLIP measurement still
+       reads its geometry (`display:none` would zero it). The delayed `visibility`
+       transition holds a leaving layer `visible` for the length of the opacity
+       crossfade, then flips it `hidden`.
+
+       AX.W45 DK7 — the crossfade is now on the ONE `--dock-morph-t` scalar (the
+       SAME clock the box size + child stagger ride), NOT a parallel fixed-duration
+       CSS transition. The prior `opacity var(--dock-motion-resize)` was a SECOND
+       clock: a velocity-dependent spring settles its meaningful travel in ~0.18s
+       while the 0.3s CSS transition lingered, so the leaving pane ghosted over the
+       settled box — the "laggy/delayed" layer-switch the user read. Driving the
+       leaving-pane opacity off `calc(1 - var(--dock-morph-t))` makes the fade a pure
+       FUNCTION of the same `t`: an interrupted/retargeted switch carries the
+       crossfade WITH it (no second timer to drift). Visibility is the ONLY surviving
+       CSS-timed leg — a 0s hold over `--duration-normal` keeps the leaving pane
+       paintable through the fade, then flips it hidden (the a11y-006 hit-test
+       anchor); the spring-settle clears the morph state so the hold releases in
+       lockstep. The base rule keeps NO opacity transition (the scalar IS the clock). */
+    .dock-layer,
+    .dock-layer-item-host {
+        transition: visibility 0s linear var(--duration-normal);
+    }
+
+    .dock-layer:not(.is-active):not(.is-leaving),
+    .dock-layer-item-host:not(.is-active):not(.is-leaving) {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
+    .dock-layer.is-active,
+    .dock-layer-item-host.is-active {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+        /* AW.W2 — the active pane is STATICALLY opacity:1, REVEALED by the clip
+           aperture (the box is the reveal mechanism), never faded. There is ZERO
+           opacity authority on the active pane — the aperture uncovers a layout
+           that is laid out ONCE at natural size behind it. Only `visibility 0s`
+           survives (the active layer must paint at once, no fade-in delay — the
+           AU.W2 governing rule). The leaving pane fades on the scalar below. */
+        transition: visibility 0s;
+    }
+
+    /* AX.W45 DK7 — the leaving pane fades on the ONE `--dock-morph-t` scalar (the
+       single clock the box rides), gated on `[data-morphing]`. At rest (no morph)
+       the leaving class is already gone, so the scalar-fade is only authored DURING
+       the morph. `opacity: calc(1 - var(--dock-morph-t))` runs 1→0 as the box
+       morphs, in perfect lockstep — no ghost, no flash, no second timer. The pane
+       stays painted (visibility:visible) + untouchable (pointer-events:none) through
+       the fade; the base-rule `visibility 0s linear var(--duration-normal)` hold
+       flips it hidden once the morph state clears on spring-settle. */
+    .dock-layer.is-leaving,
+    .dock-layer-item-host.is-leaving {
+        opacity: 0;
+        visibility: visible;
+        pointer-events: none;
+    }
+
+    .glass-dock[data-morphing] .dock-layer.is-leaving,
+    .glass-dock[data-morphing] .dock-layer-item-host.is-leaving {
+        opacity: calc(1 - var(--dock-morph-t));
+    }
+
+    /* AX.W45 — opacity now has ONE owner: the `--dock-morph-t` scalar (the leaving
+       pane via `calc(1 - t)`, the entering pane revealed by the clip aperture +
+       child stagger off the SAME scalar). Visibility keeps ONE owner: the delayed
+       `visibility 0s linear var(--duration-normal)` hold of the 3-state fork above
+       (the a11y-006 hit-test anchor, LOAD-BEARING) released on spring-settle. ONE
+       clock, every axis — the W01/W02 single-scalar thesis FINISHED for opacity. */
+
+    /* ── Base layout — distinct per surface ─────────────────────────── */
+    .dock-layer {
+        display: flex;
+        align-items: center;
+        grid-area: 1 / 1;
+        gap: var(--dock-layer-gap, 0.375rem);
+    }
+
+    /* AW.W2 — content-intrinsic axis follows the MORPH axis. A horizontal dock
+       lays its inline content out ONCE at `width: max-content` (nowrap) so the
+       width aperture uncovers a static row; the fixed `height` keeps the row a
+       single line. Scoped to `:not(.vertical)` so a vertical rail (whose
+       block-axis morph reveals a column) is NOT forced onto one nowrap row — the
+       vertical group's active host block-sizes to `height: max-content` below
+       (the AP.W3 column treatment, KEPT). */
+    .glass-dock:not(.vertical) .dock-layer {
+        white-space: nowrap;
+        height: var(--dock-layer-height, 2.5rem);
+    }
+
+    .dock-layer.is-active {
+        position: relative;
+    }
+
+    .dock-layer:not(.is-active) {
+        position: absolute;
+        inset: 0;
+    }
+
+    /* AX.W01 — the spring-keyed child stagger, now off the SINGLE morph scalar.
+       The driver writes `--dock-morph-t` to the `.glass-dock` root and arms
+       `[data-morphing]` while the spring runs; `--dock-expand-t` (the inheriting
+       directional expanded-ness derived above — 0 collapsed, 1 expanded) cascades
+       to the active pane's children. Each direct child reveals when `--dock-expand-t`
+       crosses its per-child onset, so the controls cascade IN ON the physical morph
+       — symmetric in both directions (expand fades them in outer→in, collapse fades
+       them back out) and an interrupted morph carries the cascade with it (no
+       orphaned timers). The active PANE stays statically opacity:1 (revealed by the
+       clip aperture); only its CHILDREN ride this per-child onset (the W2
+       clip-reveal contract is NOT regressed).
+
+       The reveal is a pure `calc` ramp: `opacity = clamp(0, (expand-t − onset) /
+       window, 1)`. Gated on the root `[data-morphing]` so at REST the children
+       carry no opacity authority (default cascade → 1). Under PRM the spring's
+       `respectReducedMotion` jumps `--dock-morph-t` 0→1 in one frame → `--dock-expand-t`
+       lands at the endpoint → the cascade collapses to 0 stagger frames; the
+       global PRM gate strips `translate` so the rise snaps too. The inner
+       DockLayerGroup defines its own `--dock-expand-t` (= the per-swap progress)
+       in DockLayerGroup's scope so a pane swap reveals the new pane's children. */
+    .glass-dock[data-morphing] .dock-layer.is-active > *,
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > * {
+        --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
+        --dock-stagger-onset: 0;
+        opacity: clamp(
+            0,
+            calc(
+                (var(--dock-expand-t, 1) - var(--dock-stagger-onset)) /
+                    var(--dock-stagger-window)
+            ),
+            1
+        );
+        translate: 0
+            calc(
+                (1 - clamp(0, calc((var(--dock-expand-t, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
+                    var(--dock-stagger-rise, 4px)
+            );
+    }
+
+    /* AX.W02 — per-child onsets off the ONE `--dock-stagger-step` token. Each
+       successive control starts `step` later than the one before it (`onset =
+       step × (childIndex − 1)`), so the row fills outer→in on expand. The
+       hand-typed 0.08/0.16/0.24/0.32/0.4 ladder is RETIRED — the onsets are now
+       derived from the single token, so retuning the cascade beat is a one-token
+       override. The set is capped at the 6th child (`nth-child(n + 6)` holds at
+       `step × 5`) so even a long row finishes within the morph window. ONE rule
+       over the unified `.is-active` vocabulary drives both the outer pane and the
+       inner pane-stack — no duplicated comma-group. (`sibling-index()` would
+       collapse this to a single declaration, but it is not yet Baseline across
+       Safari/Firefox — the token-keyed nth-child set is the cross-engine form, and
+       the magic ladder is gone either way.) */
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2) {
+        --dock-stagger-onset: calc(var(--dock-stagger-step) * 1);
+    }
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3) {
+        --dock-stagger-onset: calc(var(--dock-stagger-step) * 2);
+    }
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(4),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(4) {
+        --dock-stagger-onset: calc(var(--dock-stagger-step) * 3);
+    }
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(5),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(5) {
+        --dock-stagger-onset: calc(var(--dock-stagger-step) * 4);
+    }
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 6),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
+        --dock-stagger-onset: calc(var(--dock-stagger-step) * 5);
+    }
+
+    /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
+       `.always-expanded:not([data-morphing])` (the clip-shell block at the top).
+       A plain `overflow: visible` here would lift the clip DURING the morph (the
+       load-bearing sequencing gap), so the `overflow` declarations are dropped
+       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. */
+    .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers {
+        width: 100%;
+    }
+
+    .glass-dock.expanded:not(.fit-content) .dock-layer--full {
+        width: 100%;
+    }
+
+    .glass-dock.always-expanded {
+        cursor: default;
+    }
+
+    /* ── AW.W3b — `layout="grid"` the 2D auto-grid big dock ──────────────
+       The active layer becomes a self-wrapping tile grid (Launchpad / Stage-Manager
+       track symmetry — `auto-fill` columns floored at `--dock-tile-min`, explicit
+       `grid-auto-rows` so the concentric look holds). DISTINCT from
+       `overflow="wrap"`'s content-ordered flex-wrap. A `layout="grid"` dock is
+       `alwaysExpanded` by contract (GlassDock.vue), so there is NO width morph and
+       hence NO per-frame grid-column reflow. `white-space: normal` releases the
+       single-row nowrap so the tiles wrap. */
+    .glass-dock.layout-grid {
+        white-space: normal;
+    }
+
+    .glass-dock.layout-grid .dock-layer--full {
+        display: grid;
+        grid-template-columns: repeat(
+            auto-fill,
+            minmax(var(--dock-tile-min, 4.5rem), 1fr)
+        );
+        grid-auto-rows: var(--dock-tile-min, 4.5rem);
+        gap: var(--dock-layer-gap, 0.375rem);
+        width: 100%;
+        height: auto;
+        white-space: normal;
+        /* AX.W45 DK4-a — center each fixed-size button in its tile cell on BOTH
+           axes. The grid layer only inherited `align-items: center` (block axis);
+           `justify-items` defaulted to `stretch`, which degenerates to `start` for a
+           fixed-width `inline-flex` button — so every icon hugged the inline-start
+           (left) edge of its tile, ~16px off-center (the "big-dock icons are not
+           aligned" defect). `place-items: center` centers on both axes, MIRRORING the
+           flex-wrap layer's `justify-content: center`. */
+        place-items: center;
+    }
+
+    /* A grid dock fills the inline cap; the active layer is the panel body, not a
+       shrink-to-fit row. The cap is the `--dock-max-inline-size` clamp (KEPT). */
+    .glass-dock.layout-grid .dock-layers {
+        width: 100%;
+    }
+
+    /* CONCENTRIC inner tiles — inner radius = outer card radius − padding (the
+       universal macOS / visionOS / Raycast rule). NEVER nest two pills
+       (stadium-in-stadium); a finite outer + a stepped-down inner. */
+    .glass-dock.layout-grid.shape-card .dock-layer--full > * {
+        border-radius: calc(
+            var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem)
+        );
+    }
+}

package/src/styles/dock/morph.css

@@ -0,0 +1,244 @@
+/* dock/morph.css — the SINGLE-SCALAR morph chrome + state response (AX.W06 carve).
+ *
+ * Carved from the dock.css god-module (slice 25). This partial owns the dock's
+ * DYNAMIC chrome: the W01 `--dock-expand-t` directional expanded-ness derivation,
+ * the root background/border/padding interpolation on the ONE `--dock-morph-t`
+ * clock, the collapsed/summary state (the W45-TUNE Q1 proportioned pill + the
+ * summary glyph reveal), the held / open-descendant surface response, and the
+ * W55 adaptive-legibility `--glass-backdrop: light` bucket. The static structural
+ * surface (root, clip, variants, persistent) lives in dock/shell.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 {
+    /* AX.W01 — the root chrome morphs off the SINGLE `--dock-morph-t` scalar, NOT a
+       CSS transition (the prior `padding/scale/radius var(--dock-motion-resize)` +
+       `background/border-color var(--dock-motion-standard)` transition list — TWO
+       curves on TWO durations — is DELETED). `--dock-expand-t` is the directional
+       expanded-ness (0 = collapsed look, 1 = expanded look) derived from the
+       per-swap morph scalar + the synchronously-set `.expanded`/`.collapsed` class:
+       the box width AND the root padding/radius/color move on ONE clock. The
+       per-frame writes drive the registered `<number>` scalar; the `calc()` reads
+       below interpolate composited. Under PRM the spring's `respectReducedMotion`
+       settles instantly (the scalar jumps 0→1 in one frame → the chrome snaps). */
+
+    /* `--dock-expand-t` — the directional expanded-ness. `--dock-morph-t` is a
+       REGISTERED `@property` (initial-value 0), so it is NEVER guaranteed-invalid:
+       `var(--dock-morph-t, 1)` reads 0 at REST (the fallback is DEAD), which would
+       resolve every expanded dock to expand-t 0 → the collapsed resting look (the
+       pill-radius + collapsed bg/border/padding regression). So the resting value is
+       stated STATICALLY per class, and ONLY while a morph is in flight
+       (`[data-morphing]` armed on the root by useLayerTransition, cleared on settle)
+       does expand-t track the live spring scalar. The class is ALREADY the END state
+       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 {
+        --dock-expand-t: 1;
+    }
+
+    .glass-dock:not(.vertical).collapsed {
+        --dock-expand-t: 0;
+    }
+
+    .glass-dock:not(.vertical).expanded[data-morphing],
+    .glass-dock:not(.vertical).always-expanded[data-morphing] {
+        --dock-expand-t: var(--dock-morph-t);
+    }
+
+    .glass-dock:not(.vertical).collapsed[data-morphing] {
+        --dock-expand-t: calc(1 - var(--dock-morph-t));
+    }
+
+    /* 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 `variant-dock` (the rail / instrument-strip variants own
+       their own surface vocabulary and do not collapse↔expand). The two color axes
+       blend in srgb (the house mix the token ladder speaks). The `.collapsed`
+       discrete bg/border declarations are RETIRED — this block is the single
+       authority, and at rest `--dock-expand-t` resolves to the class endpoint (0
+       collapsed / 1 expanded) so the resting look is exact. */
+    .glass-dock.variant-dock:not(.vertical) {
+        background: color-mix(
+            in srgb,
+            var(--glass-bg-dock, var(--glass-bg-resting))
+                calc(var(--dock-expand-t, 1) * 100%),
+            var(--glass-bg-wash)
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--glass-border-dock, var(--glass-border-resting))
+                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.
+       Padding interpolates linearly between the collapsed floor and the expanded
+       block/inline padding on the same `--dock-expand-t` scalar. */
+    .glass-dock.variant-dock:not(.vertical):not(.dock-overflow-wrap) {
+        --dock-pad-collapsed: var(
+            --dock-collapsed-padding,
+            var(--dock-padding-block, 0.375rem)
+        );
+        padding-block: calc(
+            var(--dock-pad-collapsed) +
+                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
+                var(--dock-expand-t, 1)
+        );
+        padding-inline: calc(
+            var(--dock-pad-collapsed) +
+                (var(--dock-padding-inline, 0.5rem) - 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
+       non-morphing concerns: the pointer affordance, the centred summary layout,
+       and the collapsed shadow (box-shadow crossfades discretely — a subtle,
+       acceptable swap that a `color-mix` cannot blend across its multi-layer
+       value). */
+    .glass-dock.collapsed {
+        cursor: pointer;
+        justify-content: center;
+        box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
+    }
+
+    /* AX.W45-TUNE Q1 — the collapsed summary floors on BOTH axes off the SAME
+       `--dock-collapsed-summary-min-size` token (now MINTED in tokens.css §10 as a
+       tight ≈0.7× of the full control height). The prior rule floored ONLY
+       `min-width` and let the token fall to `--dock-layer-height` (the full control
+       height) — so the collapsed pill read as a full-row stub, not a proportioned
+       squircle. Adding the symmetric `min-block-size` makes the collapsed pill a
+       tight square-ish dot the consumer's glyph sits centred in (the proportioned-
+       pill target the user's Q1 named). */
+    .glass-dock.collapsed .dock-layer--summary {
+        min-width: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        min-block-size: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        justify-content: center;
+    }
+
+    /* AX.W45 DK1 — the collapsed/summary glyph appears WITH the pill, no added
+       delay. The `--summary` pane is the INCOMING pane on collapse, but the shared
+       stagger ramp reads `--dock-expand-t` which runs 1→0 on collapse — so the
+       summary glyph used to fade OUT over the back half of the morph and pop in only
+       at settle (the "shrunken icon does not appear for a while" defect). Keying the
+       summary pane's stagger scalar to `--dock-morph-t` directly (the per-swap
+       incoming-ness, 0→1) reveals it as the box settles — appearing WITH the pill.
+       The summary is a single front-loaded glyph (onset 0), so this lands it at full
+       opacity by the morph's tail. The `--dock-expand-t` directional scalar stays
+       the right driver for the box CHROME (bg/border/padding/radius interpolate
+       between the collapsed↔expanded endpoints); only the summary pane's CONTENT
+       reveal is decoupled onto the incoming scalar. */
+    .glass-dock[data-morphing] .dock-layer--summary {
+        --dock-expand-t: var(--dock-morph-t);
+    }
+
+    /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
+       The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
+       root transition above, so this hover scale settles on the SAME spring curve
+       the expand morph uses — a collapsed→hover→expand gesture is one continuous
+       spring, not a `scale`-ease handed off to the width-spring. The hover scale
+       and the press squish (`--scale-press-dock`) are now one register on the dock
+       surface. */
+    .glass-dock.collapsed:hover {
+        background: var(--glass-bg-wash);
+        border-color: var(--glass-border-floating);
+        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
+        scale: var(--dock-collapsed-hover-scale);
+    }
+
+    /* J.W5.C — held-state substrate response.
+     *
+     * When a descendant signals `dockKeepOpen` (e.g. an active slider drag),
+     * `useDockState.isHeld` flips true and the root carries `data-held`.
+     * The dock background lifts a tier (resting → floating-equivalent) and
+     * the border quiets to the floating ring; the change tracks pointer
+     * movement on `--duration-fast` so it reads as a held-cursor cue, not
+     * a state change. The same flag is consumed by descendants (Slider
+     * thumb halo) via `useOptionalDockContext().held` for cross-substrate
+     * coordination (typed-key canonical shape; O.W2 invariant 25).
+     */
+    .glass-dock[data-held] {
+        /* AX.W55 — the held tier threads the oklab tint wrapper (zero-delta at the
+           `0%` rest default) so the adaptive darken reaches the held state too. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating, var(--glass-bg-resting)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+
+    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
+       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
+       read natively (no consumer JS). Idempotent with `[data-held]` above (same
+       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
+    .glass-dock:has([data-state="open"]) {
+        /* AX.W55 — same oklab tint wrapper as `[data-held]` (zero-delta at rest). */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating, var(--glass-bg-resting)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+    }
+
+    /* ── Adaptive legibility: the dock over a light backdrop (AX.W55 — the literal
+       G2 surface; "Glass dock over VERY LIGHT materials is unreadable") ──────────
+       The dock is the surface the user reported unreadable over light content. Its
+       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers all now read the
+       SAME oklab tint seam the five rungs use, so this ONE bucket block — set when a
+       consumer marks `--glass-backdrop: light` on the dock's ancestor — lifts every
+       dock surface toward ink in lockstep. The tint tokens are INHERITING, so
+       re-pointing them on the `.glass-dock` root re-resolves every nested surface +
+       cascades to the dock CONTROLS (which read `--dock-fg-on-aurora` for their
+       foreground); `--dock-fg-on-aurora` re-points to the warm-ink here so the
+       control glyphs/labels clear AA over the now-darkened plate — ONE reconciled
+       path, the foreground twin folded INTO the probe, not a third fork. The
+       morph-root interp (`.variant-dock:not(.vertical)` above) stays `color-mix(in
+       srgb …)` for the transition; the adaptive darken rides its RESTING endpoint
+       (`--glass-bg-dock`, which carries the tint) — the in-flight morph frames are
+       sub-perceptual (the ratified resting-endpoint-only default). */
+    @container style(--glass-backdrop: light) {
+        .glass-dock {
+            --glass-tint-source: var(--glass-tint-ink);
+            --glass-tint-strength: var(--glass-tint-strength-aa);
+            --dock-fg-on-aurora: var(--glass-tint-ink);
+        }
+    }
+
+    /* AX.W55 — the `contrast-color()` flip for the dock control foreground (Chrome
+       147+/Safari 26+; progressive enhancement, NEVER the load-bearing floor). The
+       declarative bucket above already carries AA on all engines (it darkens the dock
+       plate so the warm-dark `--dock-fg-on-aurora` clears ~17:1 over white at the 18%
+       floor). On a supporting engine `contrast-color()` REFINES the control ink,
+       anchored on the LIGHT BACKDROP signal (`--card`, the warm-white surface base the
+       bright bucket implies) — `contrast-color(var(--card))` resolves to the legible
+       DARK ink. Anchoring on the dark ink instead inverts to white (illegible on the
+       still-light dock plate), so the anchor is the light surface, matching the rung
+       refinement in glass.css. The bucket is the floor; this is the native pick. */
+    @supports (color: contrast-color(white)) {
+        @container style(--glass-backdrop: light) {
+            .glass-dock {
+                --dock-fg-on-aurora: contrast-color(var(--card));
+            }
+        }
+    }
+}