@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/segmented-tabs.css

@@ -69,6 +69,33 @@
     grid-auto-flow: unset;
     grid-auto-columns: unset;
     align-items: stretch;
+    /* BI.W-RADIUS-GRAMMAR (Law 2 — capsule-vs-card). A COLUMN-STACK track cannot
+       wear the horizontal arm's stadium `--radius-tab` (= --radius-pill = 9999px):
+       on a tall multi-row box the stadium clamps its end-caps to a ~46px half-height
+       balloon (the live-measured 10003px→46px defect, UF-A2/FAM-4). The vertical arm
+       re-binds the family radius var onto the BOUNDED `--radius-strip` (≈12px); the
+       shipped concentric track calc (`--bouncy-track-radius`, above) re-resolves the
+       track corner off it for free. The horizontal `.segmented-tabs` is byte-untouched
+       (its single-row pill stays a legal stadium — the pill-in-pill exemption). */
+    --bouncy-slider-radius: var(--radius-strip);
+    /* Law 1 — the concentric relay. The vertical track is the concentric CONTAINER:
+       it publishes its resolved outer radius as `--radius-ctx` + its trim inset as
+       `--radius-inset`, and the indicator (the nested surface) derives its arc below.
+       This GENERALIZES the shipped per-surface `.containerConcentric` idiom onto the
+       named Law-1 contract (Ruling 11 site #2), so the relay is LIVE not dead-on-mint. */
+    --radius-ctx: var(--bouncy-track-radius);
+    --radius-inset: var(--bouncy-track-trim);
+}
+
+/* The vertical indicator arc is the concentric INNER of the track — it reads the
+   Law-1 relay `inner = max(floor, ctx − inset)` (= --radius-strip, the shipped calc
+   value routed through the named contract). Specificity (0,2,0) wins the base
+   `.segmented-indicator` (0,1,0) `border-radius: var(--bouncy-slider-radius)`. */
+.segmented-tabs--vertical .segmented-indicator {
+    border-radius: max(
+        var(--radius-floor),
+        calc(var(--radius-ctx) - var(--radius-inset))
+    );
 }
 
 @media (min-width: 640px) {
@@ -102,6 +129,25 @@
         calc(var(--tab-blob, 1) / var(--stretch));
 }
 
+/* BI.W-TABS-FACTOR — the indicator PLATE. The glass fill (`.glass-capsule`) + the
+   refraction (`.glass-lens`) live on this nested plate so the eyeglass two-rest-state
+   block-proud magnify rides its OWN compositor channel: `transform: scaleY(var(--eyeglass-y))`
+   — NOT the outer's `scale` (the travel-squish) nor its `transform` (the glide/drag), so
+   the per-frame `useLeadTrail` write of `--eyeglass-live-t` is never lagged by their
+   transitions. The plate fills the shell (`inset: 0`); the outer squish/glide scale +
+   translate compose over it (the outer scale scales the plate too — squish × magnify).
+   `--eyeglass-y` defaults 1 (the flat slot-fill capsule — the degrade / non-eyeglass
+   floor); the eyeglass scope (segmented-tabs-drag.css) drives the two-rest-state calc.
+   NO transition on the plate transform — the useLeadTrail integrator is the animator on
+   the live path; the `@property --eyeglass-live-t` covers the discrete/degrade path. */
+.segmented-indicator__plate {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transform-origin: center;
+    transform: scaleY(var(--eyeglass-y, 1));
+}
+
 /* BD.W-TABS-LIQUID — the COMMIT accent-flood (T4, opt-in). A momentary full-capsule
    wash of `--glass-accent`, driven by `--tab-flood-t` (0→1→0), that TRAILS the
    spatial glide a beat then clears (EFFECTS-after-SPATIAL). `isolation: isolate` on
@@ -155,55 +201,30 @@
     }
 }
 
-/* Fallback (JS-measured) path — the indicator is moved by inline
-   `transform`/`width` writes; animate those alongside the squish scale on the ONE
-   calibrated clock. */
+/* The JS-measured indicator glide — the indicator is moved by inline `transform`/
+   `width` writes; animate those alongside the squish scale on the ONE calibrated clock.
+   BI.W-TABS-FACTOR — the pill IS the eyeglass loupe by default, so its travel rides the
+   `--spring-eyeglass` curve (the measured Find My loupe register, SPRING_PRESETS
+   `eyeglass` — snappy-class speed 0.36 / dock-class give ζ0.64; TABS-GLASS-LADDER §8.2)
+   on the same calibrated `--tab-indicator-duration` clock (unchanged — the underline
+   paper material keeps `--spring-snappy`). This is the eyeglass row's CSS consumer (the
+   ≥2-consumer bar: this glide + the JS `useEyeglassLive` release). */
 .segmented-indicator--js {
     transition:
-        transform var(--tab-indicator-duration) var(--spring-snappy),
-        width var(--tab-indicator-duration) var(--spring-snappy),
-        height var(--tab-indicator-duration) var(--spring-snappy),
-        scale var(--tab-indicator-duration) var(--spring-snappy),
+        transform var(--tab-indicator-duration) var(--spring-eyeglass),
+        width var(--tab-indicator-duration) var(--spring-eyeglass),
+        height var(--tab-indicator-duration) var(--spring-eyeglass),
+        scale var(--tab-indicator-duration) var(--spring-eyeglass),
         opacity var(--duration-fast) ease;
 }
 
