@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/animations.css

@@ -141,128 +141,13 @@
     100% { background-position: -200% 0; }
 }
 
-/* ── Gold ONE-SHOT round-trip: the pressed seal (E7c — the to-AND-fro) ──────────
- *
- * A seal is PRESSED, catches the light ONCE, and RECEDES — a full ease-IN-AND-OUT
- * envelope, not a fire-and-yank. The defect this replaces: `.text-gilt` used the
- * infinite `gold-shimmer-slide` (`1 forwards`), which HELD its gilt terminal frame
- * forever, and the consumer ripped the class off on a `setTimeout` — but the gold
- * gradient lives in `background-image`, which no transition covers, so it SNAPPED
- * off in one frame.
- *
- * This keyframe owns the WHOLE envelope and RESOLVES TO THE RESTING INK — there is
- * nothing left to yank when it ends:
- *   - `-webkit-text-fill-color` (and `color`) ride from the figure's OWN ink
- *     (`currentColor` — the consumer's data-pole green/red) → `transparent` (the
- *     gilt gradient shows through `background-clip:text`) → back to `currentColor`.
- *     So the gilt FADES UP and FADES DOWN; at 0% and 100% the figure paints its own
- *     ink and the gradient is occluded — the resting state, by construction.
- *   - `background-position` slides the gradient across through the same window.
- * No `forwards` is needed (the final keyframe IS rest), so on completion the class
- * may simply stop mattering — the snap is structurally impossible. */
-@keyframes gold-shimmer-pulse {
-    0% {
-        background-position: 150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
-    }
-    25% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-    }
-    75% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-    }
-    100% {
-        background-position: -150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
-    }
-}
-
-/* ── Crayon-wipe: the scroll-scrubbed draw-on (D6.c M1) ──────────────────────
- *
- * The bidirectional, scroll-scrubbed DRAW-ON of a hand-mark (the crayon/pen
- * underline, a drawn rule). The wipe is a `clip-path: inset()` of the LEFT edge
- * only — the mark draws from inset(0 100% 0 0) (fully clipped from the right, so
- * NOTHING shows) to inset(0) (fully revealed) — so the underline DRAWS as the
- * figure scrolls into view and UN-DRAWS as it scrolls back up. `clip-path` is the
- * compositor-eligible, FILTER-STABLE wipe (the medium's grain `feTurbulence`
- * rasters ONCE and is untouched by the clip — the cardinal "no per-frame raster"
- * discipline ds2-motion-field M1 names): clip-path animates on the compositor and
- * never re-runs the static filter, unlike a `stroke-dashoffset` draw under the
- * grain filter (which re-rasters per frame). The grammar mirrors scroll-driven.css
- * (the `view()`/`scroll()` timeline home): the keyframe lives here (the shared
- * @keyframes register); a consumer binds it to a NAMED `view-timeline` so the
- * draw-on SCRUBS bidirectionally with scroll (forward → draws, back → un-draws),
- * never a one-shot. The `.crayon-wipe` utility below is the binding.
- *
- * The keyframe itself is timeline-agnostic — it is equally a load-clock draw-on
- * (bound to a keyframes.js Sequence) or a scroll scrub (bound to a view-timeline).
- * The DEFAULT consumer is the scroll scrub (the figure-item underline drawing into
- * the lower third), hence the utility's `view()` binding.
- *
- * Reduced-motion: the utility (NOT the keyframe) gates — under PRM the mark is SET
- * to inset(0) (fully drawn, never animated), the correct degrade for a permanent
- * structural draw (information parity: the underline is present, just not drawn).
+/* ── Sparkle sweep RETIRED (BA.W-GLASS-CAL, H2a) ──
+ * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
+ * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
+ * gone, and the dock-tab primary tier collapsed onto the calm glass register.
+ * The `Complete!` celebratory shimmer rides its OWN keyframes (gold-shimmer-slide
+ * / shimmer above), never sparkle-sweep.
  */
