@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/glass/surfaces.css

@@ -3,6 +3,77 @@
    Carved from the glass.css cascade root; @import-ed by glass.css in cascade
    order, each in its own @layer components (isomorphic to the monolith).
    See docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+/* ── @utility glass-fill — the tint-recipe HOME, applied AT the element (BG.W-GLASS-
+   REGISTER-UNIFY · R9) ──────────────────────────────────────────────────────────
+   The ONE element-level tint compose. A surface composes `glass-fill` + sets its own
+   `--glass-fill-rung` (the rung bg to tint), and the W55 adaptive-legibility seam —
+   `color-mix(in oklab, <rung bg>, var(--glass-tint-source) var(--glass-tint-strength))`
+   — resolves AT THE ELEMENT (never pre-baked at a `:root`/ancestor scope). This kills
+   the substitution trap STRUCTURALLY: an ancestor that re-points --glass-tint-source /
+   -strength (the W55 @container bright bucket) reaches every descendant `glass-fill`
+   surface, because the mix is composed where the surface paints — the exact failure the
+   pre-baked `--glass-bg-dock` :root token hits (composed once, read at a descendant,
+   blind to the descendant's tint override).
+
+   It is the applied twin of the ladder-rung recipe `--glass-plate-tinted` (ladder.css,
+   BG.W-GLASS-IDIOM-FACTOR — the SAME oklab seam, reading `--glass-bg-rung`): the ladder
+   rungs read the token, the NON-ladder surfaces (Card / the button/tab/select/capsule
+   consumer band) APPLY this utility. ONE recipe, two delivery seams.
+
+   `@utility` (not `@layer components`) so a single-class application lands in
+   @layer utilities and out-ranks a base surface utility — the `glass-progress-rail` /
+   `veil-surface` pattern. It sets the nestable `--glass-fill` VALUE token too, so a
+   consumer that composes the tinted plate INSIDE a bigger mix (a warm-floor, an α-drop)
+   reads `var(--glass-fill)` without re-spelling the seam. ZERO-delta at the 0%/floor
+   rest default — `color-mix(…, X, transparent 0%) ≡ X`, byte-identical to the raw rung
+   bg (the field-independent token-collapse; the WS1-gated bias-hue outer leg is the
+   later W-GLASS-TINT-UNIFY atomic step, added in this ONE home, never N pastes). */
+@utility glass-fill {
+    --glass-fill: color-mix(
+        in oklab,
+        var(--glass-fill-rung, var(--glass-bg-resting)),
+        var(--glass-tint-source) var(--glass-tint-strength)
+    );
+    background: var(--glass-fill);
+}
+
+/* ── The gesture-coupled backdrop-blur ENGAGE — the shared engage primitive, minted
+   ONCE here (the glass-surface home; BG.W-BACKDROP-BLUR-ENGAGE · F5.4) ─────────────────
+   iOS-27's backdrop blur ENGAGES with the gesture: the material's blur builds AS the
+   finger pulls a surface in (≤33ms on a flick, ~0.77s on a slow pull), NEVER a fixed
+   tween. The LEVER (the finding's own): a gesture surface writes this normalized engage
+   scalar off its OWN LIVE gesture scalar and reads it in a `blur(calc(<rung radius> *
+   var(--glass-blur-engage-t)))` — so the blur's CLOCK IS the gesture's clock (finger-
+   driven on the way in; the settle SPRING on the way out — the ONE sanctioned fixed-clock
+   blur, the trailing dismiss, which the drag scalar's OWN SpringProgress settle delivers
+   for free; one read, both legs correct). There is NEVER a `transition: backdrop-filter
+   <duration>` on an engaging surface — a wall-clock duration would DECOUPLE the blur from
+   the finger (the exact anti-pattern F5.4 excises; the composed `--glass-blur-*` fixed
+   surfaces keep their static blur, this register is the DRAG-DRIVEN one).
+
+   `--glass-blur-engage-t` (the drawer sheet writes it off `--glass-drawer-t`; the dock
+   expand plate off `--dock-expand-t` is the booked 2nd consumer). Registered typed so it
+   is a first-class engage input; `inherits: false` + `initial-value: 0` is the
+   NO-MASKING-FALLBACK floor (USER 07-03): an UNWIRED surface reads 0 → NO blur (an
+   un-blurred plate fails LOUD), NEVER a masking full blur that would hide a dead writer
+   (the `--glass-drawer-t: 0` closed-state precedent). `--glass-blur-engage-knee` is the
+   shared engage-curve constant — the pull fraction by which the material reaches full
+   blur (the iOS quick-coalesce: a see-through peek/half already reads as glass). The
+   recipe is inlined at each surface (drawer.css) — NOT wrapped in a `@utility`, because
+   the per-file `/styles` partial ships Lightning-autoprefixed but NOT `@apply`-resolved
+   (a raw `@apply` would ship dead); the shared home is the registered scalar + the knee. */
+@property --glass-blur-engage-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+:root {
+    /* the pull fraction by which the engaged material reaches full blur (see above). */
+    --glass-blur-engage-knee: 0.35;
+}
+
 @layer components {
     /* ── Convenience shorthands (tier + shape) ── */
 
@@ -16,7 +87,14 @@
         --card-focus-shadow: var(--shadow-card);
         --card-focus-border: var(--glass-border-quiet);
         position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        /* BG.W-GLASS-REGISTER-UNIFY — the glass-card plate reads the ONE tint-recipe
+           HOME (`@utility glass-fill`) instead of an inline `color-mix` re-spell. Byte-
+           identical at rest: `@apply` inlines `--glass-fill: color-mix(in oklab,
+           var(--glass-fill-rung), --glass-tint-source --glass-tint-strength); background:
+           var(--glass-fill)`, and `--glass-fill-rung: var(--glass-bg-quiet)` maps the
+           card's quiet rung. */
+        --glass-fill-rung: var(--glass-bg-quiet);
+        @apply glass-fill;
         backdrop-filter: var(--glass-blur-quiet);
         /* BB.W-GLASS-ACCENT — the card border feeds its focus-elevation ink into the
            accent-composed `--glass-border-accent` (ladder.css rim group); byte-
@@ -26,21 +104,25 @@
         border: 1px solid var(--glass-border-accent);
         border-radius: var(--radius-card);
         box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
-        /* AY.W-A11Y-PERF O-4 — upgrade `layout style` → include `paint` so the
-           maximal-glass nested backdrop-filter sample (a glass Button in this card)
-           does not escape the card box (the standard nested-backdrop-cost mitigation;
-           `contain: paint` clips DESCENDANTS only — the card's own rim/drop-shadow is
-           NOT clipped, device-verified). */
-        contain: layout style paint;
+        /* AY.W-A11Y-PERF O-4 — the nested-backdrop-cost `contain: paint` clip (a
+           glass Button in this card must not escape the card box) is RETIRED off
+           this per-class dialect onto the ONE narrowed clip register in
+           material.css (BG.W-GLASS-CLIP-DISCIPLINE — `.glass-card` is in the
+           INCLUDED set). The prior `contain: layout style paint` narrowed to
+           PAINT-only there (the `layout`/`style` axes dropped — paint is what
+           clips the descendant backdrop sample; `layout` would make the card a
+           containing block for abs/fixed descendants). Do NOT re-declare `contain`
+           here — the single register is the clip home. */
         transition:
             box-shadow var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
     }
 
     /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
