@mkbabb/glass-ui 6.0.0 → 8.0.0

package/src/styles/glass/deep.css

@@ -1,114 +0,0 @@
-/* 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: COMPUTE the deep LERP here (at the consuming element) +
-       re-point the floating rung's blur token to it.
-
-       THE FREEZE-FIX (BG.W-GLASS-DEPTH-TIER — the C18 dual-engine painted dead-knob,
-       2026-07-05). The LERP intermediates read `var(--glass-depth)`, a REGISTERED
-       `@property` (`inherits: true; initial-value: 1`). Per the CSS Properties &
-       Values API a `var()` to a registered custom property inside ANOTHER custom
-       property is eager-substituted with the referenced property's COMPUTED value AT
-       THE DECLARING ELEMENT. So these intermediates MUST be declared HERE (on
-       `.glass-deep`), NOT at `:root` (tokens/glass-deep.css) — at `:root` the tier
-       grade is not yet in scope and `--glass-depth` computes to its `initial-value` 1,
-       freezing the whole calc at the depth-1 endpoint (every deep surface paints the
-       16px / 1.8 ceiling, tier grade inert). The tier map below sets `--glass-depth`
-       per tier ON THE BASE RUNG the `.glass-deep` decoration composes with (same
-       element), so declared here `var(--glass-depth)` resolves to the element's LIVE
-       tier grade and the ladder PAINTS: content ~14px < popover ~15px < menu 16px.
-
-       The composition is IDENTICAL to the retired `:root` form — same endpoints
-       (`--glass-blur-floating-radius` depth-0 floor / `--glass-blur-deep-radius`
-       depth-1 ceiling, `--glass-saturate-floating` / `--glass-saturate-deep`), same
-       `* var(--glass-level)` clarity scale (so the opaque escape + the a11y brackets
-       reach the deep plate through the ONE level path; at `--glass-level: 0` the deep
-       blur resolves blur(0)). Only the DECLARING SELECTOR moved (:root → .glass-deep).
-       The base `.glass-floating` rule (`backdrop-filter: var(--glass-blur-floating)`)
-       then paints the deep blur — the Apple-deep register, opt-in. */
-    .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);
-    }
-
-    /* ── The tier-ladder depth MAP (BG.W-GLASS-DEPTH-TIER) ──────────────────────
-       Map --glass-depth onto the tier ladder so the deep register's thickness
-       tracks surface PROMINENCE by construction: the overlay/menu rungs default a
-       HIGHER depth than the content rungs (menu > popover > button). Each rung sets
-       the ONE --glass-depth scalar from its named grade (tokens/glass-deep.css) — a
-       pure per-rung DEFAULT, NOT a new blur recipe. So a deep surface inherits its
-       tier's depth: a `deep` Card (glass-floating glass-deep) resolves the popover
-       grade (~15px), the hero CTA button (glass-wash btn-glass glass-deep) resolves
-       the content grade (~14px), a deep overlay/modal reaches the full 16px ceiling
-       — thickness tracks prominence by construction, ZERO new machinery.
-
-       D5-SAFE: no rung reads var(--glass-blur-deep) here — --glass-depth only DRIVES
-       the deep LERP (glass-deep.css), so a NON-deep tier surface is BYTE-UNCHANGED
-       (a plain popover stays the calm 13px; the calm ladder never reads --glass-depth)
-       and only a `.glass-deep`-composed surface consumes the graded depth.
-
-       SUBSTITUTION-vs-INHERITANCE (the recorded seam): zero-specificity :where() so
-       a consumer overrides the default at the element (`--glass-depth` inline / a
-       higher-specificity rule). To retune a whole band from an ancestor, override the
-       named grade token (`--glass-depth-popover: …`) — the tier rules read it, so it
-       cascades in (the per-band twin of the global --glass-depth ancestor dial). */
-    :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/src/styles/glass/defined.css

