@mkbabb/glass-ui 4.2.0 → 6.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,24 +28,36 @@
  * 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
  * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
  * The base ladder splits into three adjacent `@layer components` blocks
  * (material · ladder · surfaces) — same layer, same source order, so the carve
- * is isomorphic. The squircle `@supports` arm and the a11y `@media`/`@supports`
- * overrides MUST stay AFTER the base ladder (they override it). See
+ * is isomorphic. The squircle `@supports` arm stays after the base ladder;
+ * accessibility modes load once at the end of styles/index.css. See
  * docs/precepts/design-idioms.md §cohesion-aware partials.
  */
 
 /* CSS @import rules must precede every other rule. The seven partials @import in
    cascade order (surface-axis.css AFTER ladder/surfaces so its [data-surface]
    decoration attr rules win over the base rung by source order; BEFORE the
-   squircle + a11y @supports overrides, which must stay last): */
+   squircle override): */
 @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,7 +82,16 @@
    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/material-roles.css";
 @import "./glass/reveal.css";
 /* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
    (the four coupled channels as @keyframes-on-mount + the `.is-cel` cel-slam + the
@@ -72,6 +99,12 @@
    `--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 override. */
+@import "./glass/defined.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";
-@import "./glass/a11y-fallback.css";

package/src/styles/index.css

@@ -62,7 +62,7 @@
  *                              from (1) so MUST come after them; defines the
  *                              `dark` variant selector consumed by the cascade.
  *   4. glass.css             — thin @import root over glass/{material,ladder,
- *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
+ *                              surfaces,progress-rail,squircle}.css.
  *                              .glass-{wash,quiet,resting,floating,overlay}
  *                              5-rung ladder + .glass-card / -pill / -btn.
  *                              Consumes tokens (1) + theme aliases (3).
@@ -75,7 +75,7 @@
  *                              over the glass tiers.
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
+ *   6. components/dock/styles/index.css — the dock CORE: the `@property --dock-morph-t`
  *                              registration, the shared cross-control four-state
  *                              comma-groups, and the `@import`s of the cohesive
  *                              `dock/*.css` partials (shell · morph · density ·
@@ -84,7 +84,7 @@
  *                              each < 500 lines, all in the SAME @layer components
  *                              so the cascade is isomorphic). Component utility
  *                              layer; consumes (1) + (3).
- *  6b. dock-controls.css     — the five dock CONTROL families carved out of
+ *  6b. components/dock/styles/controls.css — the dock CONTROL families
  *                              dock.css (AU.W8b.3): .dock-icon-button,
  *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
  *                              .dock-select-trigger / .dock-dropdown-trigger, and
@@ -92,9 +92,9 @@
  *                              components; MUST load directly after dock.css so
  *                              the shared :where()/comma-group contract in (6)
  *                              cascades into these control rules.
- *   7. cards.css             — .cartoon-surface, .paper-texture.
+ *   7. components/card/styles.css — card and shared card-surface recipes.
  *                              Component utility layer.
- *  7a. feedback-tone.css     — the ONE shared tinted-glass tone register
+ *  7a. components/_shared/feedback-tone.css — the 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
@@ -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
@@ -130,33 +135,42 @@
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
  *  11. utilities.css         — thin @import root over utilities/{animate,base,
- *                              components,btn,a11y-overrides}.css. focus-ring,
+ *                              components,btn}.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
+ *  11a. components/_shared/menu.css — 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 +
+ *  12. components/instrument-chassis/styles.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. components/drawer/styles.css — 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
+ *  15. components/tabs/styles/* — SegmentedTabs overflow/indicator grammar.
+ *  16. components/_shared/field-surfaces.css — precompiled field/list surfaces
  *                             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.
+ *  17. components/dialog/placement.css — 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.
+ *
+ *  18. accessibility.css     — terminal reduced-transparency/contrast/motion,
+ *                              forced-colors, and coarse-input adaptations.
  *
- * 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.
+ * Per-package component CSS lives at (12)-(17) (loaded after utilities so
+ * component-local recipes can override). Accessibility then replaces the
+ * completed paint as one terminal product mode.
  */
 @import "./tokens.css";
 @import "./typography.css";
@@ -165,26 +179,20 @@
 @import "./glass-specular-track.css";
 @import "./glass-refract.css";
 @import "./paper.css";
-@import "./dock.css";
-@import "./dock-controls.css";
-@import "./cards.css";
-@import "./feedback-tone.css";
-@import "./floating-panel.css";
+@import "../components/dock/styles/index.css";
+@import "../components/dock/styles/controls.css";
+@import "../components/card/styles.css";
+@import "../components/_shared/feedback-tone.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 "../components/card/card-scroll.css";
 @import "./scroll-chrome.css";
 @import "./view-transition.css";
 @import "./utilities.css";
@@ -194,22 +202,35 @@
    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 "./hover-popover.css";
-@import "./drawer.css";
-@import "./segmented-tabs.css";
-@import "./select.css";
+@import "../components/_shared/menu.css";
+@import "../components/configurator/styles.css";
+@import "../components/instrument-chassis/styles.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 "../components/drawer/styles.css";
+@import "../components/tabs/styles/segmented.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 "../components/tabs/styles/drag.css";
+@import "../components/_shared/field-surfaces.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 "../components/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";
+@import "../components/icon-chip/styles.css";
+/* The thin, radius-following masked scroll-progress band. */
+@import "../components/scroll-progress-rim/styles.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
@@ -217,7 +238,22 @@
    tokens/property-regs.css §18). The ink reads the W-PHASE-PALETTE earned-gold
    register; the glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
    compositor-only — the feedback-surface partial. */
-@import "./completion-seal.css";
+@import "../components/completion-seal/styles.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";
+
+/* Accessibility is a terminal product mode, not a mid-cascade patch. This one
+   import owns reduced transparency/contrast/motion, forced colors, and coarse
+   target adaptation after every material and component recipe. */
+@import "./accessibility.css";
 
 /* Ensure Tailwind scans glass-ui's compiled component templates for the utility
    classes they emit (CVA variant classes like text-destructive-foreground,