@mkbabb/glass-ui 4.2.0 → 5.0.0

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

@@ -1,245 +1 @@
-/* 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);
-    }
-}
-
-/* ── 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;
-    }
-}
-
-/* ── @supports fallbacks for non-backdrop-filter browsers ── */
-@layer components {
-    /* GUARD 1 — the NO-BLUR-AT-ALL engine (supports NEITHER the unprefixed NOR the
-       webkit form): paint an opaque-leaning plate so text stays legible without any
-       blur. AY.W-A11Y-PERF O-2b note: this is the floor for the theoretical
-       neither-supported case. The Safari ≤17 webkit-only trap (supports the `-webkit-`
-       form, so this `@supports not (… or …)` is FALSE and the fallback does NOT fire)
-       is closed at the SOURCE OF THE PREFIX: O-2a's build pass guarantees the shipped
-       dist carries the `-webkit-backdrop-filter:` pair, so a Safari-17 engine renders
-       the BLUR off the prefixed rule (it no longer falls through to a transparent
-       unprefixed-only surface). The trap closes where the prefix is emitted, not here. */
-    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-        .glass-wash {
-            background: color-mix(in srgb, var(--card) 80%, transparent);
-        }
-        .glass-quiet {
-            background: color-mix(in srgb, var(--card) 88%, transparent);
-        }
-        .glass-resting {
-            background: color-mix(in srgb, var(--card) 94%, transparent);
-        }
-        .glass-floating {
-            background: color-mix(in srgb, var(--card) 98%, transparent);
-        }
-        .glass-overlay {
-            background: var(--card);
-        }
-        .glass-btn {
-            background: color-mix(in srgb, var(--background) 92%, transparent);
-        }
-    }
-
-    /* GUARD 2 — the WEBKIT-ONLY engine (supports `-webkit-backdrop-filter` but NOT the
-       unprefixed `backdrop-filter` — Safari ≤17). With O-2a's build-emitted prefix the
-       shipped rung carries the `-webkit-backdrop-filter:` pair, so this engine PAINTS
-       the blur off that prefixed declaration. This guard exists to DOCUMENT-and-confirm
-       that path (and would re-assert the translucent glass identity if a future change
-       ever stripped the rung bg under this engine) — it re-states the rungs' translucent
-       glass-mix so a webkit-only engine that DID get the prefix keeps the glass look,
-       never the opaque GUARD-1 plate. The `proof:webkit-backdrop` gate asserts the
-       shipped dist carries BOTH guards. */
-    @supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))) {
-        .glass-wash {
-            background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-quiet {
-            background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-resting {
-            background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-floating {
-            background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-overlay {
-            background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
-        }
-        .glass-btn {
-            background: var(--glass-bg-wash);
-        }
-    }
-}
-
-/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
-   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
-   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
-   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
-   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
-   override values have one source. NOT a live+dead alias — `:has()` is the
-   enhancement, this the documented degradation path. */
-@supports not selector(:has(*)) {
-    .glass-card.is-focus-within {
-        --card-focus-shadow: var(--shadow-md);
-        --card-focus-border: var(--glass-border-floating);
-    }
-}
+@media (prefers-reduced-transparency: reduce) { :root { --glass-level: 0; --glass-grain-opacity: 0; --glass-highlight: 0 0 0 0 transparent; } } @media (prefers-contrast: more) { :root { --glass-level: 0.3; --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --glass-definition: 1; } } @media (forced-colors: active) { :root { --glass-level: 0; --glass-grain-opacity: 0; --glass-highlight: 0 0 0 0 transparent; } .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-drawer { border: 1px solid CanvasText; } .glass-floating, .glass-overlay, .glass-drawer { background: Canvas; } .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; } .status-dot__dot { border: 1px solid CanvasText; } .status-dot__fill, .status-dot__pulse { display: none; } .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; } }

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

@@ -1,66 +1 @@
-/* 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));
-    }
-}
+@layer components { .accent-tone { --accent-fill-strength: 8%; --accent-band-strength: 18%; --accent-edge-strength: 55%; --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) ); --accent-ink: var(--accent-ink-resolved, var(--foreground)); } }

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

@@ -1,167 +1 @@
-/* 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);
-    }
-}
+@layer components { .input-pill { @apply flex w-full; height: var(--control-pill-h, var(--control-h-md)); border-radius: var(--radius-pill); border: 1.5px solid var(--control-surface-border); background: var(--control-surface-bg); backdrop-filter: var(--control-surface-blur); padding: 0 calc(1rem * var(--ui-scale)); 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); } .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); } .input-pill:focus-visible { outline: none; 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)); } .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); } .input-pill:where(:user-invalid, [aria-invalid="true"]):focus-visible { border-color: var(--destructive); box-shadow: var(--invalid-ring); } .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; } .glass-wash[role="combobox"] { border-color: var(--surface-tint-15); } }

package/dist/styles/glass/deep.css

@@ -1,44 +1 @@
-/* glass/deep.css — BB.W-DEEP-GLASS — the OPT-IN `.glass-deep` decoration.
- *
- * The deep-glass register: the maximal iOS-27 Liquid-Glass tier ABOVE the
- * W-GLASS-CAL calm default (the Apple `saturate(1.8) blur(20px)` family, landed
- * at the budget-clearing 16px / saturate 1.5; tokens/glass-deep.css). `.glass-deep`
- * is the OPT-IN surface — a consumer adds it to a glass surface that wants the
- * thick refractive liquid read (the hero glass, the dock, the CTA); the bare
- * content default is UNCHANGED (the calm default is the user's call).
- *
- * ── The token-substitution model (the `.glass-opaque` precedent) ───────────
- * `.glass-deep` is a DECORATION ON a base `.glass-*` rung, NOT a parallel solid/
- * blur recipe. It mirrors `.glass-opaque` (ladder.css §opaque-escape — which only
- * sets `--glass-level: 0`, a token re-point, never a competing `backdrop-filter`):
- * `.glass-deep` re-points the floating-rung blur token to the deep family
- * (`--glass-blur-floating: var(--glass-blur-deep)`), so the base `.glass-floating`
- * rule's `backdrop-filter: var(--glass-blur-floating)` resolves to the DEEP blur —
- * NO cascade fight, NO base-rule edit, the glass edge/rim/under-shadow + the W55
- * tint axis + the a11y brackets all compose unchanged. The deep tier rides a base
- * rung exactly as `.glass-opaque` does (the CardTier map is `deep →
- * 'glass-floating glass-deep'`).
- *
- * Because the deep blur (glass-deep.css) COMPOSES `var(--glass-level)`, the a11y
- * brackets (`prefers-reduced-transparency: reduce` / `prefers-contrast: more` set
- * `--glass-level: 0` / 0.3 at :root, a11y-fallback.css) reach the deep plate for
- * FREE — the deep blur collapses to blur(0) under reduced-transparency through the
- * SAME level path (the opaque escape). The W55 bright-bucket darken reaches the
- * deep surface by construction too: `.glass-deep` is composed WITH `.glass-floating`,
- * which is already in the W55 `@container style(--glass-backdrop: light)` material
- * group (ladder.css) AND self-engages the overlay-band darken — the deep tier
- * inherits the legibility tint with no selector-list edit.
- *
- * @import-ed in glass.css AFTER ladder.css/surfaces.css (the same @layer components,
- * source-order-after so the token re-point lands beside the rung it rides) and
- * BEFORE the a11y @media brackets (which still win by the :root level re-point).
- */
-@layer components {
-    /* The deep decoration: re-point the floating rung's blur token to the deep
-       family. The base `.glass-floating` rule (`backdrop-filter:
-       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
-       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
-    .glass-deep {
-        --glass-blur-floating: var(--glass-blur-deep);
-    }
-}
+@layer components { .glass-deep { --glass-blur-deep-active-radius: calc( ( var(--glass-blur-floating-radius) + (var(--glass-blur-deep-radius) - var(--glass-blur-floating-radius)) * var(--glass-depth) ) * var(--glass-level) ); --glass-saturate-deep-active: calc( var(--glass-saturate-floating) + (var(--glass-saturate-deep) - var(--glass-saturate-floating)) * var(--glass-depth) ); --glass-blur-deep: blur(var(--glass-blur-deep-active-radius)) saturate(var(--glass-saturate-deep-active)); --glass-blur-floating: var(--glass-blur-deep); } :where(.glass-overlay) { --glass-depth: var(--glass-depth-menu); } :where(.glass-floating) { --glass-depth: var(--glass-depth-popover); } :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) { --glass-depth: var(--glass-depth-content); } }

package/dist/styles/glass/defined.css

@@ -0,0 +1 @@
+@layer components { .glass-defined, .btn-glass, .input-pill, .control-surface { --glass-definition: 1; --glass-floor-fill: color-mix( in srgb, var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)), transparent ); --glass-border-defined: color-mix( in srgb, var(--foreground) calc(var(--glass-definition) * 14%), transparent ); background-color: transparent; background-image: linear-gradient( var(--glass-defined-plate, var(--glass-plate-tinted)), var(--glass-defined-plate, var(--glass-plate-tinted)) ), linear-gradient(var(--glass-floor-fill), var(--glass-floor-fill)); border-color: var(--glass-border-defined); } .btn-glass { --glass-defined-plate: var(--glass-fill); } .input-pill, .control-surface { --glass-defined-plate: var(--control-surface-bg); } }