@mkbabb/glass-ui 3.13.0 → 4.0.0

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

@@ -28,10 +28,13 @@
  */
 @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. */
+        /* BA.W-DOCK-SECTIONS RE-SEMANTIC — the SYMMETRIC dual-side overrun length. The
+           seam line crosses THROUGH the dock and protrudes past BOTH edges by this
+           amount each side (the line's cross-extent = dock extent + 2× this knob,
+           centered on the seam). Was a one-way connector length pre-wave; now the
+           per-side overrun of the dual-side seam line. A proportioned default (a touch
+           more than a dock control); 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));
     }
 
@@ -72,128 +75,198 @@
         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. */
+    /* BA.W-DOCK-SECTIONS — THE DIVIDER-SEAM RE-SEAT (the 4th-rail re-conception; the
+       midline/edge seat workaround #4 is DELETED, inv-6). The rail line co-locates with
+       a NAMED `<DockSeparator anchor>` seam: GlassDock measures that separator's offset
+       within the frame and writes `--dock-rail-seam-offset` (the cross-axis center of the
+       divider). The slot anchors AT the seam — NOT `50%` (the vertical midline workaround
+       the H1 band motivated), NOT the dock edge — and the line OVERRUNS BOTH dock edges
+       by `--dock-rail-extend-length` each side (a SYMMETRIC dual-side overrun, replacing
+       the one-way connector). The chips fan FLUSH alongside the line. Because the slot is
+       `position: absolute` on the non-clipping frame, the dock box stays INVIOLATE (it
+       feeds NO size into the dock's intrinsic box — proof:rail-extend box-equality holds).
+
+       FALLBACK: when no anchored separator is present `--dock-rail-seam-offset` is unset;
+       the `var(…, 50%)`-FREE fallback seats the line at the dock's near edge via the
+       extent default (never the midline seat). */
+
+    /* VERTICAL (column) dock — the rail is a HORIZONTAL line. It anchors on the BLOCK
+       axis at the ℱ-separator's Y (the seam offset) and overruns on the INLINE axis past
+       BOTH the leading and trailing edges: the slot starts `--dock-rail-extend-length`
+       LEFT of the dock and its inline extent is the dock width + 2× the overrun, so the
+       line protrudes symmetrically each side. The chips fan FLUSH in the trailing gutter
+       (translated past the dock's trailing 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-start: var(--dock-rail-seam-offset, 0px);
         inset-block-end: auto;
+        inset-inline-start: calc(-1 * var(--dock-rail-extend-length));
+        inset-inline-end: auto;
+        /* the line's inline extent = dock width + 2× overrun (symmetric, centered). */
+        inline-size: calc(100% + 2 * var(--dock-rail-extend-length));
         translate: 0 -50%;
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
         justify-content: flex-start;
     }
+    /* HORIZONTAL (row) dock — the rail is a VERTICAL line. It anchors on the INLINE axis
+       at the nav-separator's X (the seam offset) and overruns on the BLOCK axis past BOTH
+       the top and bottom edges: the slot starts `--dock-rail-extend-length` ABOVE the
+       dock and its block extent is the dock height + 2× the overrun. The chips fan FLUSH
+       above the line (translated above the dock's top edge so they stay ON-SCREEN for a
+       viewport-bottom-anchored dock). */
     .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
-        inset-block-end: 100%;
-        inset-inline-start: 0;
+        inset-inline-start: var(--dock-rail-seam-offset, 0px);
         inset-inline-end: auto;
+        inset-block-start: calc(-1 * var(--dock-rail-extend-length));
+        inset-block-end: auto;
+        /* the line's block extent = dock height + 2× overrun (symmetric, centered). */
+        block-size: calc(100% + 2 * var(--dock-rail-extend-length));
+        translate: -50% 0;
         flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-end;
+        align-items: center;
+        justify-content: flex-start;
     }
 