-@keyframes crayon-wipe {
-    from {
-        /* clipped from the RIGHT by 100% → the mark is fully hidden (nothing
-           drawn yet); the left edge is the pen-tip about to move right. */
-        clip-path: inset(0 100% 0 0);
-    }
-    to {
-        /* fully revealed — the mark is wholly drawn. */
-        clip-path: inset(0 0 0 0);
-    }
-}
-
-/* ── .crayon-wipe — bind the wipe to a scroll view-timeline (D6.c M1) ──────────
- * The scroll-scrubbed draw-on utility. A consumer puts `.crayon-wipe` on a
- * hand-mark surface (the underline span, a drawn rule) and the mark draws/un-draws
- * as it scrolls through its OWN `view()` timeline — a bidirectional scrub, free,
- * off the main thread. The animation is `paused` with `animation-timeline: view()`
- * so the scroll position IS the playhead (the native scroll-driven model — the
- * timeline drives the frame, time does not). The named timeline is overridable
- * (`--crayon-wipe-timeline`, default the element's own `view()`) so a consumer can
- * scrub off a SHARED beat timeline (the §--beat-tl the atlas scroll-driven.css
- * names) instead of the per-element view — that is the "named view-timeline so a
- * consumer scrubs a draw-on bidirectionally" contract.
- *
- * @supports-gated + PRM-OUTER-gated, mirroring scroll-driven.css exactly: the
- * whole binding sits under `prefers-reduced-motion: no-preference`, so under PRM
- * the animation never attaches and the mark renders in its terminal `inset(0)`
- * (fully-drawn) state — the static-draw degrade. The draw range is `entry`-keyed
- * (the mark draws as it ENTERS the lower viewport), tunable via
- * `--crayon-wipe-range-{start,end}`. */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        .crayon-wipe {
-            animation: crayon-wipe auto linear both;
-            animation-timeline: var(--crayon-wipe-timeline, view(block));
-            animation-range: var(--crayon-wipe-range-start, entry 0%)
-                var(--crayon-wipe-range-end, cover 35%);
-        }
-    }
-}
-
-/* ── Sparkle sweep: TOMBSTONE (D6.b — the disco-star excision) ──
- *
- * @deprecated 3.10 — DELETE in 3.11. The four-point `✦` star sweep was the one
- * garish gesture in the library; the user named it for removal ("remove the disco
- * star from all glass-ui elements"). Every in-tree consumer is re-homed: the
- * `btn-audacious` hover affirmation now rides the specular catch-light alone; the
- * gold-CTA rides the `btn-gold-bg-sweep` metal-catch; the chassis `complete`
- * celebration re-homes to the `.text-gilt` one-shot (utilities.css). The keyframe
- * body is EMPTIED rather than deleted for ONE minor so any out-of-tree consumer
- * (the slides decks) fails SOFT — a no-op animation, not an unknown-animation
- * error. The `--duration-sparkle` token is `@deprecated` alongside (tokens.css).
- * Full delete (this block + the token + the theme bridge) lands in 3.11. */
-@keyframes sparkle-sweep {
-    /* intentionally empty — tombstoned, see deprecation note above */
-}
 
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
  *
@@ -430,7 +315,11 @@
         opacity: 0;
         scale: var(--top-layer-enter-scale, 0.96);
         transition-property: opacity, scale, display, overlay;
-        transition-duration: var(--duration-normal);
+        /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
+           clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
+           than the generic `--duration-normal`, so the emphatic dialog/popover
+           entrance bounce reads fully instead of being clipped at 0.3s. */
+        transition-duration: var(--spring-bouncy-duration);
         transition-timing-function: var(--spring-bouncy);
         transition-behavior: allow-discrete;
     }
