@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/utilities/btn.css

@@ -1,231 +1 @@
-/* utilities/btn.css
-   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive. (The btn-audacious/btn-audacious-gold disco recipes + the btn-gold-bg-sweep keyframes were RETIRED at BA.W-GLASS-CAL.)
-   Carved from the utilities.css cascade root; @import-ed by utilities.css in
-   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
-/* ── Hover scale (O.W6 Lane C) ──
-   Canonical hover-transform utility consuming the `--scale-hover` token
-   (tokens.css §11). Promoted from consumer-side `hover:scale-105`
-   recipe — 13 sites in keyframes.js demo + 9 sites in words/frontend
-   per O11/d L3 + O11/a I4. Single-token recipe (no ladder); the dual
-   `--scale-press-{xs..lg}` ladder discussion is the press-axis cohort
-   (O-N-7), not hover. Consumers reach the utility via
-   `class="scale-on-hover"`; transition + easing bind to the canonical
-   `--duration-fast` + `--ease-standard` tokens. */
-@utility scale-on-hover {
-    /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
-       longhand (not `transform`) so the migrated hover scale animates.
-       AX.W52 §6 doctrine — the `scale` transform leg rides `--spring-smooth`
-       (the settle register), NOT the bezier `--ease-standard` (a transform on a
-       bezier reads mechanical; springs read alive on transform). */
-    scale: 1;
-    transition: scale var(--spring-smooth-duration) var(--spring-smooth);
-
-    &:hover {
-        scale: var(--scale-hover);
-    }
-}
-
-/* ── Twin-line divider — the chassis catch-light / under-shadow groove ───────
-   AW.W15 DRY extraction. The twin-line idiom (a 1px white catch-light over a
-   1px black under-shadow reading as one engraved hairline groove) is the
-   chassis-divider signature. This utility is the SINGLE source of that
-   α pair: it publishes `--twin-line-catch` (the top catch-light) and
-   `--twin-line-shadow` (the bottom under-shadow) as cascade tokens, dark-adaptive
-   by construction (the `.dark &` arm re-resolves them). `instrument-chassis.css`
-   (`.bezel-line.top`/`.bottom`) `@apply`s it and reads the tokens; a retint
-   touches one rule. (The prior `instrument-rail.css` co-consumer retired at
-   AZ.W-PRUNE2 with its component — the α pair stays canonicalised here.) */
-@utility twin-line-divider {
-    --twin-line-catch: rgb(255 255 255 / 0.10);
-    --twin-line-shadow: rgb(0 0 0 / 0.12);
-
-    :where(.dark) & {
-        --twin-line-catch: rgb(255 255 255 / 0.06);
-        --twin-line-shadow: rgb(0 0 0 / 0.18);
-    }
-}
-
-/* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
-   Shared compound transition for interactive controls that animate their
-   surface (background-color/color/box-shadow/border-color) on the four-state
-   contract. Replaces the per-site
-   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-control)] ease-[var(--ease-standard)]`
-   arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
-   variant).
-
-   BC.W-CONTROL-SMOOTH — the surface legs read the QUICK control clock
-   `--duration-control` (0.12s, the named iOS control-press surface beat,
-   scheme-motion.css), NOT the 0.2s calm `--duration-fast`. A control the user
-   actively pokes wants the ~100-120ms quick beat that tracks the cursor; the
-   prior 0.2s dragged the colour/border/shadow VISIBLY behind the press (the §F
-   "super laggy" read). The bezier `--ease-standard` STAYS (a colour cross-fade
-   on a spring wobbles — §6 binding); the property list stays SURFACE-ONLY (no
-   `transform` leg — the press-squish is `.tap-squish`/`useSpringPress`'s spring
-   job, the canonical split). One token re-times the whole 12-consumer control
-   family. */
-@utility transition-control {
-    transition-property: background-color, color, box-shadow, border-color;
-    transition-duration: var(--duration-control);
-    transition-timing-function: var(--ease-standard);
-}
-
-/* ── Collapse transition recipe (AU.W8b.4) ──────────────────────────────
-   Shared height+opacity transition for reka-ui collapse surfaces (Accordion
-   content, Collapsible content). Replaces the per-site `transition-[height,opacity]`
-   wrap at ≥2 sites. The duration/easing rides the data-state
-   `animate-accordion-*`/`animate-collapsible-*` keyframes (this only declares
-   WHICH properties transition; the keyframes own the timing). */
-@utility transition-collapse {
-    transition-property: height, opacity;
-}
-
-/* ── Sheet/drawer slide-out animation grammar ──
-   The sheet/drawer-panel analogue of the overlay enter (the popover-class
-   surfaces now ride the spring-clocked `.glass-reveal`, BB.W-LIQUID-REVEAL).
-   Pairs with
-   `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
-   The open path uses --duration-panel (slow, deliberate); the close path
-   uses --duration-fast so dismiss feels snappy. R5 vocab.γ gap row 6;
-   consumed by W2.A sheet/drawer migration. */
-@utility sheet-animate {
-    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
-           data-[state=open]:fade-in data-[state=closed]:fade-out
-           data-[state=open]:duration-[var(--duration-panel)]
-           data-[state=closed]:duration-[var(--duration-fast)];
-}
-
-/* ── Calm CTA register (BA.W-GLASS-CAL, H2a — the disco retired) ──────────
-   The `@utility btn-audacious` + `@utility btn-audacious-gold` recipes + the
-   `@keyframes btn-gold-bg-sweep` are RETIRED (clean break, no alias). The user
-   removed the "disco effect" wholesale: the sparkle `::after` glyph, the
-   disco-grain hover (`--paper-clean-texture` + `--primary`/gold radial), the
-   gold-sweep shimmer, and the typed `--ripple-radius` press-ripple are GONE.
-
-   The `primary-audacious`/`gold-audacious` Button variants (button/index.ts)
-   now collapse onto the calm glass-first register — the `glass-wash`/`btn-glass`
-   surface + the `--glass-specular` edge catch-light, hover/press on the §6
-   doctrine (surface→`--ease-standard`, scale→`--spring-smooth`). `gold-audacious`
-   keeps a STATIC warm-gold tint (no animated sweep). The fenced-out GOOD pops
-   (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
-   STAY — they were never disco. */
-
-/* ── Table density utilities — AN.R0 ─────────────────────────────────────
-   `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
-   literals in TableCell.vue / TableHead.vue. Both read `--table-density`
-   (tokens.css §19) so a single CSS-var assignment on a wrapping element
-   scales all row padding + header height simultaneously. Default density=1
-   resolves to the identical geometry as the previous Tailwind literals. */
-@utility table-cell {
-    padding-inline: var(--table-cell-px, 1rem);
-    padding-block: var(--table-cell-py, 1rem);
-}
-
-@utility table-head {
-    height: var(--table-head-h, 3rem);
-    padding-inline: var(--table-head-px, 1rem);
-}
-
-/* ── Rainbow gradient backgrounds ───────────────────────────────────────
-   `.rainbow-vivid` + `.rainbow-pastel` paint a left-to-right 7-stop spectrum
-   from the canonical `--rainbow-*` / `--rainbow-pastel-*` token families
-   (tokens.css §14). Consumed by keyframes.js's demo transport chrome —
-   `TransportDock.vue` / `RibbonBar.vue` bind `rainbow-vivid` (playing/active)
-   vs `rainbow-pastel` (idle) on the play + Apply buttons (re-confirmed live at
-   AZ.W-PRUNE2 E4-2). */
-@utility rainbow-vivid {
-    background: linear-gradient(
-        to right,
-        var(--rainbow-red),
-        var(--rainbow-orange),
-        var(--rainbow-yellow),
-        var(--rainbow-green),
-        var(--rainbow-blue),
-        var(--rainbow-indigo),
-        var(--rainbow-violet)
-    );
-}
-
-@utility rainbow-pastel {
-    background: linear-gradient(
-        to right,
-        var(--rainbow-pastel-red),
-        var(--rainbow-pastel-orange),
-        var(--rainbow-pastel-yellow),
-        var(--rainbow-pastel-green),
-        var(--rainbow-pastel-blue),
-        var(--rainbow-pastel-indigo),
-        var(--rainbow-pastel-violet)
-    );
-}
-
-/* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
-   The default `::highlight()` paint for the `useTextHighlight` composable
-   (composables/motion; the `/motion-core` subpath, AX.W37). A named `Highlight`
-   registered in `CSS.highlights`
-   under one of these keys paints its `Range` set without a `<mark>` wrapper.
-   Token-bridged: the search mark reads the canonical pastel-yellow rainbow
-   token at a soft alpha; the equation/variable mark reads `--primary`. Both
-   axes are overridable via the `--text-highlight-*` custom properties. */
-::highlight(glass-search-mark) {
-    background-color: var(
-        --text-highlight-search-bg,
-        color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent)
-    );
-    color: var(--text-highlight-search-fg, inherit);
-}
-::highlight(glass-mark) {
-    background-color: var(
-        --text-highlight-bg,
-        color-mix(in srgb, var(--primary) 18%, transparent)
-    );
-    color: var(--text-highlight-fg, inherit);
-}
-
-/* ── Interactive-button four-state recipe ────────────────────────────────
-   `.btn-interactive` carries the canonical "Button-with-spring-hover"
-   four-state contract — transition + hover-scale + active-press + disabled-
-   opacity + focus-ring fade-in. The Button primitive's variants emit the four
-   states except `hover:scale-*`; this is the canonical opt-in that adds the
-   spring-hover lift. Consumed by keyframes.js at 7 sites.
-
-   AX.W52 §6 — the hover lift is the restrained `--scale-hover-btn` (1.05, NOT
-   the emphatic 1.08 `--scale-hover`) routed through `--spring-smooth` — the ONE
-   button scale register the §6 doctrine records and the gate asserts across
-   `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
-   stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
-   on a spring); only the `scale` transform leg springs. */
-@utility btn-interactive {
-    /* AQ.W3 §W3.2 identity base */
-    scale: 1;
-    transition:
-        background-color var(--duration-fast) var(--ease-standard),
-        color var(--duration-fast) var(--ease-standard),
-        scale var(--spring-smooth-duration) var(--spring-smooth),
-        opacity var(--duration-fast) var(--ease-standard);
-
-    &:hover {
-        scale: var(--scale-hover-btn);
-    }
-
-    &:active {
-        scale: var(--scale-press);
-    }
-
-    &:disabled {
-        opacity: var(--opacity-disabled);
-        pointer-events: none;
-    }
-
-    &:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-        /* Fade in; base state has no box-shadow transition → instant
-           removal. The `scale` leg keeps the `--spring-smooth` register. */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            scale var(--spring-smooth-duration) var(--spring-smooth),
-            opacity var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-}
+@utility scale-on-hover { scale: 1; transition: scale var(--spring-smooth-duration) var(--spring-smooth); &:hover { scale: var(--scale-hover); } } @utility twin-line-divider { --twin-line-catch: rgb(255 255 255 / 0.10); --twin-line-shadow: rgb(0 0 0 / 0.12); :where(.dark) & { --twin-line-catch: rgb(255 255 255 / 0.06); --twin-line-shadow: rgb(0 0 0 / 0.18); } } @utility transition-control { transition-property: background-color, color, box-shadow, border-color; transition-duration: var(--duration-control); transition-timing-function: var(--ease-standard); } @utility transition-collapse { transition-property: height, opacity; } @utility transition-disclosure { transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch); } @utility sheet-animate { @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out data-[state=open]:duration-[var(--duration-panel)] data-[state=closed]:duration-[var(--duration-fast)]; } .btn-punch { position: relative; --motion-weight: 1; --cartoon-press-t: 0; transition: scale var(--spring-smooth-duration) var(--ease-cartoon-punch); } .btn-punch > :not(.cartoon-cast) { --btn-glyph-pop: 0.05; transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast); } .btn-punch:active > :not(.cartoon-cast) { scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight)); } @media (prefers-reduced-motion: reduce) { .btn-punch { --motion-weight: 0; transition: scale var(--spring-smooth-duration) var(--ease-standard); } .btn-punch > :not(.cartoon-cast) { transition: none; } } @utility table-cell { padding-inline: var(--table-cell-px, 1rem); padding-block: var(--table-cell-py, 1rem); } @utility table-head { height: var(--table-head-h, 3rem); padding-inline: var(--table-head-px, 1rem); } @utility rainbow-vivid { background: linear-gradient( to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet) ); } @utility rainbow-pastel { background: linear-gradient( to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet) ); } ::highlight(glass-search-mark) { background-color: var( --text-highlight-search-bg, color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent) ); color: var(--text-highlight-search-fg, inherit); } ::highlight(glass-mark) { background-color: var( --text-highlight-bg, color-mix(in srgb, var(--primary) 18%, transparent) ); color: var(--text-highlight-fg, inherit); } @utility btn-interactive { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard); &:hover { scale: var(--scale-hover-btn); } &:active { scale: var(--scale-press); } &:disabled { opacity: var(--opacity-disabled); pointer-events: none; } &:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }

