@mkbabb/glass-ui 3.10.1 → 3.11.1

package/src/styles/dock/morph.css

@@ -61,22 +61,9 @@
        authority, and at rest `--dock-expand-t` resolves to the class endpoint (0
        collapsed / 1 expanded) so the resting look is exact. */
     .glass-dock.variant-dock:not(.vertical) {
-        /* AY.W-A11Y-PERF O-1 — the resting-endpoint dock bg composes the W55 oklab
-           adaptive tint so the bright bucket (engaged when a consumer/page marks
-           `--glass-backdrop: light` on the dock's ancestor — the @container block
-           below + the page-redesign W60 wiring) reaches the LIVE `.variant-dock`
-           surface (this 0,3,0 morph interp OVERRIDES the 0,1,0 shell.css bg, so the
-           tint must be applied HERE too). The srgb transition mix is preserved between
-           the two color endpoints; the adaptive darken rides the resting endpoint
-           (`--glass-bg-dock` wrapped in the oklab tint) — at the `0%` rest default the
-           inner oklab mix is a no-op so this is byte-identical to today. */
         background: color-mix(
             in srgb,
-            color-mix(
-                in oklab,
-                var(--glass-bg-dock, var(--glass-bg-resting)),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
+            var(--glass-bg-dock, var(--glass-bg-resting))
                 calc(var(--dock-expand-t, 1) * 100%),
             var(--glass-bg-wash)
         );
@@ -91,40 +78,18 @@
     /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
        wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
        its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
-
-       AY.W-DOCK-CHROME §1 — the LAYOUT-ISOLATION fix: the collapse↔expand morph is
-       an INLINE-WIDTH aperture by contract ("horizontal docks animate width"), so
-       the BLOCK axis MUST be invariant across the morph — otherwise the dock's
-       outer height shrinks ~4px on collapse (the collapsed-pad 0.25rem vs the
-       expanded pad-block 0.375rem, ×2) and, because a free-floating / inline dock
-       sits in normal flow (`display:inline-flex`), that height delta REFLOWS its
-       siblings — the page content jumped as the dock animated (the user's 13:27
-       audit item 1). The fix holds `padding-block` PINNED at the expanded value in
-       BOTH states (no `--dock-expand-t` interpolation on the block axis) so the
-       outer block-size is constant; ONLY `padding-inline` morphs to tighten the
-       collapsed pill inline. The collapsed circle is unaffected — its diameter is
-       owned by the summary pane's own symmetric `block-size` + `aspect-ratio:1`
-       (the `.collapsed .dock-layer--summary` rule below), CENTRED on the dock's
-       stable-height plate by the root `align-items:center`, not by the root pad. So
-       the morph reflows NOTHING vertically: 0px container-height delta. */
+       Padding interpolates linearly between the collapsed floor and the expanded
+       block/inline padding on the same `--dock-expand-t` scalar. */
     .glass-dock.variant-dock:not(.vertical):not(.dock-overflow-wrap) {
-        /* The collapsed inline-pad endpoint is the EXPANDED block pad (max'd with the
-           consumer `--dock-collapsed-padding` handle) so the height-pinned collapsed
-           pill is SYMMETRIC → a clean circle at the `--radius-dock` 9999px. The block
-           axis is pinned to the expanded pad (below), so matching the inline collapsed
-           endpoint to it keeps the box square (the B4 "symmetric collapsed padding
-           keeps the pill a circle" intent, preserved through the §1 height-pin). The
-           `max()` lets a consumer set `--dock-collapsed-padding` LARGER for a looser
-           pill but never SMALLER than the block pad (which would re-introduce the
-           narrower-than-tall oval the height-pin would otherwise leave). */
-        --dock-pad-collapsed: max(
-            var(--dock-padding-block, 0.375rem),
-            var(--dock-collapsed-padding, 0px)
+        --dock-pad-collapsed: var(
+            --dock-collapsed-padding,
+            var(--dock-padding-block, 0.375rem)
+        );
+        padding-block: calc(
+            var(--dock-pad-collapsed) +
+                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
+                var(--dock-expand-t, 1)
         );
-        /* block padding is INVARIANT — the expanded value, both states (the
-           layout-isolation contract above): the inline aperture morphs, the block
-           axis is pinned so the outer height never changes → 0px container reflow. */
-        padding-block: var(--dock-padding-block, 0.375rem);
         padding-inline: calc(
             var(--dock-pad-collapsed) +
                 (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) *
@@ -145,17 +110,14 @@
         box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
     }
 
-
-    /* AY.W-DOCK-NAV B4 — the collapsed summary is a PERFECT CIRCLE. The `.dock-layer`
-       base rule (`.glass-dock:not(.vertical) .dock-layer`) locks `height:
-       var(--dock-layer-height)` (40px) on EVERY layer including the summary; against
-       the 0.85× `--dock-collapsed-summary-min-size` min-width that made the pane
-       40h × 30w — an oval (the user's "circle, not oval"). This rule (1) LIFTS the
-       height-lock so the summary block-sizes to the SAME token its width floors at,
-       and (2) floors both axes to that ONE token, so the collapsed pane is a square
-       and the root's symmetric collapsed padding keeps the pill a circle. The glyph
-       sits centred on both axes. The `aspect-ratio: 1` belt-and-braces guarantees
-       1:1 even if a consumer's collapsed-slot content is wider than the floor. */
+    /* AX.W45-TUNE Q1 — the collapsed summary floors on BOTH axes off the SAME
+       `--dock-collapsed-summary-min-size` token (now MINTED in tokens.css §10 as a
+       tight ≈0.7× of the full control height). The prior rule floored ONLY
+       `min-width` and let the token fall to `--dock-layer-height` (the full control
+       height) — so the collapsed pill read as a full-row stub, not a proportioned
+       squircle. Adding the symmetric `min-block-size` makes the collapsed pill a
+       tight square-ish dot the consumer's glyph sits centred in (the proportioned-
+       pill target the user's Q1 named). */
     .glass-dock.collapsed .dock-layer--summary {
         min-width: var(
             --dock-collapsed-summary-min-size,
@@ -165,15 +127,6 @@
             --dock-collapsed-summary-min-size,
             var(--dock-layer-height, 2.5rem)
         );
-        block-size: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        height: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        aspect-ratio: 1;
         justify-content: center;
     }
 
@@ -193,35 +146,6 @@
         --dock-expand-t: var(--dock-morph-t);
     }
 
-    /* AY.W-DOCK-NAV B15 — the EMPTY-collapsed-summary trap. A dock with a
-       `#persistent` control but NO `#collapsed` slot (the overview first-section
-       dock) still renders a `.dock-layer--summary` pane that floors to the circle
-       min-width — so collapsed it read as a WIDE pill: the persistent Home glyph on
-       the LEFT + an empty circle of dead space on the RIGHT (the measured 84×50
-       oval). Expanding then grew the content INTO that right-side void, so the
-       morph read "from the right" not center-out (the user's B15). When the summary
-       slot is EMPTY (`:not(:has(*))`), collapse it to zero width + no floor so the
-       persistent control stands alone as the collapsed circle, and the morph grows
-       symmetrically about the persistent. An empty Vue `#collapsed` slot renders
-       ZERO child nodes (no whitespace text node either), so `:empty` matches it
-       exactly — and a flat `:empty` avoids the nested-`:has()` form Lightning CSS
-       drops. An authored `#collapsed` slot (non-empty summary) keeps its circle
-       pill. */
-    .glass-dock.collapsed .dock-layer--summary:empty {
-        min-width: 0;
-        inline-size: 0;
-        padding: 0;
-        margin: 0;
-        border: 0;
-    }
-
-    /* The persistent control IS the collapsed pill in the empty-summary case — drop
-       the inter-region gap so the collapsed circle is exactly the persistent box. */
-    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent
-        + .dock-layers {
-        margin-inline-start: 0;
-    }
-
     /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
        The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
        root transition above, so this hover scale settles on the SAME spring curve

package/src/styles/dock/shell.css

@@ -64,18 +64,6 @@
            stacking-context guarantee). Covers every dock scale site. */
         scale: 1;
         position: relative;
-        /* AY.W-A11Y-PERF O-1 — engage the W55 bright-backdrop bucket BY DEFAULT on
-           the dock (the surface the user reported unreadable over light content). The
-           SELF-engage rule in dock/morph.css darkens the dock's OWN plate toward ink
-           unconditionally (a dock floats over arbitrary — frequently light — page
-           content). `dark` (the :root default) stays the inherited value a consumer
-           re-reads; the descendant/nested-glass reach uses the @container block. */
-        --glass-backdrop: light;
-        /* AY.W-A11Y-PERF O-4 — paint containment so the maximal-glass nested
-           backdrop-filter sample does not escape the dock box (the standard nested-
-           backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
-           already-blurred buffer at each level without it). */
-        contain: paint;
         display: inline-flex;
         align-items: center;
         /* AW.W1 — the dock does NOT establish a default inline-size container.

package/src/styles/dock-controls.css

@@ -225,22 +225,7 @@
             [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-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. */
-        --dark-mode-toggle-padding: calc(
-            (
-                    var(--dock-control-size, var(--size-icon-btn)) -
-                        var(--dock-icon-glyph, 1.25rem)
-                ) / 2
-        );
+        --dark-mode-toggle-padding: var(--dock-icon-padding, 0);
     }
 
     /* AX.W06 USF-2 — the dock-control optical-size contract. The
@@ -342,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;
@@ -364,6 +356,17 @@
         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-