@mkbabb/glass-ui 3.11.2 → 3.13.0

package/dist/styles/dock/rail-extend.css

@@ -0,0 +1,300 @@
+/* AZ.W-RAIL-EXTEND (+ R4-1) — the net-new hairline-rail facility's beyond-edge geometry.
+ *
+ * THE R4-1 ARCHITECTURE FIX. The `.glass-dock` root carries `contain: paint` +
+ * `backdrop-filter` + (on a vertical always-expanded rail) `overflow-y: auto` — ALL
+ * THREE hard-clip every descendant to the dock's border box. An absolutely-positioned
+ * `#rail` rendered as a dock CHILD could NEVER paint past that box: it was swallowed at
+ * the bottom edge (the R4-1 "black blob clipped at the dock edge" the user audited — the
+ * dock-icon-button is transparent-at-rest by design, so the clipped half-circle read as
+ * a dark blob). The escape: GlassDock now renders `<DockRail>` as a SIBLING of
+ * `.glass-dock` inside a `.glass-dock-frame` (a `display:contents` shell that becomes
+ * a NON-clipping positioning context only when `data-has-rail`). The `.dock-hairline-slot`
+ * is `position: absolute` relative to THAT shell — outside the dock's containment — so the
+ * hairline VISIBLY overruns the dock edge and the context end-icon PERSISTS on collapse
+ * (G2). No `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it.
+ *
+ * The hairline is composed from the `--border-hairline` token PAIR (the 0.5px
+ * catch-light + under-shadow the dock + instrument-chassis already speak) via
+ * `box-shadow` — a whisper, NEVER a hard `1px solid` rule (R1). The hairline OVERRUNS
+ * the dock content box by `--dock-rail-extend-length` (R3 — the beyond-edge extent),
+ * a dock-scoped geometry knob a consumer overrides.
+ *
+ * Because the rail is dock CHROME floating OUTSIDE the dock substrate, its end-icon
+ * carries its OWN glass-floating register (the dock-surface blur + the floating-tier
+ * fill + the edge-light rim) — it cannot borrow the dock's plate the way an in-dock
+ * `.dock-icon-button` does (that one is transparent-at-rest, reading the dock beneath).
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other partials.
+ */
+@layer components {
+    :root {
+        /* The beyond-edge overrun length — how far the hairline runs PAST the dock
+           content box. A proportioned default (a touch more than a dock control); a
+           consumer retunes per-instance. Rides `--dock-scale` so it tracks the
+           coarse-pointer density thread the rest of the dock floor speaks. */
+        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
+    }
+
+    /* The dock-frame wrapper. DEFAULT (`display: contents`) is layout-transparent
+       — the dock behaves as if the wrapper is not there (byte-identical no-rail path,
+       no positioning context interposed, the dock keeps its own fixed/sticky/inline
+       mode). When a `#rail` is authored it lifts to a real NON-clipping positioning
+       context so the abs-positioned rail slot anchors to the dock box yet escapes the
+       dock's `contain: paint` / `backdrop-filter` / `overflow` clip. */
+    .glass-dock-frame {
+        display: contents;
+    }
+    .glass-dock-frame[data-has-rail] {
+        display: inline-flex;
+        position: relative;
+        /* No containment, no overflow, no blur — the WHOLE point: the rail must paint
+           beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its
+           box == the dock box and the rail anchors to the true edge. */
+    }
+    .glass-dock-frame[data-has-rail].vertical {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The chrome-slot wrapper — a `position: absolute` sibling of `.glass-dock`,
+       anchored to the dock-frame (NOT the dock box), so the dock's clip never reaches it.
+       It paints nothing itself; `<DockRail>` owns the hairline + icon. */
+    .dock-hairline-slot {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 1;
+    }
+    /* The end-icon control re-arms pointer events (the slot is pass-through). */
+    .dock-hairline-slot > * {
+        pointer-events: auto;
+    }
+
+    /* AZ.W-RAIL3 — the slot hangs the floating carousel BELOW the dock's bottom edge
+       for BOTH orientations. The slot's top sits AT the dock's bottom edge
+       (`inset-block-start: 100%`) and the strip (a horizontal chip carousel) lives
+       wholly BELOW the dock. The slot anchors at the dock's LEADING (inline-start)
+       edge but is NOT clamped to the dock's width (`inset-inline-end: auto`), so a
+       carousel WIDER than a narrow vertical column overflows past the dock's inline
+       extent — the "floating carousel" that overflows OUTSIDE the dock (the box stays
+       INVIOLATE because the slot is `position: absolute`, never feeding the dock's
+       intrinsic size). The connective hairline (`.dock-hairline-extend::before`) is
+       center-aligned over the strip so it reads as a connector from the dock edge. */
+    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
+        inset-inline-start: 100%;
+        /* seat the carousel CENTERED beside the dock column. A top-anchored seat
+           collides with the page H1/breadcrumb band at scroll-top (any fixed offset
+           from the dock top lands in it at some viewport); the vertical center is
+           stable across viewport heights and reads as the carousel riding the dock's
+           midline, clear of the title band. */
+        inset-block-start: 50%;
+        inset-block-end: auto;
+        translate: 0 -50%;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
+        inset-block-end: 100%;
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-end;
+    }
+
+    /* AZ.W-RAIL3 — the FLOATING CAROUSEL strip. The hairline element is the wrapper
+       that carries (a) a VISIBLE connective hairline running from the dock edge down
+       to the strip (the user's "the hairline must visibly connect") and (b) the
+       `.dock-hairline-strip` — a flex row of detached glass chips, the floating
+       carousel that overflows OUTSIDE the dock box (the third-rail redirect: the
+       contextual facets are no longer in-dock layers; they are the rail's content). */
+    .dock-hairline-extend {
+        position: relative;
+        display: flex;
+        gap: 0;
+    }
+    /* Vertical dock — connector (a horizontal line) then the chip COLUMN, left-to-right
+       (the carousel rides BESIDE the dock in its trailing gutter). */
+    .dock-hairline-extend.vertical {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+    /* Horizontal dock — the strip sits ABOVE: stack the chip-row then the connector
+       bottom-up (column-reverse puts the first child, the connector, at the BOTTOM,
+       nearest the dock's top edge — so a viewport-bottom-anchored dock keeps its
+       carousel ON-SCREEN above it). */
+    .dock-hairline-extend.horizontal {
+        flex-direction: column-reverse;
+        align-items: flex-start;
+    }
+
+    /* R3 — the VISIBLE connective hairline. R1 — the `--border-hairline` token pair
+       (catch-light + under-shadow) + a faint background fallback so the whisper reads
+       even over a busy backdrop (the user audited "NO VISIBLE HAIRLINE"). The line
+       overruns by `--dock-rail-extend-length` (the beyond-edge extent); the
+       `min-{inline,block}-size` floor is the proof:rail-extend R3 overrun witness. */
+    .dock-hairline-extend::before {
+        content: "";
+        flex: 0 0 auto;
+        box-shadow: var(--border-hairline);
+        background: var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 45%, transparent));
+    }
+    /* Vertical dock connector — a HORIZONTAL line running right from the dock's
+       trailing edge to the chip column, seated near the dock's vertical center. */
+    .dock-hairline-extend.vertical::before {
+        block-size: 1px;
+        inline-size: var(--dock-rail-extend-length);
+        min-inline-size: var(--dock-rail-extend-length);
+        align-self: center;
+        margin-inline-end: 0.25rem;
+    }
+    /* Horizontal dock connector — a VERTICAL line running up from the dock's top
+       edge to the chip row, seated near the dock's leading control center. */
+    .dock-hairline-extend.horizontal::before {
+        inline-size: 1px;
+        block-size: var(--dock-rail-extend-length);
+        min-block-size: var(--dock-rail-extend-length);
+        margin-inline-start: calc(var(--dock-control-size, 1.75rem) * 0.5);
+        margin-block-start: 0.25rem;
+    }
+
+    /* `extent="inset"` keeps the connector flush at the edge (no overrun). */
+    .dock-hairline-extend.extent-inset.vertical::before {
+        inline-size: 0;
+        min-inline-size: 0;
+    }
+    .dock-hairline-extend.extent-inset.horizontal::before {
+        block-size: 0;
+        min-block-size: 0;
+    }
+
+    /* The carousel strip — a flex run of chips that SCROLLS when the chips exceed the
+       budget (the common 2-4-facet case fits with no scroll; a larger set cycles).
+       `scroll-snap` gives the carousel detent feel. The strip paints OUTSIDE the dock
+       box (it is in the `.dock-hairline-slot`, a `.glass-dock-frame` sibling — R4). */
+    .dock-hairline-strip {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--dock-rail-strip-gap, 0.375rem);
+        scrollbar-width: none;
+        padding: 0.125rem;
+    }
+    .dock-hairline-strip::-webkit-scrollbar {
+        display: none;
+    }
+    /* Vertical dock → a COLUMN carousel beside the dock, scrolls on the block axis. */
+    .dock-hairline-extend.vertical .dock-hairline-strip {
+        flex-direction: column;
+        max-block-size: var(--dock-rail-strip-max, 60vh);
+        overflow-y: auto;
+        overflow-x: visible;
+        scroll-snap-type: y proximity;
+    }
+    /* Horizontal dock → a ROW carousel above the dock, scrolls on the inline axis. */
+    .dock-hairline-extend.horizontal .dock-hairline-strip {
+        flex-direction: row;
+        align-items: center;
+        max-inline-size: var(--dock-rail-strip-max, 60vw);
+        overflow-x: auto;
+        overflow-y: visible;
+        scroll-snap-type: x proximity;
+    }
+    .dock-hairline-strip > * {
+        scroll-snap-align: start;
+    }
+
+    /* Each chip — a detached FLOATING glass pill (R4-1's register, now a label-bearing
+       carousel chip, auto-width). It is chrome OUTSIDE the dock substrate, so it
+       carries its OWN glass plate (the floating-tier fill + edge-light rim + soft
+       drop) rather than borrowing the transparent in-dock `.dock-icon-button` recipe
+       (which would read as a bare dark glyph — the R4-1 blob). Reads the SAME
+       `--dock-control-*` / glass tokens the dock speaks, so it re-tints under `.dark`
+       + the adaptive bucket for free.
+
+       SPECIFICITY: the chip composes the `.dock-icon-button` base (the specular-track
+       + glass register), which sets a FIXED square `width`/`padding` in
+       dock-controls.css — loaded AFTER this partial, so a bare `.dock-hairline-extend-
+       chip` (equal specificity) loses the source-order tie. Scoping the sizing/surface
+       overrides under `.dock-hairline-strip` (0,2,0) beats the base `.dock-icon-button`
+       (0,1,0) without `!important` on the geometry. */
+    .dock-hairline-strip .dock-hairline-extend-chip {
+        flex-shrink: 0;
+        /* override the fixed dock-icon-button square → an auto-width label pill */
+        inline-size: auto;
+        width: auto;
+        min-inline-size: 0;
+        block-size: auto;
+        height: auto;
+        gap: 0.375rem;
+        padding-inline: 0.625rem;
+        padding-block: 0.3125rem;
+        background: var(--glass-bg-floating);
+        /* §6 EASING DOCTRINE — the surface channel (bg/border/color/box-shadow) cross-
+           fades on `--ease-standard` (a bezier, NO overshoot), NEVER a spring (a
+           surface prop wobbling on a spring is the §6 violation). The scale/transform
+           stay on the dock-control spring untouched. */
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard);
+        backdrop-filter: var(--glass-blur-floating);
+        -webkit-backdrop-filter: var(--glass-blur-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+        border-radius: var(--radius-pill);
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 82%, transparent);
+        white-space: nowrap;
+    }
+    .dark .dock-hairline-strip .dock-hairline-extend-chip {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    /* Floor the glyph at the chip's icon scale — the `.dock-icon-button` glyph rule
+       (a fixed `--dock-icon-glyph`) would over-size it inside the label pill. */
+    .dock-hairline-strip .dock-hairline-extend-chip svg {
+        inline-size: 0.875rem;
+        width: 0.875rem;
+        block-size: 0.875rem;
+        height: 0.875rem;
+        flex-shrink: 0;
+    }
+    .dock-hairline-extend-chip-label {
+        line-height: 1;
+    }
+    /* The hover lift — the dock-control register: the floating plate firms, the glyph
+       wakes. Rides the surface easing doctrine (§6). */
+    .dock-hairline-strip .dock-hairline-extend-chip:hover {
+        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+    }
+    /* The ACTIVE chip — the selected facet reads as a glass tier ABOVE the rest fill
+       (the "selected reads as glass" register, the SAME tier `--dock-control-active-bg`
+       uses — NOT a saturated brand hue, per W-REGISTER-IOS). The glyph + label firm to
+       the full warm-ink. */
+    .dock-hairline-strip .dock-hairline-extend-chip.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-hairline-strip .dock-hairline-extend-chip.is-active {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+}

package/dist/styles/dock/shell.css

@@ -64,6 +64,23 @@
            stacking-context guarantee). Covers every dock scale site. */
         scale: 1;
         position: relative;