-/* Anchor path — the indicator tethers to the active button's `anchor-name`.
-   `inset` reads the anchor's edges; the browser interpolates `inset` between
-   buttons on selection (the glide), and the JS `--stretch` write deforms it
-   (the squish) on the SAME calibrated clock. */
-@supports (position-anchor: --x) {
-    .segmented-indicator--anchor {
-        position-anchor: --gl-tab-active;
-        /* The four edge longhands tether to the active button's anchor edges (the
-           inline-trimmed band over the full anchor block extent). NO `inset-block:
-           auto` shorthand here — it would reset the block longhands above it to auto
-           and collapse the indicator to height 0 (the live-found clobber). */
-        inset-block-start: calc(anchor(top) + 0.1875rem);
-        inset-block-end: calc(anchor(bottom) + 0.1875rem);
-        inset-inline-start: anchor(left);
-        inset-inline-end: anchor(right);
-        opacity: 1;
-    }
-    /* Vertical: the anchor band runs the FULL block extent of the active button
-       (the indicator tracks the column, not the row) with the inline axis trimmed. */
-    .segmented-tabs--vertical .segmented-indicator--anchor {
-        inset-block-start: anchor(top);
-        inset-block-end: anchor(bottom);
-        inset-inline-start: calc(anchor(left) + 0.1875rem);
-        inset-inline-end: calc(anchor(right) + 0.1875rem);
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .segmented-indicator--anchor {
-            transition:
-                inset var(--tab-indicator-duration) var(--spring-snappy),
-                scale var(--tab-indicator-duration) var(--spring-snappy);
-        }
-    }
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"],
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-selected="true"] {
-        anchor-name: --gl-tab-active;
-    }
-}
+/* BI.W-DOCK-CONTROLS — the PILL `.segmented-indicator--anchor` CSS-anchor branch
+   is RETIRED (DEFINITION-ABSENT). The pill indicator now rides the ONE JS-measured
+   writer (`useSelectionIndicator`) on every engine — Chrome and Safari paint the
+   same pixels by construction, so the CSS `position-anchor` glide path (which only
+   fired on anchor-supporting engines) is dead. The underline material keeps its
+   own `anchor-name`/`::before` indicator below (a distinct paper-material indicator,
+   not the pill writer). */
 
 @media (min-width: 640px) {
     .segmented-indicator {
@@ -216,18 +237,8 @@
         inset-block: auto;
         inset-inline: 0.25rem;
     }
-    @supports (position-anchor: --x) {
-        .segmented-indicator--anchor {
-            inset-block-start: calc(anchor(top) + 0.25rem);
-            inset-block-end: calc(anchor(bottom) + 0.25rem);
-        }
-        .segmented-tabs--vertical .segmented-indicator--anchor {
-            inset-block-start: anchor(top);
-            inset-block-end: anchor(bottom);
-            inset-inline-start: calc(anchor(left) + 0.25rem);
-            inset-inline-end: calc(anchor(right) + 0.25rem);
-        }
-    }
+    /* BI.W-DOCK-CONTROLS — the pill `.segmented-indicator--anchor` breakpoint trim
+       retired with the anchor branch (the ONE JS writer carries the inset). */
 }
 
 /* ── The tab buttons ── */
@@ -411,35 +422,3 @@
     color: color-mix(in oklab, var(--foreground) 70%, transparent);
 }
 
-/* ════════════════════════════════════════════════════════════════════════
-   BB.W-DRAG-MORPH — the `.glass-drag-lift` decoration (the pull affordance).
-
-   The `useDragMorph` consumer adds this class to the morph element while
-   `dragging` is true (the SegmentedTabs `:draggable` indicator; the
-   DockLayerGroup pull rail). It is the visual "this is grabbable + grabbed"
-   affordance — the GRAB cursor + a sub-perceptual `--glass-specular` catch-light
-   lift + the `will-change: transform` compositor hint that promotes the lozenge
-   to its own layer for the 1:1 follow. It carries NO transform itself (the
-   translate + squish are the primitive's own `translate`/`--stretch` writes, the
-   §6 compositor channels); this class only paints the affordance + the hint.
-
-   The grab cursor sits on the morph element AT REST too (a draggable indicator
-   reads grabbable before the grab), so `.glass-drag-grabbable` marks the rest
-   affordance and `.glass-drag-lift` adds the grabbing state. PRM does not gate
-   the cursor/hint (they are not motion); the lift is a static specular nudge. */
-.glass-drag-grabbable {
-    cursor: grab;
-    touch-action: none;
-}
-
-.glass-drag-lift {
-    cursor: grabbing;
-    /* Promote to its own compositor layer for the 1:1 follow (the translate write
-       is compositor-only; the hint keeps the plate off the main-thread paint). */
-    will-change: transform;
-    /* BD.W-TAB-IOS-CAPSULE C7 — the grabbed-state catch-light COMPOSES the SHARED
-       specular-lift step declared ONCE in glass/glass-capsule.css (the
-       `.glass-capsule-hover:hover, .glass-drag-lift { --glass-specular }` group), NOT
-       a parallel `--glass-specular` fork. This block carries only the grabbing-distinct
-       bits (the grab cursor + the `will-change` hint). */
-}

