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

package/dist/styles/glass.css

@@ -1,66 +1 @@
-/* Glass utilities — glassmorphism surface classes referencing --glass-* tokens
- *
- * ── No-PLATE-on-PLATE discipline (re-scoped under the glass-first default) ──
- * Apple's Liquid Glass guidance reserves glass for the floating layers; glass-ui
- * adopts the RUNG-PAIRING rule across three layer bands (the z-index registry
- * already encodes them, tokens.css §3 `--z-*`):
- *
- *   content    (--z-background … --z-content)  — the page substrate.
- *   navigation (--z-controls … --z-dock/panel) — the glass band (dock, panels,
- *                                                 floating chrome).
- *   overlay    (--z-overlay … --z-modal)       — the glass band (dialog/sheet
- *                                                 over content).
- *
- * The discipline bans PLATE-in-PLATE: a second `.glass-*` PANEL nested inside a
- * glass panel is a violation (the blur stacks muddy, the rim doubles, the read
- * collapses) — the inner PANEL should read as a flat tier. But CONTROL-on-plate
- * is SANCTIONED: under the glass-first maximal default, `btn-glass` (a real
- * backdrop-filter control) inside `.glass-card` inside a glass Dialog is the
- * COMMON composition. The depth-3 ceiling + `contain: paint` budget that keeps
- * the nested blur cheap is gated by W-A11Y-PERF (the enforcement half); this
- * header is the doc half. Bottom line: do not nest a glass PANEL inside a glass
- * panel; a glass CONTROL on a glass plate is fine and budget-gated.
- *
- * ── iOS-spring-on-controls cross-ref (AV.W15 C/M cross-ref) ────────────────
- * The momentum-gated press squish (the control's "lift up on touch, quiet at
- * rest" register — scale toward `--scale-press-dock` / `--scale-press-btn`) is
- * the SPRING half of one Liquid Glass behaviour the rim/specular folds here are
- * the MATERIAL half of. The spring wiring is OWNED by the dock-motion arm
- * (AV.W9, velocity continuity) and the slider arm (AV.W11); it is cross-
- * referenced here and authored there, not re-derived. See
- * `src/components/custom/dock/README.md` for the canonical discipline.
- *
- * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
- * The glass rule body is carved into cohesive `glass/*.css` partials (each
- * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
- * The base ladder splits into three adjacent `@layer components` blocks
- * (material · ladder · surfaces) — same layer, same source order, so the carve
- * is isomorphic. The squircle `@supports` arm and the a11y `@media`/`@supports`
- * overrides MUST stay AFTER the base ladder (they override it). See
- * docs/precepts/design-idioms.md §cohesion-aware partials.
- */
-
-/* CSS @import rules must precede every other rule. The seven partials @import in
-   cascade order (surface-axis.css AFTER ladder/surfaces so its [data-surface]
-   decoration attr rules win over the base rung by source order; BEFORE the
-   squircle + a11y @supports overrides, which must stay last): */
-@import "./glass/material.css";
-@import "./glass/ladder.css";
-/* BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register
-   (.accent-tone: one --tone → idle/active/edge/ink). AFTER ladder.css (reads the
-   warm-cream --card surface the ladder mints); the SOLE writer of the --accent-*
-   channels, so the placement is cascade-order-invariant. */
-@import "./glass/accent-tone.css";
-@import "./glass/rim.css";
-@import "./glass/surfaces.css";
-/* BC.W-CARVE6 — the .input-pill / .control-surface form-control REST register
-   carved out of surfaces.css to hold the 500-line bound, @import-ed IMMEDIATELY
-   AFTER surfaces.css and BEFORE surface-axis.css (same @layer components, same
-   source order — the dist is byte-isomorphic). */
-@import "./glass/control-surfaces.css";
-@import "./glass/surface-axis.css";
-@import "./glass/reveal.css";
-@import "./glass/deep.css";
-@import "./glass/progress-rail.css";
-@import "./glass/squircle.css";
-@import "./glass/a11y-fallback.css";
+@import "./glass/material.css"; @import "./glass/ladder.css"; @import "./glass/ladder-undershadow.css"; @import "./glass/grain-overlay.css"; @import "./glass/accent-tone.css"; @import "./glass/rim.css"; @import "./glass/surfaces.css"; @import "./glass/surfaces-pager.css"; @import "./glass/control-surfaces.css"; @import "./glass/glass-capsule.css"; @import "./glass/liquid-fill.css"; @import "./glass/surface-axis.css"; @import "./glass/reveal.css"; @import "./glass/liquid-enter.css"; @import "./glass/deep.css"; @import "./glass/defined.css"; @import "./glass/progress-rail.css"; @import "./glass/squircle.css"; @import "./glass/a11y-fallback.css";

