@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/stacked-icons.js

@@ -1,14 +1,14 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
-//#region src/components/custom/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
-var h = {
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
+//#region src/components/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
+var g = {
 	key: 1,
 	style: { zIndex: 0 }
-}, g = /* @__PURE__ */ o({
+}, _ = /* @__PURE__ */ s({
 	__name: "StackedIconGroup",
 	props: {
 		items: {},
 		maxVisible: { default: 3 },
-		direction: { default: "horizontal" },
+		orientation: { default: "horizontal" },
 		reversed: {
 			type: Boolean,
 			default: !1
@@ -21,63 +21,78 @@ var h = {
 		as: { default: "div" },
 		keyFn: {}
 	},
-	setup(o) {
-		let g = o, _ = t(() => {
-			switch (g.size) {
+	setup(s) {
+		let _ = s, v = t(() => {
+			switch (_.size) {
 				case "sm": return "h-6 w-6";
 				case "md": return "h-8 w-8";
 				case "lg": return "h-10 w-10";
 			}
-		}), v = t(() => {
-			if (g.direction === "vertical") switch (g.size) {
+		}), y = t(() => {
+			if (_.orientation === "vertical") switch (_.size) {
 				case "sm": return "-mt-(--stack-overlap-sm)";
 				case "md": return "-mt-(--stack-overlap-md)";
 				case "lg": return "-mt-(--stack-overlap-lg)";
 			}
-			switch (g.size) {
+			switch (_.size) {
 				case "sm": return "-ml-(--stack-overlap-sm)";
 				case "md": return "-ml-(--stack-overlap-md)";
 				case "lg": return "-ml-(--stack-overlap-lg)";
 			}
-		}), y = t(() => g.items.slice(0, g.maxVisible)), b = t(() => Math.max(0, g.items.length - g.maxVisible));
-		return (t, g) => (l(), n(f(o.as), { class: s([
-			"group/stack relative isolate flex",
-			o.direction === "vertical" ? "flex-col" : "items-center",
-			o.reversed ? o.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""
-		]) }, {
-			default: m(() => [
-				(l(!0), i(e, null, u(y.value, (e, n) => (l(), i("div", {
-					key: o.keyFn?.(e, n) ?? n,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill transform-gpu",
-						"transition-[transform,box-shadow,opacity] duration-fast ease-spring-snappy",
-						n > 0 ? v.value : "",
-						o.expandOnHover && n > 0 ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+		}), b = t(() => _.items.slice(0, _.maxVisible)), x = t(() => Math.max(0, _.items.length - _.maxVisible)), S = t(() => {
+			let e = b.value.length + +(x.value > 0);
+			return Math.max(1, e - 1);
+		});
+		return (t, _) => (u(), n(p(s.as), {
+			class: c(["stacked-icon-group group/stack relative isolate flex", [s.orientation === "vertical" ? "flex-col" : "items-center", s.reversed ? s.orientation === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""]]),
+			"data-orientation": s.orientation,
+			style: l({ "--n": S.value })
+		}, {
+			default: h(() => [
+				(u(!0), i(e, null, d(b.value, (e, n) => (u(), i("div", {
+					key: s.keyFn?.(e, n) ?? n,
+					class: c([
+						v.value,
+						"stacked-icon-puck relative flex items-center justify-center rounded-pill transform-gpu",
+						n > 0 ? y.value : "",
+						s.expandOnHover && n > 0 ? "stacked-icon-puck--fan" : ""
 					]),
-					style: c({ zIndex: y.value.length + 1 - n })
-				}, [d(t.$slots, "icon", {
+					style: l({
+						zIndex: b.value.length + 1 - n,
+						"--i": n
+					})
+				}, [f(t.$slots, "icon", {
 					item: e,
 					index: n
 				})], 6))), 128)),
-				b.value > 0 ? (l(), i("div", {
+				x.value > 0 ? (u(), i("div", {
 					key: 0,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill",
-						"border-2 border-background bg-[color-mix(in_srgb,var(--background)_96%,transparent)] text-xs font-semibold text-muted-foreground/60 shadow-cartoon-sm",
-						"transform-gpu transition-[background-color,color,transform,box-shadow] duration-fast ease-spring-snappy",
-						"hover:bg-background hover:text-muted-foreground hover:shadow-cartoon-md",
+					class: c([
 						v.value,
-						o.expandOnHover ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+						"stacked-icon-puck stacked-icon-overflow glass-capsule glass-atom",
+						"relative flex items-center justify-center rounded-pill text-xs font-semibold text-muted-foreground",
+						"transform-gpu",
+						y.value,
+						s.expandOnHover ? "stacked-icon-puck--fan" : ""
 					]),
-					style: { zIndex: 1 }
-				}, [d(t.$slots, "overflow", { count: b.value }, () => [a(" +" + p(b.value), 1)])], 2)) : r("", !0),
-				b.value === 0 && t.$slots.info ? (l(), i("div", h, [d(t.$slots, "info")])) : r("", !0)
+					style: l({
+						zIndex: 1,
+						"--i": b.value.length
+					}),
+					"data-cast": ""
+				}, [_[0] ||= a("span", {
+					class: "cartoon-cast",
+					"aria-hidden": "true"
+				}, null, -1), f(t.$slots, "overflow", { count: x.value }, () => [o(" +" + m(x.value), 1)])], 6)) : r("", !0),
+				x.value === 0 && t.$slots.info ? (u(), i("div", g, [f(t.$slots, "info")])) : r("", !0)
 			]),
 			_: 3
-		}, 8, ["class"]));
+		}, 8, [
+			"class",
+			"data-orientation",
+			"style"
+		]));
 	}
 });
 //#endregion
-export { g as StackedIconGroup };
+export { _ as StackedIconGroup };

package/dist/status-dot.d.ts

@@ -1 +1 @@
-export * from "./components/custom/status-dot";
+export * from "./components/status-dot";

package/dist/status-dot.js

@@ -1,6 +1,6 @@
-import { t as e } from "./cn-DJXf4yaB.js";
+import { t as e } from "./class-names-5jotTFzp.js";
 import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
-//#region src/components/custom/status-dot/StatusDot.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/status-dot/StatusDot.vue?vue&type=script&setup=true&lang.ts
 var d = ["role"], f = ["data-status"], p = {
 	key: 0,
 	class: "text-xs leading-none text-muted-foreground"

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); } }

package/dist/styles/card-scroll.css

@@ -0,0 +1 @@
+.card-header--shrink { --card-title-shrink-ratio: 0.695; --title-collapse-scale: var(--card-title-shrink-ratio); --card-shrink-ease: var(--ease-out, linear); --card-header-bg: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); position: relative; transform-origin: top; } .card-header--shrink::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--card-header-bg); opacity: 0; border-radius: inherit; pointer-events: none; } .card-header--shrink > * { position: relative; z-index: 1; } .card-header--shrink > [data-slot="card-description"] { transform-origin: top; will-change: transform, opacity; } @keyframes title-collapse { to { scale: var(--title-collapse-scale, 0.82); } } @keyframes card-header-shrink { from { transform: translateY(0); } to { transform: translateY(-0.5rem); } } @keyframes card-header-bg-lift { from { opacity: 0; } to { opacity: 1; } } @keyframes card-desc-shrink { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0); } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .card-header--shrink { animation: card-header-shrink var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; } .card-header--shrink::before { animation: card-header-bg-lift var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; } .card-header--shrink > [data-slot="card-title"] { animation: title-collapse var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 120px; transform-origin: left top; } .card-header--shrink > [data-slot="card-description"] { animation: card-desc-shrink var(--card-shrink-ease) both; animation-timeline: --card-scroll; animation-range: 0px 80px; } } }