@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/icon-chip.css

@@ -0,0 +1,149 @@
+/* icon-chip.css — BA.W-ICON-CHIP: the <IconChip> section-color pop primitive.
+ *
+ * The library's SINGLE section-color icon-chip recipe — the brand's ONE color
+ * event per surface (the one-color-event rule, AZ.W-SUFFUSE / proof:suffuse):
+ * a `color-mix(… 25%, transparent)` backplate under a full-chroma glyph, walked
+ * over the 13-stop `--section-color-N` ramp (or a complete `tone` token). It
+ * OWNS the recipe the four inline `:style` pastes (icons.vue / empty-states.vue
+ * / auth-shell.vue / the MetricCell glyph-tint) collapsed onto, so the recipe
+ * lives ONCE and proof:suffuse asserts against one component, not N pastes.
+ *
+ * THE INTERPOLATION SPACE — `in srgb` (DELIBERATE, recorded). The backplate is
+ * a foreground-over-transparent overlay at a hand-tuned fixed 25% α stop — the
+ * SAME shape as the `--surface-tint-*` brand family, which CLAUDE.md fixes at
+ * `in srgb` (the brand-calibrated mix; switching the space shifts the resting
+ * α off its hand-set value). The chip is byte-faithful to the reference paste
+ * register (the binding W7 π target: stop-0 bg `color(srgb 0.915 0.484 0.671 /
+ * 0.25)`), so it preserves `in srgb` — the same brand-overlay path, NOT the
+ * glass-tint `in oklab` perceptual-mix path. (The spec text says `in oklab`;
+ * the resolution preserves the reference-faithful `in srgb` so the pop register
+ * does not shift — recorded in PROGRESS / the DELTA.)
+ */
+
+:root {
+    /* The chip≤glyph proportion (d2, structural). The diameter floors at
+       `glyph × ratio` so the plate can NEVER paint under the glyph — a
+       consumer's tiny `size` is clamped. The default reproduces the reference
+       48/22 ≈ 2.18 register. Token-first: a consumer retunes without a
+       component edit. */
+    --icon-chip-glyph-ratio: 2.18;
+    /* The duotone fill α — a low-alpha fill of the same hue UNDER the
+       full-chroma stroke (the iOS/Material filled-tonal move). Mono-hue. */
+    --icon-chip-duotone-fill: 18%;
+    /* The hover-bloom backplate lift (25% → ~35%) + the glow-ring spread. */
+    --icon-chip-bloom-mix: 35%;
+    --icon-chip-bloom-glow: 28%;
+    /* The reveal stagger step (consumed by the vReveal `--d` index). */
+    --icon-chip-reveal-step: 60ms;
+}
+
+.icon-chip {
+    /* The diameter FLOORS at glyph × ratio — the d2 proportion enforced in the
+       component, not a per-consumer hope. */
+    --_icon-chip-floor: calc(
+        var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio)
+    );
+    inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
+    block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill, 9999px);
+    /* The backplate — the reference recipe (`in srgb`, 25% α stop). */
+    background-color: color-mix(
+        in srgb,
+        var(--icon-chip-plate-color, var(--muted)) 25%,
+        transparent
+    );
+    color: var(--icon-chip-event-color, var(--muted-foreground));
+    /* The §6 easing doctrine — surface props (bg/box-shadow) on the bezier
+       standard ease; the bloom is the smooth-glass register, NOT a sparkle. */
+    transition:
+        background-color var(--duration-fast, 150ms) var(--ease-standard),
+        box-shadow var(--duration-fast, 150ms) var(--ease-standard);
+}
+
+.icon-chip__glyph {
+    display: block;
+    flex-shrink: 0;
+}
+
+/* ── The bare register (the MetricCell leading-glyph tint — no backplate) ──── */
+.icon-chip--bare {
+    inline-size: auto;
+    block-size: auto;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+/* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
+/* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
+   presentation attribute, so the `[data-duotone] svg` rule reaches the inner
+   paths (they inherit `fill` from the root). Mono-hue, proportion-safe. */
+.icon-chip--duotone[data-duotone] svg,
+.icon-chip[data-duotone] .icon-chip__glyph {
+    fill: color-mix(
+        in srgb,
+        var(--icon-chip-event-color, var(--muted-foreground))
+            var(--icon-chip-duotone-fill),
+        transparent
+    );
+}
+
+/* ── The hover-bloom axis — the SMOOTH GLASS register (NO disco) ───────────── */
+/* The backplate mix lifts, a soft same-hue glow ring appears, the glyph stroke
+   firms. DISCO FENCE: composes NO sparkle-sweep / btn-audacious / disco-grain —
+   the W-GLASS-CAL-retired-disco's calm replacement register only. */
+@media (hover: hover) {
+    .icon-chip--bloom:hover {
+        background-color: color-mix(
+            in srgb,
+            var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix),
+            transparent
+        );
+        box-shadow: 0 0 0 0.25rem
+            color-mix(
+                in srgb,
+                var(--icon-chip-event-color, var(--muted-foreground))
+                    var(--icon-chip-bloom-glow),
+                transparent
+            );
+    }
+    /* The glyph stroke firms on the chip's own hover. */
+    .icon-chip--bloom:hover .icon-chip__glyph {
+        stroke-width: 2;
+    }
+}
+
+/* ── The entrance-reveal axis — composes the shipped vReveal directive ─────── */
+/* The directive writes `[data-reveal]` + `--d` (the stagger index); this rule
+   reacts ONLY on an opted-in chip (`.icon-chip--reveal`) so a non-reveal chip's
+   inert `[data-reveal]` hook never animates. PRM-gated. */
+@media (prefers-reduced-motion: no-preference) {
+    .icon-chip--reveal[data-reveal] {
+        animation: icon-chip-reveal var(--duration-medium, 320ms)
+            var(--ease-standard) both;
+        animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step));
+    }
+}
+
+@keyframes icon-chip-reveal {
+    from {
+        opacity: 0;
+        transform: scale(0.85) translateY(0.25rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+/* ── The deform axes collapse under reduced motion (the PRM guard) ─────────── */
+@media (prefers-reduced-motion: reduce) {
+    .icon-chip--bloom:hover .icon-chip__glyph {
+        stroke-width: inherit;
+    }
+    .icon-chip--reveal[data-reveal] {
+        animation: none;
+    }
+}

package/src/styles/index.css

@@ -40,7 +40,20 @@
  * above it via CSS custom properties or selector cascade; reordering breaks
  * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
  *
- *   1. tokens.css            — CSS custom properties (color, easing, glass,
+ * WHERE each idiom LIVES (the localized design-idiom home, complementing the
+ * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
+ * in theme.css, @utility recipes in their cohesion-domain file, the
+ * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
+ * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
+ * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
+ * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
+ * cascade-isomorphic: the partials @import in the recorded cascade order so this
+ * load order is preserved bit-for-bit.
+ *
+ *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
+ *                              color-radius,shadow,glass,offsets-sizing,
+ *                              scale-paper,light-dark,dark-arm,property-regs}.css.
+ *                              CSS custom properties (color, easing, glass,
  *                              paper, shadow, surface-tint rungs). Source-of-
  *                              record for every visual axis.
  *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
@@ -48,7 +61,9 @@
  *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
  *                              from (1) so MUST come after them; defines the
  *                              `dark` variant selector consumed by the cascade.
- *   4. glass.css             — .glass-{wash,quiet,resting,floating,overlay}
+ *   4. glass.css             — thin @import root over glass/{material,ladder,
+ *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
+ *                              .glass-{wash,quiet,resting,floating,overlay}
  *                              5-rung ladder + .glass-card / -pill / -btn.
  *                              Consumes tokens (1) + theme aliases (3).
  *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
@@ -79,6 +94,15 @@
  *                              cascades into these control rules.
  *   7. cards.css             — .cartoon-surface, .paper-texture.
  *                              Component utility layer.
+ *  7a. feedback-tone.css     — the ONE shared tinted-glass tone register
+ *                              (BA.W-FEEDBACK-TONE): `.feedback-tone` +
+ *                              `.feedback-tone-{success,warning,info,destructive}`
+ *                              tint a glass rung a bounded % toward a house tone
+ *                              token on the EXISTING color-mix(in oklab, …) seam.
+ *                              Toast / Notification / Alert consume it (the three
+ *                              tone maps collapse). Loads after cards.css (it reads
+ *                              the same `--glass-bg-*` rung tokens cards.css/the
+ *                              ladder mint) and before floating-panel.css.
  *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
  *                              Component utility layer.
  *   9. transitions.css       — Vue <Transition> classes (fade, fade-slide,
@@ -93,22 +117,32 @@
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
- *                              (press cluster; K W6 + Q.W3 Lane E),
- *                              rainbow-vivid + rainbow-pastel. Consumes earlier
- *                              animations + tokens.
+ *  11. utilities.css         — thin @import root over utilities/{animate,base,
+ *                              components,btn,a11y-overrides}.css. focus-ring,
+ *                              btn-audacious + btn-interactive (press cluster;
+ *                              K W6 + Q.W3 Lane E), rainbow-vivid +
+ *                              rainbow-pastel. Consumes earlier animations +
+ *                              tokens.
+ *  11a. menu.css             — BA.W-MENU-GLASS the glass MENU-ROW + MENU-SECTION
+ *                              register. AFTER utilities.css so `.glass-menu-row`'s
+ *                              `@layer components` hover/highlight rules source-
+ *                              order-win over `.interactive-item:hover` (same layer
+ *                              + specificity) — the cascade-trap-safe placement.
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
- *  13. instrument-rail.css   — AK-W2-α cockpit-ratio rail (flex-basis 1/φ²
- *                              binding + bezel hairlines + sibling divider
- *                              rule). Composes alongside instrument-chassis;
- *                              shares the bezel-line twin-pixel idiom.
- *  14. hover-popover.css     — V.W3 popover-animation grammar.
- *  15. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  13. hover-popover.css     — V.W3 popover-animation grammar.
+ *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
+ *  15. segmented-tabs.css    — AX.W53 SegmentedTabs overflow/indicator grammar.
+ *  16. select.css            — BA.W-EMISSION the PRECOMPILED Select content
+ *                             collision-bound (the `[data-slot="select-content"]`
+ *                             max-height rule) — moved off the dead arbitrary-
+ *                             bracket CVA class so the bound SHIPS in dist/glass-ui.css
+ *                             regardless of consumer JIT reach. A structural utility
+ *                             never depends on a content-scan; locked by proof:emission.
  *
- * Per-package component CSS lives at (12)-(15) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(16) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -122,17 +156,59 @@
 @import "./dock.css";
 @import "./dock-controls.css";
 @import "./cards.css";
+@import "./feedback-tone.css";
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
 @import "./scroll-driven.css";
 @import "./view-transition.css";
 @import "./utilities.css";
+/* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
+   utilities.css (NOT the floating/transitions band the spec hinted) so the
+   `.glass-menu-row` `@layer components` hover/highlight rules source-order-WIN
+   over `.interactive-item:hover` (utilities/base.css, same layer + specificity) —
+   the cascade-trap-safe placement, mirroring glass/surface-axis.css's "import
+   AFTER ladder.css" discipline. */
+@import "./menu.css";
+@import "./configurator.css";
 @import "./instrument-chassis.css";
-@import "./instrument-rail.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
+@import "./segmented-tabs.css";
+@import "./select.css";
+/* BA.W-ICON-CHIP — the <IconChip> section-color pop recipe + the three axes
+   (duotone/bloom/reveal). A component partial; the token arms (--section-color-N
+   / --muted) auto-flip under .dark so the chip is mode-robust by construction. */
+@import "./icon-chip.css";
+
+/* Ensure Tailwind scans glass-ui's compiled component templates for the utility
+   classes they emit (CVA variant classes like text-destructive-foreground,
+   layout utilities like h-full/shrink-0).
+
+   BA.W-EMISSION — re-pointed from the DEAD components-mirror glob (the prior
+   `../components` target). That glob resolved correctly in glass-ui's OWN build
+   (`src/styles/index.css` → `src/components` carries the real `.vue` source), but the
+   SHIPPED dist copy of this file (`dist/styles/index.css`) resolved `../components` to
+   `dist/components/` — a
+   directory that carries ONLY `.d.ts` mirror files (zero `.js`, zero `.vue`). The
+   compiled render-functions live FLAT at `dist/*.js`. So in every consumer that
+   re-imported this `@source` line, Tailwind scanned an empty dir and glass-ui's own
+   arbitrary utilities silently died (the P9 / valuejs-fold register-B class).
 
-/* Ensure consumer's Tailwind scans glass-ui components for utility classes
-   (e.g. CVA button variants like text-destructive-foreground) */
-@source "../components";
+   `../*.js` reaches the compiled render-functions PRECISELY in the SHIPPED context:
+   in dist it is `dist/*.js` (the 150+ flat compiled chunks that carry glass-ui's
+   utility class strings — the surface the dead `../components` mirror NEVER held).
+   In glass-ui's OWN source build it is `src/*.js` (empty — glass-ui's own components
+   compile their CSS through vite, not this `@source`), so the directive is a no-op
+   in the own-build and never scans the `src/` shader/`.ts` tree (a bare `../` glob
+   tripped Tailwind's dev candidate-extractor on the shader template strings —
+   `Missing opening (`). This directive is a BACKSTOP for a consumer that imports
+   this exact cascade file — the PRIMARY self-emission path is
+   `vite.style-assets.ts emitComponentUtilities` (P9), which ships glass-ui's
+   component-utility RULES build-independently into `dist/styles/components.css`.
+   Fully-arbitrary BRACKET utilities (`[max-height:…]`, `[--slider-track-height:…]`)
+   are rejected by that path's `classish` token filter AND are not reliably reachable
+   by a JIT scan, so every STRUCTURAL bracket utility (geometry/bounds/sizing) is
+   pre-compiled into shipped CSS instead — never load-bearing on any consumer's
+   content-scan reach. Locked by proof:emission. */
+@source "../*.js";

package/src/styles/instrument-chassis.css

@@ -146,6 +146,48 @@
         display: none;
     }
 
+    /* ─────────────────────────────────────────────────────────────
+       BA.W-ATLAS-RECONCILE C-3 — structure variant (SILVER MILLED-METAL register)
+
+       The cool polished-steel housing read: the engraved-bezel `::before` stroke
+       AND the structural twin-line grooves re-point from the warm-cream
+       `--surface-tint-*` default onto the `--silver` quad (gold's cool mirror).
+       The chassis reads as an INDUSTRIAL precision-instrument panel — the
+       cool-metal twin of the warm-gold "complete"-phase affirmation.
+
+       The phase cascade (`[data-phase="…"]`) stays ORTHOGONAL — a `structure`
+       chassis still retints its phase fills on `data-phase`; only the
+       structure-metal recipe (bezel + grooves) forks here. Consumer #2 of the
+       silver quad (the atlas's structure surface is consumer #1).
+
+       The silver is the W-NO-GRAY NAMED cool-neutral exception (a brand METAL
+       identity, not a neutral — its very-low chroma reads as milled steel, the
+       cool hue distinguishes it from the warm glass plate).
+       ───────────────────────────────────────────────────────────── */
+    .instrument-chassis[data-variant="structure"] {
+        /* The milled-panel edge: the chassis border lifts off the resting glass
+           edge onto a hairline silver structure stroke. */
+        border-color: color-mix(in oklab, var(--color-silver-dark) 55%, transparent);
+    }
+
+    /* The engraved bezel re-tints to the cool silver catch (the polished sleeve
+       reads as steel, not warm-cream). */
+    .instrument-chassis[data-variant="structure"]::before {
+        border-color: color-mix(in oklab, var(--color-silver-light) 60%, transparent);
+    }
+    .dark .instrument-chassis[data-variant="structure"]::before {
+        border-color: color-mix(in oklab, var(--color-silver) 40%, transparent);
+    }
+
+    /* The structural grooves re-point to the silver twin-line: the catch reads
+       the light silver, the under-shadow the dark silver — a milled seam, not the
+       default warm twin-line. ONE re-point at the variant root; every
+       `<ChassisDivider>` inside a structure chassis inherits it. */
+    .instrument-chassis[data-variant="structure"] {
+        --twin-line-catch: color-mix(in oklab, var(--color-silver-light) 50%, transparent);
+        --twin-line-shadow: color-mix(in oklab, var(--color-silver-dark) 40%, transparent);
+    }
+
     /* Phase-color cascade — single property, full chassis-wide retint.
        `--phase-color-label` mirrors the cascade through the WCAG companion
        tokens (AC.W6c F1.V-04). The label register falls back to the canvas

package/src/styles/menu.css

@@ -0,0 +1,127 @@
+/* menu.css — the glass MENU-ROW + MENU-SECTION register (BA.W-MENU-GLASS).
+
+   The shared `menuItemVariants` CVA's `surface=glass` arm (the DEFAULT, glass-
+   first canon AX.W54) composes `.glass-menu-row`; all 13 menu/picker-family SFCs
+   inherit the glassy hover-lift register in ONE edit (no per-SFC menu-row CSS).
+
+   ── The cascade-trap pre-empt (the AZ dock-rail `@layer`-loses-to-utility trap) ──
+   `.interactive-item:hover` (utilities/base.css, `@layer components`) paints a flat
+   `color-mix(--accent 50%)` hover background. An UNLAYERED Tailwind `hover:bg-accent`
+   utility would win over BOTH (the trap). The CVA's glass arm therefore DROPS the
+   flat-accent utilities entirely — so the only background-painters on a glass row are
+   the `@layer components` `.interactive-item:hover` rule and these `.glass-menu-row`
+   rules. This file is `@import`-ed AFTER `utilities.css` in `index.css`, so at equal
+   specificity (0-1-1 for the `:hover`/`[data-highlighted]` selectors) and equal layer
+   (`components`) the recipe wins by SOURCE ORDER over `.interactive-item:hover` —
+   exactly the discipline `glass/surface-axis.css` uses ("@import-ed AFTER ladder.css
+   so the attr rules win by source order"). NEVER re-add an unlayered flat-accent
+   utility to the glass arm — it would re-introduce the trap.
+
+   ── The element-level tint discipline (substitution-vs-inheritance) ──
+   The row reads the ELEMENT-LEVEL glass-quiet oklab tint
+   `color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength))`
+   — the SAME seam `glass/ladder.css:58` / `glass/surfaces.css:19` compose — NOT the
+   pre-baked `--glass-bg-quiet` raw token. So the row darkens-over-light (W55 bright
+   bucket / `--glass-tint-strength` lift) AND lifts-over-dark per W-DARK-MATERIAL's
+   tint arm, in lockstep with every other glass surface. */
+@layer components {
+    /* ── .glass-menu-row — the glassy hover-lift menu/picker item ──────────────
+       Every visual axis reads a `--menu-row-*` knob so a consumer retunes via a
+       `:root` override. The REST state is transparent (the row sits on the
+       container's own `glass-floating` plate — DropdownMenuContent /
+       ContextMenuContent are already `glass-floating rounded-panel`); the glass
+       PLATE materializes on hover/focus/highlight. */
+    .glass-menu-row {
+        /* The glass-quiet plate the row paints AT THE ELEMENT on hover/highlight
+           (the element-level oklab tint — see header). Overridable. */
+        --menu-row-bg: color-mix(
+            in oklab,
+            var(--glass-bg-quiet),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        /* The PRM-gated hover-lift travel (zeroed under reduce, below). */
+        --menu-row-lift: -1px;
+        /* The 44px WCAG-2.5.5 touch floor (the row never reflows below it). The
+           base is the CVA's own py rhythm; the clamp guarantees the floor. Reads
+           `--touch-target` (the 44px token declared UNCONDITIONALLY at :root —
+           offsets-sizing.css), NOT `--control-floor` (which is declared ONLY inside
+           the `@media (pointer: coarse)` block, so on a FINE pointer `var(--control-
+           floor)` resolves to the guaranteed-invalid initial value → 0px in the
+           max(), and the floor silently vanished — the live π caught the 36px row).
+           The `2.75rem` literal fallback covers a consumer who unsets the token. */
+        min-block-size: max(2rem, var(--touch-target, 2.75rem));
+
+        /* The lift transform rides the §6 spring register (`--spring-smooth`); the
+           surface props (background) ride the bezier `--ease-standard` via the
+           `.interactive-item` base transition (already declared there). The
+           explicit transform leg here pairs the spring with the lift. */
+        transition: translate var(--duration-fast) var(--spring-smooth);
+        translate: 0 0;
+    }
+
+    /* Hover / keyboard-focus / reka internal-highlight / sub-trigger-open all
+       reach the SAME glass register (Combobox/Command/Select parity — the CVA
+       routes all three input modes through `data-[highlighted]`). */
+    .glass-menu-row:hover:not([data-disabled]),
+    .glass-menu-row:focus:not([data-disabled]),
+    .glass-menu-row[data-highlighted]:not([data-disabled]),
+    .glass-menu-row[data-state="open"]:not([data-disabled]) {
+        background: var(--menu-row-bg);
+        color: var(--accent-foreground);
+        translate: 0 var(--menu-row-lift);
+    }
+
+    /* ── .glass-menu-section — the mono section-label + hairline row-group ──────
+       The "section caption + hairline over a row group" recipe (the slides gear
+       hand-built ~120 lines of). Folds onto `typography.css` `.section-label` (the
+       mono / √φ-caption / small-caps register) for the caption and `--border-
+       hairline` for the divider. Tokenized on `--menu-section-*` so a consumer
+       retunes via a `:root` override. ≥2 consumers: the library menu defaults
+       (the section caption a DropdownMenuLabel composes) + the in-repo demo menu
+       story (Unit 2 adoption); the slides DeckSettings is the named foreign
+       downstream consumer. */
+    .glass-menu-section {
+        /* The caption register (mono / small-caps / quiet ink) — the same
+           vocabulary `.section-label` carries, exposed as overridable knobs. */
+        --menu-section-font: var(--font-mono);
+        --menu-section-size: var(--type-caption);
+        --menu-section-color: var(--muted-foreground);
+        --menu-section-tracking: var(--type-tracking-caps);
+        /* The hairline divider over the group (the catch-light + under-shadow
+           pair). Default-off feather; the rule below paints it. */
+        --menu-section-hairline: var(--border-hairline);
+        /* The block rhythm above the group (a section is a deliberate break). */
+        --menu-section-gap: 0.375rem;
+
+        display: block;
+        margin-block-start: var(--menu-section-gap);
+        padding-block-start: var(--menu-section-gap);
+        /* The hairline reads as a top divider over the group via box-shadow (the
+           house hairline pattern — a whisper, not a hard 1px rule). */
+        box-shadow: var(--menu-section-hairline);
+    }
+
+    /* The section CAPTION — a mono small-caps label. Composes onto the label
+       element the section recipe wraps (or a nested `.glass-menu-section-label`);
+       the demo + library menu labels read this caption register. */
+    .glass-menu-section-label,
+    .glass-menu-section > [data-menu-section-label] {
+        font-family: var(--menu-section-font);
+        font-size: var(--menu-section-size);
+        color: var(--menu-section-color);
+        text-transform: uppercase;
+        letter-spacing: var(--menu-section-tracking);
+    }
+}
+
+/* ── PRM gate — no deform/lift under reduce ───────────────────────────────────
+   The hover-lift `translate` is the only motion the row introduces; under
+   `prefers-reduced-motion: reduce` it collapses to the identity (0) and the
+   transition is removed (the surface bg cross-fade is not motion). The glass
+   plate still materializes on hover — only the geometric lift is suppressed. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-menu-row {
+        --menu-row-lift: 0px;
+        transition: none;
+    }
+}

package/src/styles/paper.css

@@ -7,54 +7,8 @@
  *
  * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
  * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
- *
- * ── THE GRAIN RUNGS (D6.c M5 — the printed-paper tooth, FELT not seen) ─────────
- * The warm-paper grain must be FELT at rest — a premium editorial stock has a
- * felt depth, and the measured finding (ds2-medium M5 / fd-usf-gallery §F) is
- * that the shipped `--glass-grain-opacity: 0.025` floor reads as NOTHING. This
- * file lifts the grain off that floor and mints a SECOND rung for chart plates:
- *
- *   --glass-grain-opacity        — the PAGE grain. Lifted here to a perceptible-
- *                                  but-deft 0.038 default (the local floor below).
- *                                  Numeric justification: the kitsch line is
- *                                  ~0.05 (above it the grain reads as screen-noise
- *                                  / a dirty monitor, ds2-medium M5); 0.025 is
- *                                  sub-perceptual ("felt as nothing"). 0.038 is
- *                                  the calibrated MIDPOINT — ~1.5× the dead floor,
- *                                  ~0.76× the kitsch ceiling — felt at rest, never
- *                                  seen AS grain. (The canonical token still lives
- *                                  in tokens.css; this utility reads it with the
- *                                  lifted fallback so a no-override mount is felt.)
- *   --glass-grain-opacity-plate  — the PLATE grain (NEW rung). A chart plate is
- *                                  the FIGURE's "paper", so it wants slightly more
- *                                  tooth than the page (M5): 0.045 — still below
- *                                  the 0.05 kitsch ceiling, distinctly felt so the
- *                                  plate reads as PRINTED on the same stock as the
- *                                  page, not pasted onto it.
- *
- * THE DATA-REGION MASK CONTRACT (M5, non-negotiable). Grain on the FRAME, never
- * under the FIGURE — a fleck over a choropleth reads as a data artifact; on the
- * plate margin it reads as paper. `paper-grain-overlay` exposes a custom-property
- * MASK SLOT (`--paper-grain-mask`) so a consumer can carve the data viewport out
- * of the grain ::after: set it to a gradient/`url()` that is transparent over the
- * data region and opaque over the frame, and the grain is masked off the figure.
- * Default `none` (the whole surface is grained — the page/card case, no data to
- * fence). The plate rung is opt-in via `[data-grain="plate"]`.
  */
 
-/* The grain rung DEFAULTS — lifted off the tokens.css floor (D6.c M5). These are
-   plain custom-property fallbacks the utilities read; a consumer/tokens.css value
-   still wins (`var(--glass-grain-opacity, <floor>)`), so this only sets the floor
-   a no-override mount inherits. The plate rung is minted here (no canonical
-   tokens.css home is touched in this lane — D6.b owns tokens.css). */
-@layer components {
-    :root {
-        /* The PLATE grain rung — distinct from the page rung; the figure's paper
-           wants more tooth. Minted in this lane; a consumer overrides at :root. */
-        --glass-grain-opacity-plate: 0.045;
-    }
-}
-
 @utility paper-underpaint {
     position: fixed;
     inset: 0;
@@ -63,8 +17,7 @@
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' 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%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 60px 60px;
-    /* Lifted floor — the page grain is FELT at rest (0.038), not the dead 0.025. */
-    opacity: var(--glass-grain-opacity, 0.038);
+    opacity: var(--glass-grain-opacity);
     mix-blend-mode: multiply;
 }
 
@@ -86,27 +39,8 @@
         background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' 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%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
         background-repeat: repeat;
         background-size: 60px 60px;
-        /* Lifted floor — felt on the frame at rest (0.038). */
-        opacity: var(--glass-grain-opacity, 0.038);
+        opacity: var(--glass-grain-opacity);
         mix-blend-mode: overlay;
-        /* THE DATA-REGION MASK SLOT (M5). Default `none` = the whole surface is
-           grained (page/card — no data to fence). A consumer that grains a chart
-           plate sets `--paper-grain-mask` to a gradient/url() transparent over the
-           data viewport + opaque over the frame, carving the figure out of the
-           grain so no fleck lands on a tier fill. `mask` is Baseline; a
-           non-supporting engine ignores it and keeps the full-surface grain (the
-           page case is unaffected — the mask only matters when a consumer fences
-           the data region). */
-        mask: var(--paper-grain-mask, none);
-        -webkit-mask: var(--paper-grain-mask, none);
-    }
-
-    /* The PLATE rung — a chart plate opts in via `[data-grain="plate"]` to the
-       higher-tooth `--glass-grain-opacity-plate` (the figure's paper reads as the
-       same stock as the page, with a touch more tooth). Pair with the mask slot to
-       fence the data viewport. */
-    &[data-grain="plate"]::after {
-        opacity: var(--glass-grain-opacity-plate, 0.045);
     }
 }