@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/glass/glass-atom.css

@@ -1,244 +1 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .glass-atom — BD.W-GLASS-ATOM-REGISTER: the ONE shared warm-glass register
-   the four small atoms (Badge-glass · metric-badge · slider fill · the `+N`
-   chip) consume in two registers (loud opaque identity vs quiet transmissive
-   glass).
-
-   CONSUME-ONLY — declares ZERO own glass tokens (the no-fork fence, Fence 1).
-   It COMPOSES:
-     · `.glass-capsule`        — the warm-transmissive lozenge BODY (warm floor +
-                                 rim + lift). `.glass-atom` is a PEER of any
-                                 sized chip, NEVER `.glass-chip` itself (Fence 2):
-                                 both compose `.glass-capsule`. A consumer applies
-                                 BOTH classes (`class="glass-capsule glass-atom"`)
-                                 or composes the capsule body via the glass tier
-                                 the host already wears.
-     · `--glass-fill-tint` / `--glass-fill-strength` (BE.W-TINTED-CHIP, glass.css)
-                                 — the per-instance plate-fill data hue. The atom
-                                 is its ≥Nth consumer; it APPLIES the axis on the
-                                 quiet register, never re-mints a tint.
-     · `--glass-material-rim`  — the keyed directional rim (the defined edge), the
-                                 SHIPPED two-stop rim re-pointed by `--glass-key`.
-     · the inert `.cartoon-cast` child + `--cartoon-ink` / `--shadow-cartoon-*`
-                                 (BD.W-CARTOON-CASTER / -CEL-INK) — the warm cel
-                                 stamp; the loud register intensifies on `data-cast`.
-     · `--motion-weight` × `--ease-cartoon-punch` (BD.W-MOTION-WEIGHT /
-                                 -CARTOON-PUNCH) — the non-uniform press squash +
-                                 the weight-coupled smear/settle.
-
-   @layer components, @import-ed by icon-chip.css (in-lane) AFTER glass.css (so
-   `.glass-capsule` + the `--glass-*` axes resolve) and BEFORE the consuming
-   recipes. Every channel is compositor-only + Safari-native (no
-   `backdrop-filter: url()`, no goo — Fence 8). The warm 0-alpha sources are
-   explicit `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit
-   black-premultiply hole, build-trap-(d)).
-   ════════════════════════════════════════════════════════════════════════ */
-
-@layer components {
-    /* ── The warm idle floor (the #2 dormant-tint cure) ──
-       The atom carries chroma BEFORE any field paints + on a dead ground. The
-       floor is NON-self-referential (build-trap-(b): a property reading ITSELF in
-       its own `max()` resolves to guaranteed-invalid and the term drops). A
-       SEPARATE input var is the source: a consumer (the accent ramp) writes
-       `--accent-fill-strength-in`, and the resolved fill strength floors at
-       `--atom-tint-floor` — PLAIN per-mode (12% light / 15% dark), NEVER
-       `light-dark()` (the inset-shadow trap). */
-    .glass-atom {
-        --atom-tint-floor: 12%;
-        --accent-fill-strength: max(
-            var(--accent-fill-strength-in, 0%),
-            var(--atom-tint-floor)
-        );
-        /* The quiet register's tint application — the plate body mixes toward the
-           per-instance data hue ON TOP of the capsule's warm composite. At the
-           `@property` defaults (`--glass-fill-tint: transparent` / strength 0%)
-           this is the byte-identical no-op floor; the warm floor above keeps the
-           idle body warm even at a transparent tint. The mix is `in oklab` (the
-           perceptual glass-tint family — NOT the in-srgb brand fence). */
-        --glass-atom-tinted: color-mix(
-            in oklab,
-            var(--glass-capsule-warm) calc(var(--atom-tint-floor) + var(--glass-fill-strength)),
-            oklch(0.9 0.05 75 / 0)
-        );
-        /* The motion register — the press/hover deform rides
-           `--motion-weight × --ease-cartoon-punch`. The atom inherits the rest
-           `--motion-weight: 0.618`; the loud register (`data-cast`, below) pushes
-           it to 1 so the punch is never muted (the loud-register coupling). The
-           SPATIAL legs (scale/translate) settle on the punch clock; the EFFECTS
-           legs (background/box-shadow) stay on the bezier (motion-canon P1). */
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-normal) var(--ease-cartoon-punch),
-            translate var(--duration-normal) var(--ease-cartoon-punch);
-    }
-    .dark .glass-atom {
-        --atom-tint-floor: 15%;
-    }
-
-    /* ── The non-uniform PRESS squash (the punch, NOT a shrink) ──
-       Widen X, compress Y (`scale: 1.04 0.94`) — real squash & stretch. The
-       `:active` is the no-JS floor; a consumer's `useLiquidPress` may drive a
-       continuous ramp via `--cartoon-press-t` (the caster reads it). The
-       `border-radius` is the pill, so under non-uniform scale the end-caps track
-       the scaled box (challenge #2 R4 — the capsule radius stays circle-tolerant). */
-    .glass-atom:active:not([data-disabled]):not(:disabled) {
-        scale: 1.04 0.94;
-    }
-
-    /* ── The cel cast — UNIVERSAL-but-GRADED (challenge #1 R5 / #3 R5) ──
-       Every atom carries a hairline warm rim-cast at rest (the family floor); the
-       loud flagships (`data-cast`) INTENSIFY to the loud layered-offset stamp.
-       The cast rides the inert `.cartoon-cast` child (BD.W-CARTOON-CASTER) — the
-       child carries `--shadow-cartoon-md` at rest and moves on `translate`/`scale`
-       only; here the atom only RE-POINTS the loud register's resting/hover rung
-       (it does not re-author the caster). The loud register pushes
-       `--motion-weight: 1` so the punch reads at full amplitude. */
-    .glass-atom[data-cast] {
-        --motion-weight: 1;
-    }
-    .glass-atom[data-cast] .cartoon-cast {
-        box-shadow: var(--shadow-cartoon-sm);
-    }
-    @media (hover: hover) {
-        .glass-atom[data-cast]:hover:not(:active) .cartoon-cast {
-            box-shadow: var(--shadow-cartoon-md);
-        }
-    }
-
-    /* ── The QUIET register (`[data-surface="glass"]`) — the transmissive tint ──
-       The quiet capsule applies the per-instance fill tint over the warm floor.
-       This is where the warm-not-gray read is won (badge-glass, the `+N` chip).
-       The body composes `.glass-capsule` (the consumer applies both classes); the
-       atom only LAYERS the tinted fill on top of the capsule's warm composite via
-       `background-image` (a later layer over the capsule's `background:` shorthand
-       — the proven `.paper-grid` coexistence seam, paints OVER the translucent
-       fill, UNDER content). The 0-alpha stop is warm `oklch(… / 0)`, never bare
-       `transparent` (challenge #1 R4 / #2 R4 — the WebKit desaturation fix). */
-    .glass-atom[data-surface="glass"] {
-        background-image: linear-gradient(
-            var(--glass-atom-tinted),
-            var(--glass-atom-tinted)
-        );
-    }
-
-    /* ── PRM/PRT carve ──
-       Under reduced-motion `--motion-weight: 0` zeroes the squash + the cast
-       travel/lag in ONE assignment (every `calc(… * --motion-weight)` in the
-       caster collapses to rest); the press scale collapses to 1. The warm tint +
-       the rim + the STATIC cel STAMP persist (a still frame, never a frozen
-       mid-animation — the legibility floor). */
-    @media (prefers-reduced-motion: reduce) {
-        .glass-atom {
-            --motion-weight: 0;
-        }
-        .glass-atom:active:not([data-disabled]):not(:disabled) {
-            scale: 1;
-        }
-    }
-
-    /* ── prefers-contrast: more — the rim α floors UP (WCAG 1.4.11 non-text) ──
-       The keyed rim is the legibility CONTRACT (the cast is a supplement,
-       challenge #2 R6). Under more-contrast the atom floors its border ink so the
-       lit edge clears ≥3:1 vs the OPAQUE body, not only the glass body. */
-    @media (prefers-contrast: more) {
-        .glass-atom {
-            border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
-        }
-    }
-
-    /* ════════════════════════════════════════════════════════════════════════
-       .badge-atom — the Badge consumer of the register (loud + quiet).
-
-       The LOUD register (the default opaque identity pill): the family signature
-       WITHOUT the glass body — the keyed warm rim (the defined edge, the
-       `border-transparent` melt fix), the non-uniform press-squish, the
-       universal-but-graded cel. The badge applies `.badge-atom` on EVERY variant
-       (the CVA base); `surface="glass"` ALSO applies `.glass-capsule .glass-atom`
-       for the quiet transmissive body.
-       ════════════════════════════════════════════════════════════════════════ */
-    .badge-atom {
-        position: relative;
-        /* AQ.W3 identity base — `scale`/`translate` longhands mint the stacking
-           context once so the press squash + the cast child compose cleanly. */
-        scale: 1;
-        translate: 0;
-        /* The DEFINED EDGE — the SHIPPED keyed two-stop rim (re-pointed by
-           `--glass-key`) as the pill's silhouette, so a sand `secondary` no longer
-           melts into a cream panel (the live `border-transparent` melt). It is a
-           box-shadow rim, NOT a `border` (the base CVA retired the `border`
-           keyword), so it adds zero layout box + reads warm. The press/lift scale
-           rides the punch register `× --motion-weight`. */
-        box-shadow: var(--glass-material-rim);
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-normal) var(--ease-cartoon-punch),
-            translate var(--duration-normal) var(--ease-cartoon-punch);
-    }
-
-    /* The non-uniform PRESS squash (widen X, compress Y — NOT a uniform shrink). */
-    .badge-atom:active:not([data-disabled]):not([aria-disabled='true']) {
-        scale: 1.04 0.94;
-    }
-
-    /* `outline` variant — the rim reads a louder warm-ink edge (it IS the edge). */
-    .badge-atom--outline {
-        box-shadow: var(--glass-material-rim);
-        border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
-    }
-
-    /* The LOUD cel stamp (opt-in, `data-cast`) — pushes the weight to 1 so the
-       punch reads at full amplitude + intensifies the inert child's cast. The
-       hairline rim-cast family floor is the rim above; this is the LOUD layered
-       offset (the flagship sticker stamp). */
-    .badge-atom[data-cast] {
-        --motion-weight: 1;
-    }
-    .badge-atom[data-cast] .cartoon-cast {
-        box-shadow: var(--shadow-cartoon-sm);
-    }
-    @media (hover: hover) {
-        .badge-atom[data-cast]:hover:not(:active) .cartoon-cast {
-            box-shadow: var(--shadow-cartoon-md);
-        }
-    }
-
-    /* The QUIET glass register — retire the opaque `bg-*` plate so the warm-glass
-       `.glass-capsule` body + the `.glass-atom` tinted `background-image` paint the
-       surface (no double-fill). The variant `bg-*` utility sets `background-color`;
-       this resets it to transparent so the capsule fill + the data-hue tint win.
-       The text color (the variant's `text-*`) is kept — the label still reads. */
-    .badge-atom--glass {
-        background-color: transparent !important;
-        /* The quiet capsule tints toward the variant's SEMANTIC hue via the shared
-           `--glass-fill-tint` axis (BE.W-TINTED-CHIP) — colored glass, never a
-           forked tint. The strength is a calm stop (the body ink stays legible).
-           A consumer overrides `--glass-fill-tint` per-instance for a bespoke hue. */
-        --glass-fill-strength: var(--badge-glass-strength, 16%);
-    }
-    /* Per-variant glass tint — the data hue the quiet body mixes toward. The
-       semantic plate token becomes the tint source (the loud fill demoted to a
-       transmissive hue). `secondary`/`outline` are the calm/neutral routes. */
-    .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); }
-    .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); }
-    .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); }
-    .badge-atom--glass[data-variant='destructive'] { --glass-fill-tint: var(--destructive); }
-    .badge-atom--glass[data-variant='success'] { --glass-fill-tint: var(--success); }
-    .badge-atom--glass[data-variant='warning'] { --glass-fill-tint: var(--warning); }
-    .badge-atom--glass[data-variant='info'] { --glass-fill-tint: var(--info); }
-
-    @media (prefers-reduced-motion: reduce) {
-        .badge-atom {
-            --motion-weight: 0;
-        }
-        .badge-atom:active:not([data-disabled]) {
-            scale: 1;
-        }
-    }
-    @media (prefers-contrast: more) {
-        .badge-atom {
-            border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent);
-        }
-    }
-}
+@layer components { .glass-atom { --atom-tint-floor: 12%; --accent-fill-strength: max( var(--accent-fill-strength-in, 0%), var(--atom-tint-floor) ); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-normal) var(--ease-cartoon-punch), translate var(--duration-normal) var(--ease-cartoon-punch); } .dark .glass-atom { --atom-tint-floor: 15%; } .glass-atom:active:not([data-disabled]):not(:disabled) { scale: 1.04 0.94; } .glass-atom[data-cast] { --motion-weight: 1; } .glass-atom[data-cast] .cartoon-cast { box-shadow: var(--shadow-cartoon-sm); } @media (hover: hover) { .glass-atom[data-cast]:hover:not(:active) .cartoon-cast { box-shadow: var(--shadow-cartoon-md); } } .glass-atom[data-surface="glass"] { background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); } @media (prefers-reduced-motion: reduce) { .glass-atom { --motion-weight: 0; } .glass-atom:active:not([data-disabled]):not(:disabled) { scale: 1; } } @media (prefers-contrast: more) { .glass-atom { border-color: color-mix(in srgb, var(--foreground) 24%, transparent); } } .badge-atom { position: relative; scale: 1; translate: 0; box-shadow: var(--glass-material-rim); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-normal) var(--ease-cartoon-punch), translate var(--duration-normal) var(--ease-cartoon-punch); } .badge-atom:active:not([data-disabled]):not([aria-disabled='true']) { scale: 1.04 0.94; } .badge-atom--outline { box-shadow: var(--glass-material-rim); border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); } .badge-atom[data-cast] { --motion-weight: 1; } .badge-atom[data-cast] .cartoon-cast { box-shadow: var(--shadow-cartoon-sm); } @media (hover: hover) { .badge-atom[data-cast]:hover:not(:active) .cartoon-cast { box-shadow: var(--shadow-cartoon-md); } } .badge-atom--glass { background-color: transparent !important; --glass-fill-strength: var(--badge-glass-strength, 16%); } .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); } .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-tone='destructive'] { --glass-fill-tint: var(--destructive); } .badge-atom--glass[data-tone='success'] { --glass-fill-tint: var(--success); } .badge-atom--glass[data-tone='warning'] { --glass-fill-tint: var(--warning); } .badge-atom--glass[data-tone='info'] { --glass-fill-tint: var(--info); } @media (prefers-reduced-motion: reduce) { .badge-atom { --motion-weight: 0; } .badge-atom:active:not([data-disabled]) { scale: 1; } } @media (prefers-contrast: more) { .badge-atom { border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent); } } }

package/dist/styles/glass/glass-capsule.css

@@ -1,143 +1 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .glass-capsule — the ONE shared glassy register (BD.W-TAB-IOS-CAPSULE).
-
-   The warm-transmissive lifted lozenge + the recessed warm channel it rides in
-   + the glass hover/press register, factored ONCE so EVERY consumer (segmented
-   pill · dock-tab selected · Button glass · chips · cards) COMPOSES it instead
-   of re-forking the lifted-plate composite. ≥3 consumers by construction — the
-   overfitting bar cleared by extraction. The tabs facility is the reference
-   implementation; "make buttons glassy like the tabs" is a one-recipe substitution.
-
-   Clean break — the prior inline `.segmented-indicator` composite (fill + rim +
-   lift) moves here VERBATIM and the pill COMPOSES the class. No alias, no legacy.
-
-   @layer components, @import-ed in index.css AFTER the glass ladder (so the
-   `--glass-bg-*`/`--glass-rim-*`/`--glass-shadow-*` tokens resolve) and BEFORE
-   the consuming tabs/dock/button recipes.
-
-   THREE states:
-     · REST  = .glass-capsule           — the warm-glass lifted plate.
-     · TRACK = .glass-capsule-track     — the recessed warm channel.
-     · HOVER = .glass-capsule-hover     — specular catch-light lift + press-snap.
-
-   Every channel is compositor-only + Safari-native by construction (the §7 floor):
-   no `backdrop-filter: url()`, no SVG goo, no WebGL. The recess is a STATIC inset
-   shadow built off a PLAIN per-mode token pair (NEVER a `light-dark()` fragment —
-   an inset-shadow leg inside light-dark() computes the WHOLE box-shadow to `none`,
-   the binding MEMORY lesson). The hover lift is a `scale` + `--glass-specular`
-   step (the SHARED specular-lift primitive `.glass-drag-lift` also composes).
-   ════════════════════════════════════════════════════════════════════════ */
-
-@layer components {
-    /* ── .glass-capsule — the raised lit warm-glass lozenge ──
-       The fill reads the SHARED element-level oklab-tinted floating pair (the W55
-       adaptive seam, `surfaces.css` `:where(.btn-glass, .segmented-indicator,
-       .glass-capsule)`) — over a bright field it darkens-to-legible, over a calm
-       field it stays warm-cream/near-white. The FORWARD-ness comes from the rim +
-       lift, NOT from cranking the same-hue alpha. */
-    .glass-capsule {
-        /* The WARM-FLOOR re-invent (BD.W-TAB-IOS-CAPSULE C6). The bare
-           `--glass-bg-floating-tinted` desaturates to near-gray over a vibrant
-           aurora (live-measured oklab(0.793 0.005 0.012), chroma 0.0128 < 0.02).
-           Compose a SMALL floor toward an explicitly WARM oklch source so the
-           CAPSULE's own resolved fill carries chroma — independent of the
-           `--glass-tint-strength: 0%` adaptive default (which is zero-delta at rest
-           and only lifts under the bright bucket). This exercises the REAL
-           `color-mix(in oklab)` seam over the live light-dark() fill (NOT a
-           hardcoded hsl look-alike — the amendment's fake-gate ban). The source is
-           a warm oklch (build-trap-(d) safe form — warm color, never bare
-           `transparent`); at `--glass-capsule-warm-floor: 16%` the painted capsule
-           clears meanChroma ≥ 0.02 BOTH modes with negligible L lift (stays near-
-           white). `--glass-capsule-warm` is a warm cream amber both modes. */
-        /* The fill is INDIRECTED through `--glass-capsule-fill` so a consumer can
-           re-point the rung (quiet/loud/selected — buttons' quiet triplet, the dock
-           selected pill) WITHOUT forking the register; the default keeps the warm
-           floor compose. */
-        background: var(
-            --glass-capsule-fill,
-            color-mix(
-                in oklab,
-                var(--glass-bg-floating-tinted),
-                var(--glass-capsule-warm) var(--glass-capsule-warm-floor)
-            )
-        );
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        /* The lifted-plate composite: the directional rim (bright top catch-light +
-           warm bottom under-shadow — the iOS-27 top-light/bottom-shadow thickness)
-           PLUS a layered glass under-shadow lifting the plate ~2-3px off the quiet
-           track. */
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom),
-            var(--glass-shadow-floating);
-        border-radius: var(--radius-pill);
-    }
-
-    /* ── .glass-capsule-track — the recessed warm channel (the iOS-27 sunken well) ──
-       The track SINKS: rim + a STATIC inset recess leg. The recess ink is a PLAIN
-       per-mode token pair (`tokens/glass-fx.css` light arm, `tokens/dark-arm.css`
-       dark arm) — NEVER a `light-dark()` fragment (the inset-shadow trap). The
-       recess is static (a sunken channel does not pulse — never a @keyframes
-       target; `proof:no-layout-animation` holds). */
-    .glass-capsule-track {
-        background: var(--glass-bg-quiet);
-        backdrop-filter: var(--glass-blur-quiet);
-        -webkit-backdrop-filter: var(--glass-blur-quiet);
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom),
-            inset 0 1px 2px var(--tab-track-recess-ink);
-    }
-
-    /* ── .glass-capsule-hover — the SHARED specular-lift primitive ──
-       The two-channel glass hover (specular catch-light lift + a hair of scale) +
-       the press-snap, on the FAST bezier clock (hover is a bezier ease, not a
-       spring), volume-preserving, compositor-only. This is the SAME specular-lift
-       idiom `.glass-drag-lift` carries — factored here ONCE; `.glass-drag-lift`
-       re-composes `--glass-specular`-step + `will-change` rather than forking a
-       parallel block. The non-selected pill + the buttons greenfield compose this
-       wholesale: glass at rest + specular-lift on hover + press-snap on active. */
-    .glass-capsule-hover {
-        /* The SPATIAL leg (scale) rides the weighty cartoon-punch curve (the
-           liquid-weight-universal mandate — a hover lift carries inertia/overshoot,
-           never an abrupt bezier jerk; the SAME spatial currency `.glass-chip`/
-           `.glass-atom` ride, PRM-zeroed via the `--ease-cartoon-punch` fallback). The
-           EFFECTS leg (the `--specular-intensity` gleam channel) stays on the fast
-           bezier (motion-canon P1 — an effects cross-fade is not a spatial motion). */
-        transition:
-            scale var(--duration-fast) var(--ease-cartoon-punch),
-            --specular-intensity var(--duration-fast) var(--ease-standard);
-    }
-    /* The SHARED specular-lift step — declared ONCE here, COMPOSED by both the hover
-       register AND the drag-lift (BD.W-TAB-IOS-CAPSULE C7: one declaration of the
-       `--glass-specular` catch-light step, never a parallel fork). `.glass-drag-lift`
-       (segmented-tabs.css) re-points its grabbed-state catch-light onto THIS step
-       rather than re-declaring `--glass-specular`; it adds only its distinct grabbing
-       bits (the grab cursor + the `will-change` compositor hint). The W-GLASS-CAL
-       sub-perceptual catch — a hair brighter at the specular edge, disco-FREE. */
-    .glass-capsule-hover:hover,
-    .glass-drag-lift {
-        /* Drive the REAL gleam-opacity channel (`--specular-intensity`, read by the
-           moving-specular `::before` at material.css opacity) — not the dead
-           `--glass-specular` name. Composes with the material hover system; fires for
-           both the :hover register AND the grabbed `.glass-drag-lift` class. */
-        --specular-intensity: 0.14;
-    }
-    .glass-capsule-hover:hover {
-        /* the 1.5% press-ready lift (the lift is hover-only; the drag-lift carries no
-           scale of its own — the translate/squish are the morph primitive's writes) */
-        scale: 1.015;
-    }
-    .glass-capsule-hover:active {
-        /* the --scale-press snap */
-        scale: var(--scale-press-sm, 0.97);
-    }
-    @media (prefers-reduced-motion: reduce) {
-        /* the lift is motion; the specular catch (a static legibility cue) stays. */
-        .glass-capsule-hover:hover,
-        .glass-capsule-hover:active {
-            scale: 1;
-        }
-    }
-}
+@layer components { .glass-capsule { background: var( --glass-capsule-fill, color-mix( in oklab, var(--glass-bg-floating-tinted), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ) ); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--glass-shadow-floating); border-radius: var(--radius-pill); } .glass-capsule-track { background: var(--glass-bg-quiet); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); -webkit-backdrop-filter: var(--glass-blur-quiet); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), inset 0 1px 2px var(--tab-track-recess-ink); } .glass-capsule-hover { transition: scale var(--duration-fast) var(--ease-cartoon-punch), --specular-intensity var(--duration-fast) var(--ease-standard); } .glass-capsule-hover:hover, .glass-drag-lift { --specular-intensity: 0.14; } .glass-capsule-hover:hover { scale: 1.015; } .glass-capsule-hover:not([data-press-armed]):active { scale: var(--scale-press-sm, 0.97); } @media (prefers-reduced-motion: reduce) { .glass-capsule-hover:hover, .glass-capsule-hover:not([data-press-armed]):active { scale: 1; } } .glass-dock :is(.glass-capsule, .glass-capsule-hover) { background-clip: content-box; } .glass-dock .dock-icon-button { padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0)); } }

package/dist/styles/glass/glass-chip.css

@@ -1,215 +1 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .glass-chip — BD.W-CHIP-CONGRUENT-GLASS: the ONE warm-glass toggle register
-   the chip family (ToggleChip · SelectableChip + the toggle-group children)
-   composes. A stadium-pill warm-glass LENS that PUNCHES when you pick it: the
-   tonal band floods through the translucent lens on `--ease-cartoon-punch` with
-   anticipation → overshoot → settle, a one-shot accent-bloom trailing the
-   spatial leg.
-
-   CONSUME-ONLY — declares ZERO own glass tokens (the no-fork fence, Fence C3c).
-   It COMPOSES:
-     · `.glass-capsule`        — the warm-transmissive lozenge BODY (warm floor +
-                                 rim + lift + blur), on `--radius-pill`. The chip
-                                 is the ≥4th `.glass-capsule` consumer (after the
-                                 tab indicator + the button sites). NEVER inlines
-                                 `backdrop-filter` / `--glass-bg-*` / a rim.
-     · `.glass-capsule-hover`  — the SHARED specular-lift + press-snap step.
-     · `.accent-tone`          — the contrast-floored tonal channels (idle fill /
-                                 active band / active edge / contrast-safe ink).
-     · `--glass-fill-tint` / `--glass-fill-strength` (BE.W-TINTED-CHIP, glass.css)
-                                 — the per-instance plate-fill data hue the body
-                                 tints toward. The chip is its ≥3rd consumer; it
-                                 APPLIES the axis, never re-mints a tint.
-     · `--motion-weight` × `--ease-cartoon-punch` (BD.W-MOTION-WEIGHT /
-                                 -CARTOON-PUNCH) — the cartoon press/flood punch +
-                                 the PRM dial (`--motion-weight: 0`).
-
-   DISTINCT-not-fork of `.glass-atom` (the small-atom register: Badge/+N/slider):
-   both COMPOSE `.glass-capsule`. `.glass-atom` is the quiet always-on identity
-   chip; `.glass-chip` is the TOGGLE face whose state flip is the de-frauded
-   colour-flood punch. They never write each other's channels.
-
-   @layer components, @import-ed by index.css AFTER glass.css (so `.glass-capsule`
-   + `.accent-tone` + the `--glass-*` axes resolve) and BEFORE/AROUND the chip
-   recipes. Every channel is compositor-only + Safari-native (no
-   `backdrop-filter: url()`, no goo — Fence 8). The warm 0-alpha sources are
-   explicit `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit
-   black-premultiply hole, build-trap-(d)). Per-mode `.dark` arms (no
-   `light-dark()` fragment).
-   ════════════════════════════════════════════════════════════════════════ */
-
-/* The COMMIT-flood scalar — the ON-flip envelope. `inherits: TRUE` is the
-   load-bearing de-fraud (challenge R1): an `inherits:false` reg resolves to its
-   `initial-value` on the `::after` PSEUDO (a separate box from the element that
-   sets it), so the flood reads `0` forever. `inherits:true` lets the element's
-   `[data-state="on"]{--chip-flood-t:1}` reach the pseudo. Typed so the opacity
-   interpolates a NUMBER, not the textual representation. On a pre-Baseline engine
-   that drops the typed reg the scalar collapses to the initial 0 — the chip still
-   selects (the COLOUR event below is plain `data-state`, never tied to the
-   scalar; challenge R5). */
-@property --chip-flood-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-@layer components {
-    /* ── .glass-chip — the warm-glass toggle lens ──
-       The chip wears `.glass-chip .glass-capsule .glass-capsule-hover .accent-tone`
-       (the component CVA composes all four). This rule owns only the chip-specific
-       layer: the warm idle floor (the #2 dormant-tint cure), the per-instance fill
-       tint over the capsule's warm body, the ONE `scale` write (hover/press/punch
-       folded), and the `::after` flood. The capsule owns the body/rim/blur. */
-    .glass-chip {
-        position: relative;
-        /* The flood `::after` sits ABOVE the translucent fill (challenge R2): a
-           new stacking context so `plus-lighter` blends over the lens body, never
-           occluded under an opaque layer. The capsule body is α<1, so the bloom
-           reads through. */
-        isolation: isolate;
-
-        /* ── The WARM IDLE FLOOR (root #2 cure) ──
-           The chip carries chroma at rest over warm-cream even with no vibrant
-           field behind. The floor RAISES the `.accent-tone` idle strength the chip
-           reads — a NON-self-referential floor (build-trap-(b): a property reading
-           ITSELF in its own `max()` is guaranteed-invalid and drops). A SEPARATE
-           input var is the source: the `.accent-tone` recipe's default idle
-           strength is 8%; the chip floors the resolved strength to
-           `--chip-tint-floor` so the idle AND the default-tone active band both
-           clear the 0.02 warm floor (the live finding: BOTH are gray over
-           `--primary`). PLAIN per-mode pair (12% light / 15% dark), NEVER
-           `light-dark()` (the inset-shadow trap). */
-        --chip-tint-floor: 12%;
-        --accent-fill-strength: max(8%, var(--chip-tint-floor));
-        /* Lift the DEFAULT-tone active band too (the §1b finding: the default
-           band reads C 0.013 — a darken, not a chroma lift). The band floors to a
-           bolder warm-clearing stop so a selected default chip is tonal, not gray. */
-        --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%));
-
-        /* ── The per-instance fill tint (BE.W-TINTED-CHIP CONSUME) ──
-           The translucent capsule body tints toward the consumer data hue ON TOP
-           of the W55 legibility composite. At the `@property` defaults
-           (`--glass-fill-tint: transparent` / strength 0%) this is the byte-
-           identical no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X — the warm
-           floor above keeps the idle body warm even at a transparent tint). The
-           mix is `in oklab` (the perceptual glass-tint family). The 0-alpha stop is
-           warm `oklch(… / 0)`, never bare `transparent` (the WebKit black-
-           premultiply hole). */
-        --glass-chip-tinted: color-mix(
-            in oklab,
-            var(--glass-fill-tint, oklch(0.9 0.05 75 / 0))
-                var(--glass-fill-strength, 0%),
-            oklch(0.9 0.05 75 / 0)
-        );
-
-        /* ── The ONE scale write (hover/press/punch, single source of truth) ──
-           Folds the on-flood overshoot into ONE `scale` so it never collides with
-           the capsule-hover scale step (the CVA's `hover:scale-*` is retired in the
-           chip variants — this is the sole scale writer on the chip box). Volume-
-           preserving, center-pinned. The coefficient (0.12) is raised vs the
-           segmented-indicator's 0.06 so the dip/overshoot clear the gate's OWN
-           thresholds (≤0.996 dip / ≥1.04 overshoot at weight 1.0): the punch curve
-           peaks at 1.22 → 1 + 0.12·1.22·1.0 ≈ 1.026 over rest is too soft, so the
-           overshoot READ is carried by the curve's pre-dip (−0.04) + the COLOUR
-           event; the spatial leg adds the perceptible breathe without taffy. */
-        scale: calc(1 + 0.12 * var(--chip-flood-t, 0) * var(--motion-weight, 0.618));
-        transform-origin: center;
-
-        /* The SPATIAL legs (scale) settle on the punch clock; the EFFECTS legs
-           (background/border/color) stay on the bezier (motion-canon P1). */
-        transition:
-            scale var(--duration-normal) var(--ease-cartoon-punch),
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard);
-
-        /* ── The per-instance fill tint application ──
-           The capsule body (the `.glass-capsule` `background:` shorthand) is the
-           warm transmissive plate; the chip LAYERS the data-hue tint on top via
-           `background-image` (a later layer over the capsule's shorthand — the
-           proven `.paper-grid`/`.glass-atom` coexistence seam: paints OVER the
-           translucent fill, UNDER content). When `--glass-fill-tint` is unset the
-           tinted layer is the warm 0-alpha no-op (invisible) and the capsule's warm
-           body reads. */
-        background-image: linear-gradient(
-            var(--glass-chip-tinted),
-            var(--glass-chip-tinted)
-        );
-    }
-    .dark .glass-chip {
-        --chip-tint-floor: 15%;
-    }
-
-    /* ── The on-flip COLOUR event (the perceptible primary read) ──
-       OFF→ON floods the active band through the lens + lights the active rim + the
-       contrast-safe ink. Driven by PLAIN `data-state` (the reka Toggle contract),
-       NEVER tied to `--chip-flood-t` — so selection is legible even on a pre-
-       Baseline engine that drops the typed scalar (challenge R5). The `.accent-tone`
-       channels supply the colour; this rule only SWAPS which channel paints. */
-    .glass-chip[data-state="on"] {
-        background-color: var(--accent-band);
-        border-color: var(--accent-edge);
-        color: var(--accent-ink);
-        /* arm the spatial+bloom envelope */
-        --chip-flood-t: 1;
-    }
-
-    /* ── The COMMIT flood `::after` (the trailing accent bloom) ──
-       An additive radial bloom INSIDE the lens (`inset:0`, `border-radius:inherit`,
-       `plus-lighter`) ABOVE the translucent fill (inside `isolation:isolate`,
-       challenge R2). Its opacity reads `--chip-flood-t` (inherited from the element,
-       challenge R1) so it fires on ON and clears on OFF. The transition DELAY trails
-       the spatial leg (EFFECTS-trails-SPATIAL, the v3 f006→f007 ordering). The bloom
-       hue is the active band; default tone neutral → a provable near-no-op until a
-       consumer sets a vibrant `:tone`. */
-    .glass-chip::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        background: radial-gradient(
-            120% 140% at 50% 50%,
-            color-mix(in oklab, var(--accent-band) 60%, oklch(0.9 0.05 75 / 0)),
-            oklch(0.9 0.05 75 / 0) 72%
-        );
-        mix-blend-mode: plus-lighter;
-        opacity: var(--chip-flood-t, 0);
-        transition: opacity var(--duration-normal) var(--ease-out) 60ms;
-    }
-
-    /* ── The CELL exception — a 72px icon+label TILE is a CARD, not a pill ──
-       The DELIBERATE 2-silhouette family (named honestly): the inline rungs are
-       stadium pills (the capsule's `--radius-pill`); the cell re-points to the
-       squircle card radius. It composes the SAME `.glass-chip` material + motion;
-       only the silhouette differs. The `::after` flood inherits the card radius. */
-    .glass-chip--cell {
-        border-radius: var(--radius-card);
-    }
-    .glass-chip--cell.glass-capsule {
-        border-radius: var(--radius-card);
-    }
-
-    /* ── PRM carve ──
-       Under reduced-motion `--motion-weight: 0` zeroes the spatial overshoot (the
-       `scale` calc collapses to 1) in ONE assignment; the bloom's MOTION rides the
-       same dial via the punch clock. The COLOUR cross-fade + the static lens lift
-       (the `.glass-capsule` rim/shadow) + the `--accent-band` swap REMAIN —
-       selection is always legible (challenge R7: zeroes the MOTION, not the bloom).
-       Vestibular-safe. */
-    @media (prefers-reduced-motion: reduce) {
-        .glass-chip {
-            --motion-weight: 0;
-        }
-    }
-
-    /* ── prefers-contrast: more — the active rim α floors UP ──
-       The active `--accent-edge` rim is the legibility CONTRACT; under more-contrast
-       floor the border ink so the selected lit edge clears ≥3:1 over the lens body.
-       The `--accent-ink` is already value.js contrast-safe (useAccentTone). */
-    @media (prefers-contrast: more) {
-        .glass-chip[data-state="on"] {
-            border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
-        }
-    }
-}
+@property --chip-flood-t { syntax: "<number>"; inherits: true; initial-value: 0; } @layer components { .glass-chip { position: relative; isolation: isolate; --chip-tint-floor: 12%; --accent-fill-strength: max(8%, var(--chip-tint-floor)); --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%)); scale: calc(1 + 0.12 * var(--chip-flood-t, 0) * var(--motion-weight, 0.618)); transform-origin: center; transition: scale var(--duration-normal) var(--ease-cartoon-punch), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); } .dark .glass-chip { --chip-tint-floor: 15%; } .glass-chip[data-state="on"] { background-color: var(--accent-band); border-color: var(--accent-edge); color: var(--accent-ink); --chip-flood-t: 1; } .glass-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in oklab, var(--accent-band) 60%, oklch(0.9 0.05 75 / 0)), oklch(0.9 0.05 75 / 0) 72% ); mix-blend-mode: plus-lighter; opacity: var(--chip-flood-t, 0); transition: opacity var(--duration-normal) var(--ease-out) 60ms; } .glass-chip--cell { border-radius: var(--radius-card); } .glass-chip--cell.glass-capsule { border-radius: var(--radius-card); } @media (prefers-reduced-motion: reduce) { .glass-chip { --motion-weight: 0; } } @media (prefers-contrast: more) { .glass-chip[data-state="on"] { border-color: color-mix(in srgb, var(--foreground) 28%, transparent); } } }

