@mkbabb/glass-ui 3.11.2 → 3.13.0

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

@@ -0,0 +1,133 @@
+/* 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));
+        padding: var(--dock-icon-padding, 0);
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        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);
+        }
+
+        &: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);
+        }
+    }
+
+    /* 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);
+    }
+}

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

@@ -0,0 +1,202 @@
+/* dock-controls/tab-button.css — the `.dock-tab-button` control family
+   (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).
+   Opens its OWN `@layer components`; @import-ed after dark-mode-toggle.css. */
+
+@layer components {
+    .dock-tab-button {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        /* P.W4 Lane B inline-absorb: the `--dock-tab-h` density-keyed height
+           knob (parallel to DockIconButton's --dock-control-size) merged
+           here from the prior DockTabButton.vue scoped style block. The
+           density rungs that set `--dock-tab-h` per tier live in dock.css
+           (the `.glass-dock[data-density="…"]` blocks) — Q.W3
+           Lane A consolidated them out of utilities.css, closing the
+           cascade-order split-brain. When a parent <GlassDock density="…">
+           sets `--dock-tab-h`, the tab-button reserves that row even when
+           the glyph + padding sum would ride lower. Falls through to
+           `--dock-tab-min-height` (kept for audacious-tier callers) and
+           finally to `auto`. R3-spec / audit-E P0-3. */
+        min-height: var(--dock-tab-h, var(--dock-tab-min-height, auto));
+        padding-inline: var(--dock-tab-padding-inline, 0.75rem);
+        padding-block: var(--dock-tab-padding-block, 0.375rem);
+        border: none;
+        background: transparent;
+        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`,
+           `text-display`) on an inner <span> win because Tailwind v4 ships
+           @utility blocks in @layer utilities, which ranks above @layer
+           components — so this declaration is a fallback, not a ceiling. */
+        font-size: var(--type-small);
+        line-height: 1;
+        color: var(--muted-foreground);
+        text-decoration: none;
+        cursor: pointer;
+        white-space: nowrap;
+        outline: none;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            /* AT.W7-dock-b — press micro-feedback spring (transform-scoped). */ scale
+                var(--dock-press-spring);
+
+        /* AX.W45 DK2 — converged onto the FAMILY hover/active token pair (the
+           surface-tint-8/10 ladder it spoke is ≈ the same intent — glass-translucent
+           foreground-over-transparent). ONE grammar across icon/tab/picker.
+           AX.W45-TUNE Q3/C3 — the hover MOTION channel is now UNIFIED: the
+           `--scale-hover-dock` lift fires here (it used to fire on only icon +
+           dropdown), so all four control members lift on hover as ONE register —
+           the bg cross-fade (glass-tier), the scale, and the specular gleam read
+           together BEFORE click. The transform rides `--dock-press-spring`
+           (`--spring-smooth`) per the W52 easing doctrine. */
+        &:hover:not(:disabled) {
+            background: var(--dock-control-hover-bg);
+            color: var(--foreground);
+            scale: var(--scale-hover-dock);
+        }
+
+        /* AZ.W-REGISTER-IOS — the iOS press darken-plus-shrink (see the icon-button). */
+        &:active:not(:disabled) {
+            background: var(--dock-control-press-bg);
+            scale: var(--scale-press-dock);
+        }
+
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
+
+        /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+           group in dock.css. */
+
+        &:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
+            background: var(--dock-control-active-bg);
+            color: var(--foreground);
+        }
+    }
+
+    /* 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).
+     */
+    .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 ──────────────────────────────────────────
+     *
+     * Companion to `data-tier="primary"`. Carries the same edge-light +
+     * edge-shadow skeu vocabulary at quieter weight: no disco accent, no
+     * sparkle, no curvature radial. Composes for icon-button consumers
+     * (chassis ActionCluster, SettingsCog) where the surface needs a
+     * glass-tier read but not the audacious primary punch. Per P.W1.B
+     * audit-C §3 — closes the four bare `<DockIconButton>` consumer sites
+     * (cog + back + retake + stop) without redefining the family. The
+     * secondary tier is a cross-control comma-group (tab + icon button), so it
+     * stays flat — nesting under one control would change coverage.
+     */
+    .dock-tab-button[data-tier="secondary"],
+    .dock-icon-button[data-tier="secondary"] {
+        background: color-mix(in srgb, var(--card) 50%, transparent);
+        border: 1px solid var(--glass-border-quiet);
+        box-shadow: var(--border-hairline), var(--glass-highlight);
+    }
+
+    .dock-tab-button[data-tier="secondary"]:hover:not(:disabled),
+    .dock-icon-button[data-tier="secondary"]:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--card) 65%, transparent);
+        box-shadow:
+            var(--glass-specular),
+            0 0.5px 0 0 rgb(0 0 0 / 0.06);
+    }
+}

package/dist/styles/dock-controls/touch-floor.css

@@ -0,0 +1,94 @@
+/* dock-controls/touch-floor.css — the tail overrides (AZ.W-CARVE partial 5 of 5;
+   carved out of dock-controls.css).
+
+   Two cohorts, both scoped overrides that MUST cascade AFTER the base control
+   families (so they @import last):
+     1. the coarse-pointer per-button touch-target floor on the STANDALONE
+        `.dock-icon-button` (the in-dock floor is the `--dock-scale` × `max(…,44px)`
+        clamp; this is the no-`.glass-dock`-ancestor half).
+     2. the vertical-dock rail SELECTED register (AX.W06 F2/F3 hoist +
+        AZ.W-REGISTER-IOS — the selected glyph reads warm-ink `--foreground` and
+        the leading-edge accent BAR is the translucent `--dock-selected-accent`
+        luminance-lift, the iOS-26/27 register).
+   Opens its OWN `@layer components`; @import-ed after triggers.css. */
+
+@layer components {
+    /* AX.W45 D15 — coarse-pointer touch floor, button-level half. The IN-DOCK floor
+       is subsumed into the `--dock-scale` multiplier + the `max(…, 44px)` clamp in
+       the dock.css density cascade (the in-dock control-size grows ~1.5× past the
+       44px target, the clamp guarantees the floor even below 1.0× scale). This
+       per-button rule is the STANDALONE half: a DockIconButton with NO `.glass-dock`
+       ancestor (a routed gear) has no density cascade lifting its size, so it keeps
+       the explicit `min-{block,inline}-size` floor. Scoped `:not(:where(.glass-dock
+       *))` so it does NOT double-stamp on an in-dock button (the cascade owns that —
+       one path per surface, no two-floor). Compact buttons opt out. */
+    @media (pointer: coarse) {
+        .dock-icon-button:not(.dock-icon-button--compact):not(:where(.glass-dock *)) {
+            min-block-size: var(--dock-touch-target, 2.75rem);
+            min-inline-size: var(--dock-touch-target, 2.75rem);
+        }
+    }
+
+    /* AX.W06 F2/F3 — the HOISTED refined rail nav-item polish. The demo's
+       `SidebarDock` dogfooded the active-category affordance (accent glyph tint +
+       a left-edge accent rule) as DEMO-PRIVATE chrome (`demo/layout/dock-nav.css`
+       `.demo-sidebar-item.is-active`), so a consumer reaching for a vertical nav
+       dock (AZ.W-DOCK-TAXONOMY — `orientation="vertical"`, the prior `variant="rail"`)
+       got the UN-refined bare `.is-active` colour shift. This hoists the refined
+       treatment into the shipped vertical-dock CSS so the demo == the shipped contract
+       (the demo no longer re-derives a worse rail by hand). The tap-squish press
+       feedback (the `:active` `--scale-press-dock` squish) + the right-anchored
+       tooltips are already the dock-control family + the consumer's `<Tooltip
+       side="right">` — this carries the active-item ACCENT, the half the variant
+       CSS did not own.
+
+       AZ.W-REGISTER-IOS — the SELECTED register is now the iOS luminance-lift, at
+       the ROOT (R3-6): the selected GLYPH reads warm-ink `--foreground` (NOT a
+       saturated brand hue — the prior `var(--dock-rail-active-accent, var(--primary))`
+       brand fallback is retired off the GLYPH), and the leading-edge accent BAR
+       demotes to `--dock-selected-accent` (a translucent foreground luminance-lift,
+       NOT a solid brand stripe). A selected rail item reads as the glass material-
+       lift plate (`--dock-control-active-bg` = `--glass-bg-floating`) + this quiet
+       luminance bar — the iOS-26/27 register. The `--dock-selected-accent` token
+       (offsets-sizing.css) is the SINGLE retint knob; the demo no longer overrides
+       it to `--viz-fourier` (the brand red survives only as static wordmark/viz/CTA
+       ink). The active state reads the SHIPPED four-state hooks the dock-control
+       family already activates (`.is-active`, `aria-current="page"`,
+       `[aria-pressed="true"]`). Scoped to a `.glass-dock.vertical` descendant
+       icon-button — a horizontal dock or the layer-switcher rail are untouched. */
+    .glass-dock.vertical .dock-icon-button {
+        position: relative;
+    }
+
+    .glass-dock.vertical
+        .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
+        --dock-active-color: var(--foreground);
+        color: var(--foreground);
+    }
+
+    /* The leading-edge accent rule — a short rounded bar pinned to the rail-leading
+       edge of the active nav item (the iOS / Figma side-rail selected-affordance).
+       `inset-inline-start` keys it off the writing-direction leading edge, so the
+       bar sits OUTSIDE the button on the rail's plate; `inset-block: <inset>` keeps
+       it short + centred. The width/inset all read `--dock-rail-accent-*` tokens so
+       the geometry is tunable from one place.
+
+       AZ.W-REGISTER-IOS — the bar paints `--dock-selected-accent` (a translucent
+       foreground luminance-lift), NOT the prior `var(--dock-rail-active-accent,
+       var(--primary))` saturated brand stripe. The selected read is the glass plate
+       + this quiet luminance bar — the iOS register, no brand hue on an interactive
+       state. `--dock-selected-accent` is the single retint knob (offsets-sizing.css). */
+    .glass-dock.vertical
+        .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"])::before {
+        content: "";
+        position: absolute;
+        inset-block: var(--dock-rail-accent-inset, 18%);
+        inset-inline-start: calc(
+            -1 * var(--dock-rail-accent-width, 3px) - var(--dock-rail-accent-gap, 2px)
+        );
+        width: var(--dock-rail-accent-width, 3px);
+        border-radius: var(--radius-pill);
+        background: var(--dock-selected-accent);
+        pointer-events: none;
+    }
+}

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

@@ -0,0 +1,128 @@
+/* dock-controls/triggers.css — the `.dock-select-trigger` /
+   `.dock-dropdown-trigger` picker family (AZ.W-CARVE partial 4 of 5; carved out
+   of dock-controls.css).
+
+   The shared base rule, the glass-translucent hover (AX.W45 DK2 — the pickers
+   off the opaque `--muted` flat plate onto the FAMILY hover token, with the
+   `--scale-hover-dock` lift unified into the shared hover group), the iOS press
+   darken (AZ.W-REGISTER-IOS), the focus + open/active fill (hover ≠ open), and
+   the `__chevron` open-flip. Opens its OWN `@layer components`; @import-ed after
+   tab-button.css. */
+
+@layer components {
+    .dock-select-trigger,
+    .dock-dropdown-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        gap: var(--dock-trigger-gap, 0.25rem);
+        min-height: var(--dock-trigger-min-height, auto);
+        padding: var(--dock-trigger-padding-block, 0.25rem)
+            var(--dock-trigger-padding-inline, 0.5rem);
+        white-space: nowrap;
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        border-radius: var(--dock-control-radius, var(--radius-pill));
+        /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
+        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 — press micro-feedback spring (transform-scoped). */ scale
+                var(--dock-press-spring),
+            opacity var(--dock-motion-fast);
+    }
+
+    /* AX.W45 DK2 — the pickers move OFF the opaque `--muted` flat plate onto the
+       glass-translucent FAMILY hover token (the dock substrate shows through, not a
+       solid cream rectangle over the glass — the loudest "not right" tell). hover ≠
+       open now: the active/open rule below reads `--dock-control-active-bg` (a tint
+       LADDER step above hover), so an OPEN dropdown reads distinctly from a merely-
+       hovered one (paired with the chevron flip). ONE source per state, glass-aware
+       across the whole dock-control family. */
+    /* AX.W45-TUNE Q3/C3 — the picker hover lift is now in the SHARED group: the
+       `--scale-hover-dock` scale fires on BOTH select + dropdown (it used to fire on
+       the dropdown ONLY — the split-brain hover the DK2 fix left). All four dock
+       control members (icon/tab/select/dropdown) now lift on hover as one register,
+       mirroring the unified glass-tier `--dock-control-hover-bg` cross-fade. The
+       lone `.dock-dropdown-trigger:hover` scale rule is RETIRED into this group. */
+    .dock-select-trigger:hover:not(:disabled),
+    .dock-dropdown-trigger:hover:not(:disabled) {
+        background: 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 (see the icon-button). */
+    .dock-select-trigger:active:not(:disabled),
+    .dock-dropdown-trigger:active:not(:disabled) {
+        background: var(--dock-control-press-bg);
+        scale: var(--scale-press-dock);
+    }
+
+    .dock-select-trigger:focus:not(:focus-visible),
+    .dock-dropdown-trigger:focus:not(:focus-visible) {
+        box-shadow: none;
+        outline: none;
+    }
+
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group in dock.css; this rule adds only the box-shadow fade transition.
+       `scale` keeps the AT.W7-dock-b press micro-feedback spring. */
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible {
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            scale var(--dock-press-spring),
+            opacity var(--dock-motion-fast),
+            box-shadow var(--dock-motion-fast);
+    }
+
+    .dock-select-trigger:is(
+        .is-active,
+        .active,
+        [aria-expanded="true"],
+        [aria-pressed="true"]
+    ),
+    .dock-dropdown-trigger:is(
+        .is-active,
+        .active,
+        [aria-expanded="true"],
+        [aria-pressed="true"]
+    ) {
+        /* AX.W45 DK2 — the OPEN affordance: a translucent active fill a ladder step
+           above hover (NOT the opaque `--muted`, NOT byte-identical to hover). OPEN =
+           (chevron up + this active fill); HOVER = (the lighter hover fill, chevron
+           down) — the smooth glass-aware four-state read the picker lacked. */
+        background: var(--dock-control-active-bg);
+        color: var(--foreground);
+    }
+
+    .dock-select-trigger__chevron {
+        width: var(--dock-trigger-icon-size, 0.75rem);
+        height: var(--dock-trigger-icon-size, 0.75rem);
+        flex-shrink: 0;
+        opacity: 0.5;
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
+           for family consistency (not a stacking-context hazard: child glyph).
+           AT.W7-dock-b — the open/close flip carries the press micro-feedback
+           spring (transform-scoped). */
+        rotate: 0deg;
+        transition: rotate var(--dock-press-spring);
+    }
+
+    .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
+        rotate: 180deg;
+    }
+}