@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/styles/glass/material.css

@@ -55,7 +55,22 @@
        tier's own shadow recipe. The `::after` grain overlay already claims the
        five rungs' `::after`; the rim is folded INTO that same overlay's
        box-shadow below (the grain `::after` gets the rim inset ring) so no
-       pseudo-element collides. */
+       pseudo-element collides.
+
+       ── BE.W5 — `--glass-edge-light` IS A WHOLE BOX-SHADOW LAYER, NEVER A COLOR ──
+       `--glass-edge-light` resolves to a COMPLETE box-shadow layer (the token is
+       `inset 0 0 0 0.75px hsl(0 0% 100% / 0.18)` — geometry + color, glass-fx.css:70;
+       the `.dark` arm re-points it to `--glass-edge-light-dark`). It is consumed as a
+       WHOLE LAYER inside a `box-shadow:` list — `box-shadow: var(--glass-edge-light),
+       <other layers>` (surfaces.css:203/371, stack-rail.css:176). The MISUSE is
+       NESTING it as a COLOR inside another shadow — `inset 0 0 0 1px
+       var(--glass-edge-light)` — which expands to `inset 0 0 0 1px inset 0 0 0 0.75px
+       hsl(…)`: an INVALID shadow value → the WHOLE `box-shadow` declaration DROPS →
+       NO rim, NO drop-shadow (worst in dark, where the rim is the silhouette device).
+       THE RULE: read `--glass-edge-light` as a whole `box-shadow` layer, NEVER nested
+       inside another shadow's geometry. To compose the rim's COLOR (e.g. accent-tint
+       it) use `--glass-rim-ink`/`--glass-material-rim` (rim.css — the COLOR seam),
+       NOT `--glass-edge-light` (the LAYER token). */
 
     /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
        illuminate-from-within behaviour. A masked radial-gradient glow rides the
@@ -298,4 +313,58 @@
        press-depth animation is the deliberate tradeoff. The press squish + gleam lift on
        the SAME `--glass-btn-press-t` drive (material gleam, above) carry the press read. */
 
+    /* ── BE.W-CLEAR-VARIANT — the Apple-Clear `surface="clear"` decoration + the
+       MANDATORY legibility scrim ──────────────────────────────────────────────────
+       The 4th surface-axis member (`useSurfaceAxis.ts` maps `clear → glass-clear`).
+       A `surface="clear"` surface paints the maximally-translucent `--glass-bg-clear`
+       (0.58 — the clearest rung the library ships, the album grid bleeds through) AND
+       a MANDATORY legibility scrim IN THE SAME SEAM — a `.glass-clear` cannot exist
+       without it (the Apple Clear contract: near-transparent → the text needs a scrim
+       floor). The scrim DIMS THE BACKDROP (`color-mix(in srgb, var(--background) N%,
+       transparent)` — the A5-1 modal-scrim idiom, painted BEHIND the translucent fill
+       within the box, see the two-layer-background note below), DISTINCT from the W55
+       `--glass-tint-*` PLATE-darken axis (the two legibility axes stay disjoint: the
+       scrim dims the backdrop, the W55 tint darkens the plate). The scrim strength
+       DERIVES from the sampled
+       `--glass-backdrop-luma` (useGlassBackdropLuminance's existing write) so it dims
+       MORE over a bright album grid (luma→1) and relaxes over a dark one (luma→0) —
+       the dynamic legibility that betters Apple's fixed scrim. The `0.5` fallback is
+       the safe mid-scrim when no observer is wired. The plate fill rides the SAME
+       oklab-tint seam so the W55 darken reaches it; the see-through frost is the
+       cross-engine FLOOR (pure opacity + backdrop-filter, no `url()` — Safari paints
+       it via the build-time -webkit- prefix pass). The scrim is a STATIC paint (no
+       layout, no animation — `proof:no-layout-animation` GREEN by construction).
+
+       THE SCRIM IS A SECOND BACKGROUND LAYER, NOT A PSEUDO. The glass family already
+       claims BOTH pseudos on every base rung — `::before` (the moving specular core)
+       AND `::after` (the grain overlay, ladder.css). `surface="clear"` composes ON a
+       base tier (`glass-floating glass-clear`), so its `::before`/`::after` are taken;
+       a scrim pseudo would CLOBBER the specular or grain. The mandatory scrim is
+       therefore the FIRST of two comma-separated `background` LAYERS — painted FRONT
+       (the translucent glass fill) over BACK (the `--background` dim) within the box,
+       so the dim sits between the backdrop-filtered backdrop and the content (a child
+       paints above both). The fill stays translucent so the backdrop still reads
+       THROUGH the dim — see-through AND legible, one element, no pseudo collision. */
+    [data-surface="clear"],
+    .glass-clear {
+        /* The dynamic scrim strength — DERIVED from the sampled backdrop luma
+           (dims MORE over a bright grid). `0.5` is the safe mid-scrim fallback. */
+        --glass-clear-scrim-strength: calc(
+            var(--glass-backdrop-luma, 0.5) * 40%
+        );
+        background:
+            color-mix(
+                in oklab,
+                var(--glass-bg-clear),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            ),
+            color-mix(
+                in srgb,
+                var(--background) var(--glass-clear-scrim-strength),
+                transparent
+            );
+        backdrop-filter: var(--glass-blur-floating);
+        position: relative;
+    }
+
 }

