@mkbabb/glass-ui 4.0.1 → 4.2.0

package/src/styles/drawer.css

@@ -26,6 +26,46 @@
     initial-value: 1;
 }
 
+/* BD.W-OVERLAY-STAGE-COUPLE — `--stage-t`, the ONE registered STAGING scalar (0 =
+ * closed/un-staged → 1 = fully staged). The whole modal band rides this ONE knob:
+ * the drawer's surface FREEZE (A), the scrim DEEPEN (B), the page RECEDE+SCALE (C),
+ * the opt-in blur ENGAGE (D) are all pure `calc()` reads OF it. `inherits: true` so
+ * a single writer at `:root` reaches the portaled scrim AND the page-wrapper sibling
+ * AND the sheet descendants from ONE write (the scrim is NOT a descendant of the
+ * content, so a content-local mirror could never reach it — the `:root` write is the
+ * cross-subtree path).
+ *
+ * THE SINGLE WRITER (fold C1·R2 — no dual scalar desync). `useDrawerSnap.writeScalar`
+ * writes BOTH `--glass-drawer-t` (the sheet's per-element translate) AND `--stage-t`
+ * (the scene scalar at `:root`) in the SAME call — atomically, never separately, so
+ * the two can never desync on a drag-cancel / fling-overshoot / interrupted snap. A
+ * plain modal (Dialog/Command) flips `--stage-t` 0→1 on `--spring-snappy` at open;
+ * the close-write removes the inline value so the registered property reverts to its
+ * `initial-value: 0` (the stale-latch fix). `initial-value: 0` so an un-staged page never
+ * recedes. EVERY consumer `clamp(0, …, 1)`-bounds it (a `--ease-cartoon-punch` fling
+ * can overshoot >1 — the page-scale / radius / scrim must not run past their
+ * endpoints). */
+@property --stage-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
+/* The stage-t transition + close-write reset (the registered-property stale-latch
+ * fix, fold C3·R7).
+ *
+ * The drawer's single writer (useDrawerSnap) drives `--stage-t` per frame and
+ * REMOVES the inline value on close → the registered property reverts to its
+ * `initial-value: 0`. The centered modal (DialogContent) flips it 0→1 on open via the
+ * `data-stage-flip` marker on `:root`; this rule owns the FLIP TRANSITION (a snappy
+ * spring) so the dialog's `:root --stage-t` value glides 0→1 rather than snapping — a
+ * CSS-owned transition, NOT an inline `transition` shorthand on `:root` (which would
+ * clobber unrelated root transitions). On close the marker is dropped and the inline
+ * value removed → the property reverts to 0 (no stale full-staged latch on re-open). */
+:root[data-stage-flip] {
+    transition: --stage-t var(--spring-snappy-duration, 0.4s) var(--spring-snappy, ease);
+}
+
 :root {
     /* Detent grammar knobs — overridable per-consumer */
     --drawer-handle-w: 2.25rem;
@@ -131,6 +171,80 @@
     margin-top: 0;
 }
 
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (A): the surface FREEZE, composed AT THE
+ * ELEMENT. A detented sheet is SEE-THROUGH at peek/half (the page bleeds) and
+ * SOLIDIFIES toward a warm-tinted card at full (page does not bleed, blur → 0). This
+ * is the iOS-27 bottom-sheet crown the live α-0.95-at-every-detent flattened.
+ *
+ * A TWO-SEGMENT lerp on the ONE `--stage-t` knob (the self-standing crown — the wave
+ * owns BOTH endpoints so it does not block on BE.W-SHEET-TRANSLUCENT, fold C3·R1):
+ *   • DESCENT  t ∈ [0, 0.85] — the transmissive crown sinks `--glass-bg-overlay` α
+ *     toward the shipped see-through `--glass-bg-sheet` floor (`--glass-opacity-sheet:
+ *     0.74`). At peek/half the page bleeds through.
+ *   • SOLIDIFY t ∈ [0.85, 1] — `--sheet-freeze` lerps the descended plate toward a
+ *     WARM-TINTED card-mix (NOT bare `--card` — the gray-at-full carve hole, fold
+ *     C1·R4); `backdrop-filter` blur decays to 0 (a solid plate has no backdrop to
+ *     bend — a Safari win, no wasted sample behind an opaque plate).
+ *
+ * Composed AT THE ELEMENT (the `[data-surface=opaque]` substitution-safe path) via
+ * element-level `color-mix` — NEVER an ancestor `filter` (which would clobber the
+ * sheet's own backdrop-filter, the dock-hub goo-tear lesson, §7). `--stage-t` reads
+ * the `:root` scalar the single writer drives (mirrored from `--glass-drawer-t`).
+ */
+.glass-drawer[data-glass-drawer-snap-points="true"] {
+    /* the DESCENT fraction — 0 at closed → 1 at the commit floor (t=0.85). */
+    --sheet-descent: clamp(0, calc(var(--stage-t) / 0.85), 1);
+    /* the SOLIDIFY fraction — 0 below the commit floor → 1 at full (t=1). */
+    --sheet-freeze: clamp(0, calc((var(--stage-t) - 0.85) / 0.15), 1);
+    /* the transmissive crown plate: the warm overlay fill sunk toward the shipped
+       see-through `--glass-bg-sheet` floor across the descent. */
+    --sheet-crown: color-mix(
+        in oklab,
+        color-mix(
+            in oklab,
+            var(--glass-bg-overlay),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        ),
+        var(--glass-bg-sheet) calc(var(--sheet-descent) * 100%)
+    );
+    /* the warm-tinted SOLID escape (fold C1·R4 — a warm card-mix toward the EXPLICIT
+       warm `--glass-capsule-warm` amber, NEVER bare `--card` and NEVER the
+       `--glass-tint-source` alias which resolves back to `--card` and would be a
+       no-op warm; build-trap-(d) safe — a warm oklch color, never bare `transparent`).
+       At the shared 16% warm floor a dark full sheet stays C ≥ 0.02 warm — no
+       charcoal holiday at full. */
+    --sheet-solid: color-mix(
+        in oklab,
+        var(--card),
+        var(--glass-capsule-warm) var(--glass-capsule-warm-floor, 16%)
+    );
+    background: color-mix(
+        in oklab,
+        var(--sheet-crown),
+        var(--sheet-solid) calc(var(--sheet-freeze) * 100%)
+    );
+    backdrop-filter: blur(
+            calc(var(--glass-blur-overlay-radius, 20px) * (1 - var(--sheet-freeze)))
+        )
+        saturate(1.6);
+    -webkit-backdrop-filter: blur(
+            calc(var(--glass-blur-overlay-radius, 20px) * (1 - var(--sheet-freeze)))
+        )
+        saturate(1.6);
+}
+
+/* The `surface=opaque` explicit escape still wins (it sets the solid plate
+   unconditionally regardless of detent) — the freeze is the DEFAULT glass crown; the
+   opt-out plate is the consumer's hard override. Source order keeps the opaque rule
+   (declared above) — re-assert it here so it beats the snap-points freeze at equal
+   specificity for a detented opaque sheet. */
+.glass-drawer[data-glass-drawer-snap-points="true"][data-surface="opaque"] {
+    background: color-mix(in srgb, var(--card), transparent 0%);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
 /* Direction variants — the content root tags itself with the drag axis
    (`data-glass-drawer-direction`). Bottom is the default; the others ride the same
    surface so a top/side sheet inherits the grammar. The side-lens (left/right) is
@@ -222,6 +336,56 @@
     background-color: var(--drawer-snap-rule-color);
 }
 
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (B): the scrim DEEPEN. The scrim α tracks
+ * `--stage-t` so a peek drawer barely dims and a full drawer commits hard (the live
+ * fixed-α-0.8 at every detent is the born-RED). Reuses the SHIPPED warm
+ * `--overlay-scrim-ink` (the F7 warm near-black, never flat black), now t-coupled.
+ * `clamp(0,…,1)` bounds the fling overshoot. The scrim element gains
+ * `[data-stage-scrim]` (DrawerOverlay.vue) and reads the inherited `:root` scalar.
+ */
+[data-stage-scrim] {
+    background: color-mix(
+        in srgb,
+        var(--overlay-scrim-ink)
+            calc((0.28 + clamp(0, var(--stage-t), 1) * 0.44) * 100%),
+        transparent
+    );
+}
+
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (C): the page RECEDE + SCALE. The page wrapper
+ * scales `1 → 0.95` + corner-radius blooms as `--stage-t → 1` (the iOS "card recedes"
+ * depth cue), retiring the dead `shouldScaleBackground` boolean. `scale` +
+ * `border-radius` ONLY — NO `filter` (the ancestor-filter trap: `filter` on the app
+ * root establishes a containing block for `position:fixed` and force-rasterizes the
+ * page subtree every frame — fold C2·R1; §7). The wrapper is the consumer's app-root
+ * marker (`demo/App.vue` mounts `[data-stage-wrapper]`); when the honest
+ * `stage="none|dim"` enum is set the marker carries no `--stage-t` drive (or the
+ * `data-stage-scale` gate is absent) so (C) is a real no-op, never a lie. Under PRM
+ * `stage="scale"` degrades to `dim` at the SFC (no `data-stage-scale` attr) so the
+ * page never transforms (fold C1·R6) — this rule only fires when the scale gate is on.
+ */
+[data-stage-wrapper][data-stage-scale] {
+    scale: calc(1 - 0.05 * clamp(0, var(--stage-t), 1));
+    border-radius: calc(var(--radius-panel) * clamp(0, var(--stage-t), 1));
+    transform-origin: 50% 0; /* recede toward the top, iOS */
+    overflow: clip;
+}
+
+/*
+ * BD.W-OVERLAY-STAGE-COUPLE — coupling (D): the blur ENGAGE (opt-in `immersive`, the
+ * Command spotlight). The scrim's `backdrop-filter` radius ramps `0 → deep` on
+ * `--stage-t`. ONE-SHOT over the open window (gated to the modal-flip 0→1 via
+ * `[data-stage-immersive]`, NEVER the drawer's per-frame scalar — the §L7 Safari
+ * fence: a per-frame full-viewport re-blur is the cardinal sin, fold C2·R). WebKit
+ * pays the sample once as the flip lands. Default OFF.
+ */
+[data-stage-scrim][data-stage-immersive] {
+    backdrop-filter: blur(calc(clamp(0, var(--stage-t), 1) * 16px));
+    -webkit-backdrop-filter: blur(calc(clamp(0, var(--stage-t), 1) * 16px));
+}
+
 /* Reduced-motion — the house `SpringProgress` snaps the detent deterministically
    under `prefers-reduced-motion: reduce` (its `respectReducedMotion` jumps the
    `--glass-drawer-t` scalar to target in one frame, zero motion frames); here we

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

@@ -0,0 +1,66 @@
+/* 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

@@ -0,0 +1,167 @@
+/* glass/control-surfaces.css
+   The form-control REST register carved from glass/surfaces.css — the
+   `.input-pill` family (Input/Textarea/NumberField), the shared `.control-surface`
+   class (Select default + TagsInput), the validity vocabulary, and the Select
+   trigger resting-border lift. A cohesive sub-concern of surfaces.css (the
+   no-god-module re-drain), @import-ed by glass.css in cascade order IMMEDIATELY
+   AFTER surfaces.css and BEFORE surface-axis.css — same `@layer components`, same
+   source order, so the carve is byte-isomorphic.
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+@layer components {
+    /* ── Pill input ───────────────────────────────── */
+    .input-pill {
+        @apply flex w-full;
+
+        /* AX.W51 D18 — the input pill rides the ONE `--ui-scale` comfort axis: the
+           height reads the `--control-h-md` cohort (`max(calc(2.5rem * --ui-scale),
+           --control-floor)`, the h-10 register with the WCAG-44px coarse clamp), the
+           font reads `--control-text`, the inline padding scales — so ONE override
+           grows the field's height + padding + font in lockstep. Desktop default is
+           the identity. */
+        /* BC.W-CONTROL-CUSTOM — the height reads the `--control-pill-h` element-
+           override seam, DEFAULTING to the cohort `--control-h-md` so a bare
+           control is byte-identical to HEAD. The shared `controlSizeClass(size)`
+           (_shared/useControlSize.ts) re-points the seam per rung
+           (sm→`--control-h-sm`, lg→`--control-h-lg`), so the `size` prop retunes
+           the field height WITHOUT a recipe fork — ONE substitution rung, the
+           cohort is still the source. */
+        height: var(--control-pill-h, var(--control-h-md));
+        border-radius: var(--radius-pill);
+        /* AW.W13 — the resting field edge reads as an enclosed control at rest
+           (~15%α — ~2× the prior 8% glass-wash floor that vanished on cream). The
+           `:focus-visible` accent ring + the `:user-invalid`/`[aria-invalid]`
+           destructive ring below still win by order + specificity.
+           AX.W54 — moved off the srgb `--surface-tint-15` fork onto the glass
+           border seam so the pill is ONE glass model with the rest of the ladder.
+           BA.W-SURFACE-AXIS scope 7 — re-pointed onto the SHARED `--control-surface-*`
+           REST register so Input/Textarea/NumberField/Select/Combobox/TagsInput are
+           ONE material at rest (the input rung was the warmer of the two; Select rode
+           the `glass-wash` gray — the no-gray control-family seam). The register reads
+           the same `--glass-*` ladder, so `--glass-level`/the W55 bright bucket retune
+           the whole form family in lockstep (--control-surface-border defaults to the
+           `--glass-border-floating` 15%α rung, --control-surface-bg to `--glass-bg-quiet`,
+           --control-surface-blur to `--glass-blur-quiet`). */
+        border: 1.5px solid var(--control-surface-border);
+        background: var(--control-surface-bg);
+        /* The control's REAL glass blur — the shared register's quiet-tier radius
+           (the same `--control-surface-blur` pairs with `--control-surface-bg`); the
+           `--glass-level` knob clarifies it in lockstep with every surface. */
+        backdrop-filter: var(--control-surface-blur);
+        padding: 0 calc(1rem * var(--ui-scale));
+        /* BC.W-CONTROL-CUSTOM — the font reads the `--control-pill-text` seam,
+           DEFAULTING to `--control-text` (byte-identical at unset). The `sm` rung
+           re-points it to `--control-text-sm` (the quieter register); `default`/`lg`
+           keep `--control-text`. This is the C1 close — the input register reads
+           `--control-text` via the recipe, NOT a bare `text-sm` literal. */
+        font-size: var(--control-pill-text, var(--control-text));
+        color: var(--foreground);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    .input-pill::placeholder {
+        color: var(--surface-tint-35);
+    }
+
+    /* BA.W-SURFACE-AXIS scope 7 — the shared control REST surface class. The
+       NON-pill control families (the Select trigger, the TagsInput root) that do
+       NOT compose `.input-pill` but want the SAME resting material read this — so
+       the whole form band is ONE register at rest (the Select default rode the
+       lighter `glass-wash` gray before; this is the no-gray control-family seam).
+       It carries the bg/border/blur ONLY (each control owns its own height/radius/
+       padding/font), so a non-pill control composes `.control-surface` + its own
+       geometry. The hover lift brightens the fill one step toward the resting rung. */
+    .control-surface {
+        background: var(--control-surface-bg);
+        border: 1px solid var(--control-surface-border);
+        backdrop-filter: var(--control-surface-blur);
+        -webkit-backdrop-filter: var(--control-surface-blur);
+    }
+    .control-surface:hover:not(:disabled, [data-disabled]) {
+        background: var(--control-surface-bg-hover);
+    }
+
+    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
+       accent ring on a mouse click); `:focus-visible` matches the
+       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
+       the `:user-invalid` rungs so an invalid focused field shows destructive,
+       not accent (the `:user-invalid:focus-visible` rule below wins by order +
+       specificity). `:focus-visible` Baseline Widely — no fallback. */
+    .input-pill:focus-visible {
+        outline: none;
+        border-color: var(--color-accent-opaque, var(--ring));
+        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
+    }
+
+    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
+       The forgiving `:where(:user-invalid, .user-invalid-fallback,
+       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
+       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
+       fallback class for engines without `:user-invalid` (css §3.2; NOT a
+       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
+       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
+       serves APP-DRIVEN validity — a custom key match, an async server check —
+       where there is no native constraint to trip `:user-invalid`, so the app
+       sets the ARIA attribute and the library's own ring paints with no
+       `:deep()` re-paint at the consumer. The destructive/success tints reuse
+       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
+       asterisk — the border/bg shift is the supplementary cue, never the sole
+       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
+       a long valid form is not a wall of green. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
+        border-color: var(--destructive);
+        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
+    }
+    .input-pill:where(:user-valid, .user-valid-fallback) {
+        border-color: var(--success);
+    }
+    /* Invalid + keyboard-focused → destructive ring (overrides the accent
+       `:focus-visible` ring above by order + the extra invalid compound). The
+       `[aria-invalid]` arm rides the same widened group so an app-driven
+       invalid field shows the destructive ring on focus too. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
+        border-color: var(--destructive);
+        /* BB.W-INVALID-RING — the shared destructive ring register (the
+           --focus-ring-shadow sibling). The byte-identical recipe is now ONE
+           token; the `8%` at-rest bg arm above stays `.input-pill`-local (a
+           glass-tint substrate the bare-ring surfaces do not carry). */
+        box-shadow: var(--invalid-ring);
+    }
+
+    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
+       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
+       content between a 3-line floor and a token-driven ceiling, then scrolls.
+       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
+       engine the declaration is ignored and the element keeps the
+       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
+       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
+       the unchanged no-op fallback. */
+    .input-pill[data-autosize] {
+        field-sizing: content;
+        width: 100%;
+        min-block-size: 3lh;
+        max-block-size: var(--textarea-autosize-max, 12lh);
+        resize: vertical;
+    }
+
+    .input-pill:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* AW.W13 — the Select trigger mirrors the input pill's resting border lift.
+       The reka-ui SelectTrigger renders `role="combobox"` over the `.glass-wash`
+       surface; its 8%α `--glass-border-wash` field edge vanished on cream just
+       like the input pill, so the same `--surface-tint-15` lift makes the
+       trigger read as an enclosed control at rest. Scoped to the combobox role
+       so the lift reaches ONLY the Select trigger, not every `.glass-wash`
+       surface. */
+    .glass-wash[role="combobox"] {
+        border-color: var(--surface-tint-15);
+    }
+}

package/src/styles/glass/glass-atom.css

@@ -0,0 +1,244 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .glass-atom — BD.W-GLASS-ATOM-REGISTER: the ONE shared warm-glass register
+   the four small atoms (Badge-glass · metric-badge · slider fill · the `+N`
+   chip) consume in two registers (loud opaque identity vs quiet transmissive
+   glass).
+
+   CONSUME-ONLY — declares ZERO own glass tokens (the no-fork fence, Fence 1).
+   It COMPOSES:
+     · `.glass-capsule`        — the warm-transmissive lozenge BODY (warm floor +
+                                 rim + lift). `.glass-atom` is a PEER of any
+                                 sized chip, NEVER `.glass-chip` itself (Fence 2):
+                                 both compose `.glass-capsule`. A consumer applies
+                                 BOTH classes (`class="glass-capsule glass-atom"`)
+                                 or composes the capsule body via the glass tier
+                                 the host already wears.
+     · `--glass-fill-tint` / `--glass-fill-strength` (BE.W-TINTED-CHIP, glass.css)
+                                 — the per-instance plate-fill data hue. The atom
+                                 is its ≥Nth consumer; it APPLIES the axis on the
+                                 quiet register, never re-mints a tint.
+     · `--glass-material-rim`  — the keyed directional rim (the defined edge), the
+                                 SHIPPED two-stop rim re-pointed by `--glass-key`.
+     · the inert `.cartoon-cast` child + `--cartoon-ink` / `--shadow-cartoon-*`
+                                 (BD.W-CARTOON-CASTER / -CEL-INK) — the warm cel
+                                 stamp; the loud register intensifies on `data-cast`.
+     · `--motion-weight` × `--ease-cartoon-punch` (BD.W-MOTION-WEIGHT /
+                                 -CARTOON-PUNCH) — the non-uniform press squash +
+                                 the weight-coupled smear/settle.
+
+   @layer components, @import-ed by icon-chip.css (in-lane) AFTER glass.css (so
+   `.glass-capsule` + the `--glass-*` axes resolve) and BEFORE the consuming
+   recipes. Every channel is compositor-only + Safari-native (no
+   `backdrop-filter: url()`, no goo — Fence 8). The warm 0-alpha sources are
+   explicit `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit
+   black-premultiply hole, build-trap-(d)).
+   ════════════════════════════════════════════════════════════════════════ */
+
+@layer components {
+    /* ── The warm idle floor (the #2 dormant-tint cure) ──
+       The atom carries chroma BEFORE any field paints + on a dead ground. The
+       floor is NON-self-referential (build-trap-(b): a property reading ITSELF in
+       its own `max()` resolves to guaranteed-invalid and the term drops). A
+       SEPARATE input var is the source: a consumer (the accent ramp) writes
+       `--accent-fill-strength-in`, and the resolved fill strength floors at
+       `--atom-tint-floor` — PLAIN per-mode (12% light / 15% dark), NEVER
+       `light-dark()` (the inset-shadow trap). */
+    .glass-atom {
+        --atom-tint-floor: 12%;
+        --accent-fill-strength: max(
+            var(--accent-fill-strength-in, 0%),
+            var(--atom-tint-floor)
+        );
+        /* The quiet register's tint application — the plate body mixes toward the
+           per-instance data hue ON TOP of the capsule's warm composite. At the
+           `@property` defaults (`--glass-fill-tint: transparent` / strength 0%)
+           this is the byte-identical no-op floor; the warm floor above keeps the
+           idle body warm even at a transparent tint. The mix is `in oklab` (the
+           perceptual glass-tint family — NOT the in-srgb brand fence). */
+        --glass-atom-tinted: color-mix(
+            in oklab,
+            var(--glass-capsule-warm) calc(var(--atom-tint-floor) + var(--glass-fill-strength)),
+            oklch(0.9 0.05 75 / 0)
+        );
+        /* The motion register — the press/hover deform rides
+           `--motion-weight × --ease-cartoon-punch`. The atom inherits the rest
+           `--motion-weight: 0.618`; the loud register (`data-cast`, below) pushes
+           it to 1 so the punch is never muted (the loud-register coupling). The
+           SPATIAL legs (scale/translate) settle on the punch clock; the EFFECTS
+           legs (background/box-shadow) stay on the bezier (motion-canon P1). */
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            scale var(--duration-normal) var(--ease-cartoon-punch),
+            translate var(--duration-normal) var(--ease-cartoon-punch);
+    }
+    .dark .glass-atom {
+        --atom-tint-floor: 15%;
+    }
+
+    /* ── The non-uniform PRESS squash (the punch, NOT a shrink) ──
+       Widen X, compress Y (`scale: 1.04 0.94`) — real squash & stretch. The
+       `:active` is the no-JS floor; a consumer's `useLiquidPress` may drive a
+       continuous ramp via `--cartoon-press-t` (the caster reads it). The
+       `border-radius` is the pill, so under non-uniform scale the end-caps track
+       the scaled box (challenge #2 R4 — the capsule radius stays circle-tolerant). */
+    .glass-atom:active:not([data-disabled]):not(:disabled) {
+        scale: 1.04 0.94;
+    }
+
+    /* ── The cel cast — UNIVERSAL-but-GRADED (challenge #1 R5 / #3 R5) ──
+       Every atom carries a hairline warm rim-cast at rest (the family floor); the
+       loud flagships (`data-cast`) INTENSIFY to the loud layered-offset stamp.
+       The cast rides the inert `.cartoon-cast` child (BD.W-CARTOON-CASTER) — the
+       child carries `--shadow-cartoon-md` at rest and moves on `translate`/`scale`
+       only; here the atom only RE-POINTS the loud register's resting/hover rung
+       (it does not re-author the caster). The loud register pushes
+       `--motion-weight: 1` so the punch reads at full amplitude. */
+    .glass-atom[data-cast] {
+        --motion-weight: 1;
+    }
+    .glass-atom[data-cast] .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-sm);
+    }
+    @media (hover: hover) {
+        .glass-atom[data-cast]:hover:not(:active) .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-md);
+        }
+    }
+
+    /* ── The QUIET register (`[data-surface="glass"]`) — the transmissive tint ──
+       The quiet capsule applies the per-instance fill tint over the warm floor.
+       This is where the warm-not-gray read is won (badge-glass, the `+N` chip).
+       The body composes `.glass-capsule` (the consumer applies both classes); the
+       atom only LAYERS the tinted fill on top of the capsule's warm composite via
+       `background-image` (a later layer over the capsule's `background:` shorthand
+       — the proven `.paper-grid` coexistence seam, paints OVER the translucent
+       fill, UNDER content). The 0-alpha stop is warm `oklch(… / 0)`, never bare
+       `transparent` (challenge #1 R4 / #2 R4 — the WebKit desaturation fix). */
+    .glass-atom[data-surface="glass"] {
+        background-image: linear-gradient(
+            var(--glass-atom-tinted),
+            var(--glass-atom-tinted)
+        );
+    }
+
+    /* ── PRM/PRT carve ──
+       Under reduced-motion `--motion-weight: 0` zeroes the squash + the cast
+       travel/lag in ONE assignment (every `calc(… * --motion-weight)` in the
+       caster collapses to rest); the press scale collapses to 1. The warm tint +
+       the rim + the STATIC cel STAMP persist (a still frame, never a frozen
+       mid-animation — the legibility floor). */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-atom {
+            --motion-weight: 0;
+        }
+        .glass-atom:active:not([data-disabled]):not(:disabled) {
+            scale: 1;
+        }
+    }
+
+    /* ── prefers-contrast: more — the rim α floors UP (WCAG 1.4.11 non-text) ──
+       The keyed rim is the legibility CONTRACT (the cast is a supplement,
+       challenge #2 R6). Under more-contrast the atom floors its border ink so the
+       lit edge clears ≥3:1 vs the OPAQUE body, not only the glass body. */
+    @media (prefers-contrast: more) {
+        .glass-atom {
+            border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
+        }
+    }
+
+    /* ════════════════════════════════════════════════════════════════════════
+       .badge-atom — the Badge consumer of the register (loud + quiet).
+
+       The LOUD register (the default opaque identity pill): the family signature
+       WITHOUT the glass body — the keyed warm rim (the defined edge, the
+       `border-transparent` melt fix), the non-uniform press-squish, the
+       universal-but-graded cel. The badge applies `.badge-atom` on EVERY variant
+       (the CVA base); `surface="glass"` ALSO applies `.glass-capsule .glass-atom`
+       for the quiet transmissive body.
+       ════════════════════════════════════════════════════════════════════════ */
+    .badge-atom {
+        position: relative;
+        /* AQ.W3 identity base — `scale`/`translate` longhands mint the stacking
+           context once so the press squash + the cast child compose cleanly. */
+        scale: 1;
+        translate: 0;
+        /* The DEFINED EDGE — the SHIPPED keyed two-stop rim (re-pointed by
+           `--glass-key`) as the pill's silhouette, so a sand `secondary` no longer
+           melts into a cream panel (the live `border-transparent` melt). It is a
+           box-shadow rim, NOT a `border` (the base CVA retired the `border`
+           keyword), so it adds zero layout box + reads warm. The press/lift scale
+           rides the punch register `× --motion-weight`. */
+        box-shadow: var(--glass-material-rim);
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            scale var(--duration-normal) var(--ease-cartoon-punch),
+            translate var(--duration-normal) var(--ease-cartoon-punch);
+    }
+
+    /* The non-uniform PRESS squash (widen X, compress Y — NOT a uniform shrink). */
+    .badge-atom:active:not([data-disabled]):not([aria-disabled='true']) {
+        scale: 1.04 0.94;
+    }
+
+    /* `outline` variant — the rim reads a louder warm-ink edge (it IS the edge). */
+    .badge-atom--outline {
+        box-shadow: var(--glass-material-rim);
+        border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+    }
+
+    /* The LOUD cel stamp (opt-in, `data-cast`) — pushes the weight to 1 so the
+       punch reads at full amplitude + intensifies the inert child's cast. The
+       hairline rim-cast family floor is the rim above; this is the LOUD layered
+       offset (the flagship sticker stamp). */
+    .badge-atom[data-cast] {
+        --motion-weight: 1;
+    }
+    .badge-atom[data-cast] .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-sm);
+    }
+    @media (hover: hover) {
+        .badge-atom[data-cast]:hover:not(:active) .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-md);
+        }
+    }
+
+    /* The QUIET glass register — retire the opaque `bg-*` plate so the warm-glass
+       `.glass-capsule` body + the `.glass-atom` tinted `background-image` paint the
+       surface (no double-fill). The variant `bg-*` utility sets `background-color`;
+       this resets it to transparent so the capsule fill + the data-hue tint win.
+       The text color (the variant's `text-*`) is kept — the label still reads. */
+    .badge-atom--glass {
+        background-color: transparent !important;
+        /* The quiet capsule tints toward the variant's SEMANTIC hue via the shared
+           `--glass-fill-tint` axis (BE.W-TINTED-CHIP) — colored glass, never a
+           forked tint. The strength is a calm stop (the body ink stays legible).
+           A consumer overrides `--glass-fill-tint` per-instance for a bespoke hue. */
+        --glass-fill-strength: var(--badge-glass-strength, 16%);
+    }
+    /* Per-variant glass tint — the data hue the quiet body mixes toward. The
+       semantic plate token becomes the tint source (the loud fill demoted to a
+       transmissive hue). `secondary`/`outline` are the calm/neutral routes. */
+    .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); }
+    .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); }
+    .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); }
+    .badge-atom--glass[data-variant='destructive'] { --glass-fill-tint: var(--destructive); }
+    .badge-atom--glass[data-variant='success'] { --glass-fill-tint: var(--success); }
+    .badge-atom--glass[data-variant='warning'] { --glass-fill-tint: var(--warning); }
+    .badge-atom--glass[data-variant='info'] { --glass-fill-tint: var(--info); }
+
+    @media (prefers-reduced-motion: reduce) {
+        .badge-atom {
+            --motion-weight: 0;
+        }
+        .badge-atom:active:not([data-disabled]) {
+            scale: 1;
+        }
+    }
+    @media (prefers-contrast: more) {
+        .badge-atom {
+            border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent);
+        }
+    }
+}