@mkbabb/glass-ui 4.0.1 → 4.1.0

package/src/styles/tokens/sizing-config.css

@@ -0,0 +1,110 @@
+/* tokens/sizing-config.css
+   §10 sizing tail — the MetricBadge stacked geometry + the Configurator family
+   (the density ladder, the AZ.W-HIERARCHY section/label/preset vocabulary, the
+   single-column stage floor, the dark-adaptive divider register, the section
+   tonal step) + the component-font override.
+   Carved (BC.W-CARVE6) from the tail of tokens/sizing.css to hold the 500-line
+   no-god-module bound; @import-ed by tokens.css IMMEDIATELY AFTER sizing.css at
+   sizing's own cascade slot — adjacent same-selector :root blocks resolve
+   identically, so the dist is byte-isomorphic.
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+:root {
+    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
+       (label / value+unit) wants a taller floor than the inline pill so the
+       label has breathing room above the baseline pair. T.W2.T2 +
+       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
+       min-height with 6px (0.375rem) block padding. The inline ladder
+       keeps its tight defaults via `--metric-badge-min-height` /
+       `--metric-badge-padding-block` (declared inline at the
+       `.metric-badge` selector). */
+    --metric-badge-min-height-stacked: 2.625rem;
+    --metric-badge-padding-block-stacked: 0.375rem;
+
+    /* Configurator — N.W2 Lane A density axis (4 rungs).
+       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
+       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
+       see no visual change. `mobile` halves the vertical breathing room
+       for narrow-viewport studios; `spacious` doubles it for settings-
+       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
+       selector binding. */
+    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
+    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
+    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
+    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
+
+    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
+    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
+    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
+    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
+
+    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
+       NAMED registers the studios (blob, aurora) inherit instead of a flat
+       undifferentiated stack. DISTINCT from the density ladder above (which is
+       the per-row CADENCE, not the section/label/preset register).
+
+       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
+          not a row: the √φ subheading rung at weight 600, lifting off the prior
+          flat `text-small font-semibold`. */
+    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
+    --configurator-section-weight: 600;                   /* the heading weight */
+
+    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
+       Configurator stacks stage-over-aside; a percentage stage height against
+       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
+       phone). The single-column band's `grid-template-rows` floors the stage
+       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
+       the aside row takes the remainder and scrolls internally. */
+    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
+
+    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
+          interaction (C6-10); D6-3's defect is the preset row being spatially
+          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
+          rhythm — its block-padding / gap, NOT a font-weight — so the preset
+          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
+          the vocabulary's "register weight" framing; it lands on the padding/gap
+          slot of `.configurator-presets`, the heavier spatial cadence.) */
+    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
+    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
+
+    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
+       The section + inter-row dividers used to be inline `border-border/40` and
+       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
+       `glass-floating` plate (a luminous transmissive material, --card L16) those
+       near-equal-luminance hairlines effectively VANISHED — "the sections run
+       together". This ONE token is consumed by every divider rule (the
+       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
+       Configurator.vue's aside/preset/footer borders, configurator.css) so the
+       divider weight is retuned from a single override.
+
+       The dark-LIFTING arm is the load-bearing half: the divider must read on
+       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
+       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
+       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
+       visible luminance step survives the dark glass. `light-dark()` carries the
+       arm in ONE declaration (the same :root cascade context as the surface-tint
+       family; an engine without `light-dark()` falls back to the dark-arm.css
+       `.dark` floor minted in lockstep). The SECTION divider runs a touch
+       heavier than the inter-row hairline (a section reads as a section without
+       a second heading rung). */
+    --configurator-divider: light-dark(
+        color-mix(in srgb, var(--border) 55%, transparent),
+        color-mix(in srgb, var(--foreground) 22%, transparent)
+    );
+    --configurator-divider-section: light-dark(
+        color-mix(in srgb, var(--border) 70%, transparent),
+        color-mix(in srgb, var(--foreground) 30%, transparent)
+    );
+    /* The optional faint section-header tonal step — a whisper-light warm wash
+       behind a <ConfiguratorLayer> section so it reads as a grouped section
+       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
+       (transparent) on light where the hairline carries it; a faint
+       foreground-over-transparent lift on dark where the divider alone is
+       subtle. */
+    --configurator-section-tint: light-dark(
+        transparent,
+        color-mix(in srgb, var(--foreground) 3%, transparent)
+    );
+
+    /* Component font override (consumers override locally) */
+    --select-font: inherit;
+}

