@mkbabb/glass-ui 4.0.0 → 4.0.1

package/dist/styles/tokens/property-regs.css

@@ -41,6 +41,21 @@
     initial-value: 0%;
 }
 
+/* BB.W-BORDER-PROGRESS — the masked-conic BORDER ring's sweep fill. The conic
+   gradient (border-progress.css) reads `--border-progress-fill` as the swept
+   extent (`conic-gradient(…, transparent var(--border-progress-fill), …)`), so a
+   determinate progress INTERPOLATES the border ring (a bare unregistered var()
+   snaps the sweep; the registered typed <percentage> lets the engine animate the
+   gradient stop). `inherits: false` — each ring owns its own fill (the per-surface
+   ownership the specular cohort uses; a ringed parent must not push its fill onto a
+   child). `initial-value: 0%` is the safe resting ring (the unregistered fallback
+   paints it; the cross-fade collapses to it on a non-supporting engine). */
+@property --border-progress-fill {
+    syntax: "<percentage>";
+    inherits: false;
+    initial-value: 0%;
+}
+
 @property --phase-tint-amount {
     syntax: "<percentage>";
     inherits: true;
@@ -91,6 +106,71 @@
     initial-value: 0;
 }
 
+/* BB.W-LENSING — the per-surface EDGE-glint angle channel. `--specular-angle` is
+   the pointer angle-from-center the edge-glint conic sweep reads (material.css);
+   `useSpecularPointer` writes it (the angle feed). `inherits: false` — the
+   per-element ownership discipline of the specular cohort above (each pseudo owns
+   its typed value; a parent's angle must never bleed into a child glass surface).
+   `initial-value: 0deg` is the static rest position (the rim glint sits top when
+   unwired — no ambient drift, no blowout). */
+@property --specular-angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+
+/* BB.W-LENSING `--glass-refract` axis — RETIRED (DDR-LENS-BAKE, glass-refract.css).
+   The axis drove the `feDisplacementMap` `scale` by splicing `var(--glass-refract)`
+   between a head/tail `url()` pair. That construction never parsed as a
+   `backdrop-filter` (it emitted three tokens, not one url) AND broke consumer bundlers
+   (the tail `url("'…")` mis-resolved as a file path); a CSS url() string token cannot
+   carry a substituted `var()`, so a dynamic `scale` inside the mandatory single
+   self-contained data-URI is structurally impossible. The `scale` is now BAKED at 28
+   (the resting bend, byte-identical) — no axis, no `@property` reg. */
+
+/* BB.W-GLASS-ACCENT — the THIRD disjoint glass axis: the per-INSTANCE
+   CHROMATIC-RIM tint. `--glass-accent` is a complete `<color>` (a consumer DATA
+   hue) that OKLab-tints a glass surface's RIM (the `--glass-material-rim` inset
+   ring + the per-rung `--glass-border-*`) and the `::before` specular catch-light
+   CORE — so the §F1 data-keyed colored hover (a chart cell whose surface glows
+   with that datum's series hue) is a ONE-LINE seam (`--glass-accent: <hue>;
+   --glass-accent-strength: <N%>` on the instance), not a hand-threaded
+   `border-color` + inline catch-light per consumer.
+
+   DISTINCT-not-fork of W55's `--glass-tint-source` (the WHOLE-PLATE BACKGROUND
+   legibility darken toward `--glass-tint-ink`): the accent is the RIM+GLINT
+   chromatic DECORATION axis (toward a consumer DATA hue, per-instance), it NEVER
+   writes the W55 cohort and NEVER tints the plate background. Three disjoint glass
+   axes: LEVEL (opacity+blur, AX.W54) · TINT (whole-plate legibility, W55) · ACCENT
+   (per-instance chromatic rim+glint, this wave).
+
+   • --glass-accent (<color>) — the consumer data hue. `inherits: true` (the
+     `--glass-level`-style cascading scalar — a host sets it on an ancestor to tint
+     a sub-tree; a consumer sets it per-INSTANCE on the surface). `initial-value:
+     transparent` is the NEUTRAL IDENTITY: a `color-mix(in oklab, X, transparent N)`
+     is byte-identical X at the resting end, so an UNSET surface paints exactly
+     today's warm-ink rim + warm-cream catch-light (the W2 neutral-fallback floor).
+
+   • --glass-accent-strength (<percentage>) — the bounded knob. `inherits: true`
+     (rides the accent down the same sub-tree). `initial-value: 0%` so the mix is a
+     provable no-op when unset (`color-mix(in oklab, X, <accent> 0%)` === X). The
+     consumer-set ceiling is a WHISPER at the rim, not a flooded plate — the demo
+     specimens engage ~40-55% (the rim/glint reads the hue while the warm-cream core
+     + the AA legibility survive; the `--glass-tint-strength-aa` ≤24% bounding
+     precedent, lifted here because the accent rides the THIN rim/glint not the
+     whole plate). A malformed override CLAMPS to 0% (the typed fail-safe). */
+@property --glass-accent {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+@property --glass-accent-strength {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
+}
+
 /* AX.W54 — the GLASS-FIRST single knob. `--glass-level` is the ONE clarity
    scalar threaded through BOTH glass ladders at their single sites (the
    `--glass-bg-*` opacity recipe + the `--glass-blur-*` radii). It is a typed,
@@ -114,6 +194,27 @@
     initial-value: 1;
 }
 
+/* BB.W-DEEP-GLASS — the OPT-IN deep-glass DEPTH scalar. `--glass-depth` is the
+   `--glass-level` TWIN for the deep tier: a typed INHERITING <number> so a host
+   sets it on any ancestor to retune the deep tier's depth (the cascading-scalar
+   idiom, distinct from the per-element `inherits: false` specular cohort). The
+   deep recipe (tokens/glass-deep.css) LERPs both the blur radius AND the saturate
+   between the calm `floating` endpoint (depth 0 ≡ the calm ceiling) and the Apple-
+   deep endpoint (depth 1 ≡ saturate 1.5 / blur 16px), so the deep blur is
+   `--glass-depth`-DRIVEN (the D1 axis assert — never a baked literal) and animates
+   smoothly. `initial-value: 1` is the resting deep magnitude: a `.glass-deep`
+   surface paints at the full Apple-deep register by default; a consumer dials
+   `--glass-depth: 0.5` to land it half-way to the calm floating rung. SEPARATE
+   from `--glass-level` (opacity+blur clarity), `--glass-tint-*` (legibility), and
+   `--glass-refract` (lens displacement) — the disjoint depth axis. The deep tier
+   COMPOSES `--glass-level` too (the deep blur scales it), so the opaque escape +
+   the a11y brackets reach the deep plate through the ONE level path. */
+@property --glass-depth {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
 /* AX.W51 D18 — the master comfortable-sizing scalar registered typed. The
    `<number>` syntax guarantees `calc(<base> * var(--ui-scale))` is always valid (a
    malformed override CLAMPS to the initial value 1, not an invalidated calc — the
@@ -152,6 +253,13 @@
     --glass-specular-intensity-rest: 0;
     --glass-specular-intensity-hover: 0.1;
     --glass-specular-intensity-active: 0.16;
+    /* BB.W-BUTTON-GLASS (d) — the BUTTON-SCOPED hover gleam bump. The lit glass
+       button should read a notch brighter at the grazing edge than the global
+       hover whisper (0.10). `.btn-glass` re-points its own
+       `--glass-specular-intensity-hover` to this knob (surfaces.css), so ONLY the
+       button lifts — the global cohort above is UNTOUCHED. A consumer retints the
+       button gleam from this ONE override. */
+    --glass-specular-btn-hover: 0.14;
 }
 
 /* Over the deep canvas `plus-lighter` still lifts, so the dark arm runs a touch
@@ -159,4 +267,23 @@
 .dark {
     --glass-specular-intensity-hover: 0.08;
     --glass-specular-intensity-active: 0.12;
+    /* The button bump rides a touch softer in dark too (the dark hover is 0.08;
+       the button reads ~0.11, still a notch above the global whisper). */
+    --glass-specular-btn-hover: 0.11;
+}
+
+/* BB.W-BUTTON-GLASS (b)/(e) — the press DRIVE scalar. ONE typed 0..1 custom
+   property Button.vue writes off the `useSpringPress` spring (0 released → 1
+   pressed, with the ~5% overshoot the spring carries). It is the SINGLE drive the
+   press SQUISH (the `useLiquidFlex` reciprocal X/Y deform), the coupled specular/
+   brightness lift, and the optional `.glass-refract` lens-swell all read — the "one
+   drive, the glass deforms under press" read. Registered typed so a `transition`/
+   downstream `calc()` interpolates the VALUE (number), not the text. `inherits:
+   true` so the host-written value reaches the `.glass-material::before` pseudo +
+   the coupled rules. `initial-value: 0` so an unwired/SSR button is the static
+   rest frame (the no-JS CSS `.tap-squish` scale floor still presses). */
+@property --glass-btn-press-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
 }