package/dist/styles/utilities/components.css

@@ -1,342 +1 @@
-/* utilities/components.css
-   The @layer components component half — metric-badge pill + label-bearing variants, the glassmorphic input-bar, hover-lift levels, cartoon shadows, divider utilities.
-   Carved from the utilities.css cascade root; @import-ed by utilities.css in
-   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
-@layer components {
-    /* ── Metric badge pill — compact glass label for numeric telemetry ── */
-    .metric-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        gap: var(--metric-badge-gap, 0.125rem);
-        max-width: var(--metric-badge-max-width, 8rem);
-        min-height: var(--metric-badge-min-height, 1.5rem);
-        padding:
-            var(--metric-badge-padding-block, 0.125rem)
-            var(--metric-badge-padding-inline, 0.5rem);
-        overflow: hidden;
-        flex-shrink: 0;
-        line-height: 1;
-        /* Canonical 5-tier glass surface: the `quiet` rung paints the badge
-           plate at the `--glass-bg-quiet` α (0.50) with `--glass-blur-quiet`.
-           Reduced-transparency / no-backdrop-filter fallbacks propagate
-           through the lazy custom-property resolution that `glass.css`
-           sets up — the badge no longer bypasses the canon.
-           (Per audit U.W0.C-c §7.2.) */
-        border: 1px solid var(--metric-badge-border, var(--glass-border-quiet));
-        border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill)));
-        background: var(--metric-badge-bg, var(--glass-bg-quiet));
-        backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet));
-        box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight));
-        /* SPATIAL/EFFECTS split (motion-canon P1): the EFFECTS legs
-           (background/border-color/box-shadow) ride the bezier --ease-standard;
-           the SPATIAL hover-lift legs (translate/scale) ride the --spring-smooth
-           hover register on its own settle clock --spring-smooth-duration (the
-           ONE interactive transform register .btn-pill/.glass-btn settle on). */
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            translate var(--spring-smooth-duration) var(--spring-smooth),
-            scale var(--spring-smooth-duration) var(--spring-smooth);
-    }
-
-    .metric-badge > span {
-        line-height: 1;
-        /* AW.W26 — `wrap-anywhere` (overflow-wrap: anywhere) on the value slot:
-           a long metric value breaks WITHIN the badge rather than being clipped
-           by the host `overflow: hidden`. v4.1 `wrap-anywhere` / mwg css §7.
-           Scoped to the value span, NOT a universal selector (mwg perf caveat). */
-        overflow-wrap: anywhere;
-    }
-
-    .metric-badge:hover {
-        /* Hover lifts to the `resting` rung — one step up the canonical
-           ladder (audit U.W0.C-c §7.2). BC.W-AX-METRIC-HOVER lifts the badge
-           into a tactile VALUE-LIFT: it nudges UP (--metric-badge-hover-translate
-           -2px) + scales a hair more (1.04) + casts the cartoon-sticker offset
-           shadow (--shadow-cartoon-sm) — token-first, so a consumer zeroes the
-           lift from :root (--metric-badge-hover-translate: 0). Compositor-only
-           (translate/scale/box-shadow — proof:no-layout-animation holds). */
-        border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
-        background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
-        box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight));
-        translate: 0 var(--metric-badge-hover-translate, -2px);
-        scale: var(--metric-badge-hover-scale, 1.04);
-    }
-
-    .metric-badge:active {
-        scale: var(--metric-badge-press-scale, 0.96);
-    }
-
-    .metric-badge:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    /* Phase-finish catch-light — the quieter cousin of --glass-specular.
-       Speedtest toggles `data-just-resolved="true"` on a metric pill once
-       its phase completes; the badge briefly carries a 1px catch-light
-       streak at the top edge. Reads as the pill catching club lighting at
-       the moment its result resolves. */
-    .metric-badge[data-just-resolved="true"] {
-        box-shadow:
-            inset 0 1px 0 0 rgb(255 255 255 / 0.18),
-            var(--metric-badge-shadow,
-                0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent),
-                var(--glass-highlight));
-    }
-
-    /* ── Label-bearing variants ───────────────────────────────────────────
-       When the badge carries a `labelPosition`, the prose-style annotation
-       slot precedes the amount. Inline keeps the row baseline-aligned;
-       stacked breaks to a column with items flush-left. The label slot
-       carries its own tracked uppercase rules; the badge's max-width
-       relaxes so the wider register fits. */
-    .metric-badge--label-inline {
-        flex-direction: row;
-        align-items: baseline;
-        justify-content: flex-start;
-        gap: var(--metric-badge-label-gap, 0.375rem);
-        max-width: var(--metric-badge-label-max-width, none);
-        text-align: left;
-    }
-
-    .metric-badge--label-stacked {
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: var(--metric-badge-label-gap-stacked, 0.0625rem);
-        max-width: var(--metric-badge-label-max-width, none);
-        text-align: left;
-        min-height: var(--metric-badge-min-height-stacked, 2.625rem);
-        padding-block: var(--metric-badge-padding-block-stacked, 0.375rem);
-    }
-
-    /* T.W2.T2 — stacked variant pairs amount + unit on a single row (row 2)
-       below the label (row 1). The `.metric-badge__row` wrapper baseline-
-       aligns the value and unit so the quantity reads as one phrase, not as
-       three siblings split across three rows (the pre-T behaviour the
-       audit B-spec §2.1 flagged). */
-    .metric-badge--label-stacked .metric-badge__row {
-        display: inline-flex;
-        align-items: baseline;
-        gap: var(--metric-badge-row-gap-stacked, 0.25rem);
-    }
-
-    /* T.W2.T3 — MetricPill density modifiers. The pill is a thin composition
-       over MetricBadge with `labelPosition="stacked"` defaults; the density
-       knob adjusts block padding + horizontal padding so the pill reads at
-       the right register for its dock host. `spacious` is the default
-       (chassis-strip rhythm), `comfortable` keeps the tighter compact
-       register for densely-packed dock clusters. The selectors compose with
-       `.metric-badge--label-stacked` so the inline ladder remains untouched
-       — these are stacked-only refinements. */
-    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
-        --metric-badge-padding-block-stacked: 0.5rem;
-        --metric-badge-padding-inline: 0.75rem;
-    }
-
-    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
-        --metric-badge-padding-block-stacked: 0.25rem;
-        --metric-badge-padding-inline: 0.5rem;
-    }
-
-    /* AS.W4 — @container style(--density) companion. A pill nested under a host
-       that sets `--density: comfortable | spacious` on a wrapping element picks
-       up the matching padding register with no `data-density` markup contract;
-       the attribute rules above stay the SOLE fallback (inv 47).
-       The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
-       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
-       pill carrying BOTH the attribute and a `--density` ancestor lands on the
-       attribute rule (same tokens, identical paint), while a pill with only the
-       ancestor token still resolves the right register (no competing rule sets
-       these padding custom props at higher weight in that case).
-
-       No `@supports` wrapper: unlike the sibling scroll-state recipe (which
-       probes `@supports (container-type: scroll-state)` — a probeable
-       container-type VALUE), style queries introduce no new `container-type`
-       value (every element is a style container by default), so there is no
-       clean declaration test for style-query support. This relies on
-       `@container style()`'s own graceful degradation: an engine without
-       style-query support parses the unknown at-rule as invalid, drops the
-       block, and keeps the `[data-density]` attribute base. (The earlier
-       `@supports (container-type: inline-size)` wrapper was wrong — it probed
-       SIZE-query support, a distinct feature with a distinct support timeline.) */
-    @container style(--density: spacious) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.5rem;
-            --metric-badge-padding-inline: 0.75rem;
-        }
-    }
-    @container style(--density: comfortable) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.25rem;
-            --metric-badge-padding-inline: 0.5rem;
-        }
-    }
-
-    .metric-badge__label {
-        letter-spacing: 0.18em;
-        line-height: 1;
-    }
-
-    /* Dual-slot default visibility (R2-spec):
-       The library renders both `--full` and `--abbr` siblings whenever both
-       props are passed. Default identity is the full label; the abbreviation
-       sits hidden until consumer container-query CSS flips it. The adjacent-
-       sibling selector preserves single-slot back-compat: when a consumer
-       passes only `abbreviation` (no `--full` sibling rendered), the abbr
-       reads at default visibility. */
-    .metric-badge__label--full + .metric-badge__label--abbr {
-        display: none;
-    }
-
-    /* sm-tier label tracking — tighter than the md/lg/xl 0.18em rung so the
-       compact register reads as a tighter annotation against the smaller
-       glyph rise. R2-spec D-Rec-2 (audit-D). */
-    .metric-badge[data-size="sm"] .metric-badge__label {
-        letter-spacing: 0.1em;
-    }
-
-    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
-       set `--dock-tab-h` + `--dock-label-size` were consolidated into
-       `dock.css` (their canonical dock-styles home). They formerly lived
-       here and resolved only by the index.css import order (utilities.css
-       after dock.css); the cascade-order dependency is now gone. */
-
-    /* ── Input bar — glassmorphic inline input container ──
-       Composes the canonical `floating` glass rung (--glass-bg-floating
-       ≈ 80% α, --glass-blur-floating ≈ 24px) — same surface read as the
-       prior raw composition but routed through the canonical 5-tier
-       ladder so PRT / no-backdrop-filter fallbacks propagate cleanly.
-       (Per audit U.W0.C-c §7.2.) */
-    .input-bar {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        border-radius: var(--radius-2xl);
-        border: 1px solid var(--glass-border-floating);
-        background: var(--glass-bg-floating);
-        backdrop-filter: var(--glass-blur-floating);
-
-        padding: 0 0.75rem;
-        /* BC.W-SEARCH-CUSTOM — the height reads the shared `--control-pill-h`
-           element-override seam (the SAME rung `.input-pill` reads), DEFAULTING to
-           `--control-h-sm` so a bare search bar is byte-identical to the HEAD
-           2.25rem pill. `controlSizeClass(size)` (_shared/useControlSize.ts) re-points
-           the seam per rung (sm→`--control-h-xs`-ish via the cohort, lg→`--control-h-lg`),
-           so the SearchBar/FuzzySearch `size` prop retunes the field height WITHOUT a
-           recipe fork — ONE substitution rung, the cohort is still the source. */
-        height: var(--control-pill-h, var(--control-h-sm));
-        max-width: var(--max-width-input);
-        width: 100%;
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-    .input-bar:focus-within {
-        box-shadow: var(--focus-ring-shadow);
-        border-color: var(--border);
-    }
-
-    .input-bar-field {
-        font-family: var(--font-mono, monospace);
-        /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
-           seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
-           (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The
-           `controlSizeClass("sm")` rung re-points it to `--control-text-sm` (quieter);
-           `default`/`lg` keep `--control-text`. So the search field type tracks the
-           cohort under `--ui-scale`, NOT a static `--type-small` literal. */
-        font-size: var(--control-pill-text, var(--control-text));
-        background: transparent;
-        border: none;
-        outline: none;
-        flex: 1;
-        min-width: 0;
-    }
-    .input-bar-field::placeholder {
-        color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
-    }
-
-    /* ── Hover lift — translate-y + shadow on hover (3 levels) ──
-       The shared transition is expressed once over the family; the three
-       :hover rules carry the per-level translate + shadow. */
-    :where(.hover-lift, .hover-lift-md, .hover-lift-lg) {
-        /* Individual-transform identity base (AQ.W3 §W3.2) — `translate: 0` at
-           rest mints the stacking context once so the hover lift does not
-           flicker it into being. */
-        translate: 0;
-        transition-property: translate, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--ease-standard);
-    }
-    .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-sm);
-        box-shadow: var(--shadow-md);
-    }
-    .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-md);
-        box-shadow: var(--shadow-md);
-    }
-    .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-lg);
-        box-shadow: var(--shadow-lg);
-    }
-
-    /* ── Cartoon shadows — token-driven box-shadow + bezel border + lift ──
-       The box-shadow stack reads from the canonical
-       `--shadow-cartoon-{sm,md,lg}` rungs declared at tokens.css:304-312.
-       Those rungs use `color-mix(in srgb, var(--shadow-color) N%, transparent)`
-       so dark-mode flips the cast through `--shadow-color` automatically.
-       The 2px bezel border + translateY are the cartoon-stamp geometry
-       atop the canonical depth — kept here so a single class delivers
-       the whole cartoon read.
-       (Per audit U.W0.C-c §1.3 / Union 1 — collapses the dual-system
-       drift onto the token-driven shadow.) */
-    :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) {
-        border: 2px solid var(--border);
-    }
-    /* Static cartoon-stamp lift (AQ.W3 §W3.2). NOT state-driven, so the
-       identity base is not strictly required, but the `translate:` longhand
-       keeps the family uniform with the state-driven sites above. */
-    .shadow-cartoon-sm {
-        box-shadow: var(--shadow-cartoon-sm);
-        translate: 0 -1px;
-    }
-    .shadow-cartoon-md {
-        box-shadow: var(--shadow-cartoon-md);
-        translate: 0 -1px;
-    }
-    .shadow-cartoon-lg {
-        box-shadow: var(--shadow-cartoon-lg);
-        translate: 0 -2px;
-    }
-
-    /* ── Divider utilities ── */
-    .divider-h {
-        height: 2px;
-        background: linear-gradient(
-            to right,
-            transparent 1%,
-            var(--border) 8%,
-            var(--border) 92%,
-            transparent 99%
-        );
-    }
-
-    .divider-h-tapered {
-        height: 2px;
-        background: linear-gradient(
-            to right,
-            transparent 3%,
-            var(--border) 15%,
-            var(--border) 85%,
-            transparent 97%
-        );
-    }
-
-}
+@layer components { .metric-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; scale: 1; gap: var(--metric-badge-gap, 0.125rem); max-width: var(--metric-badge-max-width, 8rem); min-height: var(--metric-badge-min-height, 1.5rem); padding: var(--metric-badge-padding-block, 0.125rem) var(--metric-badge-padding-inline, 0.5rem); overflow: hidden; flex-shrink: 0; line-height: 1; border: 1px solid var(--metric-badge-border, var(--glass-border-quiet)); border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill))); background: var(--metric-badge-bg, var(--glass-bg-quiet)); backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--spring-smooth-duration) var(--spring-smooth), scale var(--spring-smooth-duration) var(--spring-smooth); } .metric-badge > span { line-height: 1; overflow-wrap: anywhere; } .metric-badge:hover { border-color: var(--metric-badge-hover-border, var(--glass-border-resting)); background: var(--metric-badge-hover-bg, var(--glass-bg-resting)); box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight)); translate: 0 var(--metric-badge-hover-translate, -2px); scale: var(--metric-badge-hover-scale, 1.04); } .metric-badge:active { scale: var(--metric-badge-press-scale, 0.96); } .metric-badge:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .metric-badge[data-just-resolved="true"] { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.18), var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); } .metric-badge--label-inline { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--metric-badge-label-gap, 0.375rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; } .metric-badge--label-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--metric-badge-label-gap-stacked, 0.0625rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; min-height: var(--metric-badge-min-height-stacked, 2.625rem); padding-block: var(--metric-badge-padding-block-stacked, 0.375rem); } .metric-badge--label-stacked .metric-badge__row { display: inline-flex; align-items: baseline; gap: var(--metric-badge-row-gap-stacked, 0.25rem); } .metric-pill:not([data-dense]).metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.5rem; --metric-badge-padding-inline: 0.75rem; } .metric-pill[data-dense].metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.25rem; --metric-badge-padding-inline: 0.5rem; } .metric-badge__label { letter-spacing: 0.18em; line-height: 1; } .metric-badge__label--full + .metric-badge__label--abbr { display: none; } .metric-badge[data-size="sm"] .metric-badge__label { letter-spacing: 0.1em; } .input-bar { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--glass-border-floating); background: var(--glass-bg-floating); backdrop-filter: var(--glass-blur-floating); padding: 0 0.75rem; height: var(--control-pill-h, var(--control-h-sm)); max-width: var(--max-width-input); width: 100%; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .input-bar:focus-within { box-shadow: var(--focus-ring-shadow); border-color: var(--border); } .input-bar-field { font-family: var(--input-bar-font, var(--font-mono, monospace)); font-size: var(--control-pill-text, var(--control-text)); background: transparent; border: none; outline: none; flex: 1; min-width: 0; } .input-bar-field::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); } :where(.hover-lift, .hover-lift-md, .hover-lift-lg) { translate: 0; transition-property: translate, box-shadow; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-standard); } .hover-lift:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-sm); box-shadow: var(--shadow-md); } .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-md); box-shadow: var(--shadow-md); } .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-lg); box-shadow: var(--shadow-lg); } :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) { border: 2px solid var(--border); } .shadow-cartoon-sm { box-shadow: var(--shadow-cartoon-sm); translate: 0 -1px; } .shadow-cartoon-md { box-shadow: var(--shadow-cartoon-md); translate: 0 -1px; } .shadow-cartoon-lg { box-shadow: var(--shadow-cartoon-lg); translate: 0 -2px; } .divider-h { height: 2px; background: linear-gradient( to right, transparent 1%, var(--border) 8%, var(--border) 92%, transparent 99% ); } .divider-h-tapered { height: 2px; background: linear-gradient( to right, transparent 3%, var(--border) 15%, var(--border) 85%, transparent 97% ); } }