@@ -451,16 +340,27 @@
      * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
      * non-modal — correct, no scrim). */
     dialog.glass-top-layer::backdrop {
-        background-color: hsl(var(--background) / 0);
+        /* AZ.W-ADAPTIVE-AUTO A5-1 — the modal-scrim dim is the house alpha-derivative
+           `color-mix(in srgb, var(--background) Npct, transparent)`, NOT the invalid
+           `hsl(var(--background) / α)` double-wrap (`--background` is a complete
+           `hsl()` color = `hsl(48 12% 98%)`, so `hsl(hsl(…)/α)` evaluates to nothing
+           and the dim silently did not paint). The `in srgb` axis only — the
+           `--surface-tint-*` house family + the `in oklab` glass tint axis are
+           untouched. */
+        background-color: color-mix(in srgb, var(--background) 0%, transparent);
         backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
         transition: display var(--duration-normal) allow-discrete,
                     overlay var(--duration-normal) allow-discrete,
                     background-color var(--duration-normal) var(--ease-standard);
     }
     dialog.glass-top-layer[open]::backdrop {
-        background-color: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        background-color: color-mix(
+            in srgb,
+            var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
+            transparent
+        );
         @starting-style {
-            background-color: hsl(var(--background) / 0);
+            background-color: color-mix(in srgb, var(--background) 0%, transparent);
         }
     }
 }

package/src/styles/cards.css

@@ -46,3 +46,56 @@
         box-shadow: var(--shadow-cartoon-lg);
     }
 }
+
+/* ── Veil surface decoration (R5-7) ──────────────────────────────
+   The text-legibility PLATE register, ratified by three slides sites (the
+   deck cover subtitle / standfirst / closer lede). Conceptually the W55
+   adaptive-legibility tint applied as a LOCAL plate: a translucent glass
+   fill + blur that darkens content-on-glass over a busy/bright backdrop so
+   text clears AA, but with the BOXED look STRIPPED — no border, no rim, no
+   highlight (the user's read: the border+rim "reads as a dividing line on a
+   text plate"). It is the `surface` sibling of `cartoon` — a decoration-only
+   utility, NOT a tier of its own.
+
+   It routes the glass MATERIAL through the `--glass-*` ladder (`--veil-bg`
+   defaults to the `quiet` rung's adaptive-tint mix, `--veil-blur` to the
+   quiet blur), so the glass-cohesion model sees a sanctioned glass register
+   (the level knob scales the blur; the W55 bright-bucket darkens the fill via
+   the same inheriting tint axis the rung already reads). What it carries on TOP
+   of a bare rung is the THREE veil deltas, each a `--veil-*` knob a consumer
+   retunes:
+
+     border  : none            (--veil-border, the dividing-line strip)
+     shadow  : none            (--veil-shadow, the rim/highlight strip)
+     feather : none (default)  (--veil-feather — an OPTIONAL radial mask that
+               fades the plate edges into the backdrop; off by default so the
+               plate is a clean rectangle, on when a consumer wants the
+               soft-edged "bleed into the page" text-plate look)
+
+   <Card surface="veil"> selects it; `--veil-bg`/`--veil-blur` ride the same
+   `--glass-*` rungs as the ladder, so one `--glass-level` / `--glass-backdrop`
+   override retunes it in lockstep with every other glass surface. */
+@utility veil-surface {
+    /* The glass material — routed through the `--glass-*` ladder so the
+       cohesion model reads a sanctioned glass register, and the W55 adaptive
+       darken (the inheriting `--glass-tint-*` axis) + the `--glass-level` clarity
+       knob reach the plate with NO veil-local recipe. Defaults to the `quiet`
+       rung; a consumer re-points `--veil-bg`/`--veil-blur` to any other rung. */
+    --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+    --veil-blur: var(--glass-blur-quiet);
+    /* The three veil deltas over a bare rung — each overridable. */
+    --veil-border: none;
+    --veil-shadow: none;
+    --veil-feather: none;
+
+    background: var(--veil-bg);
+    backdrop-filter: var(--veil-blur);
+    border: var(--veil-border);
+    box-shadow: var(--veil-shadow);
+    /* The optional radial feather — a `mask-image` only painted when
+       `--veil-feather` is set to a gradient (default `none` = no mask = a clean
+       rectangle). `mask-image: none` is the identity, so the default plate is
+       unmasked. `mask-image` Baseline 2023-12 — a non-supporting engine ignores
+       it and keeps the clean rectangle. */
+    mask-image: var(--veil-feather);
+}

