@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/PagerDots-BEq0MgtH.js

@@ -0,0 +1,311 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./useLiquidFlex-TJZmRqyY.js";
+import { t as n } from "./useResizeObserver-CdUlm2QZ.js";
+import { t as r } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as i } from "./useLeadTrail-AW1-zZcd.js";
+import { Fragment as a, computed as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onMounted as m, openBlock as h, ref as g, renderList as _, unref as v, useId as y, useModel as b, watch as x } from "vue";
+//#region src/components/pager-dots/pagerWindow.ts
+function S(e, t, n) {
+	let r = Math.max(1, Math.min(n, e)), i = e <= r ? 0 : Math.max(0, Math.min(t - Math.floor(r / 2), e - r)), a = Math.min(r, e), o = Array.from({ length: a }, (e, t) => i + t);
+	return {
+		shown: o,
+		clippedStart: o.length > 0 && o[0] > 0,
+		clippedEnd: o.length > 0 && o[o.length - 1] < e - 1
+	};
+}
+var C = .7;
+//#endregion
+//#region src/components/pager-dots/composables/usePagerWorm.ts
+function w(e, t, n) {
+	if (!e) return n;
+	let r = getComputedStyle(e).getPropertyValue(t).trim();
+	if (!r) return n;
+	if (r.endsWith("rem")) {
+		let e = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+		return (parseFloat(r) || .8125) * e;
+	}
+	return parseFloat(r) || n;
+}
+function T(e) {
+	let { rootEl: r, wormLayerEl: a, bodyAEl: o, bodyBEl: s, neckEl: c, bedDotEls: l, shown: u, vertical: f, active: p } = e, h = t({
+		from: 0,
+		to: 0,
+		axis: "width",
+		squishLaw: "linear",
+		maxStretch: () => w(r.value, "--pager-worm-max-stretch", 1.2) || 1.2
+	});
+	function g(e) {
+		let t = a.value;
+		if (!t) return null;
+		let n = l.get(e);
+		if (!n) {
+			let t = u.value;
+			if (t.length === 0) return null;
+			let r = t.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t);
+			if (n = l.get(r), !n) return null;
+		}
+		let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+		return f.value ? i.top + i.height / 2 - r.top : i.left + i.width / 2 - r.left;
+	}
+	function _(e) {
+		let t = o.value, n = s.value, i = c.value, l = a.value;
+		if (!t || !n || !i || !l) return;
+		let u = f.value, d = w(r.value, "--pager-dot-size", 13), p = w(r.value, "--pager-dot-elongated", 36), m = e.hi - e.lo;
+		m > p && (m = p);
+		let g = (e.lo + e.hi) / 2, _ = g - m / 2, y = g + m / 2;
+		h.squish(p > 0 ? m / p : 0), l.style.setProperty("--stretch", h.stretch.value.toFixed(4)), t.style.translate = v(_, u), n.style.translate = v(y, u);
+		let b = d > 0 ? Math.max(m / d, 1e-4) : 1e-4;
+		i.style.translate = v(g, u), i.style.scale = u ? `${C.toFixed(4)} ${b.toFixed(4)}` : `${b.toFixed(4)} ${C.toFixed(4)}`, i.style.opacity = m > .5 ? "1" : "0";
+	}
+	function v(e, t) {
+		return t ? `0 ${e.toFixed(2)}px` : `${e.toFixed(2)}px 0`;
+	}
+	let y = i({ onFrame: _ });
+	function b() {
+		let e = g(p.value);
+		e != null && y.seat(e);
+	}
+	function S() {
+		let e = g(p.value);
+		e != null && y.drive(e);
+	}
+	x(p, () => {
+		d(S);
+	}), x(u, () => {
+		d(S);
+	}), n(r, () => {
+		d(b);
+	}), m(() => {
+		d(b);
+	});
+}
+//#endregion
+//#region src/components/pager-dots/PagerDots.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"role",
+	"aria-label",
+	"aria-orientation",
+	"data-orientation"
+], D = {
+	class: "pager-bed-layer",
+	"aria-hidden": "true"
+}, O = ["data-active", "data-edge"], k = [
+	"role",
+	"aria-selected",
+	"aria-current",
+	"aria-label",
+	"tabindex",
+	"data-active",
+	"data-edge",
+	"onClick"
+], A = /*#__PURE__*/ r(/* @__PURE__ */ l({
+	__name: "PagerDots",
+	props: /*@__PURE__*/ u({
+		count: {},
+		orientation: { default: "horizontal" },
+		windowFit: {},
+		ring: {
+			type: Boolean,
+			default: !0
+		},
+		pattern: { default: "tabs" },
+		ariaLabel: { default: "Pager" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["select"], ["update:active"]),
+	setup(t, { emit: n }) {
+		let r = t, i = n, l = b(t, "active"), u = o(() => Number.isFinite(r.count) ? Math.max(0, Math.trunc(r.count)) : 0), m = o(() => u.value === 0 ? 0 : Math.min(u.value - 1, Math.max(0, Math.round(l.value || 0))));
+		x([u, l], ([, e]) => {
+			e !== m.value && (l.value = m.value);
+		}, { immediate: !0 });
+		let C = y().replace(/[^a-zA-Z0-9_-]/g, ""), w = `pager-worm-filter-${C}`, A = `pager-neck-clip-${C}`, j = g(null), M = g(null), N = g(null), P = g(null), F = g(null), I = /* @__PURE__ */ new Map();
+		function L(e, t) {
+			t ? I.set(e, t) : I.delete(e);
+		}
+		let R = /* @__PURE__ */ new Map();
+		function z(e, t) {
+			t ? R.set(e, t) : R.delete(e);
+		}
+		let B = o(() => r.orientation === "vertical"), V = o(() => r.windowFit && r.windowFit > 0 ? S(u.value, m.value, r.windowFit) : {
+			shown: Array.from({ length: u.value }, (e, t) => t),
+			clippedStart: !1,
+			clippedEnd: !1
+		}), H = o(() => V.value.shown);
+		T({
+			rootEl: j,
+			wormLayerEl: M,
+			bodyAEl: N,
+			bodyBEl: P,
+			neckEl: F,
+			bedDotEls: R,
+			shown: H,
+			vertical: B,
+			active: m
+		}), x(H, (e) => {
+			let t = j.value;
+			if (!t || !t.contains(document.activeElement)) return;
+			let n = document.activeElement;
+			e.some((e) => I.get(e) === n) || d(() => I.get(m.value)?.focus());
+		});
+		function U(e) {
+			l.value = e, i("select", e);
+		}
+		let W = o(() => {
+			let e = H.value;
+			return e.length === 0 ? -1 : e.includes(m.value) ? m.value : e[0];
+		});
+		function G(e) {
+			return e === W.value ? 0 : -1;
+		}
+		function K(e) {
+			U(e), d(() => I.get(e)?.focus());
+		}
+		function q(e, t) {
+			let n = u.value;
+			if (n !== 0) for (let r = 1; r <= n; r++) {
+				let i = (e + t * r + n * r) % n;
+				if (!I.get(i)?.disabled) {
+					K(i);
+					return;
+				}
+			}
+		}
+		function J(e) {
+			let t = u.value;
+			if (t === 0) return;
+			let n = e === "first" ? Array.from({ length: t }, (e, t) => t) : Array.from({ length: t }, (e, n) => t - 1 - n);
+			for (let e of n) if (!I.get(e)?.disabled) {
+				K(e);
+				return;
+			}
+		}
+		function Y(e) {
+			let t = m.value, n = B.value ? "ArrowDown" : "ArrowRight", r = B.value ? "ArrowUp" : "ArrowLeft", i = !0;
+			switch (e.key) {
+				case n:
+					q(t, 1);
+					break;
+				case r:
+					q(t, -1);
+					break;
+				case "Home":
+					J("first");
+					break;
+				case "End":
+					J("last");
+					break;
+				default:
+					i = !1;
+					break;
+			}
+			i && (e.preventDefault(), e.stopPropagation());
+		}
+		return (n, i) => (h(), s("div", {
+			ref_key: "rootEl",
+			ref: j,
+			"data-slot": "pager-dots",
+			role: t.pattern === "group" ? "group" : "tablist",
+			"aria-label": t.ariaLabel,
+			"aria-orientation": t.pattern === "group" ? void 0 : t.orientation,
+			"data-orientation": t.orientation,
+			style: p({
+				"--pager-goo-filter": `url(#${w})`,
+				"--pager-neck-clip": `url(#${A})`
+			}),
+			onKeydown: Y,
+			class: f(v(e)("pager-dots inline-flex items-center justify-center gap-1.5", t.ring && "glass-pager-ring", t.orientation === "vertical" && "flex-col", r.class))
+		}, [
+			c("svg", {
+				class: "pager-worm-defs",
+				width: "1",
+				height: "1",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [c("defs", null, [c("filter", {
+				id: w,
+				"color-interpolation-filters": "sRGB",
+				x: "-50%",
+				y: "-50%",
+				width: "200%",
+				height: "200%"
+			}, [...i[0] ||= [
+				c("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: "4",
+					result: "blur"
+				}, null, -1),
+				c("feColorMatrix", {
+					in: "blur",
+					mode: "matrix",
+					values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6",
+					result: "goo"
+				}, null, -1),
+				c("feComposite", {
+					in: "SourceGraphic",
+					in2: "goo",
+					operator: "atop"
+				}, null, -1)
+			]]), c("clipPath", {
+				id: A,
+				clipPathUnits: "objectBoundingBox"
+			}, [...i[1] ||= [c("path", { d: "M0,0 C0.25,0 0.36,0.34 0.5,0.34 C0.64,0.34 0.75,0 1,0 L1,1 C0.75,1 0.64,0.66 0.5,0.66 C0.36,0.66 0.25,1 0,1 Z" }, null, -1)]])])]),
+			c("div", D, [(h(!0), s(a, null, _(H.value, (e) => (h(), s("span", {
+				key: e,
+				ref_for: !0,
+				ref: (t) => z(e, t),
+				class: "goo-dot",
+				"data-active": e === m.value ? "" : void 0,
+				"data-edge": e === H.value[0] && V.value.clippedStart || e === H.value[H.value.length - 1] && V.value.clippedEnd ? "" : void 0
+			}, null, 8, O))), 128))]),
+			c("div", {
+				ref_key: "wormLayerEl",
+				ref: M,
+				class: "pager-worm-layer",
+				"aria-hidden": "true"
+			}, [
+				c("span", {
+					ref_key: "bodyAEl",
+					ref: N,
+					class: "goo-body"
+				}, null, 512),
+				c("span", {
+					ref_key: "neckEl",
+					ref: F,
+					class: "goo-neck"
+				}, null, 512),
+				c("span", {
+					ref_key: "bodyBEl",
+					ref: P,
+					class: "goo-body"
+				}, null, 512)
+			], 512),
+			(h(!0), s(a, null, _(H.value, (e, n) => (h(), s("button", {
+				key: e,
+				ref_for: !0,
+				ref: (t) => L(e, t),
+				type: "button",
+				role: t.pattern === "group" ? void 0 : "tab",
+				"aria-selected": t.pattern === "group" ? void 0 : e === m.value,
+				"aria-current": t.pattern === "group" && e === m.value ? "true" : void 0,
+				"aria-label": `Go to slide ${e + 1}`,
+				tabindex: G(e),
+				"data-active": e === m.value ? "" : void 0,
+				"data-edge": n === 0 && V.value.clippedStart || n === H.value.length - 1 && V.value.clippedEnd ? "" : void 0,
+				"data-slot": "pager-dot",
+				class: "pager-dot focus-ring tap-squish",
+				onClick: (t) => U(e)
+			}, null, 8, k))), 128))
+		], 46, E));
+	}
+}), [["__scopeId", "data-v-1661502e"]]);
+//#endregion
+export { A as t };

package/dist/Surface-kFQeYrYv.js

@@ -0,0 +1,82 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./vSpecular-DMJo8pfD.js";
+import { t as n } from "./resolveSurfaceClass-DCZ4PZcy.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, useAttrs as u, withCtx as d, withDirectives as f } from "vue";
+import { Primitive as p } from "reka-ui";
+//#endregion
+//#region src/components/surface/Surface.vue
+var m = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "Surface",
+	props: {
+		material: { default: "elevated" },
+		tier: {},
+		surface: { default: "glass" },
+		deep: {
+			type: Boolean,
+			default: !1
+		},
+		shadow: {
+			type: Boolean,
+			default: !1
+		},
+		grain: {
+			type: Boolean,
+			default: !1
+		},
+		specular: { default: "off" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		as: { default: "div" }
+	},
+	setup(a) {
+		let m = a, h = u(), g = r(() => {
+			let { asChild: e, "as-child": t, ...n } = h;
+			return n;
+		}), _ = {
+			content: "quiet",
+			elevated: "resting",
+			functional: "floating",
+			overlay: "overlay"
+		}, v = r(() => m.deep && m.surface === "glass"), y = r(() => v.value ? "floating" : m.tier ?? _[m.material]), b = r(() => m.surface === "glass" && m.specular !== "off"), x = r(() => m.shadow && m.surface !== "veil"), S = r(() => b.value && m.specular === "full" ? {
+			"--glass-specular-intensity-rest": "0.04",
+			"--glass-specular-intensity-hover": "0.18",
+			"--glass-specular-intensity-active": "0.26"
+		} : void 0), C = r(() => [h.style, S.value]);
+		return (r, u) => f((s(), i(l(p), o(g.value, {
+			as: a.as,
+			"data-slot": l(h)["data-slot"] ?? "surface",
+			"data-material": a.material,
+			"data-tier": y.value,
+			"data-surface": a.surface,
+			"data-deep": v.value || void 0,
+			"data-shadow": x.value || void 0,
+			"data-grain": a.grain,
+			"data-specular": b.value ? a.specular : void 0,
+			style: C.value,
+			class: l(e)(l(n)(y.value, v.value), b.value && "glass-specular-track", m.class)
+		}), {
+			default: d(() => [c(r.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as",
+			"data-slot",
+			"data-material",
+			"data-tier",
+			"data-surface",
+			"data-deep",
+			"data-shadow",
+			"data-grain",
+			"data-specular",
+			"style",
+			"class"
+		])), [[l(t), b.value]]);
+	}
+});
+//#endregion
+export { m as t };

package/dist/accent-tone-solve-Cw7WkRD9.js

@@ -0,0 +1,14 @@
+import { i as e, t } from "./value-DMhh2R94.js";
+import { mixColors as n, safeAccentColor as r } from "@mkbabb/value.js/color";
+import { serializeCssColor as i } from "@mkbabb/value.js/css";
+//#region src/composables/color/accent-tone-solve.ts
+var a = "hsl(36 48% 97%)", o = 4.5, s = .18;
+function c(c, l = {}) {
+	let u = l.bandStrength ?? s, d = l.inkContrast ?? o, f = l.surface || a, p = e(c, "solveAccentInk:tone");
+	return t("solveAccentInk:serialize", i(t("solveAccentInk:contrast", r(p, t("solveAccentInk:band", n(e(f, "solveAccentInk:surface"), p, u, { space: "oklab" })), {
+		minimumRatio: d,
+		gamut: "srgb"
+	}))));
+}
+//#endregion
+export { c as solveAccentInk };

package/dist/animated-digit.js

@@ -1,9 +1,9 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t as n } from "./useAnimatedNumber-2XC4aRB6.js";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as n } from "./useAnimatedNumber-WPtMz0AN.js";
 import { computed as r, createElementBlock 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/animated-digit/AnimatedDigit.vue?vue&type=script&setup=true&lang.ts
-var d = ["data-is-animating"], f = /* @__PURE__ */ t(/* @__PURE__ */ a({
+var d = ["data-is-animating"], f = /*#__PURE__*/ t(/* @__PURE__ */ a({
 	__name: "AnimatedDigit",
 	props: {
 		value: {},
@@ -39,6 +39,6 @@ var d = ["data-is-animating"], f = /* @__PURE__ */ t(/* @__PURE__ */ a({
 			"data-is-animating": u(f).isAnimating.value ? "true" : "false"
 		}, l(p.value), 15, d));
 	}
-}), [["__scopeId", "data-v-30ebd230"]]);
+}), [["__scopeId", "data-v-1498a3dd"]]);
 //#endregion
 export { f as AnimatedDigit };

package/dist/asElement-CRnm6A2v.js

@@ -0,0 +1,9 @@
+//#region src/composables/motion/core/asElement.ts
+function e(e) {
+	if (!e) return null;
+	if (e instanceof HTMLElement) return e;
+	let t = e.$el;
+	return t instanceof HTMLElement ? t : null;
+}
+//#endregion
+export { e as t };