package/src/styles/tokens/sizing.css

@@ -122,6 +122,24 @@
     --dropdown-text-secondary: var(--control-text-sm);
     --dropdown-input-height:   var(--control-h-md);
 
+    /* ── The search-family magnitude rungs (BC.W-SEARCH-CUSTOM) ───────────────
+       The SearchBar/FuzzySearch compound surfaces read these indirection rungs
+       for the glyph / icon-button / result-label magnitudes — so a consumer
+       retunes the WHOLE search family from ONE `:root` override, not a fork of
+       per-element px literals (`w-3.5 h-3.5`, `!h-6 !w-6`, `text-[0.6rem]`). Each
+       DEFAULTS to the existing cohort it replaces, so the bare search surface is
+       byte-identical to HEAD (the substitution-vs-redeclaration discipline — the
+       NAME is search-local, the magnitude stays the `--ui-glyph`/`--control-*`
+       source). NO parallel magnitude ladder: these are aliases onto the cohort.
+         • PRIMARY result label / field font  → `--control-text` (the `text-sm` register).
+         • SECONDARY type-Badge / footnote    → `--control-text-sm` (the `text-xs` register).
+         • the search/clear/expand glyph       → `--ui-glyph-sm` (the chrome 1.4 glyph).
+         • the icon-button hit-box            → `--control-h-xs` (the HEAD `h-6`/`h-7`). */
+    --search-icon-size:           var(--ui-glyph-sm);
+    --search-button-size:         var(--control-h-xs);
+    --search-result-text:         var(--control-text);
+    --search-result-text-secondary: var(--control-text-sm);
+
     --size-icon-btn: 2.5rem;
     --icon-xs: 0.75rem;
     --icon-sm: 0.875rem;
@@ -224,6 +242,19 @@
         var(--dock-icon-glyph-floor)
     );
 
+    /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — `--dock-control-glyph-size` is
+       the ONE in-dock control-glyph retint knob (the dark-toggle SVG `width`/`height`
+       + the `--dark-mode-toggle-padding` inset BOTH read it), defaulting to the
+       `--dock-scale`-keyed `--dock-icon-glyph` the nav icons paint so the docked
+       toggle is optically uniform out of the box. Like `--dock-icon-glyph` this
+       `:root` declaration resolves the fallback ladder; density.css RE-RESOLVES it
+       inside each `[data-density]` scope and overflow.css RE-DECLARES it in the
+       coarse block, so the density-painted + coarse-scaled `--dock-icon-glyph` flows
+       in (the substitution-vs-inheritance trap closed on all three registers — a
+       `:root`-only knob would freeze at the `:root` `--dock-scale` while the glyph
+       lifts). ONE knob; no per-size literal, no `!important`. */
+    --dock-control-glyph-size: var(--dock-icon-glyph);
+
     /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
        used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
        its `min-width` with NO block floor, so the shrunken pill read as an