package/dist/styles/tokens/scale-paper.css

@@ -67,6 +67,20 @@
         0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
     --focus-ring: var(--focus-ring-shadow);
 
+    /* BB.W-INVALID-RING — the destructive twin of --focus-ring-shadow. The
+       aria-invalid ring is ONE register: every form control (Input/Textarea/
+       NumberField via `.input-pill`, SelectTrigger, ComboboxInput, TagsInput)
+       reads `box-shadow: var(--invalid-ring)` instead of re-spelling the recipe
+       inline. ONE geometry (the SAME `--focus-ring-width`), ONE tint knob
+       (`--invalid-ring-tint`, the documented retint axis), resolving
+       `var(--destructive)` so a dark `--destructive` re-anchor flows through. A
+       consumer retints every invalid ring library-wide from a single
+       `:root { --invalid-ring-tint: … }` override — the token-first axis
+       `--focus-ring-shadow` already grants the focus ring. */
+    --invalid-ring-tint: 35%;
+    --invalid-ring: 0 0 0 var(--focus-ring-width)
+        color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent);
+
     /* ═══════════════════════════════════════════════
        §12 PAPER TEXTURES
        ═══════════════════════════════════════════════ */
@@ -80,6 +94,45 @@
     --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
     --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
 
+    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC half of the paper-cascade, the
+       peer of the organic turbulence above. Where `--paper-*-texture` are
+       feTurbulence grain fields, this is a two-frequency engineering-paper
+       grid: a 32px MINOR cell + a 128px MAJOR rule (the 4×-major blueprint
+       vocabulary the demo `.story-bg-grid` speaks, re-expressed as a library
+       token so a document-register card can opt its INTERIOR ground into the
+       line-field, not only the page margin). Unlike the organic SVG textures
+       (a baked-at-parse `opacity` URI), the grid is a STATIC `background-image`
+       gradient-STACK — a one-time compositor-cached paint, NEVER a per-frame
+       repaint. The line INK reads a `color-mix(… var(--foreground) N%, …)` so
+       it composes against the warm ink identity and re-tints with `--foreground`
+       in lockstep — never a hardcoded `hsl()` (the no-gray / token-first
+       floor). The ambient through-card strength is the ONE knob
+       `--paper-grid-opacity` (~0.08, the ask's "felt THROUGH the card ~0.08"):
+       the MINOR line ink scales off it directly and the MAJOR rule rides
+       `* 1.6` (the demo's 7%→12% engineering-paper weight step), so a consumer
+       retunes the whole grid from the single strength knob. (The strength lives
+       in the ink alpha, not a layer `opacity`, because the utility paints the
+       grid on the card's HOST `background-image` to avoid the two-pseudo-budget
+       contention with the grain `::after` / specular `::before` — see
+       cards.css.) */
+    --paper-grid-opacity: 0.08;
+    --paper-grid-texture-size: 32px;
+    --paper-grid-line: color-mix(
+        in srgb,
+        var(--foreground) calc(var(--paper-grid-opacity) * 100%),
+        transparent
+    );
+    --paper-grid-line-major: color-mix(
+        in srgb,
+        var(--foreground) calc(var(--paper-grid-opacity) * 160%),
+        transparent
+    );
+    --paper-grid-texture:
+        linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px),
+        linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px);
+
     /* ═══════════════════════════════════════════════
        §13 GOLD (accent family kept for consumers using it)
        ═══════════════════════════════════════════════ */
