@mkbabb/glass-ui 3.5.1 → 3.6.0

package/src/styles/glass.css

@@ -29,6 +29,150 @@
  */
 
 @layer components {
+    /* ── The unified glass material (AW.W22) ──────────────────────────────
+       ONE source for the three material atoms that AV.W15 scattered onto
+       opt-in classes + single tiers:
+         (a) the moving-specular `::before` catch-light (folded here from
+             glass-specular-track.css — that file now keeps only the thin
+             `.glass-specular-track` ALIAS + the brackets that point HERE),
+         (b) the `--glass-edge-light` full-perimeter rim (moved off the
+             floating-only block so EVERY rung carries it),
+         (c) the pointer interaction-light hooks (the `--specular-*`
+             `@property` channel mapped from the consumer's --mouse-x/--mouse-y
+             write).
+       The five ladder rungs + `.glass-card` + the `.dock-icon-button` CONTROL
+       compose `.glass-material`, so a Switch thumb, a glass Button, a Dialog,
+       and a Sheet all read as the SAME material without per-component wiring.
+
+       The `.glass-dock` SHELL is OUT of this group BY DESIGN — it hand-rolls a
+       parallel surface (its own `--glass-*-dock` family + a local rim + an
+       instrument-strip `::before`) the dock arm owns; the dock's catch-light
+       lives on its CONTROL (`.dock-icon-button`, listed below), not the shell.
+
+       The selector GROUP is the single source. Adding a surface to the band
+       material is one comma-entry here, not a new opt-in class string. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-specular-track,
+    .dock-icon-button {
+        position: relative;
+    }
+
+    /* (b) The rim — UNIFORM across all rungs (ONE `--glass-edge-light` token,
+       not a per-rung family). The floating/overlay tiers previously wired it
+       into their box-shadow stack; it now rides the material group as a
+       dedicated `::after` inset ring so it composes alongside (not inside) each
+       tier's own shadow recipe. The `::after` grain overlay already claims the
+       five rungs' `::after`; the rim is folded INTO that same overlay's
+       box-shadow below (the grain `::after` gets the rim inset ring) so no
+       pseudo-element collides. */
+
+    /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
+       illuminate-from-within behaviour. A masked radial-gradient glow rides the
+       surface at the pointer position (--mouse-x/--mouse-y → the typed
+       --specular-* channel). Folded VERBATIM from glass-specular-track.css so
+       there is exactly ONE specular source. */
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .glass-specular-track::before,
+    .dock-icon-button::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        z-index: 1;
+        /* Map the consumer's pointer write onto the typed properties, ON THE
+           PSEUDO. The `--mouse-x/--mouse-y` write lands on the HOST (inline
+           style) as UNREGISTERED props that inherit down to this `::before`;
+           the registered `--specular-*` props are `inherits: false`, so the
+           mapping is declared HERE where the pseudo owns its typed value. The
+           `var(--mouse-x, 50%)` floor is the centred fallback. */
+        --specular-x: var(--mouse-x, 50%);
+        --specular-y: var(--mouse-y, 50%);
+        /* The catch-light intensity floor at rest; hover/active lift it (the
+           interaction-light state machine below). */
+        --specular-intensity: 0.35;
+        /* The travelling catch-light — a soft warm-white circular glow centred
+           on the tracked pointer position (NOT iOS blue; keeps the warm-cream
+           identity). 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). */
+        background: radial-gradient(
+            circle at var(--specular-x, 50%) var(--specular-y, 50%),
+            hsl(40 30% 100% / 0.55) 0%,
+            hsl(40 30% 100% / 0.22) 22%,
+            transparent 55%
+        );
+        opacity: var(--specular-intensity, 0.35);
+        /* 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. */
+        mask-image: radial-gradient(
+            circle at var(--specular-x, 50%) var(--specular-y, 50%),
+            black 0%,
+            black 55%,
+            transparent 75%
+        );
+        mix-blend-mode: screen;
+        /* Smooth the position + intensity between pointer samples (the typed
+           @property regs make the percentage stops interpolable). */
+        transition:
+            --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out);
+    }
+
+    .dark .glass-material::before,
+    .dark .glass-wash::before,
+    .dark .glass-quiet::before,
+    .dark .glass-resting::before,
+    .dark .glass-floating::before,
+    .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. */
+        --specular-intensity: 0.22;
+    }
+
+    /* (c) Interaction-light lockstep — hover/active lift the intensity in the
+       SAME rungs the scale-press squish keys off, so material-light fires in
+       lockstep with the press across every glass surface. Settles back on leave
+       via the opacity transition above. */
+    .glass-material:hover::before,
+    .glass-wash:hover::before,
+    .glass-quiet:hover::before,
+    .glass-resting:hover::before,
+    .glass-floating:hover::before,
+    .glass-overlay:hover::before,
+    .glass-card:hover::before,
+    .glass-specular-track:hover::before,
+    .dock-icon-button:hover::before {
+        --specular-intensity: 0.6;
+    }
+    .glass-material:active::before,
+    .glass-wash:active::before,
+    .glass-quiet:active::before,
+    .glass-resting:active::before,
+    .glass-floating:active::before,
+    .glass-overlay:active::before,
+    .glass-card:active::before,
+    .glass-specular-track:active::before,
+    .dock-icon-button:active::before {
+        --specular-intensity: 0.85;
+    }
+
     /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
        Tier semantics, alpha-monotonic per R3-spec §A:
          wash      ~0.30α  + light blur      (was `subtle`)
