@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/glass/progress-rail.css

@@ -0,0 +1,78 @@
+/* glass/progress-rail.css
+   The @utility glass-progress-rail — restyles <Progress variant=default> into the deck-position rail. A @utility (not @layer components) so it outranks the variant's baked h-4/rounded-pill utilities.
+   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. */
+/* ── Deck-position rail (AW.W16 · AX.W24) ───────────────────────────────────
+   A Tailwind `@utility` that RESTYLES the shipped `<Progress variant="default">`
+   (the reka-ui ProgressRoot track + its indicator child) into the thin
+   bottom-of-deck position rail. It composes the EXISTING fill — it does NOT
+   re-author a second track/range mechanic. Every visual axis is a
+   `--progress-rail-*` token, so a consumer/dark-flip re-tints with zero library
+   edit (`:root { --progress-rail-fill: … }`). The viewport-pinned chrome
+   (`position: fixed`, `env(safe-area-inset-bottom)`, the z-index) is CONSUMER-
+   supplied — this recipe owns only the LOOK.
+
+   AX.W24 — WHY `@utility`, not `@layer components`. The rail RESTYLES the default
+   Progress: it must override the `h-4` height + `rounded-pill` radius utilities the
+   variant bakes. Those utilities live in `@layer utilities`, which ALWAYS outranks
+   `@layer components` regardless of source order, so the prior `@layer components`
+   recipe's `height: 3px` was a silent no-op (the rail painted as a 16px bar). An
+   `@utility` lands the recipe IN `@layer utilities` alongside `h-4`, where a single-
+   class selector wins the geometry by source order — the idiomatic Tailwind-v4 way
+   to author a restyle-class that out-ranks base utilities (the `btn-audacious` /
+   `cartoon-surface` pattern).
+
+   The COLOUR fix is the SEPARATE token-read-at-source path (NOT a layer-juggle):
+   `ProgressDefault` reads `--progress-fill`/`--progress-track` and dropped its
+   `bg-secondary`/`bg-primary` utilities, so this recipe FEEDS those tokens rather
+   than fighting a utility colour. The `--progress-fill` set on the rail root cascades
+   to the indicator child (a CSS custom property inherits), so the indicator reads the
+   override hue. */
+@utility glass-progress-rail {
+    /* The track hairline + zero radius — the rail reads as a thin square sliver, not
+       the variant's 16px `rounded-pill` bar. A single-class @utility ties `h-4`/
+       `rounded-pill` on SPECIFICITY (both 0,1,0) and Tailwind's utility sort can emit
+       `h-4` later, so the bare tie loses. The doubled-class self-reference (`&&` →
+       `.glass-progress-rail.glass-progress-rail`, specificity 0,2,0) wins the geometry
+       DETERMINISTICALLY over the base utilities regardless of emit order — the precise,
+       contained way to out-rank a base utility without `!important`. */
+    && {
+        height: var(--progress-rail-h, 3px);
+        border-radius: 0;
+    }
+    /* Feed the token-read default variant — these route the consumer's
+       `--progress-rail-*` axes into the `--progress-fill`/`--progress-track` tokens
+       the variant reads at source (the cascade-correct colour path). */
+    --progress-track: var(
+        --progress-rail-track,
+        color-mix(in srgb, var(--foreground) 8%, transparent)
+    );
+    --progress-fill: var(--progress-rail-fill, var(--primary));
+
+    /* The fill — the shipped ProgressIndicator child. The indicator paints the
+       inherited `--progress-fill`; the leading-edge glow is re-authored (AX.W24 F2)
+       as a TRAILING right-edge INSET box-shadow that lives INSIDE the indicator's
+       own box. The prior `4px 0 8px` OUTSET rightward shadow extended PAST the fill
+       boundary into the ProgressRoot's load-bearing `overflow-hidden` clip and was
+       eaten — invisible at every value. An `inset` shadow offset leftward
+       (`inset -Npx 0 …`) brightens just inside the indicator's right (leading) edge
+       — the moving position head — and never crosses the fill boundary, so the clip
+       cannot eat it (the clip is never lifted; that would re-break the default
+       Progress look for every other consumer). `box-shadow` is a separate property
+       from `background`, so it composes cleanly over the token-read fill. */
+    && > * {
+        border-radius: 0;
+        box-shadow:
+            inset
+            calc(-1 * var(--progress-rail-glow-x, 4px))
+            0
+            var(--progress-rail-glow-blur, 8px)
+            calc(-1 * var(--progress-rail-glow-spread, 2px))
+            color-mix(
+                in srgb,
+                hsl(0 0% 100%) var(--progress-rail-glow-strength, 55%),
+                transparent
+            );
+    }
+}

