@mkbabb/glass-ui 4.2.0 → 5.0.0

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

@@ -1,189 +1 @@
-/* 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);
-    }
-}
+@layer components { @property --dock-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } .dock-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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)); 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), scale var(--dock-press-spring), opacity var(--dock-motion-fast), box-shadow var(--dock-motion-fast); --glass-btn-press-t: var(--dock-press-t, 0); filter: brightness(calc(1 - var(--dock-press-t, 0) * 0.04)); &: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); } &:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } &:disabled { opacity: var(--opacity-disabled, 0.4); pointer-events: none; cursor: default; } &:focus:not(:focus-visible) { box-shadow: none; outline: none; } &: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); } &[data-active] { --glass-capsule-fill: var( --dock-control-active-bg, var(--glass-bg-floating) ); background: var(--glass-capsule-fill); color: var(--dock-fg-on-aurora, var(--foreground)); } } .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

@@ -1,143 +1 @@
-/* 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 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 {
-    .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;
-        /* 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`,
-           `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 ────────────────────────────────────────────
-     *
-     * 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);
-    }
-
-    /* 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);
-    }
-}
+@layer components { .dock-tab-button { display: inline-flex; align-items: center; flex-shrink: 0; 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; background-clip: content-box; border-radius: var(--dock-control-radius, var(--radius-pill)); font-size: var(--type-small); line-height: 1; color: var(--muted-foreground); text-decoration: none; cursor: pointer; white-space: nowrap; outline: none; scale: 1; transition: background-color var(--dock-motion-fast), color var(--dock-motion-fast), scale var(--dock-press-spring); &:hover:not(:disabled) { background: var(--dock-control-hover-bg); color: var(--foreground); scale: var(--scale-hover-dock); } &:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } &:focus:not(:focus-visible) { box-shadow: none; } &:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) { background: var(--dock-control-active-bg); color: var(--foreground); } } .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); } .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

@@ -1,94 +1 @@
-/* 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;
-    }
-}
+@layer components { @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); } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger) { position: relative; } :is(.dock-trigger, .dock-select-trigger, .dock-dropdown-trigger)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max(100%, var(--dock-touch-target, 2.75rem)); block-size: max(100%, var(--dock-touch-target, 2.75rem)); transform: translate(-50%, -50%); } } .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); } .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

@@ -1,157 +1 @@
-/* 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 {
-    /* BD.W-DOCK-CORE (A8) — `.dock-trigger` is the UNIFIED dock overlay-trigger register.
-       DockSelectTrigger, DockDropdownTrigger, AND DockPopoverTrigger all compose it (each
-       also keeps its legacy class for back-compat-free continuity within this file), so a
-       popover trigger inside a dock is byte-identical geometry + style + baseline alignment
-       to the dropdown trigger — the prior three-divergent-contracts misalignment (A8) is
-       gone. The hover-SCALE is OFF on all three (below): a scaling trigger shifts its
-       portaled-content anchor mid-open; the SelectTrigger's documented no-scale reason is
-       generalized to the whole family (clean break — the dropdown's lone hover-scale is
-       retired, no alias). */
-    .dock-trigger,
-    .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;
-        /* 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(
-            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. */
-    /* BD.W-DOCK-CORE (A8) — hover lifts the FILL only; the hover-SCALE is RETIRED across
-       the whole trigger family so portaled content anchors smoothly (the SelectTrigger's
-       documented no-scale reason, generalized — clean break, no alias). */
-    .dock-trigger:hover:not(:disabled),
-    .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));
-    }
-
-    /* AZ.W-REGISTER-IOS — the iOS press darken-plus-shrink (see the icon-button). */
-    .dock-trigger:active:not(:disabled),
-    .dock-select-trigger:active:not(:disabled),
-    .dock-dropdown-trigger:active:not(:disabled) {
-        background: var(--dock-control-press-bg);
-        scale: var(--scale-press-dock);
-    }
-
-    .dock-trigger:focus:not(:focus-visible),
-    .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-trigger:focus-visible,
-    .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-trigger:is(
-        .is-active,
-        .active,
-        [aria-expanded="true"],
-        [aria-pressed="true"]
-    ),
-    .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;
-    }
-}
+@layer components { .dock-trigger, .dock-select-trigger, .dock-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 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; background-clip: content-box; border-radius: var(--dock-control-radius, var(--radius-pill)); 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), scale var(--dock-press-spring), opacity var(--dock-motion-fast); } .dock-trigger:hover:not(:disabled), .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)); } .dock-trigger:active:not(:disabled), .dock-select-trigger:active:not(:disabled), .dock-dropdown-trigger:active:not(:disabled) { background: var(--dock-control-press-bg); scale: var(--scale-press-dock); } .dock-trigger:focus:not(:focus-visible), .dock-select-trigger:focus:not(:focus-visible), .dock-dropdown-trigger:focus:not(:focus-visible) { box-shadow: none; outline: none; } .dock-trigger:focus-visible, .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-trigger:is( .is-active, .active, [aria-expanded="true"], [aria-pressed="true"] ), .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"] ) { 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; rotate: 0deg; transition: rotate var(--dock-press-spring); } .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron { rotate: 180deg; } }