package/dist/styles/glass/reveal.css

@@ -45,6 +45,19 @@
            clocks read the shared spring tokens (read-only — the W-GLASS-CAL fence). */
         --glass-reveal-blur: 4px;
         --glass-reveal-slide: 0.5rem;
+        /* The materialize squish — the surface blooms FROM 0.88 (a clear squish-grow,
+           the Control-Center round-toggle reference), not the near-no-op 0.95. The
+           authority lives here; the closed/exit leg reads it with a 0.88 fallback.
+           BD.W-ANIM-IOS27-TUNE */
+        --glass-reveal-enter-scale: 0.88;
+        /* The SQUISH channel — the same volume-preserving born-wide+flat squish the
+           universal `.liquid-enter` mount recipe speaks (ONE grammar, no fork). The
+           closed leg rides it on the `scale:` LONGHAND (vol-preserving sx·sy ≈ 1),
+           settling to `1 1` at open; the bloom-from-small grace is the coupled
+           scale-down (--glass-reveal-enter-scale) × this squish, never a separate
+           transform: shorthand (which would clobber a centering transform). */
+        --lq-stretch-x: 1.06;
+        --lq-stretch-y: 0.945;
         transform-origin: var(--reka-popper-transform-origin, center);
         /* The coupled transition list — the SPATIAL legs (scale/translate) on the
            snappy spring's OWN settle clock, the EFFECTS legs (opacity/filter blur-
@@ -67,7 +80,7 @@
        from its edge) — the BASE never writes `translate`, so a center-anchored Dialog
        keeping its `-translate-x-1/2 -translate-y-1/2` centering is NEVER clobbered. */
     .glass-reveal[data-state="open"] {
-        scale: 1;
+        scale: 1 1;
         opacity: 1;
         filter: blur(0);
     }
