@mkbabb/glass-ui 3.13.0 → 4.0.0

package/dist/styles/utilities/base.css

@@ -1,7 +1,45 @@
 /* utilities/base.css
-   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, deferred-section, scroll-timeline host, shimmer text, keyboard key.
+   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, fading-scroll (scroll-state-driven edge fade), deferred-section, scroll-timeline host, shimmer text, keyboard key.
    Carved from the utilities.css cascade root; @import-ed by utilities.css in
    cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+/* ═══════════════════════════════════════════════
+   §FADING-SCROLL — the per-edge mask-width interpolation customs (BA.W-FADING-SCROLL)
+
+   `<FadingScroll>`'s scroll-state-driven edge fade is a `mask-image` whose two
+   per-edge ramp widths are these registered `@property <length-percentage>`
+   customs. Registered (not bare custom props) so they INTERPOLATE smoothly off
+   the `scroll(self)` timeline below — an unregistered custom would jump between
+   the textual `0px` / `var(--fade-scroll-width)` endpoints rather than feathering.
+   `inherits: false`: each scroll port owns its own edge state (an ancestor must
+   never push a fade-width onto an unrelated descendant strip — mirrors the
+   `--progress-crescendo` / `--ripple-radius` non-inheriting registrations).
+   `initial-value: 0px` = the SHARP floor: an at-rest, no-overflow edge has NO
+   feather (the R8-08 "Shy" defect — the static `.scroll-fade-*` mask half-erased
+   the first card's chrome at rest — is structurally impossible because the
+   default is sharp and the timeline OPENS the feather only on real scroll).
+
+   These customs are INTERNAL (not a public token). The public knob is
+   `--fade-scroll-width` (offsets-sizing.css). Co-registered HERE (the consuming
+   CSS file) per the `@property --dock-morph-t` in dock.css precedent — a
+   component's typed property rides its own recipe file.
+
+   Co-written by the `useFadingScroll` JS fallback (the dual-path single writer):
+   the native `scroll(self)` timeline below owns these customs on a supporting
+   engine, the composable writes the SAME two customs when it is absent. Never
+   both — the composable feature-detect-gates OFF under timeline support.
+   ═══════════════════════════════════════════════ */
+@property --fade-start {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0px;
+}
+@property --fade-end {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0px;
+}
+
 @layer components {
     /* ── Section description (V.W3.T7) ──────────────────────────────
        Canonical recipe for the `<Section>` primitive's description
@@ -40,6 +78,23 @@
        without `:has()`/`:user-invalid` (not a live+dead alias). */
     .labeled-field {
         --field-label-color: var(--muted-foreground);
+        /* THE WIDTH CONTRACT (BA.W-CONFIG-CHASSIS.1, S1 / CFG-1). The
+           labeled-field root claims FULL inline width + lays its label/control
+           stack out as a column, so a slotted control (a Slider whose inner
+           `.glass-slider` resolves `width: 100%`) has a DEFINITE width to
+           resolve against — never the content-sized 0 the bare `display:block`
+           default produced inside the configurator row's flex slot. This is the
+           half that survives the `hide-label` register: with the visible label
+           rendered `sr-only`, the label was the only intrinsic width
+           contributor, so the field collapsed; `width:100%` makes the field own
+           its inline axis regardless of label visibility. `min-width:0` lets it
+           shrink below content min inside a constrained row. Standalone use is
+           unaffected (a `<LabeledField>` outside a flex parent fills its block
+           container exactly as the prior `display:block` did). */
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        min-inline-size: 0;
     }
     .labeled-field:has(:user-invalid),
     .labeled-field.has-error {
@@ -284,6 +339,127 @@
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
+    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
+       `<FadingScroll>`'s recipe. SUPERSEDES the scroll-BLIND `.scroll-fade-*`
+       masks above (which feathered both edges unconditionally — the R8-08 "Shy"
+       defect). Here each edge's ramp width is a registered `--fade-start` /
+       `--fade-end` custom (above, default 0px = SHARP), driven by the
+       `scroll(self)` timeline so the start edge feathers only past `scroll > 0`
+       and the end edge only while trailing overflow remains.
+
+       The root IS the scroll port (the component sets overflow via the consumer's
+       utilities — `overflow-x-auto` / `overflow-y-auto` come from the class the
+       consumer passes; the axis floor below sets the OTHER axis). The 4-stop
+       mask reads the two customs; at rest both are 0px so the gradient is a flat
+       opaque pass-through (no feather). */
+    .fading-scroll {
+        /* The base mask is axis-specialized by the modifier classes below. The
+           default-x case uses the inline ramp; the y case the block ramp. */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--x {
+        overflow-x: auto;
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--y {
+        overflow-y: auto;
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+
+    /* The NATIVE primary path: drive the per-edge customs off a `scroll(self)`
+       timeline — ZERO JS on a supporting engine (the `scroll-driven.css` /
+       Baseline-Newly-Available bar). UNLIKE `scroll-driven.css` this is NOT
+       wrapped in `prefers-reduced-motion: no-preference` — the fade is a
+       LEGIBILITY cue, not motion, so it stays present under PRM (it merely stops
+       interpolating; the discrete overflow-edge presence stays correct, and the
+       registered customs make even the static endpoints land right). */
+    @supports (animation-timeline: scroll()) {
+        /* The start edge: from sharp (0) to feathered, completing within the
+           first `--fade-scroll-width` of scroll — so at `scroll = 0` the start is
+           SHARP and it ramps in only once the user genuinely scrolls past. */
+        @keyframes gl-fade-start-in {
+            from {
+                --fade-start: 0px;
+            }
+            to {
+                --fade-start: var(--fade-scroll-width);
+            }
+        }
+        /* The end edge: feathered while trailing overflow remains, ramping OUT to
+           sharp over the last `--fade-scroll-width` of scroll — so at the scroll
+           end (no trailing overflow) the end is SHARP. */
+        @keyframes gl-fade-end-out {
+            from {
+                --fade-end: var(--fade-scroll-width);
+            }
+            to {
+                --fade-end: 0px;
+            }
+        }
+        /* x axis — `scroll(self inline)`; two animations on the ONE element, each
+           gated by `animation-range` to the start / end sliver of the scroll
+           distance. `fadeStart`/`fadeEnd` props toggle their respective
+           animation off via the `[data-fade-*]` presence attrs. */
+        .fading-scroll--x[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--x[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* BOTH edges on one element compose as two named animations. */
+        .fading-scroll--x[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline), scroll(self inline);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* y axis — `scroll(self block)`. */
+        .fading-scroll--y[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self block);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--y[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self block);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        .fading-scroll--y[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self block), scroll(self block);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+    }
+
     /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
        `content-visibility: auto` skips layout/paint/style of an offscreen
        subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).

package/dist/styles/utilities/btn.css

@@ -1,5 +1,5 @@
 /* utilities/btn.css
-   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, btn-audacious + btn-audacious-gold (+ the btn-gold-bg-sweep keyframes), table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive.
+   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive. (The btn-audacious/btn-audacious-gold disco recipes + the btn-gold-bg-sweep keyframes were RETIRED at BA.W-GLASS-CAL.)
    Carved from the utilities.css cascade root; @import-ed by utilities.css in
    cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
 /* ── Hover scale (O.W6 Lane C) ──
@@ -18,7 +18,7 @@
        (the settle register), NOT the bezier `--ease-standard` (a transform on a
        bezier reads mechanical; springs read alive on transform). */
     scale: 1;
-    transition: scale var(--duration-fast) var(--spring-smooth);
+    transition: scale var(--spring-smooth-duration) var(--spring-smooth);
 
     &:hover {
         scale: var(--scale-hover);
@@ -81,203 +81,20 @@
            data-[state=closed]:duration-[var(--duration-fast)];
 }
 
-/* ── Audacious primary CTA recipe ────────────────────────────────────────
-   Composes three at-rest marks (top-highlight via --glass-highlight, bottom
-   under-shadow via --border-hairline, baseline glass) with three disco accents
-   on hover (specular swap via --glass-specular, sparkle sweep via the ::after
-   star, disco-grain via --paper-clean-texture blended with a --primary radial).
-   Disco fires on hover only — at rest the button reads as a restrained glass
-   surface. Pair with `bg-primary text-primary-foreground`; the utility owns
-   the texture/highlight/sparkle composition only. */
-@utility btn-audacious {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    border: 1px solid var(--glass-border-quiet);
-    box-shadow:
-        var(--border-hairline),
-        var(--glass-highlight);
-    transition:
-        background var(--duration-fast) var(--ease-standard),
-        color var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-standard),
-        box-shadow var(--duration-fast) var(--ease-standard),
-        --ripple-radius var(--motion-duration-ripple, 340ms) var(--ease-out-expo);
-
-    /* Hover composition: paper-grain texture overlaid on a soft
-       --primary radial, with the specular catch-light replacing the
-       resting hairline highlight. The radial uses --primary at 18%
-       — same alpha rung the dock primary tier consumes for phase
-       tinting, just bound to the canonical CTA color instead. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            radial-gradient(
-                ellipse at 30% 30%,
-                color-mix(in srgb, var(--primary) 18%, transparent),
-                transparent 70%
-            );
-        background-blend-mode: overlay, normal;
-        background-size: var(--paper-texture-size), auto;
-        box-shadow:
-            var(--glass-specular),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    /* AI.W4-M.2 (Q5 — G-AI-D27 ratified) — press-ripple via a typed
-       `--ripple-radius` length custom property. The `::before`
-       element paints a radial gradient whose stop radius equals the
-       typed length; the `:active` rule sets the length to the cap
-       (`--ripple-radius-max`, 12rem), and the host's transition
-       (above) interpolates the radius via the @property registration
-       (tokens.css §18). Release returns the length to its 0px initial
-       value and the ripple retires. The ripple paints at z-index 0
-       (above the host's background, below the slot content which sits
-       in the default 0 stacking context but with text inheriting the
-       slot's foreground colour). */
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        z-index: 0;
-        border-radius: inherit;
-        background: radial-gradient(
-            circle at center,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 35%, transparent) 0,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 18%, transparent)
-                calc(var(--ripple-radius, 0px) * 0.55),
-            transparent var(--ripple-radius, 0px)
-        );
-        transition: inherit;
-        will-change: background;
-    }
-
-    &:active:not(:disabled) {
-        --ripple-radius: var(--ripple-radius-max, 12rem);
-    }
-
-    /* Sparkle glyph — hidden at rest, animated on hover. The star
-       sweeps diagonally from top-left to bottom-right per the canonical
-       sparkle-sweep keyframe (animations.css). */
-    &::after {
-        content: "✦";
-        position: absolute;
-        top: 0.25rem;
-        left: 0.5rem;
-        color: hsl(0 0% 100% / 0.7);
-        font-size: 0.75rem;
-        line-height: 1;
-        pointer-events: none;
-        opacity: 0;
-        will-change: transform, opacity;
-        z-index: 1;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover::after {
-            animation: sparkle-sweep var(--duration-sparkle) var(--ease-out-expo);
-        }
-    }
-
-    /* PRM bracket — the press-ripple retires; the press still reads
-       via the audacious recipe's transform/scale beat (the ripple is
-       affirmation atop affirmation). */
-    @media (prefers-reduced-motion: reduce) {
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-
-        &:active:not(:disabled) {
-            --ripple-radius: 0px;
-        }
-    }
-}
-
-/* ── Gold CTA shimmer modifier — AN.R0 D9 ───────────────────────────────
-   `btn-audacious-gold` extends `btn-audacious` with a gold sweep shimmer
-   on hover. Pair as `btn-audacious btn-audacious-gold` (or use the Button
-   `variant="gold-audacious"` which composes both). The hover shimmer is a
-   translucent linear-gradient sweep (low alpha — tasteful, not garish)
-   that slides left-to-right via the existing `gold-shimmer-slide` keyframe
-   (animations.css). The gold gradient uses the canonical `--color-gold-*`
-   token triad (tokens.css §13).
-
-   Design register:
-   • PRM no-preference: shimmer sweeps continuously at `--duration-shimmer`
-     rate; the sparkle-sweep (from btn-audacious) coexists on hover.
-   • PRM reduce: static gold tint shows on hover; no animation.
-   • The gold shimmer is a background-image layer ABOVE the existing
-     btn-audacious paper-grain + primary-radial layers, blended with
-     `overlay` so the glass substrate reads through at partial opacity.
-   • The `::before` ripple and `::after` sparkle from btn-audacious are
-     unchanged; this modifier only retunes the hover background layers.
-   • Consumer applies: `<Button variant="gold-audacious">Next →</Button>` */
-@utility btn-audacious-gold {
-    /* At rest: a faint warm gold tint over the glass surface reads as "warm
-       glass" without announcing the hover state prematurely. */
-    background-image:
-        linear-gradient(
-            135deg,
-            color-mix(in srgb, var(--color-gold) 8%, transparent),
-            color-mix(in srgb, var(--color-gold-light) 5%, transparent) 50%,
-            color-mix(in srgb, var(--color-gold) 8%, transparent)
-        );
-
-    /* Hover: deepen the plate to a SATURATED gold the white label clears (AW.W13
-       names a "saturated gold backplate"; the D1 fix). The bottom layer is the
-       OPAQUE fixed deep gold (`--color-gold-deep`, mode-INVARIANT) — a solid plate
-       at ~6.5:1 (light) / ~5.5:1 (dark) against white, well below the ~0.18
-       luminance floor white text needs for ≥4.5:1 (was a translucent 22-30% wash
-       over near-cream glass → 1.29:1 white-on-pale-gold). The plate is FIXED-dark
-       in both modes — deepening toward the mode-flipping `--foreground` brightened
-       the dark plate to a cream-gold; `--color-gold-deep` does not flip. The
-       shimmer sweep rides ABOVE as a LOW-alpha gold gradient (normal blend, ≤18% —
-       it textures the plate without brightening it past the floor), and the
-       paper-grain overlays for the disco facet. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            linear-gradient(
-                90deg,
-                transparent 0%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 25%,
-                color-mix(in srgb, var(--color-gold) 18%, transparent) 50%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 75%,
-                transparent 100%
-            ),
-            linear-gradient(
-                135deg,
-                var(--color-gold-deep),
-                color-mix(in srgb, var(--color-gold-deep), var(--color-gold-dark) 18%) 50%,
-                var(--color-gold-deep)
-            );
-        background-blend-mode: overlay, normal, normal;
-        background-size: var(--paper-texture-size), 250% 100%, 100% 100%;
-        background-position: 0 0, 100% 0, 0 0;
-        box-shadow:
-            var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--color-gold-dark) 40%, transparent),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover:not(:disabled) {
-            animation: btn-gold-bg-sweep var(--duration-shimmer) linear infinite;
-        }
-    }
-}
-
-/* Background-position sweep for the gold CTA hover shimmer.
-   Distinct from `gold-shimmer-slide` (which animates background-position for
-   a text-clip gradient). This variant sweeps the `background-position` of the
-   250% wide gradient across the button's bounding box. */
-@keyframes btn-gold-bg-sweep {
-    0%   { background-position: 0 0, 100% 0, 0 0; }
-    100% { background-position: 0 0, -100% 0, 0 0; }
-}
+/* ── Calm CTA register (BA.W-GLASS-CAL, H2a — the disco retired) ──────────
+   The `@utility btn-audacious` + `@utility btn-audacious-gold` recipes + the
+   `@keyframes btn-gold-bg-sweep` are RETIRED (clean break, no alias). The user
+   removed the "disco effect" wholesale: the sparkle `::after` glyph, the
+   disco-grain hover (`--paper-clean-texture` + `--primary`/gold radial), the
+   gold-sweep shimmer, and the typed `--ripple-radius` press-ripple are GONE.
+
+   The `primary-audacious`/`gold-audacious` Button variants (button/index.ts)
+   now collapse onto the calm glass-first register — the `glass-wash`/`btn-glass`
+   surface + the `--glass-specular` edge catch-light, hover/press on the §6
+   doctrine (surface→`--ease-standard`, scale→`--spring-smooth`). `gold-audacious`
+   keeps a STATIC warm-gold tint (no animated sweep). The fenced-out GOOD pops
+   (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
+   STAY — they were never disco. */
 
 /* ── Table density utilities — AN.R0 ─────────────────────────────────────
    `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
@@ -370,7 +187,7 @@
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--duration-fast) var(--spring-smooth),
+        scale var(--spring-smooth-duration) var(--spring-smooth),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
@@ -394,7 +211,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--spring-smooth),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }

package/dist/styles/view-transition.css

@@ -35,7 +35,10 @@
 /* Shared group class — consumers add `view-transition-class: gl-list-item` on
  * each tracked element plus a unique `view-transition-name` per element. */
 ::view-transition-group(.gl-list-item) {
-    animation-duration: var(--vt-duration, var(--duration-normal));
+    /* BA.W-GLASS-CAL Unit 3 — the duration fallback rides the bouncy spring's
+       OWN settle clock (`--spring-bouncy-duration`) so the default VT bounce
+       plays at its physical settle; a consumer still overrides via `--vt-duration`. */
+    animation-duration: var(--vt-duration, var(--spring-bouncy-duration));
     animation-timing-function: var(--vt-ease, var(--spring-bouncy));
 }
 

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-CsIuYP_e.js";
+import { t as e } from "./Switch-Dr--uLGH.js";
 export { e as Switch };