package/src/styles/tabs/segmented-tabs-drag.css

@@ -0,0 +1,200 @@
+/* tabs/segmented-tabs-drag.css
+   The additive DECORATION tail of the SegmentedTabs grammar: the BB.W-DRAG-MORPH `.glass-drag-lift`/`.glass-drag-grabbable` pull affordance + the BG.W-EYEGLASS-TABS iOS-27 loupe register (data-eyeglass, pill-only).
+   Carved from segmented-tabs.css to hold the no-god-module 500-line bound (BI.W-STYLE-REDRAIN); @import-ed by styles/index.css IMMEDIATELY AFTER segmented-tabs.css. Unlayered (matches segmented-tabs.css) — the tail is additive decoration with unique selectors, so the relocation is byte-isomorphic. */
+/* ════════════════════════════════════════════════════════════════════════
+   BB.W-DRAG-MORPH — the `.glass-drag-lift` decoration (the pull affordance).
+
+   The `useDragMorph` consumer adds this class to the morph element while
+   `dragging` is true (the SegmentedTabs `:draggable` indicator; the
+   DockLayerGroup pull rail). It is the visual "this is grabbable + grabbed"
+   affordance — the GRAB cursor + a sub-perceptual `--glass-specular` catch-light
+   lift + the `will-change: transform` compositor hint that promotes the lozenge
+   to its own layer for the 1:1 follow. It carries NO transform itself (the
+   translate + squish are the primitive's own `translate`/`--stretch` writes, the
+   §6 compositor channels); this class only paints the affordance + the hint.
+
+   The grab cursor sits on the morph element AT REST too (a draggable indicator
+   reads grabbable before the grab), so `.glass-drag-grabbable` marks the rest
+   affordance and `.glass-drag-lift` adds the grabbing state. PRM does not gate
+   the cursor/hint (they are not motion); the lift is a static specular nudge. */
+.glass-drag-grabbable {
+    cursor: grab;
+    touch-action: none;
+}
+
+.glass-drag-lift {
+    cursor: grabbing;
+    /* Promote to its own compositor layer for the 1:1 follow (the translate write
+       is compositor-only; the hint keeps the plate off the main-thread paint). */
+    will-change: transform;
+    /* BD.W-TAB-IOS-CAPSULE C7 — the grabbed-state catch-light COMPOSES the SHARED
+       specular-lift step declared ONCE in glass/glass-capsule.css (the
+       `.glass-capsule-hover:hover, .glass-drag-lift { --glass-specular }` group), NOT
+       a parallel `--glass-specular` fork. This block carries only the grabbing-distinct
+       bits (the grab cursor + the `will-change` hint). */
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   BI.W-DRAG-REATTACH — the tabs `:draggable` z-order double-repair (Kill B).
+
+   The SegmentedTabs pill indicator is a SIBLING behind the tab buttons: at rest
+   `.segmented-indicator` is `z-0` (segmented-tabs.css) UNDER `.segmented-tab`
+   `z-10`, so the LABEL paints crisp ON TOP of the glass plate (correct — the plate
+   is a backing surface, the glyph is the foreground). But that same stack makes the
+   indicator UNGRABBABLE two ways, and both must fall or the liquid tab stays dead:
+
+     · THE GRAB BOOTSTRAP — kf `Draggable` binds `pointerdown` on the INDICATOR node,
+       yet a press on the active pill hits the z-10 BUTTON (a sibling, not an
+       ancestor of the indicator), so the gesture never reaches the drag listener.
+       On a DRAGGABLE strip (the indicator carries `.glass-drag-grabbable`) the ACTIVE
+       button forwards the press THROUGH to the indicator beneath: `pointer-events:
+       none` drops it from hit-testing WITHOUT touching paint (the label stays
+       painted on top; `elementFromPoint(indicatorCenter)` + the initial `pointerdown`
+       now land on the indicator). NON-active buttons keep `pointer-events`
+       (click-to-select is byte-identical); the active pill is grab-to-drag (the
+       iOS-27 read — the selected segment is the physical lozenge). Keyboard is
+       untouched — `pointer-events` does not gate focus or `keydown`, so the roving
+       tabindex contract stays whole (WCAG 2.1.1 alternative intact).
+
+     · THE TRAVEL OCCLUSION — once grabbed, the pulled lozenge slides across the
+       OTHER buttons; while `.glass-drag-lift` is set (useDragMorph's `dragging`),
+       raise the indicator ABOVE the z-10 labels so the traveling pill renders on top
+       and `elementFromPoint(indicatorCenter)` keeps returning the indicator (pointer
+       capture already routes the events; the lift is the paint + reachability half).
+
+   Compositor-only (z-index + hit-testing, no layout). The REST z-order is UNTOUCHED
+   — `.segmented-indicator { z-index: 0 }` still paints behind the labels at rest. */
+.segmented-tabs:not(.segmented-tabs--underline):has(
+        .segmented-indicator.glass-drag-grabbable
+    )
+    .segmented-tab[aria-pressed="true"] {
+    pointer-events: none;
+}
+
+.segmented-indicator.glass-drag-lift {
+    z-index: 30;
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   BG.W-EYEGLASS-TABS — the iOS-27 eye-glass loupe register (ADDITIVE, pill-ONLY).
+
+   The SFC flips `data-eyeglass` on the strip host (pill-only, default-off) + composes
+   `.glass-lens` onto the indicator. This block adds the three CSS legs the mode owns
+   (the whole genuinely-new delta is deliberately small — one boolean axis, one geometry
+   token, one stage-frost token, an opt-in glyph-ink seam):
+
+     (1) THE STAGE FROST (signature #7) — the track re-points to a STRONGER frost rung so
+         the pill's `backdrop-filter` lenses a LEGIBLE smooth field (a still-noisy near-
+         sharp aurora reads worse than the reference's clean frosted stage; the nested
+         backdrop-filter compose only reads right when the pill lenses an ALREADY-frosted
+         track output). The default pill track (`.glass-capsule-track`, --glass-blur-quiet)
+         is BYTE-UNTOUCHED off eyeglass; eyeglass re-points it to `--eyeglass-track-blur`
+         (the floating rung). The rule is UNLAYERED (segmented-tabs.css is not @layer'd) so
+         it wins `.glass-capsule-track`'s (@layer components) backdrop-filter by the
+         unlayered-over-@layer cascade rule (the AZ.W-DOCK-RAIL precedent, NOT specificity).
+
+     (2) THE TWO-REST-STATE LOUPE (signature #1/#2, BI.W-TABS-FACTOR) — the pill is a
+         TWO-REST-STATE machine (TABS-GLASS-LADDER §1), NOT a static proud: a SETTLED long
+         rest (an inset plate, 0.84× the slot) ⇄ a LIVE touched/travelling/just-arrived
+         state (a proud loupe, 1.12× — spilling PAST the track). The `.segmented-indicator__plate`
+         interpolates between them via `transform: scaleY(var(--eyeglass-y))` — a COMPOSITOR
+         scale (proof:no-layout-animation holds; NOT a layout inset), on the plate's OWN
+         channel (never the outer's squish `scale` / glide `transform`). `--eyeglass-y` is a
+         calc off `--eyeglass-live-t` (0 ⇄ 1), which `useEyeglassLive` writes per-frame off
+         `useLeadTrail` — so the §2/§8.3 EDGE-ASYMMETRY (fast energize / ~270ms slow deflate)
+         emerges from the two edges. `--eyeglass-settled` (0.84) + `--eyeglass-proud` (1.12,
+         the ratified retune knob) are bare `<number>` RATIOS — viewport-invariant (a ratio
+         holds across breakpoints by construction, the stadium-radius precedent; no @640
+         re-declaration), NEVER a border-radius (the stadium is untouched, T1-safe). PRM
+         pins `--eyeglass-y: 1` (the flat slot-fill capsule — the calm degrade floor). A
+         consumer sets both ratios to 1 for a flat pill (the token-first escape).
+
+     (3) THE SELECTED-GLYPH ACCENT INK (signature #6, the CONTRAST-SPLIT) — the selected
+         GLYPH (a graphic, WCAG-1.4.11 3:1) tints via `--tab-selected-ink` on a DESCENDANT
+         `svg` selector (AC4 — NEVER the tab's own `color`, which drives the LABEL and must
+         stay --foreground for the AA 4.5:1 floor / T5). Default no-op: `--tab-selected-ink`
+         unset → the glyph resolves --foreground (byte-identical to a non-eyeglass pill). A
+         consumer sets `--tab-selected-ink: <accent>` to reproduce the cyan-glyph read
+         (presets-in-consumers). The accent RIM + the commit FLOOD ride the shipped
+         `--glass-accent` + `--tab-flood-t` registers (consumer-set, no-op at their
+         transparent/0 defaults). The calm↔busy attenuation rides the STATIC
+         `--glass-backdrop: light|dark` bucket (the shipped floor); the LIVE
+         useGlassBackdropLuminance observer is BOOKED, its animated sample path DEAD on disk
+         (BG.W-GLASS-SIGNAL-TRUTH) — a bare wire would also be dead, so it stays booked
+         (NF-honest — no ≥2-consumer promotion of a dead mechanism).
+
+   HONEST DEGRADE (NO-MASKING-FALLBACK): off `backdrop-filter: url()` engines the whole
+   refraction fails the `.glass-lens` `@supports` gate → the un-gated blur+tint+rim+specular
+   `.glass-capsule` proud loupe paints — a real glass surface making NO loupe claim (the
+   reference itself uses this state over calm backdrops). NO pre-baked "magnified" image, NO
+   broken `url()`, NO drop-and-restore mid-travel. BOOKED successors: the T1 cross-engine
+   clone-loupe (a CSS-duplicable backdrop), the chromatic-aberration RGB-split rim
+   (W-LENSING color-split), the live ambient-observer wire (a fired writer-witness). The
+   spring/clock are FROZEN (`--tab-indicator-duration` = `--spring-snappy-duration`; the
+   size caps stay in their distinct bands — stretch ≤1.2, blob area ≤1.14); the dual-engine
+   60fps frame-series π judges both arms (Chromium refraction + Safari honest capsule) vs
+   the bar60/ kinematics+optics ladder.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* (1) + (2) declarations — the two-rest-state geometry ratios + the stronger STAGE frost. */
+.segmented-tabs[data-eyeglass] {
+    /* (2) THE TWO-REST-STATE loupe geometry (§1/§8.1) — bare `<number>` RATIOS, driven
+       by `--eyeglass-live-t` on the plate `scaleY` (viewport-invariant; NO @640 re-declare,
+       NOT a length, NOT a border-radius — T1-safe). `--eyeglass-proud` is the single
+       ratified retune knob; a consumer sets both to `1` for the flat pill. */
+    --eyeglass-settled: 0.84; /* SETTLED — the inset long-rest plate (§1: 0.80–0.88×). */
+    --eyeglass-proud: 1.12; /* LIVE — the proud loupe (§1: 1.07–1.18×); the retune knob. */
+    /* Signature #7 — the STRONGER stage frost the loupe bends (the floating rung, deeper
+       than the calm quiet track the plain pill keeps). */
+    --eyeglass-track-blur: var(--glass-blur-floating);
+    backdrop-filter: var(--eyeglass-track-blur);
+    -webkit-backdrop-filter: var(--eyeglass-track-blur);
+}
+
+/* (2) THE PLATE MAGNIFY — the two-rest-state block-proud `scaleY`. The plate reads the
+   inherited `--eyeglass-live-t` (0 ⇄ 1) and interpolates SETTLED → LIVE. `--eyeglass-y`
+   is the ONE derived scale factor the plate transform (segmented-tabs.css) reads. NO
+   transition here — `useLeadTrail` (via `useEyeglassLive`) is the animator on the live
+   path; the `@property --eyeglass-live-t` covers the discrete/degrade path. */
+.segmented-tabs[data-eyeglass] .segmented-indicator__plate {
+    --eyeglass-y: calc(
+        var(--eyeglass-settled) +
+            var(--eyeglass-live-t) * (var(--eyeglass-proud) - var(--eyeglass-settled))
+    );
+}
+
+/* PRM (motion-canon P6) — the loupe rests as a FLAT slot-fill capsule under reduced
+   motion (the calm degrade floor): the deform is off, the state confirms. `useLeadTrail`
+   also seats `--eyeglass-live-t` instantly under PRM (belt-and-suspenders). */
+@media (prefers-reduced-motion: reduce) {
+    .segmented-tabs[data-eyeglass] .segmented-indicator__plate {
+        --eyeglass-y: 1;
+    }
+}
+
+/* (1) belt-and-suspenders (AC1) — re-assert the FLOATING blur rung on the eyeglass lens.
+   `.glass-lens` (glass-refract.css) paints `--glass-blur-resting url(#…)` inside its own
+   `@supports` gate; on Chromium that is a LIGHTER frost than the capsule floor, and on
+   Safari-26 (which historically returns TRUE for the @supports probe but renders the url()
+   as nothing — WebKit bug 245510) it would leave a wrong lighter rung with NO refraction
+   ("tried and painted nothing"). Re-pointing to `--glass-blur-floating` keeps Chromium a
+   strong loupe AND lands Safari on the honest floating-frost floor. Stays INSIDE the same
+   `@supports` gate (no refraction sits outside it) and reads the shipped BAKED
+   `--glass-refract-filter` (no revived var()-scale-splice — DDR-LENS-BAKE). The lens now
+   lives on the nested `.segmented-indicator__plate` (BI.W-TABS-FACTOR — the magnify
+   channel), so the selector reaches it there. */
+@supports (backdrop-filter: url("#glass-refract")) {
+    .segmented-tabs[data-eyeglass] .segmented-indicator__plate.glass-lens {
+        backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter);
+    }
+}
+
+/* (3) THE SELECTED-GLYPH ACCENT INK (C7/AC4) — the CONTRAST-SPLIT: the selected GLYPH (a
+   graphic, 3:1) tints via `--tab-selected-ink` on a DESCENDANT svg selector, NEVER the
+   tab's own `color` (which drives the LABEL and must stay --foreground for AA 4.5:1 / T5).
+   Default no-op — `--tab-selected-ink` unset → the glyph resolves --foreground, the SAME
+   ink the tab already inherits. A consumer sets `--tab-selected-ink: var(--glass-accent)`
+   or a `<hue>` to reproduce the reference cyan-glyph read. */
+.segmented-tabs[data-eyeglass] .segmented-tab[aria-pressed="true"] svg {
+    color: var(--tab-selected-ink, var(--foreground));
+}

package/src/styles/theme/bridges.css

@@ -80,7 +80,11 @@
        bg-border-soft utilities). Auto-dark via --border. */
     --color-border-soft: var(--border-soft);
     --color-input: var(--input);
-    --color-ring: var(--ring);
+    /* BG.W-DESHADCN — the shadcn `--color-ring` @theme bridge (the `ring`/
+       `outline-ring`/`text-ring` utility surface) is DELETED, clean break. The
+       house focus accent is the `--focus-ring-color` token / the `.focus-ring`
+       box-shadow utility; the lone `outline-ring` reader (MetricBadge) re-points
+       onto `outline-(color:--focus-ring-color)`. */
     --color-background: var(--background);
     --color-foreground: var(--foreground);
 
@@ -331,7 +335,9 @@
     --blur-glass-resting:  var(--glass-blur-resting-radius);
     --blur-glass-floating: var(--glass-blur-floating-radius);
     --blur-glass-overlay:  var(--glass-blur-overlay-radius);
-    --blur-dock:           var(--glass-blur-dock-radius);
+    /* BG.W-CLOSEFIX-9SITE — the `--blur-dock` @theme bridge (→ the `blur-dock`/
+       `backdrop-blur-dock` Tailwind utility) RETIRED with the `--glass-blur-dock` chain
+       it read (zero utility consumers; the dock reads `--dock-surface-blur`). */
 
     /* ═══════════════════════════════════════════════
        Easing → ease-* utilities

package/src/styles/theme/literals.css

@@ -13,7 +13,8 @@
     /* ═══════════════════════════════════════════════
        Animation → animate-* utilities
        ═══════════════════════════════════════════════ */
-    --animate-floating-panel-in: floating-panel-in var(--duration-fast) var(--ease-out);
+    /* BI.W-GLASS-DEDUP — `--animate-floating-panel-in` RETIRED with floating-panel.css
+       (its sole consumer, FAM-9). The `floating-panel-in` @keyframes is deleted too. */
     --animate-tooltip-in: tooltip-in var(--duration-fast) var(--ease-out);
     --animate-fade-in: fade-in var(--duration-normal) var(--spring-smooth);
     --animate-scale-in: scale-in var(--duration-normal) var(--spring-smooth);

package/src/styles/theme/radius.css

@@ -42,6 +42,14 @@
        on Checkbox + base Tabs onto a softer, named radius. One geometry language
        across the form family — token + class only, no new primitive. */
     --radius-field:   var(--radius-2xl);
+    /* BI.W-RADIUS-GRAMMAR (Law 2 — capsule-vs-card) — the BOUNDED strip rung a
+       COLUMN-STACK variant of a stadium base re-binds onto. A multi-row segmented
+       track cannot wear the `9999px` pill: on a tall box the stadium clamps its
+       end-caps to a ~46px half-height balloon (UF-A2/FAM-4). ≈12px sits between
+       --radius-control (the stadium pill) and --radius-card (1rem) — a soft
+       rounded-rect, never a stadium. The vertical SegmentedTabs track reads it;
+       the shipped concentric track calc re-resolves the corner off it for free. */
+    --radius-strip:   0.75rem;
     /* BC.W-CONTROL-SMOOTH — the small-inline-control corner rung is a STADIUM, not a
        fixed small px. The prior `--radius-md` (6px) read SQUARE on a 16-24px control
        (6px on a 16px box = 0.38-of-height — a rounded-rect, not a pill); the iOS-27
@@ -67,6 +75,23 @@
     --radius-dock-card: var(--radius-3xl);
     --radius-tooltip: var(--radius-lg);
 
+    /* ── BI.W-RADIUS-GRAMMAR — the concentric-radius RELAY (Law 1). ──────────────
+       The Apple `ConcentricRectangle` grammar (iOS 26) as a plain INHERITED
+       custom-property relay: a container PUBLISHES its resolved corner as
+       `--radius-ctx` + its inner pad as `--radius-inset` on itself; a nested
+       CARD-class surface DERIVES its own corner
+         border-radius: max(var(--radius-floor), calc(var(--radius-ctx) − var(--radius-inset)))
+       so the inner corner stays concentric with the outer across the pad. The
+       2-level relay is the contract (covers 4/5 audited sites); depth-N `inherit()`
+       is Chrome-only / non-Baseline — BOOKED, never a masking fallback. These are
+       the DEFAULT (root) channel values a container overrides per-scope: the
+       identity default `--radius-inset: 0px` makes an un-nested card read
+       `--radius-ctx` (= --radius-card) unchanged, and `--radius-floor` (4px) is the
+       minimum a nested corner never rounds below. */
+    --radius-floor:   var(--radius-xs);
+    --radius-ctx:     var(--radius-card);
+    --radius-inset:   0px;
+
     /* ── AX.W56 — the corner-SHAPE axis (parallel to the corner-RADIUS ladder above).
        `corner-shape` only changes the CURVE within the `border-radius` box; the
        region is still the `--radius-*` token. These are plain @theme (the radius
@@ -93,22 +118,28 @@
 
     /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY (a
        RADIUS-THRESHOLD policy: the superellipse only READS at a LARGE radius
-       ~--radius-xl/12px and up). ROUND set = card, pill (small controls + data
-       cards + stadium pills — the superellipse is imperceptible, dropping it is
-       free). SQUIRCLE set = bigdock, dialog, sheet, panel, hero (the large-radius
-       glass overlays where the iOS-26 silhouette reads — the blur halo + cartoon
-       under-shadow follow the shape). ALL ride the ONE --corner-k-squircle vocab.
-       W56b (USER-DECISION R1) extended the family off big-dock-only onto the large
-       glass overlays; @supports-gated in glass/squircle.css over the `border-radius`
-       round CONTRACT. A consumer dials any surface back to round (or opts one in) by
-       re-pointing its `--corner-shape-<surface>` alias. */
-    --corner-shape-card:    round;
-    --corner-shape-pill:    round;
+       ~--radius-xl/12px and up). The SQUIRCLE set = bigdock, dialog, sheet, panel,
+       hero (the large-radius glass overlays where the iOS-26 silhouette reads — the
+       blur halo + cartoon under-shadow follow the shape); ALL ride the ONE
+       --corner-k-squircle vocab. W56b (USER-DECISION R1) extended the family off
+       big-dock-only onto the large glass overlays; @supports-gated in
+       glass/squircle.css over the `border-radius` round CONTRACT. A consumer dials
+       any squircle surface back to round (or opts one in) by re-pointing its
+       `--corner-shape-<surface>` alias.
+       The ROUND set (card, pill — the small controls + data cards + stadium pills)
+       carries NO shape alias: the CSS `corner-shape` INITIAL VALUE is `round`, and
+       glass.css writes no `corner-shape` on .glass-card/.glass-btn/.btn-pill (the
+       CARD-REHOMED policy), so those surfaces are round BY DEFAULT — the dead
+       `--corner-shape-card`/`-pill: round` no-op knobs were SWEPT (BG.W-DEAD-SWEEP,
+       net-negative; the round policy is identical, expressed structurally not by a
+       dead token). A consumer wanting a squircle card mints its own alias and adds
+       the surface to squircle.css's @supports block. */
     --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
     --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
     --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
     --corner-shape-panel:   superellipse(var(--corner-k-squircle));
-    --corner-shape-hero:    superellipse(var(--corner-k-squircle));
+    /* BI.W-GLASS-DEDUP — `--corner-shape-hero` RETIRED with the `.glass-hero`
+       overlay utility (FAM-9, 0-consumer clean break). */
     /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
        (the iOS color-picker idiom). It rides the same --corner-k-squircle
        vocabulary; @supports-gated in Slider.vue over a --radius-* round

package/src/styles/tokens/color-radius.css

@@ -99,18 +99,29 @@
     --primary-foreground: var(--neutral-0);
     --destructive: hsl(0 72% 50%);
     --destructive-foreground: var(--neutral-0);
-    --ring: hsl(24 10% 10%);
+    /* BG.W-DESHADCN — the house focus-accent register. RENAMED off the shadcn
+       `--ring` token (clean break, no alias — the de-shadcn break). Every
+       `.focus-ring`/`--focus-ring-shadow` reader + the input-fold + the
+       configurator crown resolve THIS token; the theme-bridge `--color-ring`
+       (the shadcn `ring`/`outline-ring` utility surface) is DELETED. */
+    --focus-ring-color: hsl(24 10% 10%);
     --shadow: hsl(24 10% 10%);
     --shadow-color: var(--foreground);
 
+    /* BG.W-DESHADCN — the `ai` button label ink (token-first, off the raw
+       `text-amber-700` tailwind palette). Warm-amber, calibrated to read on the
+       light glass surface; the dark arm lifts it in dark-arm.css (the plain
+       per-mode pair idiom). Read as `text-(--accent-ai-ink)`. */
+    --accent-ai-ink: oklch(0.55 0.13 75);
+
     /* AQ.W2 §4 — native-control accent. `accent-color` is an inherited
        built-in <color>, so per the §2b resolve-late discipline it reads a
        dedicated UNREGISTERED token set per-mode (NOT light-dark()) and is
        re-specified inside `.dark` — otherwise the accent freezes to the
        light shade at the cascade root. Light: muted-black checkmarks /
-       sliders on warm cream. Dark arm (`.dark`) reads `--ring` (mid-tone),
-       not the near-white dark `--primary`, so a checkbox's white checkmark
-       keeps contrast headroom (accent-color.md §5). */
+       sliders on warm cream. Dark arm (`.dark`) reads `--focus-ring-color`
+       (mid-tone), not the near-white dark `--primary`, so a checkbox's white
+       checkmark keeps contrast headroom (accent-color.md §5). */
     --accent-color: var(--primary);
 
     /* Border hairline at whisper alpha — the canonical rung for

package/src/styles/tokens/dark-arm-glass.css

@@ -0,0 +1,55 @@
+/* tokens/dark-arm-glass.css
+   The .dark saturate/brightness luminosity-lift companion cohort (BA.W-DARK-MATERIAL scope 2): the dark transmissive --glass-saturate-* knobs + the composed --glass-blur-* rungs (the "dark glass glows where light passes" lift) + the BB.W-DEEP-GLASS dark --glass-blur-deep arm.
+   Carved from tokens/dark-arm.css to hold the no-god-module 500-line bound (BI.W-STYLE-REDRAIN); its own .dark block @import-ed by tokens.css IMMEDIATELY AFTER dark-arm.css. These tokens are the sole .dark writers, so the relocation is cascade-order-invariant (computed values byte-identical). */
+.dark {
+    /* BA.W-DARK-MATERIAL scope 2 — dark glass is TRANSMISSIVE. The dark rung
+       backdrop-filter carries a saturate/brightness LUMINOSITY LIFT (the iOS-dark
+       "dark glass glows where light passes" model) so a backdrop GLOWS through the
+       plate instead of dying behind it. The light arm sits at saturate(1.05) — over a
+       near-black canvas that reads as no transmission; the dark arm lifts it so the
+       aurora/page behind reads with chroma + a glow. The blur() RADIUS is the
+       light-arm primitive UNTOUCHED (W-GLASS-CAL owns the radius dial-back) — only the
+       saturate/brightness COMPANIONS lift here. The lower rungs lift more (they're
+       thinner, the backdrop carries the read); the heavy overlay lifts least.
+
+       BC.W-GLASS-LEGIBILITY-MEASURED — the per-rung `--glass-saturate-{tier}` knob
+       (the speedtest-AX BC-W10 fold) is the SAME named register as the light arm
+       (tokens/glass.css), per-mode — the dark identity. The dark values ARE this
+       scope's luminosity lift (wash/quiet 1.35, resting 1.30, floating 1.28, overlay
+       1.22) become the dark token defaults, and each `--glass-blur-{tier}` reads
+       `saturate(var(--glass-saturate-{tier}))` THROUGH — so a `.dark` override re-
+       resolves the rung saturation with ZERO recipe edit, AND the composed dark blur
+       is BYTE-IDENTICAL to the old baked literal. The `brightness()` companions stay
+       baked (this fold mints ONLY the saturate knob). The dark dock/deep saturate stay
+       baked (off-ladder footprint rungs, not part of the {wash..overlay} ladder).
+       Machine-locked by `proof:glass-legibility` L7. */
+    --glass-saturate-wash:     1.35;
+    --glass-saturate-quiet:    1.35;
+    --glass-saturate-resting:  1.30;
+    --glass-saturate-floating: 1.28;
+    --glass-saturate-overlay:  1.22;
+    --glass-blur-wash:     blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)) brightness(1.18);
+    --glass-blur-quiet:    blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.16);
+    --glass-blur-resting:  blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)) brightness(1.14);
+    --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)) brightness(1.10);
+    --glass-blur-overlay:  blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)) brightness(1.06);
+    /* BG.W-CLOSEFIX-9SITE — the dark `--glass-blur-dock` chain (`--glass-saturate-dock`
+       + the composite) RETIRED with its light-arm sibling (clean break, no alias). The
+       dark dock reads the dark `--glass-blur-resting` (its saturate + luminosity lift)
+       through the `--dock-surface-blur: var(--glass-blur-resting)` peer. */
+
+    /* BB.W-DEEP-GLASS — the DARK arm of the OPT-IN deep tier (the luminous-dark
+       deep mirror, the W-DARK-MATERIAL scope-2 "dark glass glows where light
+       passes" model). The deep tier is even more transmissive in dark — the deep
+       dark glass glows MORE where the backdrop passes — so its saturate/brightness
+       companion lifts HARDER than the calm dark floating (1.28/1.10): the deep
+       arm carries saturate(1.55) brightness(1.16), in LOCKSTEP with the light deep
+       arm (which sits at saturate 1.5 / depth-LERPed, glass-deep.css). The RADIUS
+       is the SAME --glass-blur-deep-active-radius × --glass-level (radius-only
+       across modes, the §2c discipline — only the saturate/brightness companions
+       differ between light/dark). This is a SEPARATE deep token the calm dark
+       ladder never reads (CALM-UNCHANGED in dark too — proof:glass-cal GREEN). */
+    --glass-blur-deep:
+        blur(var(--glass-blur-deep-active-radius))
+        saturate(1.55) brightness(1.16);
+}