@@ -77,7 +90,14 @@
        past gone, the §6/W-MOTION-CANON P2 doctrine); NO `--spring-*` token on the
        exit. The exit is faster + un-sprung — the surface recedes cleanly. */
     .glass-reveal[data-state="closed"] {
-        scale: var(--glass-reveal-enter-scale, 0.95);
+        /* Born wide+flat AND bloom-from-small: the SQUISH (--lq-stretch-x/-y,
+           vol-preserving) couples with the bloom-from-0.88 on the SAME `scale:`
+           LONGHAND (two factors, ONE longhand — never a second transform: shorthand
+           that would clobber a Dialog's centering translate). The deform stays
+           anisotropic (the long axis swells AS it blooms, the short pinches);
+           it settles to `1 1` at open. */
+        scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
+            calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
         opacity: 0;
         filter: blur(var(--glass-reveal-blur));
         transition-timing-function: var(--ease-out);

package/dist/styles/glass/rim.css

@@ -67,12 +67,32 @@
     .glass-card,
     .glass-specular-track,
     .dock-icon-button {
-        /* the resolved rim ring INK (white-α light / lifted-white-α dark — the
-           SAME stop the `--glass-edge-light` token carries; the `.dark` arm below
-           re-points it). The accent mixes ONTO this ink. */
-        --glass-rim-ink: hsl(0 0% 100% / 0.18);
-        --glass-material-rim: inset 0 0 0 0.75px
-            color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength));
+        /* BC.W-BLACK-BAR D2 — the rim ring is now DIRECTIONAL: the top catch-light
+           (`--glass-rim-top`, glass-fx.css) carries the white-α ink the old
+           omnidirectional ring carried (0.30 light / 0.40 dark — the dark arm
+           re-points it via dark-arm.css), and the bottom under-shadow
+           (`--glass-rim-bottom`) grounds the plate. The accent (BB.W-GLASS-ACCENT)
+           still mixes ONTO the top catch-light ink so the chromatic rim reads on the
+           lit edge; at 0% strength the mix resolves byte-identical to the bare
+           `--glass-rim-top`. `--glass-rim-ink` is the resolved top-ink stop (kept as
+           the accent-compose seam — the `.dark` arm below re-points it). */
+        --glass-rim-ink: hsl(0 0% 100% / 0.30);
+        /* BD.W-GLASS-KEY-EDGE — the LIT catch is now KEY-DRIVEN: the accent-mixed
+           catch-light rides the key-facing edges (`--glass-key-lit-y` top +
+           `--glass-key-lit-x` side, the upper-right cel key) so the accent reads on
+           the LIT edge that agrees with the cartoon cast's light source — not a flat
+           top-only halo. The side stop carries the same accent-mixed ink at the rim's
+           own 0.18-class weight (via `--glass-rim-ink`-derived mix). The SHADE half is
+           the key-driven `--glass-rim-bottom` two-stop under-shadow. At 0% accent
+           strength the mix resolves byte-compatible to the bare key-driven rim (the W2
+           no-op floor). The moving-specular `::before` catch-light + the grain
+           `::after` are UNTOUCHED (both occupied). */
+        --glass-material-rim:
+            inset 0 var(--glass-key-lit-y) 0
+                color-mix(in oklab, var(--glass-rim-ink), var(--glass-accent) var(--glass-accent-strength)),
+            inset var(--glass-key-lit-x) 0 0
+                color-mix(in oklab, hsl(0 0% 100% / 0.18), var(--glass-accent) var(--glass-accent-strength)),
+            var(--glass-rim-bottom);
         /* the per-rung border ink, accent-composed. `--glass-border-rung` is set by
            each rung at its own declaration (it reads the rung's `--glass-border-*`
            token); the accent mixes onto it so the BORDER half of the rim carries the
@@ -92,9 +112,11 @@
     .dark .glass-card,
     .dark .glass-specular-track,
     .dark .dock-icon-button {
-        /* the dark rim ink is the lifted-α base (`--glass-edge-light-dark` stop) so
-           the accent composes off the dark silhouette device (W-DARK-MATERIAL). */
-        --glass-rim-ink: hsl(0 0% 100% / 0.22);
+        /* BC.W-BLACK-BAR D2 — the dark top catch-light ink is the lifted 0.40 stop
+           (mirroring the dark `--glass-rim-top`, dark-arm.css) so the accent composes
+           off the dark silhouette device (W-DARK-MATERIAL): dark glass needs a
+           brighter rim to read over the deep canvas. */
+        --glass-rim-ink: hsl(0 0% 100% / 0.40);
     }
 
 }

package/dist/styles/glass/surfaces.css

@@ -209,6 +209,22 @@
         --glass-specular-intensity-hover: var(--glass-specular-btn-hover);
     }
 
+    /* BC.W-BUTTON-GLASS-IOS (move 2 / BG-IOS-2) — the hero CTA reaches DEEP glass.
+       `.btn-glass` reads `--glass-blur-btn` (not `--glass-blur-floating`), so the bare
+       `.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). */
+    .btn-glass.glass-deep {
+        --glass-blur-btn: var(--glass-blur-deep);
+    }
+
     /* The depth deepens one rung on hover (the lifted-lozenge read) — additive over
        the variant's own hover surface legs. The variants paint the bg/border on
        hover; this adds the deeper drop. */
