@mkbabb/glass-ui 2.1.0 → 3.1.0

package/dist/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/dist/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/dist/styles/instrument-chassis.css

@@ -292,7 +292,34 @@
     @media (max-width: 720px) {
         .instrument-chassis .instrument-dial {
             grid-template-columns: 1fr;
-            grid-template-rows: auto auto auto;
+            /* R0G-2 (AO.W3) — reserve the dial's FINAL box from frame 0. The
+               desktop axis is already CLS-clean (the 3-column `align-items:
+               center` grid reserves row height from intrinsic min + the AP-Pγ
+               transform-only idle recentre). The mobile reflow previously
+               collapsed to `grid-template-rows: auto auto auto`, which reserves
+               NO height — the meter row, divider, and readout column sit at
+               zero height until the consumer's meter <canvas> + readout
+               numbers hydrate, then grow collapsed → final and push everything
+               below down ~326-331px → mobile-390 CLS 0.32-0.38.
+
+               The fix pins the dial box from frame 0: the meter row carries the
+               dominant reserve (`minmax(0, 1fr)` — it expands to fill the
+               envelope the `min-height` establishes), divider + readout stay
+               intrinsic (`auto`). The load-bearing reserve is `min-height` —
+               it fixes the dial's outer box so the rows distribute WITHIN a
+               reserved envelope rather than growing it post-hydration.
+
+               Both knobs are CSS custom properties (token-first). The
+               `--instrument-dial-min-height-mobile` canonical rung lands in
+               tokens.css at AO.W4; until then the inline `24rem` fallback IS
+               the default and carries the contract. A consumer whose meter is
+               a different size retunes the token — a tuning knob, not a
+               workaround for a missing reserve. */
+            grid-template-rows:
+                var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr))
+                auto
+                auto;
+            min-height: var(--instrument-dial-min-height-mobile, 24rem);
             gap: var(--instrument-dial-gap-mobile, 1.5rem);
         }
 

package/dist/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/dist/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);
@@ -81,6 +84,9 @@
     --color-card: var(--card);
     --color-card-foreground: var(--card-foreground);
 
+    /* R0G-5 — bg-surface-public-data-panel utility. */
+    --color-surface-public-data-panel: var(--surface-public-data-panel);
+
     --color-shadow: var(--shadow);
 
     /* Semantic foregrounds — bg-{success,warning,info}-foreground +