@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/useTabRovingFocus-CG1H1k1J.js

@@ -0,0 +1,143 @@
+import { t as e } from "./useLiquidFlex-Ch4exNvN.js";
+import { n as t, r as n } from "./writeVelocityWeight-D1rvdxJu.js";
+import { computed as r, nextTick as i, onMounted as a, onUnmounted as o, ref as s, watch as c } from "vue";
+//#region src/composables/motion/useSelectionIndicator.ts
+var l = 1.11, u = 1.045, d = .82;
+function f(r) {
+	let { containerRef: f, indicatorRef: p, buttonRefs: m, options: h, model: g, activeValues: _, vertical: v } = r, y = s({
+		width: "0px",
+		transform: "translateX(0px)",
+		opacity: "0"
+	});
+	function b() {
+		let e = h.value.findIndex((e) => e.value === g.value);
+		if (e < 0 || !m.value[e]) return;
+		let t = m.value[e];
+		if (v.value) {
+			let e = t.offsetHeight, n = t.offsetTop + e / 2;
+			y.value = {
+				height: `${e}px`,
+				width: "",
+				transform: `translateY(${n - e / 2}px)`,
+				opacity: "1"
+			};
+		} else {
+			let e = t.offsetWidth, n = t.offsetLeft + e / 2;
+			y.value = {
+				width: `${e}px`,
+				height: "",
+				transform: `translateX(${n - e / 2}px)`,
+				opacity: "1"
+			};
+		}
+	}
+	function x() {
+		b();
+	}
+	let S = -1, C = null, w = l, T = e({
+		from: 0,
+		to: 0,
+		axis: "width",
+		squishLaw: "linear",
+		maxStretch: () => w
+	}), E = u, D = e({
+		from: 1,
+		to: () => E,
+		axis: "width",
+		squishLaw: "linear"
+	});
+	function O() {
+		return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	}
+	function k(e) {
+		let t = getComputedStyle(e).getPropertyValue("--tab-indicator-duration").trim();
+		return t ? t.endsWith("ms") ? Number.parseFloat(t) || 340 : t.endsWith("s") ? (Number.parseFloat(t) || .34) * 1e3 : Number.parseFloat(t) || 340 : 340;
+	}
+	function A(e) {
+		let r = p.value;
+		if (!r) {
+			S = e;
+			return;
+		}
+		if (O()) {
+			S = e;
+			return;
+		}
+		let i = m.value[S], a = m.value[e];
+		if (S = e, !i || !a) return;
+		let o = v.value ? f.value?.offsetHeight || a.offsetParent?.offsetHeight || 1 : f.value?.offsetWidth || a.offsetParent?.offsetWidth || 1, s = v.value ? Math.abs(a.offsetTop - i.offsetTop) : Math.abs(a.offsetLeft - i.offsetLeft), c = o > 0 ? Math.min(s / o, 1) : 0, l = getComputedStyle(r), u = l.getPropertyValue("--tab-indicator-max-stretch").trim();
+		w = t(r, Number(u) || 1.11), T.squish(c);
+		let h = l.getPropertyValue("--tab-indicator-blob-max").trim(), g = Number(h) || 1.045, _ = Math.sqrt(1.14), y = t(r, g);
+		E = y > _ ? _ : y, n(r, T.flexVel.value), C && clearTimeout(C), r.style.setProperty("--stretch", String(T.stretch.value)), D.drive(1), r.style.setProperty("--tab-blob", String(D.size.value));
+		let b = k(r) * d;
+		C = setTimeout(() => {
+			T.squish(0), r.style.setProperty("--stretch", String(T.stretch.value)), D.drive(0), r.style.setProperty("--tab-blob", String(D.size.value)), n(r, 0), C = null;
+		}, b);
+	}
+	c(() => g.value, () => i(x)), c(() => h.value, () => i(x), { deep: !0 }), c(() => v.value, () => i(x));
+	let j = null;
+	return a(() => {
+		S = h.value.findIndex((e) => _.value.includes(e.value)), i(x), f.value && (j = new ResizeObserver(() => x()), j.observe(f.value));
+	}), o(() => {
+		j?.disconnect(), C && clearTimeout(C);
+	}), {
+		singleSliderStyle: y,
+		squishOnTravel: A
+	};
+}
+//#endregion
+//#region src/components/tabs/composables/useTabRovingFocus.ts
+function p(e) {
+	let { stripOptions: t, stripValue: n, isVertical: i, buttonRefs: a, select: o } = e, s = r(() => {
+		let e = t.value.findIndex((e) => e.value === n.value);
+		return e >= 0 ? e : 0;
+	});
+	function c(e) {
+		return e === s.value ? 0 : -1;
+	}
+	function l(e, n) {
+		let r = t.value.length;
+		if (r !== 0) for (let i = 1; i <= r; i++) {
+			let s = (e + n * i + r * i) % r, c = t.value[s];
+			if (c && !c.disabled) {
+				a.value[s]?.focus(), o(c.value, s);
+				return;
+			}
+		}
+	}
+	function u(e) {
+		let n = t.value.length, r = e === "first" ? Array.from({ length: n }, (e, t) => t) : Array.from({ length: n }, (e, t) => n - 1 - t);
+		for (let e of r) {
+			let n = t.value[e];
+			if (n && !n.disabled) {
+				a.value[e]?.focus(), o(n.value, e);
+				return;
+			}
+		}
+	}
+	function d(e) {
+		let t = s.value, n = i.value ? "ArrowDown" : "ArrowRight", r = i.value ? "ArrowUp" : "ArrowLeft";
+		switch (e.key) {
+			case n:
+				e.preventDefault(), l(t, 1);
+				break;
+			case r:
+				e.preventDefault(), l(t, -1);
+				break;
+			case "Home":
+				e.preventDefault(), u("first");
+				break;
+			case "End":
+				e.preventDefault(), u("last");
+				break;
+			default: break;
+		}
+	}
+	return {
+		activeIndex: s,
+		rovingTabindex: c,
+		onStripKeydown: d
+	};
+}
+//#endregion
+export { f as a, d as i, u as n, l as r, p as t };