package/src/styles/configurator.css

@@ -0,0 +1,77 @@
+/* configurator.css — the Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY, D6-3).
+ *
+ * The Configurator is the controls chassis the blob + aurora studios compose;
+ * this partial lands the three NAMED hierarchy registers ONCE so every studio
+ * INHERITS a vocabulary (section weight / label register / control rhythm)
+ * rather than a flat undifferentiated stack. The token definitions live in
+ * tokens/offsets-sizing.css (`--configurator-section-*`, `--configurator-preset-row-*`);
+ * this file is where the classes that CONSUME them paint.
+ *
+ * Cascade rung: imported AFTER utilities.css so the `.configurator-section-label`
+ * size/weight overrides the prior flat `text-small font-semibold` register, and
+ * the `.configurator-presets` block-padding override wins over the `py-2`
+ * Tailwind utility on the preset-row wrapper.
+ */
+
+/* 1. Section register — the <ConfiguratorLayer> header label reads as a SECTION
+ *    (√φ subheading, 20.4px / 600), NOT a row. Replaces the flat
+ *    `text-small font-semibold text-foreground` span (D6-3: "section labels read
+ *    flat + undifferentiated"). The two tokens are retunable on the cascade so a
+ *    host can scale the whole section register from one override. */
+.configurator-section-label {
+    font-family: var(--font-text);
+    font-size: var(--configurator-section-size);
+    line-height: var(--type-leading-body);
+    font-weight: var(--configurator-section-weight);
+    letter-spacing: var(--type-tracking-tight);
+    color: var(--foreground);
+}
+
+/* 2. Preset-row PRIMARY-AFFORDANCE lift — the preset picker is the primary
+ *    interaction, so its row breathes ABOVE a body ConfiguratorRow. The token
+ *    drives the SPATIAL rhythm (block-padding + the chip gap), NOT a font-weight
+ *    (D6-3: "the preset row is tight"). `.configurator-presets` ships
+ *    `px-3 py-2` from Tailwind; this rule lifts the block padding to the
+ *    `--configurator-preset-row-weight` floor (10px > the 8px body py) and sets
+ *    the inner chip-list gap to `--configurator-preset-row-gap`. */
+.configurator-presets {
+    padding-block: var(--configurator-preset-row-weight);
+}
+.configurator-presets [role="tablist"] {
+    gap: var(--configurator-preset-row-gap);
+}
+
+/* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1, CFG-4). The
+ *    section + inter-row dividers were inline `border-border/40` / `/30` Tailwind
+ *    alphas that VANISHED over the W-DARK-MATERIAL dark glass-floating plate
+ *    ("the sections run together"). They now read the ONE dark-adaptive
+ *    --configurator-divider{,-section} token (minted in tokens/offsets-sizing.css
+ *    with a light-dark() arm + the dark-arm.css `.dark` floor) so a visible
+ *    luminance step survives BOTH plates. These rules paint only the COLOR; the
+ *    `border-b`/`border-t` WIDTH stays on the Tailwind utilities in the SFCs.
+ *
+ *    Cascade: configurator.css imports after utilities.css, and these element-
+ *    targeting selectors override the Tailwind `border-color` default the dropped
+ *    `border-border/N` utilities used to set (the utilities are GONE from the SFC
+ *    class lists, so there is no competing utility to lose to). The faint section
+ *    tonal step (--configurator-section-tint, default transparent on light) reads
+ *    behind a <ConfiguratorLayer> so a section reads as a section without a second
+ *    heading rung. */
+.configurator-layer {
+    border-color: var(--configurator-divider-section);
+    background-color: var(--configurator-section-tint);
+}
+.configurator-layer-body[data-dividers] > * + * {
+    border-color: var(--configurator-divider);
+}
+
+/* The Configurator.vue chrome dividers (the aside top rule, the preset-row +
+ * footer separators) read the inter-row divider token — the SAME dark-adaptive
+ * register, so the whole instrument's hairline grammar lifts in lockstep. The
+ * SFC drops the inline `border-border/40` from these elements; this rule paints
+ * the color. */
+.configurator-aside,
+.configurator-presets,
+.configurator-footer {
+    border-color: var(--configurator-divider);
+}