-    /* 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). */
+    /* BA.W-DOCK-SECTIONS — the seam wrapper. It FILLS the slot (which is already the
+       dock + 2× overrun, centered on the seam) and carries (a) the `::before` seam line
+       running the full extent and (b) the `.dock-hairline-strip` — the flush fan of
+       glass chips butted to the line (the macOS fan-out, rectilinear; NOT a 40px-adrift
+       carousel). The chips paint OUTSIDE the dock box (the slot is a `.glass-dock-frame`
+       sibling — R4 / box INVIOLATE). */
     .dock-hairline-extend {
         position: relative;
         display: flex;
         gap: 0;
+        inline-size: 100%;
+        block-size: 100%;
     }
-    /* Vertical dock — connector (a horizontal line) then the chip COLUMN, left-to-right
-       (the carousel rides BESIDE the dock in its trailing gutter). */
+    /* Vertical dock — the seam is a horizontal line at the slot's block center; the chip
+       ROW fans FLUSH just past the dock's trailing edge, butted to the line. */
     .dock-hairline-extend.vertical {
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
+        justify-content: flex-end;
     }
-    /* 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). */
+    /* Horizontal dock — the seam is a vertical line at the slot's inline center; the chip
+       COLUMN/ROW fans FLUSH above the line (the viewport-bottom dock keeps it on-screen). */
     .dock-hairline-extend.horizontal {
-        flex-direction: column-reverse;
-        align-items: flex-start;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+    /* BA.W-DOCK-SECTIONS — the chips fan FLUSH at the DOCK's near edge, butted to the
+       seam line where it crosses the dock boundary (NOT at the slot's far overrun end,
+       which would re-float them adrift). The positioning rides the `<FadingScroll>`
+       WRAPPER (`.dock-hairline-fade`), NOT the strip itself — the strip stays the
+       in-flow scroll content of FadingScroll (an absolutely-positioned strip would
+       escape FadingScroll's flow → its scroll-port collapses to 0 + the mask hides the
+       chips). A vertical dock's fade rides the dock's TRAILING (inline-end) edge in its
+       gutter; a horizontal dock's fade rides the dock's TOP (block-start) edge. The seam
+       line still protrudes past BOTH edges (the `::before` spans the full slot); only the
+       CHIP fade butts the dock so it reads as a fan growing FROM the divider. */
+    .dock-hairline-fade {
+        max-inline-size: var(--dock-rail-strip-max, 60vw);
+    }
+    .dock-hairline-extend.vertical .dock-hairline-fade {
+        position: absolute;
+        inset-inline-start: calc(100% - var(--dock-rail-extend-length));
+        inset-block-start: 50%;
+        translate: 0 -50%;
+    }
+    .dock-hairline-extend.horizontal .dock-hairline-fade {
+        position: absolute;
+        inset-block-end: calc(100% - var(--dock-rail-extend-length));
+        inset-inline-start: 50%;
+        translate: -50% 0;
     }
 
-    /* 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. */
+    /* R3 — the VISIBLE seam line (no longer a one-way connector tether). R1 — the
+       `--border-hairline` token pair (catch-light + under-shadow) + a faint background
+       fallback so the whisper reads even over a busy backdrop. BA.W-DOCK-SECTIONS: the
+       line now RUNS THE FULL SLOT EXTENT (the slot is already dock + 2× overrun,
+       centered on the seam), so it crosses THROUGH the dock and protrudes past BOTH
+       edges — ONE continuous line, NOT a 40px tether to a detached carousel. The
+       `min-{inline,block}-size: var(--dock-rail-extend-length)` floor stays as the
+       proof:rail-extend / proof:rail3 R3 overrun witness (the line is always ≥ the
+       overrun length); the `100%` width/height makes it the full symmetric seam. The
+       tether `margin` is GONE — the chips fan FLUSH against the line (S3). */
     .dock-hairline-extend::before {
         content: "";
         flex: 0 0 auto;
+        position: absolute;
         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. */
+    /* Vertical dock — a HORIZONTAL line spanning the FULL slot inline extent (dock +
+       2× overrun), seated on the seam Y; the chips fan flush in the trailing gutter. */
     .dock-hairline-extend.vertical::before {
         block-size: 1px;
-        inline-size: var(--dock-rail-extend-length);
+        inline-size: 100%;
         min-inline-size: var(--dock-rail-extend-length);
-        align-self: center;
-        margin-inline-end: 0.25rem;
+        inset-block-start: 50%;
+        inset-inline-start: 0;
+        translate: 0 -50%;
     }
-    /* 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. */
+    /* Horizontal dock — a VERTICAL line spanning the FULL slot block extent (dock +
+       2× overrun), seated on the seam X; the chips fan flush above the line. */
     .dock-hairline-extend.horizontal::before {
         inline-size: 1px;
-        block-size: var(--dock-rail-extend-length);
+        block-size: 100%;
         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;
+        inset-inline-start: 50%;
+        inset-block-start: 0;
+        translate: -50% 0;
     }
 
-    /* `extent="inset"` keeps the connector flush at the edge (no overrun). */
+    /* `extent="inset"` zeroes the overrun (the line stays flush within the dock edges —
+       the slot's `inline-size`/`block-size` collapse to the dock box, no protrusion). */
     .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;
     }
+    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot:has(.extent-inset) {
+        inset-inline-start: 0;
+        inline-size: 100%;
+    }
+    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot:has(.extent-inset) {
+        inset-block-start: 0;
+        block-size: 100%;
+    }
 
-    /* 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). */
+    /* BA.W-DOCK-SECTIONS — the FLUSH chip fan. The chips butt the seam line (NO adrift
+       tether — the strip's positioning context is the seam wrapper, not a 40px offset).
+       The strip keeps `scroll-snap` (the carousel detent) + a single `overflow` axis as
+       the proof:rail3 R5 cyclable witness, but the PRIMARY scroll-fade port is the
+       `<FadingScroll>` wrapper DockRail composes (S5 — the bespoke overflow strip is the
+       inert inner fallback; FadingScroll owns the edge fade, no duplicate mask here). */
     .dock-hairline-strip {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         gap: var(--dock-rail-strip-gap, 0.375rem);
         scrollbar-width: none;
         padding: 0.125rem;
+        /* the collapse-retract origin: the chips translate/fade INTO the rail toward the
+           seam on collapse, leaving the stub protrusion. The rest state is full-out. */
+        transition:
+            opacity var(--duration-normal) var(--ease-standard),
+            translate var(--duration-normal) var(--dock-resize-spring, var(--ease-standard));
     }
     .dock-hairline-strip::-webkit-scrollbar {
         display: none;
     }
-    /* Vertical dock → a COLUMN carousel beside the dock, scrolls on the block axis. */
+    /* Vertical dock → a ROW of chips beside the dock, flush to the horizontal seam;
+       scrolls on the inline axis when they exceed the budget. */
     .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;
+        flex-direction: row;
+        max-inline-size: var(--dock-rail-strip-max, 60vw);
+        overflow-x: auto;
+        overflow-y: visible;
+        scroll-snap-type: x proximity;
     }