@@ -1,88 +0,0 @@
-/* glass/defined.css
-   BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the DEFINED glass tier.
-
-   Glass is the maximal default (AX.W54), but the blur is imperceptible over a FLAT page
-   — a bare <Button>/.input-pill reads as a near-gray shape (chroma 0.0138, BD GOLDEN).
-   This tier splits glass into TWO registers on the ONE existing --glass-level/edge
-   machinery (NOT a fork of the cascade, NOT a competing backdrop-filter, NOT a parallel
-   recipe):
-     · transmissive (today's maximal glass) — the DEFAULT for surfaces WITH a colorful
-       backdrop (cards over the field, overlays over content, the dock over aurora).
-       BYTE-UNTOUCHED.
-     · defined — a `.glass-defined` TOKEN-SUBSTITUTION decoration on a base rung (the
-       .glass-opaque/.glass-deep precedent) that reads as a SHAPE over ANY backdrop by
-       composing three things the material ALREADY owns: (a) a stronger warm rim
-       (--glass-border-defined), (b) a warm-cream floor-fill (--glass-floor-fill) layered
-       UNDER the transmissive plate, (c) the shipped W-BUTTON-GLASS lit register
-       (specular + --glass-btn-* depth stack, unchanged). ONE engage scalar,
-       @property --glass-definition (property-regs.css; 0 = transmissive, 1 = defined) —
-       both legs read it, so the scalar is genuinely load-bearing (dead-knob-proof) and a
-       host dials definition on any ancestor.
-
-   The DEFAULT flip (the wave's PURPOSE): the control cohort — Button glass variants
-   (.btn-glass) · .input-pill (Input/Textarea/NumberField) · .control-surface
-   (SelectTrigger) — is DEFINED by default, so a control reads as a control over a flat
-   page (the AX.W54 over-reach transposition BD §3.3 invited). A CONTENT surface composes
-   NO .glass-defined and stays transmissive (the negative arm — the flip does not bleed).
-   Menu ROWS stay transmissive inside an already-defined panel (KS-GLASS §3.2 decided
-   sub-question — a row inside a defined panel needs state fills, not its own floor).
-
-   @import-ed after deep.css in glass.css (a decoration ON a base rung, the deep.css
-   sibling); the tokens live in tokens/glass.css. */
-@layer components {
-    /* The floor layers UNDER the plate via TWO image layers: CSS image layers always
-       paint OVER background-color, so a two-image plate-over-floor is the ONLY ordering
-       that reads plate-over-floor. The base rung paints its plate via the `background:`
-       SHORTHAND (→ background-COLOR), so `background-color: transparent` is LOAD-BEARING
-       — un-zeroed the composite would be plate(image) ⊕ floor(image) ⊕ plate(color), the
-       plate counted TWICE. Zeroed, the stack is EXACTLY one plate over one floor (the
-       calibration target). Each family maps --glass-defined-plate to its OWN fill token
-       so the floor sits under the fill it actually paints; a bare `.glass-*` rung +
-       .glass-defined falls back to the ladder-rung plate (--glass-plate-tinted). */
-    .glass-defined,
-    .btn-glass,
-    .input-pill,
-    .control-surface {
-        --glass-definition: 1;
-        /* The substitution-vs-inheritance fix (the --dock-scale re-declare / --glass-bg-dock
-           pre-substituted-seam precedent — CLAUDE.md "The substitution-vs-inheritance trap").
-           --glass-floor-fill + --glass-border-defined are composed at :root, where
-           --glass-definition is 0 — and a custom property's inner var() substitutes at the
-           element that DECLARES it, so the :root copies resolve TRANSPARENT (calc(0 * N%)) and
-           inherit DOWN already-resolved. Flipping --glass-definition: 1 here would be a DEAD KNOB
-           (the floor/rim keep their :root-resolved transparent value). RE-DECLARE both on this
-           definition-1 rule so their var(--glass-definition) re-resolves against THIS element's
-           value (card@15% floor + foreground@14% rim actually paint). The :root copies stay the
-           transmissive default (definition 0 -> transparent) for a content surface. Both legs
-           still read the scalar (dead-knob-proof); --glass-floor-fill-max stays the one knob. */
-        --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);
-    }
-
-    /* Per-family plate mapping — the floor layers under the fill each family PAINTS
-       (btn-glass composes its own tinted --glass-fill; the form controls read the shared
-       --control-surface-bg REST register). */
-    .btn-glass {
-        --glass-defined-plate: var(--glass-fill);
-    }
-    .input-pill,
-    .control-surface {
-        --glass-defined-plate: var(--control-surface-bg);
-    }
-}

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

