@mkbabb/glass-ui 3.0.0 → 3.1.0

package/dist/useUserInvalidAria-DVu1eTXG.js

@@ -0,0 +1,29 @@
+//#region src/composables/dom/useUserInvalidAria.ts
+function e() {
+	return typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("selector(:user-invalid)");
+}
+function t(t = {}) {
+	let n = t.fallbackClasses ?? !e();
+	return { bind: (e) => {
+		let t = /* @__PURE__ */ new WeakSet(), r = (e) => {
+			let t = e;
+			if (!t?.checkValidity) return;
+			let r = t.checkValidity();
+			t.setAttribute("aria-invalid", r ? "false" : "true"), n && (t.classList.toggle("user-invalid-fallback", !r), t.classList.toggle("user-valid-fallback", r));
+		}, i = (e) => {
+			let n = e.target;
+			n?.checkValidity && (t.add(n), r(n));
+		}, a = (e) => {
+			let n = e.target;
+			!n?.checkValidity || !t.has(n) || n.checkValidity() && r(n);
+		}, o = () => {
+			let n = e.querySelectorAll("input, textarea, select");
+			for (let e of n) e.checkValidity && (t.add(e), r(e));
+		};
+		return e.addEventListener("blur", i, !0), e.addEventListener("input", a, !0), e.addEventListener("submit", o, !0), () => {
+			e.removeEventListener("blur", i, !0), e.removeEventListener("input", a, !0), e.removeEventListener("submit", o, !0);
+		};
+	} };
+}
+//#endregion
+export { t };

package/dist/useViewTransition-DYIK6Gzb.js

@@ -0,0 +1,16 @@
+//#region src/composables/motion/useViewTransition.ts
+function e() {
+	return typeof document < "u" && typeof document.startViewTransition == "function";
+}
+function t(e) {
+	let t = typeof document > "u" ? void 0 : document;
+	return !t || typeof t.startViewTransition != "function" ? (e(), {
+		finished: Promise.resolve(),
+		transitioned: !1
+	}) : {
+		finished: t.startViewTransition(() => e()).finished.then(() => void 0, () => void 0),
+		transitioned: !0
+	};
+}
+//#endregion
+export { e as n, t };

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { cn } from "./cn";
+export { moveBeforeSafe, supportsMoveBefore } from "./moveBefore";

package/dist/utils/moveBefore.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Move `node` into `parent` immediately before `ref` (or to the end when `ref`
+ * is `null`), preserving the node's live state when `Element.moveBefore` is
+ * supported, and falling back to `insertBefore` otherwise.
+ *
+ * @param parent the destination parent element.
+ * @param node   the node to move (may currently live elsewhere in the tree).
+ * @param ref    the child to insert before, or `null` to append.
+ */
+export declare function moveBeforeSafe(parent: Element, node: Node, ref: Node | null): void;
+/**
+ * True when `Element.moveBefore` is available — the feature-detected predicate
+ * for consumers that want to branch their own re-parent logic.
+ */
+export declare function supportsMoveBefore(): boolean;

package/dist/{x-Cb3NE2Ne.js → x-q7pJa83X.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-rHu18UQW.js";
+import { t as e } from "./createLucideIcon-Bn9a1b70.js";
 var t = e("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "type": "module",
@@ -201,6 +201,12 @@
             ],
             "command": [
                 "dist/command.d.ts"
+            ],
+            "number-field": [
+                "dist/number-field.d.ts"
+            ],
+            "switch": [
+                "dist/switch.d.ts"
             ]
         }
     },
@@ -476,6 +482,14 @@
         "./command": {
             "types": "./dist/command.d.ts",
             "import": "./dist/command.js"
+        },
+        "./number-field": {
+            "types": "./dist/number-field.d.ts",
+            "import": "./dist/number-field.js"
+        },
+        "./switch": {
+            "types": "./dist/switch.d.ts",
+            "import": "./dist/switch.js"
         }
     },
     "files": [
@@ -518,7 +532,7 @@
     },
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.1.1",
+        "@mkbabb/keyframes.js": "^2.2.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",
@@ -534,7 +548,7 @@
     },
     "devDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.1.1",