@@ -130,6 +183,38 @@
     --color-silver-dark: var(--silver-dark);
     --color-silver-deep: var(--silver-deep);
 
+    /* ═══════════════════════════════════════════════
+       §13c BRONZE (the THIRD brand-metal — BB.W-METAL-SHIMMER)
+       ═══════════════════════════════════════════════ */
+    /* The warm-brown patina quad — the third member of the gold·silver·bronze
+       brand-metal TRIAD (the medal triad, the gilt/aged "third place" figure, the
+       record-badge register). Gold (warm-yellow ~84°) + silver (cool-steel ~255°)
+       are the two poles; bronze is the warm-amber-brown ~54° register between them.
+       The cascade EXACTLY mirrors gold's and silver's (scale-paper raw → bridges
+       `--color-bronze*` alias → both dark arms); `-deep` is mode-invariant.
+
+       BA.W-NO-GRAY brand-metal EXCEPTION — bronze is the THIRD metal on the SAME
+       sanction silver carries (the ONE cool-neutral exception). Bronze is a WARM
+       metal identity with chroma ABOVE the warm floor: each rung resolves OKLab
+       C 0.072-0.112 (far above the STRONG_FLOOR 0.020) at hue ~49-60°, so it reads
+       as polished bronze MATERIAL, never a desaturated brown CAST (the W-NO-GRAY
+       "warm-not-tinted" bar). It is NOT a neutral — a low-chroma bronze would BE a
+       neutral and break the brand-metal read; the chroma is the metal. The hue sits
+       between gold and red-orange so it distinguishes from a dark gold at the rim. */
+    --bronze: oklch(0.620 0.092 54.0);
+    --bronze-light: oklch(0.760 0.112 60.0);
+    --bronze-dark: oklch(0.500 0.082 50.0);
+    /* The mode-INVARIANT deep bronze plate (mirrors `--gold-deep`/`--silver-deep`'s
+       contract — a fixed dark bronze so a white label clears ≥4.5:1 in BOTH modes;
+       it does NOT flip with `--foreground`). 8.36:1 white in light / 4.79:1 in dark
+       on the dark-arm-lifted rungs. The would-be saturated CTA twin of the metal. */
+    --bronze-deep: oklch(0.430 0.072 50.0);
+
+    --color-bronze: var(--bronze);
+    --color-bronze-light: var(--bronze-light);
+    --color-bronze-dark: var(--bronze-dark);
+    --color-bronze-deep: var(--bronze-deep);
+
     /* ═══════════════════════════════════════════════
        §14 RAINBOW PALETTE — oklch (AV.W16 TW2; mode-independent, no .dark
        mirror; hue preserved from the prior hsl() cadence)
@@ -267,6 +352,32 @@
     --metric-row-label-clamp-cqi: 5cqi;
     --metric-row-label-clamp-max: 2.75rem;
 
+    /* BB.W-CONTROL-TOKENS — the two CONSUMER-reach knobs (the no-`:deep`
+       precept, Design Axis 2). MetricRow internals a consumer must reach are
+       exposed as tokens, never an internal a `:deep()` overrides.
+
+       • `--metric-row-label-align` — the label `text-align`. Default `left`
+         (byte-identical to the prior render). A cert-grid consumer building a
+         labelled ledger sets `right` at `:root`/a parent/per-row for a
+         right-aligned fixed seam — cascades into `.metric-row__label` with no
+         `:deep()`.
+       • `--metric-row-icon-color` — the leading-glyph ink (the MetricCell
+         `iconColor`→IconChip precedent, mirrored as a token since MetricRow
+         ships a raw `<component :is>`). The per-row `phaseColor` prop seeds it
+         inline so today's consumers paint unchanged; un-set, the component
+         fallback (`inherit`) keeps the icon on the inherited cascade. A consumer
+         wanting a DISTINCT icon ink from the phase tint overrides it directly.
+
+       Both carry their byte-identical defaults — `left` (the prior render) /
+       `inherit` (the prior un-tinted glyph). Declaring them here keeps the
+       `--metric-row-*` family discoverable in one home; the component-level
+       `var(…, fallback)` read preserves the same default if the token is ever
+       un-declared (the defense-in-depth back-compat floor). A per-row
+       `phaseColor` prop still wins over the `:root` `--metric-row-icon-color`
+       (inline cascades higher), so today's phase-tinted icons are unchanged. */
+    --metric-row-label-align: left;
+    --metric-row-icon-color: inherit;
+
     /* ═══════════════════════════════════════════════
        §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM
 
@@ -317,93 +428,10 @@
     --table-head-h: calc(3rem * var(--table-density));
     --table-head-px: calc(1rem * var(--table-density));
 
-    /* ═══════════════════════════════════════════════
-       §20 PLATFORM MOTION (AQ.W5)
-
-       The native-platform motion substrate axes. Three families, each read
-       by a `@supports`-gated CSS recipe in `scroll-driven.css`,
-       `animations.css` (§TOP-LAYER), and `view-transition.css` — every visual
-       knob a token so a consumer retunes without editing library source.
-
-       SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback
-       composable defaults (`useScrollProgress` / `useStaggerReveal`) so the
-       native CSS path and the fallback path read identically — no visual seam
-       at the `@supports` boundary.
-
-       TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
-       grammar for native `<dialog>` / `[popover]` glass surfaces. The backdrop dim
-       uses the house alpha-derivative `color-mix(in srgb, var(--background) Npct,
-       transparent)` (AZ.W-ADAPTIVE-AUTO A5-1). It is NOT the `hsl(var(--background)
-       / α)` channel form: `--background` is a COMPLETE `hsl()` color
-       (`= hsl(48 12% 98%)`), so `hsl(var(--background) / α)` double-wraps to
-       `hsl(hsl(…) / α)` — invalid, never paints (the modal dim was silently dead).
-       The genuine channel form would require `--background` declared as a bare
-       `H S% L%` triple, which it never is — hence the alpha-derivative mix.
-
-       VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group
-       recipe + the `--vt-*` axes the `useViewTransition` substrate consumers
-       (dock layer swap, muster J's verdict re-rank) tune their swap against.
-       ═══════════════════════════════════════════════ */
-    --scroll-progress-scroller: root;
-    --scroll-reveal-rise: 6px;
-    --scroll-reveal-range-end: 60%;
-
-    --top-layer-enter-scale: 0.96;
-    --top-layer-backdrop-blur: 8px;
-    --top-layer-backdrop-dim: 0.5;
-
-    --vt-duration: var(--duration-normal);
-    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
-       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
-       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
-       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
-       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
-       default + the cards/top-layer transitions share one spring primitive
-       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
-       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
-    --vt-ease: var(--spring-bouncy);
-    --vt-rise: 8px;
-
-    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
-       both engine paths are timing-IDENTICAL: the FLIP fallback (via
-       `--dock-motion-resize`), the native View-Transition group (its
-       `animation-timing-function`), AND the runtime SpringProgress driver
-       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
-       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
-       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
-       other VT recipes (`.gl-list-item`).
-
-       AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
-       mechanical: a stiff plateau at ~48% with too little overshoot to feel
-       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
-       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
-       with a restrained overshoot — the felt iOS dock morph, off the prior
-       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
-       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
-       bit-identical. */
-    --dock-resize-spring: var(--spring-dock);
-
-    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
-       spring (`scale`/`rotate`) the dock controls apply to their hover/press
-       activation so the squish reads with a touch of spring-back rather than a
-       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
-       `[data-held]` fades (background/border/box-shadow), which stay on
-       `--duration-fast var(--ease-standard)`. The duration pairs with
-       `--duration-fast`; consumers retune the whole feel via this one token.
-
-       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
-       transform-press register (tokens.css §2: transform hover/press/active →
-       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
-       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
-       ROOT default was off-doctrine, shadowed for the four named controls by a
-       per-surface re-point in dock-controls.css — the exact per-surface fork the
-       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
-       DELETED; the ROOT token IS the doctrine register, so any other consumer of
-       `--dock-press-spring` inherits the correct smooth register.
-
-       BA.W-GLASS-CAL Unit 3 — the duration leg re-times off the generic
-       `--duration-fast` (0.2s) onto `--spring-smooth-duration` (0.36s, the
-       smooth spring's OWN 2%-band envelope settle), so the press transform plays
-       at its physical settle rather than a generic clock. */
-    --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth);
+    /* §20 PLATFORM MOTION (AQ.W5) — the scroll-driven/choreography + TOP-LAYER +
+       VIEW-TRANSITION + dock-spring motion knobs — carved WHOLE to
+       tokens/scroll-tokens.css at BB.W-CARVE4 (a contiguous tail carve at the §19/§20
+       seam; §20 is the file's last section, so the partial @import-s IMMEDIATELY
+       AFTER this one — the dist is byte-isomorphic). The paper/control/display/metal/
+       timeline/metric/table families above stay. */
 }