-    /* Horizontal dock → a ROW carousel above the dock, scrolls on the inline axis. */
+    /* Horizontal dock → a ROW of chips above the dock, flush to the vertical seam;
+       scrolls on the inline axis when they exceed the budget. */
     .dock-hairline-extend.horizontal .dock-hairline-strip {
         flex-direction: row;
         align-items: center;
@@ -206,6 +279,30 @@
         scroll-snap-align: start;
     }
 
+    /* BA.W-DOCK-SECTIONS — THE COLLAPSE-RETRACT (the macOS fan-out retraction; the brief
+       + R8-6 fan-out half). When the dock collapses the chips fold back behind a slight
+       protruding stub at the dock edge: they translate along the seam axis INTO the rail
+       and fade, the seam line keeping a SLIGHT protrusion (the rail never detaches — it
+       retracts along the seam axis). The stub fraction is `--dock-rail-retract-stub`. */
+    .glass-dock.collapsed ~ .dock-hairline-slot .dock-hairline-strip,
+    .glass-dock-frame:has(.glass-dock.collapsed) .dock-hairline-strip {
+        opacity: 0;
+        translate: calc(var(--dock-rail-extend-length) * (1 - var(--dock-rail-retract-stub, 0.35)))
+            0;
+    }
+    .glass-dock.collapsed ~ .dock-hairline-slot .dock-hairline-extend.horizontal .dock-hairline-strip,
+    .glass-dock-frame:has(.glass-dock.collapsed) .dock-hairline-extend.horizontal .dock-hairline-strip {
+        translate: 0
+            calc(-1 * var(--dock-rail-extend-length) * (1 - var(--dock-rail-retract-stub, 0.35)));
+    }
+    /* PRM — snap to the retracted state, no travel (the retract must not animate under
+       reduced motion; only the discrete opacity/position endpoints apply). */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-hairline-strip {
+            transition: none;
+        }
+    }
+
     /* 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

package/dist/styles/dock/section.css

@@ -0,0 +1,59 @@
+/* BA.W-DOCK-SECTIONS — the <DockSection> tripartite grouping recipe + (in .2) the
+ * seam fan-out / retract chrome.
+ *
+ * THE THREE-ZONE GESTALT (R8-9 — "the docks COMPLETELY lack sections"). The
+ * <DockSection> chassis groups the dock's already-in-flow controls into a
+ * rail-core | divided sections | nav silhouette and demarcates the zones with the
+ * existing <DockSeparator> primitive — NO box-inflation (the section grouping is the
+ * controls already in the dock plus the divider seams; it does NOT re-mount a
+ * <DockLayerGroup> switcher rail, the W-RAIL3 inflator that demanded column height).
+ *
+ * The chassis is layout-transparent by default: `display: contents` so the zones flow
+ * exactly as the bare controls did (the dock box shrink-wraps as before — the
+ * box-INVIOLATE contract). The zone wrappers carry the kind marker the recipe reads;
+ * they add NO size of their own. On a vertical (column) dock the section runs as a
+ * column; on a horizontal (row) dock it runs as a row — inheriting the dock's own
+ * flex axis, never establishing a competing one.
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other dock partials.
+ */
+@layer components {
+    /* The chassis root is layout-transparent — the zones inherit the dock's flex flow
+       (row or column) directly, so grouping into sections adds zero box. */
+    .dock-section {
+        display: contents;
+    }
+
+    /* A grouped zone — a flex run of the consumer's controls along the dock's axis.
+       It owns NO intrinsic size beyond `max-content` (the controls' own size), so the
+       dock keeps shrink-wrapping to its tight pill (box INVIOLATE). The gap matches the
+       dock's inter-control rhythm. */
+    .dock-section-zone {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem));
+    }
+
+    /* On a vertical (column) dock the zones stack — the section runs down the rail. */
+    .glass-dock.vertical .dock-section-zone {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The rail-core zone leads (the home/brand region); the nav zone trails. They are
+       the same flex run — the kind marker is for the recipe + a11y, not a layout fork.
+       The core (`data-kind="rail-core"`) zone gets a touch more breathing room from the
+       first section seam. The CSS token is `--core` (NOT `--rail-core`): the dock-band
+       "rail" noun is de-overloaded (AZ.W-DOCK-TAXONOMY); the data-attr carries the
+       spec's `rail-core` vocabulary, the class never says "rail". */
+    .dock-section-zone--core {
+        flex: 0 0 auto;
+    }
+    .dock-section-zone--nav {
+        flex: 0 0 auto;
+    }
+    .dock-section-zone--section {
+        flex: 0 1 auto;
+        min-inline-size: 0;
+    }
+}