package/src/styles/glass/squircle.css

@@ -0,0 +1,66 @@
+/* glass/squircle.css
+   The AX.W56 rounded-vs-squircle policy + the @supports (corner-shape: superellipse(2)) squircle coupling onto the overlay-band glass. After the base ladder (overrides it).
+   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. */
+/* ── AX.W56 — the rounded-vs-squircle POLICY (re-homes AW.W23's squircle) ─────
+   Cards, glass buttons, and pills stay ROUND. The earlier AW.W23 block applied
+   `corner-shape: squircle` to `.glass-card`/`.glass-btn`/`.btn-pill`, which
+   inverted the design intent — the superellipse is imperceptible at a 16px card
+   radius or a stadium pill, so the squircle on those surfaces was visual cost
+   without read. The squircle is RE-HOMED onto the one surface where it reads: the
+   big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
+   `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
+   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
+   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
+   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
+   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
+   re-add a squircle rule to the card/button/pill surfaces — they are round by
+   policy. */
+
+/* ── AX.W56(R1) + W56b — squircle coupling onto the large-radius glass FAMILY ───
+   W54 makes GLASS the default for the overlay-band surfaces; W56(R1)+W56b couple
+   the SQUIRCLE onto the whole LARGE-RADIUS glass family — Dialog + Sheet content
+   (`.glass-floating.{rounded-dialog,sheet-animate}`), the Configurator/floating
+   PANEL (`.configurator`, `.floating-panel`), and the glass HERO overlay
+   (`.glass-hero`, the thin opt-in utility the page-redesign hero reads). Every one
+   sits AT or ABOVE the ~--radius-xl threshold where the superellipse READS — the
+   same iOS-26 idiom the big-dock card shell carries (the backdrop-filter blur halo
+   + the cartoon under-shadow follow the shape). Each surface reads its OWN
+   tokenized `var(--corner-shape-<surface>)` (theme.css) so it is independently
+   overridable — never a blanket `.glass-floating` rule (data cards + pills stay
+   round by policy; the compound selectors scope to the named surface only). Mirrors
+   the big-dock idiom EXACTLY: an `@supports`-gated ENHANCEMENT (Chrome 139+, no
+   FF/Safari 2026) over the `border-radius` round CONTRACT — the squircle is the
+   better tier, NOT a degraded fallback. The `@supports` condition tests the LITERAL
+   `superellipse(2)` (a `var()` is not evaluable in an `@supports` query) — the same
+   Chrome-139 feature the token resolves to. */
+@layer components {
+    @supports (corner-shape: superellipse(2)) {
+        .glass-floating.rounded-dialog {
+            corner-shape: var(--corner-shape-dialog);
+        }
+        .glass-floating.sheet-animate {
+            corner-shape: var(--corner-shape-sheet);
+        }
+        .configurator,
+        .floating-panel {
+            corner-shape: var(--corner-shape-panel);
+        }
+        .glass-hero {
+            corner-shape: var(--corner-shape-hero);
+        }
+    }
+}
+
+/* ── The glass HERO opt-in utility (W56b fold 7) ────────────────────────────────
+   A thin large-radius editorial glass OVERLAY — distinct from a data Card (which
+   stays round by policy). It is the surface the page-redesign hero (W60) reads;
+   minting it here (with its consumer) keeps the squircle off every `.glass-card`.
+   The corner-shape squircle rides the `@supports` block above; the un-gated
+   `border-radius` here is the cross-engine round CONTRACT. */
+@layer components {
+    .glass-hero {
+        border-radius: var(--radius-2xl);
+    }
+}

package/src/styles/glass/surface-axis.css

