@mkbabb/glass-ui 3.8.0 → 3.10.0

package/dist/styles/dock-controls.css

@@ -24,23 +24,31 @@
        toward `--scale-press-dock` settles on a NO-OVERSHOOT spring (Apple,
        "Designing Fluid Interfaces": default 100% damping — no bounce — for a tap;
        reserve bounce for surfaces driven by gesture MOMENTUM). The dock controls
-       are tap surfaces (no momentum), so the press re-binds `--dock-press-spring`
-       from the bouncy preset (`--spring-bouncy`, ~+20% overshoot, defined in
-       tokens.css §-2) to `--spring-smooth` — the critically-damped (ζ≈1, ~0.4%
-       peak) iOS tap curve. Token-routed (an existing spring preset, never a raw
-       cubic-bezier); the `--duration-fast` prefix is kept so the squish-back stays
-       quick. Every dock-control `scale var(--dock-press-spring)` press transition
-       (and the select chevron's `rotate`) inherits this one binding. A future
-       momentum-gated surface (none today) would override this back to a bouncy
-       preset on its own scope. The `:where()` group keeps zero specificity so a
-       consumer override of `--dock-press-spring` still wins. */
+       are tap surfaces (no momentum).
+
+       AY.W-DOCK2 (D6) — the per-surface re-point of `--dock-press-spring` to
+       `--spring-smooth` is DELETED here: the ROOT token (`tokens.css`) IS the §6
+       doctrine register now (`--spring-smooth`), so the re-point was a dead
+       byte-identical redeclaration — the exact per-surface fork the §6 doctrine
+       claims to have killed. The dock controls inherit the correct smooth
+       transform-press register straight from the ROOT token; this `:where()` group
+       keeps ONLY the small-tile specular sizing below. */
     :where(
         .dock-icon-button,
         .dock-tab-button,
         .dock-select-trigger,
         .dock-dropdown-trigger
     ) {
-        --dock-press-spring: var(--duration-fast) var(--spring-smooth);
+        /* AX.W45-TUNE C4/C5 — the small-tile specular sizing. The dock controls are
+           ~40px tiles, a fraction of a card's plate, so the global 36% specular
+           radius blooms a tile-filling disc (the I.W6 finding). The family re-points
+           `--glass-specular-size` to the tighter `--dock-control-specular-size` (22%,
+           tokens.css), so the SHARED `.glass-material::before` catch-light recipe
+           (glass.css) paints a restrained EDGE-catch on the small tile WITHOUT
+           forking the recipe — the gleam wakes on hover/active (the cohort's 0.1/0.16
+           rungs), sized for the tile. The rest intensity stays 0 (the default-off
+           discipline) so the resting tile carries NO bloom. */
+        --glass-specular-size: var(--dock-control-specular-size, 22%);
     }
 
     .dock-icon-button {
@@ -95,10 +103,14 @@
            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,
-                color-mix(in srgb, var(--card) 55%, transparent)
+                var(--dock-control-hover-bg)
             );
             color: var(--btn-hover-color, var(--foreground));
             scale: var(--scale-hover-dock);
@@ -134,6 +146,19 @@
        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);
@@ -203,6 +228,29 @@
         --dark-mode-toggle-padding: var(--dock-icon-padding, 0);
     }
 
+    /* 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));
+    }
+
     .dock-tab-button {
         display: inline-flex;
         align-items: center;
@@ -244,9 +292,19 @@
             /* 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(--surface-tint-8);
+            background: var(--dock-control-hover-bg);
             color: var(--foreground);
+            scale: var(--scale-hover-dock);
         }
 
         &:active:not(:disabled) {
@@ -261,7 +319,7 @@
            group in dock.css. */
 
         &:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
-            background: var(--surface-tint-10);
+            background: var(--dock-control-active-bg);
             color: var(--foreground);
         }
     }