@@ -45,12 +189,19 @@
        which modern Chromium then dropped from the CSSOM (the prefixed
        alias is parser-rejected post-Chrome 113). Single-source-of-truth
        authorship lets the build pipeline deliver the right matrix. */
+    /* AW.W23 — every rung's background composes the adaptive-tint recipe
+       (`color-mix(in oklab, <rung bg>, var(--glass-tint-source) var(--glass-tint-
+       strength))`). With the default `--glass-tint-strength: 0%` the mix is a
+       no-op = byte-identical to the un-tinted rung; a consumer biases the surface
+       toward a sampled backdrop hue by setting `--glass-tint-source` + a
+       strength ≤30%. oklab is the mwg-preferred tint space (NEVER an
+       `oklch(from …)` lightness-shift — browsers don't gamut-map yet). */
     .glass-wash {
         position: relative;
-        background: var(--glass-bg-wash);
+        background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-wash);
         border: 1px solid var(--glass-border-wash);
-        box-shadow: var(--glass-shadow-wash);
+        box-shadow: var(--glass-material-rim), var(--glass-shadow-wash);
     }
 
     /* AL-W10 SLIM under-shadow wiring (tokens.css §AL-W10 SLIM —
@@ -67,42 +218,48 @@
        Spine tier wires its own rung at instrument-chassis.css. */
     .glass-quiet {
         position: relative;
-        background: var(--glass-bg-quiet);
+        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-quiet);
         border: 1px solid var(--glass-border-quiet);
-        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-quiet);
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-quiet),
+            var(--glass-shadow-quiet);
     }
 
     .glass-resting {
         position: relative;
-        background: var(--glass-bg-resting);
+        background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-resting);
         border: 1px solid var(--glass-border-resting);
-        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-resting);
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-default),
+            var(--glass-shadow-resting);
     }
 
-    /* AV.W15 M3 — the floating tier wires the full-perimeter `--glass-edge-light`
-       rim as an inset layer alongside the under-shadow + lift stack. The rim is
-       the catch-light that "defines the silhouette" (WWDC25 sess. 219), distinct
-       from the top-only `--glass-highlight`. It rides INSIDE the box-shadow stack
-       so it composes with the under-shadow floor and the elevation lift. */
+    /* AV.W15 M3 / AW.W22 — the floating tier carries the full-perimeter rim (the
+       catch-light that "defines the silhouette", WWDC25 sess. 219). The rim now
+       comes from the unified `--glass-material-rim` (= `--glass-edge-light`) so
+       it shares ONE source with the rest of the ladder; it rides INSIDE the
+       box-shadow stack so it composes with the under-shadow floor + the lift. */
     .glass-floating {
         position: relative;
-        background: var(--glass-bg-floating);
+        background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-floating);
         border: 1px solid var(--glass-border-floating);
         box-shadow:
-            var(--glass-edge-light),
+            var(--glass-material-rim),
             var(--glass-under-shadow-vivid),
             var(--glass-shadow-floating);
     }
 
     .glass-overlay {
         position: relative;
-        background: var(--glass-bg-overlay);
+        background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-overlay);
         border: 1px solid var(--glass-border-overlay);
-        box-shadow: var(--glass-shadow-overlay);
+        box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
     }
 
     /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
@@ -136,7 +293,7 @@
     }
     .glass-floating[data-over-content="solid"] {
         box-shadow:
-            var(--glass-edge-light),
+            var(--glass-material-rim),
             var(--glass-under-shadow-default),
             var(--glass-shadow-floating);
     }
@@ -159,6 +316,28 @@
         mix-blend-mode: overlay;
     }
 
+    /* (b) The unified rim — `--glass-edge-light` full-perimeter inset ring on
+       EVERY material surface (AW.W22). Previously the rim was wired only into
+       the floating/overlay tiers' box-shadow stack; promoting it to the material
+       group makes wash/quiet/resting/card/dock-control all carry the same
+       silhouette catch-light from ONE token. The rim is its OWN `box-shadow`
+       declaration on the material group so it composes uniformly without
+       perturbing each tier's elevation recipe (the floating/overlay tiers drop
+       their now-redundant inline `--glass-edge-light` layer below). The alpha is
+       deliberately low so the rim never eats AA legibility over a busy
+       backdrop. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-specular-track,
+    .dock-icon-button {
+        --glass-material-rim: var(--glass-edge-light);
+    }
+
     .dark .glass-wash::after,
     .dark .glass-quiet::after,
     .dark .glass-resting::after,
@@ -179,11 +358,11 @@
         --card-focus-shadow: var(--shadow-card);
         --card-focus-border: var(--glass-border-quiet);
         position: relative;
-        background: var(--glass-bg-quiet);
+        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
         backdrop-filter: var(--glass-blur-quiet);
         border: 1px solid var(--card-focus-border);
         border-radius: var(--radius-card);
-        box-shadow: var(--card-focus-shadow);
+        box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
         contain: layout style;
         transition:
             box-shadow var(--duration-fast) var(--ease-standard),
@@ -322,16 +501,22 @@
     }
 
     /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The forgiving `:where(:user-invalid, .user-invalid-fallback)` group is
-       ONE rule covering native + the `useUserInvalidAria` fallback class (css
-       §3.2; NOT a live+dead alias — the class is the SOLE fallback for engines
-       without `:user-invalid`). The destructive/success tints reuse the
-       semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       The forgiving `:where(:user-invalid, .user-invalid-fallback,
+       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
+       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
+       fallback class for engines without `:user-invalid` (css §3.2; NOT a
+       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
+       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
+       serves APP-DRIVEN validity — a custom key match, an async server check —
+       where there is no native constraint to trip `:user-invalid`, so the app
+       sets the ARIA attribute and the library's own ring paints with no
+       `:deep()` re-paint at the consumer. The destructive/success tints reuse
+       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
        reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
        asterisk — the border/bg shift is the supplementary cue, never the sole
        one. `:user-valid` is intentionally subtle (border only, no bg fill) so
        a long valid form is not a wall of green. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback) {
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
         border-color: var(--destructive);
         background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
     }
@@ -339,9 +524,10 @@
         border-color: var(--success);
     }
     /* Invalid + keyboard-focused → destructive ring (overrides the accent
-       `:focus-visible` ring above by order + the extra `:user-invalid`
-       compound). */
-    .input-pill:where(:user-invalid, .user-invalid-fallback):focus-visible {
+       `:focus-visible` ring above by order + the extra invalid compound). The
+       `[aria-invalid]` arm rides the same widened group so an app-driven
+       invalid field shows the destructive ring on focus too. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
         border-color: var(--destructive);
         box-shadow: 0 0 0 var(--focus-ring-width)
             color-mix(in srgb, var(--destructive) 35%, transparent);
@@ -404,6 +590,36 @@
             var(--progress-rail-glow-x, 4px) 0 var(--progress-rail-glow-blur, 8px)
             color-mix(in srgb, var(--progress-rail-fill, var(--primary)) var(--progress-rail-glow-strength, 55%), transparent);
     }