package/dist/styles/tokens/scheme-motion.css

@@ -51,9 +51,19 @@
     --type-leading-body: 1.5;
     --type-leading-prose: 1.618;
     --type-leading-heading: 1.2;
-    --type-leading-display: 1.1;
+    /* BB.W-DISPLAY-TRACKING — the display leading is tightened to the Apple
+       84/80 ≈ 1.05 signature (was 1.1). The DISPLAY ladder ONLY reads this rung;
+       --type-leading-heading (1.2) carries the heading/title register. */
+    --type-leading-display: 1.05;
 
     --type-tracking-tight: -0.025em;
+    /* BB.W-DISPLAY-TRACKING — the DISPLAY-ONLY proportional negative tracking
+       rung (the Apple −1.5%-of-size signature: 80px → −1.2px = −0.015em). It is
+       em-relative, so the single value is a constant −1.5% across the whole
+       clamp() ladder (φ² → φ^(11/2)). MINTED as its OWN rung so the display
+       calibration NEVER bleeds into the shared --type-tracking-tight (the
+       heading/title/configurator register's tracking, kept at -0.025em). */
+    --type-tracking-display: -0.015em;
     --type-tracking-snug: -0.01em;
     --type-tracking-normal: 0;
     --type-tracking-wide: 0.025em;