package/dist/useTouchGate-BlegwvwL.js

@@ -0,0 +1,84 @@
+import { t as e } from "./useTimer-CkDV8SC2.js";
+import { getCurrentScope as t, onScopeDispose as n, ref as r } from "vue";
+//#region src/composables/dom/useTouchGate.ts
+var i = /* @__PURE__ */ new Set(), a = !1;
+function o(e) {
+	for (let t of i) {
+		if (!t.isActive()) continue;
+		let n = t.controlEl();
+		n && !n.contains(e.target) && t.deactivate();
+	}
+}
+function s() {
+	a || typeof document > "u" || (document.addEventListener("touchstart", o, { passive: !0 }), a = !0);
+}
+function c() {
+	i.size > 0 || !a || typeof document > "u" || (document.removeEventListener("touchstart", o), a = !1);
+}
+function l(a = 3e3) {
+	let o = r(!1), l = typeof window < "u" && "ontouchstart" in window, u = null, d = null, f = !1, p = !1, m = e(() => {
+		x();
+	}, a, { immediate: !1 }), h = e(() => {
+		f && u && (f = !1, d = null, y(u));
+	}, 150, { immediate: !1 });
+	function g() {
+		m.stop();
+	}
+	function _() {
+		h.stop(), f = !1, d = null;
+	}
+	function v() {
+		g(), m.start(a);
+	}
+	function y(e) {
+		o.value = !0, e.style.touchAction = "none", v();
+	}
+	function b(e) {
+		if (p = e, e) {
+			g();
+			return;
+		}
+		v();
+	}
+	function x() {
+		p || (g(), _(), o.value = !1, u &&= (u.style.touchAction = "", null));
+	}
+	function S(e, t) {
+		return l ? (u = e, o.value ? (v(), !0) : (_(), f = !0, d = t, h.start(150), !1)) : !0;
+	}
+	function C(e) {
+		if (!l || !f || d === null) return;
+		let t = e.touches[0]?.clientY ?? 0;
+		Math.abs(t - d) > 10 && _();
+	}
+	function w() {
+		if (l) {
+			if (f && u) {
+				_(), y(u);
+				return;
+			}
+			o.value && v();
+		}
+	}
+	let T = {
+		isActive: () => o.value,
+		controlEl: () => u,
+		deactivate: x
+	};
+	l && (i.add(T), s());
+	function E() {
+		g(), _(), l && (i.delete(T), c()), u &&= (u.style.touchAction = "", null);
+	}
+	return t() && n(E), {
+		isActive: o,
+		isTouchDevice: l,
+		handleTouchStart: S,
+		handleScrollCheck: C,
+		handleTouchEnd: w,
+		resetTimer: v,
+		deactivate: x,
+		suppressDeactivate: b
+	};
+}
+//#endregion
+export { l as t };