package/dist/styles/glass/grain-overlay.css

@@ -0,0 +1 @@
+@layer components { .glass-wash::after, .glass-quiet::after, .glass-resting::after, .glass-floating::after, .glass-overlay::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--paper-clean-texture); background-repeat: repeat; background-size: var(--paper-texture-size); opacity: var(--glass-grain-opacity); transition: opacity var(--glass-grain-engage-duration, 120ms) linear; pointer-events: none; mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { .glass-wash::after, .glass-quiet::after, .glass-resting::after, .glass-floating::after, .glass-overlay::after { transition: none; } } .dark .glass-wash::after, .dark .glass-quiet::after, .dark .glass-resting::after, .dark .glass-floating::after, .dark .glass-overlay::after { mix-blend-mode: soft-light; } }

package/dist/styles/glass/ladder-undershadow.css

@@ -0,0 +1 @@
+@layer components { .glass-opaque { --glass-level: 0; --glass-tint-strength: 0%; } .glass-quiet.glass-over-text, .glass-quiet[data-over-content="text"] { box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet); } .glass-resting.glass-over-text, .glass-resting[data-over-content="text"] { box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting); } .glass-resting[data-over-content="solid"] { box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting); } .glass-floating[data-over-content="solid"] { box-shadow: var(--glass-material-rim), var(--glass-under-shadow-default), var(--glass-shadow-floating); } }