+        /* AZ.W-ADAPTIVE-AUTO Arm 1 — the dock self-darkens over light backdrops by
+           default via the UNCONDITIONAL `:where(.glass-dock)` self-engage rule in
+           dock/morph.css (mirroring the overlay band's `ladder.css:169`): it re-points
+           the inheriting `--glass-tint-source`/`--glass-tint-strength` directly on the
+           dock root, so the shell + chassis + held/open tiers darken toward warm-ink
+           with NO consumer opt-in (a dock floats over arbitrary — frequently light —
+           page content). `--glass-backdrop: light` is KEPT here so a consumer's
+           DESCENDANT nested-glass inside the dock also reads the bright bucket via the
+           ancestor-querying `@container` block in dock/morph.css (CSS style queries
+           never self-match, so this declaration alone is inert for the dock's OWN
+           plate — the self-engage rule, not this token, darkens the dock). */
+        --glass-backdrop: light;
+        /* AY.W-A11Y-PERF O-4 — paint containment so the maximal-glass nested
+           backdrop-filter sample does not escape the dock box (the standard nested-
+           backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
+           already-blurred buffer at each level without it). */
+        contain: paint;
         display: inline-flex;
         align-items: center;
         /* AW.W1 — the dock does NOT establish a default inline-size container.
@@ -243,27 +260,42 @@
             scale var(--dock-motion-resize);
     }
 
-    .glass-dock.variant-rail {
+    /* AZ.W-DOCK-TAXONOMY — the vertical dock's surface plate (the prior
+       `.variant-rail` block; "rail-ness" is now `orientation="vertical"` + a
+       shape/density choice, not a variant). */
+    .glass-dock.vertical {
         padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem));
