@mkbabb/glass-ui 4.1.0 → 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/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);
+        }
+    }
+}

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

@@ -0,0 +1,143 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .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: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:active {
+            scale: 1;
+        }
+    }
+}