package/src/styles/dock/density.css

@@ -39,6 +39,19 @@
             calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The
+           painted control plate floors a notch BELOW its track cell so the maximal
+           hover (×--scale-hover-dock 1.1) / active silhouette stays inside the
+           cross-axis clip box with ≥1px margin (the lozenge dies at the plate
+           diameter, not at the clip edge). The inset is a per-SIDE fraction of the
+           control size (0.1 → an 80%-of-cell painted plate, the iOS-26 inset
+           register), so it scales with EVERY density rung in lockstep AND rides the
+           `--dock-scale` coarse multiplier transitively through --dock-control-size.
+           The control families route it through `padding` + `background-clip:
+           content-box`, so the HIT BOX stays the full --dock-control-size (the WCAG
+           2.5.5 44px floor stays on the CELL, never the inset plate) while the
+           PAINTED plate insets within it. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
         );
@@ -87,6 +100,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale)
         );
@@ -131,6 +146,8 @@
             ),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale)
         );
@@ -174,6 +191,8 @@
             calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)),
             var(--dock-control-floor, 0px)
         );
+        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
         --dock-layer-gap: calc(
             var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale)
         );

package/src/styles/dock/layer-group.css

@@ -10,9 +10,12 @@
  * `.dock-layer-item-host` pane.
  *
  * NOTE: this `.dock-layer-rail` is the LAYER-SWITCHER rail inside a
- * `<DockLayerGroup>` — distinct from the `GlassDock variant="rail"` navigation
- * column (dock/shell.css + dock-controls.css) and the `<InstrumentRail>` cockpit
- * chassis (instrument-rail). The three share the noun, not the architecture.
+ * `<DockLayerGroup>` — the in-dock switcher tab strip. AZ.W-DOCK-TAXONOMY
+ * de-overloaded the "rail" noun: the `GlassDock variant="rail"` vertical-nav
+ * variant is GONE (a vertical nav column is now `orientation="vertical"`), and
+ * `<InstrumentRail>` retired at AY W-IC1. `.dock-layer-rail` is the ONLY surviving
+ * "rail" in the dock band; the noun is otherwise free (reserved for the
+ * W-RAIL-EXTEND beyond-dock facility).
  *
  * @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). */
@@ -87,38 +90,59 @@
         flex-direction: column-reverse;
     }
 