package/dist/styles/dock/shell.css

@@ -80,6 +80,19 @@
            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). */
+        /* BA.W-DOCK-GEOMETRY contain:paint AUDIT verdict (a) — the control-plate
+           clearance fix (the `--dock-control-safe-inset` painted-plate inset, scope
+           1) + the scroll-port cross-axis un-clip (scope 2) keep the maximal
+           hover/active control plate INSIDE the dock padding box: the inset plate is
+           centered in its cell (≥1px slack/side at hover), the cell sits flush at the
+           dock content edge, and the `--dock-padding-block` (≈6px) padding holds the
+           plate ≥7px clear of the `contain: paint` border-box edge on the block axis.
+           So `contain: paint` is the NON-proximate second clip box (the lane's
+           `probe-bottomdock-nocontain.png` forced-root probe proved the inner
+           scroll-port box was proximate, not this) and it is UNEDITED here — the
+           inset + freed cross axis suffice, no containment lift on the control-plate
+           band. The π readback (W-DOCK-GEOMETRY-DELTA.md) records the live
+           plate-inside-padding margin number that binds this verdict. */
         contain: paint;
         display: inline-flex;
         align-items: center;
@@ -184,17 +197,33 @@
        scrolls — the scroll port only engages on real over-cap content. The
        block-axis morph clip stays `data-morphing`-gated above; this is the
        AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