@@ -315,12 +346,9 @@
        `--dock-rail-extend-length` (declared in rail-extend.css) was RE-SEMANTICIZED:
        it is no longer a one-way connector length but the SYMMETRIC per-side overrun of
        the seam line (the line's cross-extent = dock extent + 2× the knob, centered on
-       the seam). `--dock-rail-retract-stub` is the residual protrusion FRACTION the
-       chips leave past the dock edge on collapse (the macOS fan-out "retract INTO the
-       rail leaving a slight protrusion"; 0 = fully retracted, 1 = no retract). The
-       `--dock-section-zone-gap` is the inter-control rhythm inside a <DockSection> zone
-       (defaults to the dock's own `--dock-gap`, so the section grouping adds no box). */
-    --dock-rail-retract-stub: 0.35;
+       the seam). The `--dock-section-zone-gap` is the inter-control rhythm inside a
+       <DockSection> zone (defaults to the dock's own `--dock-gap`, so the section
+       grouping adds no box). */
     --dock-section-zone-gap: var(--dock-gap, 0.25rem);
 
     /* Dock active-state ladder (O.W6 Lane B)
@@ -389,6 +417,21 @@
        WCAG 2.5.5 floor on touch devices. */
     --dock-touch-target: 2.75rem; /* 44px */
 
+    /* BC.W-AX-DOCK-COCKPIT — the dock LABEL-tracks-CONTROL ratio (the
+       dock-oversize chronic close, speedtest A-9). The `dock-label`
+       (typography/semantic.css) sizes its font as a PROPORTION of the
+       control height — `calc(var(--dock-control-size) * var(--dock-label-ratio))`
+       — so a tighter control (the `[data-preset="cockpit"]` 2.75rem floor with
+       compact chrome) carries a proportionally tighter label, never the fixed
+       `--type-subheading` rung that read OVERSIZE on a tight pill. The default
+       reproduces `--type-subheading` (1.272rem) at the comfortable `2.5rem`
+       control (1.272 / 2.5 = 0.5088) so the bare default is byte-near-identical
+       — opt into the cockpit preset (or override this knob from `:root`/the
+       `[data-preset]` scope) to retune the whole dock label family in ONE write.
+       The explicit `--dock-label-size` knob STILL wins when set (the dock.css
+       audacious-mobile carve precedent, KEPT — the ratio is the FALLBACK). */
+    --dock-label-ratio: 0.5088;
+
     /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
        NON-dock coarse-pointer surfaces (`Button size="icon"`,
        ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
@@ -398,102 +441,10 @@
        dock floor and the general floor can be retuned independently. */
     --touch-target: 2.75rem; /* 44px */
 
-    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
-       (label / value+unit) wants a taller floor than the inline pill so the
-       label has breathing room above the baseline pair. T.W2.T2 +
-       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
-       min-height with 6px (0.375rem) block padding. The inline ladder
-       keeps its tight defaults via `--metric-badge-min-height` /
-       `--metric-badge-padding-block` (declared inline at the
-       `.metric-badge` selector). */
-    --metric-badge-min-height-stacked: 2.625rem;
-    --metric-badge-padding-block-stacked: 0.375rem;
-
-    /* Configurator — N.W2 Lane A density axis (4 rungs).
-       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
-       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
-       see no visual change. `mobile` halves the vertical breathing room
-       for narrow-viewport studios; `spacious` doubles it for settings-
-       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
-       selector binding. */
-    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
-    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
-    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
-    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
-
-    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
-    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
-    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
-    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
-
-    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
-       NAMED registers the studios (blob, aurora) inherit instead of a flat
-       undifferentiated stack. DISTINCT from the density ladder above (which is
-       the per-row CADENCE, not the section/label/preset register).
-
-       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
-          not a row: the √φ subheading rung at weight 600, lifting off the prior
-          flat `text-small font-semibold`. */
-    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
-    --configurator-section-weight: 600;                   /* the heading weight */
-
-    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
-       Configurator stacks stage-over-aside; a percentage stage height against
-       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
-       phone). The single-column band's `grid-template-rows` floors the stage
-       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
-       the aside row takes the remainder and scrolls internally. */
-    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
-
-    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
-          interaction (C6-10); D6-3's defect is the preset row being spatially
-          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
-          rhythm — its block-padding / gap, NOT a font-weight — so the preset
-          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
-          the vocabulary's "register weight" framing; it lands on the padding/gap
-          slot of `.configurator-presets`, the heavier spatial cadence.) */
-    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
-    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
-
-    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
-       The section + inter-row dividers used to be inline `border-border/40` and
-       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
-       `glass-floating` plate (a luminous transmissive material, --card L16) those
-       near-equal-luminance hairlines effectively VANISHED — "the sections run
-       together". This ONE token is consumed by every divider rule (the
-       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
-       Configurator.vue's aside/preset/footer borders, configurator.css) so the
-       divider weight is retuned from a single override.
-
-       The dark-LIFTING arm is the load-bearing half: the divider must read on
-       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
-       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
-       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
-       visible luminance step survives the dark glass. `light-dark()` carries the
-       arm in ONE declaration (the same :root cascade context as the surface-tint
-       family; an engine without `light-dark()` falls back to the dark-arm.css
-       `.dark` floor minted in lockstep). The SECTION divider runs a touch
-       heavier than the inter-row hairline (a section reads as a section without
-       a second heading rung). */
-    --configurator-divider: light-dark(
-        color-mix(in srgb, var(--border) 55%, transparent),
-        color-mix(in srgb, var(--foreground) 22%, transparent)
-    );
-    --configurator-divider-section: light-dark(
-        color-mix(in srgb, var(--border) 70%, transparent),
-        color-mix(in srgb, var(--foreground) 30%, transparent)
-    );
-    /* The optional faint section-header tonal step — a whisper-light warm wash
-       behind a <ConfiguratorLayer> section so it reads as a grouped section
-       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
-       (transparent) on light where the hairline carries it; a faint
-       foreground-over-transparent lift on dark where the divider alone is
-       subtle. */
-    --configurator-section-tint: light-dark(
-        transparent,
-        color-mix(in srgb, var(--foreground) 3%, transparent)
-    );
-
-    /* Component font override (consumers override locally) */
-    --select-font: inherit;
+    /* The MetricBadge stacked geometry + the Configurator family (density ladder,
+       AZ.W-HIERARCHY section/label/preset vocabulary, stage-floor, dark-adaptive
+       divider register, section tonal step) + the --select-font override are carved
+       into tokens/sizing-config.css (a cohesive §10 tail, the no-god-module re-drain)
+       — @import-ed by tokens.css IMMEDIATELY AFTER sizing.css (adjacent same-selector
+       :root blocks, byte-isomorphic). */
 }

