@mkbabb/glass-ui 3.1.1 → 3.3.0

package/dist/dock.js

@@ -1,25 +1,48 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./chevron-down-DILQA1t6.js";
-import { i as n, n as r, r as i, t as a } from "./dockContext-D5NZCWJs.js";
-import { t as o } from "./useTouchGate-D9Zvrzyc.js";
-import { t as s } from "./useViewTransition-DYIK6Gzb.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, inject as g, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, onMounted as C, onUnmounted as w, openBlock as T, provide as E, ref as D, renderList as O, renderSlot as k, resolveDynamicComponent as A, toDisplayString as j, unref as M, useAttrs as N, useId as P, useModel as F, useTemplateRef as I, watch as L, withCtx as R } from "vue";
-import { DropdownMenuTrigger as z, Primitive as B, SelectIcon as V, SelectTrigger as H, useForwardProps as U } from "reka-ui";
+import { t } from "./createLucideIcon-DuDoe_ra.js";
+import { t as n } from "./chevron-down-pBY8sYfV.js";
+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", {
+	x: "14",
+	y: "3",
+	width: "5",
+	height: "18",
+	rx: "1",
+	key: "kaeet6"
+}], ["rect", {
+	x: "5",
+	y: "3",
+	width: "5",
+	height: "18",
+	rx: "1",
+	key: "1wsw3u"
+}]]), te = 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 W(e, t) {
+function X(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 ee(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(), u = D(c ? "pinned" : "collapsed"), d = D(c), f = D(c), p = null, m = D(0), h = l(() => m.value > 0), g = null, _ = null, v = !1, y = u.value;
+function ne(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() && (u.value = "pinned"), d.value = u.value !== "collapsed", f.value = u.value === "pinned", o && y !== u.value && o(u.value, y), y = u.value;
+		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;
 	}
 	function x() {
-		p &&= (clearTimeout(p), null);
+		f &&= (clearTimeout(f), null);
 	}
 	function S() {
 		_ !== null && (cancelAnimationFrame(_), _ = null);
@@ -27,177 +50,205 @@ function ee(e) {
 	function C() {
 		S(), g?.();
 	}
-	function T() {
-		s() || m.value > 0 || (x(), p = setTimeout(() => {
-			E(), u.value = "collapsed", b();
+	function w() {
+		s() || p.value > 0 || (x(), f = setTimeout(() => {
+			T(), l.value = "collapsed", b();
 		}, t));
 	}
-	function E() {
+	function T() {
 		typeof document > "u" || typeof PointerEvent > "u" || document.body.dispatchEvent(new PointerEvent("pointerdown", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	function O() {
+	function E() {
 		if (s()) {
-			u.value = "pinned", b();
+			l.value = "pinned", b();
 			return;
 		}
-		v ||= (v = !0, x(), E(), u.value = "collapsed", b(), !1);
+		v ||= (v = !0, x(), T(), l.value = "collapsed", b(), !1);
 	}
-	function k() {
+	function D() {
 		if (s()) {
-			u.value = "pinned", b();
+			l.value = "pinned", b();
 			return;
 		}
-		x(), u.value = "hover", b();
+		x(), l.value = "hover", b();
 	}
-	function A() {
-		s() || (x(), u.value === "collapsed" && (u.value = "hover", b()));
+	function O() {
+		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
-	function j(e) {
-		if (!s() && u.value === "hover") {
-			if (m.value > 0) return;
+	function A(e) {
+		if (!s() && l.value === "hover") {
+			if (p.value > 0) return;
 			if (e) {
 				let t = n.value;
-				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || W(e.relatedTarget, a)) return;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || X(e.relatedTarget, a)) return;
 			}
-			T();
+			w();
 		}
 	}
-	function M() {
-		s() || (x(), u.value === "collapsed" && (u.value = "hover", b()));
+	function j() {
+		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
 	function N(e) {
-		if (s() || u.value !== "hover" || m.value > 0) return;
+		if (s() || l.value !== "hover" || p.value > 0) return;
 		let t = e.currentTarget;
-		e.relatedTarget && t.contains(e.relatedTarget) || W(e.relatedTarget, a) || T();
+		e.relatedTarget && t.contains(e.relatedTarget) || X(e.relatedTarget, a) || w();
 	}
 	function P() {
 		if (s()) {
-			u.value = "pinned", b();
+			l.value = "pinned", b();
 			return;
 		}
-		x(), u.value = "pinned", b();
+		x(), l.value = "pinned", b();
 	}
 	function F() {
-		m.value++, x();
+		p.value++, x();
 	}
 	function I() {
-		m.value = Math.max(0, m.value - 1), m.value === 0 && u.value === "hover" && (x(), p = setTimeout(() => {
-			m.value === 0 && u.value === "hover" && T();
+		p.value = Math.max(0, p.value - 1), p.value === 0 && l.value === "hover" && (x(), f = setTimeout(() => {
+			p.value === 0 && l.value === "hover" && w();
 		}, Math.min(t, 800)));
 	}
-	function R(e) {
+	function L(e) {
 		if (s() || i?.value) return;
 		let t = n.value;
-		!t || t.contains(e.target) || W(e.target, a) || O();
+		!t || t.contains(e.target) || X(e.target, a) || E();
 	}
-	return L(d, (e) => {
+	return H(u, (e) => {
 		e ? (C(), _ = requestAnimationFrame(() => {
-			_ = null, d.value && (document.addEventListener("pointerdown", R, !0), g = () => {
-				document.removeEventListener("pointerdown", R, !0), g = null;
+			_ = null, u.value && (document.addEventListener("pointerdown", L, !0), g = () => {
+				document.removeEventListener("pointerdown", L, !0), g = null;
 			});
 		})) : C();
-	}), typeof r == "boolean" ? r && (u.value = "pinned", b()) : L(r, (e) => {
+	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : H(r, (e) => {
 		if (e) {
-			x(), u.value = "pinned", b();
+			x(), l.value = "pinned", b();
 			return;
 		}
-		u.value = "collapsed", b();
-	}, { immediate: !0 }), w(() => {
+		l.value = "collapsed", b();
+	}, { immediate: !0 }), k(() => {
 		x(), C();
 	}), {
-		state: u,
-		expanded: d,
-		isPinned: f,
-		isHeld: h,
-		onMouseEnter: A,
-		onMouseLeave: j,
-		onFocusIn: M,
+		state: l,
+		expanded: u,
+		isPinned: d,
+		isHeld: m,
+		onMouseEnter: O,
+		onMouseLeave: A,
+		onFocusIn: j,
 		onFocusOut: N,
 		onClickCollapsed: P,
 		keepOpen: F,
 		release: I,
-		expand: k,
-		collapse: O
+		expand: D,
+		collapse: E
 	};
 }
 //#endregion
 //#region src/components/custom/dock/composables/useLayerTransition.ts
-function G(e) {
-	let { containerEl: t, activeLayer: n, axis: r } = e, i = typeof document < "u" && "startViewTransition" in document, a = l(() => r?.value === "vertical" ? "height" : "width"), o = (e) => e.getBoundingClientRect()[a.value], c = D(n.value), u = D(null), d = 0, f = null;
-	function p(e) {
+var Z = {
+	response: .5,
+	dampingFraction: .5
+};
+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 g(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 m(e) {
-		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(p), i = t.transitionDelay.split(",").map(p), o = r.map((e, t) => {
+	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) => {
 			let r = n[t] ?? n[0] ?? "all";
 			return r !== "all" && r !== a.value ? 0 : e + (i[t] ?? i[0] ?? 0);
 		});
 		return Math.max(0, ...o) + 50;
 	}
-	function h() {
-		f &&= (clearTimeout(f), null);
+	function v() {
+		u &&= (clearTimeout(u), null);
 	}
-	function g(e, t) {
+	function y(e, t) {
 		e.style.setProperty(a.value, t);
 	}
-	function _(e) {
+	function b(e) {
 		e.style.removeProperty(a.value);
 	}
-	L(n, (e, n) => {
+	function x(e) {
+		e.style.willChange = a.value;
+	}
+	function S(e) {
+		e.style.willChange = "auto";
+	}
+	H(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
 		if (!r) {
-			c.value = e, u.value = null;
+			s.value = e, c.value = null;
 			return;
 		}
 		if (i) {
-			h();
-			let t = ++d, { finished: r } = s(() => {
-				u.value = n, c.value = e;
+			v();
+			let t = ++l, { finished: r } = p(() => {
+				c.value = n, s.value = e;
 			});
 			r.finally(() => {
-				t === d && (u.value = null);
+				t === l && (c.value = null);
 			});
 			return;
 		}
-		h();
-		let a = ++d, l = o(r);
-		g(r, `${l}px`), u.value = n, c.value = e, y(() => {
-			if (a !== d || !r) return;
-			r.style.transition = "none", _(r);
-			let e = o(r);
-			if (g(r, `${l}px`), r.offsetWidth, r.style.transition = "", requestAnimationFrame(() => {
-				a === d && g(r, `${e}px`);
-			}), Math.abs(e - l) < .5) {
-				_(r), u.value = null;
-				return;
-			}
-			f = setTimeout(() => {
-				a === d && (_(r), u.value = null);
-			}, m(r));
+		if (typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			v(), ++l, s.value = e, c.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;
+					return;
+				}
+				x(r), h || (d = new ee({
+					response: Z.response,
+					dampingFraction: Z.dampingFraction,
+					initial: g,
+					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));
+			});
 		});
 	});
-	function v(e) {
+	function C(e) {
 		let n = t.value;
-		n && e.target === n && e.propertyName === a.value && (h(), _(n), u.value = null);
+		n && e.target === n && e.propertyName === a.value && (v(), m(), n.style.transition = "", b(n), S(n), c.value = null);
 	}
-	return w(h), {
-		onTransitionEnd: v,
-		currentLayer: c,
-		leavingLayer: u
+	return k(() => {
+		v(), m();
+	}), {
+		onTransitionEnd: C,
+		currentLayer: s,
+		leavingLayer: c
 	};
 }
 //#endregion
 //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
-var te = [
+var ie = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], ne = ["inert"], re = ["inert"], K = /* @__PURE__ */ h({
+], ae = ["inert"], oe = ["inert"], se = /* @__PURE__ */ x({
 	__name: "GlassDock",
 	props: {
 		collapseDelay: { default: 2e3 },
@@ -214,162 +265,160 @@ var te = [
 			type: Boolean,
 			default: !1
 		},
-		wrap: {
-			type: Boolean,
-			default: !1
-		},
 		variant: { default: "dock" },
 		shape: { default: "pill" },
 		orientation: { default: "horizontal" },
 		density: { default: "comfortable" },
+		overflow: { default: "grow" },
 		containerName: {}
 	},
 	setup(e, { expose: t }) {
-		let n = e, i = l(() => {
+		let n = e, i = h(() => {
 			if (n.containerName) return {
 				"container-type": "inline-size",
-				"container-name": n.containerName,
-				overflow: "visible"
+				"container-name": n.containerName
 			};
-		}), a = I("dockEl"), s = I("layersEl"), c = l(() => n.variant), u = l(() => n.shape), d = l(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), m = l(() => n.density), h = l(() => n.alwaysExpanded || d.value === "vertical"), g = l(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), _ = D(!1), v = o(n.collapseDelay), y = `glass-dock-${P()}`, w = null, { expanded: E, isPinned: O, isHeld: A, onMouseEnter: j, onMouseLeave: N, onFocusIn: F, onFocusOut: R, onClickCollapsed: z, keepOpen: B, release: V, expand: H, collapse: U } = ee({
+		}), 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({
 			collapseDelay: n.collapseDelay,
 			rootEl: a,
-			alwaysExpanded: h,
-			isTransitioning: _,
-			dockId: y
+			alwaysExpanded: p,
+			isTransitioning: g,
+			dockId: b
 		});
-		r({
-			id: y,
-			orientation: d,
+		o({
+			id: b,
+			orientation: u,
 			keepOpen: B,
-			release: V,
-			held: A
+			release: U,
+			held: k
 		});
-		let W = l(() => h.value || E.value), { onTransitionEnd: K } = G({
+		let K = h(() => p.value || C.value), { onTransitionEnd: q } = re({
 			containerEl: s,
-			activeLayer: l(() => W.value ? "full" : "summary"),
-			axis: l(() => "horizontal")
-		}), q = typeof document < "u" && "startViewTransition" in document, J = l(() => q ? {
-			"view-transition-name": y.replace(/[^a-zA-Z0-9_-]/g, "-"),
+			activeLayer: h(() => K.value ? "full" : "summary"),
+			axis: h(() => "horizontal")
+		}), J = typeof document < "u" && "startViewTransition" in document, ee = h(() => J ? {
+			"view-transition-name": b.replace(/[^a-zA-Z0-9_-]/g, "-"),
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
 		function Y(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 X(e) {
+		function te(e) {
 			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(Y), r = t.transitionDelay.split(",").map(Y);
 			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
 		}
-		function Z() {
-			w &&= (clearTimeout(w), null);
+		function X() {
+			x &&= (clearTimeout(x), null);
 		}
-		function ie() {
+		let Z = new Set([
+			"width",
+			"height",
+			"padding",
+			"transform"
+		]);
+		function se() {
 			let e = a.value;
-			e && (Z(), _.value = !0, w = setTimeout(() => {
-				_.value = !1, w = null;
-			}, X(e) + 50));
+			if (!e) return;
+			let t = ++S;
+			X(), g.value = !0, x = setTimeout(() => {
+				t === S && (g.value = !1, x = null);
+			}, te(e) + 50);
 		}
 		function Q(e) {
-			e.target === a.value && (Z(), _.value = !1);
+			e.target === a.value && Z.has(e.propertyName) && (X(), S++, g.value = !1);
 		}
-		C(() => {
-			(n.alwaysExpanded || !n.startCollapsed) && H();
+		O(() => {
+			(n.alwaysExpanded || !n.startCollapsed) && W();
 		});
 		function $() {
-			return d.value === "horizontal" && !h.value;
+			return u.value === "horizontal" && !p.value;
 		}
-		function ae(e) {
-			if (!$() || W.value) return;
+		function ce(e) {
+			if (!$() || K.value) return;
 			let t = a.value, n = e.touches[0];
-			!t || !n || v.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
+			!t || !n || _.handleTouchStart(t, n.clientY);
 		}
-		function oe(e) {
-			$() && v.handleScrollCheck(e);
+		function le(e) {
+			$() && _.handleScrollCheck(e);
 		}
-		function se(e) {
+		function ue() {
 			if (!$()) return;
-			let t = v.isActive.value;
-			v.handleTouchEnd(), !t && v.isActive.value && !W.value && (e.preventDefault(), e.stopPropagation(), H());
+			let e = _.isActive.value;
+			_.handleTouchEnd(), !e && _.isActive.value && !K.value && W();
 		}
-		return L(v.isActive, (e) => {
-			!e && E.value && !O.value && !h.value && U();
-		}), L(W, (e) => {
-			ie(), e || v.deactivate();
-		}), S(Z), t({
-			expanded: E,
-			isPinned: O,
-			isHeld: A,
-			isTransitioning: _,
-			expand: H,
-			collapse: U,
+		return H(_.isActive, (e) => {
+			!e && C.value && !w.value && !p.value && G();
+		}), H(K, (e) => {
+			se(), e || _.deactivate();
+		}), D(X), t({
+			expanded: C,
+			isPinned: w,
+			isHeld: k,
+			isTransitioning: g,
+			expand: W,
+			collapse: G,
 			keepOpen: B,
-			release: V
-		}), (t, n) => (T(), f("div", {
+			release: U
+		}), (t, n) => (A(), v("div", {
 			ref_key: "dockEl",
 			ref: a,
-			class: b(["glass-dock", [
-				d.value,
+			class: T(["glass-dock", [
+				u.value,
 				`variant-${c.value}`,
-				`shape-${u.value}`,
+				`shape-${l.value}`,
+				f.value,
 				{
-					expanded: W.value,
-					collapsed: !W.value,
-					pinned: M(O),
-					"fit-content": g.value,
-					"always-expanded": h.value,
-					"dock-wrap": e.wrap
+					expanded: K.value,
+					collapsed: !K.value,
+					pinned: L(w),
+					"fit-content": m.value,
+					"always-expanded": p.value,
+					"dock-overflow-wrap": e.overflow === "wrap"
 				},
 				e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
 			]]),
-			"data-density": m.value,
-			"data-held": M(A) || void 0,
+			"data-density": d.value,
+			"data-held": L(k) || void 0,
 			"data-container-name": e.containerName || void 0,
-			style: x(i.value),
-			onMouseenter: n[2] ||= (...e) => M(j) && M(j)(...e),
-			onMouseleave: n[3] ||= (e) => M(N)(e),
-			onFocusin: n[4] ||= (...e) => M(F) && M(F)(...e),
-			onFocusout: n[5] ||= (...e) => M(R) && M(R)(...e),
-			onTouchstart: ae,
-			onTouchmove: oe,
-			onTouchend: se,
+			style: E(i.value),
+			onMouseenter: n[2] ||= (...e) => L(j) && L(j)(...e),
+			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
-		}, [d.value === "horizontal" ? (T(), f("div", {
+		}, [u.value === "horizontal" ? (A(), v("div", {
 			key: 0,
 			ref_key: "layersEl",
 			ref: s,
 			class: "dock-layers",
-			style: x(J.value),
-			onTransitionend: n[1] ||= (...e) => M(K) && M(K)(...e)
-		}, [p("div", {
-			class: b(["dock-layer dock-layer--full", { "layer-active": W.value }]),
-			inert: !M(E) || void 0
-		}, [k(t.$slots, "default")], 10, ne), p("div", {
-			class: b(["dock-layer dock-layer--summary", { "layer-active": !W.value }]),
-			inert: M(E) || void 0,
-			onClick: n[0] ||= (...e) => M(z) && M(z)(...e)
-		}, [k(t.$slots, "collapsed")], 10, re)], 36)) : k(t.$slots, "default", { key: 1 })], 46, te));
-	}
-}), q = Symbol("glass-ui:dock-layer-group");
-function J(e) {
-	E(q, e);
-}
-function Y() {
-	let e = g(q);
-	if (!e) throw Error("[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
-	return e;
+			style: E(ee.value),
+			onTransitionend: n[1] ||= (...e) => L(q) && L(q)(...e)
+		}, [y("div", {
+			class: T(["dock-layer dock-layer--full", { "layer-active": K.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 }]),
+			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));
+	}
+}), Q = i("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
+Q.KEY;
+function $(e) {
+	Q.provide(e);
 }
+var ce = Q.use;
+Q.useOptional;
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var X = [
-	"title",
-	"aria-label",
-	"aria-pressed",
-	"onClick"
-], Z = { key: 1 }, ie = { key: 2 }, Q = /* @__PURE__ */ h({
+var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	__name: "DockLayerGroup",
-	props: /* @__PURE__ */ _({
+	props: /* @__PURE__ */ S({
 		orientation: {},
 		showRail: {
 			type: Boolean,
@@ -382,53 +431,83 @@ var X = [
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, r = F(e, "active"), i = n(), a = D([]), o = I("containerEl");
+		let t = e, n = B(e, "active"), r = a(), i = M([]), o = V("containerEl");
 		function s(e) {
-			a.value.find((t) => t.id === e.id) || a.value.push(e);
+			i.value.find((t) => t.id === e.id) || i.value.push(e);
 		}
-		function m(e) {
-			a.value = a.value.filter((t) => t.id !== e);
+		function c(e) {
+			i.value = i.value.filter((t) => t.id !== e);
 		}
-		let h = l(() => t.orientation ?? i?.orientation.value ?? "horizontal"), { onTransitionEnd: g, currentLayer: _, leavingLayer: v } = G({
+		let p = h(() => t.orientation ?? r?.orientation.value ?? "horizontal"), { onTransitionEnd: x, currentLayer: S, leavingLayer: C } = re({
 			containerEl: o,
-			activeLayer: r,
-			axis: h
-		}), y = typeof document < "u" && "startViewTransition" in document, S = P(), C = l(() => y ? {
-			"view-transition-name": `gl-dock-stack-${(S ?? "0").replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+			activeLayer: n,
+			axis: p
+		}), w = typeof document < "u" && "startViewTransition" in document, D = z(), O = h(() => w ? {
+			"view-transition-name": `gl-dock-stack-${D.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		J({
+		$({
 			register: s,
-			unregister: m,
-			currentLayerId: _,
-			leavingLayerId: v
+			unregister: c,
+			currentLayerId: j(S),
+			leavingLayerId: j(C)
 		});
-		function w(e) {
+		function k(e) {
 			return typeof e == "object" && !!e;
 		}
-		return (t, n) => (T(), f("div", { class: b(["dock-layer-group", [h.value, `rail-${e.railPosition}`]]) }, [e.showRail && a.value.length > 1 ? (T(), f("nav", {
-			key: 0,
-			class: b(["dock-layer-rail", e.railPosition])
-		}, [(T(!0), f(c, null, O(a.value, (e) => (T(), f("button", {
-			key: e.id,
-			type: "button",
-			class: b(["dock-layer-tab", { "is-active": r.value === e.id }]),
-			title: e.label,
-			"aria-label": e.label ?? e.id,
-			"aria-pressed": r.value === e.id,
-			onClick: (t) => r.value = e.id
-		}, [w(e.icon) ? (T(), u(A(e.icon), {
+		let R = M(!1);
+		function H() {
+			R.value || (R.value = !0, r?.keepOpen());
+		}
+		function W(e) {
+			let t = e.relatedTarget, n = e.currentTarget;
+			t && n?.contains(t) || R.value && (R.value = !1, r?.release());
+		}
+		return (t, r) => (A(), v("div", { class: T(["dock-layer-group", [p.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (A(), g(L(l), {
 			key: 0,
-			class: "size-4"
-		})) : typeof e.icon == "string" ? (T(), f("span", Z, j(e.icon), 1)) : (T(), f("span", ie, j((e.label ?? e.id).charAt(0)), 1))], 10, X))), 128))], 2)) : d("", !0), p("div", {
+			modelValue: n.value,
+			"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
+			orientation: "horizontal",
+			"as-child": !0
+		}, {
+			default: U(() => [b(L(u), {
+				class: T(["dock-layer-rail", e.railPosition]),
+				onFocusin: H,
+				onFocusout: W
+			}, {
+				default: U(() => [(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), {
+						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))]),
+					_: 2
+				}, 1032, [
+					"value",
+					"title",
+					"aria-label"
+				]))), 128)), b(L(f), { class: "dock-layer-tab-indicator" })]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		}, 8, ["modelValue"])) : _("", !0), y("div", {
 			ref_key: "containerEl",
 			ref: o,
 			class: "dock-layer-stack",
-			style: x(C.value),
-			onTransitionend: n[0] ||= (...e) => M(g) && M(g)(...e)
-		}, [k(t.$slots, "default")], 36)], 2));
+			style: E(O.value),
+			onTransitionend: r[1] ||= (...e) => L(x) && L(x)(...e)
+		}, [P(t.$slots, "default")], 36)], 2));
 	}
-}), $ = ["inert"], ae = /* @__PURE__ */ h({
+}), fe = [
+	"inert",
+	"aria-hidden",
+	"tabindex"
+], pe = /* @__PURE__ */ x({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -436,26 +515,35 @@ var X = [
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = Y();
-		C(() => {
+		let t = e, n = ce();
+		O(() => {
 			n.register({
 				id: t.id,
 				label: t.label,
 				icon: t.icon
 			});
-		}), S(() => {
+		}), D(() => {
 			n.unregister(t.id);
 		});
-		let r = l(() => n.currentLayerId.value === t.id), i = l(() => n.leavingLayerId.value === t.id);
-		return (e, t) => (T(), f("div", {
-			class: b(["dock-layer-item-host", {
+		let r = h(() => n.currentLayerId.value === t.id), i = h(() => n.leavingLayerId.value === t.id), a = V("hostEl");
+		return H(r, async (e, t) => {
+			!e || t || typeof document < "u" && (() => {
+				let e = document.activeElement;
+				return !e || e === document.body ? !0 : !!e.closest("[inert]");
+			})() && (await w(), a.value?.focus());
+		}), (e, t) => (A(), v("div", {
+			ref_key: "hostEl",
+			ref: a,
+			class: T(["dock-layer-item-host", {
 				"is-active": r.value,
 				"is-leaving": i.value
 			}]),
-			inert: r.value ? void 0 : !0
-		}, [k(e.$slots, "default")], 10, $));
+			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));
 	}
-}), oe = ["type"], se = /* @__PURE__ */ h({
+}), me = /* @__PURE__ */ x({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -463,6 +551,11 @@ var X = [
 			default: !1
 		},
 		type: { default: "button" },
+		as: { default: "button" },
+		asChild: {
+			type: Boolean,
+			default: !1
+		},
 		class: { type: [
 			Boolean,
 			null,
@@ -472,13 +565,76 @@ var X = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = l(() => e("dock-icon-button", { "dock-icon-button--compact": n.compact }, n.class));
-		return (e, n) => (T(), f("button", {
-			type: t.type,
-			class: b(r.value)
-		}, [k(e.$slots, "default")], 10, oe));
+		let n = t, r = h(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), i = M({});
+		function a(e) {
+			let t = e.currentTarget;
+			if (!t) return;
+			let n = t.getBoundingClientRect();
+			if (n.width === 0 || n.height === 0) return;
+			let r = (e.clientX - n.left) / n.width * 100, a = (e.clientY - n.top) / n.height * 100;
+			i.value = {
+				"--mouse-x": `${r.toFixed(2)}%`,
+				"--mouse-y": `${a.toFixed(2)}%`
+			};
+		}
+		let o = h(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
+		return (e, n) => (A(), g(L(G), C({
+			as: t.as,
+			"as-child": t.asChild
+		}, o.value, {
+			class: r.value,
+			style: i.value,
+			onPointermove: a
+		}), {
+			default: U(() => [P(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as",
+			"as-child",
+			"class",
+			"style"
+		]));
 	}
-}), ce = /* @__PURE__ */ h({
+}), he = /* @__PURE__ */ x({
+	__name: "DockBackgroundToggle",
+	props: {
+		paused: {
+			type: Boolean,
+			default: !1
+		},
+		pauseLabel: { default: "Pause background animation" },
+		playLabel: { default: "Resume background animation" }
+	},
+	emits: ["update:paused"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = h(() => n.paused ? n.playLabel : n.pauseLabel);
+		function a() {
+			r("update:paused", !n.paused);
+		}
+		return (t, n) => (A(), g(me, {
+			type: "button",
+			"aria-pressed": e.paused,
+			"aria-label": i.value,
+			title: i.value,
+			onClick: a
+		}, {
+			default: U(() => [e.paused ? (A(), g(L(te), {
+				key: 0,
+				size: 18,
+				"aria-hidden": "true"
+			})) : (A(), g(L(Y), {
+				key: 1,
+				size: 18,
+				"aria-hidden": "true"
+			}))]),
+			_: 1
+		}, 8, [
+			"aria-pressed",
+			"aria-label",
+			"title"
+		]));
+	}
+}), ge = /* @__PURE__ */ x({
 	__name: "DockTabButton",
 	props: {
 		as: { default: "button" },
@@ -495,13 +651,13 @@ var X = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = N(), i = l(() => r["data-tier"] === "primary"), a = l(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (T(), u(M(B), {
+		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), {
 			as: t.as,
 			"as-child": t.asChild,
-			class: b(a.value)
+			class: T(a.value)
 		}, {
-			default: R(() => [k(e.$slots, "default")]),
+			default: U(() => [P(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -509,7 +665,7 @@ var X = [
 			"class"
 		]));
 	}
-}), le = /* @__PURE__ */ h({
+}), _e = /* @__PURE__ */ x({
 	__name: "DockSelectTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -524,20 +680,20 @@ var X = [
 			Array
 		] }
 	},
-	setup(n) {
-		let r = n, i = U(l(() => {
+	setup(t) {
+		let r = t, i = J(h(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (n, a) => (T(), u(M(H), v(M(i), { class: M(e)("dock-select-trigger", r.class) }), {
-			default: R(() => [k(n.$slots, "default"), m(M(V), { "as-child": "" }, {
-				default: R(() => [k(n.$slots, "icon", {}, () => [m(M(t), { class: "dock-select-trigger__chevron" })])]),
+		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" })])]),
 				_: 3
 			})]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), ue = /* @__PURE__ */ h({
+}), ve = /* @__PURE__ */ x({
 	__name: "DockDropdownTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -553,15 +709,15 @@ var X = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = U(l(() => {
+		let n = t, r = J(h(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (T(), u(M(z), v(M(r), { class: M(e)("dock-dropdown-trigger", n.class) }), {
-			default: R(() => [k(t.$slots, "default")]),
+		return (t, i) => (A(), g(L(W), C(L(r), { class: L(e)("dock-dropdown-trigger", n.class) }), {
+			default: U(() => [P(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { a as DOCK_CONTEXT_KEY, ue as DockDropdownTrigger, se as DockIconButton, ae as DockLayer, Q as DockLayerGroup, le as DockSelectTrigger, ce as DockTabButton, K as GlassDock, r as provideDockContext, i as useDockContext, n as useOptionalDockContext };
+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 };