@@ -1,247 +0,0 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .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 reads the SHARED per-instance PLATE
-           recipe `--glass-fill-tinted` (BG.W-GLASS-CONSUMER-BAND, tokens/glass.css) —
-           NOT a forked `color-mix` re-spell. The plate tints toward the per-instance
-           DATA hue (`--glass-fill-tint` at `--glass-fill-strength`), so a semantic
-           badge (`destructive`/`success`/`info`) reaches its hue — closing the prior
-           `.glass-atom` fork that mixed a FIXED `--glass-capsule-warm` cream regardless
-           of the data hue (the comment claimed "toward the per-instance data hue" while
-           the code ignored it). At the `@property` defaults this is the byte-identical
-           no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X); the capsule's own warm
-           floor above keeps the idle body warm. ONE plate, ONE rim (`--glass-material-
-           rim`, the capsule carries it) — the shared plate/rim pair. */
-        /* 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-fill-tinted),
-            var(--glass-fill-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-axis glass tint — the data hue the quiet body mixes toward. BI.W-SYNONYM-
-       RENAMES: the STYLE plate keys off `[data-variant]` (default/secondary/outline),
-       the SEMANTIC hue off `[data-tone]` (destructive/success/warning/info — a tone
-       is not a style). A set tone's rule follows the variant rule in source order, so
-       a `tone` capsule's hue wins the cascade — byte-identical to the former
-       per-`variant` tint map. `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-tone='destructive'] { --glass-fill-tint: var(--destructive); }
-    .badge-atom--glass[data-tone='success'] { --glass-fill-tint: var(--success); }
-    .badge-atom--glass[data-tone='warning'] { --glass-fill-tint: var(--warning); }
-    .badge-atom--glass[data-tone='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);
-        }
-    }
-}

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

@@ -1,175 +0,0 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .glass-capsule — the ONE shared glassy register (BD.W-TAB-IOS-CAPSULE).
-
-   The warm-transmissive lifted lozenge + the recessed warm channel it rides in
-   + the glass hover/press register, factored ONCE so EVERY consumer (segmented
-   pill · dock-tab selected · Button glass · chips · cards) COMPOSES it instead
-   of re-forking the lifted-plate composite. ≥3 consumers by construction — the
-   overfitting bar cleared by extraction. The tabs facility is the reference
-   implementation; "make buttons glassy like the tabs" is a one-recipe substitution.
-
-   Clean break — the prior inline `.segmented-indicator` composite (fill + rim +
-   lift) moves here VERBATIM and the pill COMPOSES the class. No alias, no legacy.
-
-   @layer components, @import-ed in index.css AFTER the glass ladder (so the
-   `--glass-bg-*`/`--glass-rim-*`/`--glass-shadow-*` tokens resolve) and BEFORE
-   the consuming tabs/dock/button recipes.
-
-   THREE states:
-     · REST  = .glass-capsule           — the warm-glass lifted plate.
-     · TRACK = .glass-capsule-track     — the recessed warm channel.
-     · HOVER = .glass-capsule-hover     — specular catch-light lift + press-snap.
-
-   Every channel is compositor-only + Safari-native by construction (the §7 floor):
-   no `backdrop-filter: url()`, no SVG goo, no WebGL. The recess is a STATIC inset
-   shadow built off a PLAIN per-mode token pair (NEVER a `light-dark()` fragment —
-   an inset-shadow leg inside light-dark() computes the WHOLE box-shadow to `none`,
-   the binding MEMORY lesson). The hover lift is a `scale` + `--glass-specular`
-   step (the SHARED specular-lift primitive `.glass-drag-lift` also composes).
-   ════════════════════════════════════════════════════════════════════════ */
-
-@layer components {
-    /* ── .glass-capsule — the raised lit warm-glass lozenge ──
-       The fill reads the SHARED element-level oklab-tinted floating pair (the W55
-       adaptive seam, `surfaces.css` `:where(.btn-glass, .segmented-indicator,
-       .glass-capsule)`) — over a bright field it darkens-to-legible, over a calm
-       field it stays warm-cream/near-white. The FORWARD-ness comes from the rim +
-       lift, NOT from cranking the same-hue alpha. */
-    .glass-capsule {
-        /* The WARM-FLOOR re-invent (BD.W-TAB-IOS-CAPSULE C6). The bare
-           `--glass-bg-floating-tinted` desaturates to near-gray over a vibrant
-           aurora (live-measured oklab(0.793 0.005 0.012), chroma 0.0128 < 0.02).
-           Compose a SMALL floor toward an explicitly WARM oklch source so the
-           CAPSULE's own resolved fill carries chroma — independent of the
-           `--glass-tint-strength: 0%` adaptive default (which is zero-delta at rest
-           and only lifts under the bright bucket). This exercises the REAL
-           `color-mix(in oklab)` seam over the live light-dark() fill (NOT a
-           hardcoded hsl look-alike — the amendment's fake-gate ban). The source is
-           a warm oklch (build-trap-(d) safe form — warm color, never bare
-           `transparent`); at `--glass-capsule-warm-floor: 16%` the painted capsule
-           clears meanChroma ≥ 0.02 BOTH modes with negligible L lift (stays near-
-           white). `--glass-capsule-warm` is a warm cream amber both modes. */
-        /* The fill is INDIRECTED through `--glass-capsule-fill` so a consumer can
-           re-point the rung (quiet/loud/selected — buttons' quiet triplet, the dock
-           selected pill) WITHOUT forking the register; the default keeps the warm
-           floor compose. */
-        background: var(
-            --glass-capsule-fill,
-            color-mix(
-                in oklab,
-                var(--glass-bg-floating-tinted),
-                var(--glass-capsule-warm) var(--glass-capsule-warm-floor)
-            )
-        );
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        /* The lifted-plate composite: the directional rim (bright top catch-light +
-           warm bottom under-shadow — the iOS-27 top-light/bottom-shadow thickness)
-           PLUS a layered glass under-shadow lifting the plate ~2-3px off the quiet
-           track. */
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom),
-            var(--glass-shadow-floating);
-        border-radius: var(--radius-pill);
-    }
-
-    /* ── .glass-capsule-track — the recessed warm channel (the iOS-27 sunken well) ──
-       The track SINKS: rim + a STATIC inset recess leg. The recess ink is a PLAIN
-       per-mode token pair (`tokens/glass-fx.css` light arm, `tokens/dark-arm.css`
-       dark arm) — NEVER a `light-dark()` fragment (the inset-shadow trap). The
-       recess is static (a sunken channel does not pulse — never a @keyframes
-       target; `proof:no-layout-animation` holds). */
-    .glass-capsule-track {
-        background: var(--glass-bg-quiet);
-        backdrop-filter: var(--glass-blur-quiet);
-        -webkit-backdrop-filter: var(--glass-blur-quiet);
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom),
-            inset 0 1px 2px var(--tab-track-recess-ink);
-    }
-
-    /* ── .glass-capsule-hover — the SHARED specular-lift primitive ──
-       The two-channel glass hover (specular catch-light lift + a hair of scale) +
-       the press-snap, on the FAST bezier clock (hover is a bezier ease, not a
-       spring), volume-preserving, compositor-only. This is the SAME specular-lift
-       idiom `.glass-drag-lift` carries — factored here ONCE; `.glass-drag-lift`
-       re-composes `--glass-specular`-step + `will-change` rather than forking a
-       parallel block. The non-selected pill + the buttons greenfield compose this
-       wholesale: glass at rest + specular-lift on hover + press-snap on active. */
-    .glass-capsule-hover {
-        /* The SPATIAL leg (scale) rides the weighty cartoon-punch curve (the
-           liquid-weight-universal mandate — a hover lift carries inertia/overshoot,
-           never an abrupt bezier jerk; the SAME spatial currency `.glass-chip`/
-           `.glass-atom` ride, PRM-zeroed via the `--ease-cartoon-punch` fallback). The
-           EFFECTS leg (the `--specular-intensity` gleam channel) stays on the fast
-           bezier (motion-canon P1 — an effects cross-fade is not a spatial motion). */
-        transition:
-            scale var(--duration-fast) var(--ease-cartoon-punch),
-            --specular-intensity var(--duration-fast) var(--ease-standard);
-    }
-    /* The SHARED specular-lift step — declared ONCE here, COMPOSED by both the hover
-       register AND the drag-lift (BD.W-TAB-IOS-CAPSULE C7: one declaration of the
-       `--glass-specular` catch-light step, never a parallel fork). `.glass-drag-lift`
-       (segmented-tabs.css) re-points its grabbed-state catch-light onto THIS step
-       rather than re-declaring `--glass-specular`; it adds only its distinct grabbing
-       bits (the grab cursor + the `will-change` compositor hint). The W-GLASS-CAL
-       sub-perceptual catch — a hair brighter at the specular edge, disco-FREE. */
-    .glass-capsule-hover:hover,
-    .glass-drag-lift {
-        /* Drive the REAL gleam-opacity channel (`--specular-intensity`, read by the
-           moving-specular `::before` at material.css opacity) — not the dead
-           `--glass-specular` name. Composes with the material hover system; fires for
-           both the :hover register AND the grabbed `.glass-drag-lift` class. */
-        --specular-intensity: 0.14;
-    }
-    .glass-capsule-hover:hover {
-        /* the 1.5% press-ready lift (the lift is hover-only; the drag-lift carries no
-           scale of its own — the translate/squish are the morph primitive's writes) */
-        scale: 1.015;
-    }
-    .glass-capsule-hover:not([data-press-armed]):active {
-        /* the --scale-press snap */
-        scale: var(--scale-press-sm, 0.97);
-    }
-    @media (prefers-reduced-motion: reduce) {
-        /* the lift is motion; the specular catch (a static legibility cue) stays. */
-        .glass-capsule-hover:hover,
-        .glass-capsule-hover:not([data-press-armed]):active {
-            scale: 1;
-        }
-    }
-
-    /* ── BI.W-DOCK-CONTROLS — the folded dock-control safe-inset (the face token) ──
-       The `--dock-control-safe-inset` 10% band-aid the user rejected FOLDS into the
-       FACE: the painted plate insets (`background-clip: content-box` over the inset
-       `padding`), while the HIT CELL stays the full `--dock-control-size` (the WCAG
-       2.5.5 ≥44px touch floor on the CELL, never the plate). Hit box ≠ paint box —
-       the clip fix (W-DOCK-SPINE's L1 `overflow: visible`) and the touch floor are
-       now DECOUPLED: A11Y-5's 17×40px defect dies because the hit box reads the full
-       cell while the painted plate insets independently.
-
-       DOCK-SCOPED (`.glass-dock` descendant) so NO other `.glass-capsule` consumer
-       (a glass Button, a Badge/IconChip/chip OUTSIDE a dock) inherits the content-box
-       clip — `--dock-control-safe-inset` resolves to 0 outside a dock anyway, but the
-       scope keeps the content-box clip off the broad capsule family. This is the ONE
-       home of the safe-inset routing (the standalone `padding`/`background-clip`
-       sites in the dock-control recipe files collapsed onto it — proof:dock-controls
-       C3). Two legs, ONE token home:
-       • the SHARED fill-inset — the painted plate clips to the content box so the
-         fill insets within the control's own padding / the safe-inset. Applies to
-         the whole dock capsule family (icon active plate + hover register).
-       • the ICON-SHAPE safe-inset padding — the ONE `--dock-control-safe-inset`
-         read. A fixed-square icon control needs `padding` to define a content box
-         SMALLER than the cell (the plate insets within the square); a text control
-         (tab/trigger) uses its OWN text padding as the inset, so the padding leg is
-         scoped to the icon shape (`.dock-icon-button`) — it never clobbers a text
-         control's or a nested strip's padding. */
-    .glass-dock :is(.glass-capsule, .glass-capsule-hover) {
-        background-clip: content-box;
-    }
-    .glass-dock .dock-icon-button {
-        padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0));
-    }
-}