package/src/styles/tokens.css

@@ -33,6 +33,11 @@
 @import "./tokens/on-glass-fg.css";
 @import "./tokens/offsets.css";
 @import "./tokens/sizing.css";
+/* BC.W-CARVE6 — sizing.css's §10 tail (MetricBadge stacked geometry + the
+   Configurator density/HIERARCHY/divider family + the --select-font override)
+   carved into sizing-config.css to hold the 500-line bound, @import-ed IMMEDIATELY
+   AFTER sizing.css (adjacent same-selector :root blocks — byte-isomorphic). */
+@import "./tokens/sizing-config.css";
 @import "./tokens/scale-paper.css";
 @import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";

package/src/styles/typography/semantic.css

@@ -157,13 +157,26 @@ body {
 /* Canonical dock control label register — text labels INSIDE
    `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
    without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
-   a dock pill). Composes the `--dock-label-size` knob when set (dock.css
-   audacious mobile carve), else `--type-subheading`. Weight 400 — Plus Jakarta
-   reads heavier than its numeric weight at pill size, so regular is the
-   not-bold register. */
+   a dock pill). Weight 400 — Plus Jakarta reads heavier than its numeric weight
+   at pill size, so regular is the not-bold register.
+
+   BC.W-AX-DOCK-COCKPIT — the label TRACKS the control height by ratio (the
+   dock-oversize chronic close, speedtest A-9): the font is a PROPORTION of the
+   control (`calc(var(--dock-control-size) * var(--dock-label-ratio))`) so a
+   tighter control (the `[data-preset="cockpit"]` 2.75rem floor + compact chrome)
+   carries a proportionally tighter label — never the fixed `--type-subheading`
+   rung that read OVERSIZE on a tight pill. The explicit `--dock-label-size` knob
+   STILL wins when set (the dock.css audacious-mobile carve precedent, KEPT — the
+   ratio is the FALLBACK). The `--dock-label-ratio` default reproduces
+   `--type-subheading` at the comfortable `2.5rem` control (sizing.css), so the
+   bare default is byte-near-identical; the `--dock-control-size` fallback `2.5rem`
+   mirrors the comfortable rung for a label outside a density-painted scope. */
 @utility dock-label {
     font-family: var(--font-text);
-    font-size: var(--dock-label-size, var(--type-subheading));
+    font-size: var(
+        --dock-label-size,
+        calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio))
+    );
     line-height: var(--type-leading-body);
     font-weight: 400;
     letter-spacing: var(--type-tracking-normal);

