@mkbabb/glass-ui 4.2.0 → 6.0.0

package/src/styles/dock/stack-rail.css

@@ -1,352 +0,0 @@
-/* dock/stack-rail.css — BC.W-DOCK-STACK-RAIL — the macOS hover-expand STACK rail
- * (the clean-break rebuild; the divider-carousel chip-strip RETIRED).
- *
- * THE KEPT CHASSIS (glass-dock-codebase.md §2.5 — "that part STAYS"). The `.glass-dock`
- * root carries `contain: paint` + `backdrop-filter` + (on a vertical dock) `overflow` —
- * all three hard-clip every descendant to the dock's border box, so an `#rail` rendered
- * as a dock CHILD could never paint beyond the edge. The escape: GlassDock renders the
- * `#rail` as a SIBLING of `.glass-dock` inside the `.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 stack VISIBLY extends beyond the dock edge into its own gutter. No
- * `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it. This is
- * the load-bearing chassis the rebuild reuses; the box stays INVIOLATE (the slot feeds NO
- * size into the dock's intrinsic box).
- *
- * THE STACK (the verbatim spec — rail-spec-contradicted-divider-carousel). A `<DockStack>`
- * is one stack: a CORE anchor item (the always-visible dock(1) glyph) + N members. On
- * hover/focus of the core, the members FAN OUT next to the rail — a column (vertical dock)
- * / row (horizontal dock) of FULLY-VISIBLE glass icons springing open beside the line,
- * each a `--glass-bg-floating` glass icon (NEVER a shadowed half-tucked chip). The fan-out
- * is compositor-only (scale/translate/opacity/filter — the `proof:no-layout-animation`
- * floor, NO animated width/height/inset), staggered by `--dock-stack-stagger * var(--i)`.
- *
- * CLEARS CONTENT BY TOPOLOGY (THE HEADLINE — ba-dock-shell-gestalt-fail-revoked +
- * ba-chip-graze). The stack lives BEYOND the dock edge in its own gutter (the
- * `chipOverMain: false` topology), the fan extending AWAY from content, never over
- * `<main>` / the `<h1>` / a form field at any y. The chip-graze that revoked the dock/shell
- * PASS cannot recur.
- *
- * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
-@layer components {
-    :root {
-        /* The beyond-edge extent — how far the stack reaches into the gutter past the dock
-           edge. Rides `--dock-scale` so it tracks the coarse-pointer density thread. (KEPT
-           token, re-conceived from the divider-carousel's symmetric overrun to the stack's
-           one-way gutter reach.) */
-        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
-        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first, NEVER a
-           raw macOS-dock CSS paste). */
-        --dock-stack-stagger: 28ms; /* the per-member fan delay (× var(--i)) */
-        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
-        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
-        --dock-stack-fold: 0.4; /* the at-rest fold scale (the members tuck behind the core) */
-        /* BE.W-DOCK-RAIL-REALIZE — the facet-carousel accent strength. The per-facet
-           `--glass-accent` hue rides the THIN rim/glint at this bounded whisper (the
-           BB.W-GLASS-ACCENT ≤55% rim ceiling — the warm-cream core + the AA legibility
-           survive). A consumer retunes the whole carousel's accent intensity from one
-           `:root`/scope override; the rest of the rail is byte-identical. */
-        --dock-facet-accent-strength: 48%;
-    }
-
-    /* The dock-frame wrapper — KEPT. DEFAULT (`display: contents`) is layout-transparent
-       (byte-identical no-rail path). When a `#rail` is authored it lifts to a real
-       NON-clipping positioning context so the abs-positioned slot anchors to the dock box
-       yet escapes the dock's clip. */
-    .glass-dock-frame {
-        display: contents;
-    }
-    .glass-dock-frame[data-has-rail],
-    /* BD.W-DOCK-CORE (II.2 — F-1) — a SPLITTABLE dock frame is ALSO a non-clipping
-       positioning context: the fission island + goo neck render as frame siblings of
-       `.glass-dock` and must paint OUTSIDE the dock's `contain: paint` clip box (beside/
-       above/below the source pill). Same escape the rail uses. */
-    .glass-dock-frame[data-splittable] {
-        display: inline-flex;
-        position: relative;
-        /* No containment, no overflow, no blur — the WHOLE point: the stack/island must
-           paint beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its
-           box == the dock box and the rail/island anchors to the true edge. */
-        /* BD.W-DOCK-CORE (II.2 — F-1) — the ISLAND REACH resolved on the FRAME (the common
-           ancestor) so BOTH the pieces (inside the dock) AND the island/neck (frame
-           siblings) read ONE reach: the cluster lands exactly where the island plate
-           materializes. A `var(--dock-island-reach, 9rem)` form so a consumer ancestor
-           (a gallery tile) can retune the detach distance via a `:root`/ancestor override
-           — the frame re-PUBLISHES it (not a hard set that would shadow the override). */
-        --dock-island-reach: var(--dock-island-reach-override, 9rem);
-    }
-    .glass-dock-frame[data-has-rail].vertical,
-    .glass-dock-frame[data-splittable].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; `<DockStack>` owns the core + fan. The slot seats at the dock EDGE
-       (the `position` start/end), NOT a `[data-rail-anchor]` divider seam (the seam-locator
-       RETIRED). It is pass-through; the controls re-arm pointer events. */
-    .dock-hairline-slot {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-        z-index: 1;
-    }
-    .dock-hairline-slot > * {
-        pointer-events: auto;
-    }
-
-    /* VERTICAL (column) dock — the stack hangs off the TRAILING (inline-end) edge in its
-       gutter, the core seated at the dock's block-end (the macOS-stack anchor: the
-       bottom-most member at the dock floor, the rest fanning up the rail). The slot starts
-       at the dock's trailing edge + the extend reach, clear of <main> (which is to the
-       inline-start). */
-    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
-        inset-inline-start: 100%;
-        inset-inline-end: auto;
-        inset-block-end: 0;
-        inset-block-start: auto;
-        inline-size: var(--dock-rail-extend-length);
-        block-size: 100%;
-    }
-    /* HORIZONTAL (row) dock — the stack rises off the TOP (block-start) edge in its gutter
-       (a viewport-bottom dock keeps the fan ON-SCREEN above the row), the core at the dock's
-       inline-end, the members fanning up. Clear of <main> (which is above the dock). */
-    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
-        inset-block-end: 100%;
-        inset-block-start: auto;
-        inset-inline-end: 0;
-        inset-inline-start: auto;
-        block-size: var(--dock-rail-extend-length);
-        inline-size: 100%;
-    }
-
-    /* ── The stack ────────────────────────────────────────────────────────────────── */
-    .dock-stack {
-        position: relative;
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* the core anchors at the gutter end nearest the dock; the fan extends AWAY into
-           the gutter (clear of content). */
-    }
-    /* Vertical dock — the stack is a ROW: core nearest the dock edge, members fanning out
-       (inline) into the trailing gutter. Anchored block-end (the bottom-most member at the
-       dock floor — the macOS-stack anchor topology). */
-    .dock-stack.vertical {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-    /* Horizontal dock — the stack is a COLUMN: core nearest the dock edge (block-end),
-       members fanning UP into the gutter above the row. */
-    .dock-stack.horizontal {
-        flex-direction: column-reverse;
-        align-items: center;
-    }
-
-    /* The CORE anchor — the always-visible dock(1) glyph. A floating glass plate (it is
-       chrome OUTSIDE the dock substrate, so it carries its OWN glass register, not the
-       transparent in-dock recipe). */
-    .dock-stack-core {
-        flex: 0 0 auto;
-        z-index: 1;
-    }
-
-    /* The fanned members — the FadingScroll port (the one scroll-fade port). The fan's
-       main-axis extent caps at `--dock-stack-visible` members; an >visibleCount stack
-       scrolls (the port feathers the overflow). */
-    .dock-stack-fan {
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* scoped main-axis budget — the fan shows `--dock-stack-visible` members then
-           scrolls (the n-stack reachable by scrolling the rail, not the dock box). */
-    }
-    .dock-stack.vertical .dock-stack-fan {
-        flex-direction: row;
-        align-items: flex-end;
-        max-inline-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-    .dock-stack.horizontal .dock-stack-fan {
-        flex-direction: column-reverse;
-        align-items: center;
-        max-block-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-
-    /* Each member — a FULLY-VISIBLE glass icon (the `--glass-bg-floating` tier + the
-       catch-light rim), NEVER a shadowed half-tucked chip (the "NOT shadowed" verbatim
-       ask). It composes the `.dock-icon-button` base; the stack-scoped surface override
-       (0,2,0) beats the base `.dock-icon-button` (0,1,0) on source-order tie without
-       `!important`. */
-    .dock-stack-fan .dock-stack-member {
-        flex: 0 0 auto;
-        inline-size: var(--dock-stack-member-size);
-        block-size: var(--dock-stack-member-size);
-        background: var(--glass-bg-floating);
-        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);
-        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
-        /* THE FAN-OUT — compositor-only (scale/translate/opacity/filter), NO animated
-           width/height/inset (proof:no-layout-animation). At rest each member is folded
-           behind the core: scaled-down, translated toward the rail (the dock edge),
-           transparent, and a slight materialize blur. The hover-expand springs them OUT
-           staggered by `--dock-stack-stagger * var(--i)` in reading order. */
-        opacity: 0;
-        scale: var(--dock-stack-fold);
-        filter: blur(1px);
-        transition:
-            opacity var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            scale var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            translate var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            filter var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            background-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* Vertical dock — at rest the members tuck toward the dock edge (inline-start). */
-    .dock-stack.vertical .dock-stack-member {
-        translate: calc(-1 * var(--dock-rail-extend-length)) 0;
-    }
-    /* Horizontal dock — at rest the members tuck DOWN toward the dock edge (block-end). */
-    .dock-stack.horizontal .dock-stack-member {
-        translate: 0 var(--dock-rail-extend-length);
-    }
-    /* EXPANDED — the members spring OUT to their fanned positions (full scale, in place,
-       opaque, crisp). The stagger lives in the per-member transition-delay. */
-    .dock-stack.is-expanded .dock-stack-member {
-        opacity: 1;
-        scale: 1;
-        translate: 0 0;
-        filter: blur(0);
-    }
-    .dark .dock-stack-fan .dock-stack-member {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-    /* The hover/active register — the floating plate firms, the glyph wakes (NOT a
-       saturated brand hue; the selected-reads-as-glass tier, W-REGISTER-IOS). */
-    .dock-stack-fan .dock-stack-member:hover {
-        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
-        color: var(--dock-fg-on-aurora, var(--foreground));
-    }
-    .dock-stack-fan .dock-stack-member.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-stack-fan .dock-stack-member.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);
-    }
-    .dock-stack-fan .dock-stack-member svg {
-        inline-size: 0.875rem;
-        block-size: 0.875rem;
-        flex-shrink: 0;
-    }
-
-    /* ── The FACET-carousel mode (BE.W-DOCK-RAIL-REALIZE) ─────────────────────────────
-       The re-instated AZ context carousel: each member is a context FACET CHIP carrying
-       its OWN `--glass-accent` hue (written per-chip by DockStack in facets mode), so the
-       strip reads as a row of distinct accent-tinted contexts — NOT the macOS un-tinted
-       glyph fan. The chip composes its rim+glint DIRECTLY from the per-instance
-       `--glass-accent`/`--glass-accent-strength` axis (the SAME `color-mix(in oklab, …)`
-       seam `glass/rim.css` composes for `.glass-material` — NOT a fork): the warm rim ink
-       mixes toward the facet hue at the bounded strength, so each facet's RIM + the inner
-       glint carries that context's color. At the resting `transparent`/`0%` no-op this is
-       byte-identical to the stack member; the facet hue is the consumer's context color
-       (presets-in-consumers — never a library token). The active facet stays on the
-       selected-as-glass `--dock-control-active-bg` tier (W-REGISTER-IOS — the lift is the
-       glass tier, the accent is the rim DECORATION; the two are disjoint). */
-    .dock-stack-fan .dock-facet-chip {
-        /* the accent-composed rim — the warm catch-light ink mixed toward the facet hue
-           (the rim.css `--glass-material-rim` seam, inlined for the chip). At 0% it is the
-           bare `--glass-edge-light` rim (the no-op floor). */
-        --dock-facet-rim-ink: color-mix(
-            in oklab,
-            var(--glass-rim-ink, hsl(0 0% 100% / 0.3)),
-            var(--glass-accent) var(--glass-accent-strength, 0%)
-        );
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular),
-            /* the per-facet glint — a soft chromatic halo of the facet's own hue, a
-               whisper at the rim (the §6 calm register; transparent at the 0% no-op). */
-            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-    }
-    .dark .dock-stack-fan .dock-facet-chip {
-        --dock-facet-rim-ink: color-mix(
-            in oklab,
-            var(--glass-rim-ink, hsl(0 0% 100% / 0.4)),
-            var(--glass-accent) var(--glass-accent-strength, 0%)
-        );
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-    /* the φ-tier DEPTH read (railProjection.projectFacets) — when the carousel is
-       expanded, each facet seats at its recession scale + opacity (the active forward +
-       full, the neighbours receding). The tier vars default to the 1/1 identity so a
-       non-facet member is byte-identical. Compositor-only (scale/opacity — the
-       proof:no-layout-animation floor). */
-    .dock-stack.is-expanded .dock-facet-chip {
-        scale: var(--dock-facet-tier-scale, 1);
-        opacity: var(--dock-facet-tier-opacity, 1);
-    }
-    /* the active facet — the selected-as-glass tier lift, the accent rim STILL reading
-       (the context's hue marks the active facet on top of the lift). */
-    .dock-stack-fan .dock-facet-chip.is-active {
-        background: var(--dock-control-active-bg, var(--glass-bg-floating));
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular),
-            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
-    }
-    .dark .dock-stack-fan .dock-facet-chip.is-active {
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
-    }
-
-    /* PRM — the fan SNAPS to terminal (the fade survives, the transform drops — P6 /
-       proof:no-layout-animation PRM carve). No spring travel, no stagger, no blur-settle. */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-stack-fan .dock-stack-member {
-            transition:
-                opacity var(--duration-fast) linear,
-                background-color var(--duration-fast) var(--ease-standard),
-                box-shadow var(--duration-fast) var(--ease-standard);
-            scale: 1;
-            translate: 0 0;
-            filter: none;
-        }
-    }
-}

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