@@ -72,17 +82,24 @@
     --duration-xxl: 1.5s;
     --duration-shimmer-fast: 3s;
     --duration-shimmer: 5s;
+    /* BB.W-METAL-SHIMMER — the brand-metal family's OWN slow dignified one-pass
+       clock (slower than the 5s generic shimmer). The metal sweep (gold·silver·
+       bronze, text-clip + border/mask) reads as a calm slow patina catch, not a
+       fast band-pass — the §6 calm register. (`--duration-seal` was never landed;
+       this is net-new, NOT a retirement re-point.) */
+    --duration-metal: 6s;
     /* BA.W-GLASS-CAL (H2a) — `--duration-sparkle` (600ms) DELETED with the disco
        recipe retirement: the sparkle-sweep keyframe + its sole `btn-audacious`
        consumer are gone. */
 
     /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
 
-       Six duration tokens + three delay tokens promoted from raw literals
-       at speedtest's celebratory-reveal SFCs (SpeedtestResults, ThankYou,
-       ResultStack, CompleteBadge). Unified under the `--motion-*`
-       namespace (parallel to `--motion-ease-*`) so all motion tokens
-       cluster at one canon — duration + easing arm together. */
+       Duration + delay tokens promoted from raw literals at speedtest's
+       celebratory-reveal SFCs (SpeedtestResults, ThankYou, ResultStack).
+       Unified under the `--motion-*` namespace (parallel to `--motion-ease-*`)
+       so all motion tokens cluster at one canon — duration + easing arm
+       together. (BB.W-DEAD-SWEEP retired the never-shipped CompleteBadge
+       staged-reveal cluster — no consumer existed.) */
 
     /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
        in the celebratory headline + result-row reveals. Partners with
