@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/tokens/sizing.css

@@ -1,450 +1 @@
-/* tokens/sizing.css
-   §10 sizing — the --ui-scale doctrine, control-height/font/glyph cohorts,
-   dropdown/carousel/stack-overlap, the dock geometry cascade (--dock-scale +
-   collapsed-pill + rail hairline + active-state ladder + iOS register + touch
-   floor), MetricBadge stacked geometry, the Configurator density + HIERARCHY
-   vocabulary, the single-column stage floor, the section tonal step, the
-   component-font override.
-   Carved (BB.W-CARVE3) from the former tokens/offsets-sizing.css §9/§10 split;
-   @import-ed by tokens.css immediately AFTER offsets.css at offsets-sizing's old
-   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 {
-    /* ═══════════════════════════════════════════════
-       §10 SIZING
-       ═══════════════════════════════════════════════ */
-    /* ── The ONE comfortable-sizing scale doctrine (AX.W51 D18) ──────────────
-       `--ui-scale` is the MASTER comfortable-sizing scalar — ONE unitless knob
-       (registered @property <number>, inherits:true, default the identity 1)
-       every interactive-control magnitude derives through `calc(<base> *
-       var(--ui-scale))`, so a single override grows control HEIGHT + PADDING +
-       GAP + FONT-SIZE + GLYPH in LOCKSTEP, proportion preserved, no per-component
-       hack. The cohorts below (`--control-h-*` heights, `--control-text*` control
-       fonts, `--ui-glyph*` glyphs) are its reading surfaces; the CVA bases + the
-       `.btn-pill`/`.input-pill` pills consume them.
-
-       ONE scale system, not three. The dock (`--dock-scale`) and the dropdown
-       family (`--dropdown-text`, W50) are SPECIALIZATIONS that read this axis:
-       `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1))` — the
-       dock multiplies ON TOP of the global comfort axis (its existing geometry
-       `calc` cascade inherits the global axis for free, zero edit). A consumer
-       re-tints the whole library's comfort from ONE `:root { --ui-scale: … }`
-       override (or a scoped region — a dense data-table sets it lower) — the
-       token-first axis.
-
-       EXCLUDED — the φ-DISPLAY ladder (`--type-display-*` / `--type-title` /
-       `--type-heading` / `--type-subheading`): a hero/title is a TYPOGRAPHIC
-       identity, NOT a touch target, so it does NOT grow on the comfort/coarse
-       axis. Only interactive-CONTROL text rides `--ui-scale`. Containers (card /
-       panel radii + paddings) are separate `--radius-*` / `--space-*` axes.
-
-       The desktop default is the IDENTITY (1) — byte-exact preservation, no
-       reflow of shipped consumers. The comfort GROWTH lives at the coarse-pointer
-       default (`--ui-coarse-scale`, §below) + the consumer override. The
-       WCAG-2.5.5 44px touch floor survives as a `max(…, --control-floor)` clamp
-       inside the scaled control-size (the coarse block lifts `--control-floor` to
-       `--touch-target`, so a sub-1 scale cannot drop a control under the target).
-       Coordinates with W54's `--glass-level` + W55's `--glass-tint-*` — SEPARATE
-       axes (size vs material vs legibility); a control is comfortably-sized AND
-       glass AND legible, three orthogonal knobs. */
-    --ui-scale: 1;
-    /* The global coarse-pointer comfort default — the WHOLE library grows ~1.5×
-       on touch from ONE place (the @media (pointer: coarse) block at §below lifts
-       :root --ui-scale to this). The dock's prior parallel 1.5× becomes the global
-       default it now shares. Public library-default identity — a consumer sets
-       1.3 / 1.75 on :root or a scope. */
-    --ui-coarse-scale: 1.5;
-    /* The control-height cohort — the h-7/h-9/h-10/h-11 register (28/36/40/44px)
-       the CVA size rungs encode, each scaled by the master axis. The CVA rungs
-       read these via `h-[var(--control-h-*)]` instead of the raw `h-N` literal.
-       `--control-floor` is the WCAG-2.5.5 clamp seam (0 at desktop, lifted to
-       --touch-target under coarse-pointer); each height is `max(scaled, floor)`. */
-    --control-floor: 0px;
-    --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor));
-    --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor));
-    --control-h-md: max(calc(2.5rem  * var(--ui-scale)), var(--control-floor));
-    --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor));
-    /* The control-FONT register (RED 3 — the user's "font too small"). A comfort
-       multiplier BETWEEN the static φ-ladder rung and the painted control font,
-       so interactive-control text grows on the comfort axis while the φ-DISPLAY
-       ladder stays a pure typographic scale (display headings do NOT grow on
-       touch). `--control-text` is the workhorse (the `text-sm` register the
-       buttons/inputs/triggers carried); `--control-text-sm` is the quieter rung
-       (the `text-xs` badge/caption register). W50's `--dropdown-text` IS the
-       picker-family specialization of this register.
-
-       AY.W-SCALE1 — the no-double-vw reconcile: the desktop-fluid viewport base
-       lives ONCE in `--type-small` / `--type-caption` (typography.css §scale — a
-       gentle `clamp(…vw…)` so the control font grows on a wide display); the
-       `--ui-scale` comfort scalar multiplies that FLUID base exactly ONCE HERE. The
-       vw term is applied once (in the rung), the comfort factor once (here) — under
-       the coarse 1.5× the font grows by the comfort factor ONCE, NOT vw×1.5
-       over-scaled. Do NOT inline a second clamp() here, and do NOT multiply the rung
-       by --ui-scale at the rung. */
-    --control-text:    calc(var(--type-small) * var(--ui-scale));
-    --control-text-sm: calc(var(--type-caption) * var(--ui-scale));
-    /* The control-GLYPH cohort (RED 4 — the glyph grows WITH the box). The
-       1rem/0.875rem control-glyph register the `size-4`/`size-3.5` literals
-       encode; the un-sized-<svg> CVA rule reads these via
-       `size-[var(--ui-glyph)]`, KEEPING the `:not([class*=size-])` host-sized-icon
-       escape intact (an explicit `size-9` still wins). */
-    --ui-glyph:    calc(1rem     * var(--ui-scale));
-    --ui-glyph-sm: calc(0.875rem * var(--ui-scale));
-
-    /* ── The picker-family type-scale (AX.W50 D17) ───────────────────────────
-       ONE governed two-rung scale the WHOLE shadcn picker family (Select /
-       DropdownMenu / Combobox / ContextMenu / Command / MultiSelect) reads, so the
-       family paints at ONE uniform scale instead of the scattered raw
-       `text-sm`/`text-xs` Tailwind-literal lottery (item rows at `text-sm`,
-       headings/shortcuts at `text-xs`, the two filter inputs at mismatched heights).
-       A consumer re-tints the whole family from ONE override.
-
-       It is a SPECIALIZATION of W51's control-font register (one scale system, not
-       three): `--dropdown-text` reads `--control-text` (the comfort-scaled `text-sm`)
-       and `--dropdown-text-secondary` reads `--control-text-sm` (the comfort-scaled
-       `text-xs`), so the picker family rides the SAME `--ui-scale` comfort axis as
-       every other control — a `--ui-scale` bump grows the dropdowns too. A consumer
-       wanting the family LARGER than the rest overrides `--dropdown-text` directly
-       (e.g. `var(--type-body)`); the override re-resolves every family surface.
-
-       Scale-contract (which surface reads which rung):
-         • PRIMARY (`--dropdown-text`)   → item rows, triggers, filter inputs, empties.
-         • SECONDARY (`--dropdown-text-secondary`) → section labels, group-headings,
-           keyboard shortcuts (the quieter-than-item caption register; resolves the
-           witness-2 contradiction — the Select/DropdownMenu/ContextMenu labels
-           collapse DOWN to the secondary rung to match the Combobox/Command headings,
-           ONE rung for the section-label role family-wide).
-       `--dropdown-input-height` unifies the two filter-input heights (Combobox was
-       h-10, Command was h-11) onto ONE register — a specialization of W51's
-       `--control-h-md` so the picker input scales on the comfort axis with the font. */
-    --dropdown-text:           var(--control-text);
-    --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;
-    --icon-md: 1rem;
-    --icon-lg: 1.25rem;
-    --icon-xl: 1.5rem;
-    /* V.W2 T9 — 32px rung; spinner glyphs (Loader2) + dense table-row buttons.
-       Naming follows the radius ladder + Tailwind convention (2xl > xl > xxl) —
-       see B6 §2.4 for the naming rationale. */
-    --icon-2xl: 2rem;
-    /* V.W2 T10 — 40px rung; empty-state hero glyph (DashboardMap MapIcon).
-       AI.W5-ζ — rebound from `2.5rem` literal to `var(--size-icon-btn)` so
-       the alignment is contractual single-source-of-truth rather than the
-       coincidental numerical match noted prior. */
-    --icon-3xl: var(--size-icon-btn);
-    /* V.W2 T11 — 56px rung; FlowSelector school/home survey-flow picker.
-       Largest rung in the icon ladder; reserved for hero-class glyphs. */
-    --icon-hero: 3.5rem;
-
-    /* Golden-ratio spacing rungs — φ² and φ³. Preemptive substrate; W4 hero
-       chassis + W5 StoryChassis migration land the consumers. R3 §A row 1.
-       The 0..4 rungs are not currently named (consumers reach via
-       Tailwind's spacing scale); 5/6 land here because their values fall
-       outside the default ladder and the audacious chassis pattern wants
-       a named handle. */
-    --space-phi-5: 2.618rem; /* φ² */
-    --space-phi-6: 4.236rem; /* φ³ */
-
-    /* Dock geometry — consumers may override locally */
-    --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px);
-    --dock-margin: 0.5rem;
-    --dock-menubar-reserve: 4rem;
-
-    /* AX.W45 — the dock geometry multiplier. `--dock-scale` threads the WHOLE
-       `.glass-dock[data-density]` geometry cascade (box, padding, gap, tab,
-       tile-min, glyph) via `calc(<base> * --dock-scale)`, so a single knob grows
-       every dock axis in lockstep. The WCAG 2.5.5 44px floor survives as a `max(…,
-       44px)` clamp INSIDE the scaled control-size.
-
-       AX.W51 RECONCILE (D18) — `--dock-scale` is RE-HOMED as a SPECIALIZATION of
-       the global `--ui-scale` comfort axis: `calc(var(--ui-scale) *
-       var(--dock-local-scale, 1))`. The dock now MULTIPLIES on top of the global
-       comfort scalar — its whole existing geometry `calc` chain inherits the global
-       axis for FREE (zero edit to the density cascade; the reconcile is at this ONE
-       definition line). At the desktop identity (`--ui-scale: 1`,
-       `--dock-local-scale: 1`) the dock is byte-identical to HEAD. On coarse-pointer
-       the GLOBAL `:root { --ui-scale: var(--ui-coarse-scale, 1.5) }` block grows the
-       dock WITH the rest of the library — ONE consistent touch scale, not a parallel
-       dock-only 1.5×. `--dock-local-scale` is the dock-local EXTRA multiplier
-       (default 1): a consumer who wants the dock LARGER than the global comfort sets
-       it, and the coarse block lifts it to `--dock-mobile-scale` (default 1, the
-       stack-extra) so the dock can grow an extra notch ON TOP of the global coarse
-       default. `--dock-mobile-scale` is the public library-default identity
-       (presets-in-consumers: a consumer sets 1.3/1.75 on `:root` or a dock scope). */
-    --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1));
-    --dock-local-scale: 1;
-    /* --dock-mobile-scale is the CONSUMER coarse knob — UNSET at :root so the
-       dock-layer coarse default (--dock-coarse-scale, below) is the fallback the
-       coarse block reads; a consumer setting --dock-mobile-scale on ANY ancestor
-       wins the fallback (R5-1 — the knob must reach the geometry cascade, not be
-       shadowed by a hard-pin on .glass-dock[data-density]). The coarse block in
-       dock/overflow.css RE-DECLARES --dock-scale so the descendant --dock-local-scale
-       lift re-flows into it (the substitution-vs-inheritance trap). */
-    --dock-mobile-scale: initial;
-    /* R5-2 — the dock-layer coarse-register default. The dock is a DENSE chrome strip
-       (not a body control), so on touch it floors at a TIGHTER multiplier than the
-       global --ui-coarse-scale 1.5 (which painted an ~80px collapsed pill, ~22% too
-       big — the slides-consumer R5-2 finding). 0.78 × the 1.5 global ≈ 1.17 effective
-       → a ~60px collapsed pill, the WCAG-2.5.5 44px floor held by the
-       `max(…, --dock-control-floor)` clamp. The consumer knob --dock-mobile-scale
-       overrides this; a consumer who wants the dock to MATCH the global comfort sets
-       --dock-mobile-scale: 1. */
-    --dock-coarse-scale: 0.78;
-    /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
-       icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
-       A consumer-passed explicit lucide size class still WINS (utility layer >
-       component layer); this is a DEFAULT, not a ceiling.
-
-       BB.W-PERF-PRODUCER A′-6 — the glyph rides the per-DENSITY box, not a flat rem.
-       The value.js D5-1 companion trace: `density="spacious"` grew the shelf + pad +
-       gap but the glyph stayed 1.25rem (it rode `--dock-scale` only, NOT the
-       per-density `--dock-layer-height` axis density.css scales). Now the glyph is a
-       RATIO of `--dock-layer-height` (`--dock-icon-glyph-ratio`, default 0.5 → a
-       2rem control → a 1rem glyph at compact, a 2.5rem control → 1.25rem at
-       comfortable, lockstep up the rungs). The `--dock-scale` coarse thread is
-       PRESERVED transitively — `--dock-layer-height` already rides it (density.css).
-       The WCAG glyph-floor holds via `max(…, --dock-icon-glyph-floor)` (a 16px floor
-       so a sub-1 density/coarse register can never drop the glyph below the legible
-       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-density]`
-       (density.css) — at `:root` it is the inline fallback below, so this `:root`
-       declaration resolves the fallback ladder; density.css RE-RESOLVES `--dock-icon-glyph`
-       inside each `[data-density]` scope so the density-painted height flows in (the
-       substitution-vs-inheritance trap the overflow.css R5-1 sweep documents). The
-       toggle mirror `.dark-mode-toggle-button > svg` reads the SAME `--dock-icon-glyph`
-       so both glyphs move onto the density axis together. */
-    --dock-icon-glyph-ratio: 0.5;
-    --dock-icon-glyph-floor: 1rem;
-    --dock-icon-glyph: max(
-        calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
-        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
-       un-collapsed control row, not a tight proportioned squircle. These two floor
-       tokens (referenced by dock.css's `.collapsed .dock-layer--summary` min-size +
-       the `--dock-pad-collapsed` morph floor) mint a TIGHT proportioned pill: the
-       summary min-size is ≈70% of the full control height (a proportioned dot, not a
-       full-row stub — the ratified default), and the collapsed padding is a step
-       BELOW the expanded `--dock-padding-block` so the collapsed chrome hugs the
-       glyph. The summary carries a SYMMETRIC `min-block-size` (dock.css) keyed to the
-       same token so the pill floors on BOTH axes — a squircle, not a stub. Consumers
-       retune the pill geometry per-instance via these two handles. */
-    /* AY.W-DOCK-NAV B4 — the collapsed pill is a PERFECT CIRCLE (the user's
-       "circle, not oval" bar). The diameter is the collapsed-summary min-size on
-       BOTH axes; the morph.css `.collapsed .dock-layer--summary` rule LIFTS the
-       `.dock-layer` height-lock (`height: var(--dock-layer-height)`) for the
-       collapsed summary so the pane is square at this token (the prior oval —
-       38×50, aspect 0.76 — was the locked 40px height against a 28px min-width).
-       The 0.85× value is a TIGHT proportioned circle a step below the full control
-       (so the collapsed dot reads smaller than an expanded control row) while
-       staying large enough that the centred glyph is not cramped. A consumer
-       retunes the circle diameter via this one handle. */
-    --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.85);
-    /* AX.W61 — the collapsed padding now threads the ONE `--dock-scale` coarse-pointer
-       multiplier DIRECTLY (at HEAD it was a flat 0.25rem off the scale, so the
-       collapsed pad alone stayed desktop-sized at the 1.5x mobile scale while the
-       box/glyph/min-size grew — a desync the morph then interpolated FROM). The
-       summary min-size already threads `--dock-scale` transitively through
-       `--dock-layer-height` (itself `calc(* --dock-scale)` at every density rung); this
-       lands the collapsed pad on the same thread so the whole collapsed pill scales
-       coherently on touch. The 0.25rem base stays the ratified tight floor. */
-    --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
-
-    /* AX.W45-TUNE Q3/C3 + C5 — the dock-control family reads a real GLASS register
-       on hover/active, NOT a same-hue `--card` mix at an alpha adjacent to the dock's
-       own `--glass-bg-dock` substrate (a sub-1%-ΔL no-op — the loud Q3 tell: "nothing
-       on hover, something on click"). Both legs now point at NAMED glass tiers a
-       measurable step ABOVE the dock's 42%-opacity substrate:
-         • hover  → `--glass-bg-resting` (the 65% glass plate) — the control surface
-                    WAKES as a brighter glass tier on hover, reading the blurred dock
-                    substrate through it. The +ΔL above `--glass-bg-dock` is perceptible
-                    BEFORE click; the specular gleam + scale ride alongside (one register).
-         • active → `--glass-bg-floating` (the 80% glass plate) — a tier ABOVE hover,
-                    the keyframes-dock "selected element reads as glass" model the user
-                    named (`pass-3:13`): the selected tile is a glass tier that shows the
-                    substrate through it, NOT the flat `--surface-tint-12` ink wash. The
-                    active ≠ hover register is the glass-tier step, not an alpha nudge.
-       This is a REGISTER change (substrate→glass-tier), not a magnitude knob. The
-       per-control `--dock-icon-hover-bg` override still wins if a consumer set it. */
-    --dock-control-hover-bg: var(--glass-bg-resting);
-    --dock-control-active-bg: var(--glass-bg-floating);
-
-    /* AX.W45-TUNE C4/C5 — the small-tile specular override. The 40px dock-control
-       tile is a fraction of a card's plate, so the global `--glass-specular-size`
-       (36% of the plate) blooms a disproportionate disc on a hover/active dock tile
-       (the I.W6 finding). The dock controls scope a TIGHTER radius (22%) so the gleam
-       wakes as a restrained EDGE-catch on the small tile, not a tile-filling bloom —
-       the right resolution of I.W6 (sized-down on the small surface), not turning the
-       specular off everywhere. Read by the dock-control `::before` recipe (glass.css)
-       via the family-scoped override below; the global card/panel size is untouched. */
-    --dock-control-specular-size: 22%;
-
-    /* AZ.W-DOCK-RAIL — the layer-switcher rail is a HAIRLINE register, not a
-       fused tinted gutter. The `--surface-tint-8` filled plate (the "heavy dark
-       blob column" R3-1) is RETIRED: `--dock-layer-rail-bg` defaults TRANSPARENT
-       so the rail box paints no fill, and the single `--dock-layer-rail-divider`
-       hairline becomes the only visible rail edge — a thin rule between the
-       switcher column and the dock body (the iOS-grade hairline switcher).
-       The hover/active affordance stays a translucent GLASS tint: the active
-       indicator reads `--dock-layer-rail-active`, defaulting to the glass-floating
-       tier (the keyframes-dock "selected reads as glass" register), NOT a
-       saturated `--primary 15%` warm-red mix — the exact accent defers to
-       W-REGISTER-IOS's root register (the rail keeps a glass tint here, never
-       bakes a brand-red the de-red wave has to undo). */
-    --dock-layer-rail-bg: transparent;
-    --dock-layer-rail-divider: color-mix(in srgb, var(--border) 40%, transparent);
-    --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 30%, transparent);
-    --dock-layer-rail-active: var(--glass-bg-floating);
-    /* AY.W-DOCK-NAV B6 — the switcher-rail TAB is a COMPACT square, distinct from
-       the 40px dock CONTROL. The prior fallback chain (`var(--dock-control-size,
-       1.75rem)`) resolved to the full 40px control, so a 3-tab column rail stood
-       ~140px tall — a giant pill of dead space. A dedicated tighter tab size
-       (1.75rem = 28px, density-scaled) keeps the rail a compact icon column the
-       indicator travels cleanly, and the dock grows only as tall as the rail needs.
-       Consumers retune the rail-tab size via this one handle. */
-    --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
-
-    /* BA.W-DOCK-SECTIONS — the divider-seam rail knobs.
-       `--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). 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)
-       Token-overridable active paint for `.dock-icon-button`. Promoted
-       from hardcoded `background: var(--muted); color: var(--foreground)`
-       per bbnf-buddy O11/c R1: 7 `:deep()` escapes at `ToolsLayer.vue`
-       redefine bg/color/scale/border/shadow on the active variant; the
-       ladder absorbs ~3 of 7 at a stroke. Defaults preserve the prior
-       visual contract (no transform, no border, no shadow) — overrides
-       take effect per-instance via `:root` or a parent scope, e.g.
-       `.tools-layer { --dock-active-scale: 1.2; --dock-active-bg: …; }`.
-       ≥ 2-consumer coverage: bbnf-buddy ToolsLayer (override consumer) +
-       speedtest dock (default consumer).
-
-       AX.W45 DK2 — re-pointed off the opaque `--muted` plate onto the glass-
-       correct `--dock-control-active-bg` (a translucent tint a ladder step above
-       hover), so the icon-button active no longer stamps a solid cream rectangle
-       over the dock glass. The O.W6 active-ladder override consumers still retint
-       per-instance; only the DEFAULT moved to glass-correct. */
-    --dock-active-bg: var(--dock-control-active-bg);
-    --dock-active-color: var(--foreground);
-    --dock-active-scale: 1;
-    --dock-active-border: none;
-    --dock-active-shadow: none;
-
-    /* AZ.W-REGISTER-IOS — the iOS-26/27 SELECTED register, at the ROOT.
-       R3-6 retired the brand-red (`--viz-fourier`) interactive register
-       (hover/active/selected/pressed) in favour of the iOS-glassy luminance-lift:
-       a translucent material-lift plate (`--dock-control-active-bg`, already the
-       `--glass-bg-floating` tier — C4-INV-1, UNCHANGED) + a brighter-material
-       accent that lifts LUMINANCE, never a saturated brand hue.
-
-       `--dock-selected-accent` is the SINGLE retint knob for the selected
-       affordance: it defaults to a translucent foreground-over-transparent
-       "brighter material" lift, so it auto-FLIPS with `--foreground` (dark mode
-       resolves a light luminance-lift over the dark plate — the iOS read). The
-       rail leading-edge accent BAR (`dock-controls.css` `::before`) consumes it;
-       the selected GLYPH stays `--foreground` warm-ink (arm-a — the glyph never
-       carries the accent token, only the bar does). A consumer retints the whole
-       selected affordance through this ONE token (token-first); red survives only
-       as static brand INK (the ℱ wordmark / data-viz strokes / the gold-CTA
-       family), never as an interactive register. */
-    --dock-selected-accent: color-mix(in oklab, var(--foreground) 14%, transparent);
-
-    /* AZ.W-REGISTER-IOS — the iOS press-DARKEN. Press today scales only
-       (`--scale-press-dock`, C4-INV-4); iOS lands "darken + shrink". This token
-       is a tier BELOW resting — `--glass-bg-resting` mixed ~7% toward `--foreground`
-       — read on the dock control `:active` alongside the scale-press so a press
-       lands the brief glass-darken. Auto-flips with `--foreground`/`--glass-bg-resting`. */
-    --dock-control-press-bg: color-mix(
-        in oklab,
-        var(--glass-bg-resting),
-        var(--foreground) 7%
-    );
-
-    /* Q.W3 Lane G (Q-cos-13) — the O.W6 Lane D `--icon-tooltip-hit-area`
-       token retired here. IconTooltip no longer owns a wrap-span; the
-       slotted child carries its own WCAG 2.5.5 hit-area (interactive
-       children via their four-state contract, bare glyphs via a
-       `min-h-11 min-w-11` host). No orphaned token left behind. */
-
-    /* O.W6 Lane D — Dock touch-target floor. Mirrors the IconTooltip
-       hit-area but for the dock-control surface. The base value tracks
-       the desktop default (`--size-icon-btn`); the
-       `@media (pointer: coarse)` block at `dock.css` lifts it to the
-       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
-       named rung the `@media (pointer: coarse)` block in utilities.css reads,
-       retiring the per-consumer one-liner `min-h-[44px]` patches. Equals
-       `--dock-touch-target` numerically; kept as a distinct token so the
-       dock floor and the general floor can be retuned independently. */
-    --touch-target: 2.75rem; /* 44px */
-
-    /* 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). */
-}
+:root { --ui-scale: 1; --ui-coarse-scale: 1.5; --control-floor: 0px; --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor)); --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor)); --control-h-md: max(calc(2.5rem * var(--ui-scale)), var(--control-floor)); --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor)); --control-text: calc(var(--type-small) * var(--ui-scale)); --control-text-sm: calc(var(--type-caption) * var(--ui-scale)); --ui-glyph: calc(1rem * var(--ui-scale)); --ui-glyph-sm: calc(0.875rem * var(--ui-scale)); --dropdown-text: var(--control-text); --dropdown-text-secondary: var(--control-text-sm); --dropdown-input-height: var(--control-h-md); --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; --icon-md: 1rem; --icon-lg: 1.25rem; --icon-xl: 1.5rem; --icon-2xl: 2rem; --icon-3xl: var(--size-icon-btn); --icon-hero: 3.5rem; --space-phi-5: 2.618rem; --space-phi-6: 4.236rem; --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px); --dock-margin: 0.5rem; --dock-menubar-reserve: 4rem; --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-local-scale: 1; --dock-mobile-scale: initial; --dock-coarse-scale: 0.78; --dock-icon-glyph-ratio: 0.5; --dock-icon-glyph-floor: 1rem; --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.85); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-pill-h: calc( var(--dock-layer-height, 2.5rem) + 2 * var(--dock-padding-block, 0.375rem) ); --dock-scroll-safe-inset: calc(var(--focus-ring-width, 2px) + 1px); --dock-scroll-gutter: var(--dock-scroll-safe-inset); --dock-fisheye-amp: 0.6; --dock-fisheye-sigma: 64; --dock-fisheye-duration: 80ms; --dock-control-hover-bg: var(--glass-bg-resting); --dock-control-active-bg: var(--glass-bg-floating); --dock-control-specular-size: 22%; --dock-layer-rail-bg: transparent; --dock-layer-rail-divider: color-mix(in srgb, var(--border) 40%, transparent); --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 30%, transparent); --dock-layer-rail-active: var(--glass-bg-floating); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-section-zone-gap: var(--dock-gap, 0.25rem); --dock-active-bg: var(--dock-control-active-bg); --dock-active-color: var(--foreground); --dock-active-scale: 1; --dock-active-border: none; --dock-active-shadow: none; --dock-selected-accent: color-mix(in oklab, var(--foreground) 14%, transparent); --dock-ring: var(--focus-ring-shadow); --dock-control-press-bg: color-mix( in oklab, var(--glass-bg-resting), var(--foreground) 7% ); --dock-touch-target: 2.75rem; --dock-label-ratio: 0.5088; --touch-target: 2.75rem; }