package/src/styles/utilities/a11y-overrides.css

@@ -114,7 +114,7 @@ html.no-transition *:not([data-allow-motion])::after {
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
     [data-size="icon"],
-    .expandable-container__trigger,
+    [data-part="trigger"],
     .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);
         min-inline-size: var(--touch-target, 2.75rem);
@@ -160,10 +160,25 @@ html.no-transition *:not([data-allow-motion])::after {
             translate: -50% -50%;
             min-width: var(--touch-target, 2.75rem);
             min-height: var(--touch-target, 2.75rem);
-            /* Inherit the host's pointer-events so a tap within the halo
-               registers on the atom; the overlay itself is decorative (no
-               paint), so it never occludes the host's own interaction. */
-            pointer-events: auto;
+            /* BC.W-RADIO-FIX — the swallow-fix (the §F headline binding bug).
+               An absolutely-positioned `::before` over the atom with
+               `pointer-events: auto` becomes the topmost hit target across the
+               whole 44px box and INTERCEPTS the real pointer event before it
+               reaches the host's listener — reka's RadioGroupItem / Checkbox /
+               Switch / SliderRoot bind their toggle/drag handler on the HOST
+               button (Radio.vue `onClick`), and the swallowing overlay was the
+               root of "radios don't work" (a synthetic .click() on the host
+               still fired, but a real coarse tap landed on the pseudo and
+               no-op'd). `pointer-events: none` frees the pointer to fall
+               through to the host so the tap reaches reka on EVERY input path,
+               while the 44px GEOMETRY still satisfies the WCAG-2.5.5 readback
+               (getComputedStyle reads min-width/height, not pointer-events —
+               the hit FLOOR is the box, never a pointer-swallowing overlay).
+               The same integrity discipline `useDockClickIntegrity` applies to
+               the dock + the Slider's own `.slider-thumb.touch-hit-area::before`
+               override already discovered (AY.W-SCALE2) — now ONE source for
+               the whole six-atom hit-area family. */
+            pointer-events: none;
         }
     }
 }

package/src/styles/utilities/base-misc.css

@@ -212,6 +212,27 @@
         scroll-timeline: --card-scroll block;
     }
 