@@ -99,17 +116,6 @@
        glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
        an imperceptible blow-through. */
 
-    /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
-       fires at three asymmetric durations + delays per the A4-AF staged-
-       variety design intent. Promoting the magic numbers makes the
-       staged-variety visible at the canon. */
-    --motion-duration-badge-disc: 420ms;
-    --motion-duration-badge-ring: 560ms;
-    --motion-duration-badge-check: 380ms;
-    --motion-delay-badge-disc: 80ms;
-    --motion-delay-badge-ring: 220ms;
-    --motion-delay-badge-check: 460ms;
-
     /* Staggered-reveal increment canon — three perceptually-distinct tiers for
        per-row/per-cell/per-bar cascades:
          • tight (40ms) — dense row cascades, sub-perceptual gap
@@ -153,21 +159,53 @@
        ── EASING DOCTRINE (AX.W52 §6 — which easing fits which job) ──
        ONE recorded rule so the animation easing stops forking live. This
        FORMALIZES the already-correct `transitions.css` idiom (enter=spring,
-       exit=bezier) as the house rule every recipe reaches for:
-
-         | Transition kind                                  | Easing                              |
-         |--------------------------------------------------|-------------------------------------|
-         | Surface props (bg, border, color, box-shadow,    | `--ease-standard` (bezier — a       |
-         |   opacity)                                       |   colour cross-fade reads as a      |
-         |                                                  |   wobble on a spring)               |
-         | Transform — hover/press/active (scale, translate,| `--spring-smooth` (the ONE button/  |
-         |   rotate)                                         |   interactive scale register) or    |
-         |                                                  |   `--spring-snappy` (crisp press)   |
-         | Enter (mount, popover open, dialog in)           | `--spring-bouncy` / `--spring-snappy`|
-         | Exit (unmount, close)                            | `--ease-out` / `--ease-standard`    |
-         |                                                  |   (bezier, NO overshoot — an exit   |
-         |                                                  |   must never overshoot past gone)   |
-         | Position-tracked (specular pointer follow)       | `--ease-standard`                   |
+       exit=bezier) as the house rule every recipe reaches for.
+
+       BB.W-MOTION-CANON — the table embodies ONE principle (Material 3's
+       spatial-vs-effects split, codified in `docs/precepts/motion-canon.md`
+       as P1): a SPATIAL channel (the box MOVES/RESHAPES — position, SIZE,
+       rotation, corners) rides a `--spring-<name>` (overshoot = physicality);
+       an EFFECTS channel (the surface RE-TINTS — color, opacity, box-shadow)
+       rides a bezier `--ease-*` (a colour cross-fade reads as a wobble on a
+       spring). Each row below is tagged [SPATIAL] (spring) or [EFFECTS]
+       (bezier) so the rule is legible, not implicit. The canon doc is the
+       canonical home; this table is the SOURCE it re-states:
+
+         | Transition kind                                  | Tier      | Easing                   |
+         |--------------------------------------------------|-----------|--------------------------|
+         | Surface props (bg, border, color, box-shadow,    | [EFFECTS] | `--ease-standard` (bezier|
+         |   opacity)                                       |           |   — a colour cross-fade  |
+         |                                                  |           |   reads as a wobble on a |
+         |                                                  |           |   spring)                |
+         | Transform — hover/press/active (scale, translate,| [SPATIAL] | `--spring-smooth` (the   |
+         |   rotate)                                         |           |   ONE button/interactive |
+         |                                                  |           |   scale register) or     |
+         |                                                  |           |   `--spring-snappy`      |
+         | Size / morph (dock V↔H, indicator size-          | [SPATIAL] | `--spring-dock` /        |
+         |   correction, reveal source-rect bloom)          |           |   `--spring-snappy`,     |
+         |                                                  |           |   expressed as a         |
+         |                                                  |           |   COMPOSITOR transform   |
+         |                                                  |           |   (P5) — NEVER an        |
+         |                                                  |           |   animated width/height  |
+         | Enter (mount, popover open, dialog in, reveal)   | [SPATIAL] | `--spring-bouncy` /      |
+         |                                                  |           |   `--spring-snappy`      |
+         | Bold decelerating arrival (the SOTA arrival —    | [SPATIAL] | `--ease-out-expo`        |
+         |   reveal draw-on, big-distance settle)           |           |   (cubic-bezier(.16,1,   |
+         |                                                  |           |   .3,1); the house expo) |
+         | Exit (unmount, close)                            | [EFFECTS] | `--ease-out` /           |
+         |                                                  |           |   `--ease-standard`      |
+         |                                                  |           |   (bezier, NO overshoot —|
+         |                                                  |           |   an exit must never     |
+         |                                                  |           |   overshoot past gone)   |
+         | Position-tracked (specular pointer follow)       | [EFFECTS] | `--ease-standard`        |
+
+       The SOTA arrival ease is the EXISTING `--ease-out-expo` (alias →
+       `--motion-ease-out-expo` = `cubic-bezier(0.16, 1, 0.3, 1)`, the house
+       expo with the value.js `easeOutExpo` JS twin in the MOTION_CURVES table)
+       — NOT a net-new token. The motion canon NAMES it as the arrival register;
+       it is not re-minted (a duplicate alias would fail proof:animation-
+       coherence's EASING-TABLE-BOUND arm — the curve already has its canonical
+       + alias row in `curves.ts`).
 
        The BUTTON family (`.btn-pill` / `.tap-squish` / `.glass-btn` /
        `btn-interactive`) UNIFIES its `scale` transform leg onto ONE register —