@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/drawer.css

@@ -1,406 +1 @@
-/*
- * drawer.css — Detented bottom-sheet grammar (AN.W3; BB.W-DRAWER-ABROGATE).
- *
- * THE HOUSE owns the snap math end-to-end now (vaul-vue ABROGATED). The Drawer
- * family composes the reka `DialogRoot`/`DialogPortal`/`DialogContent` headless
- * substrate (the SAME vueuse-free substrate every other compound wrapper binds),
- * and the snap settle is driven by ONE house `SpringProgress` on the `DRAWER_SNAP`
- * register (`useDrawerSnap.ts`, the §6 dock-morph `linear()` clock — NOT a bespoke
- * `cubic-bezier(.32,.72,0,1)` transition; that was vaul's). The engine writes the
- * `--glass-drawer-t` snap-fraction scalar (0 = closed/offscreen, 1 = the fullest
- * detent) the content root reads as its translate; this file owns the LOOK: the
- * glass sheet surface, the rounded peek handle, the snap-stop indicator rules, and
- * the detent-fill geometry. This file is the substrate so a consumer mounting
- * `<Drawer mode="live-behind">` does not re-author the three detents from scratch.
- *
- * Token-first — every visual axis reads a custom property. Consumers retune
- * the sheet by overriding the rungs below, never by editing this file.
- */
-
-/* The snap-fraction scalar the house `useDrawerSnap` engine writes per frame. The
- * content root's inline `transform` reads it (DrawerContent.vue) — typed so the
- * default (1 = fully open) keeps a no-snap content-sized sheet seated open. */
-@property --glass-drawer-t {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 1;
-}
-
-/* BD.W-OVERLAY-STAGE-COUPLE — `--stage-t`, the ONE registered STAGING scalar (0 =
- * closed/un-staged → 1 = fully staged). The whole modal band rides this ONE knob:
- * the drawer's surface FREEZE (A), the scrim DEEPEN (B), the page RECEDE+SCALE (C),
- * the opt-in blur ENGAGE (D) are all pure `calc()` reads OF it. `inherits: true` so
- * a single writer at `:root` reaches the portaled scrim AND the page-wrapper sibling
- * AND the sheet descendants from ONE write (the scrim is NOT a descendant of the
- * content, so a content-local mirror could never reach it — the `:root` write is the
- * cross-subtree path).
- *
- * THE SINGLE WRITER (fold C1·R2 — no dual scalar desync). `useDrawerSnap.writeScalar`
- * writes BOTH `--glass-drawer-t` (the sheet's per-element translate) AND `--stage-t`
- * (the scene scalar at `:root`) in the SAME call — atomically, never separately, so
- * the two can never desync on a drag-cancel / fling-overshoot / interrupted snap. A
- * plain modal (Dialog/Command) flips `--stage-t` 0→1 on `--spring-snappy` at open;
- * the close-write removes the inline value so the registered property reverts to its
- * `initial-value: 0` (the stale-latch fix). `initial-value: 0` so an un-staged page never
- * recedes. EVERY consumer `clamp(0, …, 1)`-bounds it (a `--ease-cartoon-punch` fling
- * can overshoot >1 — the page-scale / radius / scrim must not run past their
- * endpoints). */
-@property --stage-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-/* The stage-t transition + close-write reset (the registered-property stale-latch
- * fix, fold C3·R7).
- *
- * The drawer's single writer (useDrawerSnap) drives `--stage-t` per frame and
- * REMOVES the inline value on close → the registered property reverts to its
- * `initial-value: 0`. The centered modal (DialogContent) flips it 0→1 on open via the
- * `data-stage-flip` marker on `:root`; this rule owns the FLIP TRANSITION (a snappy
- * spring) so the dialog's `:root --stage-t` value glides 0→1 rather than snapping — a
- * CSS-owned transition, NOT an inline `transition` shorthand on `:root` (which would
- * clobber unrelated root transitions). On close the marker is dropped and the inline
- * value removed → the property reverts to 0 (no stale full-staged latch on re-open). */
-:root[data-stage-flip] {
-    transition: --stage-t var(--spring-snappy-duration, 0.4s) var(--spring-snappy, ease);
-}
-
-:root {
-    /* Detent grammar knobs — overridable per-consumer */
-    --drawer-handle-w: 2.25rem;
-    --drawer-handle-h: 0.3125rem; /* 5px — the iOS grip hit-target rhythm */
-    --drawer-handle-color: var(--muted-foreground);
-    --drawer-handle-opacity: 0.45;
-    --drawer-handle-opacity-active: 0.85;
-    --drawer-snap-rule-color: color-mix(in srgb, var(--border) 60%, transparent);
-}
-
-/*
- * The sheet surface. The glass tier + the snap-translate feel live in one
- * token-driven place. The fixed/inset/z-index layout stays here too.
- *
- * NOTE: the snap motion is the house `useDrawerSnap` `SpringProgress` writing
- * `--glass-drawer-t`, which the content root's inline `transform` reads (the §6
- * doctrine — ONE motion vocabulary, no `transition: transform` curve injected on
- * `[data-glass-drawer]`). `touch-action: none` on the handle keeps the drag gesture
- * from scrolling the page. We layer border-radius + glass surface on top of the
- * spring-driven translate.
- */
-.glass-drawer {
-    position: fixed;
-    inset-inline: 0;
-    bottom: 0;
-    z-index: var(--z-modal);
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    max-height: 97vh;
-    margin-top: 6rem;
-    /* The overlay-band glass surface — the heaviest rung (the Drawer is a
-       modal-band sheet, z-index: --z-modal). The oklab tint composite reads the
-       W55 bright bucket (a live-behind sheet over a bright page is the canonical
-       over-light case); the --glass-level knob flattens it to solid --card +
-       blur(0) with the rest of the band; the --glass-shadow-overlay ladder rung
-       carries the rim + the --shadow-2xl lift through the ladder. */
-    background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
-    -webkit-backdrop-filter: var(--glass-blur-overlay);
-
-    backdrop-filter: var(--glass-blur-overlay);
-    -webkit-backdrop-filter: var(--glass-blur-overlay);
-    border: 1px solid var(--glass-border-overlay);
-    border-bottom: 0;
-    border-start-start-radius: var(--radius-panel);
-    border-start-end-radius: var(--radius-panel);
-    box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
-}
-
-/*
- * BA.W-SURFACE-AXIS — the shared {glass·veil·opaque} surface decoration ON TOP of
- * the `.glass-drawer` recipe. `.glass-drawer` is UNLAYERED (this file), so the
- * `@layer components` `[data-surface]` seam in glass/surface-axis.css would LOSE
- * to it (an unlayered rule always beats a layered one — the AZ.W-DOCK-RAIL
- * cascade-win trap). The fix is the SAME-LAYER carve: these `.glass-drawer[data-
- * surface=…]` rules sit unlayered alongside `.glass-drawer` and win by specificity
- * (attr+class > class), composing the SAME veil/opaque deltas the shared seam
- * declares — NO `glass-drawer`-local recipe fork (they read the same `--veil-*` /
- * `--glass-level` machinery). The `glass` rung is the identity (no rule).
- */
-.glass-drawer[data-surface="veil"] {
-    --veil-bg: color-mix(
-        in oklab,
-        var(--glass-bg-quiet),
-        var(--glass-tint-source) var(--glass-tint-strength)
-    );
-    --veil-blur: var(--glass-blur-quiet);
-    background: var(--veil-bg);
-    -webkit-backdrop-filter: var(--veil-blur);
-
-    backdrop-filter: var(--veil-blur);
-    -webkit-backdrop-filter: var(--veil-blur);
-    border: none;
-    box-shadow: none;
-}
-
-.glass-drawer[data-surface="opaque"] {
-    /* The solid-card escape. The `.glass-drawer` background reads the `:root`-baked
-       `--glass-bg-overlay` token (which substitutes `--glass-level` at :root), so a
-       per-element `--glass-level: 0` cannot re-resolve it — the substitution-vs-
-       inheritance trap (mirrors surface-axis.css). Set the SOLID plate AT THE
-       ELEMENT; still flip the level/tint knobs for a nested glass descendant. */
-    --glass-level: 0;
-    --glass-tint-strength: 0%;
-    /* The SOLID --card plate via the house color-mix idiom (solid --card, expressed
-       as the cohesion-sanctioned mix the token ladder speaks — NOT the bare
-       `var(--card)` the cohesion D1 check forbids for the always-on drawer plate;
-       this is the EXPLICIT opt-out behind `surface="opaque"`, not the default). */
-    background: color-mix(in srgb, var(--card), transparent 0%);
-    -webkit-backdrop-filter: none;
-
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-}
-
-/*
- * Detented (snap-point) sheets fill the viewport height. The house engine positions
- * the sheet by translating it along its drag axis by `(1 - --glass-drawer-t) * 100%`
- * (DrawerContent.vue's inline transform) — so for a snap fraction to read as that
- * fraction OF THE VIEWPORT, the sheet's top must sit at the viewport top when fully
- * open (translate 0). A `height: auto` content sheet would instead translate
- * off-screen. The content root tags the multi-detent case via
- * `[data-glass-drawer-snap-points=true]`; we fill height there and let the content
- * scroll inside.
- */
-.glass-drawer[data-glass-drawer-snap-points="true"] {
-    height: 100%;
-    max-height: 100%;
-    margin-top: 0;
-}
-
-/*
- * BD.W-OVERLAY-STAGE-COUPLE — coupling (A): the surface FREEZE, composed AT THE
- * ELEMENT. A detented sheet is SEE-THROUGH at peek/half (the page bleeds) and
- * SOLIDIFIES toward a warm-tinted card at full (page does not bleed, blur → 0). This
- * is the iOS-27 bottom-sheet crown the live α-0.95-at-every-detent flattened.
- *
- * A TWO-SEGMENT lerp on the ONE `--stage-t` knob (the self-standing crown — the wave
- * owns BOTH endpoints so it does not block on BE.W-SHEET-TRANSLUCENT, fold C3·R1):
- *   • DESCENT  t ∈ [0, 0.85] — the transmissive crown sinks `--glass-bg-overlay` α
- *     toward the shipped see-through `--glass-bg-sheet` floor (`--glass-opacity-sheet:
- *     0.74`). At peek/half the page bleeds through.
- *   • SOLIDIFY t ∈ [0.85, 1] — `--sheet-freeze` lerps the descended plate toward a
- *     WARM-TINTED card-mix (NOT bare `--card` — the gray-at-full carve hole, fold
- *     C1·R4); `backdrop-filter` blur decays to 0 (a solid plate has no backdrop to
- *     bend — a Safari win, no wasted sample behind an opaque plate).
- *
- * Composed AT THE ELEMENT (the `[data-surface=opaque]` substitution-safe path) via
- * element-level `color-mix` — NEVER an ancestor `filter` (which would clobber the
- * sheet's own backdrop-filter, the dock-hub goo-tear lesson, §7). `--stage-t` reads
- * the `:root` scalar the single writer drives (mirrored from `--glass-drawer-t`).
- */
-.glass-drawer[data-glass-drawer-snap-points="true"] {
-    /* the DESCENT fraction — 0 at closed → 1 at the commit floor (t=0.85). */
-    --sheet-descent: clamp(0, calc(var(--stage-t) / 0.85), 1);
-    /* the SOLIDIFY fraction — 0 below the commit floor → 1 at full (t=1). */
-    --sheet-freeze: clamp(0, calc((var(--stage-t) - 0.85) / 0.15), 1);
-    /* the transmissive crown plate: the warm overlay fill sunk toward the shipped
-       see-through `--glass-bg-sheet` floor across the descent. */
-    --sheet-crown: color-mix(
-        in oklab,
-        color-mix(
-            in oklab,
-            var(--glass-bg-overlay),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        ),
-        var(--glass-bg-sheet) calc(var(--sheet-descent) * 100%)
-    );
-    /* the warm-tinted SOLID escape (fold C1·R4 — a warm card-mix toward the EXPLICIT
-       warm `--glass-capsule-warm` amber, NEVER bare `--card` and NEVER the
-       `--glass-tint-source` alias which resolves back to `--card` and would be a
-       no-op warm; build-trap-(d) safe — a warm oklch color, never bare `transparent`).
-       At the shared 16% warm floor a dark full sheet stays C ≥ 0.02 warm — no
-       charcoal holiday at full. */
-    --sheet-solid: color-mix(
-        in oklab,
-        var(--card),
-        var(--glass-capsule-warm) var(--glass-capsule-warm-floor, 16%)
-    );
-    background: color-mix(
-        in oklab,
-        var(--sheet-crown),
-        var(--sheet-solid) calc(var(--sheet-freeze) * 100%)
-    );
-    backdrop-filter: blur(
-            calc(var(--glass-blur-overlay-radius, 20px) * (1 - var(--sheet-freeze)))
-        )
-        saturate(1.6);
-    -webkit-backdrop-filter: blur(
-            calc(var(--glass-blur-overlay-radius, 20px) * (1 - var(--sheet-freeze)))
-        )
-        saturate(1.6);
-}
-
-/* The `surface=opaque` explicit escape still wins (it sets the solid plate
-   unconditionally regardless of detent) — the freeze is the DEFAULT glass crown; the
-   opt-out plate is the consumer's hard override. Source order keeps the opaque rule
-   (declared above) — re-assert it here so it beats the snap-points freeze at equal
-   specificity for a detented opaque sheet. */
-.glass-drawer[data-glass-drawer-snap-points="true"][data-surface="opaque"] {
-    background: color-mix(in srgb, var(--card), transparent 0%);
-    -webkit-backdrop-filter: none;
-
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-}
-
-/* Direction variants — the content root tags itself with the drag axis
-   (`data-glass-drawer-direction`). Bottom is the default; the others ride the same
-   surface so a top/side sheet inherits the grammar. The side-lens (left/right) is
-   the BB-2 full-slide axis — it pins to its edge + fills the cross axis. */
-.glass-drawer[data-glass-drawer-direction="top"] {
-    bottom: auto;
-    top: 0;
-    margin-top: 0;
-    margin-bottom: 6rem;
-    border-top: 0;
-    border-bottom: 1px solid var(--glass-border-overlay);
-    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
-}
-
-.glass-drawer[data-glass-drawer-direction="left"],
-.glass-drawer[data-glass-drawer-direction="right"] {
-    inset-inline: auto;
-    inset-block: 0;
-    height: 100%;
-    max-height: 100%;
-    width: min(24rem, 92vw);
-    margin: 0;
-    border: 1px solid var(--glass-border-overlay);
-}
-
-.glass-drawer[data-glass-drawer-direction="left"] {
-    left: 0;
-    border-left: 0;
-    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
-}
-
-.glass-drawer[data-glass-drawer-direction="right"] {
-    right: 0;
-    border-right: 0;
-    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
-}
-
-/*
- * Peek handle — the rounded grip at the top of the sheet. It is the visual
- * affordance the user drags to cycle peek → half → full. The house snap engine
- * (`useDrawerSnap`) binds the pointer-drag gesture directly on this handle (the
- * `[data-glass-drawer-handle]` element) and flags it `[data-dragging]` while a drag
- * is in flight, so the grip intensifies "live" during the gesture.
- */
-.glass-drawer-handle {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-block: 0.75rem 0.5rem;
-    touch-action: none;
-}
-
-.glass-drawer-grip {
-    display: block;
-    width: var(--drawer-handle-w);
-    height: var(--drawer-handle-h);
-    border-radius: var(--radius-pill);
-    background-color: var(--drawer-handle-color);
-    opacity: var(--drawer-handle-opacity);
-    transition: opacity var(--duration-fast) var(--ease-out),
-        width var(--duration-fast) var(--ease-out);
-}
-
-/* While the sheet is being dragged the house engine flags the handle
-   `[data-dragging]`; intensify the grip so the affordance reads as "live".
-   `:active` covers the pointer-held case + `[data-dragging]` covers the captured
-   drag; the hover lift is the rest affordance. */
-.glass-drawer-handle[data-dragging] .glass-drawer-grip,
-.glass-drawer-handle:active .glass-drawer-grip,
-.glass-drawer:hover .glass-drawer-grip {
-    opacity: var(--drawer-handle-opacity-active);
-    width: calc(var(--drawer-handle-w) * 1.15);
-}
-
-/*
- * Snap-stop indicators — subtle full-width hairline rules that mark where the
- * sheet content sections break across detents. A consumer opts in by adding
- * `.glass-drawer-snap-rule` to a separator element inside the sheet; it reads as
- * the detent boundary line without competing with the content. This is the
- * "snap-stop visual indicator" the spec asks for, expressed as an opt-in class
- * (the detents themselves are positional, owned by the house snap engine; the
- * RULE is the look).
- */
-.glass-drawer-snap-rule {
-    height: 1px;
-    margin-inline: calc(var(--radius-panel) * -0.5);
-    border: 0;
-    background-color: var(--drawer-snap-rule-color);
-}
-
-/*
- * BD.W-OVERLAY-STAGE-COUPLE — coupling (B): the scrim DEEPEN. The scrim α tracks
- * `--stage-t` so a peek drawer barely dims and a full drawer commits hard (the live
- * fixed-α-0.8 at every detent is the born-RED). Reuses the SHIPPED warm
- * `--overlay-scrim-ink` (the F7 warm near-black, never flat black), now t-coupled.
- * `clamp(0,…,1)` bounds the fling overshoot. The scrim element gains
- * `[data-stage-scrim]` (DrawerOverlay.vue) and reads the inherited `:root` scalar.
- */
-[data-stage-scrim] {
-    background: color-mix(
-        in srgb,
-        var(--overlay-scrim-ink)
-            calc((0.28 + clamp(0, var(--stage-t), 1) * 0.44) * 100%),
-        transparent
-    );
-}
-
-/*
- * BD.W-OVERLAY-STAGE-COUPLE — coupling (C): the page RECEDE + SCALE. The page wrapper
- * scales `1 → 0.95` + corner-radius blooms as `--stage-t → 1` (the iOS "card recedes"
- * depth cue), retiring the dead `shouldScaleBackground` boolean. `scale` +
- * `border-radius` ONLY — NO `filter` (the ancestor-filter trap: `filter` on the app
- * root establishes a containing block for `position:fixed` and force-rasterizes the
- * page subtree every frame — fold C2·R1; §7). The wrapper is the consumer's app-root
- * marker (`demo/App.vue` mounts `[data-stage-wrapper]`); when the honest
- * `stage="none|dim"` enum is set the marker carries no `--stage-t` drive (or the
- * `data-stage-scale` gate is absent) so (C) is a real no-op, never a lie. Under PRM
- * `stage="scale"` degrades to `dim` at the SFC (no `data-stage-scale` attr) so the
- * page never transforms (fold C1·R6) — this rule only fires when the scale gate is on.
- */
-[data-stage-wrapper][data-stage-scale] {
-    scale: calc(1 - 0.05 * clamp(0, var(--stage-t), 1));
-    border-radius: calc(var(--radius-panel) * clamp(0, var(--stage-t), 1));
-    transform-origin: 50% 0; /* recede toward the top, iOS */
-    overflow: clip;
-}
-
-/*
- * BD.W-OVERLAY-STAGE-COUPLE — coupling (D): the blur ENGAGE (opt-in `immersive`, the
- * Command spotlight). The scrim's `backdrop-filter` radius ramps `0 → deep` on
- * `--stage-t`. ONE-SHOT over the open window (gated to the modal-flip 0→1 via
- * `[data-stage-immersive]`, NEVER the drawer's per-frame scalar — the §L7 Safari
- * fence: a per-frame full-viewport re-blur is the cardinal sin, fold C2·R). WebKit
- * pays the sample once as the flip lands. Default OFF.
- */
-[data-stage-scrim][data-stage-immersive] {
-    backdrop-filter: blur(calc(clamp(0, var(--stage-t), 1) * 16px));
-    -webkit-backdrop-filter: blur(calc(clamp(0, var(--stage-t), 1) * 16px));
-}
-
-/* Reduced-motion — the house `SpringProgress` snaps the detent deterministically
-   under `prefers-reduced-motion: reduce` (its `respectReducedMotion` jumps the
-   `--glass-drawer-t` scalar to target in one frame, zero motion frames); here we
-   only suppress the grip's affordance animation so the handle does not pulse for
-   PRM users. */
-@media (prefers-reduced-motion: reduce) {
-    .glass-drawer-grip {
-        transition: none;
-    }
-}
+@property --glass-drawer-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --stage-t { syntax: "<number>"; inherits: false; initial-value: 0; } [data-stage-scrim][data-stage-flip], [data-stage-wrapper][data-stage-flip] { transition: --stage-t var(--spring-snappy-duration, 0.4s) var(--spring-snappy, ease); } :root { --drawer-handle-w: 2.25rem; --drawer-handle-h: 0.3125rem; --drawer-handle-color: var(--muted-foreground); --drawer-handle-opacity: 0.45; --drawer-handle-opacity-active: 0.85; --drawer-snap-rule-color: color-mix(in srgb, var(--border) 60%, transparent); } .glass-drawer { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-modal); display: flex; flex-direction: column; height: auto; max-height: 97vh; margin-top: 6rem; background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength)); -webkit-backdrop-filter: var(--glass-blur-overlay); backdrop-filter: var(--glass-blur-overlay); -webkit-backdrop-filter: var(--glass-blur-overlay); border: 1px solid var(--glass-border-overlay); border-bottom: 0; border-start-start-radius: var(--radius-panel); border-start-end-radius: var(--radius-panel); box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay); } .glass-drawer[data-surface="veil"] { --veil-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-blur: var(--glass-blur-quiet); background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-blur); backdrop-filter: var(--veil-blur); -webkit-backdrop-filter: var(--veil-blur); border: none; box-shadow: none; } .glass-drawer[data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-drawer[data-glass-drawer-snap-points="true"] { height: 100%; max-height: 100%; margin-top: 0; } .glass-drawer[data-glass-drawer-snap-points="true"] { --sheet-descent: clamp(0, calc(var(--stage-t) / 0.85), 1); --sheet-freeze: clamp(0, calc((var(--stage-t) - 0.85) / 0.15), 1); --sheet-crown: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength) ), var(--glass-bg-sheet) calc(var(--sheet-descent) * 100%) ); --sheet-solid: color-mix( in oklab, var(--card), var(--glass-capsule-warm) var(--glass-capsule-warm-floor, 16%) ); background: color-mix( in oklab, var(--sheet-crown), var(--sheet-solid) calc(var(--sheet-freeze) * 100%) ); --glass-blur-engage-t: calc( clamp(0, calc(var(--glass-drawer-t) / var(--glass-blur-engage-knee, 0.35)), 1) * (1 - var(--sheet-freeze)) ); -webkit-backdrop-filter: blur( calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t)) ) saturate(1.6); backdrop-filter: blur( calc(var(--glass-blur-overlay-radius, 20px) * var(--glass-blur-engage-t)) ) saturate(1.6); } .glass-drawer[data-glass-drawer-snap-points="true"][data-surface="opaque"] { background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-drawer[data-glass-drawer-direction="top"] { bottom: auto; top: 0; margin-top: 0; margin-bottom: 6rem; border-top: 0; border-bottom: 1px solid var(--glass-border-overlay); border-radius: 0 0 var(--radius-panel) var(--radius-panel); } .glass-drawer[data-glass-drawer-direction="left"], .glass-drawer[data-glass-drawer-direction="right"] { inset-inline: auto; inset-block: 0; height: 100%; max-height: 100%; width: min(24rem, 92vw); margin: 0; border: 1px solid var(--glass-border-overlay); } .glass-drawer[data-glass-drawer-direction="left"] { left: 0; border-left: 0; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; } .glass-drawer[data-glass-drawer-direction="right"] { right: 0; border-right: 0; border-radius: var(--radius-panel) 0 0 var(--radius-panel); } .glass-drawer-handle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-block: 0.75rem 0.5rem; touch-action: none; } .glass-drawer-grip { display: block; width: var(--drawer-handle-w); height: var(--drawer-handle-h); border-radius: var(--radius-pill); background-color: var(--drawer-handle-color); opacity: var(--drawer-handle-opacity); transition: opacity var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out); } .glass-drawer-handle[data-dragging] .glass-drawer-grip, .glass-drawer-handle:active .glass-drawer-grip, .glass-drawer:hover .glass-drawer-grip { opacity: var(--drawer-handle-opacity-active); width: calc(var(--drawer-handle-w) * 1.15); } .glass-drawer-snap-rule { height: 1px; margin-inline: calc(var(--radius-panel) * -0.5); border: 0; background-color: var(--drawer-snap-rule-color); } [data-stage-scrim] { background: color-mix( in srgb, var(--overlay-scrim-ink) calc((0.28 + clamp(0, var(--stage-t), 1) * 0.44) * 100%), transparent ); } [data-stage-wrapper][data-stage-scale] { scale: calc(1 - 0.05 * clamp(0, var(--stage-t), 1)); border-radius: calc(var(--radius-panel) * clamp(0, var(--stage-t), 1)); transform-origin: 50% 0; overflow: clip; } [data-stage-scrim][data-stage-immersive] { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media (prefers-reduced-motion: reduce) { .glass-drawer-grip { transition: none; } }

package/dist/styles/feedback-tone.css

@@ -1,104 +1 @@
-/* feedback-tone.css — the ONE shared tinted-glass tone recipe (BA.W-FEEDBACK-TONE).
-
-   THE COLLAPSE: Toast, Notification, and Alert each carried an INDEPENDENT tone map
-   (the Toast variant map painted SOLID `bg-{success,warning,info,destructive}` opaque
-   token plates over a `glass-floating` base; the Notification type map painted
-   `bg-<tone>/90` near-opaque slabs; Alert alone was correct in SHAPE — glass-wash plate
-   + tone-on-rim — but HARDCODED its `border-<tone>/40` rim per variant). Three tone
-   maps, three calibration sites, and TWO of them painted a colored SLAB that occluded
-   the backdrop (the R8-12/R8-13 "not glassy at all" defect; the blur track survived but
-   was inert behind a 100%-opaque plate).
-
-   This file mints the tone register ONCE. Every feedback tone reads as COLORED GLASS:
-   a tinted-glass wash (the rung bg mixed a BOUNDED % toward the tone, the SAME
-   `color-mix(in oklab, <rung bg>, <tint> <strength>)` seam the W55 `--glass-tint-*`
-   legibility lift and the `--veil-bg` plate already run — ZERO new compositing path) +
-   a tone-keyed rim + a full-chroma glyph. The backdrop STILL shows through (α stays
-   translucent, the W2 π floor < ~0.92). The body ink stays `--foreground` /
-   `--card-foreground` for legibility (the Alert discipline — body never tone-tinted),
-   so the tone is ONE deliberate color event per surface (the AZ.W-SUFFUSE one-color-
-   event idiom), never a full-bleed fill.
-
-   THE ONE KNOB: `--feedback-tone-strength` tints all four tones at once (the bounded
-   mix %, the toast-glass §A band). The four tone hues map to the HOUSE tokens
-   `--success` / `--warning` / `--info` / `--destructive` (presets-in-consumers — NO new
-   colors). A consumer recalibrates the tone weight with ONE override.
-
-   THE RUNG: the register reads `--feedback-tone-rung` (default the floating-chrome rung
-   `--glass-bg-floating`, the Toast/Notification overlay register). Alert RE-POINTS it to
-   `--glass-bg-wash` on its own surface (a content panel rides wash, not floating — the
-   register difference is correct; only the tone SOURCE unifies, not the rung). The rung
-   reads `--glass-bg-*` DIRECTLY (the same tokens W-SURFACE-AXIS's glass arm routes), so
-   the tone tint rides ON the glass surface — a re-point, not a fork.
-
-   THE SUBSTITUTION TRAP (the recurring AX.W55 / dock-scale class): `--feedback-tone-rung`
-   resolves the `--glass-bg-floating` token, which BAKES `var(--glass-level)` at its
-   `:root` declaration (level=1). A descendant `--glass-level: 0` does NOT re-resolve the
-   baked rung — but that is the CORRECT register here: a feedback surface IS translucent
-   glass by design; the `opaque`/level-0 escape is W-SURFACE-AXIS's `[data-surface]`
-   concern, not a tone-register knob. The tone register composes the tint AT THE ELEMENT
-   off the resolved rung, so the `color-mix` re-resolves whenever `--tone`/`--feedback-
-   tone-strength`/the rung change (the W55 element-level tint discipline). */
-@layer components {
-    :root {
-        /* The bounded mix % — the tone wash strength. 18% reads as colored GLASS
-           (the backdrop shows through, the silhouette is unmistakably tinted) without
-           tipping toward a slab; the toast-glass §A band is ≈12–22%. ONE knob retunes
-           all four tones. */
-        --feedback-tone-strength: 18%;
-        /* The rung the tint mixes over — the floating-chrome register (Toast /
-           Notification). Alert re-points it to the wash rung on its own surface. */
-        --feedback-tone-rung: var(--glass-bg-floating);
-        /* The rim weight — a tone-keyed border, a thin tinted rim (not a loud edge). */
-        --feedback-tone-border-strength: 40%;
-    }
-
-    /* ── The parametric register ──────────────────────────────────────────────────
-       A surface declares `--tone` (one of the four house tokens) + composes
-       `.feedback-tone`; the tinted-glass wash + the tone-keyed rim resolve off the ONE
-       recipe. The glyph carries the FULL-chroma tone (`[&>svg]` via the consumer's own
-       class, or the `.feedback-tone-glyph` helper below). The `default` (un-toned)
-       surface simply omits `.feedback-tone` — the bare glass rung paints.
-
-       `--tone` has NO `:root` default ON PURPOSE: a `.feedback-tone` surface with no
-       `--tone` set would mix the rung toward `initial` (transparent) — a no-op wash, the
-       same as the bare rung; this is the safe degenerate, not a paint bug. Every real
-       consumer sets `--tone` via its `.feedback-tone-<name>` register. */
-    .feedback-tone {
-        background: color-mix(
-            in oklab,
-            var(--feedback-tone-rung),
-            var(--tone) var(--feedback-tone-strength)
-        );
-        border-color: color-mix(
-            in oklab,
-            transparent,
-            var(--tone) var(--feedback-tone-border-strength)
-        );
-    }
-
-    /* The four house tone registers — each binds `--tone` to its house token. A surface
-       maps its variant/type onto the matching class (Toast `variant` /
-       Notification `type` / Alert `variant`); the `error` notification type maps to the
-       destructive tone (the three-maps-into-one collapse — `error` IS destructive). */
-    .feedback-tone-success {
-        --tone: var(--success);
-    }
-    .feedback-tone-warning {
-        --tone: var(--warning);
-    }
-    .feedback-tone-info {
-        --tone: var(--info);
-    }
-    .feedback-tone-destructive {
-        --tone: var(--destructive);
-    }
-
-    /* The glyph helper — the leading status glyph carries the FULL-chroma tone (the one
-       color event's saturated note over the tinted wash). A consumer composes it on its
-       icon, or reads `var(--tone)` directly in an arbitrary `[&>svg]:text-(--tone)`
-       utility. */
-    .feedback-tone-glyph {
-        color: var(--tone);
-    }
-}
+@layer components { :root { --feedback-tone-strength: 18%; --feedback-tone-rung: var(--glass-bg-floating); --feedback-tone-border-strength: 40%; } .feedback-tone { background: color-mix( in oklab, var(--feedback-tone-rung), var(--tone) var(--feedback-tone-strength) ); border-color: color-mix( in oklab, transparent, var(--tone) var(--feedback-tone-border-strength) ); } .feedback-tone-success { --tone: var(--success); } .feedback-tone-warning { --tone: var(--warning); } .feedback-tone-info { --tone: var(--info); } .feedback-tone-destructive { --tone: var(--destructive); } .feedback-tone-glyph { color: var(--tone); } }