-       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
-       `@supports not selector(:has(*))` class fallback (below) ships anyway
-       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+       pointer). Scoped to `.glass-card`. `:has()` is Baseline on the target set
+       (Chrome 105+/Safari 15.4+) so this is the SOLE focus-elevation mechanism —
+       the legacy `@supports not selector(:has(*))` `.is-focus-within` class
+       fallback was COLLAPSED at BG.NF.2 (its toggler never existed on disk). */
     .glass-card:has(:focus-visible) {
         --card-focus-shadow: var(--shadow-md);
         --card-focus-border: var(--glass-border-floating);
@@ -72,11 +154,12 @@
         border: 1.5px solid var(--glass-border-wash);
         background: var(--glass-bg-wash);
         backdrop-filter: var(--glass-blur-wash);
-        /* AY.W-A11Y-PERF O-4 — paint containment so the glass button's own
-           backdrop-filter sample stays inside the box when it nests in a glass card /
-           dialog / dock (the nested-backdrop-cost mitigation; clips descendants only,
-           the button's own rim/shadow is unaffected — device-verified). */
-        contain: paint;
+        /* AY.W-A11Y-PERF O-4 — the glass button's paint containment (its own
+           backdrop-filter sample stays inside the box when it nests in a glass
+           card / dialog / dock) is RETIRED off this per-class dialect onto the ONE
+           narrowed clip register in material.css (BG.W-GLASS-CLIP-DISCIPLINE —
+           `.glass-btn` is in the INCLUDED set beside `.glass-card`). Do NOT
+           re-declare `contain` here — the single register is the clip home. */
         color: var(--muted-foreground);
         /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
            the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
@@ -177,13 +260,18 @@
        diffusion authored for a small detail TILE, not a button the user reads
        as "glass" (the live readback found the glass variants at a negligible
        1px). A hero control wants a real glass blur. `.btn-glass` re-points the
-       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
-       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
-       button variants actually read as liquid glass while the wash TILE tier
-       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
-       Lightning CSS emits the `-webkit-` companion per the single-source
-       authorship discipline above (hand-authoring both forms makes Lightning
-       dedup-and-keep-prefixed, which modern Chromium then drops). */
+       backdrop at `--glass-blur-btn`, which the token reads through.
+       BG.W-GLASS-BLUR-PEER — `--glass-blur-btn` is now an ALIAS of
+       `--glass-blur-resting` (the unified 8px material), so the calm glass button
+       reads the SAME `blur(8px)` RADIUS LEG the dock, the default-Card, and the
+       menu-row read (ONE liquid-glass material, the resolved-radius peer lock).
+       The `.btn-glass.glass-deep` arm below re-points the SAME `--glass-blur-btn`
+       to `--glass-blur-deep` for the HERO CTA — so reading the alias keeps the
+       hero deep register working unchanged (the more-glass register lives on the
+       deep tier only, no calm-button floating-tier slab). Declares the UNPREFIXED
+       `backdrop-filter` ONLY — Lightning CSS emits the `-webkit-` companion per
+       the single-source authorship discipline above (hand-authoring both forms
+       makes Lightning dedup-and-keep-prefixed, which modern Chromium then drops). */
     .btn-glass {
         backdrop-filter: var(--glass-blur-btn);
 
@@ -214,13 +302,17 @@
        `.glass-deep` axis (which re-points `--glass-blur-floating`) does not deepen a
        button. This arm re-points `--glass-blur-btn` onto the deep family — the SAME
        token-substitution model `.glass-deep` uses (glass/deep.css), composing the ONE
-       deep axis, NOT a new blur recipe. So a `default`/`primary-audacious` hero CTA
-       reads the apple.com-nav-grade thick refractive liquid glass (16px / saturate 1.5
-       family, `--glass-blur-deep`), while the plain content tiers + the quieter
-       `outline`/`secondary`/`accent` glass buttons stay calm at the floating-tier
-       `--glass-blur-btn`. The deep BLUR is budget-FREE (the W-LENSING budget binds the
-       `:liquid` SVG lens, not the deep-blur tier). The a11y `--glass-level:0` brackets
-       reach it for free (the deep blur composes `--glass-level`, the opaque-escape path). */
+       deep axis, NOT a new blur recipe.
+       BG.W-GLASS-BLUR-PEER — the bare `default` button is DEMOTED off `glass-deep`
+       (button/index.ts), so ONLY the explicit hero opt-ins reach this arm:
+       `primary-audacious`, a `<Button :liquid>`, or a host-applied `.glass-deep`. The
+       hero CTA reads the apple.com-nav-grade thick refractive liquid glass
+       (`--glass-blur-deep`, 16px / saturate 1.5 family), while the calm glass button
+       (`default`/`glass`/`outline`/`secondary`/`accent`/`ai`) stays the unified 8px
+       resting peer (`--glass-blur-btn` → `--glass-blur-resting`). The deep BLUR is
+       budget-FREE (the W-LENSING budget binds the `:liquid` SVG lens, not the deep-blur
+       tier). The a11y `--glass-level:0` brackets reach it for free (the deep blur
+       composes `--glass-level`, the opaque-escape path). */
     .btn-glass.glass-deep {
         --glass-blur-btn: var(--glass-blur-deep);
     }
@@ -339,73 +431,4 @@
        — @import-ed by glass.css IMMEDIATELY AFTER surfaces.css, same @layer components,
        same source order (byte-isomorphic). */
 
-    /* ── BA.W-PAGER — the glass pager pill chassis (.glass-pager-ring) ──────────
-       The ONE pager-CHASSIS ring register: a `--radius-pill` glass-floating pill
-       (the DockRail-chip recipe — `--glass-bg-floating` + `--glass-blur-floating`
-       + `--glass-edge-light`/`--glass-specular` + the soft drop + the `.dark`
-       box-shadow arm). It encapsulates BOTH the `<PagerDots ring>` dot rail AND
-       the `<CarouselPager>` counter (the counter re-registers OFF the opaque
-       `bg-card` slab onto this — the R9/R10-5 dark-slab class dies in the same
-       edit). NEVER an opaque `bg-card` plate: this is the house "controls in a
-       glass pill" idiom, translucent (reads the substrate through it), already
-       dark/light-safe, already specular-rimmed (≥2-consumer-proven on the dock
-       rail-extend chips + the dock collapsed pill). The legibility floor over the
-       carousel's image content rides the SAME rebuilt registers
-       (W-DARK-MATERIAL/W-NO-GRAY) — no local opaque fallback. */
-    .glass-pager-ring {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding-inline: 0.625rem;
-        padding-block: 0.3125rem;
-        border-radius: var(--radius-pill);
-        /* BD.W-GOO-CAROUSEL-DECK — the element-level oklab TINT seam (NOT the raw
-           pre-substituted `--glass-bg-floating` :root token — the gray-hole
-           substitution-trap). At the `--glass-tint-strength: 0%` default this is the
-           no-op floor (`color-mix(in oklab, X, src 0%) ≡ X` — byte-identical pager pixels
-           over a flat page); over a declared/sampled BRIGHT carousel image
-           (`@container style(--glass-backdrop: light)`) the pill darkens-toward-ink for a
-           real silhouette (the W55 ≤24% clamp keeps it translucent); under `.dark` the
-           W-DARK-MATERIAL tint arm LIFTS it toward luminous warm-dark, never a charcoal
-           slab. `in oklab` is the glass-tint perceptual family (the in-srgb
-           `--surface-tint-*` brand fence is untouched). The dock `--glass-bg-dock`
-           self-re-point precedent applied to the pager chassis. */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-        /* §6 EASING DOCTRINE — the surface channel cross-fades on the bezier
-           `--ease-standard` (NEVER a spring; a surface prop on a spring is the
-           violation). */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-    .dark .glass-pager-ring {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-
-    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
-       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
-       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
-       box-shadow). The fringe is a transparency garnish, so it composes ONLY
-       under `prefers-reduced-transparency: no-preference` and drops under
-       `reduce` (handled by the bracket below). The fringe lands as a dedicated
-       inset box-shadow pair on the material surface so it adds onto the rim. */
-    @media (prefers-reduced-transparency: no-preference) {
-        .glass-chromatic {
-            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
-        }
-    }
 }

package/src/styles/glass.css

@@ -28,7 +28,7 @@
  * the MATERIAL half of. The spring wiring is OWNED by the dock-motion arm
  * (AV.W9, velocity continuity) and the slider arm (AV.W11); it is cross-
  * referenced here and authored there, not re-derived. See
- * `src/components/custom/dock/README.md` for the canonical discipline.
+ * `src/components/dock/README.md` for the canonical discipline.
  *
  * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
  * The glass rule body is carved into cohesive `glass/*.css` partials (each
@@ -46,6 +46,18 @@
    squircle + a11y @supports overrides, which must stay last): */
 @import "./glass/material.css";
 @import "./glass/ladder.css";
+/* BI.W-STYLE-REDRAIN — the .glass-opaque level-0 escape + the content-aware under-shadow
+   modifier carved out of ladder.css's tail to hold the no-god-module 500-line bound; its
+   own @layer components block @import-ed IMMEDIATELY AFTER ladder.css and BEFORE
+   grain-overlay.css (the ladder @layer tail, unique selectors, source-order-after — the
+   dist is byte-isomorphic). */
+@import "./glass/ladder-undershadow.css";
+/* BG.W-CLOSEFIX-9SITE — the glass-tier paper-grain `::after` overlay carved out of
+   ladder.css's tail to hold the no-god-module 500-line bound. @import-ed IMMEDIATELY
+   AFTER ladder.css and BEFORE accent-tone.css — the SAME @layer components; the grain
+   `::after` is the SOLE writer of the `.glass-*::after` overlay (the grain block was the
+   tail of ladder.css), so the relocation is cascade-order-invariant. */
+@import "./glass/grain-overlay.css";
 /* BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register
    (.accent-tone: one --tone → idle/active/edge/ink). AFTER ladder.css (reads the
    warm-cream --card surface the ladder mints); the SOLE writer of the --accent-*
@@ -53,6 +65,12 @@
 @import "./glass/accent-tone.css";
 @import "./glass/rim.css";
 @import "./glass/surfaces.css";
+/* BI.W-STYLE-REDRAIN — the .glass-pager-ring pager-pill chassis + the .glass-chromatic
+   edge-dispersion rim fringe carved out of surfaces.css's tail to hold the 500-line
+   bound; its own @layer components block @import-ed IMMEDIATELY AFTER surfaces.css and
+   BEFORE control-surfaces.css (the surfaces @layer tail, unique selectors,
+   source-order-after — the dist is byte-isomorphic). */
+@import "./glass/surfaces-pager.css";
 /* BC.W-CARVE6 — the .input-pill / .control-surface form-control REST register
    carved out of surfaces.css to hold the 500-line bound, @import-ed IMMEDIATELY
    AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
@@ -64,6 +82,14 @@
    tinted` seam + the `--glass-rim-*`/`--glass-shadow-floating` tokens resolve) and
    BEFORE the consuming recipes (segmented-tabs.css et al, imported by index.css). */
 @import "./glass/glass-capsule.css";
+/* BG.W-LIQUID-FILL — the ONE shared liquid-fill register (`.glass-liquid-fill`):
+   the warm glass-cylinder fill extracted from the Slider's `.slider-range` so the
+   Slider AND `<Progress variant="liquid">` COMPOSE it (fewer-sharper-primitives).
+   @import-ed AFTER glass-capsule.css (same `@layer components`, so the
+   `--glass-capsule-warm`/`--glass-blur-quiet`/`--glass-material-rim`/
+   `--glass-under-shadow-quiet` tokens resolve) and BEFORE the consuming
+   slider/progress recipes. */
+@import "./glass/liquid-fill.css";
 @import "./glass/surface-axis.css";
 @import "./glass/reveal.css";
 /* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
@@ -72,6 +98,13 @@
    `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
 @import "./glass/liquid-enter.css";
 @import "./glass/deep.css";
+/* BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the .glass-defined DEFINED-tier decoration
+   (rim + warm-cream floor-fill + the control-cohort default flip), a token-substitution
+   decoration ON a base rung (the .glass-opaque/.glass-deep precedent), @import-ed
+   IMMEDIATELY AFTER deep.css (same @layer components, source-order-after so its cohort
+   fills win over control-surfaces.css/surfaces.css at equal specificity) and BEFORE the
+   squircle/a11y overrides (which still win by :root level). */
+@import "./glass/defined.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";
 @import "./glass/a11y-fallback.css";

package/src/styles/index.css

@@ -102,11 +102,16 @@
  *                              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,
- *                              pop, dialog-scale, dropdown, tab-fade).
+ *                              ladder mint).
+ *   8. floating-panel.css    — RETIRED (BI.W-GLASS-DEDUP / FAM-9): the
+ *                              `.floating-panel` fixed-overlay recipe had ZERO
+ *                              consumers; the still-live `.dropdown-menu-content`
+ *                              font/inner-pad rules moved to menu.css.
+ *   9. transitions.css       — Vue <Transition> classes (fade, tab-fade,
+ *                              route-enter, pane-swap, metric-swap, dock-in).
+ *                              BI.W-REGISTER-TABLE retired fade-slide/pop/
+ *                              dialog-scale/dropdown (census-dead) — overlay/menu
+ *                              enters ride the .glass-reveal data-reveal register.
  *  10. animations.css        — @keyframes for components consumed via
  *                              `animation:` properties in (9) and component
  *                              <style> blocks. Includes the §TOP-LAYER