package/dist/useUserInvalidAria-Bkruei7M.js

@@ -0,0 +1,25 @@
+//#region src/composables/dom/useUserInvalidAria.ts
+function e(e = {}) {
+	return { bind: (e) => {
+		let t = /* @__PURE__ */ new WeakSet(), n = (e) => {
+			let t = e;
+			if (!t?.checkValidity) return;
+			let n = t.checkValidity();
+			t.setAttribute("aria-invalid", n ? "false" : "true");
+		}, r = (e) => {
+			let r = e.target;
+			r?.checkValidity && (t.add(r), n(r));
+		}, i = (e) => {
+			let r = e.target;
+			!r?.checkValidity || !t.has(r) || r.checkValidity() && n(r);
+		}, a = () => {
+			let r = e.querySelectorAll("input, textarea, select");
+			for (let e of r) e.checkValidity && (t.add(e), n(e));
+		};
+		return e.addEventListener("blur", r, !0), e.addEventListener("input", i, !0), e.addEventListener("submit", a, !0), () => {
+			e.removeEventListener("blur", r, !0), e.removeEventListener("input", i, !0), e.removeEventListener("submit", a, !0);
+		};
+	} };
+}
+//#endregion
+export { e as t };

package/dist/watercolor-dot.d.ts

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

package/dist/watercolor-dot.js

@@ -1,7 +1,8 @@
 import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { n as t, t as n } from "./prng-B-d9eYX8.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onUnmounted as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toRef as g, useId as _, watch as v, withCtx as y } from "vue";