package/dist/styles/tokens.css

@@ -1,52 +1 @@
-/*
- * tokens.css — Unified design tokens for @mkbabb/glass-ui
- *
- * Library default identity: warm-cream + muted-black, 13-stop per-section jewel
- * palette, viz-basis colors (Fourier red / Chebyshev blue / Legendre purple),
- * cartoon offset shadows, 0.625rem base radius, paper-and-glass forward.
- *
- * Structural tokens (durations, easings, springs, z-index, focus ring,
- * interactive scales) are stable across consumers. Visual tokens (colors,
- * shadows, radii, grain opacities) are consumer-overridable.
- *
- * This file is the thin @import ROOT of the token cascade. The token body is
- * carved into cohesive `tokens/*.css` partials (each under the no-god-module
- * 500-line bound), @import-ed below in CASCADE ORDER. The cascade is isomorphic:
- * the master :root sub-ranges each carry their own :root{} (adjacent
- * same-selector blocks resolve identically), and the post-root overrides
- * (light-dark, the .dark arm, the @property registrations) keep their source
- * order. See docs/precepts/design-idioms.md §cohesion-aware partials. The
- * partial cascade order is BINDING — light-dark after the master partials
- * (overrides them), dark-arm after light-dark, property-regs last
- * (registrations + the specular magnitude cohort that reads them).
- */
-
-/* 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, 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";
-@import "./tokens/glass-fx.css";
-@import "./tokens/glass-deep.css";
-@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";
-@import "./tokens/dark-arm.css";
-@import "./tokens/property-regs.css";
+@import "./tokens/scheme-motion.css"; @import "./tokens/scheme-spring.css"; @import "./tokens/motion-registers.css"; @import "./tokens/color-radius.css"; @import "./tokens/shadow.css"; @import "./tokens/glass.css"; @import "./tokens/glass-fx.css"; @import "./tokens/glass-deep.css"; @import "./tokens/on-glass-fg.css"; @import "./tokens/offsets.css"; @import "./tokens/sizing.css"; @import "./tokens/sizing-config.css"; @import "./tokens/scale-paper.css"; @import "./tokens/scroll-tokens.css"; @import "./tokens/light-dark.css"; @import "./tokens/dark-arm.css"; @import "./tokens/dark-arm-glass.css"; @import "./tokens/property-regs.css"; @import "./tokens/property-regs-specular.css";

package/dist/styles/tokens.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Runtime design tokens — the JS/TS projection of glass-ui's CSS custom properties.
+ *
+ * CSS tokens in `src/styles/tokens.css` drive the rendered UI. Some contexts
+ * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
+ * CSS variables at render time — they need literal numbers and strings.
+ *
+ * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ */
+/** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
+export declare const chartHeights: {
+    readonly compact: 240;
+    readonly default: 360;
+    readonly large: 400;
+};
+/** Echarts grid margin (px). Matches `--chart-margin` in tokens.css. */
+export declare const chartMargin = 20;
+/**
+ * Neutral divider colors for chart gridlines, axis ticks, overlays.
+ * rgba literals — echarts / Canvas 2D can't parse CSS vars in color options.
+ * Match `--color-divider-*` in tokens.css.
+ */
+export declare const chartColors: {
+    readonly dividerSubtle: "rgba(128, 128, 128, 0.05)";
+    readonly dividerMedium: "rgba(128, 128, 128, 0.4)";
+    readonly dividerStrong: "rgba(128, 128, 128, 0.7)";
+};
+/** Default form-select minimum width (px). Matches `--input-min-width-sm`. */
+export declare const minWidthInputSm = 80;
+/**
+ * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
+ * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
+ * Vue inline-style binding) so the JS-driven cascade and CSS-driven
+ * cascade resolve to the same value. The three named tiers correspond
+ * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
+ * in `styles/tokens.css`:
+ *
+ *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
+ *                         results-table `:nth-child` delays)
+ *   - `default` (80ms)  — canonical row stagger (ResultStack, bar
+ *                         entrance, useStaggerReveal default)
+ *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
+ *
+ * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
+ * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
+ * AJ-W4-κ.
+ */
+export declare const motionStagger: {
+    readonly tight: 40;
+    readonly default: 80;
+    readonly relaxed: 120;
+};