@@ -216,6 +232,29 @@
         box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow-hover);
     }
 
+    /* BC.W-BUTTON-GLASS-IOS (move 3 / BG-IOS-4) — the press is COUPLED (W-MOTION-CANON
+       P3): the ONE `--glass-btn-press-t` 0..1 spring drive (Button.vue writes it off
+       `useSpringPress`) feeds BOTH the squish (the `useLiquidFlex` reciprocal X/Y deform,
+       Button.vue) AND a SPECULAR brightness leg here — the touch-ILLUMINATION (apple-
+       ios27.md §2.5 ".interactive() → scale + bounce + shimmer + touch-illumination").
+       During the press the button's specular tracks the SPRING (not the binary `:active`
+       toggle material.css sets): `--specular-intensity` LERPs from the hover gleam toward
+       the active gleam as `--glass-btn-press-t` travels, so the gleam ILLUMINATES on the
+       SAME spring scalar as the squish (the glass reads as DEFORMING-AND-BRIGHTENING with
+       the spring's alive overshoot, not a uniform shrink). It reads the EXISTING
+       `--glass-specular-intensity-{hover,active}` cohort (property-regs.css) — no new
+       token, ONE drive two legs. Specificity ties material's `.glass-wash:active::before`
+       (0,2,1) and wins by source-order-after (surfaces.css @import-s after material.css),
+       so the button press follows the spring; the hover gleam + the no-JS `:active` floor
+       are untouched. */
+    .btn-glass:active::before {
+        --specular-intensity: calc(
+            var(--glass-specular-intensity-hover) +
+            (var(--glass-specular-intensity-active) - var(--glass-specular-intensity-hover)) *
+            var(--glass-btn-press-t)
+        );
+    }
+
     /* BB.W-BUTTON-GLASS (a) — the ELEMENT-LEVEL oklab-tinted hover/active fill pair
        (the substitution-vs-inheritance trap fixed on the button register). The glass
        button variants painted `hover:bg-(--glass-bg-resting) active:bg-(--glass-bg-
@@ -232,15 +271,32 @@
        to AA in lockstep with the rest bg. The `:root` raw `--glass-bg-*` tokens are
        UNTOUCHED (other surfaces compose them at the element correctly — the raw token +
        the element-level oklab wrapper is the correct ladder shape). */