+        "@mkbabb/keyframes.js": "^2.2.0",
         "@mkbabb/value.js": "^0.10.0",
         "@tailwindcss/postcss": "^4.3.0",
         "@tailwindcss/vite": "^4.3.0",

package/src/styles/animations.css

@@ -296,3 +296,80 @@
         animation: none;
     }
 }
+
+/* ── §TOP-LAYER ENTRY/EXIT (AQ.W5 §Design 2) ───────────────────────────────
+ *
+ * A pure-CSS entry/exit grammar for NATIVE top-layer surfaces — `[popover]`
+ * elements and native `<dialog>` — keyed off `:popover-open` / `dialog[open]`,
+ * plus a glass `::backdrop`. This replaces the per-frame inline-style entry the
+ * platform now owns: `@starting-style` + `transition` + `transition-behavior:
+ * allow-discrete` + `overlay`.
+ *
+ * SCOPE: this applies ONLY to elements tagged `.glass-top-layer`. It does NOT
+ * touch reka-ui's portaled overlays — those keep their `tw-animate-css`
+ * data-state fade (distinct selectors, no cascade fight, mirroring the
+ * `[data-scrim-animation]` discipline above). `DialogContent`'s `spring` opt-in
+ * (`useSpringMount`) is also untouched — a legitimate iOS-physics variant, not a
+ * duplicate of this fade.
+ *
+ * Baseline: `@starting-style` = Widely Available; `transition-behavior:
+ * allow-discrete` + `overlay` = Newly Available → adopt natively, gate the
+ * whole grammar on `@supports (overlay: auto)`. A non-supporting engine shows
+ * the element instantly (acceptable for a native top-layer surface; glass-ui
+ * ships no JS top-layer coordinator — that is reka-ui Dialog's remit).
+ *
+ * Uses `scale:` (the longhand) not `transform: scale()` so it composes with the
+ * identity-base transform work and does not mint a stacking context. Every
+ * visual axis reads a `--top-layer-*` token (tokens.css §20).
+ */
+@supports (overlay: auto) {
+    /* Base (closed / exit) + the transition list. `allow-discrete` MUST come
+     * after the property longhands, never negated. */
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        opacity: 0;
+        scale: var(--top-layer-enter-scale, 0.96);
+        transition-property: opacity, scale, display, overlay;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-apple-spring);
+        transition-behavior: allow-discrete;
+    }
+
+    /* Open state + `@starting-style` entry (starting-style AFTER the open
+     * selector so the entry interpolates from the closed values). */
+    .glass-top-layer[popover]:popover-open,
+    dialog.glass-top-layer[open] {
+        opacity: 1;
+        scale: 1;
+        @starting-style {
+            opacity: 0;
+            scale: var(--top-layer-enter-scale, 0.96);
+        }
+    }
+
+    /* Glass backdrop — blur + dim, animated discretely. `::backdrop` only
+     * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
+     * non-modal — correct, no scrim). */
+    dialog.glass-top-layer::backdrop {
+        background-color: hsl(var(--background) / 0);
+        backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
+        transition: display var(--duration-normal) allow-discrete,
+                    overlay var(--duration-normal) allow-discrete,
+                    background-color var(--duration-normal) var(--ease-standard);
+    }
+    dialog.glass-top-layer[open]::backdrop {
+        background-color: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        @starting-style {
+            background-color: hsl(var(--background) / 0);
+        }
+    }
+}
+
+/* Reduced-motion carve — flatten the scale to a fade, shorten the duration. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        scale: none;
+        transition-duration: var(--duration-fast);
+    }
+}

package/src/styles/cards.css

@@ -33,12 +33,16 @@
 @utility cartoon-surface {
     border-width: 2px;
     box-shadow: var(--shadow-cartoon-md);
+    /* Individual-transform identity base (AQ.W3 §W3.2) — state-driven 2D lift on
+       a card surface that often hosts portaled content; `translate: 0` at rest
+       mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
+    translate: 0;
     transition:
-        transform var(--duration-normal) var(--ease-apple-spring),
+        translate var(--duration-normal) var(--ease-apple-spring),
         box-shadow var(--duration-normal) var(--ease-apple);
 
     &:hover:not(:disabled) {
-        transform: translate(var(--lift-sm), var(--lift-sm));
+        translate: var(--lift-sm) var(--lift-sm);
         box-shadow: var(--shadow-cartoon-lg);
     }
 }

package/src/styles/dock.css

@@ -56,6 +56,11 @@
         --dock-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
+           mints the stacking context once so a portaled popover over `--z-dock`
+           stays above the dock during a hover scale (the load-bearing
+           stacking-context guarantee). Covers every dock scale site. */
+        scale: 1;
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -308,7 +313,7 @@
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
         box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-        transform: scale(var(--dock-collapsed-hover-scale));