+    /* ── Stable scroll gutter — the no-shift discipline for overlay-hosting
+       route scrollers (BC.W-DROPDOWN-FIX) ──────────────────────────────────
+       An app-shell route scroller that hosts portaled picker/menu overlays
+       (Select / DropdownMenu / any reka overlay that locks body scroll on open)
+       RESERVES a stable scrollbar gutter so the lock-induced scrollbar removal
+       removes no layout space — the centred content does not reflow and the
+       trigger does not twitch left/right (USER-DEFECTS §F, the classic
+       space-taking-scrollbar reflow).
+
+       PRESETS-IN-CONSUMERS: the library ships the named discipline; the CONSUMER
+       app-shell opts its OWN route scroller in (the demo `.demo-main-scroller`
+       is the reference adoption). glass-ui does not force `scrollbar-gutter` on
+       every consumer's scroller — it provides this utility + the canon note.
+
+       Baseline-newly-available: Chrome 94+, Firefox 97+, Safari 18.2+ — a
+       non-supporting engine ignores the property (the gutter just isn't
+       reserved, the legacy behaviour). */
+    .scroll-gutter-stable {
+        scrollbar-gutter: stable;
+    }
+
     /* ── Shimmer text effects ──
        BB.W-METAL-SHIMMER — the gold-only `gold-shimmer-slide` is RETIRED (clean
        break, no alias); `.gold-shimmer` re-points onto the metal-PARAMETERIZED
@@ -253,3 +274,34 @@
     }
 
 }
+
+/* ── @utility ghost-slot (BC.W-GHOST-DASHED) ────────────────────────────────
+   The ONE dashed-outline placeholder register: everywhere a slot is empty / a
+   thing is a placeholder / an affordance is "add something here", the surface
+   reads this — a dashed-outline plate, consistently rounded (--radius-card),
+   calm-muted, that reads unmistakably "this is a placeholder, not a filled
+   surface." The 6 ad-hoc `rounded-{md,2xl,card} border border-dashed
+   border-border bg-{card,background}` forks (three radii, three hosts, three
+   pads) COLLAPSE onto this ONE register: ONE radius, ONE faint-wash host, ONE
+   muted ink, ONE warm dashed hairline.
+
+   WARM-NOT-GREY (BA.W-NO-GRAY): the dashed hairline is the warm-ink at 22%
+   (a color-mix off --foreground, the warm identity), NEVER a grey
+   `border-border` — the ghost must read warm-material, not grey.
+
+   GLASS-ADJACENT, not opaque: the host is a faint glass-wash (the rebuilt W55
+   material reads THROUGH it), NOT a flat opaque `bg-card` slab — so the ghost
+   reads "empty," not "filled," and the D1 grey-plate regression cannot re-enter
+   through the placeholder.
+
+   THE FENCE (binding both ways): this is the RECTANGULAR-placeholder register.
+   The `WatercolorDot variant="ghost"` (the seeded-blob SILHOUETTE traced as a
+   dashed stroke — the empty-PALETTE-slot affordance) is a DISTINCT register;
+   neither forks the other. .ghost-slot is never applied to a blob-silhouette
+   slot, and the watercolor ghost never adopts this rectangle recipe. */
+@utility ghost-slot {
+    border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
+    border-radius: var(--radius-card);
+    background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%);
+    color: var(--muted-foreground);
+}

package/src/styles/utilities/btn.css

@@ -49,12 +49,23 @@
    Shared compound transition for interactive controls that animate their
    surface (background-color/color/box-shadow/border-color) on the four-state
    contract. Replaces the per-site
-   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-fast)] ease-[var(--ease-standard)]`
+   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-control)] ease-[var(--ease-standard)]`
    arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
-   variant). Binds the canonical --duration-fast + --ease-standard tokens. */
+   variant).
+
+   BC.W-CONTROL-SMOOTH — the surface legs read the QUICK control clock
+   `--duration-control` (0.12s, the named iOS control-press surface beat,
+   scheme-motion.css), NOT the 0.2s calm `--duration-fast`. A control the user
+   actively pokes wants the ~100-120ms quick beat that tracks the cursor; the
+   prior 0.2s dragged the colour/border/shadow VISIBLY behind the press (the §F
+   "super laggy" read). The bezier `--ease-standard` STAYS (a colour cross-fade
+   on a spring wobbles — §6 binding); the property list stays SURFACE-ONLY (no
+   `transform` leg — the press-squish is `.tap-squish`/`useSpringPress`'s spring
+   job, the canonical split). One token re-times the whole 12-consumer control
+   family. */
 @utility transition-control {
     transition-property: background-color, color, box-shadow, border-color;
-    transition-duration: var(--duration-fast);
+    transition-duration: var(--duration-control);
     transition-timing-function: var(--ease-standard);
 }
 

package/src/styles/utilities/components.css

@@ -31,11 +31,17 @@
         background: var(--metric-badge-bg, var(--glass-bg-quiet));
         backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet));
         box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight));
