@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/glass/surfaces.css

@@ -1,411 +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-capsule) {
-        --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); the quiet rung stays 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)
-        );
-    }
-
-    /* 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);
-        /* BD.W-GOO-CAROUSEL-DECK — the element-level oklab TINT seam (NOT the raw
-           pre-substituted `--glass-bg-floating` :root token — the gray-hole
-           substitution-trap). At the `--glass-tint-strength: 0%` default this is the
-           no-op floor (`color-mix(in oklab, X, src 0%) ≡ X` — byte-identical pager pixels
-           over a flat page); over a declared/sampled BRIGHT carousel image
-           (`@container style(--glass-backdrop: light)`) the pill darkens-toward-ink for a
-           real silhouette (the W55 ≤24% clamp keeps it translucent); under `.dark` the
-           W-DARK-MATERIAL tint arm LIFTS it toward luminous warm-dark, never a charcoal
-           slab. `in oklab` is the glass-tint perceptual family (the in-srgb
-           `--surface-tint-*` brand fence is untouched). The dock `--glass-bg-dock`
-           self-re-point precedent applied to the pager chassis. */
-        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);
-        /* §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; } }

package/dist/styles/glass-refract.css

@@ -1,114 +1 @@
-/* BB.W-LENSING — the #glass-refract edge-lensing SVG filter, EVOLVED off the
- * AW.W23 crude-radial garnish onto the real squircle bevel-profile + the typed
- * `--glass-refract` axis driving the animatable displacement `scale` (the press
- * lens-swell). Shipped as a library asset so `.glass-lens` works OUT OF THE BOX
- * (no consumer hand-mounts a filter node).
- *
- * The refraction recipe is the canonical 3-primitive graph (kube.io / ekino /
- * LogRocket, 2025):
- *
- *   feImage          — the displacement map computed from the convex-squircle
- *                      surface profile  f(x) = ⁴√(1 − (1 − x)⁴)  (Apple's preferred
- *                      corner curve) via Snell's law (n₁ = 1 air, n₂ = 1.5 glass).
- *                      The map's R channel carries the x-shift and G the y-shift
- *                      (neutral 128 = no shift). The squircle slope is near-flat past
- *                      the outer ~14% band and STEEP at the rim, so the bend
- *                      CONCENTRATES at the edge (thin interior) — the iOS edge-lensing
- *                      read, NOT a uniform radial bulge (the retired AW.W23 placeholder).
- *                      Encoding: TWO crossed linear gradients — a HORIZONTAL gradient
- *                      drives the R channel (255 @0% → 128 across the flat interior →
- *                      0 @100%, the squircle ramp held in the bevel band) and a VERTICAL
- *                      gradient drives the G channel the same way — SCREEN-composited
- *                      over a black base so each channel carries its own axis EXACTLY
- *                      (`screen(C, 0) = C`; the displacement map reads only R/G, B unused).
- *                      The map carries ZERO color (the warm-cream identity HOLDS —
- *                      refraction is DEPTH not hue). The asset is baked ONCE (the
- *                      squircle CURVE is fixed, the Apple-preferred profile); only the
- *                      `scale` param animates the magnitude (scope 2 — no map re-bake).
- *   feDisplacementMap— displaces the backdrop by the baked map (R = x-shift,
- *                      G = y-shift, `scale` = max px the `--glass-refract` axis drives).
- *   feImage specular — a soft warm top-left specular highlight (PRESERVED from HEAD —
- *                      the polished-glass catch).
- *   feBlend screen   — blended `screen` over the displaced backdrop.
- *
- * DDR-LENS-BAKE — the displacement `scale` is a BAKED LITERAL (`scale='28'`, the §10
- * default depth), NOT a var()-driven axis. WHY (the reversal of BB.W-LENSING scope 2):
- * the scope-2 design split the filter across `var(--…head) var(--glass-refract) var(--…tail)`
- * to splice the typed `@property --glass-refract` value between a head ending `…scale='`
- * and a tail beginning `'…`. That construction is doubly broken, proven on the real edge
- * (Chromium, playwright):
- *   (1) PARSE — head/tail each carry a COMPLETE `url(…)`, so the composite is the three
- *       tokens `url("…") 28 url("…")`, which a `backdrop-filter` REJECTS. The lens
- *       computed-`backdrop-filter: none` — it never rendered. (A var() inside a single
- *       url() STRING token is not re-tokenised by the engine either — tested — so there
- *       is no CSS-legal path to a dynamic `scale` inside one self-contained data-URI.)
- *   (2) BUNDLER — the tail `url("'…")` starts with a bare quote, so a consumer's CSS
- *       url()-rewriter (vite/postcss) reads it as a relative asset path and fails
- *       `ENOENT: open ''`, breaking EVERY bundler-based consumer.
- * The fix: ONE complete, valid `url("data:…scale='28'…")` token. A `data:` URI is the
- * single form that both PARSES as a filter value AND is skipped by the url()-rewriter
- * (the rewriter only resolves non-data/non-#/non-http content as a file). RE-LITIGATE-IF
- * the platform ships a way to substitute a value into a url() string token (then the
- * press-swell `scale` animation could return). TRADEOFF: the per-instance `:active`
- * lens-swell (28→44 `scale` on press) is dropped — but it was already inert (it animated
- * a value that reached no rendering filter), so the lived read is UNCHANGED (and the lens
- * now actually renders). The `@property --glass-refract` reg + `--glass-refract-swell`
- * knob are retired with it. The bevel-band width is the `--glass-refract-bevel` knob
- * (default 14% — the iOS edge band); the baked stops fix the squircle CURVE, the knob
- * documents the rim concentration the map encodes.
- *
- * The filter ships INLINE as a data-URI in the `backdrop-filter` declaration, so the
- * consumer gets it with zero markup. `backdrop-filter: url(#…)` is Chromium-only (WebKit
- * bug 245510 open, Firefox not shipping), so the whole decl sits behind
- * `@supports (backdrop-filter: url(#…))`; a non-supporting engine paints the un-gated blur
- * base alone (no broken `url()` reference — the no-workaround degrade floor, PRESERVED).
- *
- * CLASS RENAME (BB.W-LENSING scope 5 — clean break, no alias, BB inv-7). The AW.W23
- * `.glass-refract` opt-in class is RENAMED to `.glass-lens` (the §2 vocabulary); the
- * `--glass-refract*` AXIS/token names are KEPT (the lens magnitude is the refraction
- * axis). Consumers (`<Button :liquid>`, the demo witness) compose `.glass-lens`. The
- * rename is the only public-surface delta (MIGRATION.md row). The garnish stays PE-only
- * over the blur base; it is NEVER promoted to the card/primitive substrate
- * (feDisplacementMap is resize-expensive — only the `scale` param animates without
- * rebuilding the map).
- */
-
-@layer components {
-    /* The shipped filter graph as ONE self-contained data-URI SVG (`scale='28'` baked,
-       DDR-LENS-BAKE). A single `url("data:…")` token is the only form that PARSES as a
-       `backdrop-filter` value AND survives a consumer bundler's url()-rewrite (a `data:`
-       URI is skipped; any other `url("…")` content is mis-resolved as a file). The
-       `#glass-refract` id is resolvable in-document (the data-URI is self-contained). */
-    .glass-lens {
-        /* The bevel-band width the squircle map encodes (the iOS edge concentration).
-           Documents the rim thickness the baked stops fix; a consumer reads it to tune
-           the perceived rim band on a successor re-bake. */
-        --glass-refract-bevel: 14%;
-
-        /* The shipped filter — ONE complete, valid `url("data:…")` token carrying the
-           whole 3-primitive graph with the `scale='28'` baked in (the §10 default depth,
-           DDR-LENS-BAKE). A single self-contained `data:` URI is (a) the ONLY form that
-           PARSES as a `backdrop-filter` value — the prior var()-spliced head/tail emitted
-           `url("…") <n> url("…")`, three tokens a `backdrop-filter` rejects, so the lens
-           silently rendered `none`; and (b) bundler-SAFE — a consumer's CSS url()-rewriter
-           skips a `data:` URI but mis-resolves any `url("…")` whose content starts with a
-           bare char (the old tail began `'…` → ENOENT, breaking every bundler consumer).
-           See the DDR-LENS-BAKE note in the header for the lost-tunability tradeoff. */
-        --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27glass-refract%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253ClinearGradient id=%2522hx%2522 x1=%25220%2522 y1=%25220%2522 x2=%2522100%2525%2522 y2=%25220%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(255,0,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253ClinearGradient id=%2522vy%2522 x1=%25220%2522 y1=%25220%2522 x2=%25220%2522 y2=%2522100%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(0,255,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522black%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523hx)%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523vy)%2522 style=%2522mix-blend-mode:screen%2522/%253E%253C/svg%253E%27 result=%27map%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27map%27 scale=%2728%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27disp%27/%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E%27 result=%27spec%27/%3E%3CfeBlend in=%27disp%27 in2=%27spec%27 mode=%27screen%27/%3E%3C/filter%3E%3C/svg%3E%23glass-refract");
-    }
-
-    /* The gated consuming selector. The squircle map + the baked `scale='28'` ride
-       INSIDE the `@supports (backdrop-filter: url(#…))` block;
-       the refraction composes the shipped `#glass-refract` filter OVER the host's existing
-       blur — additive (the blur already painted, this bends + concentrates the refraction
-       at the rim where the engine supports it). A non-supporting engine never reaches this
-       block and paints the un-gated `--glass-blur-*` + `--glass-tint-*` base ALONE. */
-    @supports (backdrop-filter: url("#glass-refract")) {
-        .glass-material.glass-lens,
-        .glass-lens {
-            -webkit-backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter);
-
-            backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter);
-        }
-    }
-}
+@layer components { .glass-lens { --glass-refract-bevel: 14%; --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27glass-refract%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253ClinearGradient id=%2522hx%2522 x1=%25220%2522 y1=%25220%2522 x2=%2522100%2525%2522 y2=%25220%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(255,0,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253ClinearGradient id=%2522vy%2522 x1=%25220%2522 y1=%25220%2522 x2=%25220%2522 y2=%2522100%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(0,255,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522black%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523hx)%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523vy)%2522 style=%2522mix-blend-mode:screen%2522/%253E%253C/svg%253E%27 result=%27map%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27map%27 scale=%2728%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27disp%27/%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E%27 result=%27spec%27/%3E%3CfeBlend in=%27disp%27 in2=%27spec%27 mode=%27screen%27/%3E%3C/filter%3E%3C/svg%3E%23glass-refract"); } @supports (backdrop-filter: url("#glass-refract")) { .glass-material.glass-lens, .glass-lens { -webkit-backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter); backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter); } } }

package/dist/styles/glass-specular-track.css

@@ -1,74 +1 @@
-/* Pointer-anchored moving specular — the iOS-26 Liquid Glass illuminate-from-
- * within behaviour.
- *
- * AW.W22 — the moving-specular `::before` body (the masked radial catch-light,
- * the rest/hover/active intensity steps, the var() fallback) was FOLDED into the
- * single `.glass-material` mixin in glass.css, where the five ladder rungs +
- * `.glass-card` + the `.dock-icon-button` control + `.glass-specular-track`
- * compose it from ONE source. There is NO duplicate `::before` body here.
- *
- * `.glass-specular-track` is now a thin ALIAS — it is listed in the
- * `.glass-material` selector GROUP in glass.css, so a `.glass-specular-track`
- * element gets the unified material (the `::before` catch-light, the rim, the
- * interaction-light) with zero duplicate paint. This keeps the historical
- * opt-in call sites (Card.vue, any consumer that still reaches for the class)
- * painting the catch-light without a legacy shim — the alias is a live
- * composition onto the unified mixin, not a dead orphan.
- *
- * This file carries ONLY:
- *   1. The reduced-motion + reduced-transparency a11y brackets, pointed at the
- *      `.glass-material` group (the canonical specular owner) so the guards
- *      cover every band surface, not just the opt-in class.
- *   2. The `@supports`-gated `#glass-refract` refraction garnish — RE-HOMED at
- *      AW.W23 off the (now-folded) `.glass-specular-track.glass-refract`
- *      compound onto `.glass-material.glass-refract` (see glass-refract.css for
- *      the shipped filter asset + the re-homed consuming selector).
- */
-
-/* ── Reduced-motion: pin the specular STATIC ───────────────────────────────
-   The MANDATORY guard. Under `prefers-reduced-motion: reduce` the catch-light
-   paints static at rest position — no pointer-tracking, no transition. The pin
-   covers the unified `.glass-material` group AND the `.glass-specular-track`
-   alias so EVERY band surface (not just the opt-in class) freezes the position
-   while keeping the centred catch-light + the warm-cream tint. */
-@media (prefers-reduced-motion: reduce) {
-    .glass-material::before,
-    .glass-wash::before,
-    .glass-quiet::before,
-    .glass-resting::before,
-    .glass-floating::before,
-    .glass-overlay::before,
-    .glass-card::before,
-    .dock-icon-button::before,
-    .glass-specular-track::before {
-        --specular-x: 50%;
-        --specular-y: 50%;
-        /* BB.W-LENSING — pin the EDGE-glint angle static too (the conic seats at its
-           `0deg` top-edge rest). The `useSpecularPointer` leaf already skips the angle
-           write under PRM; this is the CSS belt-and-braces pin so the rim glint never
-           drifts under reduce. The lens-swell drive also snaps (Button.vue / .tap-squish
-           PRM carve), so the whole motion-reactive lens reaches rest with no in-between
-           frames — the gesture functions, the physics off. */
-        --specular-angle: 0deg;
-        transition: none;
-    }
-}
-
-/* ── Reduced-transparency: drop the specular ───────────────────────────────
-   When the user requests reduced transparency the surface goes opaque (the
-   glass.css bracket maps the blurs to `none`); a travelling catch-light on a
-   flat opaque surface is decoration without substrate, so it drops too — across
-   the whole material group. */
-@media (prefers-reduced-transparency: reduce) {
-    .glass-material::before,
-    .glass-wash::before,
-    .glass-quiet::before,
-    .glass-resting::before,
-    .glass-floating::before,
-    .glass-overlay::before,
-    .glass-card::before,
-    .dock-icon-button::before,
-    .glass-specular-track::before {
-        display: none;
-    }
-}
+@media (prefers-reduced-motion: reduce) { .glass-material::before, .glass-wash::before, .glass-quiet::before, .glass-resting::before, .glass-floating::before, .glass-overlay::before, .glass-card::before, .dock-icon-button::before, .glass-specular-track::before { --specular-x: 50%; --specular-y: 50%; --specular-angle: 0deg; transition: none; } } @media (prefers-reduced-transparency: reduce) { .glass-material::before, .glass-wash::before, .glass-quiet::before, .glass-resting::before, .glass-floating::before, .glass-overlay::before, .glass-card::before, .dock-icon-button::before, .glass-specular-track::before { display: none; } }