@@ -143,8 +148,7 @@
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
- *  13. hover-popover.css     — V.W3 popover-animation grammar.
- *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  13. 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
@@ -153,8 +157,15 @@
  *                             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.
+ *  17. dialog-placement.css  — BI.W-DIALOG-PLACEMENT the PRECOMPILED Dialog
+ *                             side-slide positioning (the `[data-slot="dialog-content"]
+ *                             [data-placement]` position/inset/size rules — the Sheet
+ *                             fold) — the overlay-band emission INVERSE: moved off the
+ *                             dead CVA geometry utilities that broke the D7 configurator
+ *                             drawer so the positioning SHIPS regardless of consumer JIT
+ *                             reach; locked by proof:emission.
  *
- * Per-package component CSS lives at (12)-(16) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(17) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -169,22 +180,16 @@
 @import "./dock-controls.css";
 @import "./cards.css";
 @import "./feedback-tone.css";
-@import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
-/* BD.W-MORPH-FIELD-WELD — the ONE morph-field recipe (the body/neck/waist silhouette + the
-   dedicated @property --morph-squish channel + the welling concave waist clip-path + the
-   1940s ink-cast). The `useMorphField` weld writes the drive-derived channels once/frame;
-   this sheet paints them. The cross-engine clip-path waist FLOOR + the [data-morphing] goo
-   gate live here. */
-@import "./motion/morph-field.css";
-/* BE.W-CELEBRATE-BURST — the earned glass-petal radial-bloom recipe (the
-   .glass-celebration-petal warm-cream frosted-glass material + the overlay anchor).
-   @import-ed after animations.css per the wave spec (the petal motion is the JS rAF
-   step's compositor writes; this recipe is the static frosted material the petals wear). */
-@import "./jubilance.css";
+@import "./viz-reveal.css";
 @import "./scroll-driven.css";
 @import "./scroll-choreography.css";
