@mkbabb/glass-ui 3.5.1 → 3.7.0

package/dist/styles/glass-specular-track.css

@@ -1,120 +1,45 @@
 /* Pointer-anchored moving specular — the iOS-26 Liquid Glass illuminate-from-
- * within behaviour (AV.W15 M2, the HEADLINE fold).
+ * within behaviour.
  *
- * A masked radial-gradient catch-light rides the material surface at the
- * pointer position. The consumer writes the pointer location onto the element
- * as `--mouse-x` / `--mouse-y` (percentages) via a thin pointer-listener; this
- * rung maps those onto the typed `--specular-x` / `--specular-y` properties
- * (registered in tokens.css §11b) and paints a `radial-gradient(circle at …)`
- * over a `mask-image` so the glow stays clipped to the glass plate and travels
- * with the cursor — "the light travels around the material / illuminate under
- * your fingertip".
+ * AW.W22 — the moving-specular `::before` body (the masked radial catch-light,
+ * the rest/hover/active intensity steps, the var() fallback) was FOLDED into the
+ * single `.glass-material` mixin in glass.css, where the five ladder rungs +
+ * `.glass-card` + the `.dock-icon-button` control + `.glass-specular-track`
+ * compose it from ONE source. There is NO duplicate `::before` body here.
  *
- * Baseline floors: `@property` 2024-07-09 (the smooth position interpolation),
- * CSS `mask-image` 2023-12-07 (the surface-clip). Both carry a `var()` fallback
- * so an engine without typed-property animation still paints a centred catch-
- * light, and an engine without `mask` still paints the radial (unmasked but
- * surface-bounded by the `::before` `inset: 0` + `border-radius: inherit`).
+ * `.glass-specular-track` is now a thin ALIAS — it is listed in the
+ * `.glass-material` selector GROUP in glass.css, so a `.glass-specular-track`
+ * element gets the unified material (the `::before` catch-light, the rim, the
+ * interaction-light) with zero duplicate paint. This keeps the historical
+ * opt-in call sites (Card.vue, any consumer that still reaches for the class)
+ * painting the catch-light without a legacy shim — the alias is a live
+ * composition onto the unified mixin, not a dead orphan.
  *
- * The pointer-position WRITE (`--mouse-x` / `--mouse-y`) is the consumer's seam
- * (DockIconButton wires it; Button glass + Card hover opt in). The CSS half —
- * the masked radial, the reduced-motion static bracket, the var() fallback, the
- * @supports-gated refraction garnish — is the deliverable here.
+ * This file carries ONLY:
+ *   1. The reduced-motion + reduced-transparency a11y brackets, pointed at the
+ *      `.glass-material` group (the canonical specular owner) so the guards
+ *      cover every band surface, not just the opt-in class.
+ *   2. The `@supports`-gated `#glass-refract` refraction garnish — RE-HOMED at
+ *      AW.W23 off the (now-folded) `.glass-specular-track.glass-refract`
+ *      compound onto `.glass-material.glass-refract` (see glass-refract.css for
+ *      the shipped filter asset + the re-homed consuming selector).
  */
 