-    .btn-glass {
-        --glass-bg-resting-tinted: color-mix(
+    /* BC.W-TABS-IOS — the tinted-FLOATING seam lifted off the `.btn-glass`-only scope
+       onto a SHARED `:where()` so the iOS-27 segmented-control active pill reads the
+       SAME element-level oklab-tint floating fill the glass button reads (the
+       substitution-over-redeclaration discipline: ONE tinted-floating source, NOT a
+       tab-local fork). The pill's active plate now reaches the W55 darken-over-bright
+       seam — over a bright field the pill darkens-to-legible, over a calm field it
+       stays warm-cream/near-white (the iOS adaptive register reaching the pill).
+       ZERO-delta at the `--glass-tint-strength: 0%`/floor default. */
+    :where(.btn-glass, .segmented-indicator, .glass-capsule) {
+        --glass-bg-floating-tinted: color-mix(
             in oklab,
-            var(--glass-bg-resting),
+            var(--glass-bg-floating),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
-        --glass-bg-floating-tinted: color-mix(
+    }
+    .btn-glass {
+        /* BC.W-BUTTON-GLASS-IOS (BG-IOS-6) — the `quiet` rung gains the SAME element-
+           level oklab-tint wrapper so the de-shadcn `outline`/`secondary` reskin (the
+           QUIETER glass register, prominence-by-tint) reaches the W55 darken on its lit
+           fill too — ZERO new compositing axis, the SAME seam the resting/floating pair
+           composes. The floating rung is minted on the shared `:where()` seam ABOVE
+           (the tab pill reads it too); the quiet rung stays button-scoped (the
+           hover/active fill register the segmented pill does not engage). */
+        --glass-bg-quiet-tinted: color-mix(
             in oklab,
-            var(--glass-bg-floating),
+            var(--glass-bg-quiet),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
     }
@@ -278,150 +334,10 @@
         --glass-btn-press-t: 0;
     }
 
-    /* ── Pill input ───────────────────────────────── */
-    .input-pill {
-        @apply flex w-full;
-
-        /* AX.W51 D18 — the input pill rides the ONE `--ui-scale` comfort axis: the
-           height reads the `--control-h-md` cohort (`max(calc(2.5rem * --ui-scale),
-           --control-floor)`, the h-10 register with the WCAG-44px coarse clamp), the
-           font reads `--control-text`, the inline padding scales — so ONE override
-           grows the field's height + padding + font in lockstep. Desktop default is
-           the identity. */
-        height: var(--control-h-md);
-        border-radius: var(--radius-pill);
-        /* AW.W13 — the resting field edge reads as an enclosed control at rest
-           (~15%α — ~2× the prior 8% glass-wash floor that vanished on cream). The
-           `:focus-visible` accent ring + the `:user-invalid`/`[aria-invalid]`
-           destructive ring below still win by order + specificity.
-           AX.W54 — moved off the srgb `--surface-tint-15` fork onto the glass
-           border seam so the pill is ONE glass model with the rest of the ladder.
-           BA.W-SURFACE-AXIS scope 7 — re-pointed onto the SHARED `--control-surface-*`
-           REST register so Input/Textarea/NumberField/Select/Combobox/TagsInput are
-           ONE material at rest (the input rung was the warmer of the two; Select rode
-           the `glass-wash` gray — the no-gray control-family seam). The register reads
-           the same `--glass-*` ladder, so `--glass-level`/the W55 bright bucket retune
-           the whole form family in lockstep (--control-surface-border defaults to the
-           `--glass-border-floating` 15%α rung, --control-surface-bg to `--glass-bg-quiet`,
-           --control-surface-blur to `--glass-blur-quiet`). */
-        border: 1.5px solid var(--control-surface-border);
-        background: var(--control-surface-bg);
-        /* The control's REAL glass blur — the shared register's quiet-tier radius
-           (the same `--control-surface-blur` pairs with `--control-surface-bg`); the
-           `--glass-level` knob clarifies it in lockstep with every surface. */
-        backdrop-filter: var(--control-surface-blur);
-        padding: 0 calc(1rem * var(--ui-scale));
-        font-size: var(--control-text);
-        color: var(--foreground);
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            opacity var(--duration-fast) var(--ease-standard);
-    }
-
-    .input-pill::placeholder {
-        color: var(--surface-tint-35);
-    }
-
-    /* BA.W-SURFACE-AXIS scope 7 — the shared control REST surface class. The
-       NON-pill control families (the Select trigger, the TagsInput root) that do
-       NOT compose `.input-pill` but want the SAME resting material read this — so
-       the whole form band is ONE register at rest (the Select default rode the
-       lighter `glass-wash` gray before; this is the no-gray control-family seam).
-       It carries the bg/border/blur ONLY (each control owns its own height/radius/
-       padding/font), so a non-pill control composes `.control-surface` + its own
-       geometry. The hover lift brightens the fill one step toward the resting rung. */
-    .control-surface {
-        background: var(--control-surface-bg);
-        border: 1px solid var(--control-surface-border);
-        backdrop-filter: var(--control-surface-blur);
-        -webkit-backdrop-filter: var(--control-surface-blur);
-    }
-    .control-surface:hover:not(:disabled, [data-disabled]) {
-        background: var(--control-surface-bg-hover);
-    }
-
-    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
-       accent ring on a mouse click); `:focus-visible` matches the
-       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
-       the `:user-invalid` rungs so an invalid focused field shows destructive,
-       not accent (the `:user-invalid:focus-visible` rule below wins by order +
-       specificity). `:focus-visible` Baseline Widely — no fallback. */
-    .input-pill:focus-visible {
-        outline: none;
-        border-color: var(--color-accent-opaque, var(--ring));
-        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
-    }
-
-    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The forgiving `:where(:user-invalid, .user-invalid-fallback,
-       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
-       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
-       fallback class for engines without `:user-invalid` (css §3.2; NOT a
-       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
-       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
-       serves APP-DRIVEN validity — a custom key match, an async server check —
-       where there is no native constraint to trip `:user-invalid`, so the app
-       sets the ARIA attribute and the library's own ring paints with no
-       `:deep()` re-paint at the consumer. The destructive/success tints reuse
-       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
-       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
-       asterisk — the border/bg shift is the supplementary cue, never the sole
-       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
-       a long valid form is not a wall of green. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
-        border-color: var(--destructive);
-        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
-    }
-    .input-pill:where(:user-valid, .user-valid-fallback) {
-        border-color: var(--success);
-    }
-    /* Invalid + keyboard-focused → destructive ring (overrides the accent
-       `:focus-visible` ring above by order + the extra invalid compound). The
-       `[aria-invalid]` arm rides the same widened group so an app-driven
-       invalid field shows the destructive ring on focus too. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
-        border-color: var(--destructive);
-        /* BB.W-INVALID-RING — the shared destructive ring register (the
-           --focus-ring-shadow sibling). The byte-identical recipe is now ONE
-           token; the `8%` at-rest bg arm above stays `.input-pill`-local (a
-           glass-tint substrate the bare-ring surfaces do not carry). */
-        box-shadow: var(--invalid-ring);
-    }
-
-    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
-       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
-       content between a 3-line floor and a token-driven ceiling, then scrolls.
-       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
-       engine the declaration is ignored and the element keeps the
-       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
-       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
-       the unchanged no-op fallback. */
-    .input-pill[data-autosize] {
-        field-sizing: content;
-        width: 100%;
-        min-block-size: 3lh;
-        max-block-size: var(--textarea-autosize-max, 12lh);
-        resize: vertical;
-    }
-
-    .input-pill:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
-    /* AW.W13 — the Select trigger mirrors the input pill's resting border lift.
-       The reka-ui SelectTrigger renders `role="combobox"` over the `.glass-wash`
-       surface; its 8%α `--glass-border-wash` field edge vanished on cream just
-       like the input pill, so the same `--surface-tint-15` lift makes the
-       trigger read as an enclosed control at rest. Scoped to the combobox role
-       so the lift reaches ONLY the Select trigger, not every `.glass-wash`
-       surface. */
-    .glass-wash[role="combobox"] {
-        border-color: var(--surface-tint-15);
-    }
+    /* The .input-pill / .control-surface form-control REST register is carved into
+       glass/control-surfaces.css (a cohesive sub-concern, the no-god-module re-drain)
+       — @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
@@ -443,7 +359,22 @@
         padding-inline: 0.625rem;
         padding-block: 0.3125rem;
         border-radius: var(--radius-pill);
-        background: var(--glass-bg-floating);
+        /* 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:

package/dist/styles/glass.css

@@ -46,10 +46,31 @@
    squircle + a11y @supports overrides, which must stay last): */
 @import "./glass/material.css";
 @import "./glass/ladder.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-*
+   channels, so the placement is cascade-order-invariant. */
+@import "./glass/accent-tone.css";
 @import "./glass/rim.css";
 @import "./glass/surfaces.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
+   source order — the dist is byte-isomorphic). */
+@import "./glass/control-surfaces.css";
+/* BD.W-TAB-IOS-CAPSULE — the ONE shared glassy register (`.glass-capsule` +
+   `.glass-capsule-track` + `.glass-capsule-hover`) the tabs/dock-tab/buttons/chips/
+   cards consumers compose. @import-ed AFTER surfaces.css (so the `--glass-bg-floating-
+   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";
 @import "./glass/surface-axis.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
+   lagging cartoon cast). @import-ed AFTER reveal.css (it extends the same
+   `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
+@import "./glass/liquid-enter.css";
 @import "./glass/deep.css";
 @import "./glass/progress-rail.css";
 @import "./glass/squircle.css";

package/dist/styles/icon-chip.css

@@ -27,6 +27,22 @@
  * --spring-snappy/--spring-smooth registers), no longer the fixed bezier.
  */
 
+/* BD.W-GLASS-ATOM-REGISTER — the shared `.glass-atom` warm-glass register the
+   small atoms (Badge-glass / metric-badge / slider fill / the `+N` chip) consume.
+   @import-ed HERE (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + the `--glass-*` axes are defined) — a consume-only recipe,
+   not a second material. CSS `@import` must precede every rule, so it leads the
+   file (the comment above is not a rule). */
+@import "./glass/glass-atom.css";
+/* BD.W-CHIP-CONGRUENT-GLASS — the chip family's warm-glass toggle register
+   (.glass-chip: the stadium-pill lens + the de-frauded colour-flood punch the
+   ToggleChip/SelectableChip/toggle-group children compose). @import-ed HERE
+   alongside glass-atom.css (icon-chip.css loads in index.css AFTER glass.css, so
+   `.glass-capsule` + `.accent-tone` + the `--glass-*` axes resolve) — a consume-
+   only recipe, not a second material. CSS `@import` must precede every rule, so it
+   leads with the atom import. */
+@import "./glass/glass-chip.css";
+
 :root {
     /* The chip≤glyph proportion (d2, structural). The diameter floors at
        `glyph × ratio` so the plate can NEVER paint under the glyph — a
@@ -110,6 +126,35 @@
     --icon-chip-plate-strength: 40%;
 }
 
+/* ── The QUIET GLASS register (BD.W-GLASS-ATOM-REGISTER cross-link) ─────────────
+   The chip's SECOND register: the transmissive `.glass-atom` warm-glass capsule
+   tinted toward the event hue via `--glass-fill-tint`, NOT the loud `in srgb`
+   brand plate (the default, kept — AW.W26 fence). The component applies
+   `.glass-capsule .glass-atom` alongside `.icon-chip--glass`, so the body (warm
+   floor + `--glass-blur-quiet` backdrop + the keyed rim) comes from the SHARED
+   register — this rule only RETIRES the chip's own `in srgb` plate-color fill so
+   the two backgrounds don't double-paint (the capsule's translucent fill +
+   `.glass-atom`'s tinted `background-image` are the body). The glyph event color
+   is untouched (the one color event still reads). A flat capsule lens — the
+   backdrop-filter rides the shared `--glass-blur-quiet` (Safari-native, no
+   `backdrop-filter:url`, Fence 8). */
+.icon-chip--glass {
+    /* Retire the brand plate fill — the `.glass-capsule` body + the `.glass-atom`
+       tinted `background-image` paint the surface (no double-fill). The capsule's
+       `background:` shorthand + the atom's later `background-image` layer win the
+       cascade over this `background-color: transparent` reset by source order. */
+    background-color: transparent;
+}
+
+/* The glass chip's hover-bloom (when BOTH `--glass` + `--bloom`) routes the glow
+   ring through the SAME event color, over the glass body — the bloom GROW (the
+   base `.icon-chip--bloom:hover` transform/spring) is inherited unchanged. */
+@media (hover: hover) {
+    .icon-chip--glass.icon-chip--bloom:hover {
+        background-color: transparent;
+    }
+}
+
 /* ── 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

package/dist/styles/index.css

@@ -120,6 +120,12 @@
  *                              native .smooth-scroll opt-in) on the native
  *                              scroll()/view()/timeline-scope substrate; NO
  *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
+ *  10a''. scroll-chrome.css  — BC.W-SCROLL-CHROME the scroll-driven floating-
+ *                              CHROME collapse recipe (.scroll-chrome reads
+ *                              --chrome-collapse-t for the compositor shrink/
+ *                              quiet/shadow-lift; PERSISTENT-by-default, crisp
+ *                              blur, never-invisible quiet, PRM-discrete). The
+ *                              useScrollChrome JS machine owns the snap + ramp.
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
@@ -166,8 +172,20 @@
 @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 "./scroll-driven.css";
 @import "./scroll-choreography.css";
+@import "./scroll-chrome.css";
 @import "./view-transition.css";
 @import "./utilities.css";
 /* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
@@ -193,6 +211,14 @@
    masks + the PRM milestone-pulse bracket. */
 @import "./border-progress.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
+   `--seal-draw`/`--seal-scale`/`--seal-glint`/`--seal-ink`, registered in
+   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";
+
 /* 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).