-    /* AX.W45 DK8 — the rail gets its OWN surface plate. Previously the rail was a
-       bare bordered gutter (a hairline `border-right`, no background), so its
-       `--primary 15%` indicator + `--accent 40%` hover were tuned against an absent
-       plate (the "bg's not right"). The `--dock-layer-rail-bg` rung (a quiet
-       `--surface-tint-8` default, consumer-overridable) gives the rail a finished
-       glass-quiet surface; the hover/active affordance reads the `--dock-layer-rail-
-       {hover,active}` tokens, so the whole rail ladder is tunable from §10. */
+    /* AZ.W-DOCK-RAIL — the rail is a HAIRLINE register, not a fused plate. The
+       AX.W45 `--surface-tint-8` filled plate + `--radius-md` rounded background
+       (the "heavy dark blob column" R3-1) are RETIRED: the rail box paints NO fill
+       (`--dock-layer-rail-bg` defaults transparent at §sizing) and carries no
+       rounded plate background. The single `border-right` hairline — re-keyed to
+       the tunable `--dock-layer-rail-divider` token — is the only visible rail
+       edge: a thin rule between the switcher column and the dock body. The
+       hover/active affordance reads the `--dock-layer-rail-{hover,active}` glass
+       tints, so the whole rail ladder is tunable from §sizing. */
     .dock-layer-rail {
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
+        /* AY.W-DOCK-NAV B6 — `align-self: start` (not the group's `stretch`
+           default) so the column rail reports its OWN intrinsic content height
+           (the stacked tabs) to the group's cross-axis sizing rather than being
+           stretched to the group's content-row height. Under `stretch` the rail's
+           height resolved to the group height, which was the single content-row
+           height — circular: the rail's 3 tall tabs overflowed a 40px rail and the
+           lower tabs + the indicator fell below the dock floor (the B6 break). With
+           `align-self: start` the rail demands its natural column height, the group
+           grows to it, and the dock grows to contain the whole rail. The
+           `min-height: max-content` belt makes the demand explicit — a row-flex
+           child's cross-size can otherwise resolve to the (smaller) container row
+           height even under `align-self: start`; `max-content` floors the rail at
+           its stacked-tab content height so the chain (group → pane → dock) grows
+           to fit. */
+        align-self: start;
+        min-height: max-content;
         gap: var(--dock-layer-rail-gap, 0.125rem);
         padding: var(--dock-layer-rail-padding, 0.125rem);
-        background: var(--dock-layer-rail-bg, var(--surface-tint-8));
-        border-radius: var(--dock-layer-rail-radius, var(--radius-md));
-        border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+        background: var(--dock-layer-rail-bg, transparent);
+        border-right: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent));
     }
 
     .dock-layer-group.vertical .dock-layer-rail {
         flex-direction: row;
         border-right: none;
-        border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+        border-bottom: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent));
     }
 
     .dock-layer-group.horizontal.rail-end .dock-layer-rail {
         border-right: none;
-        border-left: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+        border-left: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent));
     }
 
     .dock-layer-group.vertical.rail-end .dock-layer-rail {
         border-bottom: none;
-        border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+        border-top: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent));
     }
 
     /* AU.W8.4 — the rail is a reka-ui Tabs contract. The travelling
@@ -134,12 +158,27 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        /* AY.W-DOCK-NAV B6 — `flex-shrink: 0` so the stacked tabs in the column rail
+           hold their full size and the rail demands its natural content height (no
+           tab squish). With the rail's `align-self: start` this makes the rail report
+           its true column height to the group's cross-axis sizing, growing the dock
+           to contain all the tabs + the travelling indicator (the B6 un-clip). */
+        flex-shrink: 0;
         width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
         height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
         border: 0;
         border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
         background: transparent;
-        color: var(--muted-foreground);
+        /* AZ.W-DOCK-RAIL — the rest glyph lifts OFF the low-contrast
+           `--muted-foreground` (which read sub-AA over the now-hairline transparent
+           backdrop) to the nav-glyph contrast register: a strong warm-ink tint of
+           the dock foreground (`--dock-fg-on-aurora` → `--foreground`), tempered to
+           ~78% for the unselected read while staying ≥4.5:1 over the dock substrate.
+           The selected tab flips to the full register below. */
+        color: var(
+            --dock-layer-rail-glyph,
+            color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 78%, transparent)
+        );
         cursor: pointer;
         font: inherit;
         font-size: 0.75rem;
@@ -150,19 +189,34 @@
             color var(--dock-motion-fast);
     }
 