+/* BG.W-SCROLL-SHRINK-UNIFY — the EXTERNALIZED <CardHeader shrink> scroll-shrink
+   choreography (lifted out of the CardHeader.vue <style scoped> block into ONE
+   global, un-hashed home; the shared @keyframes title-collapse SCALE leg). A
+   scroll-choreography partial — bucketed DEFERRED in critical-partition.mjs. */
+@import "./card-scroll.css";
 @import "./scroll-chrome.css";
 @import "./view-transition.css";
 @import "./utilities.css";
@@ -197,19 +202,32 @@
 @import "./menu.css";
 @import "./configurator.css";
 @import "./instrument-chassis.css";
-@import "./hover-popover.css";
+/* BI.W-OVERLAY-UNION — hover-popover.css DELETED: <HoverPopover> folded onto the
+   sealed <Popover trigger="hover"> union; its content rides the shared
+   glass-floating + glass-reveal recipe, so the bespoke .hover-popover-panel
+   substrate is dead. (clean break, no alias.) */
 @import "./drawer.css";
 @import "./segmented-tabs.css";
+/* BI.W-STYLE-REDRAIN — the SegmentedTabs additive DECORATION tail (the .glass-drag-lift
+   pull affordance + the data-eyeglass iOS-27 loupe register) carved out of
+   segmented-tabs.css to hold the no-god-module 500-line bound; @import-ed IMMEDIATELY
+   AFTER it (unlayered, unique selectors, source-order-after — byte-isomorphic). */
+@import "./tabs/segmented-tabs-drag.css";
 @import "./select.css";
