@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/glass.css

@@ -1,77 +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";
-/* BD.W-TAB-IOS-CAPSULE — the ONE shared glassy register (`.glass-capsule` +
-   `.glass-capsule-track` + `.glass-capsule-hover`) the tabs/dock-tab/buttons/chips/
-   cards consumers compose. @import-ed AFTER surfaces.css (so the `--glass-bg-floating-
-   tinted` seam + the `--glass-rim-*`/`--glass-shadow-floating` tokens resolve) and
-   BEFORE the consuming recipes (segmented-tabs.css et al, imported by index.css). */
-@import "./glass/glass-capsule.css";
-@import "./glass/surface-axis.css";
-@import "./glass/reveal.css";
-/* BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL `.liquid-enter` mount recipe
-   (the four coupled channels as @keyframes-on-mount + the `.is-cel` cel-slam + the
-   lagging cartoon cast). @import-ed AFTER reveal.css (it extends the same
-   `--lq-enter-*` channel substrate the `.glass-reveal` TRANSITION floor speaks). */
-@import "./glass/liquid-enter.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,256 +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.
- */
-
-/* BD.W-GLASS-ATOM-REGISTER — the shared `.glass-atom` warm-glass register the
-   small atoms (Badge-glass / metric-badge / slider fill / the `+N` chip) consume.
-   @import-ed HERE (icon-chip.css loads in index.css AFTER glass.css, so
-   `.glass-capsule` + the `--glass-*` axes are defined) — a consume-only recipe,
-   not a second material. CSS `@import` must precede every rule, so it leads the
-   file (the comment above is not a rule). */
-@import "./glass/glass-atom.css";
-/* BD.W-CHIP-CONGRUENT-GLASS — the chip family's warm-glass toggle register
-   (.glass-chip: the stadium-pill lens + the de-frauded colour-flood punch the
-   ToggleChip/SelectableChip/toggle-group children compose). @import-ed HERE
-   alongside glass-atom.css (icon-chip.css loads in index.css AFTER glass.css, so
-   `.glass-capsule` + `.accent-tone` + the `--glass-*` axes resolve) — a consume-
-   only recipe, not a second material. CSS `@import` must precede every rule, so it
-   leads with the atom import. */
-@import "./glass/glass-chip.css";
-
-: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 QUIET GLASS register (BD.W-GLASS-ATOM-REGISTER cross-link) ─────────────
-   The chip's SECOND register: the transmissive `.glass-atom` warm-glass capsule
-   tinted toward the event hue via `--glass-fill-tint`, NOT the loud `in srgb`
-   brand plate (the default, kept — AW.W26 fence). The component applies
-   `.glass-capsule .glass-atom` alongside `.icon-chip--glass`, so the body (warm
-   floor + `--glass-blur-quiet` backdrop + the keyed rim) comes from the SHARED
-   register — this rule only RETIRES the chip's own `in srgb` plate-color fill so
-   the two backgrounds don't double-paint (the capsule's translucent fill +
-   `.glass-atom`'s tinted `background-image` are the body). The glyph event color
-   is untouched (the one color event still reads). A flat capsule lens — the
-   backdrop-filter rides the shared `--glass-blur-quiet` (Safari-native, no
-   `backdrop-filter:url`, Fence 8). */
-.icon-chip--glass {
-    /* Retire the brand plate fill — the `.glass-capsule` body + the `.glass-atom`
-       tinted `background-image` paint the surface (no double-fill). The capsule's
-       `background:` shorthand + the atom's later `background-image` layer win the
-       cascade over this `background-color: transparent` reset by source order. */
-    background-color: transparent;
-}
-
-/* The glass chip's hover-bloom (when BOTH `--glass` + `--bloom`) routes the glow
-   ring through the SAME event color, over the glass body — the bloom GROW (the
-   base `.icon-chip--bloom:hover` transform/spring) is inherited unchanged. */
-@media (hover: hover) {
-    .icon-chip--glass.icon-chip--bloom:hover {
-        background-color: transparent;
-    }
-}
-
-/* ── 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; } }

package/dist/styles/index.css

@@ -1,260 +1 @@
-/*
- * @mkbabb/glass-ui — Unified design system styles
- *
- * Import this in your project's main CSS file:
- *   @import "tailwindcss";
- *   @import "tw-animate-css";
- *   @import "@mkbabb/glass-ui/styles";        (token cascade + SFC scoped CSS)
- *   @import "@mkbabb/glass-ui/styles/fonts";  (OFL woff2 corpus, loaded once)
- *   (then add your project-specific token overrides locally)
- *
- * AN.W1 — the single `@mkbabb/glass-ui/styles` import resolves the COMPLETE
- * stylesheet: this @import cascade PLUS the per-component `<style scoped>`
- * payload (Aurora grid layering, Progress/Slider/Notification/… scoped rules).
- * The build folds the SFC bundle (`dist/glass-ui.css`) into the dist copy of
- * this file (vite.config.ts `publishStyleAssets`), so a consumer never needs
- * a second `@import "@mkbabb/glass-ui/styles.css"` line. The `./styles.css`
- * export stays reachable as a transparent SFC-only entry (NOT a back-compat
- * alias) for a cascade-free consumer.
- */
-
-/*
- * FONT PAYLOAD SPLIT (AM-W1-α). The payload-bearing @font-face faces
- * (Plus Jakarta Sans + Fira Code woff2, base64-inlined at publish into
- * ~99 KB gzipped) are NOT imported here — they live in `fonts.css`,
- * reachable via the `@mkbabb/glass-ui/styles/fonts` export. This keeps the
- * critical first-paint `./styles` entry free of the font binary. The
- * calibrated `local()` fallback faces (with Capsize metric overrides) DO
- * stay on this critical path inside typography.css — they paint during the
- * `font-display: optional`/`swap` window with zero CLS, so the deferred
- * real-face import never causes a layout shift.
- *
- * NOTE: Font @import url(...) lines are NOT issued from here (and never
- * were) — doing so would put them after @import "tailwindcss" in the
- * consumer's output, which violates the CSS spec (and some bundlers then
- * drop them). The split above is by separate export subpath, not @import.
- */
-
-/*
- * Cascade order — load order is load-bearing. Each layer references the one
- * above it via CSS custom properties or selector cascade; reordering breaks
- * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
- *
- * WHERE each idiom LIVES (the localized design-idiom home, complementing the
- * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
- * in theme.css, @utility recipes in their cohesion-domain file, the
- * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
- * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
- * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
- * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
- * cascade-isomorphic: the partials @import in the recorded cascade order so this
- * load order is preserved bit-for-bit.
- *
- *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
- *                              color-radius,shadow,glass,offsets-sizing,
- *                              scale-paper,light-dark,dark-arm,property-regs}.css.
- *                              CSS custom properties (color, easing, glass,
- *                              paper, shadow, surface-tint rungs). Source-of-
- *                              record for every visual axis.
- *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
- *                              Pure values, no token consumption.
- *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
- *                              from (1) so MUST come after them; defines the
- *                              `dark` variant selector consumed by the cascade.
- *   4. glass.css             — thin @import root over glass/{material,ladder,
- *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
- *                              .glass-{wash,quiet,resting,floating,overlay}
- *                              5-rung ladder + .glass-card / -pill / -btn.
- *                              Consumes tokens (1) + theme aliases (3).
- *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
- *                              (AV.W15). A `.glass-specular-track` opt-in paints
- *                              a masked radial catch-light tracking the pointer
- *                              (@property-animated, reduced-motion-static, var()
- *                              fallback) + the @supports-gated refraction
- *                              garnish. Loads after glass.css so it composes
- *                              over the glass tiers.
- *   5. paper.css             — paper underpaint + grain overlay utilities.
- *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
- *                              registration, the shared cross-control four-state
- *                              comma-groups, and the `@import`s of the cohesive
- *                              `dock/*.css` partials (shell · morph · density ·
- *                              layers · layer-group · overflow — AX.W06 carved
- *                              the 1762-line god-module into single-axis partials,
- *                              each < 500 lines, all in the SAME @layer components
- *                              so the cascade is isomorphic). Component utility
- *                              layer; consumes (1) + (3).
- *  6b. dock-controls.css     — the five dock CONTROL families carved out of
- *                              dock.css (AU.W8b.3): .dock-icon-button,
- *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
- *                              .dock-select-trigger / .dock-dropdown-trigger, and
- *                              the coarse-pointer touch floor. Same @layer
- *                              components; MUST load directly after dock.css so
- *                              the shared :where()/comma-group contract in (6)
- *                              cascades into these control rules.
- *   7. cards.css             — .cartoon-surface, .paper-texture.
- *                              Component utility layer.
- *  7a. feedback-tone.css     — the ONE shared tinted-glass tone register
- *                              (BA.W-FEEDBACK-TONE): `.feedback-tone` +
- *                              `.feedback-tone-{success,warning,info,destructive}`
- *                              tint a glass rung a bounded % toward a house tone
- *                              token on the EXISTING color-mix(in oklab, …) seam.
- *                              Toast / Notification / Alert consume it (the three
- *                              tone maps collapse). Loads after cards.css (it reads
- *                              the same `--glass-bg-*` rung tokens cards.css/the
- *                              ladder mint) and before floating-panel.css.
- *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
- *                              Component utility layer.
- *   9. transitions.css       — Vue <Transition> classes (fade, fade-slide,
- *                              pop, dialog-scale, dropdown, tab-fade).
- *  10. animations.css        — @keyframes for components consumed via
- *                              `animation:` properties in (9) and component
- *                              <style> blocks. Includes the §TOP-LAYER
- *                              `@starting-style` entry/exit grammar (AQ.W5).
- *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
- *                              + [data-scroll-reveal]); the `@supports`-gated
- *                              primary over the JS-composable fallback (AQ.W5).
- *  10a'. scroll-choreography.css — the SOTA scroll-CHOREOGRAPHY register
- *                              (.scroll-build page-build / .scroll-cascade
- *                              section-cascade / .scroll-pin scroll-pinned + the
- *                              native .smooth-scroll opt-in) on the native
- *                              scroll()/view()/timeline-scope substrate; NO
- *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
- *  10a''. scroll-chrome.css  — BC.W-SCROLL-CHROME the scroll-driven floating-
- *                              CHROME collapse recipe (.scroll-chrome reads
- *                              --chrome-collapse-t for the compositor shrink/
- *                              quiet/shadow-lift; PERSISTENT-by-default, crisp
- *                              blur, never-invisible quiet, PRM-discrete). The
- *                              useScrollChrome JS machine owns the snap + ramp.
- *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
- *                              recipe + `--vt-*` axes (AQ.W5; the
- *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — thin @import root over utilities/{animate,base,
- *                              components,btn,a11y-overrides}.css. focus-ring,
- *                              btn-audacious + btn-interactive (press cluster;
- *                              K W6 + Q.W3 Lane E), rainbow-vivid +
- *                              rainbow-pastel. Consumes earlier animations +
- *                              tokens.
- *  11a. menu.css             — BA.W-MENU-GLASS the glass MENU-ROW + MENU-SECTION
- *                              register. AFTER utilities.css so `.glass-menu-row`'s
- *                              `@layer components` hover/highlight rules source-
- *                              order-win over `.interactive-item:hover` (same layer
- *                              + specificity) — the cascade-trap-safe placement.
- *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
- *                              groove dividers). Loaded after utilities so
- *                              component-local recipes can override.
- *  13. hover-popover.css     — V.W3 popover-animation grammar.
- *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
- *                             sheet surface + peek handle + snap-stop rules).
- *  15. segmented-tabs.css    — AX.W53 SegmentedTabs overflow/indicator grammar.
- *  16. select.css            — BA.W-EMISSION the PRECOMPILED Select content
- *                             collision-bound (the `[data-slot="select-content"]`
- *                             max-height rule) — moved off the dead arbitrary-
- *                             bracket CVA class so the bound SHIPS in dist/glass-ui.css
- *                             regardless of consumer JIT reach. A structural utility
- *                             never depends on a content-scan; locked by proof:emission.
- *
- * Per-package component CSS lives at (12)-(16) (loaded after utilities so
- * component-local recipes can override). New per-package CSS files append
- * to that tail.
- */
-@import "./tokens.css";
-@import "./typography.css";
-@import "./theme.css";
-@import "./glass.css";
-@import "./glass-specular-track.css";
-@import "./glass-refract.css";
-@import "./paper.css";
-@import "./dock.css";
-@import "./dock-controls.css";
-@import "./cards.css";
-@import "./feedback-tone.css";
-@import "./floating-panel.css";
-@import "./transitions.css";
-@import "./animations.css";
-/* BD.W-MORPH-FIELD-WELD — the ONE morph-field recipe (the body/neck/waist silhouette + the
-   dedicated @property --morph-squish channel + the welling concave waist clip-path + the
-   1940s ink-cast). The `useMorphField` weld writes the drive-derived channels once/frame;
-   this sheet paints them. The cross-engine clip-path waist FLOOR + the [data-morphing] goo
-   gate live here. */
-@import "./motion/morph-field.css";
-/* BE.W-CELEBRATE-BURST — the earned glass-petal radial-bloom recipe (the
-   .glass-celebration-petal warm-cream frosted-glass material + the overlay anchor).
-   @import-ed after animations.css per the wave spec (the petal motion is the JS rAF
-   step's compositor writes; this recipe is the static frosted material the petals wear). */
-@import "./jubilance.css";
-@import "./scroll-driven.css";
-@import "./scroll-choreography.css";
-@import "./scroll-chrome.css";
-@import "./view-transition.css";
-@import "./utilities.css";
-/* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
-   utilities.css (NOT the floating/transitions band the spec hinted) so the
-   `.glass-menu-row` `@layer components` hover/highlight rules source-order-WIN
-   over `.interactive-item:hover` (utilities/base.css, same layer + specificity) —
-   the cascade-trap-safe placement, mirroring glass/surface-axis.css's "import
-   AFTER ladder.css" discipline. */
-@import "./menu.css";
-@import "./configurator.css";
-@import "./instrument-chassis.css";
-@import "./hover-popover.css";
-@import "./drawer.css";
-@import "./segmented-tabs.css";
-@import "./select.css";
-/* BA.W-ICON-CHIP — the <IconChip> section-color pop recipe + the three axes
-   (duotone/bloom/reveal). A component partial; the token arms (--section-color-N
-   / --muted) auto-flip under .dark so the chip is mode-robust by construction. */
-@import "./icon-chip.css";
-/* BB.W-BORDER-PROGRESS — progress IS the element's border: the masked-conic ring
-   consumption (the @property reg lives in tokens/property-regs.css §18). A
-   component partial; the conic + the radius-following mask-composite + the coverage
-   masks + the PRM milestone-pulse bracket. */
-@import "./border-progress.css";
-
-/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal: a one-shot
-   gold-draw mark (a `stroke-dashoffset` wipe on the 4 `@property` motion tokens
-   `--seal-draw`/`--seal-scale`/`--seal-glint`/`--seal-ink`, registered in
-   tokens/property-regs.css §18). The ink reads the W-PHASE-PALETTE earned-gold
-   register; the glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
-   compositor-only — the feedback-surface partial. */
-@import "./completion-seal.css";
-
-/* Ensure Tailwind scans glass-ui's compiled component templates for the utility
-   classes they emit (CVA variant classes like text-destructive-foreground,
-   layout utilities like h-full/shrink-0).
-
-   BA.W-EMISSION — re-pointed from the DEAD components-mirror glob (the prior
-   `../components` target). That glob resolved correctly in glass-ui's OWN build
-   (`src/styles/index.css` → `src/components` carries the real `.vue` source), but the
-   SHIPPED dist copy of this file (`dist/styles/index.css`) resolved `../components` to
-   `dist/components/` — a
-   directory that carries ONLY `.d.ts` mirror files (zero `.js`, zero `.vue`). The
-   compiled render-functions live FLAT at `dist/*.js`. So in every consumer that
-   re-imported this `@source` line, Tailwind scanned an empty dir and glass-ui's own
-   arbitrary utilities silently died (the P9 / valuejs-fold register-B class).
-
-   `../*.js` reaches the compiled render-functions PRECISELY in the SHIPPED context:
-   in dist it is `dist/*.js` (the 150+ flat compiled chunks that carry glass-ui's
-   utility class strings — the surface the dead `../components` mirror NEVER held).
-   In glass-ui's OWN source build it is `src/*.js` (empty — glass-ui's own components
-   compile their CSS through vite, not this `@source`), so the directive is a no-op
-   in the own-build and never scans the `src/` shader/`.ts` tree (a bare `../` glob
-   tripped Tailwind's dev candidate-extractor on the shader template strings —
-   `Missing opening (`). This directive is a BACKSTOP for a consumer that imports
-   this exact cascade file — the PRIMARY self-emission path is
-   `vite.style-assets.ts emitComponentUtilities` (P9), which ships glass-ui's
-   component-utility RULES build-independently into `dist/styles/components.css`.
-   Fully-arbitrary BRACKET utilities (`[max-height:…]`, `[--slider-track-height:…]`)
-   are rejected by that path's `classish` token filter AND are not reliably reachable
-   by a JIT scan, so every STRUCTURAL bracket utility (geometry/bounds/sizing) is
-   pre-compiled into shipped CSS instead — never load-bearing on any consumer's
-   content-scan reach. Locked by proof:emission. */
-/* AN.W1 — SFC scoped component CSS (folded so a single
-   @import "@mkbabb/glass-ui/styles" carries cascade + components) */
-@import "../glass-ui.css";
-
-/* P9 — component-utility rules (rounded-panel, text-muted-foreground,
-   …) shipped build-independently so a bare consumer paints them. */
-@import "./components.css";
-
-@source "../*.js";
+@import "./tokens.css"; @import "./typography.css"; @import "./theme.css"; @import "./glass.css"; @import "./glass-specular-track.css"; @import "./glass-refract.css"; @import "./paper.css"; @import "./dock.css"; @import "./dock-controls.css"; @import "./cards.css"; @import "./feedback-tone.css"; @import "./transitions.css"; @import "./animations.css"; @import "./viz-reveal.css"; @import "./scroll-driven.css"; @import "./scroll-choreography.css"; @import "./card-scroll.css"; @import "./scroll-chrome.css"; @import "./view-transition.css"; @import "./utilities.css"; @import "./menu.css"; @import "./configurator.css"; @import "./instrument-chassis.css"; @import "./drawer.css"; @import "./segmented-tabs.css"; @import "./tabs/segmented-tabs-drag.css"; @import "./select.css"; @import "./dialog-placement.css"; @import "./icon-chip.css"; @import "./scroll-progress-rim.css"; @import "./completion-seal.css"; @import "./draw-in.css"; @import "../glass-ui.css"; @import "./components.css" layer(components); @source "../*.js";