@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock.css

@@ -1,158 +1 @@
-/* Dock primitives exported through @mkbabb/glass-ui/styles.
- *
- * This file is the CORE of the dock component family — the `@property
- * --dock-morph-t` registration, the @layer-components OPEN, the SHARED
- * cross-control four-state contract (the :focus-visible / :disabled comma-groups
- * + the motion-token :where() group — they reference every control selector but
- * are shared, so they live at the import root, not per-control), and the
- * `@import`s of the cohesive `dock/*.css` partials.
- *
- * AX.W06 — the 1762-line dock.css god-module (slice 25) was CARVED into
- * src/styles/dock/ cohesive single-axis partials, each under the 500-line bound,
- * @import-ed below in cascade order into the SAME `@layer components` so the
- * carve is isomorphic (same layer, same source order → ZERO visual delta):
- *   - dock/shell.css       — the `.glass-dock` structural skeleton (root, W02
- *                            morph-clip aperture, grain, vertical-root, shape /
- *                            variant plates, position, W45 #persistent + vertical
- *                            three-region body).
- *   - dock/morph.css       — the W01 single-scalar morph chrome + state response
- *                            (--dock-expand-t interp, collapsed/summary, held /
- *                            open, the W55 adaptive-legibility bucket).
- *   - dock/density.css     — the W45 density × --dock-scale cascade.
- *   - dock/layers.css      — the `.dock-layer` crossfade + hit-test + reveal-
- *                            stagger contract + the `layout="grid"` tile grid.
- *   - dock/layer-group.css — `.dock-layer-group` / layer-switcher rail / stack.
- *   - dock/overflow.css    — the `overflow=` scroll/wrap strategies + the coarse
- *                            multiplier.
- *
- * The FIVE interactive control families stay in dock-controls.css (the AU.W8b.3
- * carve, @import-ed by index.css directly after this file). The Vue SFCs own
- * structure + runtime behavior; selectors, motion, glass, and layering tokens
- * live here + in the partials so consumers have one public CSS path. */
-
-/* CSS `@import` rules must precede every other rule (a `@property`/`@layer`
-   block after an `@import` would render it invalid + dropped). The six partials
-   @import in cascade order; each opens its own `@layer components` so the layered
-   cascade is preserved bit-for-bit (the carve-isomorphism gate is the witness). */
-@import "./dock/shell.css";
-@import "./dock/morph.css";
-@import "./dock/density.css";
-@import "./dock/shape.css";
-@import "./dock/layers.css";
-@import "./dock/layer-group.css";
-@import "./dock/overflow.css";
-@import "./dock/stack-rail.css";
-@import "./dock/section.css";
-@import "./dock/morph-bridge.css";
-/* BC.W-AX-DOCK-CTA-SEAT — the [data-cta-pending] CTA-receive landing seat (the static
-   resting-geometry reserve + the plain transition:opacity FLIP reveal). Last in the
-   dock cascade — a net-new surface around the byte-untouched useDockCtaReceive morph. */
-@import "./dock/cta-seat.css";
-/* BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar field surface (the W55
-   active-field tint legibility seam + the `.glass-menu-row` result rows). A net-new
-   surface on a `[data-search]` dock around the byte-untouched morph-bridge metaball;
-   CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
-@import "./dock/search.css";
-
-/* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
-   to the `.glass-dock` root; EVERY morph axis (box size, padding, radius, scale,
-   background/border color, child stagger) is a pure `calc()` read off it — one
-   driver, one clock, on every engine (the View-Transitions collapse fork is
-   retired). `@property`-registered `<number>` so it interpolates COMPOSITED, not
-   discretely (an UNregistered custom property jumps + animates on the main
-   thread). `initial-value:0` = the collapsed-progress floor.
-
-   `inherits:true` (NOT false) — the SOTA inheritance-bomb guard is specifically
-   "never write the scalar to `:root`" (a whole-document subtree recalc per frame
-   over 1300+ elements). The scalar is written LOCALLY on the small `.glass-dock`
-   subtree, and its CONSUMERS are DESCENDANTS (`.dock-layers`/`.dock-layer-stack`
-   size + the active pane's child stagger) that read it via inheritance, so it MUST
-   inherit. Writing one inheriting var over a ~10–20-element dock subtree is the
-   exact pattern the prior `--dock-morph-progress` used (on `.dock-layers`); the
-   bomb only fires from a `:root` write, which never happens here. The root-chrome
-   reads (padding/bg/border) sit on the same element it is written to. */
-@property --dock-morph-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-/* BB.W-DOCK-MORPH-FAMILY (e) — the `@property`-registered dock-scale axis. The
-   dock-scale cascade is `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,
-   1))` (tokens/sizing.css). UNregistered, that `calc()` substitutes ONCE at `:root`
-   against the `:root` identity `--dock-local-scale: 1`, so a consumer-scope
-   `--dock-local-scale` override is INHERITED but never RE-EVALUATED — the dock keeps
-   `--dock-scale: calc(1 * 1)` and stays at the unscaled base (the 3rd recurrence of
-   the AX.W55 substitution-vs-inheritance trap; the documented-but-broken `:root`
-   preset). Registering `--dock-local-scale` as an INHERITING `@property <number>`
-   makes a registered inheriting custom property re-substitute PER-ELEMENT, so a
-   `--dock-local-scale` override on ANY dock scope re-evaluates the `calc()` at that
-   scope and threads the whole geometry cascade (box·pad·gap·tab·tile·glyph) down in
-   lockstep — the `:root` preset made real (the `@property --dock-morph-t` house
-   idiom above is the precedent). `--dock-scale` itself is ALSO registered (the
-   derived axis) so its `calc()` re-resolves per-element when `--dock-local-scale`
-   shifts. ADDITIVE ONLY: `initial-value: 1` is the identity, so at the default
-   `--dock-local-scale: 1` the resolved `--dock-scale` is byte-IDENTICAL to HEAD (no
-   rung re-tune); the `@media (pointer: coarse)` re-declare (overflow.css) STAYS the
-   `:root`-equivalent re-resolve, and this registration is the complementary
-   non-`:root`-scope thread. DOCK_SPRING is untouched (this is a token registration,
-   not a clock). */
-@property --dock-local-scale {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-
-@property --dock-scale {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-
-@layer components {
-    :where(
-        .glass-dock,
-        .dock-layer-stack,
-        .dock-layer-item-host,
-        .dock-layer-tab,
-        .dock-icon-button,
-        .dark-mode-toggle-button,
-        .dock-tab-button,
-        .dock-select-trigger,
-        .dock-dropdown-trigger
-    ) {
-        --dock-motion-fast: var(--duration-fast) var(--ease-standard);
-        --dock-motion-standard: var(--duration-normal) var(--ease-standard);
-        /* AT.W6-dock-c — the FLIP-fallback timing. `--dock-resize-spring` (the
-           `--spring-dock` linear()) is the single source curve the native
-           View-Transition path ALSO consumes, so the morph is timing-identical
-           across engines. BA.W-GLASS-CAL Unit 3 — the duration leg re-times off
-           the generic `--duration-normal` (0.3s) onto `--spring-dock-duration`
-           (0.28s, the dock spring's OWN 2%-band envelope settle). */
-        --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);
-    }
-
-    /* Shared four-state contract — the focus-visible ring + disabled paint are
-       identical across every dock control, so they are expressed ONCE here as a
-       comma group over the control family rather than copied per rule-set. The
-       group keeps full class+pseudo specificity (NOT `:where()`, which would
-       zero the class and let a per-control :hover box-shadow override the focus
-       ring). Per-control transition extensions (the box-shadow fade on
-       focus-visible) stay with their own selectors in dock-controls.css where
-       they differ. */
-    .dock-icon-button:focus-visible,
-    .dock-tab-button:focus-visible,
-    .dock-select-trigger:focus-visible,
-    .dock-dropdown-trigger:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-    }
-
-    .dock-icon-button:disabled,
-    .dock-tab-button:disabled,
-    .dock-select-trigger:disabled,
-    .dock-dropdown-trigger:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-}
+@import "./dock/shell.css"; @import "./dock/shell-regions.css"; @import "./dock/dock.css"; @import "./dock/morph.css"; @import "./dock/adaptive-legibility.css"; @import "./dock/density.css"; @import "./dock/shape.css"; @import "./dock/layers.css"; @import "./dock/layer-group.css"; @import "./dock/crossfade.css"; @import "./dock/overflow.css"; @import "./dock/fisheye.css"; @import "./dock/popover.css"; @import "./dock/section.css"; @import "./dock/cta-seat.css"; @import "./dock/search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --dock-local-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --dock-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @layer components { :where( .glass-dock, .dock-layer-stack, .dock-layer-item-host, .dock-layer-tab, .dock-icon-button, .dark-mode-toggle-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --dock-motion-fast: var(--duration-fast) var(--ease-standard); --dock-motion-standard: var(--duration-normal) var(--ease-standard); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .glass-dock [data-ring-yield]:focus-visible { box-shadow: none; } .dock-icon-button:disabled, .dock-tab-button:disabled, .dock-select-trigger:disabled, .dock-dropdown-trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; } }

package/dist/styles/draw-in.css

@@ -0,0 +1 @@
+:root { --draw-in-duration: calc(0.52s * var(--motion-tempo)); } @keyframes draw-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes draw-rule-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .draw-rule, [data-draw-in] { transform-origin: var(--draw-in-origin, left); transform: scaleX(1); } @media (prefers-reduced-motion: no-preference) { .draw-rule:not(.draw-rule--wipe), [data-draw-in]:not([data-draw-in="wipe"]) { transform: scaleX(0); animation: draw-rule-in var(--draw-in-duration) var(--ease-out-expo) var(--draw-in-delay, 0s) both; } .draw-rule--wipe, [data-draw-in="wipe"] { transform: none; clip-path: inset(0 100% 0 0); animation: draw-rule-wipe var(--draw-in-duration) var(--ease-out-expo) var(--draw-in-delay, 0s) both; } }

package/dist/styles/drawer.css

@@ -1,240 +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;
-}
-
-: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;
-}
-
-/* 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);
-}
-
-/* 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); } }