@mkbabb/glass-ui 4.0.1 → 4.1.0

package/src/styles/glass/control-surfaces.css

@@ -0,0 +1,167 @@
+/* glass/control-surfaces.css
+   The form-control REST register carved from glass/surfaces.css — the
+   `.input-pill` family (Input/Textarea/NumberField), the shared `.control-surface`
+   class (Select default + TagsInput), the validity vocabulary, and the Select
+   trigger resting-border lift. A cohesive sub-concern of surfaces.css (the
+   no-god-module re-drain), @import-ed by glass.css in cascade order IMMEDIATELY
+   AFTER surfaces.css and BEFORE surface-axis.css — same `@layer components`, same
+   source order, so the carve is byte-isomorphic.
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+@layer components {
+    /* ── 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. */
+        /* BC.W-CONTROL-CUSTOM — the height reads the `--control-pill-h` element-
+           override seam, DEFAULTING to the cohort `--control-h-md` so a bare
+           control is byte-identical to HEAD. The shared `controlSizeClass(size)`
+           (_shared/useControlSize.ts) re-points the seam per rung
+           (sm→`--control-h-sm`, lg→`--control-h-lg`), so the `size` prop retunes
+           the field height WITHOUT a recipe fork — ONE substitution rung, the
+           cohort is still the source. */
+        height: var(--control-pill-h, 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));
+        /* BC.W-CONTROL-CUSTOM — the font reads the `--control-pill-text` seam,
+           DEFAULTING to `--control-text` (byte-identical at unset). The `sm` rung
+           re-points it to `--control-text-sm` (the quieter register); `default`/`lg`
+           keep `--control-text`. This is the C1 close — the input register reads
+           `--control-text` via the recipe, NOT a bare `text-sm` literal. */
+        font-size: var(--control-pill-text, 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);
+    }
+}

package/src/styles/glass/ladder.css

@@ -211,14 +211,35 @@
        `--glass-tint-strength: 0%`. */
     :where(.glass-floating, .glass-overlay) {
         --glass-tint-source: var(--glass-tint-ink);
-        /* BC.W-AUDIT — the scope-7 completion: the overlay band JOINS the content-tier
-           sub-perceptual FLOOR by default (translucent warm glass), and the FULL AA
-           darken engages ONLY under the bright bucket (the @container --glass-backdrop:
-           light above). The prior unconditional AA (20% ink-ward) collapsed every
-           floating surface to grey over the common calm-light backdrop. The full glass
-           rebuild + the per-band muted/contrast reconciliation is BC. */
-        --glass-tint-strength: var(--glass-tint-strength-floor);
-        --muted-foreground: var(--foreground);
+        /* BC.W-ADAPTIVE-RECONCILE (the fourier-analysis-M Tier-1 #1 fold, CONTINUOUS half)
+           — the OVERLAY band SPECIFICALLY JOINS the continuous observer driver, the SAME
+           clamp the content tiers get. The dropdown/Dialog/Popover/Select-content plate
+           FLOORS to warm-cream when the measured backdrop is calm/dark, and darkens
+           CONTINUOUSLY only under a measured bright backdrop — NOT the binary `@container`
+           bucket jump, NOT a blanket unconditional darken (the retired 4.0.x 20% slab).
+           The `BC.W-AUDIT` pre-fix already closed the UNCONDITIONAL-darken half (the band
+           floored by default); THIS is the continuous earned-darken half. The MEASURED AA
+           bar (the overlay plate clears 4.5:1 WHILE α < 0.86) is GLASS-LEGIBILITY-
+           MEASURED's roster addition — the driver here, the bar there, no double-ownership. */
+        --glass-tint-strength: clamp(
+            var(--glass-tint-strength-floor),
+            calc(
+                var(--glass-tint-strength-floor) +
+                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+            ),
+            var(--glass-tint-strength-aa)
+        );
+        /* BC.W-DIALOG-GLASS — the overlay band's muted caption keeps the on-glass MUTED
+           register on a CALM modal (the SAME `--on-glass-muted` the content tiers read on
+           their calm path — legible-AND-subordinate against the composited glass fill),
+           NOT an UNCONDITIONAL lift to full `--foreground` that blackened the caption on a
+           cream modal over a light page. The bright-bucket lift (@container --glass-
+           backdrop:light below) moves `--muted-foreground` to the contrast ink in LOCKSTEP
+           with `--foreground` only where the plate ACTUALLY darkens to AA — so a busy-
+           backdrop modal goes full ink, a calm modal keeps the muted register. */
+        --muted-foreground: var(--on-glass-muted);
+        --muted-foreground-strong: var(--on-glass-muted-strong);
     }
 
     /* BA.W-DARK-MATERIAL scope 7 — the plain CONTENT tiers self-engage the SUB-PERCEPTUAL
@@ -252,7 +273,28 @@
        mode (the on-glass rungs carry their own light/dark per-mode arms in tokens). */
     :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) {
         --glass-tint-source: var(--glass-tint-ink);
-        --glass-tint-strength: var(--glass-tint-strength-floor);
+        /* BC.W-ADAPTIVE-RECONCILE — the CONTINUOUS observer-driven darken (the dead-knob
+           closed; req #7). The strength is no longer a flat floor: it is a clamp that
+           READS the observer's measured `--glass-backdrop-luma` and lerps from the calm
+           warm-cream floor toward the ≤24% AA ceiling as the backdrop brightens past the
+           `--glass-backdrop-luma-knee` (the iOS-27 dynamic-range shift, apple-ios27.md
+           §1.5). Over a calm/dark backdrop (luma ≤ knee, the `max(0, …)` ramp → 0) the
+           clamp resolves EXACTLY `--glass-tint-strength-floor` (the GLASS-IDENTITY calm
+           identity, byte-equal); rising luma ramps the lift CONTINUOUSLY; the clamp floors
+           at the 4% identity and ceilings at the bounded AA — never an unconditional 20%
+           slab (the AZ grey-slab is the OPPOSITE of this earned, measured track). This
+           RETIRES the discrete `@container --glass-backdrop: light` bucket as the strength
+           driver — the continuous calc subsumes it (the bucket survives only as a no-
+           `@property` degrade fallback). */
+        --glass-tint-strength: clamp(
+            var(--glass-tint-strength-floor),
+            calc(
+                var(--glass-tint-strength-floor) +
+                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+            ),
+            var(--glass-tint-strength-aa)
+        );
         --muted-foreground: var(--on-glass-muted);
         --muted-foreground-strong: var(--on-glass-muted-strong);
     }
