@mkbabb/glass-ui 3.3.0 → 3.5.0

package/dist/dock.js

@@ -5,11 +5,11 @@ import { t as r } from "./useTouchGate-CS5Csc2h.js";
 import { n as i } from "./createContext-DBMGRlx4.js";
 import { i as a, n as o, r as s, t as c } from "./dockContext-spUj_-E5.js";
 import { i as l, n as u, r as d, t as f } from "./TabsIndicator-DA0x9gPr.js";
-import { t as p } from "./useViewTransition-D4ssvnXZ.js";
-import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, onMounted as O, onUnmounted as k, openBlock as A, readonly as j, ref as M, renderList as N, renderSlot as P, resolveDynamicComponent as F, toDisplayString as I, unref as L, useAttrs as R, useId as z, useModel as B, useTemplateRef as V, watch as H, withCtx as U } from "vue";
-import { DropdownMenuTrigger as W, Primitive as G, SelectIcon as K, SelectTrigger as q, useForwardProps as J } from "reka-ui";
-import { SpringProgress as ee } from "@mkbabb/keyframes.js";
-var Y = t("pause", [["rect", {
+import { t as p } from "./useViewTransition-CJnqg6wl.js";
+import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, onMounted as O, onUnmounted as k, openBlock as A, readonly as j, ref as M, renderList as N, renderSlot as P, resolveDynamicComponent as F, toDisplayString as I, unref as L, useAttrs as R, useId as ee, useModel as z, useTemplateRef as B, watch as V, withCtx as H } from "vue";
+import { DropdownMenuTrigger as U, Primitive as W, SelectIcon as G, SelectTrigger as K, useForwardProps as q } from "reka-ui";
+import { SpringProgress as te } from "@mkbabb/keyframes.js";
+var J = t("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -23,20 +23,20 @@ var Y = t("pause", [["rect", {
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), te = t("play", [["path", {
+}]]), ne = t("play", [["path", {
 	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
 	key: "10ikf1"
 }]]);
 //#endregion
 //#region src/components/custom/dock/composables/isTeleportedTarget.ts
-function X(e, t) {
+function Y(e, t) {
 	if (!(e instanceof Element)) return !1;
 	let n = e.closest("[data-glass-dock-portal]");
 	return n ? t ? n.getAttribute("data-glass-dock-owner") === t : !0 : !1;
 }
 //#endregion
 //#region src/components/custom/dock/composables/useDockState.ts
-function ne(e) {
+function re(e) {
 	let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, c = s(), l = M(c ? "pinned" : "collapsed"), u = M(c), d = M(c), f = null, p = M(0), m = h(() => p.value > 0), g = null, _ = null, v = !1, y = l.value;
 	function b() {
 		s() && (l.value = "pinned"), u.value = l.value !== "collapsed", d.value = l.value === "pinned", o && y !== l.value && o(l.value, y), y = l.value;
@@ -83,7 +83,7 @@ function ne(e) {
 			if (p.value > 0) return;
 			if (e) {
 				let t = n.value;
-				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || X(e.relatedTarget, a)) return;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || Y(e.relatedTarget, a)) return;
 			}
 			w();
 		}
@@ -94,7 +94,7 @@ function ne(e) {
 	function N(e) {
 		if (s() || l.value !== "hover" || p.value > 0) return;
 		let t = e.currentTarget;
-		e.relatedTarget && t.contains(e.relatedTarget) || X(e.relatedTarget, a) || w();
+		e.relatedTarget && t.contains(e.relatedTarget) || Y(e.relatedTarget, a) || w();
 	}
 	function P() {
 		if (s()) {
@@ -114,15 +114,15 @@ function ne(e) {
 	function L(e) {
 		if (s() || i?.value) return;
 		let t = n.value;
-		!t || t.contains(e.target) || X(e.target, a) || E();
+		!t || t.contains(e.target) || Y(e.target, a) || E();
 	}
-	return H(u, (e) => {
+	return V(u, (e) => {
 		e ? (C(), _ = requestAnimationFrame(() => {
 			_ = null, u.value && (document.addEventListener("pointerdown", L, !0), g = () => {
 				document.removeEventListener("pointerdown", L, !0), g = null;
 			});
 		})) : C();
-	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : H(r, (e) => {
+	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : V(r, (e) => {
 		if (e) {
 			x(), l.value = "pinned", b();
 			return;
@@ -148,107 +148,118 @@ function ne(e) {
 }
 //#endregion
 //#region src/components/custom/dock/composables/useLayerTransition.ts
-var Z = {
-	response: .5,
-	dampingFraction: .5
+var X = {
+	response: .32,
+	dampingFraction: .7
 };
-function re(e) {
-	let { containerEl: t, activeLayer: n, axis: r } = e, i = typeof document < "u" && "startViewTransition" in document, a = h(() => r?.value === "vertical" ? "height" : "width"), o = (e) => e.getBoundingClientRect()[a.value], s = M(n.value), c = M(null), l = 0, u = null, d = null, f = null;
-	function m() {
-		d &&= (d.dispose(), null), f = null;
+function ie(e) {
+	let { containerEl: t, activeLayer: n, axis: r, directionTypes: i } = e, a = typeof document < "u" && "startViewTransition" in document, o = h(() => r?.value === "vertical" ? "height" : "width"), s = (e) => e.getBoundingClientRect()[o.value], c = M(n.value), l = M(null), u = 0, d = null, f = null, m = null;
+	function g() {
+		f &&= (f.dispose(), null), m = null;
 	}
-	function g(e) {
+	function _(e) {
 		let t = e.trim();
 		return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
 	}
-	function _(e) {
-		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(g), i = t.transitionDelay.split(",").map(g), o = r.map((e, t) => {
+	function v(e) {
+		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(_), i = t.transitionDelay.split(",").map(_), a = r.map((e, t) => {
 			let r = n[t] ?? n[0] ?? "all";
-			return r !== "all" && r !== a.value ? 0 : e + (i[t] ?? i[0] ?? 0);
+			return r !== "all" && r !== o.value ? 0 : e + (i[t] ?? i[0] ?? 0);
 		});
-		return Math.max(0, ...o) + 50;
+		return Math.max(0, ...a) + 50;
 	}
-	function v() {
-		u &&= (clearTimeout(u), null);
+	function y() {
+		d &&= (clearTimeout(d), null);
 	}
-	function y(e, t) {
-		e.style.setProperty(a.value, t);
-	}
-	function b(e) {
-		e.style.removeProperty(a.value);
+	function b(e, t) {
+		e.style.setProperty(o.value, t);
 	}
 	function x(e) {
-		e.style.willChange = a.value;
+		e.style.removeProperty(o.value);
 	}
 	function S(e) {
+		e.style.willChange = o.value;
+	}
+	function C(e) {
 		e.style.willChange = "auto";
 	}
-	H(n, (e, n) => {
+	function T(e) {
+		return e.closest(".glass-dock");
+	}
+	function E(e) {
+		T(e)?.setAttribute("data-morphing", "");
+	}
+	function D(e) {
+		T(e)?.removeAttribute("data-morphing");
+	}
+	V(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
 		if (!r) {
-			s.value = e, c.value = null;
+			c.value = e, l.value = null;
 			return;
 		}
-		if (i) {
-			v();
-			let t = ++l, { finished: r } = p(() => {
-				c.value = n, s.value = e;
+		if (a) {
+			y();
+			let t = ++u;
+			E(r);
+			let { finished: i } = p(() => {
+				l.value = n, c.value = e;
 			});
-			r.finally(() => {
-				t === l && (c.value = null);
+			i.finally(() => {
+				t === u && (l.value = null, D(r));
 			});
 			return;
 		}
 		if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-			v(), ++l, s.value = e, c.value = null;
+			y(), ++u, c.value = e, l.value = null;
 			return;
 		}
-		v();
-		let a = ++l, h = d !== null && f === r && !d.settled ? d : null, g = h ? h.value : o(r);
-		h || (m(), y(r, `${g}px`)), w(() => {
-			a === l && r && requestAnimationFrame(() => {
-				if (a !== l) return;
-				c.value = n, s.value = e, r.style.transition = "none", b(r);
-				let t = o(r);
-				if (y(r, `${g}px`), r.offsetWidth, !h && Math.abs(t - g) < .5) {
-					r.style.transition = "", b(r), S(r), c.value = null;
+		y();
+		let i = ++u, o = f !== null && m === r && !f.settled ? f : null, h = o ? o.value : s(r);
+		o || (g(), b(r, `${h}px`)), w(() => {
+			i === u && r && requestAnimationFrame(() => {
+				if (i !== u) return;
+				l.value = n, c.value = e, r.style.transition = "none", x(r);
+				let t = s(r);
+				if (b(r, `${h}px`), r.offsetWidth, !o && Math.abs(t - h) < .5) {
+					r.style.transition = "", x(r), C(r), D(r), l.value = null;
 					return;
 				}
-				x(r), h || (d = new ee({
-					response: Z.response,
-					dampingFraction: Z.dampingFraction,
-					initial: g,
+				S(r), E(r), o || (f = new te({
+					response: X.response,
+					dampingFraction: X.dampingFraction,
+					initial: h,
 					respectReducedMotion: !0
-				}), f = r);
-				let i = d;
-				i.target = t, i.play((e) => {
-					a === l && (y(r, `${e}px`), i.settled && (r.style.transition = "", b(r), S(r), c.value = null, m()));
-				}), u = setTimeout(() => {
-					a === l && (r.style.transition = "", b(r), S(r), c.value = null, m());
-				}, _(r));
+				}), m = r);
+				let a = f;
+				a.target = t, a.play((e) => {
+					i === u && (b(r, `${e}px`), a.settled && (r.style.transition = "", x(r), C(r), D(r), l.value = null, g()));
+				}), d = setTimeout(() => {
+					i === u && (r.style.transition = "", x(r), C(r), D(r), l.value = null, g());
+				}, v(r));
 			});
 		});
 	});
-	function C(e) {
+	function O(e) {
 		let n = t.value;
-		n && e.target === n && e.propertyName === a.value && (v(), m(), n.style.transition = "", b(n), S(n), c.value = null);
+		n && e.target === n && e.propertyName === o.value && (y(), g(), n.style.transition = "", x(n), C(n), D(n), l.value = null);
 	}
 	return k(() => {
-		v(), m();
+		y(), g();
 	}), {
-		onTransitionEnd: C,
-		currentLayer: s,
-		leavingLayer: c
+		onTransitionEnd: O,
+		currentLayer: c,
+		leavingLayer: l
 	};
 }
 //#endregion
 //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
-var ie = [
+var ae = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], ae = ["inert"], oe = ["inert"], se = /* @__PURE__ */ x({
+], oe = ["inert"], se = ["inert"], ce = /* @__PURE__ */ x({
 	__name: "GlassDock",
 	props: {
 		collapseDelay: { default: 2e3 },
@@ -278,7 +289,7 @@ var ie = [
 				"container-type": "inline-size",
 				"container-name": n.containerName
 			};
-		}), a = V("dockEl"), s = V("layersEl"), c = h(() => n.variant), l = h(() => n.shape), u = h(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), d = h(() => n.density), f = h(() => n.overflow === "scroll" ? u.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), p = h(() => n.alwaysExpanded || u.value === "vertical"), m = h(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), g = M(!1), _ = r(n.collapseDelay), b = `glass-dock-${z()}`, x = null, S = 0, { expanded: C, isPinned: w, isHeld: k, onMouseEnter: j, onMouseLeave: N, onFocusIn: F, onFocusOut: I, onClickCollapsed: R, keepOpen: B, release: U, expand: W, collapse: G } = ne({
+		}), a = B("dockEl"), s = B("layersEl"), c = h(() => n.variant), l = h(() => n.shape), u = h(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), d = h(() => n.density), f = h(() => n.overflow === "scroll" ? u.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), p = h(() => n.alwaysExpanded || u.value === "vertical"), m = h(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), g = M(!1), _ = r(n.collapseDelay), b = `glass-dock-${ee()}`, x = null, S = 0, { expanded: C, isPinned: w, isHeld: k, onMouseEnter: j, onMouseLeave: N, onFocusIn: F, onFocusOut: I, onClickCollapsed: R, keepOpen: z, release: H, expand: U, collapse: W } = re({
 			collapseDelay: n.collapseDelay,
 			rootEl: a,
 			alwaysExpanded: p,
@@ -288,78 +299,78 @@ var ie = [
 		o({
 			id: b,
 			orientation: u,
-			keepOpen: B,
-			release: U,
+			keepOpen: z,
+			release: H,
 			held: k
 		});
-		let K = h(() => p.value || C.value), { onTransitionEnd: q } = re({
+		let G = h(() => p.value || C.value), { onTransitionEnd: K } = ie({
 			containerEl: s,
-			activeLayer: h(() => K.value ? "full" : "summary"),
+			activeLayer: h(() => G.value ? "full" : "summary"),
 			axis: h(() => "horizontal")
-		}), J = typeof document < "u" && "startViewTransition" in document, ee = h(() => J ? {
+		}), q = typeof document < "u" && "startViewTransition" in document, te = h(() => q ? {
 			"view-transition-name": b.replace(/[^a-zA-Z0-9_-]/g, "-"),
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		function Y(e) {
+		function J(e) {
 			let t = e.trim();
 			return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
 		}
-		function te(e) {
-			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(Y), r = t.transitionDelay.split(",").map(Y);
+		function ne(e) {
+			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(J), r = t.transitionDelay.split(",").map(J);
 			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
 		}
-		function X() {
+		function Y() {
 			x &&= (clearTimeout(x), null);
 		}
-		let Z = new Set([
+		let X = new Set([
 			"width",
 			"height",
 			"padding",
 			"transform"
 		]);
-		function se() {
+		function ce() {
 			let e = a.value;
 			if (!e) return;
 			let t = ++S;
-			X(), g.value = !0, x = setTimeout(() => {
+			Y(), g.value = !0, x = setTimeout(() => {
 				t === S && (g.value = !1, x = null);
-			}, te(e) + 50);
+			}, ne(e) + 50);
 		}
-		function Q(e) {
-			e.target === a.value && Z.has(e.propertyName) && (X(), S++, g.value = !1);
+		function Z(e) {
+			e.target === a.value && X.has(e.propertyName) && (Y(), S++, g.value = !1);
 		}
 		O(() => {
-			(n.alwaysExpanded || !n.startCollapsed) && W();
+			(n.alwaysExpanded || !n.startCollapsed) && U();
 		});
-		function $() {
+		function Q() {
 			return u.value === "horizontal" && !p.value;
 		}
-		function ce(e) {
-			if (!$() || K.value) return;
+		function le(e) {
+			if (!Q() || G.value) return;
 			let t = a.value, n = e.touches[0];
 			!t || !n || _.handleTouchStart(t, n.clientY);
 		}
-		function le(e) {
-			$() && _.handleScrollCheck(e);
+		function ue(e) {
+			Q() && _.handleScrollCheck(e);
 		}
-		function ue() {
-			if (!$()) return;
+		function de() {
+			if (!Q()) return;
 			let e = _.isActive.value;
-			_.handleTouchEnd(), !e && _.isActive.value && !K.value && W();
+			_.handleTouchEnd(), !e && _.isActive.value && !G.value && U();
 		}
-		return H(_.isActive, (e) => {
-			!e && C.value && !w.value && !p.value && G();
-		}), H(K, (e) => {
-			se(), e || _.deactivate();
-		}), D(X), t({
+		return V(_.isActive, (e) => {
+			!e && C.value && !w.value && !p.value && W();
+		}), V(G, (e) => {
+			ce(), e || _.deactivate();
+		}), D(Y), t({
 			expanded: C,
 			isPinned: w,
 			isHeld: k,
 			isTransitioning: g,
-			expand: W,
-			collapse: G,
-			keepOpen: B,
-			release: U
+			expand: U,
+			collapse: W,
+			keepOpen: z,
+			release: H
 		}), (t, n) => (A(), v("div", {
 			ref_key: "dockEl",
 			ref: a,
@@ -369,8 +380,8 @@ var ie = [
 				`shape-${l.value}`,
 				f.value,
 				{
-					expanded: K.value,
-					collapsed: !K.value,
+					expanded: G.value,
+					collapsed: !G.value,
 					pinned: L(w),
 					"fit-content": m.value,
 					"always-expanded": p.value,
@@ -386,37 +397,37 @@ var ie = [
 			onMouseleave: n[3] ||= (e) => L(N)(e),
 			onFocusin: n[4] ||= (...e) => L(F) && L(F)(...e),
 			onFocusout: n[5] ||= (...e) => L(I) && L(I)(...e),
-			onTouchstart: ce,
-			onTouchmove: le,
-			onTouchend: ue,
-			onTransitionend: Q,
-			onTransitioncancel: Q
+			onTouchstart: le,
+			onTouchmove: ue,
+			onTouchend: de,
+			onTransitionend: Z,
+			onTransitioncancel: Z
 		}, [u.value === "horizontal" ? (A(), v("div", {
 			key: 0,
 			ref_key: "layersEl",
 			ref: s,
 			class: "dock-layers",
-			style: E(ee.value),
-			onTransitionend: n[1] ||= (...e) => L(q) && L(q)(...e)
+			style: E(te.value),
+			onTransitionend: n[1] ||= (...e) => L(K) && L(K)(...e)
 		}, [y("div", {
-			class: T(["dock-layer dock-layer--full", { "layer-active": K.value }]),
+			class: T(["dock-layer dock-layer--full", { "layer-active": G.value }]),
 			inert: !L(C) || void 0
-		}, [P(t.$slots, "default")], 10, ae), y("div", {
-			class: T(["dock-layer dock-layer--summary", { "layer-active": !K.value }]),
+		}, [P(t.$slots, "default")], 10, oe), y("div", {
+			class: T(["dock-layer dock-layer--summary", { "layer-active": !G.value }]),
 			inert: L(C) || void 0,
 			onClick: n[0] ||= (...e) => L(R) && L(R)(...e)
-		}, [P(t.$slots, "collapsed")], 10, oe)], 36)) : P(t.$slots, "default", { key: 1 })], 46, ie));
+		}, [P(t.$slots, "collapsed")], 10, se)], 36)) : P(t.$slots, "default", { key: 1 })], 46, ae));
 	}
-}), Q = i("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
-Q.KEY;
-function $(e) {
-	Q.provide(e);
+}), Z = i("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
+Z.KEY;
+function Q(e) {
+	Z.provide(e);
 }
-var ce = Q.use;
-Q.useOptional;
+var le = Z.use;
+Z.useOptional;
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
+var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 	__name: "DockLayerGroup",
 	props: /* @__PURE__ */ S({
 		orientation: {},
@@ -431,22 +442,22 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, n = B(e, "active"), r = a(), i = M([]), o = V("containerEl");
+		let t = e, n = z(e, "active"), r = a(), i = M([]), o = B("containerEl");
 		function s(e) {
 			i.value.find((t) => t.id === e.id) || i.value.push(e);
 		}
 		function c(e) {
 			i.value = i.value.filter((t) => t.id !== e);
 		}
-		let p = h(() => t.orientation ?? r?.orientation.value ?? "horizontal"), { onTransitionEnd: x, currentLayer: S, leavingLayer: C } = re({
+		let p = h(() => t.orientation ?? r?.orientation.value ?? "horizontal"), { onTransitionEnd: x, currentLayer: S, leavingLayer: C } = ie({
 			containerEl: o,
 			activeLayer: n,
 			axis: p
-		}), w = typeof document < "u" && "startViewTransition" in document, D = z(), O = h(() => w ? {
+		}), w = typeof document < "u" && "startViewTransition" in document, D = ee(), O = h(() => w ? {
 			"view-transition-name": `gl-dock-stack-${D.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		$({
+		Q({
 			register: s,
 			unregister: c,
 			currentLayerId: j(S),
@@ -456,10 +467,10 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			return typeof e == "object" && !!e;
 		}
 		let R = M(!1);
-		function H() {
+		function V() {
 			R.value || (R.value = !0, r?.keepOpen());
 		}
-		function W(e) {
+		function U(e) {
 			let t = e.relatedTarget, n = e.currentTarget;
 			t && n?.contains(t) || R.value && (R.value = !1, r?.release());
 		}
@@ -470,22 +481,22 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			orientation: "horizontal",
 			"as-child": !0
 		}, {
-			default: U(() => [b(L(u), {
+			default: H(() => [b(L(u), {
 				class: T(["dock-layer-rail", e.railPosition]),
-				onFocusin: H,
-				onFocusout: W
+				onFocusin: V,
+				onFocusout: U
 			}, {
-				default: U(() => [(A(!0), v(m, null, N(i.value, (e) => (A(), g(L(d), {
+				default: H(() => [(A(!0), v(m, null, N(i.value, (e) => (A(), g(L(d), {
 					key: e.id,
 					value: e.id,
 					class: "dock-layer-tab",
 					title: e.label,
 					"aria-label": e.label ?? e.id
 				}, {
-					default: U(() => [k(e.icon) ? (A(), g(F(e.icon), {
+					default: H(() => [k(e.icon) ? (A(), g(F(e.icon), {
 						key: 0,
 						class: "size-4"
-					})) : typeof e.icon == "string" ? (A(), v("span", le, I(e.icon), 1)) : (A(), v("span", ue, I((e.label ?? e.id).charAt(0)), 1))]),
+					})) : typeof e.icon == "string" ? (A(), v("span", ue, I(e.icon), 1)) : (A(), v("span", de, I((e.label ?? e.id).charAt(0)), 1))]),
 					_: 2
 				}, 1032, [
 					"value",
@@ -503,11 +514,11 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			onTransitionend: r[1] ||= (...e) => L(x) && L(x)(...e)
 		}, [P(t.$slots, "default")], 36)], 2));
 	}
-}), fe = [
+}), pe = [
 	"inert",
 	"aria-hidden",
 	"tabindex"
-], pe = /* @__PURE__ */ x({
+], me = /* @__PURE__ */ x({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -515,7 +526,7 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = ce();
+		let t = e, n = le();
 		O(() => {
 			n.register({
 				id: t.id,
@@ -525,8 +536,8 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		}), D(() => {
 			n.unregister(t.id);
 		});
-		let r = h(() => n.currentLayerId.value === t.id), i = h(() => n.leavingLayerId.value === t.id), a = V("hostEl");
-		return H(r, async (e, t) => {
+		let r = h(() => n.currentLayerId.value === t.id), i = h(() => n.leavingLayerId.value === t.id), a = B("hostEl");
+		return V(r, async (e, t) => {
 			!e || t || typeof document < "u" && (() => {
 				let e = document.activeElement;
 				return !e || e === document.body ? !0 : !!e.closest("[inert]");
@@ -541,9 +552,9 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			inert: r.value ? void 0 : !0,
 			"aria-hidden": r.value ? void 0 : !0,
 			tabindex: r.value ? -1 : void 0
-		}, [P(e.$slots, "default")], 10, fe));
+		}, [P(e.$slots, "default")], 10, pe));
 	}
-}), me = /* @__PURE__ */ x({
+}), $ = /* @__PURE__ */ x({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -578,7 +589,7 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			};
 		}
 		let o = h(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
-		return (e, n) => (A(), g(L(G), C({
+		return (e, n) => (A(), g(L(W), C({
 			as: t.as,
 			"as-child": t.asChild
 		}, o.value, {
@@ -586,7 +597,7 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 			style: i.value,
 			onPointermove: a
 		}), {
-			default: U(() => [P(e.$slots, "default")]),
+			default: H(() => [P(e.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"as",
@@ -611,18 +622,18 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		function a() {
 			r("update:paused", !n.paused);
 		}
-		return (t, n) => (A(), g(me, {
+		return (t, n) => (A(), g($, {
 			type: "button",
 			"aria-pressed": e.paused,
 			"aria-label": i.value,
 			title: i.value,
 			onClick: a
 		}, {
-			default: U(() => [e.paused ? (A(), g(L(te), {
+			default: H(() => [e.paused ? (A(), g(L(ne), {
 				key: 0,
 				size: 18,
 				"aria-hidden": "true"
-			})) : (A(), g(L(Y), {
+			})) : (A(), g(L(J), {
 				key: 1,
 				size: 18,
 				"aria-hidden": "true"
@@ -652,12 +663,12 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	},
 	setup(t) {
 		let n = t, r = R(), i = h(() => r["data-tier"] === "primary"), a = h(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (A(), g(L(G), {
+		return (e, n) => (A(), g(L(W), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: T(a.value)
 		}, {
-			default: U(() => [P(e.$slots, "default")]),
+			default: H(() => [P(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -681,13 +692,13 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let r = t, i = J(h(() => {
+		let r = t, i = q(h(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (t, a) => (A(), g(L(q), C(L(i), { class: L(e)("dock-select-trigger", r.class) }), {
-			default: U(() => [P(t.$slots, "default"), b(L(K), { "as-child": "" }, {
-				default: U(() => [P(t.$slots, "icon", {}, () => [b(L(n), { class: "dock-select-trigger__chevron" })])]),
+		return (t, a) => (A(), g(L(K), C(L(i), { class: L(e)("dock-select-trigger", r.class) }), {
+			default: H(() => [P(t.$slots, "default"), b(L(G), { "as-child": "" }, {
+				default: H(() => [P(t.$slots, "icon", {}, () => [b(L(n), { class: "dock-select-trigger__chevron" })])]),
 				_: 3
 			})]),
 			_: 3
@@ -709,15 +720,15 @@ var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 		] }
 	},
 	setup(t) {
-		let n = t, r = J(h(() => {
+		let n = t, r = q(h(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (A(), g(L(W), C(L(r), { class: L(e)("dock-dropdown-trigger", n.class) }), {
-			default: U(() => [P(t.$slots, "default")]),
+		return (t, i) => (A(), g(L(U), C(L(r), { class: L(e)("dock-dropdown-trigger", n.class) }), {
+			default: H(() => [P(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { c as DOCK_CONTEXT_KEY, he as DockBackgroundToggle, ve as DockDropdownTrigger, me as DockIconButton, pe as DockLayer, de as DockLayerGroup, _e as DockSelectTrigger, ge as DockTabButton, se as GlassDock, o as provideDockContext, s as useDockContext, a as useOptionalDockContext };
+export { c as DOCK_CONTEXT_KEY, he as DockBackgroundToggle, ve as DockDropdownTrigger, $ as DockIconButton, me as DockLayer, fe as DockLayerGroup, _e as DockSelectTrigger, ge as DockTabButton, ce as GlassDock, o as provideDockContext, s as useDockContext, a as useOptionalDockContext };

package/dist/dom.js

@@ -1,6 +1,6 @@
 import { t as e } from "./useResizeObserver-DX-STszm.js";
 import { t } from "./useTouchGate-CS5Csc2h.js";
-import { n, r, t as i } from "./useClipboard-D8vFyRCa.js";
-import { t as a } from "./useUserInvalidAria-DmvZ_6Dx.js";
-import { t as o } from "./useTextHighlight-Dmtofpk2.js";
-export { i as copyToClipboard, n as useClipboard, e as useResizeObserver, o as useTextHighlight, r as useTokenColor, t as useTouchGate, a as useUserInvalidAria };
+import { a as n, i as r, n as i, o as a, r as o, t as s } from "./useViewportReady-Dcvf0c4p.js";
+import { t as c } from "./useUserInvalidAria-DmvZ_6Dx.js";
+import { t as l } from "./useTextHighlight-Dmtofpk2.js";
+export { r as copyToClipboard, o as useBreakpoint, n as useClipboard, i as useIdleReady, e as useResizeObserver, l as useTextHighlight, a as useTokenColor, t as useTouchGate, c as useUserInvalidAria, s as useViewportReady };