+        scale: var(--dock-collapsed-hover-scale);
     }
 
     /* J.W5.C — held-state substrate response.
@@ -331,6 +336,15 @@
             box-shadow var(--duration-fast) var(--ease-standard);
     }
 
+    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
+       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
+       read natively (no consumer JS). Idempotent with `[data-held]` above (same
+       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
+    .glass-dock:has([data-state="open"]) {
+        background: var(--glass-bg-floating, var(--glass-bg-resting));
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+    }
+
     .glass-dock:where(.fixed) {
         z-index: var(--z-dock);
     }
@@ -647,6 +661,8 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
         padding: var(--dock-icon-padding, 0);
@@ -659,7 +675,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -673,11 +689,11 @@
     .dock-icon-button:hover:not(:disabled) {
         background: var(--muted);
         color: var(--btn-hover-color, var(--foreground));
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-icon-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-icon-button:focus:not(:focus-visible) {
@@ -691,7 +707,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
@@ -705,7 +721,7 @@
     .dock-icon-button:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
         background: var(--dock-active-bg);
         color: var(--dock-active-color);
-        transform: scale(var(--dock-active-scale));
+        scale: var(--dock-active-scale);
         border: var(--dock-active-border);
         box-shadow: var(--dock-active-shadow);
     }
@@ -809,10 +825,12 @@
         cursor: pointer;
         white-space: nowrap;
         outline: none;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast);
+            scale var(--dock-motion-fast);
     }
 
     .dock-tab-button:hover:not(:disabled) {
@@ -821,7 +839,7 @@
     }
 
     .dock-tab-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-tab-button:focus:not(:focus-visible) {
@@ -938,6 +956,8 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         gap: var(--dock-trigger-gap, 0.25rem);
         min-height: var(--dock-trigger-min-height, auto);
         padding:
@@ -953,7 +973,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -964,12 +984,12 @@
     }
 
     .dock-dropdown-trigger:hover:not(:disabled) {
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-select-trigger:focus:not(:focus-visible),
@@ -985,7 +1005,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
@@ -1001,11 +1021,14 @@
         height: var(--dock-trigger-icon-size, 0.75rem);
         flex-shrink: 0;
         opacity: 0.5;
-        transition: transform var(--dock-motion-fast);
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
+           for family consistency (not a stacking-context hazard: child glyph). */
+        rotate: 0deg;
+        transition: rotate var(--dock-motion-fast);
     }
 
     .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