+
+    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
+       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
+       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
+       box-shadow). The fringe is a transparency garnish, so it composes ONLY
+       under `prefers-reduced-transparency: no-preference` and drops under
+       `reduce` (handled by the bracket below). The fringe lands as a dedicated
+       inset box-shadow pair on the material surface so it adds onto the rim. */
+    @media (prefers-reduced-transparency: no-preference) {
+        .glass-chromatic {
+            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
+        }
+    }
+}
+
+/* ── 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;
+        }
+    }
 }
 
 /* ── Accessibility: reduced transparency ────────── */

package/src/styles/index.css

@@ -114,6 +114,7 @@
 @import "./theme.css";
 @import "./glass.css";
 @import "./glass-specular-track.css";
+@import "./glass-refract.css";
 @import "./paper.css";
 @import "./dock.css";
 @import "./dock-controls.css";

package/src/styles/theme.css

@@ -32,6 +32,9 @@
     --radius-md: 6px;
     --radius-xl: 12px;
     --radius-2xl: 1rem;
+    /* AW.W3b — a finite radius rung above --radius-2xl (16px), below
+       --radius-pill (the stadium). The big-dock card shell's corner geometry. */
+    --radius-3xl: 1.5rem;
     --radius-pill: 9999px;
 
     /* Semantic radius aliases — plain @theme (not inline; see header note).
@@ -46,6 +49,9 @@
     --radius-button:  var(--radius);
     --radius-badge:   var(--radius-pill);
     --radius-dock:    var(--radius-pill);
+    /* AW.W3b — the big-dock card shell's default (comfortable-density) radius.
+       The density-scaled --dock-card-radius (dock.css) resolves through this. */
+    --radius-dock-card: var(--radius-3xl);
     --radius-tooltip: var(--radius-lg);
 }
 

package/src/styles/tokens.css

@@ -700,6 +700,32 @@
     --glass-edge-light:      inset 0 0 0 0.75px hsl(0 0% 100% / 0.18);
     --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.10);
 
+    /* AW.W23 — content-aware adaptive tint (the Baseline-2025 "tint informed by
+       surrounding content" axis, WWDC25 sess. 219). A surface can tint toward a
+       consumer-provided dominant backdrop color via a `color-mix(in oklab, …)`
+       recipe (oklab is the mwg-preferred space for tint generation; NEVER a
+       lightness-shift in `oklch(from …)` — browsers don't gamut-map yet).
+
+       DEFAULT is zero delta: `--glass-tint-source` is the warm-white card itself
+       and `--glass-tint-strength` is 0%, so the rung background mixes 0% toward
+       the source = byte-identical to today. A consumer sets `--glass-tint-source`
+       to a sampled aurora hue + a strength ≤30% to bias the surface. Alpha-safe:
+       the mix is bounded ≤30% and never re-points the card's own alpha. */
+    --glass-tint-source:   var(--card);
+    --glass-tint-strength: 0%;
+
+    /* AW.W23 — chromatic edge dispersion (the "polished glass" rim fringe Apple
+       shows). A warm fringe on one edge + a cool fringe on the other, low-alpha,
+       biased warm-cream/NCSU-red (NOT iOS-blue). Composed OVER the W22 uniform
+       rim under `prefers-reduced-transparency: no-preference`; dropped under
+       `reduce` (it is a transparency garnish). The two directional inset rings
+       read as light refracting through the glass edge. */
+    --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22);
+    --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16);
+    --glass-edge-dispersion:
+        inset 0.75px 0 0 0 var(--glass-fringe-warm),
+        inset -0.75px 0 0 0 var(--glass-fringe-cool);
+
     /* Chassis curvature illusion — a subtle radial gradient at the chassis
        top centre that lifts the surface without committing to literal 3D.
        Composed into <InstrumentChassis>'s background stack. */
@@ -1586,6 +1612,13 @@
        `.dark` (mirroring the `--glass-specular` remap above). The lit token
        resolves to the `-dark` alpha on the deeper canvas. */
     --glass-edge-light: var(--glass-edge-light-dark);
+
+    /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
+       to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
+       source` auto-flips with `--card` (no override needed — the default already
+       resolves the dark card). */
+    --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
+    --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
     --glass-curvature-overlay: radial-gradient(
         ellipse at 50% -20%,
         hsl(0 0% 100% / 0.06),