@@ -269,21 +327,28 @@
     /* 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).
+     * marks (top-highlight, bottom under-shadow, baseline glass) with two
+     * disco accents on hover (specular swap, disco-grain).
+     *
+     * D6.b — the disco-STAR is GONE (the sparkle-sweep sweep is excised from the
+     * underlying `btn-audacious`, utilities.css). The primary dock button's gold
+     * identity — the "golden dock button" the user likes — is RE-EXPRESSED sans
+     * star: a tooled `--gold-rim` gilt edge (the brushed-brass-under-glass read)
+     * plus the surviving specular catch-light + disco-grain on hover. Three quiet
+     * golds replacing one loud star.
      *
      * 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.
+     * a Vignelli-restrained composed glass surface with a hairline gilt edge.
+     * 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).
+     * K.W6 Lane B — the canonical disco-grain + 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) + the gilt-edge gold identity +
+     * 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;
@@ -291,23 +356,40 @@
         background: color-mix(in srgb, var(--card) 60%, transparent);
         color: var(--foreground);
 
+        /* D6.b — the gilt edge: a 1px inner `--gold-rim` ring + a faint gold
+           top-catch, the tooled-brass identity that replaces the excised star.
+           A box-shadow (no layout, no paint cost), composing UNDER the hover
+           specular/grain. The gold reads as a bevel light at the edge, never a
+           fill — the surface still reads as composed glass. Idiom mirrors the
+           `.glass-gilt` modifier (glass.css region) at the dock-button scale. */
+        box-shadow:
+            inset 0 0 0 1px var(--gold-rim),
+            inset 0 0.5px 0 0
+                color-mix(in oklab, var(--gold-light) 30%, transparent);
+
         /* 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 30% 30%,
+                    ellipse at 40% 25%,
                     color-mix(
                         in srgb,
-                        var(--phase-color, var(--foreground)) 18%,
+                        var(--phase-color, var(--foreground)) 8%,
                         transparent
                     ),
-                    transparent 70%
+                    transparent 55%
                 );
             background-blend-mode: overlay, normal;
             background-size: var(--paper-texture-size), auto;
@@ -315,30 +397,36 @@
 
         /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
          *
-         * The inner `<GlyphFace>` halo (`.glyph-face-backplate { inset: -25% }`)
-         * gets clipped by the pill's `overflow: hidden`; the halo never escapes
-         * the inner glyph wrapper. 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"). */
+         * 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 30% 30%,
+                ellipse at 40% 25%,
                 color-mix(
                         in srgb,
-                        var(--phase-color, var(--foreground)) 18%,
+                        var(--phase-color, var(--foreground)) 8%,
                         transparent
                     )
                     0%,
-                transparent 70%
+                transparent 55%
             );
             pointer-events: none;
             z-index: -1;
-            opacity: 1;
+            opacity: 0.5;
             transition: opacity var(--duration-fast) var(--ease-standard);
         }
     }
@@ -403,13 +491,23 @@
             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(--muted);
+        background: var(--dock-control-hover-bg);
         color: var(--btn-hover-color, var(--foreground));
-    }
-
-    .dock-dropdown-trigger:hover:not(:disabled) {
         scale: var(--scale-hover-dock);
     }
 
@@ -449,7 +547,11 @@
         [aria-expanded="true"],
         [aria-pressed="true"]
     ) {
-        background: var(--muted);
+        /* 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);
     }
 
@@ -470,20 +572,68 @@
         rotate: 180deg;
     }
 
-    /* O.W6 Lane D — Touch-target floor (speedtest AC.W6 F2.AA-03 / WCAG
-       2.5.5), button-level half. The dock-width-math half (the
-       `.glass-dock[data-density]` `--dock-control-size` lift) STAYS in dock.css
-       (shell / width-math). This per-button floor reaches a STANDALONE
-       DockIconButton (a routed settings gear, no dock wrapper) that reads the
-       bare `--size-icon-btn` and would otherwise fall below the 44px WCAG
-       target. It holds the touch box regardless of ancestry; the in-dock
-       `.glass-dock[data-density]` rule is more specific and also reserves the
-       slot in the dock's width-math. Compact buttons opt out — they are
-       auto-sized affordances, not primary targets. */
+    /* 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) {
+        .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 `variant="rail"`
+       got the UN-refined bare `.is-active` colour shift. This hoists the refined
+       treatment into the shipped variant 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.
+
+       The accent is TOKENIZED, not baked: `--dock-rail-active-accent` defaults to
+       the library `--primary` brand ink; a consumer retints it per-instance (the
+       demo overrides it to `--viz-fourier` NCSU-red on the cascade). 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.variant-rail` descendant icon-button — a horizontal
+       dock or the layer-switcher rail are untouched. */
+    .glass-dock.variant-rail .dock-icon-button {
+        position: relative;
+    }
+
+    .glass-dock.variant-rail
+        .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
+        --dock-active-color: var(--dock-rail-active-accent, var(--primary));
+        color: var(--dock-rail-active-accent, var(--primary));
+    }
+
+    /* 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/colour all read `--dock-rail-active-*`
+       tokens so the whole accent is tunable from one place. */
+    .glass-dock.variant-rail
+        .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-rail-active-accent, var(--primary));
+        pointer-events: none;
+    }
 }