-        transform: rotate(180deg);
+        rotate: 180deg;
     }
 
     @media (min-width: 640px) {

package/src/styles/glass.css

@@ -101,13 +101,30 @@
        Interactive cards live in <Card> (which owns its own hover composition)
        or in components that explicitly opt into a hover variant. */
     .glass-card {
+        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
+           `:has(:focus-visible)` rule redefines them (one source, shared with
+           the fallback). */
+        --card-focus-shadow: var(--shadow-card);
+        --card-focus-border: var(--glass-border-quiet);
         position: relative;
         background: var(--glass-bg-quiet);
         backdrop-filter: var(--glass-blur-quiet);
-        border: 1px solid var(--glass-border-quiet);
+        border: 1px solid var(--card-focus-border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-card);
+        box-shadow: var(--card-focus-shadow);
         contain: layout style;
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
+       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
+       `@supports not selector(:has(*))` class fallback (below) ships anyway
+       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+    .glass-card:has(:focus-visible) {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
     }
 
     /* ── Glassmorphic circular icon button ── */
@@ -115,6 +132,10 @@
     .glass-btn {
         @apply flex items-center justify-center cursor-pointer;
 
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
+           mints the stacking context once so the hover/press scale below does
+           not flicker it into being (the z-index/anchor hazard). */
+        scale: 1;
         width: var(--size-icon-btn);
         height: var(--size-icon-btn);
         border-radius: var(--radius-pill);
@@ -126,18 +147,18 @@
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-normal) var(--spring-snappy);
+            scale var(--duration-normal) var(--spring-snappy);
     }
 
     .glass-btn:hover:not(:disabled) {
         background: color-mix(in srgb, var(--background) 85%, transparent);
         border-color: var(--surface-tint-22);
         color: var(--foreground);
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 
     .glass-btn:active:not(:disabled) {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
 
     .glass-btn:focus-visible {
@@ -210,12 +231,60 @@
         color: var(--surface-tint-35);
     }
 
-    .input-pill:focus {
+    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
+       accent ring on a mouse click); `:focus-visible` matches the
+       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
+       the `:user-invalid` rungs so an invalid focused field shows destructive,
+       not accent (the `:user-invalid:focus-visible` rule below wins by order +
+       specificity). `:focus-visible` Baseline Widely — no fallback. */
+    .input-pill:focus-visible {
         outline: none;
         border-color: var(--color-accent-opaque, var(--ring));
         box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
     }
 
+    /* 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
+       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) {
+        border-color: var(--destructive);
+        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
+    }
+    .input-pill:where(:user-valid, .user-valid-fallback) {
+        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 {
+        border-color: var(--destructive);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+            color-mix(in srgb, var(--destructive) 35%, transparent);
+    }
+
+    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
+       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
+       content between a 3-line floor and a token-driven ceiling, then scrolls.
+       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
+       engine the declaration is ignored and the element keeps the
+       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
+       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
+       the unchanged no-op fallback. */
+    .input-pill[data-autosize] {
+        field-sizing: content;
+        width: 100%;
+        min-block-size: 3lh;
+        max-block-size: var(--textarea-autosize-max, 12lh);
+        resize: vertical;
+    }
+
     .input-pill:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -275,3 +344,17 @@
         }
     }
 }
+
+/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
+   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
+   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
+   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
+   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
+   override values have one source. NOT a live+dead alias — `:has()` is the
+   enhancement, this the documented degradation path. */
+@supports not selector(:has(*)) {
+    .glass-card.is-focus-within {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+}

package/src/styles/index.css

@@ -63,7 +63,14 @@
  *                              pop, dialog-scale, dropdown, tab-fade).
  *  10. animations.css        — @keyframes for components consumed via
  *                              `animation:` properties in (9) and component
