@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/glass/squircle.css

@@ -1,66 +1 @@
-/* glass/squircle.css
-   The AX.W56 rounded-vs-squircle policy + the @supports (corner-shape: superellipse(2)) squircle coupling onto the overlay-band glass. After the base ladder (overrides it).
-   Carved from the glass.css cascade root; @import-ed by glass.css in cascade
-   order, each in its own @layer components (isomorphic to the monolith).
-   See docs/precepts/design-idioms.md §cohesion-aware partials. */
-/* ── AX.W56 — the rounded-vs-squircle POLICY (re-homes AW.W23's squircle) ─────
-   Cards, glass buttons, and pills stay ROUND. The earlier AW.W23 block applied
-   `corner-shape: squircle` to `.glass-card`/`.glass-btn`/`.btn-pill`, which
-   inverted the design intent — the superellipse is imperceptible at a 16px card
-   radius or a stadium pill, so the squircle on those surfaces was visual cost
-   without read. The squircle is RE-HOMED onto the one surface where it reads: the
-   big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
-   `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
-   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
-   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
-   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
-   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
-   re-add a squircle rule to the card/button/pill surfaces — they are round by
-   policy. */
-
-/* ── AX.W56(R1) + W56b — squircle coupling onto the large-radius glass FAMILY ───
-   W54 makes GLASS the default for the overlay-band surfaces; W56(R1)+W56b couple
-   the SQUIRCLE onto the whole LARGE-RADIUS glass family — Dialog + Sheet content
-   (`.glass-floating.{rounded-dialog,sheet-animate}`), the Configurator/floating
-   PANEL (`.configurator`, `.floating-panel`), and the glass HERO overlay
-   (`.glass-hero`, the thin opt-in utility the page-redesign hero reads). Every one
-   sits AT or ABOVE the ~--radius-xl threshold where the superellipse READS — the
-   same iOS-26 idiom the big-dock card shell carries (the backdrop-filter blur halo
-   + the cartoon under-shadow follow the shape). Each surface reads its OWN
-   tokenized `var(--corner-shape-<surface>)` (theme.css) so it is independently
-   overridable — never a blanket `.glass-floating` rule (data cards + pills stay
-   round by policy; the compound selectors scope to the named surface only). Mirrors
-   the big-dock idiom EXACTLY: an `@supports`-gated ENHANCEMENT (Chrome 139+, no
-   FF/Safari 2026) over the `border-radius` round CONTRACT — the squircle is the
-   better tier, NOT a degraded fallback. The `@supports` condition tests the LITERAL
-   `superellipse(2)` (a `var()` is not evaluable in an `@supports` query) — the same
-   Chrome-139 feature the token resolves to. */
-@layer components {
-    @supports (corner-shape: superellipse(2)) {
-        .glass-floating.rounded-dialog {
-            corner-shape: var(--corner-shape-dialog);
-        }
-        .glass-floating.sheet-animate {
-            corner-shape: var(--corner-shape-sheet);
-        }
-        .configurator,
-        .floating-panel {
-            corner-shape: var(--corner-shape-panel);
-        }
-        .glass-hero {
-            corner-shape: var(--corner-shape-hero);
-        }
-    }
-}
-
-/* ── The glass HERO opt-in utility (W56b fold 7) ────────────────────────────────
-   A thin large-radius editorial glass OVERLAY — distinct from a data Card (which
-   stays round by policy). It is the surface the page-redesign hero (W60) reads;
-   minting it here (with its consumer) keeps the squircle off every `.glass-card`.
-   The corner-shape squircle rides the `@supports` block above; the un-gated
-   `border-radius` here is the cross-engine round CONTRACT. */
-@layer components {
-    .glass-hero {
-        border-radius: var(--radius-2xl);
-    }
-}
+@layer components { @supports (corner-shape: superellipse(2)) { .glass-floating.rounded-dialog { corner-shape: var(--corner-shape-dialog); } .glass-floating.sheet-animate { corner-shape: var(--corner-shape-sheet); } .configurator { corner-shape: var(--corner-shape-panel); } } }

package/dist/styles/glass/surface-axis.css