-@layer components {
-    /* The opt-in class. A `::before` pseudo carries the moving catch-light so it
-       composes over the host's own glass background/blur without a second
-       backdrop-filter (no glass-on-glass — the specular is a LIGHT layer, not a
-       second plate). The host need not be positioned-relative by us; the five
-       glass tiers + the dock + Button already mint `position: relative`. */
-    .glass-specular-track::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); those are UNREGISTERED custom properties, so they inherit
-           down to this `::before` naturally. The registered `--specular-*`
-           props are `inherits: false` (per-surface ownership), which means a
-           `::before` does NOT see a value set on its originating element — so
-           the mapping must be declared HERE, on the pseudo, where it owns its
-           own typed value. The `var(--mouse-x, 50%)` floor is the centred
-           fallback: an engine that never receives a pointer write paints a
-           centred catch-light, never a broken/absent one. */
-        --specular-x: var(--mouse-x, 50%);
-        --specular-y: var(--mouse-y, 50%);
-        /* The catch-light intensity floor at rest; hover/active lift it (the
-           pseudo-targeting rules below). Registered `<number>`, so the layer
-           opacity it drives interpolates smoothly. */
-        --specular-intensity: 0.35;
-        /* The travelling catch-light. A soft circular glow centred on the
-           tracked pointer position; the warm-white tint keeps the warm-cream
-           identity (NOT iOS blue). The gradient carries FIXED stop alphas — the
-           `--specular-intensity` multiplier drives the layer `opacity` below
-           (NOT a `calc()` in the stop alpha: a registered-`@property` `var()`
-           nested in `calc()` inside an `hsl()` alpha inside a gradient does not
-           substitute in Chromium — it computes to 0. Driving the whole layer's
-           `opacity` is both correct AND the cleaner model — intensity IS a
-           layer brightness, not a per-stop axis). */
-        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 (the "light travels
-           AROUND the material" read). `mask-image` Baseline 2023-12-07; a
-           non-supporting engine ignores it and the `inset: 0` + radius-inherit
-           already bound the glow to the host rectangle. */
-        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` registrations make the percentage stops interpolable, so
-           the catch-light position SETTLES rather than snapping frame-to-frame;
-           the intensity rides the layer `opacity` transition. */
-        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-specular-track::before {
-        /* Softer over the deep canvas — the screen blend lifts harder on dark. */
-        --specular-intensity: 0.22;
-    }
-
-    /* Hover/active lift the intensity — the "illuminate under your fingertip"
-       brighten on engagement; settles back on leave via the opacity transition
-       above. The rules target the `::before` (the intensity lives on the pseudo
-       — see the mapping note above). */
-    .glass-specular-track:hover::before {
-        --specular-intensity: 0.6;
-    }
-    .glass-specular-track:active::before {
-        --specular-intensity: 0.85;
-    }
-}
-
 /* ── Reduced-motion: pin the specular STATIC ───────────────────────────────
    The MANDATORY guard. Under `prefers-reduced-motion: reduce` the catch-light
-   paints static at rest position — no pointer-tracking (the position pins to
-   centre, ignoring the consumer's `--mouse-x/--mouse-y` write), no transition
-   animation. The centred catch-light + the warm-cream tint survive; only the
-   MOTION is removed. The pin + the `transition: none` live on the `::before`
-   (where the typed `--specular-*` props are owned), overriding the pointer-map
-   above by order — the `var(--mouse-x)` write is ignored, the catch-light pins
-   centred. */
+   paints static at rest position — no pointer-tracking, no transition. The pin
+   covers the unified `.glass-material` group AND the `.glass-specular-track`
+   alias so EVERY band surface (not just the opt-in class) freezes the position
+   while keeping the centred catch-light + the warm-cream tint. */
 @media (prefers-reduced-motion: reduce) {
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .dock-icon-button::before,
     .glass-specular-track::before {
         --specular-x: 50%;
         --specular-y: 50%;
@@ -125,30 +50,18 @@
 /* ── Reduced-transparency: drop the specular ───────────────────────────────
    When the user requests reduced transparency the surface goes opaque (the
    glass.css bracket maps the blurs to `none`); a travelling catch-light on a
-   flat opaque surface is decoration without substrate, so it drops too. */
+   flat opaque surface is decoration without substrate, so it drops too — across
+   the whole material group. */
 @media (prefers-reduced-transparency: reduce) {
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .dock-icon-button::before,
     .glass-specular-track::before {
         display: none;
     }
 }
-
-/* ── feDisplacementMap refraction garnish — PE-only, @supports-gated ────────
-   True SVG `feDisplacementMap` lensing (`backdrop-filter: url(#…)`) is
-   Chromium-only (WebKit bug #245510, Firefox not shipping) and resize-
-   expensive. It lands ONLY as a progressive-enhancement garnish layered OVER
-   the blur base, NEVER the substrate — gated `@supports (backdrop-filter:
-   url(#…))` so a non-supporting engine paints the blur base alone (no broken
-   `url(#…)` reference). A consumer opts a glass surface into the refraction by
-   adding `.glass-refract` AND mounting the named SVG filter; the gate asserts
-   the garnish never reaches the substrate. The blur base paints WITHOUT it. */
-@supports (backdrop-filter: url("#glass-refract")) {
-    @layer components {
-        .glass-specular-track.glass-refract {
-            /* The garnish composes the consumer-mounted `#glass-refract` SVG
-               filter OVER the host's existing blur. It is additive — the host's
-               `backdrop-filter` blur already painted; this only sharpens the
-               refraction edge where the engine supports it. */
-            backdrop-filter: var(--glass-blur-resting) url("#glass-refract");
-        }
-    }
-}

package/dist/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/dist/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/dist/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).
@@ -44,8 +47,20 @@
     --radius-dialog:  var(--radius-2xl);
     --radius-input:   var(--radius);
     --radius-button:  var(--radius);
+    /* AW.W25 — form-radius unification. `--radius-field` is the non-pill field
+       rung the multi-line / stepper form atoms (Textarea, NumberFieldInput)
+       resolve so a multi-line box stops inheriting the `9999px` stadium pill;
+       single-line controls (Input, SelectTrigger) keep the pill. `--radius-control`
+       is the semantic control-corner rung that retires the raw `rounded-sm` (4px)
+       on Checkbox + base Tabs onto a softer, named radius. One geometry language
+       across the form family — token + class only, no new primitive. */
+    --radius-field:   var(--radius-2xl);
+    --radius-control: var(--radius-md);
     --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);
 }
 