-//#region src/components/custom/watercolor-dot/prng.ts
+import { t } from "./useRAFLoop-CvOo_kgb.js";
+import { n, t as r } from "./prng-B0PLRmR6.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toRef as g, useId as _, watch as v, withCtx as y } from "vue";
+//#region src/components/watercolor-dot/prng.ts
 function b(e, t, n) {
 	let r = [];
 	for (let i = 0; i < 8; i++) r.push(t + e() * (n - t));
@@ -11,7 +12,7 @@ function x(e) {
 	return `${e[0]}% ${e[1]}% ${e[2]}% ${e[3]}% / ${e[4]}% ${e[5]}% ${e[6]}% ${e[7]}%`;
 }
 //#endregion
-//#region src/components/custom/watercolor-dot/useWatercolorBlob.ts
+//#region src/components/watercolor-dot/useWatercolorBlob.ts
 var S = [
 	"scaleX",
 	"scaleY",
@@ -25,17 +26,17 @@ var S = [
 	skewY: 1.6,
 	rotate: 1.4
 };
-function w(e, r = {}) {
-	let { animate: i = !1, cycleDuration: a = 4e3, range: o = [20, 80], seed: s = "" } = r, c = p(""), l = p(""), u = p("none"), f = t(n((typeof e == "function" ? e : () => e.value)() + s));
-	c.value = x(b(f, o[0], o[1])), l.value = x(b(f, o[0], o[1]));
+function w(e, i = {}) {
+	let { animate: a = !1, cycleDuration: o = 4e3, range: s = [20, 80], seed: c = "" } = i, l = p(""), u = p(""), d = p("none"), f = n(r((typeof e == "function" ? e : () => e.value)() + c));
+	l.value = x(b(f, s[0], s[1])), u.value = x(b(f, s[0], s[1]));
 	let m = () => {};
-	if (!i) return typeof e != "function" && v(e, (e) => {
-		let r = t(n(e + s));
-		c.value = x(b(r, o[0], o[1])), l.value = x(b(r, o[0], o[1]));
+	if (!a) return typeof e != "function" && v(e, (e) => {
+		let t = n(r(e + c));
+		l.value = x(b(t, s[0], s[1])), u.value = x(b(t, s[0], s[1]));
 	}), {
-		borderRadius: c,
-		hoverBorderRadius: l,
-		transform: u,
+		borderRadius: l,
+		hoverBorderRadius: u,
+		transform: d,
 		nudge: m
 	};
 	let h = [];
@@ -44,57 +45,51 @@ function w(e, r = {}) {
 		h.push({
 			from: 0,
 			to: -1 + f() * 2,
-			startTime: -r * a * n,
-			duration: a * n,
+			startTime: -r * o * n,
+			duration: o * n,
 			amp: t
 		});
 	}
-	let g = null, _ = 0, y = h.map(() => 0);
-	function w() {
-		let e = 1 + y[0] * h[0].amp, t = 1 + y[1] * h[1].amp, n = y[2] * h[2].amp, r = y[3] * h[3].amp, i = y[4] * h[4].amp;
+	let g = 0, _ = h.map(() => 0);
+	function y() {
+		let e = 1 + _[0] * h[0].amp, t = 1 + _[1] * h[1].amp, n = _[2] * h[2].amp, r = _[3] * h[3].amp, i = _[4] * h[4].amp;
 		return `scale(${e.toFixed(4)}, ${t.toFixed(4)}) skew(${n.toFixed(3)}deg, ${r.toFixed(3)}deg) rotate(${i.toFixed(3)}deg)`;
 	}
-	function T(e) {
-		_ = e;
+	function w(e) {
+		g = e;
 		for (let t = 0; t < h.length; t++) {
 			let n = h[t];
 			if (!n) continue;
 			let r = (e - n.startTime) / n.duration;
-			r >= 1 && (n.from = n.to, n.to = -1 + f() * 2, n.duration = a * (.5 + f() * 1.3), n.startTime = e, r = 0);
+			r >= 1 && (n.from = n.to, n.to = -1 + f() * 2, n.duration = o * (.5 + f() * 1.3), n.startTime = e, r = 0);
 			let i = .5 - .5 * Math.cos(Math.PI * r);
-			y[t] = n.from + i * (n.to - n.from);
+			_[t] = n.from + i * (n.to - n.from);
 		}
-		u.value = w(), g = requestAnimationFrame(T);
+		d.value = y();
 	}
 	return m = () => {
-		let e = _ || performance.now();
+		let e = g || performance.now();
 		for (let t = 0; t < h.length; t++) {
 			let n = h[t];
-			n && (n.from = y[t] ?? n.from, n.to = -1 + f() * 2, n.duration = a * (.25 + f() * .25), n.startTime = e);
+			n && (n.from = _[t] ?? n.from, n.to = -1 + f() * 2, n.duration = o * (.25 + f() * .25), n.startTime = e);
 		}
-	}, g = requestAnimationFrame(T), d(() => {
-		g !== null && (cancelAnimationFrame(g), g = null);
+	}, t((e) => w(e.now), {
+		pauseWhenHidden: !0,
+		respectReducedMotion: !0
 	}), {
-		borderRadius: c,
-		hoverBorderRadius: l,
-		transform: u,
+		borderRadius: l,
+		hoverBorderRadius: u,
+		transform: d,
 		nudge: m
 	};
 }
 //#endregion
-//#region src/components/custom/watercolor-dot/WatercolorDot.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/watercolor-dot/WatercolorDot.vue?vue&type=script&setup=true&lang.ts
 var T = {
 	class: "watercolor-filter-host",
 	"aria-hidden": "true",
 	focusable: "false"
-}, E = ["seed"], D = {
-	key: 0,
-	class: "watercolor-ghost-overlay",
-	"aria-hidden": "true",
-	focusable: "false",
-	preserveAspectRatio: "none",
-	viewBox: "0 0 100 100"
-}, O = /* @__PURE__ */ e(/* @__PURE__ */ c({
+}, E = ["seed"], D = /* @__PURE__ */ e(/* @__PURE__ */ l({
 	__name: "WatercolorDot",
 	props: {
 		color: {},
@@ -109,7 +104,7 @@ var T = {
 		seed: { default: "" }
 	},
 	setup(e) {
-		let t = e, c = `watercolor-filter-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`, d = r(() => `url(#${c})`), v = r(() => n(t.color + t.seed) % 256), b = g(t, "color"), x = p(!1), S = w(b, {
+		let t = e, n = `watercolor-filter-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`, l = i(() => `url(#${n})`), v = i(() => r(t.color + t.seed) % 256), b = g(t, "color"), x = p(!1), S = w(b, {
 			animate: t.animate,
 			cycleDuration: t.cycleDuration,
 			range: t.range,
@@ -118,55 +113,52 @@ var T = {
 		function C() {
 			x.value = !0, t.animate && S.nudge();
 		}
-		let O = r(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), k = r(() => t.animate ? S.transform.value : "none");
-		return (t, n) => (f(), i(h(e.tag), {
-			class: l(["watercolor-swatch", e.animate && "watercolor-animated"]),
+		let D = i(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), O = i(() => t.animate ? S.transform.value : "none");
+		return (t, r) => (f(), a(h(e.tag), {
+			class: u(["watercolor-swatch", e.animate && "watercolor-animated"]),
 			"data-testid": "watercolor-swatch",
 			"data-variant": e.variant,
-			style: u({
+			style: d({
 				backgroundColor: e.variant === "ghost" ? void 0 : e.color,
-				borderRadius: O.value,
+				borderRadius: D.value,
 				"--watercolor-color": e.color,
-				"--watercolor-filter": d.value,
-				"--watercolor-wobble": k.value
+				"--watercolor-filter": l.value,
+				"--watercolor-wobble": O.value
 			}),
 			onMouseenter: C,
-			onMouseleave: n[0] ||= (e) => x.value = !1
+			onMouseleave: r[0] ||= (e) => x.value = !1
 		}, {
 			default: y(() => [
-				(f(), o("svg", T, [s("defs", null, [s("filter", {
-					id: c,
+				(f(), s("svg", T, [c("defs", null, [c("filter", {
+					id: n,
 					x: "-15%",
 					y: "-15%",
 					width: "130%",
 					height: "130%",
 					"color-interpolation-filters": "linearRGB"
-				}, [s("feTurbulence", {
+				}, [c("feTurbulence", {
 					type: "fractalNoise",
 					baseFrequency: "0.05",
 					numOctaves: "5",
 					seed: v.value,
 					stitchTiles: "stitch",
 					result: "noise"
-				}, null, 8, E), n[1] ||= s("feDisplacementMap", {
+				}, null, 8, E), r[1] ||= c("feDisplacementMap", {
 					in: "SourceGraphic",
 					in2: "noise",
 					scale: "1.3",
 					xChannelSelector: "R",
 					yChannelSelector: "G"
 				}, null, -1)])])])),
-				e.variant === "ghost" ? (f(), o("svg", D, [s("ellipse", {
+				e.variant === "ghost" ? (f(), s("div", {
+					key: 0,
 					class: "watercolor-ghost-stroke",
-					cx: "50",
-					cy: "50",
-					rx: "46",
-					ry: "46",
-					fill: "none",
-					stroke: "var(--watercolor-color)",
-					"stroke-width": "2",
-					"vector-effect": "non-scaling-stroke",
-					style: u({ filter: d.value })
-				}, null, 4)])) : a("", !0),
+					"aria-hidden": "true",
+					style: d({
+						borderRadius: D.value,
+						filter: l.value
+					})
+				}, null, 4)) : o("", !0),
 				m(t.$slots, "default", {}, void 0, !0)
 			]),
 			_: 3
@@ -176,6 +168,6 @@ var T = {
 			"style"
 		]));
 	}
-}), [["__scopeId", "data-v-76317add"]]);
+}), [["__scopeId", "data-v-a8dd9e80"]]);
 //#endregion
-export { O as WatercolorDot, n as hashString, t as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };
+export { D as WatercolorDot, r as hashString, n as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };

package/dist/writeVelocityWeight-D1rvdxJu.js

@@ -0,0 +1,19 @@
+//#region src/composables/motion/core/writeVelocityWeight.ts
+var e = .618;
+function t(t, n) {
+	if (!t) return;
+	let r = n < 0 ? 0 : n > 1 ? 1 : n, i = e + (1 - e) * r;
+	t.style.setProperty("--flex-vel", r.toFixed(4)), t.style.setProperty("--motion-weight", i.toFixed(4));
+}
+function n(t, n) {
+	if (n <= 1) return n < 1 ? 1 : n;
+	let r = e, i = 0;
+	if (t) {
+		let e = getComputedStyle(t), n = Number.parseFloat(e.getPropertyValue("--motion-weight")), a = Number.parseFloat(e.getPropertyValue("--flex-vel"));
+		Number.isFinite(n) && (r = n < 0 ? 0 : n), Number.isFinite(a) && (i = a < 0 ? 0 : a > 1 ? 1 : a);
+	}
+	let a = r + (1 - r) * i, o = 1 + (n - 1) * (a / e);
+	return o < 1 ? 1 : o;
+}
+//#endregion
+export { n, t as r, e as t };