package/dist/styles/tokens.ts

@@ -0,0 +1,58 @@
+/**
+ * Runtime design tokens — the JS/TS projection of glass-ui's CSS custom properties.
+ *
+ * CSS tokens in `src/styles/tokens.css` drive the rendered UI. Some contexts
+ * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
+ * CSS variables at render time — they need literal numbers and strings.
+ *
+ * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ */
+
+/** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
+export const chartHeights = {
+    compact: 240,
+    default: 360,
+    large: 400,
+} as const;
+
+/** Echarts grid margin (px). Matches `--chart-margin` in tokens.css. */
+export const chartMargin = 20;
+
+/**
+ * Neutral divider colors for chart gridlines, axis ticks, overlays.
+ * rgba literals — echarts / Canvas 2D can't parse CSS vars in color options.
+ * Match `--color-divider-*` in tokens.css.
+ */
+export const chartColors = {
+    dividerSubtle: "rgba(128, 128, 128, 0.05)",
+    dividerMedium: "rgba(128, 128, 128, 0.4)",
+    dividerStrong: "rgba(128, 128, 128, 0.7)",
+} as const;
+
+/** Default form-select minimum width (px). Matches `--input-min-width-sm`. */
+export const minWidthInputSm = 80;
+
+/**
+ * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
+ * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
+ * Vue inline-style binding) so the JS-driven cascade and CSS-driven
+ * cascade resolve to the same value. The three named tiers correspond
+ * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
+ * in `styles/tokens.css`:
+ *
+ *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
+ *                         results-table `:nth-child` delays)
+ *   - `default` (80ms)  — canonical row stagger (ResultStack, bar
+ *                         entrance, useStaggerReveal default)
+ *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
+ *
+ * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
+ * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
+ * AJ-W4-κ.
+ */
+export const motionStagger = {
+    tight: 40,
+    default: 80,
+    relaxed: 120,
+} as const;