@@ -0,0 +1,113 @@
+/* glass/surface-axis.css — the ONE shared {glass·veil·opaque} surface-decoration
+   axis (BA.W-SURFACE-AXIS).
+
+   The house minted `--glass-level` (the opacity knob, AX.W54) and `--glass-tint-*`
+   (the legibility seam, AX.W55) as SHARED inheriting axes, but left the
+   {glass·veil·opaque} surface-DECORATION choice as a per-component one-off
+   (`<Card>` had the only true axis; `<Dialog>` a binary string; everyone else
+   none). This seam factors that choice ONCE — every enrolled surface composes a
+   base glass tier + the `[data-surface]` attribute, and these rules apply the
+   three-rung decoration UNIFORMLY:
+
+     glass   — the resolved tier's plain glass rung (IDENTITY; no rule needed —
+               the bare tier paints).
+     veil    — the borderless/rimless text-legibility plate: the `--glass-bg-quiet`
+               fill + blur with the box border AND rim STRIPPED (the boxed look
+               reads as a dividing line on a text plate). Reads `--glass-bg-quiet`
+               + the W55 `--glass-tint-*` seam through the SAME `--glass-*` ladder,
+               so `--glass-level` / the bright-bucket darken retune it in lockstep
+               with every glass surface — NO veil-local recipe fork.
+     opaque   — the `--glass-level:0` solid-card escape (the `.glass-opaque` rung):
+               solid `--card` + `blur(0)` through the ONE level knob, the tint axis
+               zeroed (a solid plate has no translucent backdrop to darken-over).
+
+   NO second axis: `cartoon` stays a Card-local decoration (it is NOT a
+   {glass·veil·opaque} member — the shared axis is the three-rung MATERIAL
+   decoration; cartoon rides Card's own `surface` superset). The `Surface` union +
+   the `surfaceClass(surface, tier)` resolver are the TS half
+   (`src/components/ui/_shared/useSurfaceAxis.ts`); this file is the CSS half.
+
+   Cascade: `@layer components`, @import-ed AFTER ladder.css so the attr rules
+   (specificity 0-1-0, equal to the `.glass-*` classes) win by source order over
+   the base rung's border/box-shadow. */
+@layer components {
+    /* ── veil — the borderless text-legibility plate ──────────────────────────
+       Composes the SAME deltas as the `veil-surface` @utility (cards.css), keyed
+       off the SAME `--glass-bg-quiet` + `--glass-tint-*` tokens (no recipe fork).
+       Each delta is an overridable `--veil-*` rung so a consumer re-points the
+       plate to any other ladder rung. */
+    [data-surface="veil"] {
+        --veil-bg: color-mix(
+            in oklab,
+            var(--glass-bg-quiet),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        --veil-blur: var(--glass-blur-quiet);
+        /* The three veil deltas over a bare rung — each overridable. */
+        --veil-border: none;
+        --veil-shadow: none;
+        --veil-feather: none;
+
+        background: var(--veil-bg);
+        backdrop-filter: var(--veil-blur);
+        -webkit-backdrop-filter: var(--veil-blur);
+        border: var(--veil-border);
+        box-shadow: var(--veil-shadow);
+        /* The optional radial feather — a `mask-image` only painted when
+           `--veil-feather` is set to a gradient (default `none` = no mask = a
+           clean rectangle). `mask-image: none` is the identity. */
+        mask-image: var(--veil-feather);
+    }
+
+    /* ── opaque — the solid-card escape ───────────────────────────────────────
+       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
+       with `blur(0)`. A surface that ALSO carries a base tier keeps its glass
+       edge/rim/under-shadow (a solid plate with a glass edge, not a bare div).
+
+       THE SUBSTITUTION-VS-INHERITANCE TRAP (the recurring AX.W55 / dock-scale
+       class, live-found in the π readback): the `--glass-bg-*` tier tokens bake
+       `var(--glass-level)` at their `:root` DECLARATION (where level=1), so a
+       DESCENDANT element's `--glass-level: 0` does NOT re-resolve the `:root`-baked
+       `--glass-bg-floating` — the plate stayed translucent (α 0.8, NOT solid). The
+       `.glass-opaque` class works only when `--glass-level` is set at `:root` (the
+       cohesion fixture's pattern); a PER-ELEMENT opaque surface (the whole point of
+       `surface="opaque"`) needs the solid plate composed AT THE ELEMENT. So the
+       opaque rung sets the SOLID `--card` background + `blur(0)` DIRECTLY (the
+       level-0 endpoint resolved here, not via the baked token) — AND still flips the
+       `--glass-level: 0` / `--glass-tint-strength: 0%` knobs so a NESTED glass
+       descendant + any consumer reading the level scalar see the opaque register
+       coherently. The adaptive TINT axis is zeroed (a solid plate has no
+       translucent backdrop to darken-over — the bucket-INVARIANT contract). */
+    [data-surface="opaque"] {
+        --glass-level: 0;
+        --glass-tint-strength: 0%;
+        /* The SOLID --card plate composed at the element via the house color-mix
+           idiom (`--card` over transparent at 0% transparent = fully solid --card)
+           — functionally `var(--card)`, expressed as the cohesion-sanctioned mix
+           the token ladder already speaks. */
+        background: color-mix(in srgb, var(--card), transparent 0%);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+    }
+
+    /* ── .paper-ink-mark — the PAPER ink-hairline MARK register ────────────────
+       (BA.W-SURFACE-AXIS scope 8). The 2px `--foreground` ink mark on a paper
+       surface — NO plate, NO blur, NO glass. This is a MARK register, NOT a
+       `[data-surface]` plate rung: a `[data-surface]` value DECORATES a glass
+       plate (fill + edge + rim); `.paper-ink-mark` is the opposite — a bare ink
+       hairline drawn directly on paper, the math-paper section-rail / underline-
+       tab vocabulary. Recorded here (the surface-decoration seam) co-located with
+       the plate axis but DISTINCT from it — the canon note is in CLAUDE.md.
+
+       ≥2 consumers at birth: (1) the math-paper section rail (the `border-l-[3px]`
+       family composes it for a VERTICAL left-edge ink rail); (2) W-TABS's re-cut
+       underline indicator (a HORIZONTAL 2px ink mark — W-TABS CONSUMES this seam,
+       a shape gap there triumvirates HERE per the DAG §5 seam rule). The register
+       exposes ONE knob (`--paper-ink-mark-weight`, default 2px) + the ink color;
+       the consumer applies the weight on whichever edge/axis it draws (a left
+       `border-inline-start-width` rail, a bottom `block-size` underline). */
+    .paper-ink-mark {
+        --paper-ink-mark-weight: 2px;
+        --paper-ink-mark-color: var(--foreground);
+    }
+}

package/src/styles/glass/surfaces.css

@@ -0,0 +1,382 @@
+/* glass/surfaces.css
+   The convenience-shorthand surfaces — .glass-card / .glass-pill / .glass-btn + the glass pill-input + the chromatic edge-dispersion rim fringe.
+   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. */
+@layer components {
+    /* ── Convenience shorthands (tier + shape) ── */
+
+    /* Static surface utility — no hover lift, no transition.
+       Interactive cards live in <Card> (which owns its own hover composition)
+       or in components that explicitly opt into a hover variant. */
+    .glass-card {
+        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
+           `:has(:focus-visible)` rule redefines them (one source, shared with
+           the fallback). */
+        --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));
+        backdrop-filter: var(--glass-blur-quiet);
+        border: 1px solid var(--card-focus-border);
+        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;
+        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). */
+    .glass-card:has(:focus-visible) {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+
+    /* ── Glassmorphic circular icon button ── */
+
+    /* BA.W-DEMO-AFFORDANCES (IG-A4) — the two size registers below are
+       MUTUALLY EXCLUSIVE; never stack `.glass-btn` and `.btn-pill` on one
+       element. `.glass-btn` is the FIXED-square icon primitive (width/height:
+       var(--size-icon-btn) + contain:paint) — `.btn-pill` is the CONTENT-WIDTH
+       text pill. Stacked, the fixed square wins and contain:paint clips the
+       wrapped label into a ~40px blob (the R8-17 "play button" defect). A
+       text-bearing `.glass-btn` collapses the same way even without `.btn-pill`.
+       For a play/replay affordance reach for <StoryPlayButton> (demo) or a real
+       <Button> with a leading Lucide glyph, never an icon-button carrying text.
+       Machine-locked by proof:demo-affordances (W1 — no class co-occurrence,
+       no text-bearing icon button). */
+    .glass-btn {
+        @apply flex items-center justify-center cursor-pointer;
+
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
+           mints the stacking context once so the hover/press scale below does
+           not flicker it into being (the z-index/anchor hazard). */
+        scale: 1;
+        width: var(--size-icon-btn);
+        height: var(--size-icon-btn);
+        border-radius: var(--radius-pill);
+        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;
+        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`)
+           so the icon-button hover settles on the SAME ONE register as `.btn-pill` /
+           `.tap-squish` / `btn-interactive` (the gate asserts one scale register
+           across all four). The press still reads crisp — `--spring-smooth` ζ=0.86
+           settles fast without a visible bounce. */
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            scale var(--spring-smooth-duration) var(--spring-smooth);
+    }
+
+    .glass-btn:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--background) 85%, transparent);
+        border-color: var(--surface-tint-22);
+        color: var(--foreground);
+        scale: var(--scale-hover);
+    }
+
+    .glass-btn:active:not(:disabled) {
+        scale: var(--scale-press);
+    }
+
+    .glass-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    .glass-btn:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .glass-btn.is-active,
+    .glass-btn[aria-pressed="true"] {
+        background: var(--surface-tint-10);
+        border-color: var(--surface-tint-25);
+        color: var(--foreground);
+    }
+
+    /* ── Pill button base ─────────────────────────── */
+    .btn-pill {
+        @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
+
+        /* AX.W52 §6 identity base — `scale: 1` at rest so the hover/press scale
+           below animates the `scale` longhand (not `transform`) coherently and
+           does not flicker the stacking context into being (AQ.W3 §W3.2). */
+        scale: 1;
+        /* AX.W51 D18 — the pill GEOMETRY rides the ONE `--ui-scale` comfort axis.
+           gap / padding scale by the master scalar; the font reads the
+           `--control-text` register (`calc(--type-small * --ui-scale)`, the same
+           `text-sm` register the Button CVA paints), so a bare `.btn-pill` consumer
+           and a `<Button>` agree on the control font, and ONE `--ui-scale` override
+           grows the pill's height (via padding) + gap + font in lockstep. Desktop
+           default is the identity (scale 1 → the prior proportion). */
+        gap: calc(0.375rem * var(--ui-scale));
+        border-radius: var(--radius-pill);
+        padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
+        font-size: var(--control-text);
+        /* AX.W52 — the ONE coherent button transition (RED witness 5/6). The
+           SURFACE legs (bg/border/box-shadow/color/opacity) ride the bezier
+           `--ease-standard` (a colour cross-fade reads as a wobble on a spring);
+           the TRANSFORM leg (`scale`) rides `--spring-smooth` (the sub-perceptual
+           settle), so the hover lift + the surface cross-fade read as ONE glide.
+           The DEAD `transform` leg is retired — the variants animate the `scale`
+           longhand. CRITICAL: `.tap-squish` (composed alongside on the button
+           base, utilities.css) ALSO lists this full coherent set, so neither
+           class's `transition` shorthand can clobber the other down to a
+           scale-only animation — the cascade bug that left every button
+           transitioning ONLY `scale` (the live-readback RED, RED witness 5). The
+           doctrine: surface-props→bezier, transform→spring (tokens.css §2). */
+        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),
+            scale var(--spring-smooth-duration) var(--spring-smooth);
+    }
+
+    .btn-pill > * {
+        @apply flex-shrink-0;
+    }
+
+
+    .btn-pill:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    /* ── Glass-button backdrop ─────────────────────────────────────────────
+       AX.W52 — the `glass`/`glass-wash` Button variants compose `.glass-wash`,
+       which resolves `--glass-blur-wash` = `blur(1px)` — a sub-perceptual
+       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). */
+    .btn-glass {
+        backdrop-filter: var(--glass-blur-btn);
+    }
+
+    /* ── 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);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+            color-mix(in srgb, var(--destructive) 35%, transparent);
+    }
+
+    /* 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);
+    }
+
+    /* ── 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);
+        background: var(--glass-bg-floating);
+        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);
+        }
+    }
+}