+/* BI.W-DIALOG-PLACEMENT — the overlay-band Dialog side-slide structural positioning,
+   precompiled (the emission INVERSE, terminalized onto Dialog `placement` — the Sheet
+   fold): a [data-slot="dialog-content"][data-placement] rule so the side sheet's
+   position/inset/size ships in dist/glass-ui.css regardless of a consumer's Tailwind
+   content-scan reach (off the dead CVA geometry utilities that broke the D7 configurator
+   drawer). :where()-wrapped so a consumer sizing utility still wins. Locked by
+   proof:emission (overlay-band inverse clause). */
+@import "./dialog-placement.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";
-/* BB.W-BORDER-PROGRESS — progress IS the element's border: the masked-conic ring
-   consumption (the @property reg lives in tokens/property-regs.css §18). A
-   component partial; the conic + the radius-following mask-composite + the coverage
-   masks + the PRM milestone-pulse bracket. */
-@import "./border-progress.css";
+/* The thin, radius-following masked scroll-progress band. */
+@import "./scroll-progress-rim.css";
 
 /* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal: a one-shot
    gold-draw mark (a `stroke-dashoffset` wipe on the 4 `@property` motion tokens
@@ -219,6 +237,16 @@
    compositor-only — the feedback-surface partial. */
 @import "./completion-seal.css";
 