- *                              <style> blocks.
+ *                              <style> blocks. Includes the §TOP-LAYER
+ *                              `@starting-style` entry/exit grammar (AQ.W5).
+ *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
+ *                              + [data-scroll-reveal]); the `@supports`-gated
+ *                              primary over the JS-composable fallback (AQ.W5).
+ *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
+ *                              recipe + `--vt-*` axes (AQ.W5; the
+ *                              `useViewTransition` substrate's CSS half).
  *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
  *                              (press cluster; K W6 + Q.W3 Lane E),
  *                              rainbow-vivid + rainbow-pastel. Consumes earlier
@@ -95,6 +102,8 @@
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
+@import "./scroll-driven.css";
+@import "./view-transition.css";
 @import "./utilities.css";
 @import "./instrument-chassis.css";
 @import "./instrument-rail.css";

package/src/styles/scroll-driven.css

@@ -0,0 +1,72 @@
+/*
+ * scroll-driven.css — native scroll-driven CSS animations (AQ.W5 §Design 1).
+ *
+ * Cascade rung after animations.css. Two token-first recipe families that move
+ * the scroll-progress + stagger-reveal work OFF the main thread (the consumer
+ * INP lever): the browser runs them on the compositor instead of a rAF/IO
+ * listener loop in JS.
+ *
+ *   .scroll-progress      — a 0..1 scaleX bar driven by a `scroll()` timeline.
+ *                           The `useScrollProgress` composable replacement.
+ *   [data-scroll-reveal]  — fade + lift on entry, one `view()` timeline PER
+ *                           child (the stagger is implicit — no setTimeout
+ *                           cascade). The `useStaggerReveal` composable
+ *                           replacement.
+ *
+ * DUAL-PATH with a SINGLE writer (no double-run): when the engine supports
+ * `animation-timeline`, the CSS here owns the visual axis and the composables
+ * gate their listener/observer machinery OFF (so CSS and JS never both write
+ * the same target). When the engine does NOT support it, this block is skipped
+ * by `@supports` and the composable is the sole writer. See the gate at the top
+ * of `useScrollProgress.ts` / `useStaggerReveal.ts`.
+ *
+ * Baseline: `scroll-driven-animations` = Newly Available → adopt CSS as
+ * primary, keep the composable as the ≤ 20-LOC feature-detected fallback.
+ *
+ * Reduced-motion is the OUTER gate: the whole `@supports` block sits under
+ * `prefers-reduced-motion: no-preference`, so under PRM no scroll animation
+ * attaches at all and content renders in its terminal state (the `from`
+ * keyframe is never applied because the animation never binds).
+ */
+
+/* ── Scroll progress (scroll() timeline) — drives a 0..1 scaleX bar.
+ * Consumers add `.scroll-progress` on a position:fixed/absolute element; the
+ * scroller is the nearest ancestor block scroller (`root` by default; override
+ * via `--scroll-progress-scroller`). */
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: scroll()) {
+        @keyframes gl-scroll-grow {
+            from { transform: scaleX(0); }
+            to   { transform: scaleX(1); }
+        }
+        .scroll-progress {
+            transform-origin: 0 50%;
+            animation: gl-scroll-grow auto linear;
+            animation-timeline: scroll(var(--scroll-progress-scroller, root) block);
+        }
+    }
+}
+
+/* ── View-driven entry (view() timeline) — the useStaggerReveal replacement.
+ * Each child of a `[data-scroll-reveal]` scroller fades + lifts on entry. The
+ * stagger is implicit in the per-element view-timeline (each child owns its
+ * own timeline), so NO setTimeout cascade is needed. Horizontal scrollers add
+ * `.scroll-reveal--inline` for a `view(inline)` axis. */
+@media (prefers-reduced-motion: no-preference) {
+    @supports ((animation-timeline: view()) and (animation-range: entry)) {
+        @keyframes gl-reveal-in {
+            from {
+                opacity: 0;
+                transform: translateY(var(--scroll-reveal-rise, 6px));
+            }
+        }
+        [data-scroll-reveal] > * {
+            animation: gl-reveal-in auto linear both;
+            animation-timeline: view(block);
+            animation-range: entry 0% entry var(--scroll-reveal-range-end, 60%);
+        }
+        [data-scroll-reveal].scroll-reveal--inline > * {
+            animation-timeline: view(inline);
+        }
+    }
+}

package/src/styles/theme.css

@@ -55,6 +55,9 @@
        Colors — core
        ═══════════════════════════════════════════════ */
     --color-border: var(--border);
+    /* AQ.W2 §3d — the whisper-alpha border hairline rung (border-border-soft /
+       bg-border-soft utilities). Auto-dark via --border. */
+    --color-border-soft: var(--border-soft);
     --color-input: var(--input);
     --color-ring: var(--ring);
     --color-background: var(--background);