+        /* SPATIAL/EFFECTS split (motion-canon P1): the EFFECTS legs
+           (background/border-color/box-shadow) ride the bezier --ease-standard;
+           the SPATIAL hover-lift legs (translate/scale) ride the --spring-smooth
+           hover register on its own settle clock --spring-smooth-duration (the
+           ONE interactive transform register .btn-pill/.glass-btn settle on). */
         transition:
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
+            translate var(--spring-smooth-duration) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--spring-smooth);
     }
 
     .metric-badge > span {
@@ -49,11 +55,17 @@
 
     .metric-badge:hover {
         /* Hover lifts to the `resting` rung — one step up the canonical
-           ladder (audit U.W0.C-c §7.2). */
+           ladder (audit U.W0.C-c §7.2). BC.W-AX-METRIC-HOVER lifts the badge
+           into a tactile VALUE-LIFT: it nudges UP (--metric-badge-hover-translate
+           -2px) + scales a hair more (1.04) + casts the cartoon-sticker offset
+           shadow (--shadow-cartoon-sm) — token-first, so a consumer zeroes the
+           lift from :root (--metric-badge-hover-translate: 0). Compositor-only
+           (translate/scale/box-shadow — proof:no-layout-animation holds). */
         border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
         background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
-        box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
-        scale: var(--metric-badge-hover-scale, 1.02);
+        box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight));
+        translate: 0 var(--metric-badge-hover-translate, -2px);
+        scale: var(--metric-badge-hover-scale, 1.04);
     }
 
     .metric-badge:active {
@@ -212,7 +224,14 @@
         backdrop-filter: var(--glass-blur-floating);
 
         padding: 0 0.75rem;
-        height: 2.25rem;
+        /* BC.W-SEARCH-CUSTOM — the height reads the shared `--control-pill-h`
+           element-override seam (the SAME rung `.input-pill` reads), DEFAULTING to
+           `--control-h-sm` so a bare search bar is byte-identical to the HEAD
+           2.25rem pill. `controlSizeClass(size)` (_shared/useControlSize.ts) re-points
+           the seam per rung (sm→`--control-h-xs`-ish via the cohort, lg→`--control-h-lg`),
+           so the SearchBar/FuzzySearch `size` prop retunes the field height WITHOUT a
+           recipe fork — ONE substitution rung, the cohort is still the source. */
+        height: var(--control-pill-h, var(--control-h-sm));
         max-width: var(--max-width-input);
         width: 100%;
         transition:
@@ -226,7 +245,13 @@
 
     .input-bar-field {
         font-family: var(--font-mono, monospace);
-        font-size: var(--type-small);
+        /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
+           seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
+           (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The
+           `controlSizeClass("sm")` rung re-points it to `--control-text-sm` (quieter);
+           `default`/`lg` keep `--control-text`. So the search field type tracks the
+           cohort under `--ui-scale`, NOT a static `--type-small` literal. */
+        font-size: var(--control-pill-text, var(--control-text));
         background: transparent;
         border: none;
         outline: none;

package/src/styles/utilities/metal.css

@@ -57,6 +57,32 @@
         background-clip: text;
         -webkit-background-clip: text;
         color: transparent;
+
+        /* ── BC.W-AX-METAL-GLOW — the gold catch-light (the lit-metal halo) ──────
+           A soft glow halo of the metal's OWN base hue behind the gradient text-clip
+           so the gold reads as LIT metal (light catching its surface), not a flat
+           gradient fill. Because `background-clip: text` makes the text transparent,
+           a `filter: drop-shadow` follows the clipped glyph shape — the halo hugs the
+           letters. ONE recipe on the shared selector (every metal lit, never a per-
+           metal re-paste); the glow reads `--metal-stop-base` so gold halos gold,
+           silver halos silver, bronze halos bronze (NOT a fixed gold-on-every-metal
+           mismatch). The earned-gold register (Q2): `.metal-gold`'s base is
+           `--color-gold`, so the gold catch-light is the earned-gold warm glow.
+
+           PRM-STATIC: the glow paints HERE, at rest, OUTSIDE the no-preference
+           bracket — the lit metal reads for PRM users; ONLY the sweep `animation:`
+           is gated (the §6 calm register; the disco family stays gone — this is a
+           soft warm whisper bounded by `--metal-glow-opacity`, not a neon bloom). */
+        --metal-glow-blur: var(--metal-glow-blur-default, 0.5em);
+        --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35);
+        filter: drop-shadow(
+            0 0 var(--metal-glow-blur)
+                color-mix(
+                    in srgb,
+                    var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%),
+                    transparent
+                )
+        );
     }
 
     /* Per-metal: set the channel marker + re-bind the stop slots to the quad. */