@mkbabb/glass-ui 3.13.0 → 4.0.1

package/dist/styles/dock-controls/tab-button.css

@@ -2,10 +2,10 @@
    (AZ.W-CARVE partial 3 of 5; carved out of dock-controls.css).
 
    The base rule (density-keyed height knob, padding, glass hover/active/press
-   cohort), the PRIMARY tier (the dock extension over `@utility btn-audacious` —
-   structural shell + the `--phase-color` disco-grain hover radial + the
-   `[data-phase]` backplate halo), and the SECONDARY tier (the quieter
-   edge-light/edge-shadow cross-control comma-group over tab + icon button).
+   cohort), the PRIMARY tier (the structural shell — taller min-height + wider
+   padding + a stronger base tint; the disco grain/halo RETIRED at BA.W-GLASS-CAL,
+   it now inherits the base glass hover register), and the SECONDARY tier (the
+   quieter edge-light/edge-shadow cross-control comma-group over tab + icon button).
    Opens its OWN `@layer components`; @import-ed after dark-mode-toggle.css. */
 
 @layer components {
@@ -29,6 +29,14 @@
         padding-block: var(--dock-tab-padding-block, 0.375rem);
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The tab's
+           OWN padding already insets a content box within the row-locked border box;
+           `background-clip: content-box` realizes that as a PAINTED-plate inset, so
+           the hover (×1.1) / active pill clears the cross-axis clip edge with margin
+           — the same plate-inset-within-cell principle the icon-button consumes via
+           `--dock-control-safe-inset`. The text + min-height keep the box at the row;
+           only the painted fill insets (no box growth, no glyph reflow). */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Default font-size carries through to text-only tab content; consumers
            wrapping content in an explicit type utility (e.g. `text-hero`,
@@ -86,91 +94,24 @@
 
     /* Tier — primary ────────────────────────────────────────────
      *
-     * Per W2.7 §9, §12, §13, §17. The primary tier composes three at-rest
-     * marks (top-highlight, bottom under-shadow, baseline glass) with three
-     * disco accents on hover (specular swap, sparkle sweep, disco-grain).
-     *
-     * Reservation: disco fires on hover only. At rest the button reads as
-     * a Vignelli-restrained composed glass surface. The `--phase-color`
-     * cascade (provided by `<InstrumentChassis>` via `data-phase`) tints
-     * the disco-grain radial only on hover; idle is neutral.
-     *
-     * K.W6 Lane B — the canonical disco-grain + sparkle-sweep + specular
-     * recipe lifted to `@utility btn-audacious` (utilities.css). The Vue
-     * <DockTabButton> attaches `btn-audacious` automatically when the
-     * consumer passes `data-tier="primary"`. The dock-local rules below
-     * are STRICTLY the dock extension: structural shell (padding, base
-     * surface tint, min-height) + phase-tint extensions (hover radial
-     * uses `--phase-color`, plus the `[data-phase]` `::before` halo).
+     * BA.W-GLASS-CAL (H2a) — the disco COLLAPSED. The primary tier was a SECOND
+     * disco surface: it composed `@utility btn-audacious` (auto-attached by
+     * <DockTabButton> on `data-tier="primary"`) PLUS a dock-local phase-grain
+     * (the `--glass-grain-opacity-disco` + `--paper-clean-texture`/`--phase-color`
+     * radial hover) PLUS a `[data-phase]` `::before` rest-halo. With the disco
+     * retired, the primary tier keeps ONLY its STRUCTURAL shell (taller min-height,
+     * wider padding, the slightly-stronger base tint that distinguishes it from the
+     * secondary tier) and inherits the plain de-red'd dock-control glass hover
+     * register from the base `.dock-tab-button` rule above (bg → `--dock-control-
+     * hover-bg`, scale → `--scale-hover-dock`, the specular gleam — the SAME register
+     * `.dock-icon-button` speaks). No grain, no phase-radial, no rest-halo. The
+     * <DockTabButton> auto-attach of `btn-audacious` is removed (the utility is gone).
      */
     .dock-tab-button[data-tier="primary"] {
         --dock-tab-min-height: 4rem;
         padding-inline: 1.5rem;
         background: color-mix(in srgb, var(--card) 60%, transparent);
         color: var(--foreground);
-
-        /* Phase-tint hover override — same disco-grain composition as
-         * `btn-audacious`, but the radial uses `--phase-color` (instrument-
-         * cluster axis) instead of the canonical `--primary`. The `--paper-
-         * clean-texture` overlay and `--glass-specular` shadow stack are
-         * inherited from the underlying `btn-audacious` utility. */
-        /* AX.W52 D19 — the phase-tint hover radial DEMOTED: the prior
-         * `ellipse at 30% 30%` at 18% was a loud top-LEFT corner hotspot. Toned to
-         * 8% and the anchor shifted off the hard corner toward a softer top-biased
-         * ellipse (`40% 25%`) with a tighter `transparent 55%` falloff, so it reads
-         * as a surface lift rather than a corner glow — the disco hover identity
-         * survives, the egregious corner bloom does not. */
-        &:hover:not(:disabled) {
-            --glass-grain-opacity: var(--glass-grain-opacity-disco, 0.08);
-            background-image:
-                var(--paper-clean-texture),
-                radial-gradient(
-                    ellipse at 40% 25%,
-                    color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    ),
-                    transparent 55%
-                );
-            background-blend-mode: overlay, normal;
-            background-size: var(--paper-texture-size), auto;
-        }
-
-        /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
-         *
-         * An inner glyph wrapper's own halo would be clipped by the pill's
-         * `overflow: hidden` and never escape the glyph box. This `::before`
-         * lifts the phase-tint to the pill itself so the glow composes with the
-         * whole CTA. Scoped to active phases — at idle / ready the pill stays
-         * neutral and inherits the W2.7 reservation ("disco fires on hover
-         * only"). */
-        /* AX.W52 D19 — the REST phase-halo `::before` (fires during a speedtest run
-         * on the most prominent dock control) DEMOTED on the same axis as the hover
-         * radial: 18%→8%, the hard `30% 30%` corner shifted to a softer `40% 25%`
-         * top-biased ellipse with a tighter `transparent 55%` falloff, and the
-         * `opacity: 1` dropped to 0.5 so the persistent run-time halo is a subtle
-         * surface lift, not a corner bloom that washes the pill for the whole run. */
-        &[data-phase]:not([data-phase="ready"]):not([data-phase="idle"])::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: radial-gradient(
-                ellipse at 40% 25%,
-                color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    )
-                    0%,
-                transparent 55%
-            );
-            pointer-events: none;
-            z-index: -1;
-            opacity: 0.5;
-            transition: opacity var(--duration-fast) var(--ease-standard);
-        }
     }
 
     /* Tier — secondary ──────────────────────────────────────────

package/dist/styles/dock-controls/triggers.css

@@ -26,6 +26,13 @@
         cursor: pointer;
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). As on the
+           tab button: the trigger's OWN padding insets a content box within the
+           row-locked border box, and `background-clip: content-box` realizes that
+           as a PAINTED-plate inset so the hover (×1.1) / open pill clears the
+           cross-axis clip edge — the same plate-inset-within-cell principle the
+           icon-button consumes via `--dock-control-safe-inset`. No box growth. */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
         color: color-mix(

package/dist/styles/dock.css

@@ -41,6 +41,7 @@
 @import "./dock/layer-group.css";
 @import "./dock/overflow.css";
 @import "./dock/rail-extend.css";
+@import "./dock/section.css";
 @import "./dock/morph-bridge.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
@@ -66,6 +67,38 @@
     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,
@@ -81,10 +114,12 @@
         --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-snappy` linear()) is the single source curve the native
+           `--spring-dock` linear()) is the single source curve the native
            View-Transition path ALSO consumes, so the morph is timing-identical
-           across engines. */
-        --dock-motion-resize: var(--duration-normal) var(--dock-resize-spring);
+           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

package/dist/styles/drawer.css

@@ -1,21 +1,35 @@
 /*
- * drawer.css — Detented bottom-sheet grammar (AN.W3).
+ * drawer.css — Detented bottom-sheet grammar (AN.W3; BB.W-DRAWER-ABROGATE).
  *
- * vaul-vue owns the snap math (the spring transform between snap-points, the
- * drag-resistance overshoot, the `data-vaul-*` state attributes). glass-ui owns
- * the LOOK: the glass sheet surface, the rounded peek handle, the snap-stop
- * indicator rules, and the drag-resistance feel-tuning. This file is the
- * substrate so a consumer mounting `<Drawer mode="live-behind">` does not
- * re-author the three detents from scratch.
+ * 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 — vaul's hit-target rhythm */
+    --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;
@@ -23,14 +37,15 @@
 }
 
 /*
- * The sheet surface. Replaces the prior inline-Tailwind triplet on
- * DrawerContent.vue so the glass tier + the snap transform feel live in one
+ * 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: vaul-vue sets `transition: transform .5s cubic-bezier(.32,.72,0,1)` and
- * `touch-action: none` on `[data-vaul-drawer]` from its injected stylesheet —
- * that IS the drag-resistance spring curve. We do NOT override `transition` so
- * the snap feel is preserved; we layer border-radius + glass surface on top.
+ * 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;
@@ -61,24 +76,72 @@
 }
 
 /*
- * Detented (snap-point) sheets fill the viewport height. vaul positions the
- * sheet by translating it DOWN by `innerHeight - (fraction * innerHeight)` —
- * 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 (offset 0). A `height: auto`
- * content sheet would instead translate off-screen. vaul tags the snap case via
- * `[data-vaul-snap-points=true]`; we fill height there and let the content
+ * 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-vaul-snap-points="true"] {
+.glass-drawer[data-glass-drawer-snap-points="true"] {
     height: 100%;
     max-height: 100%;
     margin-top: 0;
 }
 
-/* Live-behind direction variants — vaul tags the root with the drag axis.
-   Bottom is the default + the F-side pattern; the others ride the same surface
-   so a top/side live-behind sheet inherits the grammar. */
-.glass-drawer[data-vaul-drawer-direction="top"] {
+/* 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;
@@ -88,11 +151,35 @@
     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. vaul-vue intensifies
- * the grip on `:active` via its own `[data-vaul-handle]` rules when the consumer
- * uses `<DrawerHandle>`; this is the glass-ui default grip for the common case.
+ * 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;
@@ -114,10 +201,11 @@
         width var(--duration-fast) var(--ease-out);
 }
 
-/* While the sheet is being dragged vaul exposes the gesture; intensify the grip
-   so the affordance reads as "live". `:active` covers the pointer-held case for
-   the default grip; consumers using vaul's `<DrawerHandle>` get its own active
-   rule in addition. */
+/* 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);
@@ -130,7 +218,8 @@
  * `.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 vaul; the RULE is the look).
