@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/fonts.css

@@ -1,143 +0,0 @@
-/*
- * fonts.css — payload-bearing @font-face declarations (OFL woff2 faces)
- *
- * AM-W1-α (entry-path weight split) — these are the ONLY @font-face rules
- * that carry a font binary. At publish time the build plugin
- * (vite.config.ts → publishStyleAssets) base64-inlines each
- * `url("@mkbabb/glass-ui/fonts/<family>/<face>.woff2")` into a
- * `data:font/woff2;base64,…` URI sourced from `src/fonts/`. That payload
- * is ~99 KB gzipped — over half of the entire `./styles` critical CSS
- * weight.
- *
- * This file is DELIBERATELY NOT `@import`ed by `styles/index.css`. The
- * critical first-paint entry path (`@mkbabb/glass-ui/styles`) therefore no
- * longer carries the font binary. Consumers import the faces once,
- * separately and off the critical path:
- *
- *   @import "@mkbabb/glass-ui/styles";        (critical — no font payload)
- *   @import "@mkbabb/glass-ui/styles/fonts";  (font corpus, loaded once)
- *
- * The calibrated `local()` fallback faces (San Francisco / Segoe UI /
- * Roboto / Arial for the sans; SF Mono / Menlo / … for the mono) carry NO
- * payload and remain in `typography.css` on the critical path — they are
- * what paints during the `font-display: optional`/`swap` window, so they
- * are genuinely first-paint critical. The metric overrides on those
- * fallback faces (Capsize-calibrated; AC.W6b) reference the exact
- * geometry of the faces declared here, so the split is purely a
- * load-order/weight concern: the cascade is identical once both files load.
- *
- * Contract-v2 (docs/precepts/cross-repo-dev-resolution.md §2.1): this file
- * is published into `dist/styles/fonts.css` and is reachable via the
- * `./styles/fonts` exports key → `./dist/styles/fonts.css`. The build
- * plugin walks EVERY `dist/styles/*.css` (not just index's transitive
- * closure), so the inline rewrite applies here exactly as it did when these
- * faces lived in typography.css. No `url()` resolves out of `dist/`.
- *
- * AM-W7-δ separate-files refinement — DEFERRED (base64 KEPT). The W1-close
- * audit proposed de-base64ing THIS file to dist-relative
- * `url("../fonts/<face>.woff2")` (referencing the already-shipped
- * `dist/fonts/*` woff2 via the `./fonts/*` export), so the browser would
- * fetch only the USED faces — unicode-range-deferring the ~35 KB latin-ext
- * pair + gaining per-face HTTP caching. That refinement is STRUCTURALLY
- * BLOCKED by the consumer's font-delivery idiom, verified at AM-W7-δ:
- *
- *   speedtest's W1-α.2 consumer loads this file via a Vite `?url` import
- *   (`import fontsHref from "@mkbabb/glass-ui/styles/fonts?url"`), which
- *   emits fonts.css VERBATIM as a content-hashed asset into the consumer's
- *   OWN `dist/assets/fonts-<hash>.css` and injects it as an async `<link>`.
- *   `?url` does NOT parse the CSS or follow its `url()` refs — so the
- *   referenced woff2 are NEVER copied across the package boundary into the
- *   consumer's dist (confirmed: zero `*.woff2` in speedtest/dist). A
- *   dist-relative `url("../fonts/…")` inside the emitted
- *   `/assets/fonts-<hash>.css` would resolve at runtime to `/fonts/…` on
- *   the CONSUMER's origin, which has no such file → 404 on every face,
- *   broken fonts. (This is the same symlink-realpath axis that defeated
- *   "Option A" for the publisher in vite.config.ts → publishStyleAssets;
- *   the `?url` consumer path inherits it.) The CSP also gates here:
- *   `font-src 'self' data:` admits the `data:` URI but the dist-relative
- *   file would not be present on `'self'`.
- *
- *   Base64 keeps the face request layer entirely self-contained: the woff2
- *   travel INSIDE the emitted CSS, so the async `<link>` is the only
- *   network fetch and it works regardless of how the consumer re-emits the
- *   file. The unicode-range split below is preserved either way — it still
- *   defers latin-ext glyph SHAPING — but with base64 the latin-ext bytes
- *   ship in the (once-cached, off-critical-path) CSS rather than as a lazy
- *   separate request. Working fonts > the marginal lazy-fetch win. Revisit
- *   only if a consumer adopts a delivery that DOES bundle/copy `url()`
- *   targets across the boundary (e.g. a real `@import` of the dist file).
- */
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Plus Jakarta Sans (brand display)
-   ═══════════════════════════════════════════════ */
-
-/* Plus Jakarta Sans — Latin subset (basic Latin + ASCII punctuation +
-   common diacritics). Variable font: a single woff2 covers wght 200..800.
-   `font-display: optional` keeps the LCP off the font-load critical path
-   — combined with the calibrated fallback face in typography.css, the swap
-   is no-shift on geometry and never disrupts paint. */
-@font-face {
-    font-family: "Plus Jakarta Sans";
-    font-style: normal;
-    font-weight: 200 800;
-    font-display: optional;
-    src: url("@mkbabb/glass-ui/fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2") format("woff2");
-    unicode-range:
-        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
-        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Plus Jakarta Sans — Latin-ext subset (extended Latin diacritics, IPA,
-   wider Latin script). Carried because speedtest's ISP-name register
-   may surface non-ASCII Latin (e.g., Spectrum, Frontier, AT&T variants
-   transliterated). Lazy: only loads if a glyph in the range renders. */
-@font-face {
-    font-family: "Plus Jakarta Sans";
-    font-style: normal;
-    font-weight: 200 800;
-    font-display: optional;
-    src: url("@mkbabb/glass-ui/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2") format("woff2");
-    unicode-range:
-        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
-        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Fira Code (canonical mono)
-   ═══════════════════════════════════════════════ */
-
-/* Fira Code — Latin subset (ASCII + ligatures + box-drawing prereqs).
-   Variable font: a single woff2 covers wght 300..700. `font-display:
-   swap` is acceptable here because Fira Code is post-LCP (mono-register
-   admin labels + tabular numerics render below the fold; FOUT is a
-   minor visual blip, not a layout shift since the system mono fallback
-   matches geometry via the calibrated fallback face in typography.css). */
-@font-face {
-    font-family: "Fira Code";
-    font-style: normal;
-    font-weight: 300 700;
-    font-display: swap;
-    src: url("@mkbabb/glass-ui/fonts/fira-code/fira-code-latin.woff2") format("woff2");
-    unicode-range:
-        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
-        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Fira Code — Latin-ext subset. Carried for parity with the sans
-   coverage (admin labels may surface non-ASCII strings on
-   internationalized variants). */
-@font-face {
-    font-family: "Fira Code";
-    font-style: normal;
-    font-weight: 300 700;
-    font-display: swap;
-    src: url("@mkbabb/glass-ui/fonts/fira-code/fira-code-latin-ext.woff2") format("woff2");
-    unicode-range:
-        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
-        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}

package/src/styles/glass/a11y-fallback.css

@@ -1,188 +0,0 @@
-/* glass/a11y-fallback.css
-   The accessibility + capability overrides — @media (prefers-reduced-transparency) / (prefers-contrast: more) / (forced-colors: active), the non-backdrop-filter @layer components fallback, and the :has()-less @supports fallback. LAST in cascade (they override the base ladder).
-   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. */
-/* ── Accessibility: reduced transparency ──────────
-   AX.W54 — the gestalt collapse: ONE `--glass-level: 0` replaces the ten per-rung
-   opacity+blur clobbers. The level-0 path resolves solid `--card` + `blur(0)`
-   through the SAME machinery (the opacity seam → 1, the blur seam → 0), so every
-   glass surface — current and future — flattens with no per-rung enumeration. The
-   grain + highlight kills stay (they sit off the level axis). */
-@media (prefers-reduced-transparency: reduce) {
-    :root {
-        --glass-level: 0;
-        --glass-grain-opacity: 0;
-        --glass-highlight: 0 0 0 0 transparent;
-    }
-}
-
-/* ── Accessibility: high contrast ─────────────────
-   AX.W54 — a single bounded `--glass-level: 0.3` (mostly-solid, not fully flat)
-   replaces the five per-rung opacity clobbers: every rung firms up toward solid
-   for AA while keeping a hint of the glass register. ONE knob, every rung.
-
-   AX.W55 — the Clear↔Tinted user-escape (Apple's iOS-26.2 analog) COORDINATES the
-   two axes here: the OPACITY axis rides W54's `--glass-level` (firm up toward solid)
-   AND the TINT axis biases toward ink — `--glass-tint-source` → the warm-ink +
-   `--glass-tint-strength` → the AA floor, the same darken the automatic bright
-   bucket applies, now reached by the explicit "more contrast" user request. The two
-   axes stay DISTINCT (level = opacity+blur, tint = darken) but share the bracket so
-   a high-contrast user gets BOTH a firmer plate and the ink-tint legibility lift —
-   one coordinated escape, not two parallel forks. */
-@media (prefers-contrast: more) {
-    :root {
-        --glass-level: 0.3;
-        --glass-tint-source: var(--glass-tint-ink);
-        --glass-tint-strength: var(--glass-tint-strength-aa);
-        /* BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — definition is the MID rung of the SAME
-           a11y ladder `--glass-level: 0.3` rides: an explicit "more contrast" request
-           lifts every glass surface to the DEFINED tier library-wide (a read-carrying
-           warm rim + the warm-cream floor), joining the level+tint escape as ONE
-           coordinated bracket, not a third fork. */
-        --glass-definition: 1;
-    }
-}
-
-/* ── Accessibility: forced-colors (Windows High Contrast) glass-language skin ──
-   AX.W36 — when the OS forces a palette (Windows High Contrast), the platform
-   strips the whole decorative glass register: `backdrop-filter` is dropped, the
-   `--glass-*` inset/box-shadow rungs vanish, and every meaning-bearing chroma
-   flattens to one system color. A `.glass-floating` Dialog over a `.glass-resting`
-   Card would read as two borderless transparent rectangles with no edge, and a
-   green-vs-red StatusDot would resolve to one indistinguishable dot. This skin
-   restores the STRUCTURE the glass chrome encoded — it does NOT pin glass-ui's
-   brand colours (no `forced-color-adjust: none`); the chrome is decorative and
-   YIELDS to the user's forced palette (css forced-colors guidance). Only the
-   standard WHC system keywords are used (`Canvas`/`CanvasText`/`Highlight`) — no
-   glass-ui token leaks into the WHC arm.
-
-   COORDINATES WITH W54 — the same `--glass-level: 0` opaque escape the reduced-
-   transparency / high-contrast brackets ride. Setting the ONE clarity knob to 0
-   collapses the `--glass-bg-*` opacity recipe to solid `--card` + `blur(0)` through
-   the SAME machinery (no parallel solid recipe), so the platform sees opaque plates
-   it maps to `Canvas`. The grain + highlight kills match the reduce bracket (they
-   sit off the level axis). The W55 tint axis is moot under WHC (the user's palette
-   supersedes the ink-darken) but harmless — the opaque plate is system-painted. */
-@media (forced-colors: active) {
-    :root {
-        --glass-level: 0;
-        --glass-grain-opacity: 0;
-        --glass-highlight: 0 0 0 0 transparent;
-    }
-
-    /* Every glass-material ladder rung relied on `backdrop-filter` + an inset
-       `box-shadow` rim for its silhouette — both gone under WHC. Restore a real
-       `border` keyed to the system text colour so each tier pane reads as a boxed
-       region. The selector group MIRRORS the ladder definition above (one source,
-       not a hand-rolled re-list) so a future rung added to the material group
-       inherits the WHC edge for free — and any `.glass-material` div picks up the
-       edge with no per-component arm. */
-    .glass-material,
-    .glass-wash,
-    .glass-quiet,
-    .glass-resting,
-    .glass-floating,
-    .glass-overlay,
-    .glass-card,
-    .glass-drawer {
-        border: 1px solid CanvasText;
-    }
-
-    /* The floating + overlay rungs (Dialog / Sheet / Popover / DropdownMenu /
-       HoverCard compose them) + the Drawer (the overlay-band sheet, drawer.css)
-       get the canonical `Canvas` fill so the modal reads as a DISTINCT boxed
-       region OVER the page, not a transparent overlap — the hierarchy survives.
-       The `CanvasText` edge above already draws the box; this opaque fill
-       separates the floating layer from the content beneath it. */
-    .glass-floating,
-    .glass-overlay,
-    .glass-drawer {
-        background: Canvas;
-    }
-
-    /* The decorative specular catch-light (`::before`) + grain overlay (`::after`)
-       paint nothing meaningful once chroma collapses — yield them entirely (the
-       same decorative-chrome cede the `--glass-level: 0` opaque escape performs on
-       the body). They are NOT part of the structure the skin restores. */
-    .glass-material::before,
-    .glass-wash::before,
-    .glass-quiet::before,
-    .glass-resting::before,
-    .glass-floating::before,
-    .glass-overlay::before,
-    .glass-card::before,
-    .glass-drawer::before,
-    .glass-wash::after,
-    .glass-quiet::after,
-    .glass-resting::after,
-    .glass-floating::after,
-    .glass-overlay::after {
-        display: none;
-    }
-
-    /* Meaning-bearing hue identity → a bordered glyph that keeps ok/warn/error
-       distinguishable by a WHC-HONORED system color, NOT a glass-ui hue (which WHC
-       strips to one fill). StatusDot reflects its variant onto `data-status`
-       (StatusDot.vue) and the inner dot carries `.status-dot__dot`; the
-       `role="img"` + `aria-label` accessible name already ships, so this is the
-       VISUAL differentiation only. A bare bordered dot + the per-status fill triplet
-       below means a sighted WHC user can still tell the row apart.
-
-       `!important` IS load-bearing here: StatusDot paints the dot fill via an INLINE
-       `:style="dotStyle"` (`background-color`, specificity 1,0,0,0), which outranks
-       any stylesheet selector AND which forced-colors then `forced-color-adjust:
-       auto`-remaps to a single Canvas-white — collapsing the row to one indistinct
-       dot. The WHC arm must override that inline fill, and inline can only be beaten
-       by `!important`; this is the documented forced-colors degradation path (the
-       arm only activates under WHC). The component keeps its inline hue in normal
-       mode untouched. */
-    .status-dot__dot {
-        border: 1px solid CanvasText;
-        /* The bordered ring alone separates a dot from its surround; the per-status
-           fill below adds the WHC-honored distinction. */
-    }
-    /* The inner painted fill (`.status-dot__fill`, `h-full w-full`) + the pulse ring
-       carry the SAME inline glass-ui hue StatusDot paints — under WHC they cover the
-       outer `.status-dot__dot` glyph with a `forced-color-adjust`-remapped Canvas
-       fill (the row collapses to one white dot even with the outer system color set).
-       Yield them so the outer bordered + system-color glyph is the sole visible dot. */
-    .status-dot__fill,
-    .status-dot__pulse {
-        display: none;
-    }
-    /* The ok/warn/error/idle distinction rides the standard WHC keyword palette:
-         active (ok)   → Highlight   (the affirmative system accent)
-         paused (warn) → Mark        (the marked/attention system color)
-         error         → CanvasText  (a solid filled dot — the strongest weight)
-         idle/custom   → Canvas      (a hollow dot — only the CanvasText ring reads)
-       Each stays distinguishable by the system color the user's palette assigns,
-       never glass-ui chroma. The `!important` beats the component's inline fill. */
-    .status-dot__dot[data-status="active"] {
-        background: Highlight !important;
-    }
-    .status-dot__dot[data-status="paused"] {
-        background: Mark !important;
-    }
-    .status-dot__dot[data-status="error"] {
-        background: CanvasText !important;
-    }
-    .status-dot__dot[data-status="idle"],
-    .status-dot__dot[data-status="custom"] {
-        background: Canvas !important;
-    }
-}
-
-/* ── Legacy backdrop-filter + :has() capability ladders COLLAPSED
-   (BG.NF.2 W-LEGACY-LADDER-COLLAPSE — the NO-MASKING-FALLBACK floor).
-   The former GUARD-1 (no-blur opaque plate) + GUARD-2 (webkit-only glass-mix
-   restatement) `@supports` arms served engines supporting NEITHER form / the
-   webkit-only form (Safari ≤17) — years pre-target (target = current Chrome +
-   current Safari). `backdrop-filter` is Baseline on that set, and the real
-   webkit path is the BUILD-EMITTED `-webkit-backdrop-filter:` prefix pair
-   (`vite.style-assets.ts` O-2a), asserted in the shipped dist by
-   `proof:webkit-backdrop`, NOT a live source-side restatement. The
-   `@supports not selector(:has(*))` `.is-focus-within` arm (AQ.W3) collapsed
-   too — `:has()` is Chrome 105+/Safari 15.4+ AND its `Card.vue` toggler never
-   existed on disk (an orphan behind a lying comment); `.glass-card:has(:focus-
-   visible)` (`glass/surfaces.css`) is the sole focus-elevation mechanism. */

package/src/styles/glass/accent-tone.css

@@ -1,66 +0,0 @@
-/* glass/accent-tone.css
-   BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register.
-
-   ONE `--tone` (a complete `<color>`, default `var(--primary)`) → a coherent,
-   contrast-SAFE four-channel tonal set:
-
-     --accent-fill  idle FILL  — faint but FLOORED (≥3:1 at rest, the load-bearing
-                                 new behavior fourier named: "not just hover/active").
-     --accent-band  active BAND — the bolder selected fill.
-     --accent-edge  active EDGE — the active rim hairline.
-     --accent-ink   label INK  — the contrast-SAFE label colour ON the band, written
-                                 by useAccentTone (the JS half) via value.js
-                                 safeAccentColor; the CSS fallback is the warm ink.
-
-   The mix space is `in oklab` (the perceptual glass-tint family, W55/W-NO-GRAY) —
-   NOT `in srgb` (the `--surface-tint-*` brand-overlay fence, AW.W26). This is the
-   CONTROL tonal-FILL register (the plate background + the contrast-safe ink), a
-   DISTINCT seam from the BB `--glass-accent` glass-RIM axis (decoration on a glass
-   plate) — the two COMPOSE on a chip that is both a glass surface and a tonal
-   control (the rim from `--glass-accent`, the fill from `--accent-tone`); they
-   never fork, never write each other's channels.
-
-   The strength MAGNITUDES are TOKENS a `:root`/scope override retunes (NOT props —
-   the no-over-prop fence, component-customizability §5): `--accent-fill-strength`
-   (idle, the ~6-8% fourier names) / `--accent-band-strength` (active) /
-   `--accent-edge-strength` (rim). The idle floor is the strength default — the
-   8% over the warm-cream `--card` clears ≥3:1; proof:accent-tone A4 measures the
-   resolved idle fill against the surface (a strength that drops it below 3:1 reds).
-
-   @import-ed by glass.css in cascade order IMMEDIATELY AFTER ladder.css (the same
-   @layer components; this is the SOLE writer of the `--accent-*` channels, read at
-   use-time on the chip elements, so the placement is cascade-order-invariant). */
-@layer components {
-    .accent-tone {
-        /* `--surface` is an OPTIONAL consumer-retarget hook (NOT a declared HEAD
-           token) — a consumer sets it on the scope to point the accent at a
-           non-`--card` surface; it defaults to the declared `--card` so the recipe
-           resolves at HEAD with zero consumer wiring. */
-        --accent-fill-strength: 8%;
-        --accent-band-strength: 18%;
-        --accent-edge-strength: 55%;
-
-        /* idle: faint but FLOORED — the resting tint stays ≥3:1 by the strength
-           floor + the perceptual `in oklab` mix (the glass-tint family). */
-        --accent-fill: color-mix(
-            in oklab,
-            var(--surface, var(--card)),
-            var(--tone, var(--primary)) var(--accent-fill-strength)
-        );
-        --accent-band: color-mix(
-            in oklab,
-            var(--surface, var(--card)),
-            var(--tone, var(--primary)) var(--accent-band-strength)
-        );
-        --accent-edge: color-mix(
-            in oklab,
-            transparent,
-            var(--tone, var(--primary)) var(--accent-edge-strength)
-        );
-        /* ink is the contrast-SAFE label colour ON the active band — written by
-           useAccentTone (the JS half) via safeAccentColor onto
-           `--accent-ink-resolved`; the CSS fallback is the warm ink (CSS cannot
-           call value.js at the token tier). */
-        --accent-ink: var(--accent-ink-resolved, var(--foreground));
-    }
-}

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

@@ -1,171 +0,0 @@
-/* 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;
-        /* BG.W-DESHADCN — the focus fallback reads the renamed house
-           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
-        border-color: var(--color-accent-opaque, var(--focus-ring-color));
-        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--focus-ring-color) 30%, transparent));
-    }
-
-    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The `:where(:user-invalid, [aria-invalid="true"])` group is ONE rule
-       covering TWO trigger surfaces: native constraint-validation
-       (`:user-invalid`, Baseline Chrome 119+/Safari 16.5+ on the target set) 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 legacy
-       `.user-invalid-fallback` / `.user-valid-fallback` class members (for
-       engines without `:user-invalid`) were COLLAPSED at BG.NF.2
-       W-LEGACY-LADDER-COLLAPSE — the aria-BRIDGE half of `useUserInvalidAria`
-       KEEPS (a11y, not a ladder). 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, [aria-invalid="true"]) {
-        border-color: var(--destructive);
-        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
-    }
-    .input-pill:where(:user-valid) {
-        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, [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);
-    }
-}