-       anchor the column to the viewport without re-deriving the scroll plumbing. */
-    .glass-dock.vertical.always-expanded:not([data-morphing]),
-    .glass-dock.vertical.expanded:not([data-morphing]) {
+       anchor the column to the viewport without re-deriving the scroll plumbing.
+
+       BA.W-DOCK-GEOMETRY (DC-1) — the port is now GATED behind the `dock-scroll-y`
+       opt-in (`overflow="scroll"`), NOT unconditional on every `.vertical.
+       always-expanded`. THE ROOT: `overflow-y: auto` is a scroll value, and CSS
+       Overflow §3 FORCES the sibling `overflow-x: visible` to COMPUTE to `auto` —
+       so the F6 pin never survived, and EVERY at-rest vertical dock (even a
+       fit-content shell that never scrolls) paid the cross-axis inline clip,
+       slicing a control's inset plate left/right (the live π readback measured
+       `overflow-x: auto` on the grow-to-fit SidebarDock). A vertical dock that
+       genuinely needs the cap+scroll opts IN via `overflow="scroll"` (the
+       `.dock-scroll-y` port in overflow.css, the SAME plumbing the F6 comment names);
+       a grow-to-fit vertical shell stays `overflow: visible` (line 186) on BOTH axes
+       so its inset control plate paints past the track. The fit-content shell pays
+       NO cross-axis clip for zero scroll benefit — the goal criterion's "the
+       scroll-port cross-axis clip no longer fires on a fit-content shell that never
+       scrolls", honored at the geometry root. */
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing]),
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing]) {
         overflow-x: visible;
         overflow-y: auto;
         scrollbar-width: none;
         overscroll-behavior-y: contain;
     }
 
-    .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar,
-    .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar {
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing])::-webkit-scrollbar,
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing])::-webkit-scrollbar {
         display: none;
     }
 

package/dist/styles/dock-controls/icon-button.css

@@ -20,10 +20,20 @@
         scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