-        background: var(--glass-bg-dock, var(--glass-bg-wash));
+        /* AZ.W-ADAPTIVE-AUTO Arm 1 — the vertical dock threads the SAME element-level
+           oklab tint wrapper the shell base carries (NOT the pre-substituted
+           `--glass-bg-dock` token alone, whose inner tint baked at the `:root` 0%
+           strength before the `:where(.glass-dock)` self-engage re-points the
+           inheriting tint tokens — the substitution-vs-inheritance trap §3a names).
+           Wrapping HERE lets the self-engage darken reach the vertical dock's OWN
+           plate. Zero-delta at the `0%` rest default (the mix is a no-op =
+           byte-identical to the flat dock bg). */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-dock, var(--glass-bg-wash)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
         border-color: var(--glass-border-dock, var(--glass-border-wash));
     }
 
-    .glass-dock.variant-rail.shape-pill {
+    .glass-dock.vertical.shape-pill {
         border-radius: var(--radius-pill);
     }
 
-    .glass-dock.variant-rail.shape-rounded {
+    .glass-dock.vertical.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 {
+    /* AW.W3b — horizontal-root shape rules. The `shape-*` class once bound ONLY under
+       the vertical surface; on a horizontal 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 `:not(.vertical)` so the vertical dock (which owns
+       its own radius above) is untouched. */
+    .glass-dock:not(.vertical).shape-rounded {
         border-radius: var(--radius-xl);
     }
 
@@ -275,7 +307,7 @@
        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 {
+    .glass-dock:not(.vertical).shape-card {
         border-radius: calc(
             var(--radius-pill) +
                 (var(--dock-card-radius) - var(--radius-pill)) *
@@ -295,80 +327,18 @@
        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 {
+        .glass-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);
-    }
+    /* AZ.W-DOCK-TAXONOMY — the `instrument-strip` chassis-strip variant is RETIRED
+       (the ≥2-consumer bar). It carried the vocabulary of the InstrumentRail
+       component RETIRED at AY W-IC1; with the `variant` discriminant gone and no
+       live `variant="instrument-strip"` call-site in src/ or demo/, the chassis
+       paint has zero consumers. The cross-repo speedtest SurveyResultDock cockpit
+       re-pins in its own migration (recorded in MIGRATION.md). A consumer needing
+       the chassis surface composes `<InstrumentChassis>` directly. */
 
     .glass-dock:where(.fixed) {
         z-index: var(--z-dock);
@@ -426,32 +396,20 @@
         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;
+    /* AZ.W-DOCK-TAXONOMY (move 2) — the VERTICAL dock's layer panes lay their content
+       out as a COLUMN. The dock body is now the SAME orientation-agnostic
+       `.dock-layers` full/summary morph pair the horizontal dock uses (the prior
+       static `.dock-layer--vertical-body` single-stack RETIRED — a vertical dock now
+       collapses its block axis too). The base `.dock-layer { display: flex;
+       align-items: center }` is row by default; here the full/summary panes flip to a
+       stretched column stack carrying the dock's `--dock-layer-gap` rhythm, so
+       authored item groups + `<DockSeparator>` rules read with the correct vertical
+       cadence. The block-axis morph aperture is owned by `.dock-layers` (layers.css —
+       `.glass-dock.vertical[data-morphing] .dock-layers` morphs `block-size`). */
+    .glass-dock.vertical .dock-layer {
         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);
-    }
 }

package/dist/styles/dock-controls/dark-mode-toggle.css

@@ -0,0 +1,109 @@
+/* dock-controls/dark-mode-toggle.css — the `.dark-mode-toggle-button` control
+   family (AZ.W-CARVE partial 2 of 5; carved out of dock-controls.css).
+
+   The standalone toggle sizes (sm/md/lg/control) + the IN-DOCK glyph-inset
+   contract (AY.W-DOCK-CHROME §2 / AX.W06 USF-2 — the toggle glyph routes through
+   `--dock-control-glyph-size` so it is optically uniform with the nav glyphs when
+   docked). Opens its OWN `@layer components`; @import-ed after icon-button.css. */
+
+@layer components {
+    .dark-mode-toggle-button {
+        width: var(--dark-mode-toggle-size, 2.25rem);
+        height: var(--dark-mode-toggle-size, 2.25rem);
+        min-width: var(--dark-mode-toggle-size, 2.25rem);
+        min-height: var(--dark-mode-toggle-size, 2.25rem);
+        max-width: var(--dark-mode-toggle-size, 2.25rem);
+        max-height: var(--dark-mode-toggle-size, 2.25rem);
+        aspect-ratio: 1;
+        padding: var(--dark-mode-toggle-padding, 0.375rem);
+        transition:
+            opacity var(--dock-motion-standard),
+            background-color var(--dock-motion-standard),
+            box-shadow var(--dock-motion-fast);
+
+        & > svg {
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        &:hover,
+        &:focus {
+            background: var(--surface-tint-10);
+            opacity: 1;
+            outline: none;
+        }
+
+        &:focus-visible {
+            box-shadow: var(--focus-ring-shadow);
+        }
+
+        &[data-size="sm"] {
+            --dark-mode-toggle-size: 1.75rem;
+            --dark-mode-toggle-padding: 0.25rem;
+        }
+
+        &[data-size="md"] {
+            --dark-mode-toggle-size: 2.25rem;
+            --dark-mode-toggle-padding: 0.375rem;
+        }
+
+        &[data-size="lg"] {
+            --dark-mode-toggle-size: 2.75rem;
+            --dark-mode-toggle-padding: 0.5rem;
+        }
+
+        &[data-size="control"] {
+            --dark-mode-toggle-size: var(--control-size, 2.25rem);
+            --dark-mode-toggle-padding: var(--control-icon-padding, 0.375rem);
+        }
+    }
+
+    .dark-mode-toggle-button[data-size="dock"],
+    .glass-dock
+        .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not(
+            [data-size="control"]
+        ) {
+        --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn));
+        /* AY.W-DOCK-CHROME §2 — the in-dock toggle GLYPH insets to the nav-glyph
+           register. The toggle SVG carries `h-full w-full` (the utility layer, which
+           BEATS the component-layer `> svg { width: --dock-control-glyph-size }` rule
+           below), so the glyph fills whatever the PADDED box leaves. Prior the in-dock
+           padding fell to `var(--dock-icon-padding, 0)` (the token is never defined →
+           0 pad → the glyph filled the whole 40px box edge-to-edge, ~2.5× the 16-20px
+           nav glyphs — the user's "too large" read). Pad the box by HALF the box↔glyph
+           difference so the `h-full` SVG lands at exactly `--dock-icon-glyph` (the
+           `--dock-scale`-keyed size the nav icons paint) — optically UNIFORM with the
+           nav glyphs through the utility-win path, not fighting it. */
+        --dark-mode-toggle-padding: calc(
+            (
+                    var(--dock-control-size, var(--size-icon-btn)) -
+                        var(--dock-icon-glyph, 1.25rem)
+                ) / 2
+        );
+    }
+
+    /* AX.W06 USF-2 — the dock-control optical-size contract. The
+       DarkModeToggle renders its OWN internal SVG `h-full w-full` (it bypasses
+       the `--dock-icon-glyph`-sized `> svg` slot the `.dock-icon-button` family
+       uses), so IN-DOCK it filled the whole control box edge-to-edge (~2.5× the
+       nav glyphs) — `--dock-icon-padding` is NEVER DEFINED, so the
+       `--dark-mode-toggle-padding: var(--dock-icon-padding, 0)` above fell to the
+       `0` fallback and zero padding let the SVG fill the box. Route the in-dock
+       toggle glyph through `--dock-control-glyph-size` (the ONE size the whole
+       dock-control family reads, default = `--dock-icon-glyph`, the same
+       `--dock-scale`-keyed glyph the nav icons paint), so the toggle is optically
+       UNIFORM with the nav glyphs WHEN DOCKED. The `h-full w-full` SVG stays
+       correct for the STANDALONE DarkModeToggle sizes (no `.glass-dock`
+       ancestor); this rule is scoped to the in-dock path only. Machine-checked by
+       the dock-control optical-parity gate, not eyeballed. */
+    .glass-dock
+        .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not(
+            [data-size="control"]
+        )
+        > svg {
+        width: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
+        height: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
+    }
+}