@mkbabb/glass-ui 3.12.0 → 4.0.0

package/dist/search.js

@@ -1,12 +1,12 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { n as t, t as n } from "./minimize-2-lcXOuc6V.js";
-import { t as r } from "./search-nbkvr2dC.js";
-import { t as i } from "./x-Dfsegz9Y.js";
-import { n as a } from "./badge-CaoFJzRb.js";
-import { n as o } from "./button-DN39cGqL.js";
-import { n as s, t as c } from "./DialogContent-BRkT1cjP.js";
-import { n as l, r as u, t as d } from "./PopoverContent-BId6ggf_.js";
-import { t as f } from "./useTextHighlight-CWEi25hf.js";
+import { n as t, t as n } from "./minimize-2-BV31Ob_h.js";
+import { t as r } from "./search-BSGrf2Sk.js";
+import { t as i } from "./x-BUwTKe50.js";
+import { n as a } from "./badge-UILT_3pZ.js";
+import { n as o } from "./button-BNDWhAZb.js";
+import { n as s, t as c } from "./DialogContent-DDE6pQBU.js";
+import { n as l, r as u, t as d } from "./PopoverContent-BTorlp--.js";
+import { t as f } from "./useTextHighlight-NmBM5V_4.js";
 import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, nextTick as S, normalizeClass as C, onScopeDispose as w, openBlock as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as k, toDisplayString as A, unref as j, watch as M, withCtx as N } from "vue";
 //#region src/components/custom/search/composables/fuzzySearchIndex.ts
 function P(e, t) {
@@ -240,7 +240,7 @@ var H = ["placeholder", "value"], U = ["onClick", "onMouseenter"], W = { class:
 				align: "start",
 				"side-offset": 4,
 				portal: !1,
-				class: "w-[var(--reka-popover-trigger-width)] max-h-[50vh] overflow-y-auto overscroll-contain p-1",
+				class: "w-(--reka-popover-trigger-width) max-h-[50vh] overflow-y-auto overscroll-contain p-1",
 				onOpenAutoFocus: m[5] ||= (e) => e.preventDefault()
 			}, {
 				default: N(() => [v("div", {
@@ -268,7 +268,7 @@ var H = ["placeholder", "value"], U = ["onClick", "onMouseenter"], W = { class:
 			"onUpdate:open": m[11] ||= (t) => e.state.isExpanded.value = t
 		}, {
 			default: N(() => [b(j(c), {
-				variant: "opaque",
+				surface: "opaque",
 				class: "!max-w-[36rem] !top-[12vh] !translate-y-0 max-h-[70vh] !p-0 overflow-hidden flex flex-col gap-0",
 				onOpenAutoFocus: m[10] ||= (e) => e.preventDefault()
 			}, {

package/dist/select.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./SelectScrollDownButton-T32cVFeM.js";
-import { t as s } from "./SelectGroup-BFiod7X2.js";
-import { n as c, t as l } from "./SelectSeparator-C4Ql0gzV.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./SelectScrollDownButton-C1jb3b3K.js";
+import { t as s } from "./SelectGroup-Dcczq44n.js";
+import { n as c, t as l } from "./SelectSeparator-DK2y1Bun.js";
 export { a as Select, t as SelectContent, s as SelectGroup, i as SelectItem, c as SelectLabel, o as SelectScrollDownButton, n as SelectScrollUpButton, l as SelectSeparator, e as SelectTrigger, r as SelectValue };

package/dist/separator.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Separator-D7sD7RKj.js";
+import { t as e } from "./Separator-BArl4OaB.js";
 export { e as Separator };

package/dist/sheet-CquRYOAw.js

@@ -0,0 +1,218 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./x-BUwTKe50.js";
+import { t as n } from "./useSurfaceAxis-CMnF2zHb.js";
+import { t as r } from "./useSpringMount-CvopqiFr.js";
+import { t as i } from "./ModalOverlay-CkPRRgl_.js";
+import { computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderSlot as g, toHandlers as _, unref as v, withCtx as y } from "vue";
+import { DialogClose as b, DialogContent as x, DialogDescription as S, DialogPortal as C, DialogRoot as w, DialogTitle as T, DialogTrigger as E, injectDialogRootContext as D, useForwardPropsEmits as O } from "reka-ui";
+import { cva as k } from "class-variance-authority";
+//#endregion
+//#region src/components/ui/sheet/Sheet.vue
+var A = /* @__PURE__ */ u({
+	__name: "Sheet",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = O(e, t);
+		return (e, t) => (h(), o(v(w), f({ "data-slot": "sheet" }, v(n)), {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), j = /* @__PURE__ */ u({
+	__name: "SheetTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (h(), o(v(E), m(d(t)), {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), M = /* @__PURE__ */ u({
+	__name: "SheetClose",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (h(), o(v(b), m(d(t)), {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), N = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "SheetContent",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		side: {},
+		surface: {},
+		spring: { type: [Boolean, String] },
+		dragDismiss: { type: Boolean },
+		dragThreshold: {},
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(s, { emit: u }) {
+		let d = s, p = u, m = a(() => {
+			let { class: e, side: t, surface: n, spring: r, dragDismiss: i, dragThreshold: a, ...o } = d;
+			return o;
+		}), S = a(() => n(d.surface ?? "glass").replace(/^glass-\w+\s*/, "")), w = O(m, p), T = d.spring ? D() : null, E = d.spring && T ? r({
+			open: T.open,
+			preset: typeof d.spring == "string" ? d.spring : "smooth",
+			dismissThreshold: d.dragThreshold ?? .3,
+			onDismiss: () => T.onOpenChange(!1)
+		}) : null, k = a(() => d.side ?? "right");
+		function A(e, t) {
+			let n = `${e * 100}%`;
+			switch (t) {
+				case "top": return `translateY(-${n})`;
+				case "bottom": return `translateY(${n})`;
+				case "left": return `translateX(-${n})`;
+				default: return `translateX(${n})`;
+			}
+		}
+		let j = a(() => {
+			if (E) return {
+				transform: A(E.position.value, k.value),
+				animation: "none",
+				transition: "none"
+			};
+		}), M = a(() => d.spring && d.dragDismiss && E ? E.dragHandlers : {});
+		return (n, r) => (h(), o(v(C), null, {
+			default: y(() => [l(i, {
+				scrim: "glass",
+				animate: "fade",
+				layout: "centered"
+			}), l(v(x), f({ class: v(e)(v(R)({ side: k.value }), S.value, d.spring ? "transition-none" : "", d.class) }, {
+				...v(w),
+				...n.$attrs
+			}, {
+				style: j.value,
+				"data-surface": d.surface ?? "glass",
+				"data-spring": d.spring ? typeof d.spring == "string" ? d.spring : "smooth" : void 0,
+				"data-drag-dismiss": d.spring && d.dragDismiss ? "" : void 0
+			}, _(M.value)), {
+				default: y(() => [g(n.$slots, "default"), l(v(b), { class: "focus-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-secondary" }, {
+					default: y(() => [l(v(t), { class: "w-4 h-4 text-muted-foreground" }), r[0] ||= c("span", { class: "sr-only" }, "Close", -1)]),
+					_: 1
+				})]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"data-surface",
+				"data-spring",
+				"data-drag-dismiss"
+			])]),
+			_: 3
+		}));
+	}
+}), P = /* @__PURE__ */ u({
+	__name: "SheetHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("div", { class: p(v(e)("flex flex-col gap-y-2 text-center sm:text-left", n.class)) }, [g(t.$slots, "default")], 2));
+	}
+}), F = /* @__PURE__ */ u({
+	__name: "SheetTitle",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = a(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, i) => (h(), o(v(T), f({ class: v(e)("text-subheading text-foreground", n.class) }, r.value), {
+			default: y(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), I = /* @__PURE__ */ u({
+	__name: "SheetDescription",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = a(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, i) => (h(), o(v(S), f({ class: v(e)("text-sm text-muted-foreground", n.class) }, r.value), {
+			default: y(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), L = /* @__PURE__ */ u({
+	__name: "SheetFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (h(), s("div", { class: p(v(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [g(t.$slots, "default")], 2));
+	}
+}), R = k("fixed z-modal gap-4 glass-floating p-6 transition ease-in-out sheet-animate", {
+	variants: { side: {
+		top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+		bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+	} },
+	defaultVariants: { side: "right" }
+});
+//#endregion
+export { P as a, j as c, F as i, A as l, L as n, N as o, I as r, M as s, R as t };

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./sheet-VZEtNFvO.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./sheet-CquRYOAw.js";
 export { r as Sheet, s as SheetClose, a as SheetContent, o as SheetDescription, i as SheetFooter, e as SheetHeader, n as SheetTitle, t as SheetTrigger, c as sheetVariants };

package/dist/{slider-ClgpP7EB.js → slider-DQ95MET2.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { t as n } from "./useTouchGate-WFyJYsth.js";
-import { i as r } from "./dockContext-BKeIMmNk.js";
+import { t } from "./_plugin-vue_export-helper-CBt_VvXa.js";
+import { t as n } from "./useTouchGate-28Tk2-t2.js";
+import { i as r } from "./dockContext-Bu1Avy-a.js";
 import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeProps as u, onBeforeUnmount as d, onMounted as f, openBlock as p, renderList as m, unref as h, useTemplateRef as g, withCtx as _ } from "vue";
 import { SliderRange as v, SliderRoot as y, SliderThumb as b, SliderTrack as x, useForwardPropsEmits as S } from "reka-ui";
 import { cva as C } from "class-variance-authority";
@@ -110,7 +110,7 @@ var T = /* @__PURE__ */ t(/* @__PURE__ */ l({
 			}), (p(!0), s(i, null, m(t.modelValue, (e, t) => (p(), o(h(b), {
 				key: t,
 				"aria-label": n.$attrs["aria-label"] ?? void 0,
-				class: "slider-thumb glass-specular-track"
+				class: "slider-thumb glass-specular-track touch-hit-area"
 			}, null, 8, ["aria-label"]))), 128))]),
 			_: 1
 		}, 16, [
@@ -121,16 +121,16 @@ var T = /* @__PURE__ */ t(/* @__PURE__ */ l({
 			"data-touch-active"
 		]));
 	}
-}), [["__scopeId", "data-v-394270d4"]]), E = C("glass-slider focus-ring relative flex w-full touch-none select-none items-center transition-colors", {
+}), [["__scopeId", "data-v-534634a7"]]), E = C("glass-slider focus-ring relative flex w-full touch-none select-none items-center transition-colors", {
 	variants: {
 		variant: {
 			standard: "",
 			spectrum: ""
 		},
 		size: {
-			sm: "[--slider-track-height:0.75rem] [--slider-thumb-size:0.5rem]",
-			md: "[--slider-track-height:1.25rem] [--slider-thumb-size:1rem]",
-			lg: "[--slider-track-height:1.75rem] [--slider-thumb-size:1.5rem]"
+			sm: "",
+			md: "",
+			lg: ""
 		}
 	},
 	defaultVariants: {

package/dist/slider.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./slider-ClgpP7EB.js";
+import { n as e, t } from "./slider-DQ95MET2.js";
 export { e as Slider, t as sliderVariants };

package/dist/sortable-list.js

@@ -1,6 +1,6 @@
-import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { n as t } from "./createContext-B44Sah_H.js";
-import { t as n } from "./useSortable-C8ReQ50P.js";
+import { t as e } from "./_plugin-vue_export-helper-CBt_VvXa.js";
+import { n as t } from "./createContext-B2RaZ-b8.js";
+import { t as n } from "./useSortable-BVqlJRBR.js";
 import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toRef as u, unref as d, withCtx as f } from "vue";
 //#region src/components/custom/sortable-list/context.ts
 var p = t("glass-ui:sortable", "[glass-ui:sortable] <SortableItem> must be used inside <SortableList>"), m = p.KEY;

package/dist/springPresets-WXaLbu8u.js

@@ -0,0 +1,40 @@
+//#region src/composables/motion/springPresets.ts
+var e = [
+	{
+		name: "smooth",
+		response: .5,
+		dampingFraction: .86,
+		comment: "SETTLE register — entrances/fades/scale-ins, no overshoot read"
+	},
+	{
+		name: "snappy",
+		response: .35,
+		dampingFraction: .65,
+		comment: "CONTROL register — crisp position morphs (tab underline, progress fill, marker pop), overshoot ~+6.8%"
+	},
+	{
+		name: "bouncy",
+		response: .5,
+		dampingFraction: .45,
+		comment: "PLAYFUL register — emphatic one-shots only (bouncy toggle, dialog/success entrance, VT default), overshoot ~+20.5%"
+	},
+	{
+		name: "gentle",
+		response: .7,
+		dampingFraction: 1,
+		comment: "GENTLE register — patient critically-damped settle, reached via the --ease-spring-gentle @theme alias"
+	},
+	{
+		name: "dock",
+		response: .32,
+		dampingFraction: .7,
+		comment: "DOCK register — dock expand/collapse morph + the in-dock Slider thumb, iOS-control settled, overshoot ~+4.6%"
+	}
+];
+function t(t) {
+	let n = e.find((e) => e.name === t);
+	if (!n) throw Error(`Unknown spring preset: ${t}`);
+	return n;
+}
+//#endregion
+export { t as n, e as t };

package/dist/stacked-icons.js

@@ -30,14 +30,14 @@ var h = {
 			}
 		}), v = t(() => {
 			if (g.direction === "vertical") switch (g.size) {
-				case "sm": return "-mt-[var(--stack-overlap-sm)]";
-				case "md": return "-mt-[var(--stack-overlap-md)]";
-				case "lg": return "-mt-[var(--stack-overlap-lg)]";
+				case "sm": return "-mt-(--stack-overlap-sm)";
+				case "md": return "-mt-(--stack-overlap-md)";
+				case "lg": return "-mt-(--stack-overlap-lg)";
 			}
 			switch (g.size) {
-				case "sm": return "-ml-[var(--stack-overlap-sm)]";
-				case "md": return "-ml-[var(--stack-overlap-md)]";
-				case "lg": return "-ml-[var(--stack-overlap-lg)]";
+				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([

package/dist/styles/animations.css

@@ -141,128 +141,13 @@
     100% { background-position: -200% 0; }
 }
 
-/* ── Gold ONE-SHOT round-trip: the pressed seal (E7c — the to-AND-fro) ──────────
- *
- * A seal is PRESSED, catches the light ONCE, and RECEDES — a full ease-IN-AND-OUT
- * envelope, not a fire-and-yank. The defect this replaces: `.text-gilt` used the
- * infinite `gold-shimmer-slide` (`1 forwards`), which HELD its gilt terminal frame
- * forever, and the consumer ripped the class off on a `setTimeout` — but the gold
- * gradient lives in `background-image`, which no transition covers, so it SNAPPED
- * off in one frame.
- *
- * This keyframe owns the WHOLE envelope and RESOLVES TO THE RESTING INK — there is
- * nothing left to yank when it ends:
- *   - `-webkit-text-fill-color` (and `color`) ride from the figure's OWN ink
- *     (`currentColor` — the consumer's data-pole green/red) → `transparent` (the
- *     gilt gradient shows through `background-clip:text`) → back to `currentColor`.
- *     So the gilt FADES UP and FADES DOWN; at 0% and 100% the figure paints its own
- *     ink and the gradient is occluded — the resting state, by construction.
- *   - `background-position` slides the gradient across through the same window.
- * No `forwards` is needed (the final keyframe IS rest), so on completion the class
- * may simply stop mattering — the snap is structurally impossible. */
-@keyframes gold-shimmer-pulse {
-    0% {
-        background-position: 150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
-    }
-    25% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-    }
-    75% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-    }
-    100% {
-        background-position: -150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
-    }
-}
-
-/* ── Crayon-wipe: the scroll-scrubbed draw-on (D6.c M1) ──────────────────────
- *
- * The bidirectional, scroll-scrubbed DRAW-ON of a hand-mark (the crayon/pen
- * underline, a drawn rule). The wipe is a `clip-path: inset()` of the LEFT edge
- * only — the mark draws from inset(0 100% 0 0) (fully clipped from the right, so
- * NOTHING shows) to inset(0) (fully revealed) — so the underline DRAWS as the
- * figure scrolls into view and UN-DRAWS as it scrolls back up. `clip-path` is the
- * compositor-eligible, FILTER-STABLE wipe (the medium's grain `feTurbulence`
- * rasters ONCE and is untouched by the clip — the cardinal "no per-frame raster"
- * discipline ds2-motion-field M1 names): clip-path animates on the compositor and
- * never re-runs the static filter, unlike a `stroke-dashoffset` draw under the
- * grain filter (which re-rasters per frame). The grammar mirrors scroll-driven.css
- * (the `view()`/`scroll()` timeline home): the keyframe lives here (the shared
- * @keyframes register); a consumer binds it to a NAMED `view-timeline` so the
- * draw-on SCRUBS bidirectionally with scroll (forward → draws, back → un-draws),
- * never a one-shot. The `.crayon-wipe` utility below is the binding.
- *
- * The keyframe itself is timeline-agnostic — it is equally a load-clock draw-on
- * (bound to a keyframes.js Sequence) or a scroll scrub (bound to a view-timeline).
- * The DEFAULT consumer is the scroll scrub (the figure-item underline drawing into
- * the lower third), hence the utility's `view()` binding.
- *
- * Reduced-motion: the utility (NOT the keyframe) gates — under PRM the mark is SET
- * to inset(0) (fully drawn, never animated), the correct degrade for a permanent
- * structural draw (information parity: the underline is present, just not drawn).
+/* ── 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 its OWN keyframes (gold-shimmer-slide
+ * / shimmer above), never sparkle-sweep.
  */
-@keyframes crayon-wipe {
-    from {
-        /* clipped from the RIGHT by 100% → the mark is fully hidden (nothing
-           drawn yet); the left edge is the pen-tip about to move right. */
-        clip-path: inset(0 100% 0 0);
-    }
-    to {
-        /* fully revealed — the mark is wholly drawn. */
-        clip-path: inset(0 0 0 0);
-    }
-}
-
-/* ── .crayon-wipe — bind the wipe to a scroll view-timeline (D6.c M1) ──────────
- * The scroll-scrubbed draw-on utility. A consumer puts `.crayon-wipe` on a
- * hand-mark surface (the underline span, a drawn rule) and the mark draws/un-draws
- * as it scrolls through its OWN `view()` timeline — a bidirectional scrub, free,
- * off the main thread. The animation is `paused` with `animation-timeline: view()`
- * so the scroll position IS the playhead (the native scroll-driven model — the
- * timeline drives the frame, time does not). The named timeline is overridable
- * (`--crayon-wipe-timeline`, default the element's own `view()`) so a consumer can
- * scrub off a SHARED beat timeline (the §--beat-tl the atlas scroll-driven.css
- * names) instead of the per-element view — that is the "named view-timeline so a
- * consumer scrubs a draw-on bidirectionally" contract.
- *
- * @supports-gated + PRM-OUTER-gated, mirroring scroll-driven.css exactly: the
- * whole binding sits under `prefers-reduced-motion: no-preference`, so under PRM
- * the animation never attaches and the mark renders in its terminal `inset(0)`
- * (fully-drawn) state — the static-draw degrade. The draw range is `entry`-keyed
- * (the mark draws as it ENTERS the lower viewport), tunable via
- * `--crayon-wipe-range-{start,end}`. */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        .crayon-wipe {
-            animation: crayon-wipe auto linear both;
-            animation-timeline: var(--crayon-wipe-timeline, view(block));
-            animation-range: var(--crayon-wipe-range-start, entry 0%)
-                var(--crayon-wipe-range-end, cover 35%);
-        }
-    }
-}
-
-/* ── Sparkle sweep: TOMBSTONE (D6.b — the disco-star excision) ──
- *
- * @deprecated 3.10 — DELETE in 3.11. The four-point `✦` star sweep was the one
- * garish gesture in the library; the user named it for removal ("remove the disco
- * star from all glass-ui elements"). Every in-tree consumer is re-homed: the
- * `btn-audacious` hover affirmation now rides the specular catch-light alone; the
- * gold-CTA rides the `btn-gold-bg-sweep` metal-catch; the chassis `complete`
- * celebration re-homes to the `.text-gilt` one-shot (utilities.css). The keyframe
- * body is EMPTIED rather than deleted for ONE minor so any out-of-tree consumer
- * (the slides decks) fails SOFT — a no-op animation, not an unknown-animation
- * error. The `--duration-sparkle` token is `@deprecated` alongside (tokens.css).
- * Full delete (this block + the token + the theme bridge) lands in 3.11. */
-@keyframes sparkle-sweep {
-    /* intentionally empty — tombstoned, see deprecation note above */
-}
 
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
  *
@@ -430,7 +315,11 @@
         opacity: 0;
         scale: var(--top-layer-enter-scale, 0.96);
         transition-property: opacity, scale, display, overlay;
-        transition-duration: var(--duration-normal);
+        /* 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. */
+        transition-duration: var(--spring-bouncy-duration);
         transition-timing-function: var(--spring-bouncy);
         transition-behavior: allow-discrete;
     }
@@ -451,16 +340,27 @@
      * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
      * non-modal — correct, no scrim). */
     dialog.glass-top-layer::backdrop {
-        background-color: hsl(var(--background) / 0);
+        /* 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: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        background-color: color-mix(
+            in srgb,
+            var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
+            transparent
+        );
         @starting-style {
-            background-color: hsl(var(--background) / 0);
+            background-color: color-mix(in srgb, var(--background) 0%, transparent);
         }
     }
 }

package/dist/styles/cards.css

@@ -46,3 +46,58 @@
         box-shadow: var(--shadow-cartoon-lg);
     }
 }
+
+/* ── Veil surface decoration (R5-7) ──────────────────────────────
+   The text-legibility PLATE register, ratified by three slides sites (the
+   deck cover subtitle / standfirst / closer lede). Conceptually the W55
+   adaptive-legibility tint applied as a LOCAL plate: a translucent glass
+   fill + blur that darkens content-on-glass over a busy/bright backdrop so
+   text clears AA, but with the BOXED look STRIPPED — no border, no rim, no
+   highlight (the user's read: the border+rim "reads as a dividing line on a
+   text plate"). It is the `surface` sibling of `cartoon` — a decoration-only
+   utility, NOT a tier of its own.
+
+   It routes the glass MATERIAL through the `--glass-*` ladder (`--veil-bg`
+   defaults to the `quiet` rung's adaptive-tint mix, `--veil-blur` to the
+   quiet blur), so the glass-cohesion model sees a sanctioned glass register
+   (the level knob scales the blur; the W55 bright-bucket darkens the fill via
+   the same inheriting tint axis the rung already reads). What it carries on TOP
+   of a bare rung is the THREE veil deltas, each a `--veil-*` knob a consumer
+   retunes:
+
+     border  : none            (--veil-border, the dividing-line strip)
+     shadow  : none            (--veil-shadow, the rim/highlight strip)
+     feather : none (default)  (--veil-feather — an OPTIONAL radial mask that
+               fades the plate edges into the backdrop; off by default so the
+               plate is a clean rectangle, on when a consumer wants the
+               soft-edged "bleed into the page" text-plate look)
+
+   <Card surface="veil"> selects it; `--veil-bg`/`--veil-blur` ride the same
+   `--glass-*` rungs as the ladder, so one `--glass-level` / `--glass-backdrop`
+   override retunes it in lockstep with every other glass surface. */
+@utility veil-surface {
+    /* The glass material — routed through the `--glass-*` ladder so the
+       cohesion model reads a sanctioned glass register, and the W55 adaptive
+       darken (the inheriting `--glass-tint-*` axis) + the `--glass-level` clarity
+       knob reach the plate with NO veil-local recipe. Defaults to the `quiet`
+       rung; a consumer re-points `--veil-bg`/`--veil-blur` to any other rung. */
+    --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+    --veil-blur: var(--glass-blur-quiet);
+    /* The three veil deltas over a bare rung — each overridable. */
+    --veil-border: none;
+    --veil-shadow: none;
+    --veil-feather: none;
+
+    background: var(--veil-bg);
+    -webkit-backdrop-filter: var(--veil-blur);
+
+    backdrop-filter: var(--veil-blur);
+    border: var(--veil-border);
+    box-shadow: var(--veil-shadow);
+    /* The optional radial feather — a `mask-image` only painted when
+       `--veil-feather` is set to a gradient (default `none` = no mask = a clean
+       rectangle). `mask-image: none` is the identity, so the default plate is
+       unmasked. `mask-image` Baseline 2023-12 — a non-supporting engine ignores
+       it and keeps the clean rectangle. */
+    mask-image: var(--veil-feather);
+}