-        padding: var(--dock-icon-padding, 0);
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The HIT
+           BOX stays the full `--dock-control-size` (the WCAG 2.5.5 touch floor on
+           the CELL), while the inset padding + `background-clip: content-box`
+           insets the PAINTED plate within it: the hover/active fill paints only the
+           content box (the cell minus the inset on every side), so the maximal
+           hover (×1.1) / active circle clears the cross-axis clip edge with ≥1px
+           margin — the lozenge dies at the plate diameter, not at the clip box. The
+           inset falls back to the prior `--dock-icon-padding` (0) when no dock
+           ancestor sets `--dock-control-safe-inset` (a standalone icon button). */
+        padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0));
         cursor: pointer;
         border: none;
         background: transparent;
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Foreground base routes through `--dock-fg-on-aurora` (defaults to
            `--foreground`, byte-identical to before) so a consumer floating the

package/dist/styles/dock-controls/tab-button.css

@@ -2,10 +2,10 @@
    (AZ.W-CARVE partial 3 of 5; carved out of dock-controls.css).
 
    The base rule (density-keyed height knob, padding, glass hover/active/press
-   cohort), the PRIMARY tier (the dock extension over `@utility btn-audacious` —
-   structural shell + the `--phase-color` disco-grain hover radial + the
-   `[data-phase]` backplate halo), and the SECONDARY tier (the quieter
-   edge-light/edge-shadow cross-control comma-group over tab + icon button).
+   cohort), the PRIMARY tier (the structural shell — taller min-height + wider
+   padding + a stronger base tint; the disco grain/halo RETIRED at BA.W-GLASS-CAL,
+   it now inherits the base glass hover register), and the SECONDARY tier (the
+   quieter edge-light/edge-shadow cross-control comma-group over tab + icon button).
    Opens its OWN `@layer components`; @import-ed after dark-mode-toggle.css. */
 
 @layer components {
@@ -29,6 +29,14 @@
         padding-block: var(--dock-tab-padding-block, 0.375rem);
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The tab's
+           OWN padding already insets a content box within the row-locked border box;
+           `background-clip: content-box` realizes that as a PAINTED-plate inset, so
+           the hover (×1.1) / active pill clears the cross-axis clip edge with margin
+           — the same plate-inset-within-cell principle the icon-button consumes via
+           `--dock-control-safe-inset`. The text + min-height keep the box at the row;
+           only the painted fill insets (no box growth, no glyph reflow). */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Default font-size carries through to text-only tab content; consumers
            wrapping content in an explicit type utility (e.g. `text-hero`,
@@ -86,91 +94,24 @@
 
     /* Tier — primary ────────────────────────────────────────────
      *
-     * Per W2.7 §9, §12, §13, §17. The primary tier composes three at-rest
-     * marks (top-highlight, bottom under-shadow, baseline glass) with three
-     * disco accents on hover (specular swap, sparkle sweep, disco-grain).
-     *
-     * Reservation: disco fires on hover only. At rest the button reads as
-     * a Vignelli-restrained composed glass surface. The `--phase-color`
-     * cascade (provided by `<InstrumentChassis>` via `data-phase`) tints
-     * the disco-grain radial only on hover; idle is neutral.
-     *
-     * K.W6 Lane B — the canonical disco-grain + sparkle-sweep + specular
-     * recipe lifted to `@utility btn-audacious` (utilities.css). The Vue
-     * <DockTabButton> attaches `btn-audacious` automatically when the
-     * consumer passes `data-tier="primary"`. The dock-local rules below
-     * are STRICTLY the dock extension: structural shell (padding, base
-     * surface tint, min-height) + phase-tint extensions (hover radial
-     * uses `--phase-color`, plus the `[data-phase]` `::before` halo).
+     * BA.W-GLASS-CAL (H2a) — the disco COLLAPSED. The primary tier was a SECOND
+     * disco surface: it composed `@utility btn-audacious` (auto-attached by
+     * <DockTabButton> on `data-tier="primary"`) PLUS a dock-local phase-grain
+     * (the `--glass-grain-opacity-disco` + `--paper-clean-texture`/`--phase-color`
+     * radial hover) PLUS a `[data-phase]` `::before` rest-halo. With the disco
+     * retired, the primary tier keeps ONLY its STRUCTURAL shell (taller min-height,
+     * wider padding, the slightly-stronger base tint that distinguishes it from the
+     * secondary tier) and inherits the plain de-red'd dock-control glass hover
+     * register from the base `.dock-tab-button` rule above (bg → `--dock-control-
+     * hover-bg`, scale → `--scale-hover-dock`, the specular gleam — the SAME register
+     * `.dock-icon-button` speaks). No grain, no phase-radial, no rest-halo. The
+     * <DockTabButton> auto-attach of `btn-audacious` is removed (the utility is gone).
      */
     .dock-tab-button[data-tier="primary"] {
         --dock-tab-min-height: 4rem;
         padding-inline: 1.5rem;
         background: color-mix(in srgb, var(--card) 60%, transparent);
         color: var(--foreground);
-
-        /* Phase-tint hover override — same disco-grain composition as
-         * `btn-audacious`, but the radial uses `--phase-color` (instrument-
-         * cluster axis) instead of the canonical `--primary`. The `--paper-
-         * clean-texture` overlay and `--glass-specular` shadow stack are
-         * inherited from the underlying `btn-audacious` utility. */
-        /* AX.W52 D19 — the phase-tint hover radial DEMOTED: the prior
-         * `ellipse at 30% 30%` at 18% was a loud top-LEFT corner hotspot. Toned to
-         * 8% and the anchor shifted off the hard corner toward a softer top-biased
-         * ellipse (`40% 25%`) with a tighter `transparent 55%` falloff, so it reads
-         * as a surface lift rather than a corner glow — the disco hover identity
-         * survives, the egregious corner bloom does not. */
-        &:hover:not(:disabled) {
-            --glass-grain-opacity: var(--glass-grain-opacity-disco, 0.08);
-            background-image:
-                var(--paper-clean-texture),
-                radial-gradient(
-                    ellipse at 40% 25%,
-                    color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    ),
-                    transparent 55%
-                );
-            background-blend-mode: overlay, normal;
-            background-size: var(--paper-texture-size), auto;
-        }
-
-        /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
-         *
-         * An inner glyph wrapper's own halo would be clipped by the pill's
-         * `overflow: hidden` and never escape the glyph box. This `::before`
-         * lifts the phase-tint to the pill itself so the glow composes with the
-         * whole CTA. Scoped to active phases — at idle / ready the pill stays
-         * neutral and inherits the W2.7 reservation ("disco fires on hover
-         * only"). */
-        /* AX.W52 D19 — the REST phase-halo `::before` (fires during a speedtest run
-         * on the most prominent dock control) DEMOTED on the same axis as the hover
-         * radial: 18%→8%, the hard `30% 30%` corner shifted to a softer `40% 25%`
-         * top-biased ellipse with a tighter `transparent 55%` falloff, and the
-         * `opacity: 1` dropped to 0.5 so the persistent run-time halo is a subtle
-         * surface lift, not a corner bloom that washes the pill for the whole run. */
-        &[data-phase]:not([data-phase="ready"]):not([data-phase="idle"])::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: radial-gradient(
-                ellipse at 40% 25%,
-                color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    )
-                    0%,
-                transparent 55%
-            );
-            pointer-events: none;
-            z-index: -1;
-            opacity: 0.5;
-            transition: opacity var(--duration-fast) var(--ease-standard);
-        }
     }
 
     /* Tier — secondary ──────────────────────────────────────────

package/dist/styles/dock-controls/triggers.css

@@ -26,6 +26,13 @@
         cursor: pointer;
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). As on the
+           tab button: the trigger's OWN padding insets a content box within the
+           row-locked border box, and `background-clip: content-box` realizes that
+           as a PAINTED-plate inset so the hover (×1.1) / open pill clears the
+           cross-axis clip edge — the same plate-inset-within-cell principle the
+           icon-button consumes via `--dock-control-safe-inset`. No box growth. */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
         color: color-mix(