@@ -1,122 +0,0 @@
-/* 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-control-glyph-size`
-           (default `--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.
-
-           BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — the inset subtracts
-           `--dock-control-glyph-size`, the SAME ONE knob the SVG `width`/`height`
-           reads below, so the pad and the glyph stay LOCKED (a consumer retinting
-           `--dock-control-glyph-size` moves both in lockstep — no drift between the
-           box pad and the painted glyph). `--dock-control-size` AND
-           `--dock-control-glyph-size` both INHERIT from `.glass-dock[data-density]`,
-           where the coarse `--dock-scale` re-declare (overflow.css) re-resolves them
-           in lockstep — so the calc reads the coarse-scaled values on a coarse
-           pointer too (the AZ.R5-TOKENS substitution-vs-inheritance trap closed for
-           the toggle glyph: the var() resolves at the toggle button, reading the
-           coarse-re-resolved inherited tokens, never the frozen `:root` scale). */
-        --dark-mode-toggle-padding: calc(
-            (
-                    var(--dock-control-size, var(--size-icon-btn)) -
-                        var(--dock-control-glyph-size, 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));
-    }
-}

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

@@ -1,189 +0,0 @@
-/* dock-controls/icon-button.css — the `.dock-icon-button` control family
-   (AZ.W-CARVE partial 1 of 5; carved out of dock-controls.css).
-
-   The base rule (size/radius/legibility colour/transition), the glass icon-hover
-   fill (AT.W7-dock-b / AX.W45 DK2), the iOS press DARKEN-plus-shrink
-   (AZ.W-REGISTER-IOS), the focus + active-paint cohort (O.W6 Lane B), the
-   library-owned glyph sizing (AX.W45 D15), + the `--compact` size override.
-
-   Opens its OWN `@layer components` (same layer as the carve siblings) so the
-   carve is cascade-isomorphic. @import-ed after the shared `:where()` group at
-   the dock-controls.css root. */
-
-@layer components {
-    .dock-icon-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        width: var(--dock-control-size, var(--size-icon-btn));
-        height: var(--dock-control-size, var(--size-icon-btn));
-        /* 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
-           dock over an aurora can lift contrast per-backdrop. The muted icon
-           weight mixes that base down with `--opacity-icon-muted`. */
-        color: color-mix(
-            in srgb,
-            var(--dock-fg-on-aurora, var(--foreground))
-                calc(var(--opacity-icon-muted) * 100%),
-            transparent
-        );
-        outline: none;
-        transition:
-            background-color var(--dock-motion-fast),
-            color var(--dock-motion-fast),
-            /* AT.W7-dock-b — `scale` carries the press micro-feedback spring
-               (transform-scoped only; the surface fades stay on the flat ease). */
-                scale var(--dock-press-spring),
-            opacity var(--dock-motion-fast),
-            /* The box-shadow fade now carries ONLY the focus-visible ring (shared
-               `:focus-visible` group in dock.css) + the active-state
-               `--dock-active-shadow` — the AX.W09-retired hover `--glass-highlight`
-               specular no longer rides it. */
-                box-shadow var(--dock-motion-fast);
-
-        /* AT.W7-dock-b — glass icon-hover. The icon-button hover reads as a glass
-           surface, not a flat `--muted` plate: a translucent card-tinted fill is
-           the hover affordance. A consumer retunes the fill via `--dock-icon-hover-bg`.
-
-           AX.W09 — the dock control's SECOND specular (the `--glass-highlight`
-           hover box-shadow, AT.W7-dock-b) is RETIRED. The dock-icon-button is a
-           member of the unified `.glass-material` group (glass.css), so the moving
-           `::before` catch-light is now its SOLE specular owner — one light per
-           surface (the §0 "excise or fail" discipline). Stacking the
-           `--glass-highlight` inset box-shadow on the most-hovered, slides-floated
-           surface was the worst-offending double-light blowout; the card-tinted
-           hover fill carries the affordance without a second catch-light, and
-           dropping it also removes the `:not(:focus-visible)` specular-vs-ring
-           juggle. */
-        /* AX.W45 DK2 — the hover reads the FAMILY token `--dock-control-hover-bg`
-           (the per-control `--dock-icon-hover-bg` still wins if a consumer set it),
-           so the whole dock-control family shares ONE glass-translucent hover fill.
-           One source per state across icon/tab/picker (no four-vocabulary drift). */
-        &:hover:not(:disabled) {
-            background: var(
-                --dock-icon-hover-bg,
-                var(--dock-control-hover-bg)
-            );
-            color: var(--btn-hover-color, var(--foreground));
-            scale: var(--scale-hover-dock);
-        }
-
-        /* AZ.W-REGISTER-IOS — the iOS press DARKEN-plus-shrink. Press lands the
-           glass-darken (`--dock-control-press-bg`, a tier below resting) alongside
-           the existing scale-press, so a tap reads "darken + shrink" (C4-INV-4 was
-           scale-only). Token-first — a consumer retunes via `--dock-control-press-bg`. */
-        &:active:not(:disabled) {
-            background: var(--dock-control-press-bg);
-            scale: var(--scale-press-dock);
-        }
-
-        /* W-NAV-DOCK-FIX — the four-state DISABLED register. A boundary nav control
-           (prev/next at the first/last item) stays PRESENT but disabled so the row
-           geometry holds (never DOM-absent — the "flaky" read). It dims to the shared
-           disabled opacity + suppresses the press/pointer (the hover/active rules
-           already `:not(:disabled)`-exclude it, so this only needs the dim + the
-           pointer-suppress). Compositor-only (opacity); no layout shift. */
-        &:disabled {
-            opacity: var(--opacity-disabled, 0.4);
-            pointer-events: none;
-            cursor: default;
-        }
-
-        &:focus:not(:focus-visible) {
-            box-shadow: none;
-            outline: none;
-        }
-
-        /* O.W6 Lane B — token-ladder active paint. Defaults match the prior
-           hardcoded recipe (--muted bg + --foreground color, no transform / border
-           / shadow). Consumers override the active variant via the
-           `--dock-active-{bg,color,scale,border,shadow}` cohort scoped to a parent
-           (e.g. bbnf-buddy `ToolsLayer.vue` audacious active treatment) — no
-           `:deep()` escapes required. See tokens.css §10 (dock geometry block). */
-        &:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
-            background: var(--dock-active-bg);
-            color: var(--dock-active-color);
-            scale: var(--dock-active-scale);
-            border: var(--dock-active-border);
-            box-shadow: var(--dock-active-shadow);
-        }
-
-        /* BC.W-DOCK-ENGINE cross-repo fold (fourier-M #10) — the `<DockIconButton
-           :active>` selectable register. The `data-active` hook the component stamps
-           reads the rail's "selected reads as glass" tier (`--dock-control-active-bg`,
-           default `--glass-bg-floating` — a GLASS tier ABOVE the rest fill, NEVER a
-           saturated brand hue, per W-REGISTER-IOS). Distinct from the consumer
-           `--dock-active-*` cohort above (a parent-scoped audacious override): this is
-           the library's default selected glass, ergonomic sugar over the shipped
-           register so a selectable dock control needs no hand-rolled active paint. The
-           glyph/label firm to the full warm-ink, mirroring the rail's `.is-active`.
-
-           BD.W-DOCK-CORE (P4 deferred) — the selected pill now COMPOSES the shared
-           `.glass-capsule` register (the component adds the `.glass-capsule` class when
-           `active`). So instead of painting a bare `background`, the `[data-active]`
-           rung re-points `--glass-capsule-fill` (the override hook the capsule register
-           exposes) to the selected glass tier — the capsule's lifted-plate composite
-           (rim + lift + the warm-floor fill base) reads the selected tier WITHOUT
-           forking the register (the selected-parity rung). The glyph firms to the full
-           warm-ink. */
-        &[data-active] {
-            --glass-capsule-fill: var(
-                --dock-control-active-bg,
-                var(--glass-bg-floating)
-            );
-            /* Re-assert the capsule fill as the painted background — the base
-               `.dock-icon-button { background: transparent }` (same layer, later
-               source order, equal specificity) would otherwise win over
-               `.glass-capsule`'s background; this `[data-active]` rule (specificity
-               0,2,0 > the base 0,1,0) hands the selected pill its lifted-glass fill.
-               The capsule's rim/lift `box-shadow` + `backdrop-filter` already apply
-               (the base rule never sets those). */
-            background: var(--glass-capsule-fill);
-            color: var(--dock-fg-on-aurora, var(--foreground));
-        }
-    }
-
-    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
-       group in dock.css. The box-shadow fade transition lives on the base
-       `.dock-icon-button` rule (it carries the focus-ring + active-shadow fade
-       since AX.W09 retired the hover `--glass-highlight` specular), so no
-       per-state transition override is needed. */
-
-    /* AX.W45 D15 — LIBRARY GLYPH OWNERSHIP. The dock icon-button now sizes its glyph
-       (mirroring `.dark-mode-toggle-button > svg`), so the glyph scales WITH the box
-       on the `--dock-scale` multiplier instead of swimming at a fixed consumer size.
-       `--dock-icon-glyph: calc(1.25rem * var(--dock-scale))` (tokens.css) rides the
-       multiplier — at 1.5× the glyph is 30px in a 60px box, the desktop proportion.
-       A consumer passing an explicit lucide size class still WINS (utility layer >
-       component layer) — a DEFAULT, not a ceiling, matching the `.dock-tab-button`
-       font-size precedent. */
-    .dock-icon-button > svg {
-        width: var(--dock-icon-glyph, 1.25rem);
-        height: var(--dock-icon-glyph, 1.25rem);
-    }
-
-    .dock-icon-button--compact {
-        width: var(--dock-compact-control-size, auto);
-        height: var(--dock-compact-control-size, auto);
-        min-width: var(--dock-compact-control-min-width, 0);
-        padding: var(--dock-compact-control-padding, 0.25rem);
-    }
-}