package/dist/styles/icon-chip.css

@@ -1,211 +1 @@
-/* icon-chip.css — BA.W-ICON-CHIP: the <IconChip> section-color pop primitive.
- *
- * The library's SINGLE section-color icon-chip recipe — the brand's ONE color
- * event per surface (the one-color-event rule, AZ.W-SUFFUSE / proof:suffuse):
- * a `color-mix(… 25%, transparent)` backplate under a full-chroma glyph, walked
- * over the 13-stop `--section-color-N` ramp (or a complete `tone` token). It
- * OWNS the recipe the four inline `:style` pastes (icons.vue / empty-states.vue
- * / auth-shell.vue / the MetricCell glyph-tint) collapsed onto, so the recipe
- * lives ONCE and proof:suffuse asserts against one component, not N pastes.
- *
- * THE INTERPOLATION SPACE — `in srgb` (DELIBERATE, recorded). The backplate is
- * a foreground-over-transparent overlay at a hand-tuned α stop — the SAME shape
- * as the `--surface-tint-*` brand family, which CLAUDE.md fixes at `in srgb`
- * (the brand-calibrated mix; switching the space shifts the resting α off its
- * hand-set value). The chip is byte-faithful to the reference paste register
- * (the binding W7 π target: stop-0 bg `color(srgb 0.915 0.484 0.671 / 0.25)`),
- * so it preserves `in srgb` — the same brand-overlay path, NOT the glass-tint
- * `in oklab` perceptual-mix path. (The spec text says `in oklab`; the resolution
- * preserves the reference-faithful `in srgb` so the pop register does not shift
- * — recorded in PROGRESS / the DELTA.)
- *
- * THE α STOP IS A TOKEN (BB.W-SUFFUSE3 c3). The hardcoded `25%` lifted onto
- * `--icon-chip-plate-strength` (default `25%`, BYTE-IDENTICAL); the `:saturated`
- * axis re-points it to ~40% for a louder focal pop — the STRENGTH varies, the
- * `in srgb` space + the chip≤glyph ratio do NOT. The pop is ALIVE too: the
- * reveal entrance + the hover-bloom GROW ride the per-spring CLOCK (the
- * --spring-snappy/--spring-smooth registers), no longer the fixed bezier.
- */
-
-:root {
-    /* The chip≤glyph proportion (d2, structural). The diameter floors at
-       `glyph × ratio` so the plate can NEVER paint under the glyph — a
-       consumer's tiny `size` is clamped. The default reproduces the reference
-       48/22 ≈ 2.18 register. Token-first: a consumer retunes without a
-       component edit. */
-    --icon-chip-glyph-ratio: 2.18;
-    /* The duotone fill α — a low-alpha fill of the same hue UNDER the
-       full-chroma stroke (the iOS/Material filled-tonal move). Mono-hue. */
-    --icon-chip-duotone-fill: 18%;
-    /* The backplate vibrancy stop (BB.W-SUFFUSE3 c3). The default reproduces
-       the reference 25% register BYTE-IDENTICALLY — the plate `color-mix`
-       reads this token instead of the hardcoded `25%`. The `:saturated` axis
-       re-points it to a louder focal stop (~40%); the STRENGTH changes, the
-       `in srgb` space + the chip≤glyph ratio do NOT (the recorded keep). Still
-       ONE color event per surface — a saturated chip is the same event,
-       louder, never a license for a second (proof:suffuse d3 counts the event
-       FAMILY, not the saturation). Token-first: a consumer retunes without a
-       component edit. */
-    --icon-chip-plate-strength: 25%;
-    /* The hover-bloom backplate lift (25% → ~35%) + the glow-ring spread. */
-    --icon-chip-bloom-mix: 35%;
-    --icon-chip-bloom-glow: 28%;
-    /* The reveal stagger step (consumed by the vReveal `--d` index). */
-    --icon-chip-reveal-step: 60ms;
-}
-
-.icon-chip {
-    /* The diameter FLOORS at glyph × ratio — the d2 proportion enforced in the
-       component, not a per-consumer hope. */
-    --_icon-chip-floor: calc(
-        var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio)
-    );
-    inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
-    block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-pill, 9999px);
-    /* The backplate — the reference recipe (`in srgb`, the --icon-chip-plate-
-       strength α stop, default 25% — BB.W-SUFFUSE3 c3 lifts the hardcoded `25%`
-       onto the token, BYTE-IDENTICAL at default). */
-    background-color: color-mix(
-        in srgb,
-        var(--icon-chip-plate-color, var(--muted))
-            var(--icon-chip-plate-strength),
-        transparent
-    );
-    color: var(--icon-chip-event-color, var(--muted-foreground));
-    /* The §6 easing doctrine — surface props (bg/box-shadow) on the bezier
-       standard ease. The transform leg at REST (the leave direction, reverting
-       to base) is the NO-OVERSHOOT bezier (a bloom must never overshoot past
-       gone — §6 exit law, BB.W-SUFFUSE3 c2); the hover ENTER direction lifts
-       onto --spring-smooth on the .icon-chip--bloom:hover rule below. */
-    transition:
-        background-color var(--duration-fast, 150ms) var(--ease-standard),
-        box-shadow var(--duration-fast, 150ms) var(--ease-standard),
-        transform var(--duration-fast, 150ms) var(--ease-out);
-}
-
-.icon-chip__glyph {
-    display: block;
-    flex-shrink: 0;
-}
-
-/* ── The bare register (the MetricCell leading-glyph tint — no backplate) ──── */
-.icon-chip--bare {
-    inline-size: auto;
-    block-size: auto;
-    background-color: transparent;
-    border-radius: 0;
-}
-
-/* ── The :saturated vibrancy axis (BB.W-SUFFUSE3 c3) ───────────────────────── */
-/* A louder, more-chromatic backplate for a genuine focal pop — the plate
-   `color-mix` re-points off the 25% reference stop to ~40%. STILL the ONE color
-   event (the same event, louder — proof:suffuse d3 counts the event FAMILY, not
-   the saturation). The interpolation STAYS `in srgb` (the recorded reference-
-   register keep) and the chip≤glyph ratio is untouched. */
-.icon-chip--saturated {
-    --icon-chip-plate-strength: 40%;
-}
-
-/* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
-/* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
-   presentation attribute, so the `[data-duotone] svg` rule reaches the inner
-   paths (they inherit `fill` from the root). Mono-hue, proportion-safe. */
-.icon-chip--duotone[data-duotone] svg,
-.icon-chip[data-duotone] .icon-chip__glyph {
-    fill: color-mix(
-        in srgb,
-        var(--icon-chip-event-color, var(--muted-foreground))
-            var(--icon-chip-duotone-fill),
-        transparent
-    );
-}
-
-/* ── The hover-bloom axis — the SMOOTH GLASS register (NO disco) ───────────── */
-/* The backplate mix lifts, a soft same-hue glow ring appears, the glyph stroke
-   firms. DISCO FENCE: composes NO sparkle-sweep / btn-audacious / disco-grain —
-   the W-GLASS-CAL-retired-disco's calm replacement register only. */
-@media (hover: hover) {
-    .icon-chip--bloom:hover {
-        background-color: color-mix(
-            in srgb,
-            var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix),
-            transparent
-        );
-        box-shadow: 0 0 0 0.25rem
-            color-mix(
-                in srgb,
-                var(--icon-chip-event-color, var(--muted-foreground))
-                    var(--icon-chip-bloom-glow),
-                transparent
-            );
-        /* The bloom GROW (BB.W-SUFFUSE3 c2) — the plate lifts a hair on the
-           §6 --spring-smooth transform register (enter smooth). The transition
-           is re-declared on :hover so the ENTER direction rides the spring; the
-           base rule's --ease-out transform leg governs the leave (no overshoot
-           past gone). The color legs stay on the bezier (base rule). */
-        transform: scale(var(--icon-chip-bloom-scale, 1.06));
-        transition:
-            background-color var(--duration-fast, 150ms) var(--ease-standard),
-            box-shadow var(--duration-fast, 150ms) var(--ease-standard),
-            transform var(--spring-smooth-duration) var(--spring-smooth);
-    }
-    /* The glyph stroke firms on the chip's own hover. */
-    .icon-chip--bloom:hover .icon-chip__glyph {
-        stroke-width: 2;
-    }
-}
-
-/* ── The entrance-reveal axis — composes the shipped vReveal directive ─────── */
-/* The directive writes `[data-reveal]` + `--d` (the stagger index); this rule
-   reacts ONLY on an opted-in chip (`.icon-chip--reveal`) so a non-reveal chip's
-   inert `[data-reveal]` hook never animates. PRM-gated. */
-@media (prefers-reduced-motion: no-preference) {
-    /* BB.W-SUFFUSE3 c1 — the pop-ENTRANCE rides the per-spring CLOCK, NOT the
-       fixed --duration-medium bezier. The animation-timing-function is the
-       --spring-snappy linear() string (peaks ~1.068) and the duration is
-       --spring-snappy-duration (0.34s, the W-GLASS-CAL per-spring clock), so the
-       `scale(0.85)→1` keyframe carries the snappy spring's ~+7% overshoot then
-       settles (the springy pop, not a flat fade-up). The opacity 0→1 is COUPLED
-       on the SAME clock (the W-MOTION-CANON P3 coupled-fade — plate + glyph
-       bloom as ONE continuous layer). Compositor-only: transform/opacity only
-       (the proof:motion-compositor floor holds). The per-spring clock is the
-       W-GLASS-CAL/W-MOTION-CANON fence — CONSUMED here, never re-generated. */
-    .icon-chip--reveal[data-reveal] {
-        animation: icon-chip-reveal var(--spring-snappy-duration)
-            var(--spring-snappy) both;
-        animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step));
-    }
-}
-
-@keyframes icon-chip-reveal {
-    from {
-        opacity: 0;
-        transform: scale(0.85) translateY(0.25rem);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-/* ── The deform axes collapse under reduced motion (the PRM guard) ─────────── */
-/* BB.W-SUFFUSE3 c1/c2 — the spring deform drops under reduce: the bloom GROW
-   scale collapses to 1 (the color cross-fade may stay — the legibility cue is
-   not motion), and the reveal pop SNAPS to its endpoint (scale 1, opacity 1,
-   zero in-between frames) via `animation: none` (the chip still APPEARS — only
-   the spring/overshoot is off; the W-MOTION-CANON P6 keep-fade/drop-transform). */
-@media (prefers-reduced-motion: reduce) {
-    .icon-chip--bloom:hover {
-        transform: none;
-    }
-    .icon-chip--bloom:hover .icon-chip__glyph {
-        stroke-width: inherit;
-    }
-    .icon-chip--reveal[data-reveal] {
-        animation: none;
-    }
-}
+@import "./glass/glass-atom.css"; @import "./glass/glass-chip.css"; :root { --icon-chip-glyph-ratio: 2.18; --icon-chip-duotone-fill: 18%; --icon-chip-plate-strength: 25%; --icon-chip-bloom-mix: 35%; --icon-chip-bloom-glow: 28%; --icon-chip-reveal-step: 60ms; } .icon-chip { --_icon-chip-floor: calc( var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio) ); inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill, 9999px); background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-plate-strength), transparent ); color: var(--icon-chip-event-color, var(--muted-foreground)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--duration-fast, 150ms) var(--ease-out); } .icon-chip__glyph { display: block; flex-shrink: 0; } .icon-chip--bare { inline-size: auto; block-size: auto; background-color: transparent; border-radius: 0; } .icon-chip--saturated { --icon-chip-plate-strength: 40%; } .icon-chip--glass { background-color: transparent; } @media (hover: hover) { .icon-chip--glass.icon-chip--bloom:hover { background-color: transparent; } } .icon-chip--duotone[data-duotone] svg, .icon-chip[data-duotone] .icon-chip__glyph { fill: color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-duotone-fill), transparent ); } @media (hover: hover) { .icon-chip--bloom:hover { background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix), transparent ); box-shadow: 0 0 0 0.25rem color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-bloom-glow), transparent ); transform: scale(var(--icon-chip-bloom-scale, 1.06)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--spring-smooth-duration) var(--spring-smooth); } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: 2; } } @media (prefers-reduced-motion: no-preference) { .icon-chip--reveal[data-reveal] { animation: icon-chip-reveal var(--spring-snappy-duration) var(--spring-snappy) both; animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step)); } } @keyframes icon-chip-reveal { from { opacity: 0; transform: scale(0.85) translateY(0.25rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .icon-chip--bloom:hover { transform: none; } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: inherit; } .icon-chip--reveal[data-reveal] { animation: none; } }