+/* BI.W-DRAW-IN — the codified self-drawing arrival register (`.draw-rule` /
+   `[data-draw-in]`). A hairline / divider / underline draws ITSELF in via
+   `transform: scaleX(0→1)` (or a `clip-path: inset()` wipe) on the NO-OVERSHOOT
+   arrival ease `--ease-out-expo`, at `--draw-in-duration = calc(0.52s * --motion-
+   tempo)` — categorically NOT a spring (a rule that overshoots past its own end reads
+   as jitter). Closes UF-G6 (the "ad-hoc, too bouncy" masthead divider); the demo
+   masthead rule + CompletionSeal + HandMark are its recorded members. Compositor-only,
+   PRM-static. */
+@import "./draw-in.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).

package/src/styles/menu.css

@@ -51,23 +51,38 @@
            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
+        /* The lift transform rides the §6 spring register (`--spring-smooth`)
+           paired with ITS OWN settle clock `--spring-smooth-duration` (the
+           per-spring-duration doctrine, W-GLASS-CAL Unit 3 / W-TEMPO — NOT the
+           generic `--duration-fast`, which re-timed the spring to a 0.2 s wall
+           clock and dragged a dead sub-pixel tail; BI.W-COMMAND-JITTER R5a). 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);
+           `.interactive-item` base transition (already declared there). */
+        transition: translate var(--spring-smooth-duration) 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]`). */
+       reach the SAME glass BG register (Combobox/Command/Select parity — the CVA
+       routes all three input modes through `data-[highlighted]`). The TRANSLATE
+       lift is POINTER-ONLY (the rule below): reka sets `[data-highlighted]` for
+       KEYBOARD highlight too, so a lift on the bare `[data-highlighted]` restarts
+       a translate transition on EVERY arrow/keystroke → the command-palette
+       jitter (UF-G8; BI.W-COMMAND-JITTER R5b). Keyboard highlight + focus keep the
+       bg tint + color; only `:hover` lifts. */
     .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);
+    }
+
+    /* The POINTER-ONLY lift (R5b) — a `:hover`-scoped translate the keyboard
+       highlight/focus never fires, so an arrow keystroke never restarts a lift
+       transition. The pointer still reads the lift on hover; the keyboard reads
+       the bg+color register above with no geometric restart. */
+    .glass-menu-row:hover:not([data-disabled]) {
         translate: 0 var(--menu-row-lift);
     }
 
@@ -125,3 +140,48 @@
         transition: none;
     }
 }
+
+/* ── The dropdown-menu content font + inner-pad (BI.W-GLASS-DEDUP — moved here from
+   the DELETED floating-panel.css; the `.floating-panel` fixed-overlay recipe had ZERO
+   consumers and retired with the file). These are the STILL-LIVE rules — the dropdown
+   content family reads its consumer-facing knobs here.
+
+   Font knob (Q.W3 Lane C / Qβ-F3): migrated out of the lone scoped `<style>` blocks on
+   `DropdownMenuContent.vue` + `DropdownMenuSubContent.vue`. `--dropdown-menu-font` is
+   the consumer knob (value.js overrides it to `var(--font-mono)`); the `, inherit`
+   fall-through MUST be preserved verbatim per the Qθ binding constraint.
+
+   Inner-pad (AZ.R5-4): the dropdown content family reads the shared `--panel-padding`
+   token — one override retunes every teleported menu surface.
+
+   UNLAYERED (like the retired scoped block + the floating-panel.css source) — no other
+   rule sets `font-family`/`padding` on these surfaces, so the cascade effect is identical. */
+.dropdown-menu-content,
+.dropdown-sub-content {
+    font-family: var(--dropdown-menu-font, inherit);
+    padding: var(--panel-padding);
+
+    /* ── The L11 menu-plate token surface (BI.W-MENU-TRIGGER — the value.js coordination
+       ask). ONE consumer-retunable menu token surface following the factored Menu grammar
+       (the `--dropdown-menu-font` precedent, same family): a consumer retunes the whole
+       Menu plate — click AND context trigger, content AND sub-content — via a single
+       `:root` override. Each knob is a PURE NO-OP at its default (it falls through to the
+       floating tier's own value) and preserves the glass-first identity: the
+       bg/border knobs re-point the tier's INPUT primitives (`--glass-bg-rung` /
+       `--glass-border-rung`) — the "override the primitive the composite reads, never the
+       composite" discipline — so the W55 adaptive oklab tint still darkens/lifts over the
+       consumer's value AND the forced-colors a11y fallback (which sets `background:
+       Canvas` / `border: 1px solid CanvasText` DIRECTLY on `.glass-floating`) still wins.
+       The shadow knob replaces the drop-shadow leg of the tier's box-shadow stack; its
+       default reproduces the floating stack EXACTLY by reading the same rung tokens, so
+       the under-shadow + reduced-transparency behaviour re-resolves in lockstep (and
+       forced-colors strips box-shadow regardless). */
+    --glass-bg-rung: var(--dropdown-menu-bg, var(--glass-bg-floating));
+    --glass-border-rung: var(--dropdown-menu-border, var(--glass-border-floating));
+    box-shadow: var(
+        --dropdown-menu-shadow,
+        var(--glass-material-rim),
+        var(--glass-under-shadow-vivid),
+        var(--glass-shadow-floating)
+    );
+}