@@ -410,6 +425,46 @@
        ═══════════════════════════════════════════════ */
     --opacity-disabled:   0.5;
     --opacity-icon-muted: 0.8;
+
+    /* ═══════════════════════════════════════════════
+       text-shadow → text-shadow-* utilities (AW.W26)
+
+       text-shadow is the lone shadow family that shipped no `@theme` bridge
+       (Tailwind v4.1 minted the `text-shadow-{2xs,xs,sm,md,lg}` utilities). The
+       rungs are warm-`--shadow-color`-derived via `color-mix` per the box-shadow
+       ladder (tokens.css §7) + the cartoon-shadow precept's one-source chain, so
+       they re-tint under `.dark` BY CONSTRUCTION — `--shadow-color: var(--foreground)`
+       flips light→dark with no hardcoded `.dark` re-declaration. The hand-rolled
+       multi-stop `text-shadow:` literals in `.depth-text` (utilities.css) +
+       `.text-engraved` (typography.css) now compose these tokens. */
+    --text-shadow-2xs: 0 1px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --text-shadow-xs:  0 1px 1px color-mix(in srgb, var(--shadow-color) 16%, transparent);
+    --text-shadow-sm:  0 1px 0 color-mix(in srgb, var(--shadow-color) 14%, transparent),
+                       0 2px 3px color-mix(in srgb, var(--shadow-color) 18%, transparent);
+    --text-shadow-md:  0 1px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent),
+                       0 2px 4px color-mix(in srgb, var(--shadow-color) 20%, transparent),
+                       0 4px 8px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --text-shadow-lg:  0 1px 0 color-mix(in srgb, var(--shadow-color) 18%, transparent),
+                       0 2px 4px color-mix(in srgb, var(--shadow-color) 22%, transparent),
+                       0 6px 12px color-mix(in srgb, var(--shadow-color) 18%, transparent);
+
+    /* Two IDENTITY text-shadow tokens — the hard offset STAMP (`.depth-text`)
+       + the two-stop EMBOSS (`.text-engraved`). These hold the multi-stop
+       literals INSIDE the `@theme` defs so the utilities compose `var(--text-shadow-*)`
+       and no raw `text-shadow:` literal survives in `utilities.css`/`typography.css`
+       (AW.W26 gate 4). Both are `--shadow-color`/surface-tint-derived, so they
+       re-tint under `.dark` BY CONSTRUCTION. */
+    --text-shadow-depth: 1px 1px 0 var(--shadow),
+                         2px 2px 0 var(--shadow),
+                         3px 3px 0 var(--shadow),
+                         4px 4px 0 var(--shadow),
+                         5px 5px 0 var(--shadow),
+                         5px 5px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+                         2px 2px 2px color-mix(in srgb, var(--shadow-color) 20%, transparent),
+                         4px 4px 5px color-mix(in srgb, var(--shadow-color) 25%, transparent),
+                         6px 6px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+    --text-shadow-engraved: 0 1px 0 color-mix(in srgb, var(--background) 30%, transparent),
+                            0 -1px 0 var(--surface-tint-8);
 }
 
 /* Class-based dark mode */