@@ -296,14 +338,22 @@
                 --muted-foreground: contrast-color(var(--card));
             }
         }
-        /* The OVERLAY band self-engages the darken UNCONDITIONALLY (it floats over an
-           UNKNOWN consumer surface), so its ink-flip companion mirrors that — UNCONDITIONAL.
-           --foreground lifts in lockstep with --muted-foreground (the scope-6 lockstep). */
-        :where(.glass-floating, .glass-overlay) {
-            color: contrast-color(var(--card));
-            --foreground: contrast-color(var(--card));
-            --muted-foreground: contrast-color(var(--card));
-        }
+        /* BC.W-DIALOG-GLASS / BC.W-ADAPTIVE-RECONCILE (overlay-band arm) — the overlay
+           band's `contrast-color()` ink flip is now GATED in the bright bucket above
+           (the @container --glass-backdrop:light block already lists `.glass-floating,
+           .glass-overlay` alongside the content tiers), NOT here as an UNCONDITIONAL
+           flip. The retired unconditional `:where(.glass-floating, .glass-overlay)`
+           rule blackened the ink even on a CALM modal over a light page — a translucent
+           cream plate forced to pure-black `contrast-color(--card)`, harsh on the cream,
+           and `--muted-foreground` flipped to the same so captions lost their muted
+           register. Now: over a calm/dark backdrop the modal keeps the WARM-INK
+           `--foreground` (legible, not pure-black) + the muted caption register; only a
+           modal over a genuinely-bright/busy backdrop flips to the dark contrast ink
+           (where the plate ACTUALLY darkens to bright-bucket AA), the `--foreground`/
+           `--muted-foreground` lift moving in LOCKSTEP there (the scope-6 lockstep). The
+           overlay band STILL self-darkens UNCONDITIONALLY (the tint-strength clamp above,
+           it floats over unknown) — only the INK flips in the bright bucket. ONE
+           reconciled flip, not two forks (ladder.css stays the single source). */
         /* BA.W-DARK-MATERIAL scope 7 — the content-tier ink flip is GATED on the bright
            signal (it moved INTO the @container bucket above), NOT unconditional. Over a calm
            LIGHT page the content tiers only carry the 4% silhouette floor (still a warm cream

package/src/styles/glass/rim.css

@@ -67,12 +67,20 @@
     .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);
+        --glass-material-rim:
+            inset 0 1px 0
+                color-mix(in oklab, var(--glass-rim-ink), 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 +100,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/src/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,37 @@
        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). */
+    /* 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-bg-floating-tinted: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+    }
     .btn-glass {
-        --glass-bg-resting-tinted: color-mix(
+        /* 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); quiet + resting stay button-scoped (the
+           hover/active fill register the segmented pill does not engage). */
+        --glass-bg-quiet-tinted: color-mix(
             in oklab,
-            var(--glass-bg-resting),
+            var(--glass-bg-quiet),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
-        --glass-bg-floating-tinted: color-mix(
+        --glass-bg-resting-tinted: color-mix(
             in oklab,
-            var(--glass-bg-floating),
+            var(--glass-bg-resting),
             var(--glass-tint-source) var(--glass-tint-strength)
         );
     }
@@ -278,150 +339,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

package/src/styles/glass.css

@@ -46,8 +46,18 @@
    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";
 @import "./glass/surface-axis.css";
 @import "./glass/reveal.css";
 @import "./glass/deep.css";

package/src/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).
@@ -168,6 +174,7 @@
 @import "./animations.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 +200,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).