@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/expandable-container.d.ts

@@ -1 +1 @@
-export * from "./components/expandable-container";
+export * from "./components/expandable-container/index.js";

package/dist/expandable-container.js

@@ -1,26 +1,28 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./useSurfaceAxis-DudiZVOR.js";
-import { registerShortcut as n } from "./keyboard.js";
-import { t as r } from "./focus-scope-DUTKveod.js";
-import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as h, normalizeClass as g, onUnmounted as _, openBlock as v, renderSlot as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
-import { Maximize2 as w, Minimize2 as T } from "@lucide/vue";
+import { t as e } from "./focus-Duf7EpUu.js";
+import { registerShortcut as t } from "./keyboard.js";
+import { Teleport as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, onUnmounted as u, openBlock as d, ref as f, renderSlot as p, unref as m, useModel as h, watch as g, withCtx as _ } from "vue";
+import { FocusScope as v } from "reka-ui";
+import { Maximize2 as y, Minimize2 as b } from "@lucide/vue";
 //#region src/components/expandable-container/ExpandableContainer.vue?vue&type=script&setup=true&lang.ts
-var E = ["inert"], D = ["aria-label"], O = ["data-surface"], k = ["aria-label"], A = {
-	"data-part": "panel",
-	class: "h-full w-full"
-}, j = 0, M = null;
-function N() {
-	return typeof document > "u" ? !1 : (j === 0 && (M = document.body.style.overflow, document.body.style.overflow = "hidden"), j += 1, !0);
+var x = [
+	"data-state",
+	"data-surface",
+	"role",
+	"aria-label",
+	"aria-modal"
+], S = ["hidden"], C = ["data-position", "aria-label"], w = ["hidden"], T = ["data-position", "aria-label"], E = { "data-part": "panel" }, D = 0, O = null;
+function k() {
+	return typeof document > "u" ? !1 : (D === 0 && (O = document.body.style.overflow, document.body.style.overflow = "hidden"), D += 1, !0);
 }
-function P() {
-	typeof document > "u" || j === 0 || (--j, j === 0 && (document.body.style.overflow = M ?? "", M = null));
+function A() {
+	typeof document > "u" || D === 0 || (--D, D === 0 && (document.body.style.overflow = O ?? "", O = null));
 }
 //#endregion
 //#region src/components/expandable-container/ExpandableContainer.vue
-var F = /* @__PURE__ */ f({
+var j = /* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "ExpandableContainer",
-	props: /* @__PURE__ */ p({
+	props: /*@__PURE__*/ s({
 		buttonPosition: { default: "right" },
 		expandLabel: { default: "Fullscreen" },
 		collapseLabel: { default: "Exit fullscreen" },
@@ -33,94 +35,108 @@ var F = /* @__PURE__ */ f({
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(f) {
-		let p = f, j = o(() => t(p.surface)), M = x(f, "open");
-		function F() {
-			M.value = !0;
+	setup(o) {
+		let s = h(o, "open"), D = f(null);
+		function O() {
+			let e = D.value?.$el;
+			return e instanceof HTMLElement ? e : null;
 		}
-		function I() {
-			M.value = !1;
+		function j() {
+			s.value = !0;
 		}
-		let L = !1;
-		function R(e) {
-			if (e && !L) {
-				L = N();
-				return;
-			}
-			!e && L && (P(), L = !1);
+		function M() {
+			s.value = !1;
 		}
-		let z = null, B = null;
-		S(M, (e, t) => {
-			if (R(e), e && !t) {
+		let N = !1, P = null, F = null;
+		function I(e) {
+			e && !N ? N = k() : !e && N && (A(), N = !1);
+		}
+		function L() {
+			(O()?.querySelector("[autofocus]") ?? O()?.querySelector("[data-mode=\"collapse\"]") ?? O()?.querySelector(e) ?? O())?.focus();
+		}
+		async function R() {
+			await l(), await l(), L();
+		}
+		let z = ["[data-mode=\"expand\"]", ...e.split(", ").map((e) => `.expandable-container__chrome:not([hidden]) ${e}`)].join(", ");
+		function B() {
+			let e = F?.isConnected ? F : O()?.querySelector(z);
+			F = null, e?.focus();
+		}
+		function V(e) {
+			e.preventDefault();
+		}
+		return g(s, (e, n) => {
+			if (I(e), e && !n) {
 				let e = typeof document < "u" ? document.activeElement : null;
-				B = e instanceof HTMLElement ? e : null, z = n("Escape", () => {
-					M.value = !1;
-				}, {
+				F = e instanceof HTMLElement ? e : null, P = t("Escape", M, {
 					label: "Exit fullscreen",
 					group: "UI",
 					allowInInput: !0
-				});
-			} else !e && t && (z?.(), z = null);
-		}, { immediate: !0 });
-		function V(e) {
-			e.preventDefault();
-			let t = B;
-			B = null, h(() => t?.focus?.());
-		}
-		return _(() => {
-			z?.(), z = null, R(!1);
-		}), (t, n) => (v(), l(i, null, [u("div", m({
-			class: "relative",
-			inert: M.value || void 0
-		}, t.$attrs), [y(t.$slots, "expand-trigger", {
-			expand: F,
-			label: f.expandLabel
-		}, () => [u("button", {
-			type: "button",
-			"data-part": "trigger",
-			"data-mode": "expand",
-			class: g(["absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-1.5 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", f.buttonPosition === "left" ? "left-2 top-2" : "right-2 top-2"]),
-			title: "Fullscreen",
-			"aria-label": f.expandLabel,
-			onClick: F
-		}, [d(b(w), {
-			class: "h-4 w-4",
-			"aria-hidden": "true"
-		})], 10, D)]), M.value ? c("", !0) : y(t.$slots, "default", {
-			key: 0,
-			fullscreen: !1
-		})], 16, E), (v(), s(a, {
+				}), R();
+			} else !e && n && (P?.(), P = null, l(B));
+		}, { immediate: !0 }), u(() => {
+			P?.(), P = null, I(!1);
+		}), (e, t) => (d(), r(n, {
 			to: "body",
-			disabled: !M.value
-		}, [M.value ? (v(), s(b(r), {
-			key: 0,
+			disabled: !s.value
+		}, [a(m(v), {
+			ref_key: "scope",
+			ref: D,
 			"as-child": "",
-			trapped: "",
-			onUnmountAutoFocus: V
+			loop: s.value,
+			trapped: s.value,
+			onMountAutoFocus: V
 		}, {
-			default: C(() => [u("div", {
-				"data-part": "overlay",
-				"data-surface": f.surface,
-				class: g(b(e)("fixed inset-0 z-modal flex flex-col glass-overlay", j.value))
-			}, [y(t.$slots, "fullscreen-chrome", {
-				collapse: I,
-				label: f.collapseLabel,
-				fullscreen: !0
-			}, () => [u("button", {
-				type: "button",
-				"data-part": "trigger",
-				"data-mode": "collapse",
-				class: g(["absolute z-10 rounded-button bg-card/70 [backdrop-filter:var(--glass-blur-wash)] p-2 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40", f.buttonPosition === "left" ? "left-3 top-3" : "right-3 top-3"]),
-				title: "Exit fullscreen",
-				"aria-label": f.collapseLabel,
-				onClick: I
-			}, [d(b(T), {
-				class: "h-4 w-4",
-				"aria-hidden": "true"
-			})], 10, k)]), u("div", A, [y(t.$slots, "default", { fullscreen: !0 })])], 10, O)]),
+			default: _(() => [i("div", c({
+				class: ["expandable-container", { "glass-overlay": s.value }],
+				"data-state": s.value ? "expanded" : "collapsed",
+				"data-surface": s.value ? o.surface : void 0,
+				role: s.value ? "dialog" : void 0,
+				"aria-label": s.value ? o.expandLabel : void 0,
+				"aria-modal": s.value || void 0
+			}, e.$attrs), [
+				i("div", {
+					class: "expandable-container__chrome",
+					hidden: s.value
+				}, [p(e.$slots, "expand-trigger", {
+					expand: j,
+					label: o.expandLabel
+				}, () => [i("button", {
+					type: "button",
+					"data-part": "trigger",
+					"data-control-target": "",
+					"data-mode": "expand",
+					"data-position": o.buttonPosition,
+					"aria-label": o.expandLabel,
+					onClick: j
+				}, [a(m(y), {
+					class: "expandable-container__icon",
+					"aria-hidden": "true"
+				})], 8, C)])], 8, S),
+				i("div", {
+					class: "expandable-container__chrome",
+					hidden: !s.value
+				}, [p(e.$slots, "fullscreen-chrome", {
+					collapse: M,
+					label: o.collapseLabel,
+					fullscreen: !0
+				}, () => [i("button", {
+					type: "button",
+					"data-part": "trigger",
+					"data-control-target": "",
+					"data-mode": "collapse",
+					"data-position": o.buttonPosition,
+					"aria-label": o.collapseLabel,
+					onClick: M
+				}, [a(m(b), {
+					class: "expandable-container__icon",
+					"aria-hidden": "true"
+				})], 8, T)])], 8, w),
+				i("div", E, [p(e.$slots, "default", { fullscreen: s.value })])
+			], 16, x)]),
 			_: 3
-		})) : c("", !0)], 8, ["disabled"]))], 64));
+		}, 8, ["loop", "trapped"])], 8, ["disabled"]));
 	}
 });
 //#endregion
-export { F as ExpandableContainer };
+export { j as ExpandableContainer };

package/dist/fading-scroll-CTeW3KNS.js

@@ -0,0 +1,96 @@
+import { t as e } from "./supportsCssTimeline-Di9gzleG.js";
+import { t } from "./useResizeObserver-CdUlm2QZ.js";
+import { computed as n, createElementBlock as r, defineComponent as i, normalizeClass as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, toRef as d, unref as f, watch as p } from "vue";
+//#region src/components/fading-scroll/composables/useFadingScroll.ts
+var m;
+function h() {
+	if (m || typeof document > "u") return m ?? "negative";
+	let e = document.createElement("div"), t = document.createElement("div");
+	return e.dir = "rtl", e.style.cssText = "position:absolute;inset:-9999px auto auto -9999px;width:4px;height:1px;overflow:scroll", t.style.width = "8px", e.append(t), document.body.append(e), e.scrollLeft > 0 ? m = "positive-descending" : (e.scrollLeft = 1, m = e.scrollLeft === 0 ? "negative" : "positive-ascending"), e.remove(), m;
+}
+function g(e, t, n, r) {
+	let i = r ?? (n === "rtl" ? h() : void 0), a = n === "rtl" ? i === "negative" ? -e : i === "positive-descending" ? t - e : e : e;
+	return Math.min(t, Math.max(0, a));
+}
+function _(n, r = {}) {
+	let { axis: i = "x", fadeStart: a = !0, fadeEnd: c = !0 } = r, u = l(!e()), d = 0, p = null;
+	function m(e, t) {
+		let r = f(n);
+		r && (r.style.setProperty("--fade-start", e ? "var(--fade-scroll-width)" : "0px"), r.style.setProperty("--fade-end", t ? "var(--fade-scroll-width)" : "0px"));
+	}
+	function h() {
+		let e = f(n);
+		if (!e) return;
+		let t = f(i) === "x", r = t ? e.scrollWidth - e.clientWidth : e.scrollHeight - e.clientHeight, o = t ? g(e.scrollLeft, r, getComputedStyle(e).direction) : Math.min(r, Math.max(0, e.scrollTop)), s = o <= 12, l = o >= r - 12;
+		m(f(a) && !s, f(c) && !l);
+	}
+	function _() {
+		d ||= requestAnimationFrame(() => {
+			d = 0, h();
+		});
+	}
+	function v() {
+		let e = f(n);
+		e && (e.addEventListener("scroll", _, { passive: !0 }), p = t(n, h).stop, h());
+	}
+	function y() {
+		f(n)?.removeEventListener("scroll", _), p?.(), p = null, d &&= (cancelAnimationFrame(d), 0);
+	}
+	return s(() => {
+		u.value && v();
+	}), o(y), {
+		active: u,
+		measure: h,
+		stop: y
+	};
+}
+//#endregion
+//#region src/components/fading-scroll/FadingScroll.vue?vue&type=script&setup=true&lang.ts
+var v = [
+	"data-fade-axis",
+	"data-fade-start",
+	"data-fade-end",
+	"role",
+	"aria-label",
+	"aria-labelledby"
+], y = /* @__PURE__ */ i({
+	__name: "FadingScroll",
+	props: {
+		axis: { default: "x" },
+		fadeStart: {
+			type: Boolean,
+			default: !0
+		},
+		fadeEnd: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	setup(e) {
+		let t = e, i = l(null), o = n(() => !!(t.ariaLabel || t.ariaLabelledby));
+		return p(() => [
+			t.axis,
+			t.fadeStart,
+			t.fadeEnd
+		], _(i, {
+			axis: d(t, "axis"),
+			fadeStart: d(t, "fadeStart"),
+			fadeEnd: d(t, "fadeEnd")
+		}).measure), (t, n) => (c(), r("div", {
+			ref_key: "rootRef",
+			ref: i,
+			class: a(["fading-scroll", e.axis === "y" ? "fading-scroll--y" : "fading-scroll--x"]),
+			"data-fade-axis": e.axis,
+			"data-fade-start": e.fadeStart ? "" : void 0,
+			"data-fade-end": e.fadeEnd ? "" : void 0,
+			role: o.value ? "region" : void 0,
+			"aria-label": e.ariaLabel,
+			"aria-labelledby": e.ariaLabelledby,
+			tabindex: "0"
+		}, [u(t.$slots, "default")], 10, v));
+	}
+});
+//#endregion
+export { _ as n, y as t };

package/dist/fading-scroll.d.ts

@@ -1 +1 @@
-export * from "./components/fading-scroll";
+export * from "./components/fading-scroll/index.js";

package/dist/fading-scroll.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./FadingScroll-C1ZWEjmG.js";
+import { n as e, t } from "./fading-scroll-CTeW3KNS.js";
 export { t as FadingScroll, e as useFadingScroll };

package/dist/focus-Duf7EpUu.js

@@ -0,0 +1,13 @@
+//#region src/components/_shared/focus.ts
+var e = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"summary",
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+//#endregion
+export { e as t };

package/dist/fourier-field.d.ts

@@ -1 +1 @@
-export * from "./components/fourier-field";
+export * from "./components/fourier-field/index.js";