+    /* AZ.W-DOCK-RAIL — floor the rail glyph. The `size-4` (16px) icon class on the
+       lucide component does not survive the column inline-flex: with no concrete
+       `width`/`flex-shrink`, the un-floored SVG collapsed to a 4px sliver
+       (F2-R3-1). This rule floors BOTH axes to 1rem (16px) and pins
+       `flex-shrink: 0` so the glyph never re-squishes inside the flex tab. */
+    .dock-layer-rail .dock-layer-tab svg {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+    }
+
     .dock-layer-rail .dock-layer-tab:hover {
         background: var(
             --dock-layer-rail-hover,
-            color-mix(in srgb, var(--accent) 40%, transparent)
+            color-mix(in srgb, var(--accent) 30%, transparent)
         );
-        color: var(--foreground);
+        color: var(--dock-fg-on-aurora, var(--foreground));
     }
 
     /* AU.W8.4 — KEEP the active glyph tint on the selected tab (reka emits
        `data-state="active"` + `aria-selected="true"`); the per-button active
-       BACKGROUND is RETIRED — the travelling indicator carries that affordance. */
+       BACKGROUND is RETIRED — the travelling indicator carries that affordance.
+       AZ.W-DOCK-RAIL — the selected glyph reads the full warm-ink register (the
+       nav-glyph contrast canon), deferring the exact accent to W-REGISTER-IOS's
+       root via `--dock-rail-active-accent` (defaults to the dock foreground, NOT
+       a saturated brand `--primary`). */
     .dock-layer-rail .dock-layer-tab[data-state="active"] {
-        color: var(--primary);
+        color: var(--dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground)));
     }
 
     /* AU.W8.4 — the dock control focus-ring contract does not cover
@@ -204,10 +258,14 @@
         height: var(--reka-tabs-indicator-size);
         transform: translateY(var(--reka-tabs-indicator-position));
         border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
-        background: var(
-            --dock-layer-rail-active,
-            color-mix(in srgb, var(--primary) 15%, transparent)
-        );
+        /* AZ.W-DOCK-RAIL — the travelling indicator paints the glass-register
+           `--dock-layer-rail-active` (defaults to `--glass-bg-floating`, the
+           "selected reads as glass" register). The inline fallback is the SAME
+           glass tier — NOT the saturated `--primary 15%` warm-red mix the prior
+           register baked. The baked-plate utilities the reka `<TabsIndicator>`
+           wrapper used to render are suppressed via `:surface="false"` in
+           DockLayerGroup.vue, so THIS token rule is the sole paint. */
+        background: var(--dock-layer-rail-active, var(--glass-bg-floating));
         transition:
             width var(--duration-fast) var(--spring-snappy),
             height var(--duration-fast) var(--spring-snappy),

package/src/styles/dock/layers.css

@@ -60,6 +60,18 @@
         inline-size: var(--dock-morph-size);
     }
 
+    /* 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. */
+    .glass-dock.vertical[data-morphing] .dock-layers {
+        inline-size: auto;
+        block-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 {
@@ -196,9 +208,19 @@
        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). */
+    /* AY.W-DOCK-NAV B6 — the height is a FLOOR (`min-height`), not a fixed lock. A
+       single-row content pane's intrinsic height already equals
+       `--dock-layer-height` (the controls + line-height sum to it), so `min-height`
+       is byte-identical for the common case. But a horizontal dock hosting a COLUMN
+       switcher-rail (`<DockLayerGroup>` with `show-rail`) lays the rail out as a
+       stack of tabs taller than one row — the prior fixed `height` clipped the
+       rail's lower tabs + the active indicator BELOW the dock floor (the B6 "no rail
+       line / broken" read, measured: 2 of 3 tabs clipped). The floor lets the pane
+       block-size to the rail's natural column height so the dock grows to contain
+       the whole rail. The cross axis keeps `nowrap`. */
     .glass-dock:not(.vertical) .dock-layer {
         white-space: nowrap;
-        height: var(--dock-layer-height, 2.5rem);
+        min-height: var(--dock-layer-height, 2.5rem);
     }
 
     .dock-layer.is-active {