@mkbabb/glass-ui 3.8.0 → 3.9.0

package/src/styles/glass.css

@@ -59,7 +59,10 @@
     .glass-overlay,
     .glass-card,
     .glass-specular-track,
-    .dock-icon-button {
+    .dock-icon-button,
+    .dock-tab-button,
+    .dock-select-trigger,
+    .dock-dropdown-trigger {
         position: relative;
     }
 
@@ -85,7 +88,10 @@
     .glass-overlay::before,
     .glass-card::before,
     .glass-specular-track::before,
-    .dock-icon-button::before {
+    .dock-icon-button::before,
+    .dock-tab-button::before,
+    .dock-select-trigger::before,
+    .dock-dropdown-trigger::before {
         content: "";
         position: absolute;
         inset: 0;
@@ -106,32 +112,40 @@
            longer defeated by a floor. Hover/active lift it through the same
            cohort (the interaction-light state machine below). */
         --specular-intensity: var(--glass-specular-intensity-rest, 0);
-        /* The travelling catch-light — a genuinely WARM-CREAM, low-alpha circular
-           glow centred on the tracked pointer position (L < 100% so the warm hue
-           survives — the prior `hsl(40 30% 100%)` was PURE WHITE at L=100%, which
-           saturated the 30% away and blew out under the screen blend; the
-           warm-cream the comment claimed never painted). The `--specular-intensity`
-           multiplier drives the layer `opacity`, not a per-stop alpha (a
+        /* AX.W52 D19 — a thin, BOUNDED, pointer-anchored EDGE gleam (not the prior
+           full-plate central disc that washed small tiles muddy). The geometry is an
+           EXPLICIT-radius circle bounded by `--glass-specular-size` (36% of the
+           plate) whose falloff reaches `/0` well INSIDE the plate (70%) — a tracked
+           catch-light reading the surface near the lit edge, NEVER a whole-surface
+           wash. The core is genuinely WARM-CREAM (L < 100% so the warm hue survives;
+           the prior `hsl(40 30% 100%)` blew out to white). The `--specular-intensity`
+           multiplier drives the layer `opacity`, NOT a per-stop alpha (a
            registered-`@property` var() nested in an hsl() alpha computes to 0 in
-           Chromium); the per-stop alphas here keep the core soft so even the lifted
-           hover/active states read as a lens, not a flash. */
+           Chromium — the cross-engine-safe path); the per-stop alphas are literals so
+           even the lifted hover/active states read as a lens, not a flash. */
         background: radial-gradient(
-            circle at var(--specular-x, 50%) var(--specular-y, 50%),
-            hsl(40 30% 96% / 0.22) 0%,
-            hsl(40 30% 96% / 0.08) 22%,
-            transparent 55%
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+            hsl(40 35% 92% / 0.5) 0%,
+            hsl(40 35% 92% / 0) 70%,
+            transparent 100%
         );
         opacity: var(--specular-intensity, 0);
-        /* Clip the glow to the plate so it rides the surface. `mask-image`
-           Baseline 2023-12-07; a non-supporting engine ignores it and the
-           `inset: 0` + radius-inherit already bound the glow. */
+        /* Clip the gleam to ITS OWN radius (not the whole plate) so it stays a
+           bounded glint. `mask-image` Baseline 2023-12-07; a non-supporting engine
+           ignores it and the `inset: 0` + radius-inherit + the in-paint falloff
+           already bound the gleam to the surface. */
         mask-image: radial-gradient(
-            circle at var(--specular-x, 50%) var(--specular-y, 50%),
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
             black 0%,
-            black 55%,
-            transparent 75%
+            black 60%,
+            transparent 100%
         );
-        mix-blend-mode: screen;
+        /* AX.W52 D19 — `plus-lighter` (additive but HDR-clamped, Safari 16.4+) over
+           the prior `screen` (a non-linear lightener that lifted the whole tile
+           toward white — the muddy-card defect). A non-supporting engine degrades to
+           a plain low-alpha warm overlay (the gleam composes normally — no blend, no
+           blowout), the no-workaround floor; NOT a `screen` fallback. */
+        mix-blend-mode: plus-lighter;
         /* Smooth the position + intensity between pointer samples (the typed
            @property regs make the percentage stops interpolable). */
         transition:
@@ -148,9 +162,12 @@
     .dark .glass-overlay::before,
     .dark .glass-card::before,
     .dark .glass-specular-track::before,
-    .dark .dock-icon-button::before {
-        /* Softer over the deep canvas — the screen blend lifts harder on dark.
-           The `.dark` magnitude lives in the token cohort (tokens.css §specular-
+    .dark .dock-icon-button::before,
+    .dark .dock-tab-button::before,
+    .dark .dock-select-trigger::before,
+    .dark .dock-dropdown-trigger::before {
+        /* Softer over the deep canvas — `plus-lighter` still lifts on dark, so the
+           `.dark` cohort runs a lower hover/active rung (tokens.css §specular-
            intensity `.dark` arm); the rest rung is already 0 so the dark arm only
            softens hover/active via the cohort. The rest rung re-reads the (dark)
            token here so a dark `:root` override resolves. */
@@ -169,8 +186,11 @@
     .glass-overlay:hover::before,
     .glass-card:hover::before,
     .glass-specular-track:hover::before,
-    .dock-icon-button:hover::before {
-        --specular-intensity: var(--glass-specular-intensity-hover, 0.22);
+    .dock-icon-button:hover::before,
+    .dock-tab-button:hover::before,
+    .dock-select-trigger:hover::before,
+    .dock-dropdown-trigger:hover::before {
+        --specular-intensity: var(--glass-specular-intensity-hover, 0.1);
     }
     .glass-material:active::before,
     .glass-wash:active::before,
@@ -180,8 +200,26 @@
     .glass-overlay:active::before,
     .glass-card:active::before,
     .glass-specular-track:active::before,
-    .dock-icon-button:active::before {
-        --specular-intensity: var(--glass-specular-intensity-active, 0.32);
+    .dock-icon-button:active::before,
+    .dock-tab-button:active::before,
+    .dock-select-trigger:active::before,
+    .dock-dropdown-trigger:active::before {
+        --specular-intensity: var(--glass-specular-intensity-active, 0.16);
+    }
+
+    /* AX.W45-TUNE C5 — the SELECTED dock control reads as the keyframes-dock glass
+       register: a glass-tier active fill (`--dock-control-active-bg` → the floating
+       plate, tokens.css) WITH the specular gleam waking over it, not a flat ink
+       stamp. The CSS `:active` pseudo above only fires on press-down; a SELECTED tile
+       (`.is-active` / `[aria-pressed]` / `[aria-expanded]` / `[aria-current]`) holds
+       the gleam lit so the selected element reads as a lit glass tier the substrate
+       shows through (the model the user named, `pass-3:13`). Family-scoped addition
+       on the dock-control `::before`, line-disjoint from the shared recipe above. */
+    .dock-icon-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-tab-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-select-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-dropdown-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before {
+        --specular-intensity: var(--glass-specular-intensity-active, 0.16);
     }
 
     /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
@@ -273,6 +311,76 @@
         box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
     }
 
+    /* ── Adaptive legibility: the bright-backdrop bucket (AX.W55 — the iOS-26/27
+       "locally darken the glass over light content" move; G2) ──────────────────
+       When a consumer sets `--glass-backdrop: light` on any ancestor (a near-white
+       card surface, a pale aurora bleed, a bright data grid), the `@container
+       style()` read engages here and LIFTS the tint toward ink: `--glass-tint-
+       strength` climbs from the `0%` rest default to the bounded AA floor
+       (`--glass-tint-strength-aa`, ≤24% — translucent floor preserved) and `--glass-
+       tint-source` re-points from `var(--card)` to the warm-ink `--glass-tint-ink`.
+       Both are INHERITING custom properties the rungs' `background:` composite
+       already reads, so re-pointing them on the material group re-resolves the
+       EXISTING `color-mix(in oklab, <rung bg>, …)` toward ink — ZERO new compositing
+       seam, the literal darken-over-light recipe. The `.glass-*::before` specular
+       `plus-lighter` gleam (W52) is untouched (it composes ON the darkened plate;
+       the darkening is the orthogonal oklab-tint axis). No `@supports` wrapper:
+       style queries introduce no new `container-type` value (every element is a
+       style container by default), so an engine without style-query support parses
+       the unknown at-rule as invalid, drops the block, and keeps the zero-delta
+       glass (the graceful degradation — the surface is today's-glass, the pre-W55
+       state; see utilities.css §density for the same precedent). */
+    @container style(--glass-backdrop: light) {
+        .glass-material,
+        .glass-wash,
+        .glass-quiet,
+        .glass-resting,
+        .glass-floating,
+        .glass-overlay,
+        .glass-card {
+            --glass-tint-source: var(--glass-tint-ink);
+            --glass-tint-strength: var(--glass-tint-strength-aa);
+        }
+    }
+
+    /* AX.W55 — the `contrast-color()` foreground-ink flip (Chrome 147+/Safari 26+).
+       A PROGRESSIVE-ENHANCEMENT layer, NEVER the load-bearing floor (Open-Q #5
+       ratified): the declarative bucket above already carries AA on ALL engines (it
+       darkens the translucent plate so dark text clears ~11:1 over white at the 18%
+       floor — the live π readback ratifies). On a supporting engine `contrast-color()`
+       REFINES the foreground-ink pick natively, anchored on the LIGHT BACKDROP signal
+       (`--card`, the warm-white surface base the bright bucket implies) — NOT on the
+       ink. `contrast-color(var(--card))` over the light backdrop resolves to the
+       maximally-legible DARK ink (anchoring on the dark ink instead would invert to
+       white, illegible on the still-light translucent plate). The bucket is the floor;
+       this is the native refinement. Scoped to the bright bucket. */
+    @supports (color: contrast-color(white)) {
+        @container style(--glass-backdrop: light) {
+            .glass-material,
+            .glass-wash,
+            .glass-quiet,
+            .glass-resting,
+            .glass-floating,
+            .glass-overlay,
+            .glass-card {
+                color: contrast-color(var(--card));
+            }
+        }
+    }
+
+    /* ── The opaque escape (AX.W54) ───────────────────
+       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
+       (the opacity seam → 1) with `blur(0)` (the blur seam → 0), routed through
+       the ONE `--glass-level` knob. NOT a parallel solid `background:` recipe:
+       a `.glass-*` surface that ALSO carries `.glass-opaque` keeps its glass edge,
+       rim, and under-shadow (a solid plate with a glass edge, not a bare div), and
+       the @supports fallback + the a11y brackets compose coherently. This is the
+       explicit opt-out from the MAXIMAL glass default (dense data, forced-colors,
+       a consumer that wants a flat surface). */
+    .glass-opaque {
+        --glass-level: 0;
+    }
+
     /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
        Apple raises the under-shadow over text (so the glass reads as
        lifting OFF the text) and drops it over solid light. The modifier
@@ -405,11 +513,17 @@
         background: var(--glass-bg-wash);
         backdrop-filter: var(--glass-blur-wash);
         color: var(--muted-foreground);
+        /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
+           the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
+           so the icon-button hover settles on the SAME ONE register as `.btn-pill` /
+           `.tap-squish` / `btn-interactive` (the gate asserts one scale register
+           across all four). The press still reads crisp — `--spring-smooth` ζ=0.86
+           settles fast without a visible bounce. */
         transition:
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-normal) var(--spring-snappy);
+            scale var(--duration-normal) var(--spring-smooth);
     }
 
     .glass-btn:hover:not(:disabled) {
@@ -445,17 +559,40 @@
     .btn-pill {
         @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
 
-        gap: 0.375rem;
+        /* AX.W52 §6 identity base — `scale: 1` at rest so the hover/press scale
+           below animates the `scale` longhand (not `transform`) coherently and
+           does not flicker the stacking context into being (AQ.W3 §W3.2). */
+        scale: 1;
+        /* AX.W51 D18 — the pill GEOMETRY rides the ONE `--ui-scale` comfort axis.
+           gap / padding scale by the master scalar; the font reads the
+           `--control-text` register (`calc(--type-small * --ui-scale)`, the same
+           `text-sm` register the Button CVA paints), so a bare `.btn-pill` consumer
+           and a `<Button>` agree on the control font, and ONE `--ui-scale` override
+           grows the pill's height (via padding) + gap + font in lockstep. Desktop
+           default is the identity (scale 1 → the prior proportion). */
+        gap: calc(0.375rem * var(--ui-scale));
         border-radius: var(--radius-pill);
-        padding: 0.5rem 1rem;
-        font-size: 1rem;
+        padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
+        font-size: var(--control-text);
+        /* AX.W52 — the ONE coherent button transition (RED witness 5/6). The
+           SURFACE legs (bg/border/box-shadow/color/opacity) ride the bezier
+           `--ease-standard` (a colour cross-fade reads as a wobble on a spring);
+           the TRANSFORM leg (`scale`) rides `--spring-smooth` (the sub-perceptual
+           settle), so the hover lift + the surface cross-fade read as ONE glide.
+           The DEAD `transform` leg is retired — the variants animate the `scale`
+           longhand. CRITICAL: `.tap-squish` (composed alongside on the button
+           base, utilities.css) ALSO lists this full coherent set, so neither
+           class's `transition` shorthand can clobber the other down to a
+           scale-only animation — the cascade bug that left every button
+           transitioning ONLY `scale` (the live-readback RED, RED witness 5). The
+           doctrine: surface-props→bezier, transform→spring (tokens.css §2). */
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--spring-smooth);
     }
 
     .btn-pill > * {
@@ -469,23 +606,52 @@
         pointer-events: none;
     }
 
+    /* ── Glass-button backdrop ─────────────────────────────────────────────
+       AX.W52 — the `glass`/`glass-wash` Button variants compose `.glass-wash`,
+       which resolves `--glass-blur-wash` = `blur(1px)` — a sub-perceptual
+       diffusion authored for a small detail TILE, not a button the user reads
+       as "glass" (the live readback found the glass variants at a negligible
+       1px). A hero control wants a real glass blur. `.btn-glass` re-points the
+       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
+       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
+       button variants actually read as liquid glass while the wash TILE tier
+       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
+       Lightning CSS emits the `-webkit-` companion per the single-source
+       authorship discipline above (hand-authoring both forms makes Lightning
+       dedup-and-keep-prefixed, which modern Chromium then drops). */
+    .btn-glass {
+        backdrop-filter: var(--glass-blur-btn);
+    }
+
     /* ── Pill input ───────────────────────────────── */
     .input-pill {
         @apply flex w-full;
 
-        height: 2.5rem;
+        /* AX.W51 D18 — the input pill rides the ONE `--ui-scale` comfort axis: the
+           height reads the `--control-h-md` cohort (`max(calc(2.5rem * --ui-scale),
+           --control-floor)`, the h-10 register with the WCAG-44px coarse clamp), the
+           font reads `--control-text`, the inline padding scales — so ONE override
+           grows the field's height + padding + font in lockstep. Desktop default is
+           the identity. */
+        height: var(--control-h-md);
         border-radius: var(--radius-pill);
-        /* AW.W13 — the resting field edge reads as an enclosed control at rest.
-           Was `--glass-border-wash` (~8%α), which nearly vanished on cream; the
-           lift to `--surface-tint-15` (15%α — ~2× the prior floor) makes the
-           edge legible without going loud. The `:focus-visible` accent ring +
-           the `:user-invalid`/`[aria-invalid]` destructive ring below still win
-           by order + specificity, so this only raises the resting alpha. */
-        border: 1.5px solid var(--surface-tint-15);
+        /* AW.W13 — the resting field edge reads as an enclosed control at rest
+           (~15%α — ~2× the prior 8% glass-wash floor that vanished on cream). The
+           `:focus-visible` accent ring + the `:user-invalid`/`[aria-invalid]`
+           destructive ring below still win by order + specificity.
+           AX.W54 — moved off the srgb `--surface-tint-15` fork onto the glass
+           border seam (`--glass-border-floating`, the matching 15%α rung) so the
+           pill is ONE glass model with the rest of the ladder, not a divergent
+           tint axis. */
+        border: 1.5px solid var(--glass-border-floating);
         background: var(--glass-bg-quiet);
-        backdrop-filter: var(--glass-blur-wash);
-        padding: 0 1rem;
-        font-size: 1rem;
+        /* AX.W54 — the pill reads as REAL glass: the quiet-tier 10px blur (the
+           same `--glass-blur-quiet` its `--glass-bg-quiet` background pairs with),
+           not the sub-perceptual `blur(1px)` wash it carried — and the
+           `--glass-level` knob now clarifies it in lockstep with every surface. */
+        backdrop-filter: var(--glass-blur-quiet);
+        padding: 0 calc(1rem * var(--ui-scale));
+        font-size: var(--control-text);
         color: var(--foreground);
         transition:
             background-color var(--duration-fast) var(--ease-standard),
@@ -664,50 +830,205 @@
     }
 }
 
-/* ── AW.W23 — corner-shape: squircle PE (Chrome 139+) ───────────────────────
-   The literal iOS-26 superellipse corner geometry that `backdrop-filter`,
-   borders, and shadows follow. `@supports (corner-shape: squircle)`-gated over
-   the un-gated `border-radius` round, which stays the fallback at zero cost on
-   every other engine (Safari/Firefox). The `corner-shape` decl sits ONLY inside
-   the `@supports` block — a leak onto the un-gated base would break the round
-   fallback on a partial-support engine. */
-@supports (corner-shape: squircle) {
-    @layer components {
-        .glass-card,
-        .glass-btn,
-        .btn-pill {
-            corner-shape: squircle;
+/* ── AX.W56 — the rounded-vs-squircle POLICY (re-homes AW.W23's squircle) ─────
+   Cards, glass buttons, and pills stay ROUND. The earlier AW.W23 block applied
+   `corner-shape: squircle` to `.glass-card`/`.glass-btn`/`.btn-pill`, which
+   inverted the design intent — the superellipse is imperceptible at a 16px card
+   radius or a stadium pill, so the squircle on those surfaces was visual cost
+   without read. The squircle is RE-HOMED onto the one surface where it reads: the
+   big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
+   `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
+   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
+   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
+   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
+   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
+   re-add a squircle rule to the card/button/pill surfaces — they are round by
+   policy. */
+
+/* ── AX.W56(R1) — squircle coupling onto the overlay-band glass surfaces ───────
+   W54 makes GLASS the default for the Dialog + Sheet content surfaces; W56 couples
+   the SQUIRCLE onto them too. Both ride `.glass-floating` at the large
+   `--radius-dialog` (16px) modal radius where the superellipse READS — the same
+   iOS-26 idiom the big-dock card shell carries. The compound selectors scope the
+   shape to the dialog/sheet content ONLY (the `.rounded-dialog` class the
+   DialogContent surface composes, the `.sheet-animate` class the SheetContent
+   surface composes via `sheetVariants`) so it never leaks onto a bare
+   `.glass-floating` panel. Mirrors the big-dock idiom EXACTLY: an `@supports`-
+   gated ENHANCEMENT (Chrome 139+, no FF/Safari 2026) over the `border-radius`
+   round CONTRACT — the squircle is the better tier, NOT a degraded fallback. The
+   shape is the tokenized `var(--corner-shape-{dialog,sheet})` (theme.css) so it is
+   as overridable as the radius; a consumer dials either back to round by
+   re-pointing the alias. The `@supports` condition tests the LITERAL
+   `superellipse(2)` (a `var()` is not evaluable in an `@supports` query) — the same
+   Chrome-139 feature the token resolves to. */
+@layer components {
+    @supports (corner-shape: superellipse(2)) {
+        .glass-floating.rounded-dialog {
+            corner-shape: var(--corner-shape-dialog);
+        }
+        .glass-floating.sheet-animate {
+            corner-shape: var(--corner-shape-sheet);
         }
     }
 }
 
-/* ── Accessibility: reduced transparency ────────── */
+/* ── Accessibility: reduced transparency ──────────
+   AX.W54 — the gestalt collapse: ONE `--glass-level: 0` replaces the ten per-rung
+   opacity+blur clobbers. The level-0 path resolves solid `--card` + `blur(0)`
+   through the SAME machinery (the opacity seam → 1, the blur seam → 0), so every
+   glass surface — current and future — flattens with no per-rung enumeration. The
+   grain + highlight kills stay (they sit off the level axis). */
 @media (prefers-reduced-transparency: reduce) {
     :root {
-        --glass-opacity-wash: 1;
-        --glass-opacity-quiet: 1;
-        --glass-opacity-resting: 1;
-        --glass-opacity-floating: 1;
-        --glass-opacity-overlay: 1;
-        --glass-blur-wash: none;
-        --glass-blur-quiet: none;
-        --glass-blur-resting: none;
-        --glass-blur-floating: none;
-        --glass-blur-overlay: none;
-        --glass-blur-dock: none;
+        --glass-level: 0;
         --glass-grain-opacity: 0;
         --glass-highlight: 0 0 0 0 transparent;
     }
 }
 
-/* ── Accessibility: high contrast ───────────────── */
+/* ── Accessibility: high contrast ─────────────────
+   AX.W54 — a single bounded `--glass-level: 0.3` (mostly-solid, not fully flat)
+   replaces the five per-rung opacity clobbers: every rung firms up toward solid
+   for AA while keeping a hint of the glass register. ONE knob, every rung.
+
+   AX.W55 — the Clear↔Tinted user-escape (Apple's iOS-26.2 analog) COORDINATES the
+   two axes here: the OPACITY axis rides W54's `--glass-level` (firm up toward solid)
+   AND the TINT axis biases toward ink — `--glass-tint-source` → the warm-ink +
+   `--glass-tint-strength` → the AA floor, the same darken the automatic bright
+   bucket applies, now reached by the explicit "more contrast" user request. The two
+   axes stay DISTINCT (level = opacity+blur, tint = darken) but share the bracket so
+   a high-contrast user gets BOTH a firmer plate and the ink-tint legibility lift —
+   one coordinated escape, not two parallel forks. */
 @media (prefers-contrast: more) {
     :root {
-        --glass-opacity-wash: 0.85;
-        --glass-opacity-quiet: 0.90;
-        --glass-opacity-resting: 0.94;
-        --glass-opacity-floating: 0.98;
-        --glass-opacity-overlay: 1;
+        --glass-level: 0.3;
+        --glass-tint-source: var(--glass-tint-ink);
+        --glass-tint-strength: var(--glass-tint-strength-aa);
+    }
+}
+
+/* ── Accessibility: forced-colors (Windows High Contrast) glass-language skin ──
+   AX.W36 — when the OS forces a palette (Windows High Contrast), the platform
+   strips the whole decorative glass register: `backdrop-filter` is dropped, the
+   `--glass-*` inset/box-shadow rungs vanish, and every meaning-bearing chroma
+   flattens to one system color. A `.glass-floating` Dialog over a `.glass-resting`
+   Card would read as two borderless transparent rectangles with no edge, and a
+   green-vs-red StatusDot would resolve to one indistinguishable dot. This skin
+   restores the STRUCTURE the glass chrome encoded — it does NOT pin glass-ui's
+   brand colours (no `forced-color-adjust: none`); the chrome is decorative and
+   YIELDS to the user's forced palette (css forced-colors guidance). Only the
+   standard WHC system keywords are used (`Canvas`/`CanvasText`/`Highlight`) — no
+   glass-ui token leaks into the WHC arm.
+
+   COORDINATES WITH W54 — the same `--glass-level: 0` opaque escape the reduced-
+   transparency / high-contrast brackets ride. Setting the ONE clarity knob to 0
+   collapses the `--glass-bg-*` opacity recipe to solid `--card` + `blur(0)` through
+   the SAME machinery (no parallel solid recipe), so the platform sees opaque plates
+   it maps to `Canvas`. The grain + highlight kills match the reduce bracket (they
+   sit off the level axis). The W55 tint axis is moot under WHC (the user's palette
+   supersedes the ink-darken) but harmless — the opaque plate is system-painted. */
+@media (forced-colors: active) {
+    :root {
+        --glass-level: 0;
+        --glass-grain-opacity: 0;
+        --glass-highlight: 0 0 0 0 transparent;
+    }
+
+    /* Every glass-material ladder rung relied on `backdrop-filter` + an inset
+       `box-shadow` rim for its silhouette — both gone under WHC. Restore a real
+       `border` keyed to the system text colour so each tier pane reads as a boxed
+       region. The selector group MIRRORS the ladder definition above (one source,
+       not a hand-rolled re-list) so a future rung added to the material group
+       inherits the WHC edge for free — and a `.glass-material` div that became one
+       via the GlassPanel retire gets the edge with no per-component arm. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card {
+        border: 1px solid CanvasText;
+    }
+
+    /* The floating + overlay rungs (Dialog / Sheet / Popover / DropdownMenu /
+       HoverCard compose them) get the canonical `Canvas` fill so the modal reads as
+       a DISTINCT boxed region OVER the page, not a transparent overlap — the
+       hierarchy survives. The `CanvasText` edge above already draws the box; this
+       opaque fill separates the floating layer from the content beneath it. */
+    .glass-floating,
+    .glass-overlay {
+        background: Canvas;
+    }
+
+    /* The decorative specular catch-light (`::before`) + grain overlay (`::after`)
+       paint nothing meaningful once chroma collapses — yield them entirely (the
+       same decorative-chrome cede the `--glass-level: 0` opaque escape performs on
+       the body). They are NOT part of the structure the skin restores. */
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .glass-wash::after,
+    .glass-quiet::after,
+    .glass-resting::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+        display: none;
+    }
+
+    /* Meaning-bearing hue identity → a bordered glyph that keeps ok/warn/error
+       distinguishable by a WHC-HONORED system color, NOT a glass-ui hue (which WHC
+       strips to one fill). StatusDot reflects its variant onto `data-status`
+       (StatusDot.vue) and the inner dot carries `.status-dot__dot`; the
+       `role="img"` + `aria-label` accessible name already ships, so this is the
+       VISUAL differentiation only. A bare bordered dot + the per-status fill triplet
+       below means a sighted WHC user can still tell the row apart.
+
+       `!important` IS load-bearing here: StatusDot paints the dot fill via an INLINE
+       `:style="dotStyle"` (`background-color`, specificity 1,0,0,0), which outranks
+       any stylesheet selector AND which forced-colors then `forced-color-adjust:
+       auto`-remaps to a single Canvas-white — collapsing the row to one indistinct
+       dot. The WHC arm must override that inline fill, and inline can only be beaten
+       by `!important`; this is the documented forced-colors degradation path (the
+       arm only activates under WHC). The component keeps its inline hue in normal
+       mode untouched. */
+    .status-dot__dot {
+        border: 1px solid CanvasText;
+        /* The bordered ring alone separates a dot from its surround; the per-status
+           fill below adds the WHC-honored distinction. */
+    }
+    /* The inner painted fill (`.status-dot__fill`, `h-full w-full`) + the pulse ring
+       carry the SAME inline glass-ui hue StatusDot paints — under WHC they cover the
+       outer `.status-dot__dot` glyph with a `forced-color-adjust`-remapped Canvas
+       fill (the row collapses to one white dot even with the outer system color set).
+       Yield them so the outer bordered + system-color glyph is the sole visible dot. */
+    .status-dot__fill,
+    .status-dot__pulse {
+        display: none;
+    }
+    /* The ok/warn/error/idle distinction rides the standard WHC keyword palette:
+         active (ok)   → Highlight   (the affirmative system accent)
+         paused (warn) → Mark        (the marked/attention system color)
+         error         → CanvasText  (a solid filled dot — the strongest weight)
+         idle/custom   → Canvas      (a hollow dot — only the CanvasText ring reads)
+       Each stays distinguishable by the system color the user's palette assigns,
+       never glass-ui chroma. The `!important` beats the component's inline fill. */
+    .status-dot__dot[data-status="active"] {
+        background: Highlight !important;
+    }
+    .status-dot__dot[data-status="paused"] {
+        background: Mark !important;
+    }
+    .status-dot__dot[data-status="error"] {
+        background: CanvasText !important;
+    }
+    .status-dot__dot[data-status="idle"],
+    .status-dot__dot[data-status="custom"] {
+        background: Canvas !important;
     }
 }
 

package/src/styles/index.css

@@ -60,10 +60,15 @@
  *                              over the glass tiers.
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — dock shell / density / grain / layer-crossfade
- *                              contract + the shared cross-control four-state
- *                              comma-groups. Component utility layer; consumes
- *                              (1) + (3).
+ *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
+ *                              registration, the shared cross-control four-state
+ *                              comma-groups, and the `@import`s of the cohesive
+ *                              `dock/*.css` partials (shell · morph · density ·
+ *                              layers · layer-group · overflow — AX.W06 carved
+ *                              the 1762-line god-module into single-axis partials,
+ *                              each < 500 lines, all in the SAME @layer components
+ *                              so the cascade is isomorphic). Component utility
+ *                              layer; consumes (1) + (3).
  *  6b. dock-controls.css     — the five dock CONTROL families carved out of
  *                              dock.css (AU.W8b.3): .dock-icon-button,
  *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
@@ -99,13 +104,11 @@
  *                              binding + bezel hairlines + sibling divider
  *                              rule). Composes alongside instrument-chassis;
  *                              shares the bezel-line twin-pixel idiom.
- *  14. glyph-face.css        — P-tranche component CSS (cap + backplate).
- *  15. disco-glyph.css       — P-tranche component CSS (layered fills).
- *  16. hover-popover.css     — V.W3 popover-animation grammar.
- *  17. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  14. hover-popover.css     — V.W3 popover-animation grammar.
+ *  15. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
  *
- * Per-package component CSS lives at (12)-(17) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(15) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -127,8 +130,6 @@
 @import "./utilities.css";
 @import "./instrument-chassis.css";
 @import "./instrument-rail.css";
-@import "./glyph-face.css";
-@import "./disco-glyph.css";
 @import "./hover-popover.css";
 @import "./drawer.css";