@@ -1,113 +1 @@
-/* glass/surface-axis.css — the ONE shared {glass·veil·opaque} surface-decoration
-   axis (BA.W-SURFACE-AXIS).
-
-   The house minted `--glass-level` (the opacity knob, AX.W54) and `--glass-tint-*`
-   (the legibility seam, AX.W55) as SHARED inheriting axes, but left the
-   {glass·veil·opaque} surface-DECORATION choice as a per-component one-off
-   (`<Card>` had the only true axis; `<Dialog>` a binary string; everyone else
-   none). This seam factors that choice ONCE — every enrolled surface composes a
-   base glass tier + the `[data-surface]` attribute, and these rules apply the
-   three-rung decoration UNIFORMLY:
-
-     glass   — the resolved tier's plain glass rung (IDENTITY; no rule needed —
-               the bare tier paints).
-     veil    — the borderless/rimless text-legibility plate: the `--glass-bg-quiet`
-               fill + blur with the box border AND rim STRIPPED (the boxed look
-               reads as a dividing line on a text plate). Reads `--glass-bg-quiet`
-               + the W55 `--glass-tint-*` seam through the SAME `--glass-*` ladder,
-               so `--glass-level` / the bright-bucket darken retune it in lockstep
-               with every glass surface — NO veil-local recipe fork.
-     opaque   — the `--glass-level:0` solid-card escape (the `.glass-opaque` rung):
-               solid `--card` + `blur(0)` through the ONE level knob, the tint axis
-               zeroed (a solid plate has no translucent backdrop to darken-over).
-
-   NO second axis: `cartoon` stays a Card-local decoration (it is NOT a
-   {glass·veil·opaque} member — the shared axis is the three-rung MATERIAL
-   decoration; cartoon rides Card's own `surface` superset). The `Surface` union +
-   the `surfaceClass(surface, tier)` resolver are the TS half
-   (`src/components/ui/_shared/useSurfaceAxis.ts`); this file is the CSS half.
-
-   Cascade: `@layer components`, @import-ed AFTER ladder.css so the attr rules
-   (specificity 0-1-0, equal to the `.glass-*` classes) win by source order over
-   the base rung's border/box-shadow. */
-@layer components {
-    /* ── veil — the borderless text-legibility plate ──────────────────────────
-       Composes the SAME deltas as the `veil-surface` @utility (cards.css), keyed
-       off the SAME `--glass-bg-quiet` + `--glass-tint-*` tokens (no recipe fork).
-       Each delta is an overridable `--veil-*` rung so a consumer re-points the
-       plate to any other ladder rung. */
-    [data-surface="veil"] {
-        --veil-bg: color-mix(
-            in oklab,
-            var(--glass-bg-quiet),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        --veil-blur: var(--glass-blur-quiet);
-        /* The three veil deltas over a bare rung — each overridable. */
-        --veil-border: none;
-        --veil-shadow: none;
-        --veil-feather: none;
-
-        background: var(--veil-bg);
-        backdrop-filter: var(--veil-blur);
-        -webkit-backdrop-filter: var(--veil-blur);
-        border: var(--veil-border);
-        box-shadow: var(--veil-shadow);
-        /* The optional radial feather — a `mask-image` only painted when
-           `--veil-feather` is set to a gradient (default `none` = no mask = a
-           clean rectangle). `mask-image: none` is the identity. */
-        mask-image: var(--veil-feather);
-    }
-
-    /* ── opaque — the solid-card escape ───────────────────────────────────────
-       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
-       with `blur(0)`. A surface that ALSO carries a base tier keeps its glass
-       edge/rim/under-shadow (a solid plate with a glass edge, not a bare div).
-
-       THE SUBSTITUTION-VS-INHERITANCE TRAP (the recurring AX.W55 / dock-scale
-       class, live-found in the π readback): the `--glass-bg-*` tier tokens bake
-       `var(--glass-level)` at their `:root` DECLARATION (where level=1), so a
-       DESCENDANT element's `--glass-level: 0` does NOT re-resolve the `:root`-baked
-       `--glass-bg-floating` — the plate stayed translucent (α 0.8, NOT solid). The
-       `.glass-opaque` class works only when `--glass-level` is set at `:root` (the
-       cohesion fixture's pattern); a PER-ELEMENT opaque surface (the whole point of
-       `surface="opaque"`) needs the solid plate composed AT THE ELEMENT. So the
-       opaque rung sets the SOLID `--card` background + `blur(0)` DIRECTLY (the
-       level-0 endpoint resolved here, not via the baked token) — AND still flips the
-       `--glass-level: 0` / `--glass-tint-strength: 0%` knobs so a NESTED glass
-       descendant + any consumer reading the level scalar see the opaque register
-       coherently. The adaptive TINT axis is zeroed (a solid plate has no
-       translucent backdrop to darken-over — the bucket-INVARIANT contract). */
-    [data-surface="opaque"] {
-        --glass-level: 0;
-        --glass-tint-strength: 0%;
-        /* The SOLID --card plate composed at the element via the house color-mix
-           idiom (`--card` over transparent at 0% transparent = fully solid --card)
-           — functionally `var(--card)`, expressed as the cohesion-sanctioned mix
-           the token ladder already speaks. */
-        background: color-mix(in srgb, var(--card), transparent 0%);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-    }
-
-    /* ── .paper-ink-mark — the PAPER ink-hairline MARK register ────────────────
-       (BA.W-SURFACE-AXIS scope 8). The 2px `--foreground` ink mark on a paper
-       surface — NO plate, NO blur, NO glass. This is a MARK register, NOT a
-       `[data-surface]` plate rung: a `[data-surface]` value DECORATES a glass
-       plate (fill + edge + rim); `.paper-ink-mark` is the opposite — a bare ink
-       hairline drawn directly on paper, the math-paper section-rail / underline-
-       tab vocabulary. Recorded here (the surface-decoration seam) co-located with
-       the plate axis but DISTINCT from it — the canon note is in CLAUDE.md.
-
-       ≥2 consumers at birth: (1) the math-paper section rail (the `border-l-[3px]`
-       family composes it for a VERTICAL left-edge ink rail); (2) W-TABS's re-cut
-       underline indicator (a HORIZONTAL 2px ink mark — W-TABS CONSUMES this seam,
-       a shape gap there triumvirates HERE per the DAG §5 seam rule). The register
-       exposes ONE knob (`--paper-ink-mark-weight`, default 2px) + the ink color;
-       the consumer applies the weight on whichever edge/axis it draws (a left
-       `border-inline-start-width` rail, a bottom `block-size` underline). */
-    .paper-ink-mark {
-        --paper-ink-mark-weight: 2px;
-        --paper-ink-mark-color: var(--foreground);
-    }
-}
+@layer components { [data-surface="veil"] { --veil-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-blur: var(--glass-blur-quiet); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); backdrop-filter: var(--veil-blur); -webkit-backdrop-filter: var(--veil-blur); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); } [data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); backdrop-filter: none; -webkit-backdrop-filter: none; } .paper-ink-mark { --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .glass-well { --glass-well-tone: 8%; background: color-mix( in oklab, var(--card), var(--foreground) var(--glass-well-tone) ); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--radius-md); } }

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

