@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/animations.css

@@ -1,409 +1 @@
-/* Shared @keyframes — global animations used across projects */
-
-/* ── Floating panel entrance ── */
-@keyframes floating-panel-in {
-    from {
-        opacity: 0;
-        filter: blur(4px);
-        scale: 0.96;
-    }
-    to {
-        opacity: 1;
-        filter: blur(0);
-        scale: 1;
-    }
-}
-
-/* ── Collapsible (reka-ui) ── */
-@keyframes collapsible-open {
-    from {
-        height: 0;
-        opacity: 0;
-    }
-    to {
-        height: var(--reka-collapsible-content-height);
-        opacity: 1;
-    }
-}
-
-@keyframes collapsible-close {
-    from {
-        height: var(--reka-collapsible-content-height);
-        opacity: 1;
-    }
-    to {
-        height: 0;
-        opacity: 0;
-    }
-}
-
-/* ── Tooltip entrance ── */
-@keyframes tooltip-in {
-    from {
-        opacity: 0;
-        transform: scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* ── Generic fade-in ── */
-@keyframes fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(6px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* ── Scale-in ── */
-@keyframes scale-in {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* ── Slide-up ── */
-@keyframes slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(16px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* ── Dock entrance ── */
-@keyframes dock-in {
-    from {
-        opacity: 0;
-        transform: translateY(14px) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-/* ── Shimmer sweep (background-position for generated animation utilities) ── */
-@keyframes shimmer-sweep {
-    0% {
-        background-position: -200% 0;
-    }
-    100% {
-        background-position: 200% 0;
-    }
-}
-
-/* ── Shimmer sweep (background-position for shimmer utilities) ── */
-@keyframes shimmer {
-    0% { background-position: 250% 0; }
-    100% { background-position: -250% 0; }
-}
-
-/* ── Shake (horizontal ±4px for .shake-error) ── */
-@keyframes shake {
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        transform: translateX(-4px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-        transform: translateX(4px);
-    }
-}
-
-/* ── Metal shimmer: the metal-PARAMETERIZED text/border highlight sweep ──
- * BB.W-METAL-SHIMMER — the ONE metal-agnostic sweep (the gold-only
- * `gold-shimmer-slide` RETIRED onto it — clean break, no alias). The keyframe is
- * PURE position (ZERO baked metal color): the metal hue is the recipe's job via
- * the `--metal-shimmer-color`-bound gradient (see utilities/metal.css). The SAME
- * keyframe sweeps a gold, silver, or bronze gradient depending only on the channel,
- * usable for BOTH text-clip (the `.metal-*` text register) AND border/mask (the
- * `.metal-*-border` swept RIM) — the position pass shifts whatever gradient the
- * surface paints. The `200% 0`→`-200% 0` shape carries the gold READ exactly
- * (byte-faithful to the retired `gold-shimmer-slide`). The slow `--duration-metal`
- * (6s) clock is set at the consumer (the metal recipe), not baked here. */
-@keyframes metal-shimmer-sweep {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-/* ── Sparkle sweep RETIRED (BA.W-GLASS-CAL, H2a) ──
- * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
- * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
- * gone, and the dock-tab primary tier collapsed onto the calm glass register.
- * The `Complete!` celebratory shimmer rides the metal-shimmer-sweep / shimmer
- * keyframes above, never sparkle-sweep.
- */
-
-/* ── Pulse dot bounce: dots variant of <Pulse> ──
- *
- * Three-dot loading indicator. Opacity 0.35 ↔ 1, scale 0.8 ↔ 1.2. Consumer
- * (.pulse-dot in Pulse.vue) sets duration via --pulse-duration and staggers
- * via animation-delay using --pulse-index.
- */
-@keyframes pulse-dot-bounce {
-    0%, 80%, 100% { opacity: 0.35; transform: scale(0.8); }
-    40%           { opacity: 1;    transform: scale(1.2); }
-}
-
-/* ── Pulse ring spin: ring variant of <Pulse> ──
- *
- * Continuous-rotation spinner. Consumer (.pulse-ring in Pulse.vue) sets
- * duration via --pulse-duration.
- */
-@keyframes pulse-ring-spin {
-    to { transform: rotate(360deg); }
-}
-
-/* ── Typewriter cursor blink: cursor for <TypewriterText> ──
- *
- * Hard-edged step blink (50/50 duty). Consumer (.tw-cursor--blink in
- * TypewriterText.vue) sets the 1.06s step-end timing.
- */
-@keyframes typewriter-blink {
-    0%, 50%   { opacity: 1; }
-    51%, 100% { opacity: 0; }
-}
-
-/* ── Ambient pulse: aura variant of <Pulse> ──
- *
- * Slow breathing cycle for the surface-scope `Pulse variant="aura"`.
- * Tokens at tokens.css §AMBIENT MOTION drive the duration/scale/easing
- * so consumers do not redefine the rhythm per site. The breath travels
- * from scale-min @ opacity-min → scale-max @ opacity-max → back, with
- * a 6s default cycle. The Pulse.vue scoped block consumes this keyframe
- * directly; consumer-side rules must not re-declare it.
- *
- * Reduced-motion fallback is in Pulse.vue (animation: none + static
- * mid-cycle render) — the keyframe itself doesn't gate, but it COULD
- * collapse here if a future consumer composes `ambient-pulse` outside
- * the Pulse primitive. The current contract: every aura caller goes
- * through <Pulse variant="aura">.
- */
-@keyframes ambient-pulse {
-    /* AX.W57 (P6) — the aura breath reads its OWN element-opacity range
-       (`--pulse-aura-breath-{min,max}`, 0.28↔0.42), decoupled from the
-       shared `--pulse-aura-opacity-*` skeleton-shimmer stops so the halo
-       breathes as an ambient wash, never up to the 0.95 shimmer peak.
-
-       BC.W-GLASS-GLOW-FIX (Atlas A-8 root) — the breath SCALE is driven via the
-       `--pulse-aura-breath-scale` registered custom property (a `<number>`, typed
-       in property-regs.css so it INTERPOLATES per-frame), NOT a `transform: scale()`
-       on `.pulse-aura` itself. The `.pulse-aura::before` child reads the scale; the
-       `.pulse-aura` element stays UNSCALED at `inset:0` as the `overflow: clip`
-       boundary. Scaling the CHILD (clipped by the unscaled parent) is what makes the
-       1.15× peak STAY inside the host box — scaling the clip element itself scaled the
-       clip rect too, so the radial escaped (the prior incomplete fix). The element-
-       opacity breath stays HERE (it does not change geometry). */
-    0%,
-    100% {
-        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-min, 1);
-        opacity: var(--pulse-aura-breath-min, 0.28);
-    }
-    50% {
-        --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-max, 1.15);
-        opacity: var(--pulse-aura-breath-max, 0.42);
-    }
-}
-
-/* ── Scrim breath: gentle opacity oscillation for portaled dialog scrims ──
- *
- * Canon keyframe for the `--scrim-animation: scrim-breath 6s ease-in-out
- * infinite` shorthand that CellularWarningDialog (and any DialogContent
- * consumer that opts in) writes onto the portaled overlay via
- * `<ModalOverlay scrim-animation="…">`. The cascade rule below
- * (`[data-scrim-animation]`) consumes the shorthand; this keyframe
- * resolves the animation-name half of that shorthand.
- *
- * Amplitude is ~6% (0.92 → 0.98), slow enough to read as breath rather
- * than throb. The var() fallbacks let a consumer retune the band
- * (`--scrim-opacity-min` / `--scrim-opacity-max`) without re-declaring
- * the keyframe. Duration + easing live in the shorthand the consumer
- * writes — not here — so the rhythm stays composable.
- *
- * Reduced-motion fallback is double-gated: the cascade rule below sets
- * `animation: none` under PRM (primary gate), AND the keyframe itself
- * collapses to a flat opacity under PRM (defensive — protects future
- * consumers that compose `scrim-breath` outside `[data-scrim-animation]`).
- * Mirrors the `sparkle-sweep` PRM convention above.
- */
-@keyframes scrim-breath {
-    0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
-    50%      { opacity: var(--scrim-opacity-max, 0.98); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    @keyframes scrim-breath {
-        0%, 100% { opacity: var(--scrim-opacity-min, 0.92); }
-    }
-}
-
-/* ── Scrim animation cascade (AJ-W4-δ) ─────────────────────────────────
- *
- * reka-ui's DialogPortal teleports the overlay outside the consumer's
- * component subtree, so a consumer-side scoped `--scrim-animation`
- * declaration on a parent of `<Dialog>` never reaches the portaled
- * `<DialogOverlay>`. The publisher closes the gap: `<ModalOverlay
- * scrim-animation="…">` writes the value to the typed `--scrim-animation`
- * cascade variable on the overlay's inline style + tags the element with
- * `data-scrim-animation`, and this rule consumes the variable.
- *
- * The rule lives in animations.css (global, not scoped) precisely because
- * the portaled element sits outside any scoped-style boundary. The
- * `data-scrim-animation` attribute selector is opt-in: only overlays that
- * pass the prop receive an animation declaration, so the default scrim
- * (which relies on `tw-animate-css`'s data-state fade) stays untouched.
- *
- * The two animation grammars compose cleanly:
- *   - `[data-state]` keys the `tw-animate-css` enter/exit fade
- *     (open → fade-in, closed → fade-out)
- *   - `[data-scrim-animation]` keys this long-running scrim-breath
- *     (independent rhythm, runs while the dialog is open)
- *
- * Distinct selectors → no cascade fight. The breath plays underneath the
- * data-state fade because the latter wins via shorter-lived specificity
- * during transitions; the former resumes once the data-state transition
- * settles.
- *
- * Reduced-motion contract: PRM users retire the breath. The fallback
- * resolves to `none` via the var() default + the @media block below.
- */
-[data-scrim-animation] {
-    animation: var(--scrim-animation, none);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    [data-scrim-animation] {
-        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);
-        /* BB.W-LIQUID-REVEAL — the coupled blur-settle decongest (the iOS
-           "light-bending modulation" arrival). The surface's OWN pixels decongest
-           `filter: blur(--top-layer-enter-blur)` → `blur(0)` AS it blooms (a `filter`
-           radius interp is compositor-safe; it rides the surface's pixels, so it does
-           NOT fight the resting glass-tier `backdrop-filter` plate blur — the
-           REVEAL-TOPLAYER-NO-BLUR fix, the twin of the `.glass-reveal` recipe's blur
-           leg, glass/reveal.css). */
-        filter: blur(var(--top-layer-enter-blur, 4px));
-        transition-property: opacity, scale, filter, display, overlay;
-        /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
-           clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
-           than the generic `--duration-normal`, so the emphatic dialog/popover
-           entrance bounce reads fully instead of being clipped at 0.3s. The blur
-           decongest rides the no-overshoot `--ease-out` (EFFECTS), the scale the
-           bouncy spring (SPATIAL) — the W-MOTION-CANON split. */
-        transition-duration: var(--spring-bouncy-duration),
-            var(--spring-bouncy-duration), var(--spring-bouncy-duration),
-            var(--spring-bouncy-duration), var(--spring-bouncy-duration);
-        transition-timing-function: var(--spring-bouncy), var(--spring-bouncy),
-            var(--ease-out), linear, linear;
-        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;
-        filter: blur(0);
-        @starting-style {
-            opacity: 0;
-            scale: var(--top-layer-enter-scale, 0.96);
-            filter: blur(var(--top-layer-enter-blur, 4px));
-        }
-    }
-
-    /* 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 {
-        /* AZ.W-ADAPTIVE-AUTO A5-1 — the modal-scrim dim is the house alpha-derivative
-           `color-mix(in srgb, var(--background) Npct, transparent)`, NOT the invalid
-           `hsl(var(--background) / α)` double-wrap (`--background` is a complete
-           `hsl()` color = `hsl(48 12% 98%)`, so `hsl(hsl(…)/α)` evaluates to nothing
-           and the dim silently did not paint). The `in srgb` axis only — the
-           `--surface-tint-*` house family + the `in oklab` glass tint axis are
-           untouched. */
-        background-color: color-mix(in srgb, var(--background) 0%, transparent);
-        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: color-mix(
-            in srgb,
-            var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
-            transparent
-        );
-        @starting-style {
-            background-color: color-mix(in srgb, var(--background) 0%, transparent);
-        }
-    }
-}
-
-/* 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);
-    }
-}
+@keyframes collapsible-open { from { height: 0; opacity: 0; } to { height: var(--reka-collapsible-content-height); opacity: 1; } } @keyframes collapsible-close { from { height: var(--reka-collapsible-content-height); opacity: 1; } to { height: 0; opacity: 0; } } @keyframes tooltip-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes dock-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes shimmer-sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes shimmer { 0% { background-position: 250% 0; } 100% { background-position: -250% 0; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } @keyframes metal-shimmer-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse-dot-bounce { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } @keyframes pulse-ring-spin { to { transform: rotate(360deg); } } @keyframes typewriter-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes ambient-pulse { 0%, 100% { --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-min, 1); opacity: var(--pulse-aura-breath-min, 0.28); } 50% { --pulse-aura-breath-scale: var(--animate-ambient-pulse-scale-max, 1.15); opacity: var(--pulse-aura-breath-max, 0.42); } } @keyframes scrim-breath { 0%, 100% { opacity: var(--scrim-opacity-min, 0.92); } 50% { opacity: var(--scrim-opacity-max, 0.98); } } @media (prefers-reduced-motion: reduce) { @keyframes scrim-breath { 0%, 100% { opacity: var(--scrim-opacity-min, 0.92); } } } [data-scrim-animation] { animation: var(--scrim-animation, none); } @media (prefers-reduced-motion: reduce) { [data-scrim-animation] { animation: none; } } @keyframes glass-reveal-out { from { scale: 1 1; opacity: 1; filter: blur(0); } to { scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur, 4px)); } } @keyframes glass-reveal-out-reduced { from { opacity: 1; } to { opacity: 0; } } @supports (overlay: auto) { .glass-top-layer[popover], dialog.glass-top-layer { opacity: 0; scale: var(--top-layer-enter-scale, 0.96); filter: blur(var(--top-layer-enter-blur, 4px)); transition-property: opacity, scale, filter, display, overlay; transition-duration: var(--enter-overlay-clock), var(--enter-overlay-clock), var(--enter-overlay-clock), var(--enter-overlay-clock), var(--enter-overlay-clock); transition-timing-function: var(--enter-overlay-spring), var(--enter-overlay-spring), var(--ease-out), linear, linear; transition-behavior: allow-discrete; } .glass-top-layer[popover]:popover-open, dialog.glass-top-layer[open] { opacity: 1; scale: 1; filter: blur(0); @starting-style { opacity: 0; scale: var(--top-layer-enter-scale, 0.96); filter: blur(var(--top-layer-enter-blur, 4px)); } } dialog.glass-top-layer::backdrop { background-color: color-mix(in srgb, var(--background) 0%, transparent); -webkit-backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px)); 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: color-mix( in srgb, var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%), transparent ); transition: display var(--top-layer-backdrop-in, 0.15s) allow-discrete, overlay var(--top-layer-backdrop-in, 0.15s) allow-discrete, background-color var(--top-layer-backdrop-in, 0.15s) var(--ease-out); @starting-style { background-color: color-mix(in srgb, var(--background) 0%, transparent); } } } @media (prefers-reduced-motion: reduce) { .glass-top-layer[popover], dialog.glass-top-layer { scale: none; transition-duration: var(--duration-fast); } }