@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/styles/tokens/shadow.css

@@ -6,12 +6,17 @@
     /* ═══════════════════════════════════════════════
        §7  SHADOWS — cartoon offset is the signature
        ═══════════════════════════════════════════════ */
-    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
-    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
+    /* BD.W-CARTOON-CEL-INK — the `--shadow-cartoon`/`-hover` aliases + the
+       `--shadow-modal` cartoon plane re-point onto the warm `--cartoon-ink-lead`
+       (0-blur down-LEFT, the cel family coherence — no neutral `--foreground` gray
+       smudge). `--cartoon-ink-lead` is defined below in this same :root block (custom
+       properties resolve order-independently). */
+    --shadow-cartoon:       -3px 3px 0px 0px var(--cartoon-ink-lead);
+    --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead);
     --shadow-soft:          0 4px 12px rgba(0, 0, 0, 0.1);
     --shadow-elevated:      0 8px 24px rgba(0, 0, 0, 0.12);
     --shadow-modal:
-        4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent),
+        -4px 4px 0px 0px var(--cartoon-ink-lead),
         0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
 
     --cartoon-shadow:       var(--shadow-cartoon);
@@ -88,16 +93,42 @@
     --shadow-cartoon-color:             rgb(0 0 0 / 0.12);
     --shadow-cartoon-color-soft:        rgb(0 0 0 / 0.06);
 
-    /* Tiered cartoon shadows */
-    --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
-    --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    /* ── BD.W-CARTOON-CEL-INK — the cartoon register's OWN warm cel ink ──────────────
+       Decoupled from `--shadow-color` so a consumer retunes the cast without
+       disturbing every elevation box-shadow. Built by EXTRACTING the warm
+       `--foreground` hue (`oklch from`) and FLOORING chroma (`max(c, 0.11)` —
+       TECHNICOLOR, not merely-non-gray, the BA.W-NO-GRAY discipline applied to the
+       cast) + DEEPENING L (`clamp(0.14, l, 0.18)`) so at stamp opacity it reads as a
+       COLORED cel line, never a neutral gray. A cel cast is INK — it stays a warm DARK
+       ink (the dark arm pins its own warm dark ink, dark-arm.css). The three planes
+       step DOWN in opacity (lead 32% / mid 26% / contact 18%) — `in oklab` NOT
+       `in srgb` (srgb muddies a warm dark ink toward gray as it dilutes; oklab holds
+       the warm hue stable across the alpha ramp — the landed gray-dilution defect). */
+    --cartoon-ink: oklch(from var(--foreground) clamp(0.14, l, 0.18) max(c, 0.11) h);
+    --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 32%, transparent);
+    --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 26%, transparent);
+    --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent);
+    /* `@supports not (oklch from …)` floors the ink to a named warm sRGB literal
+       (a legacy engine gets a WARM — not gray — stamp; NO dead inline literal). */
+    --cartoon-ink-fallback: #4a3320;
+
+    /* BD.W-CARTOON-CEL-INK — the tiered cel-ink STAMP, re-pointed to the warm
+       `--cartoon-ink` rungs at HARD 0-BLUR (lead + mid + contact all 0px — the cel
+       edge; the landed 1–2px soft blur is the gray-smudge defect), keeping the LANDED
+       down-LEFT geometry (REFINE-not-flip — the direction is coherent with the
+       upper-right `--glass-key`; cast lands lower-LEFT). φ-cadenced offsets. */
+    --shadow-cartoon-sm:
+        -2px 2px 0 var(--cartoon-ink-lead),
+        -3px 3px 0 var(--cartoon-ink-mid),
+        -4px 4px 0 var(--cartoon-ink-contact);
+    --shadow-cartoon-md:
+        -3px 3px 0 var(--cartoon-ink-lead),
+        -5px 5px 0 var(--cartoon-ink-mid),
+        -7px 7px 0 var(--cartoon-ink-contact);
+    --shadow-cartoon-lg:
+        -4px 4px 0 var(--cartoon-ink-lead),
+        -7px 7px 0 var(--cartoon-ink-mid),
+       -11px 11px 0 var(--cartoon-ink-contact);
     --cartoon-shadow-sm: var(--shadow-cartoon-sm);
     --cartoon-shadow-md: var(--shadow-cartoon-md);
     --cartoon-shadow-lg: var(--shadow-cartoon-lg);
@@ -164,3 +195,32 @@
         color-mix(in srgb, var(--blob-shadow-color) 44%, transparent);
 
 }
+
+/* BD.W-CARTOON-CEL-INK — the relative-color-syntax fallback. On a legacy engine that
+   lacks `oklch(from …)`, `--cartoon-ink` would be invalid (the whole cast drops). Floor
+   it to the named warm sRGB literal `--cartoon-ink-fallback` (NOT a dead inline literal)
+   so the cel stamp degrades to a WARM — never gray, never empty — ink. The three
+   strength rungs re-derive off the floored ink for free (they `color-mix` it). */
+@supports not (color: oklch(from white l c h)) {
+    :root {
+        --cartoon-ink: var(--cartoon-ink-fallback);
+    }
+}
+
+/* BD.W-CARTOON-CEL-INK — prefers-contrast / reduced-transparency floor the inked edge
+   UP (the cel cast is a legibility ASSET, not decoration; PRT is NOT a no-op — the cast
+   is translucent ink). */
+@media (prefers-contrast: more) {
+    :root {
+        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
+        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
+        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
+    }
+}
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
+        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
+        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
+    }
+}

package/dist/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/dist/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/dist/styles/tokens.css

@@ -21,10 +21,17 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The ten partials @import in
+/* CSS @import rules must precede every other rule. The partials @import in
    cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
-   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
+   BB.W-CARVE3, and scheme-motion's §2 EASING block into scheme-spring.css at
+   BD.W-CUT — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
+/* BD.W-CUT (no-god-module carve) — scheme-motion's §2 EASING block (spring
+   linear() curves + per-spring duration clocks + goo-flow curves + bezier
+   cores/aliases) carved into scheme-spring.css to hold the 500-line bound,
+   @import-ed IMMEDIATELY AFTER scheme-motion.css (adjacent same-selector :root
+   blocks at the same cascade slot — the spring/easing tokens resolve in order). */
+@import "./tokens/scheme-spring.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";
@@ -33,6 +40,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/dist/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/dist/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/dist/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);
+}