+ * (the detents themselves are positional, owned by the house snap engine; the
+ * RULE is the look).
  */
 .glass-drawer-snap-rule {
     height: 1px;
@@ -139,8 +228,11 @@
     background-color: var(--drawer-snap-rule-color);
 }
 
-/* Reduced-motion — vaul's transform transition is its own; we only suppress the
-   grip's affordance animation so the handle does not pulse for PRM users. */
+/* 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;

package/dist/styles/feedback-tone.css

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

package/dist/styles/glass/deep.css

@@ -0,0 +1,44 @@
+/* glass/deep.css — BB.W-DEEP-GLASS — the OPT-IN `.glass-deep` decoration.
+ *
+ * The deep-glass register: the maximal iOS-27 Liquid-Glass tier ABOVE the
+ * W-GLASS-CAL calm default (the Apple `saturate(1.8) blur(20px)` family, landed
+ * at the budget-clearing 16px / saturate 1.5; tokens/glass-deep.css). `.glass-deep`
+ * is the OPT-IN surface — a consumer adds it to a glass surface that wants the
+ * thick refractive liquid read (the hero glass, the dock, the CTA); the bare
+ * content default is UNCHANGED (the calm default is the user's call).
+ *
+ * ── The token-substitution model (the `.glass-opaque` precedent) ───────────
+ * `.glass-deep` is a DECORATION ON a base `.glass-*` rung, NOT a parallel solid/
+ * blur recipe. It mirrors `.glass-opaque` (ladder.css §opaque-escape — which only
+ * sets `--glass-level: 0`, a token re-point, never a competing `backdrop-filter`):
+ * `.glass-deep` re-points the floating-rung blur token to the deep family
+ * (`--glass-blur-floating: var(--glass-blur-deep)`), so the base `.glass-floating`
+ * rule's `backdrop-filter: var(--glass-blur-floating)` resolves to the DEEP blur —
+ * NO cascade fight, NO base-rule edit, the glass edge/rim/under-shadow + the W55
+ * tint axis + the a11y brackets all compose unchanged. The deep tier rides a base
+ * rung exactly as `.glass-opaque` does (the CardTier map is `deep →
+ * 'glass-floating glass-deep'`).
+ *
+ * Because the deep blur (glass-deep.css) COMPOSES `var(--glass-level)`, the a11y
+ * brackets (`prefers-reduced-transparency: reduce` / `prefers-contrast: more` set
+ * `--glass-level: 0` / 0.3 at :root, a11y-fallback.css) reach the deep plate for
+ * FREE — the deep blur collapses to blur(0) under reduced-transparency through the
+ * SAME level path (the opaque escape). The W55 bright-bucket darken reaches the
+ * deep surface by construction too: `.glass-deep` is composed WITH `.glass-floating`,
+ * which is already in the W55 `@container style(--glass-backdrop: light)` material
+ * group (ladder.css) AND self-engages the overlay-band darken — the deep tier
+ * inherits the legibility tint with no selector-list edit.
+ *
+ * @import-ed in glass.css AFTER ladder.css/surfaces.css (the same @layer components,
+ * source-order-after so the token re-point lands beside the rung it rides) and
+ * BEFORE the a11y @media brackets (which still win by the :root level re-point).
+ */
+@layer components {
+    /* The deep decoration: re-point the floating rung's blur token to the deep
+       family. The base `.glass-floating` rule (`backdrop-filter:
+       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
+       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
+    .glass-deep {
+        --glass-blur-floating: var(--glass-blur-deep);
+    }
+}