@@ -0,0 +1 @@
+@layer components { .glass-pager-ring { display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: 0.625rem; padding-block: 0.3125rem; border-radius: var(--radius-pill); background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .dark .glass-pager-ring { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } @media (prefers-reduced-transparency: no-preference) { .glass-chromatic { box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim); } } }

package/dist/styles/glass/surfaces.css

@@ -1,401 +1 @@
-/* glass/surfaces.css
-   The convenience-shorthand surfaces — .glass-card / .glass-pill / .glass-btn + the glass pill-input + the chromatic edge-dispersion rim fringe.
-   Carved from the glass.css cascade root; @import-ed by glass.css in cascade
-   order, each in its own @layer components (isomorphic to the monolith).
-   See docs/precepts/design-idioms.md §cohesion-aware partials. */
-@layer components {
-    /* ── Convenience shorthands (tier + shape) ── */
-
-    /* Static surface utility — no hover lift, no transition.
-       Interactive cards live in <Card> (which owns its own hover composition)
-       or in components that explicitly opt into a hover variant. */
-    .glass-card {
-        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
-           `:has(:focus-visible)` rule redefines them (one source, shared with
-           the fallback). */
-        --card-focus-shadow: var(--shadow-card);
-        --card-focus-border: var(--glass-border-quiet);
-        position: relative;
-        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
-        backdrop-filter: var(--glass-blur-quiet);
-        /* BB.W-GLASS-ACCENT — the card border feeds its focus-elevation ink into the
-           accent-composed `--glass-border-accent` (ladder.css rim group); byte-
-           identical at 0% strength. The focus rung still re-points `--card-focus-
-           border`, which flows through `--glass-border-rung`. */
-        --glass-border-rung: var(--card-focus-border);
-        border: 1px solid var(--glass-border-accent);
-        border-radius: var(--radius-card);
-        box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
-        /* AY.W-A11Y-PERF O-4 — upgrade `layout style` → include `paint` so the
-           maximal-glass nested backdrop-filter sample (a glass Button in this card)
-           does not escape the card box (the standard nested-backdrop-cost mitigation;
-           `contain: paint` clips DESCENDANTS only — the card's own rim/drop-shadow is
-           NOT clipped, device-verified). */
-        contain: layout style paint;
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-
-    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
-       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
-       `@supports not selector(:has(*))` class fallback (below) ships anyway
-       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
-    .glass-card:has(:focus-visible) {
-        --card-focus-shadow: var(--shadow-md);
-        --card-focus-border: var(--glass-border-floating);
-    }
-
-    /* ── Glassmorphic circular icon button ── */
-
-    /* BA.W-DEMO-AFFORDANCES (IG-A4) — the two size registers below are
-       MUTUALLY EXCLUSIVE; never stack `.glass-btn` and `.btn-pill` on one
-       element. `.glass-btn` is the FIXED-square icon primitive (width/height:
-       var(--size-icon-btn) + contain:paint) — `.btn-pill` is the CONTENT-WIDTH
-       text pill. Stacked, the fixed square wins and contain:paint clips the
-       wrapped label into a ~40px blob (the R8-17 "play button" defect). A
-       text-bearing `.glass-btn` collapses the same way even without `.btn-pill`.
-       For a play/replay affordance reach for <StoryPlayButton> (demo) or a real
-       <Button> with a leading Lucide glyph, never an icon-button carrying text.
-       Machine-locked by proof:demo-affordances (W1 — no class co-occurrence,
-       no text-bearing icon button). */
-    .glass-btn {
-        @apply flex items-center justify-center cursor-pointer;
-
-        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
-           mints the stacking context once so the hover/press scale below does
-           not flicker it into being (the z-index/anchor hazard). */
-        scale: 1;
-        width: var(--size-icon-btn);
-        height: var(--size-icon-btn);
-        border-radius: var(--radius-pill);
-        border: 1.5px solid var(--glass-border-wash);
-        background: var(--glass-bg-wash);
-        backdrop-filter: var(--glass-blur-wash);
-        /* AY.W-A11Y-PERF O-4 — paint containment so the glass button's own
-           backdrop-filter sample stays inside the box when it nests in a glass card /
-           dialog / dock (the nested-backdrop-cost mitigation; clips descendants only,
-           the button's own rim/shadow is unaffected — device-verified). */
-        contain: paint;
-        color: var(--muted-foreground);
-        /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
-           the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
-           so the icon-button hover settles on the SAME ONE register as `.btn-pill` /
-           `.tap-squish` / `btn-interactive` (the gate asserts one scale register
-           across all four). The press still reads crisp — `--spring-smooth` ζ=0.86
-           settles fast without a visible bounce. */
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth);
-    }
-
-    .glass-btn:hover:not(:disabled) {
-        background: color-mix(in srgb, var(--background) 85%, transparent);
-        border-color: var(--surface-tint-22);
-        color: var(--foreground);
-        scale: var(--scale-hover);
-    }
-
-    .glass-btn:active:not(:disabled) {
-        scale: var(--scale-press);
-    }
-
-    .glass-btn:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    .glass-btn:disabled {
-        opacity: 0.35;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    .glass-btn.is-active,
-    .glass-btn[aria-pressed="true"] {
-        background: var(--surface-tint-10);
-        border-color: var(--surface-tint-25);
-        color: var(--foreground);
-    }
-
-    /* ── Pill button base ─────────────────────────── */
-    .btn-pill {
-        @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
-
-        /* AX.W52 §6 identity base — `scale: 1` at rest so the hover/press scale
-           below animates the `scale` longhand (not `transform`) coherently and
-           does not flicker the stacking context into being (AQ.W3 §W3.2). */
-        scale: 1;
-        /* AX.W51 D18 — the pill GEOMETRY rides the ONE `--ui-scale` comfort axis.
-           gap / padding scale by the master scalar; the font reads the
-           `--control-text` register (`calc(--type-small * --ui-scale)`, the same
-           `text-sm` register the Button CVA paints), so a bare `.btn-pill` consumer
-           and a `<Button>` agree on the control font, and ONE `--ui-scale` override
-           grows the pill's height (via padding) + gap + font in lockstep. Desktop
-           default is the identity (scale 1 → the prior proportion). */
-        gap: calc(0.375rem * var(--ui-scale));
-        border-radius: var(--radius-pill);
-        padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
-        font-size: var(--control-text);
-        /* AX.W52 — the ONE coherent button transition (RED witness 5/6). The
-           SURFACE legs (bg/border/box-shadow/color/opacity) ride the bezier
-           `--ease-standard` (a colour cross-fade reads as a wobble on a spring);
-           the TRANSFORM leg (`scale`) rides `--spring-smooth` (the sub-perceptual
-           settle), so the hover lift + the surface cross-fade read as ONE glide.
-           The DEAD `transform` leg is retired — the variants animate the `scale`
-           longhand. CRITICAL: `.tap-squish` (composed alongside on the button
-           base, utilities.css) ALSO lists this full coherent set, so neither
-           class's `transition` shorthand can clobber the other down to a
-           scale-only animation — the cascade bug that left every button
-           transitioning ONLY `scale` (the live-readback RED, RED witness 5). The
-           doctrine: surface-props→bezier, transform→spring (tokens.css §2). */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            opacity var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth);
-    }
-
-    .btn-pill > * {
-        @apply flex-shrink-0;
-    }
-
-
-    .btn-pill:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    /* ── Glass-button backdrop ─────────────────────────────────────────────
-       AX.W52 — the `glass`/`glass-wash` Button variants compose `.glass-wash`,
-       which resolves `--glass-blur-wash` = `blur(1px)` — a sub-perceptual
-       diffusion authored for a small detail TILE, not a button the user reads
-       as "glass" (the live readback found the glass variants at a negligible
-       1px). A hero control wants a real glass blur. `.btn-glass` re-points the
-       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
-       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
-       button variants actually read as liquid glass while the wash TILE tier
-       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
-       Lightning CSS emits the `-webkit-` companion per the single-source
-       authorship discipline above (hand-authoring both forms makes Lightning
-       dedup-and-keep-prefixed, which modern Chromium then drops). */
-    .btn-glass {
-        backdrop-filter: var(--glass-blur-btn);
-
-        /* BB.W-BUTTON-GLASS (d) — the button-scoped DEPTH stack + the hover-specular
-           bump. The glass button was the flattest wash rung (a bare backdrop-filter,
-           no rim, no under-shadow) — it read as a tinted rectangle, not a lifted
-           glass lozenge. The `--glass-btn-*` knobs compose ALREADY-MINTED tokens (the
-           `--glass-edge-light` rim + the `quiet`/`resting`-tier `--glass-under-shadow-*`
-           drop) so a consumer retints the whole button depth from ONE override; NO new
-           compositing axis. The rim+under-shadow lifts the lozenge; the box-shadow is
-           additive over the variant's own focus/press shadow legs (the `.btn-pill`
-           transition carries box-shadow on the §6 bezier, so the depth cross-fades
-           coherently). */
-        --glass-btn-rim: var(--glass-edge-light);
-        --glass-btn-under-shadow: var(--glass-under-shadow-quiet);
-        --glass-btn-under-shadow-hover: var(--glass-under-shadow-default);
-        box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow);
-        /* The button-scoped hover gleam bump (0.10 → ~0.14): a hovered glass button
-           reads a notch brighter at the grazing edge than the global hover whisper.
-           Token-scoped to `.btn-glass` (NOT the global `:root` cohort property-regs.css
-           owns) so only the button lifts. The active/rest rungs ride the global cohort
-           (the press whisper + the dormant rest). */
-        --glass-specular-intensity-hover: var(--glass-specular-btn-hover);
-    }
-
-    /* BC.W-BUTTON-GLASS-IOS (move 2 / BG-IOS-2) — the hero CTA reaches DEEP glass.
-       `.btn-glass` reads `--glass-blur-btn` (not `--glass-blur-floating`), so the bare
-       `.glass-deep` axis (which re-points `--glass-blur-floating`) does not deepen a
-       button. This arm re-points `--glass-blur-btn` onto the deep family — the SAME
-       token-substitution model `.glass-deep` uses (glass/deep.css), composing the ONE
-       deep axis, NOT a new blur recipe. So a `default`/`primary-audacious` hero CTA
-       reads the apple.com-nav-grade thick refractive liquid glass (16px / saturate 1.5
-       family, `--glass-blur-deep`), while the plain content tiers + the quieter
-       `outline`/`secondary`/`accent` glass buttons stay calm at the floating-tier
-       `--glass-blur-btn`. The deep BLUR is budget-FREE (the W-LENSING budget binds the
-       `:liquid` SVG lens, not the deep-blur tier). The a11y `--glass-level:0` brackets
-       reach it for free (the deep blur composes `--glass-level`, the opaque-escape path). */
-    .btn-glass.glass-deep {
-        --glass-blur-btn: var(--glass-blur-deep);
-    }
-
-    /* The depth deepens one rung on hover (the lifted-lozenge read) — additive over
-       the variant's own hover surface legs. The variants paint the bg/border on
-       hover; this adds the deeper drop. */
-    .btn-glass:hover:not(:disabled, [data-disabled]) {
-        box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow-hover);
-    }
-
-    /* BC.W-BUTTON-GLASS-IOS (move 3 / BG-IOS-4) — the press is COUPLED (W-MOTION-CANON
-       P3): the ONE `--glass-btn-press-t` 0..1 spring drive (Button.vue writes it off
-       `useSpringPress`) feeds BOTH the squish (the `useLiquidFlex` reciprocal X/Y deform,
-       Button.vue) AND a SPECULAR brightness leg here — the touch-ILLUMINATION (apple-
-       ios27.md §2.5 ".interactive() → scale + bounce + shimmer + touch-illumination").
-       During the press the button's specular tracks the SPRING (not the binary `:active`
-       toggle material.css sets): `--specular-intensity` LERPs from the hover gleam toward
-       the active gleam as `--glass-btn-press-t` travels, so the gleam ILLUMINATES on the
-       SAME spring scalar as the squish (the glass reads as DEFORMING-AND-BRIGHTENING with
-       the spring's alive overshoot, not a uniform shrink). It reads the EXISTING
-       `--glass-specular-intensity-{hover,active}` cohort (property-regs.css) — no new
-       token, ONE drive two legs. Specificity ties material's `.glass-wash:active::before`
-       (0,2,1) and wins by source-order-after (surfaces.css @import-s after material.css),
-       so the button press follows the spring; the hover gleam + the no-JS `:active` floor
-       are untouched. */
-    .btn-glass:active::before {
-        --specular-intensity: calc(
-            var(--glass-specular-intensity-hover) +
-            (var(--glass-specular-intensity-active) - var(--glass-specular-intensity-hover)) *
-            var(--glass-btn-press-t)
-        );
-    }
-
-    /* BB.W-BUTTON-GLASS (a) — the ELEMENT-LEVEL oklab-tinted hover/active fill pair
-       (the substitution-vs-inheritance trap fixed on the button register). The glass
-       button variants painted `hover:bg-(--glass-bg-resting) active:bg-(--glass-bg-
-       floating)` — the RAW `:root` rung tokens, which carry NO `color-mix(in oklab, …,
-       --glass-tint-source --glass-tint-strength)` wrapper. So the W55 adaptive darken
-       + the `contrast-color()` ink flip + the content-tier floor (all of which the REST
-       bg `.glass-wash` composes via the element-level oklab seam) DROPPED the moment the
-       pointer landed — "more glass would cost legibility" exactly inverted from the
-       iOS-27 ask. These two tokens wrap the raw rungs in the SAME element-level oklab
-       seam `ladder.css` composes for the rest bg + `--glass-bg-dock` for the dock — ZERO
-       new compositing axis, the literal darken-over-light recipe reached at the lit
-       fill. ZERO-delta at the `--glass-tint-strength: 0%`/floor default (the mix toward
-       the source is 0%); under the declared/sampled bright bucket the lit fill darkens
-       to AA in lockstep with the rest bg. The `:root` raw `--glass-bg-*` tokens are
-       UNTOUCHED (other surfaces compose them at the element correctly — the raw token +
-       the element-level oklab wrapper is the correct ladder shape). */
-    /* BC.W-TABS-IOS — the tinted-FLOATING seam lifted off the `.btn-glass`-only scope
-       onto a SHARED `:where()` so the iOS-27 segmented-control active pill reads the
-       SAME element-level oklab-tint floating fill the glass button reads (the
-       substitution-over-redeclaration discipline: ONE tinted-floating source, NOT a
-       tab-local fork). The pill's active plate now reaches the W55 darken-over-bright
-       seam — over a bright field the pill darkens-to-legible, over a calm field it
-       stays warm-cream/near-white (the iOS adaptive register reaching the pill).
-       ZERO-delta at the `--glass-tint-strength: 0%`/floor default. */
-    :where(.btn-glass, .segmented-indicator) {
-        --glass-bg-floating-tinted: color-mix(
-            in oklab,
-            var(--glass-bg-floating),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-    }
-    .btn-glass {
-        /* BC.W-BUTTON-GLASS-IOS (BG-IOS-6) — the `quiet` rung gains the SAME element-
-           level oklab-tint wrapper so the de-shadcn `outline`/`secondary` reskin (the
-           QUIETER glass register, prominence-by-tint) reaches the W55 darken on its lit
-           fill too — ZERO new compositing axis, the SAME seam the resting/floating pair
-           composes. The floating rung is minted on the shared `:where()` seam ABOVE
-           (the tab pill reads it too); quiet + resting stay button-scoped (the
-           hover/active fill register the segmented pill does not engage). */
-        --glass-bg-quiet-tinted: color-mix(
-            in oklab,
-            var(--glass-bg-quiet),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        --glass-bg-resting-tinted: color-mix(
-            in oklab,
-            var(--glass-bg-resting),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-    }
-
-    /* BB.W-BUTTON-GLASS (e) — the optional refraction-edge opt-in. CONSUMES the
-       EXISTING refraction axis (glass-refract.css, the `#glass-refract` SVG-filter
-       lens, `@supports (backdrop-filter: url(#…))`-gated with the un-gated blur base
-       as the off-Chromium floor) — NEVER a button-local lens fork. BB.W-LENSING landed
-       the squircle bevel-profile + the typed `--glass-refract` axis + the `.glass-lens`
-       opt-in class (renamed off `.glass-refract`, clean break); the button COMPOSES
-       `.glass-lens`.
-
-       A `<Button :liquid>` adds `.glass-lens` to the host; on a supporting engine the
-       button reads the edge-bend over its blur base. The base recipe (the
-       `@supports`-gated `.glass-lens` rule in glass-refract.css) already paints the
-       displacement filter over `--glass-blur-resting`; this block adds NOTHING to the
-       filter graph (it would fork the axis) — the button merely COMPOSES `.glass-lens`.
-
-       The `:active` LENS-SWELL is the CHEAP coupled read, NOT a per-frame displacement-
-       map re-rasterize (the §Triumvirate / R2 budget: `feDisplacementMap` is resize-
-       expensive — only the `scale` attr animates without rebuilding the map, and even
-       that re-rasterizes; the one-refractive-element-per-route budget forbids the per-
-       frame cost). The swell is the press SQUISH (Button.vue, the `useLiquidFlex`
-       reciprocal X/Y deform) + the coupled `--glass-specular-intensity-active` gleam
-       lift on the SAME `--glass-btn-press-t` drive — the glass reads as DEFORMING under
-       the press without re-rasterizing the lens map. Off-Chromium the whole arm degrades
-       to the un-gated `.btn-glass` blur+tint base (the no-workaround floor). The
-       `--glass-btn-press-t` typed drive (property-regs.css) is the ONE press scalar the
-       squish + the gleam coupling both read. */
-    .btn-glass.glass-lens {
-        /* The press drive scalar (0 rest → 1 pressed) Button.vue writes off the spring;
-           the resting default is 0 so an unwired refraction button is the static lens.
-           The `:active` LENS-SWELL on this drive lives in material.css's `.glass-lens`
-           block (`--glass-refract` bumps on press); this block only floors the drive. */
-        --glass-btn-press-t: 0;
-    }
-
-    /* The .input-pill / .control-surface form-control REST register is carved into
-       glass/control-surfaces.css (a cohesive sub-concern, the no-god-module re-drain)
-       — @import-ed by glass.css IMMEDIATELY AFTER surfaces.css, same @layer components,
-       same source order (byte-isomorphic). */
-
-    /* ── BA.W-PAGER — the glass pager pill chassis (.glass-pager-ring) ──────────
-       The ONE pager-CHASSIS ring register: a `--radius-pill` glass-floating pill
-       (the DockRail-chip recipe — `--glass-bg-floating` + `--glass-blur-floating`
-       + `--glass-edge-light`/`--glass-specular` + the soft drop + the `.dark`
-       box-shadow arm). It encapsulates BOTH the `<PagerDots ring>` dot rail AND
-       the `<CarouselPager>` counter (the counter re-registers OFF the opaque
-       `bg-card` slab onto this — the R9/R10-5 dark-slab class dies in the same
-       edit). NEVER an opaque `bg-card` plate: this is the house "controls in a
-       glass pill" idiom, translucent (reads the substrate through it), already
-       dark/light-safe, already specular-rimmed (≥2-consumer-proven on the dock
-       rail-extend chips + the dock collapsed pill). The legibility floor over the
-       carousel's image content rides the SAME rebuilt registers
-       (W-DARK-MATERIAL/W-NO-GRAY) — no local opaque fallback. */
-    .glass-pager-ring {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding-inline: 0.625rem;
-        padding-block: 0.3125rem;
-        border-radius: var(--radius-pill);
-        background: var(--glass-bg-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-        /* §6 EASING DOCTRINE — the surface channel cross-fades on the bezier
-           `--ease-standard` (NEVER a spring; a surface prop on a spring is the
-           violation). */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-    .dark .glass-pager-ring {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-
-    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
-       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
-       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
-       box-shadow). The fringe is a transparency garnish, so it composes ONLY
-       under `prefers-reduced-transparency: no-preference` and drops under
-       `reduce` (handled by the bracket below). The fringe lands as a dedicated
-       inset box-shadow pair on the material surface so it adds onto the rim. */
-    @media (prefers-reduced-transparency: no-preference) {
-        .glass-chromatic {
-            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
-        }
-    }
-}
+@utility glass-fill { --glass-fill: color-mix( in oklab, var(--glass-fill-rung, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); background: var(--glass-fill); } @property --glass-blur-engage-t { syntax: "<number>"; inherits: false; initial-value: 0; } :root { --glass-blur-engage-knee: 0.35; } @layer components { .glass-card { --card-focus-shadow: var(--shadow-card); --card-focus-border: var(--glass-border-quiet); position: relative; --glass-fill-rung: var(--glass-bg-quiet); @apply glass-fill; backdrop-filter: var(--glass-blur-quiet); --glass-border-rung: var(--card-focus-border); border: 1px solid var(--glass-border-accent); border-radius: var(--radius-card); box-shadow: var(--glass-material-rim), var(--card-focus-shadow); transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .glass-card:has(:focus-visible) { --card-focus-shadow: var(--shadow-md); --card-focus-border: var(--glass-border-floating); } .glass-btn { @apply flex items-center justify-center cursor-pointer; scale: 1; width: var(--size-icon-btn); height: var(--size-icon-btn); border-radius: var(--radius-pill); border: 1.5px solid var(--glass-border-wash); background: var(--glass-bg-wash); backdrop-filter: var(--glass-blur-wash); color: var(--muted-foreground); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--spring-smooth); } .glass-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--background) 85%, transparent); border-color: var(--surface-tint-22); color: var(--foreground); scale: var(--scale-hover); } .glass-btn:active:not(:disabled) { scale: var(--scale-press); } .glass-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .glass-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .glass-btn.is-active, .glass-btn[aria-pressed="true"] { background: var(--surface-tint-10); border-color: var(--surface-tint-25); color: var(--foreground); } .btn-pill { @apply inline-flex items-center justify-center cursor-pointer font-medium border-none; scale: 1; gap: calc(0.375rem * var(--ui-scale)); border-radius: var(--radius-pill); padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale)); font-size: var(--control-text); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--spring-smooth); } .btn-pill > * { @apply flex-shrink-0; } .btn-pill:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; } .btn-glass { backdrop-filter: var(--glass-blur-btn); --glass-btn-rim: var(--glass-edge-light); --glass-btn-under-shadow: var(--glass-under-shadow-quiet); --glass-btn-under-shadow-hover: var(--glass-under-shadow-default); box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow); --glass-specular-intensity-hover: var(--glass-specular-btn-hover); } .btn-glass.glass-deep { --glass-blur-btn: var(--glass-blur-deep); } .btn-glass:hover:not(:disabled, [data-disabled]) { box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow-hover); } .btn-glass:active::before { --specular-intensity: calc( var(--glass-specular-intensity-hover) + (var(--glass-specular-intensity-active) - var(--glass-specular-intensity-hover)) * var(--glass-btn-press-t) ); } :where(.btn-glass, .segmented-indicator, .glass-capsule) { --glass-bg-floating-tinted: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); } .btn-glass { --glass-bg-quiet-tinted: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); } .btn-glass.glass-lens { --glass-btn-press-t: 0; } }