@mkbabb/glass-ui 3.8.0 → 3.10.0

package/dist/dock.js

@@ -5,11 +5,11 @@ import { t as r } from "./useSpecularTracking-BVRZsRHA.js";
 import { t as i } from "./useTouchGate-WFyJYsth.js";
 import { n as a, t as o } from "./createContext-B44Sah_H.js";
 import { i as s, n as c, r as l, t as u } from "./dockContext-BKeIMmNk.js";
-import { i as d, n as f, r as p, t as m } from "./TabsList-qyHZ2lKY.js";
-import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onBeforeUnmount as O, onMounted as k, onUnmounted as A, openBlock as j, readonly as M, ref as N, renderList as P, renderSlot as F, resolveDynamicComponent as I, toDisplayString as L, unref as R, useAttrs as z, useId as ee, useModel as te, useTemplateRef as B, watch as V, withCtx as H } from "vue";
-import { DropdownMenuTrigger as U, Primitive as W, SelectIcon as G, SelectTrigger as ne, useForwardProps as K } from "reka-ui";
-import { SpringProgress as q } from "@mkbabb/keyframes.js";
-var J = t("pause", [["rect", {
+import { i as d, n as f, r as p, t as m } from "./TabsList-B8CVOQPC.js";
+import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as ee, onBeforeUnmount as D, onMounted as te, onUnmounted as O, openBlock as k, readonly as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, useAttrs as L, useId as ne, useModel as R, useTemplateRef as z, watch as B, withCtx as V } from "vue";
+import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as W, SelectTrigger as re, useForwardProps as G } from "reka-ui";
+import { SpringProgress as K } from "@mkbabb/keyframes.js";
+var ie = t("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -23,21 +23,32 @@ var J = t("pause", [["rect", {
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), re = t("play", [["path", {
+}]]), q = 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"
-}]]);
+}]]), ae = ["data-orientation", "aria-orientation"], oe = /* @__PURE__ */ S({
+	__name: "DockSeparator",
+	setup(e) {
+		let t = s(), n = g(() => t?.orientation.value ?? "horizontal"), r = g(() => n.value), i = g(() => n.value === "vertical" ? "horizontal" : "vertical");
+		return (e, t) => (k(), y("div", {
+			class: "dock-separator",
+			role: "separator",
+			"data-orientation": r.value,
+			"aria-orientation": i.value
+		}, null, 8, ae));
+	}
+});
 //#endregion
 //#region src/components/custom/dock/composables/isTeleportedTarget.ts
-function Y(e, t) {
+function J(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 ie(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 = N(c ? "pinned" : "collapsed"), u = N(c), d = N(c), f = null, p = N(0), m = g(() => p.value > 0), h = null, _ = null, v = !1, y = l.value;
+function se(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 = j(c ? "pinned" : "collapsed"), u = j(c), d = j(c), f = null, p = j(0), m = g(() => p.value > 0), h = 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;
 	}
@@ -68,96 +79,96 @@ function ie(e) {
 		}
 		v ||= (v = !0, x(), T(), l.value = "collapsed", b(), !1);
 	}
-	function D() {
+	function ee() {
 		if (s()) {
 			l.value = "pinned", b();
 			return;
 		}
 		x(), l.value = "hover", b();
 	}
-	function O() {
+	function D() {
 		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
-	function k(e) {
+	function te(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) || Y(e.relatedTarget, a)) return;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || J(e.relatedTarget, a)) return;
 			}
 			w();
 		}
 	}
-	function j() {
+	function k() {
 		s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
 	}
-	function M(e) {
+	function A(e) {
 		if (s() || l.value !== "hover" || p.value > 0) return;
 		let t = e.currentTarget;
-		e.relatedTarget && t.contains(e.relatedTarget) || Y(e.relatedTarget, a) || w();
+		e.relatedTarget && t.contains(e.relatedTarget) || J(e.relatedTarget, a) || w();
 	}
-	function P() {
+	function M() {
 		if (s()) {
 			l.value = "pinned", b();
 			return;
 		}
 		x(), l.value = "pinned", b();
 	}
-	function F() {
+	function N() {
 		p.value++, x();
 	}
-	function I() {
+	function P() {
 		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 L(e) {
+	function F(e) {
 		if (s() || i?.value) return;
 		let t = n.value;
-		!t || t.contains(e.target) || Y(e.target, a) || E();
+		!t || t.contains(e.target) || J(e.target, a) || E();
 	}
-	return V(u, (e) => {
+	return B(u, (e) => {
 		e ? (C(), _ = requestAnimationFrame(() => {
-			_ = null, u.value && (document.addEventListener("pointerdown", L, !0), h = () => {
-				document.removeEventListener("pointerdown", L, !0), h = null;
+			_ = null, u.value && (document.addEventListener("pointerdown", F, !0), h = () => {
+				document.removeEventListener("pointerdown", F, !0), h = null;
 			});
 		})) : C();
-	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : V(r, (e) => {
+	}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : B(r, (e) => {
 		if (e) {
 			x(), l.value = "pinned", b();
 			return;
 		}
 		l.value = "collapsed", b();
-	}, { immediate: !0 }), A(() => {
+	}, { immediate: !0 }), O(() => {
 		x(), C();
 	}), {
 		state: l,
 		expanded: u,
 		isPinned: d,
 		isHeld: m,
-		onMouseEnter: O,
-		onMouseLeave: k,
-		onFocusIn: j,
-		onFocusOut: M,
-		onClickCollapsed: P,
-		keepOpen: F,
-		release: I,
-		expand: D,
+		onMouseEnter: D,
+		onMouseLeave: te,
+		onFocusIn: k,
+		onFocusOut: A,
+		onClickCollapsed: M,
+		keepOpen: N,
+		release: P,
+		expand: ee,
 		collapse: E
 	};
 }
 //#endregion
 //#region src/components/custom/dock/composables/dockMorphContext.ts
-var X = {
+var ce = {
 	response: .32,
 	dampingFraction: .7
-}, Z = o("glass-ui:dock-morph-context");
-Z.KEY;
-function ae(e) {
-	Z.provide(e);
+}, Y = o("glass-ui:dock-morph-context");
+Y.KEY;
+function le(e) {
+	Y.provide(e);
 }
-var oe = Z.use;
-function se(e) {
+var ue = Y.use;
+function de(e) {
 	let { rootEl: t, outerEl: n, outerActiveLayer: r, outerAxis: i } = e, a = null, o = /* @__PURE__ */ new Set();
 	function s() {
 		return t.value;
@@ -197,9 +208,9 @@ function se(e) {
 		if (!s()) return;
 		let e = a !== null && !a.settled ? a.velocity : 0;
 		if (!a || a.settled) {
-			c(), a = new q({
-				response: X.response,
-				dampingFraction: X.dampingFraction,
+			c(), a = new K({
+				response: ce.response,
+				dampingFraction: ce.dampingFraction,
 				initial: 0,
 				respectReducedMotion: !0
 			});
@@ -260,12 +271,12 @@ function se(e) {
 			containerEl: e.containerEl,
 			activeLayer: e.activeLayer,
 			axis: e.axis,
-			currentLayer: N(e.activeLayer.value),
-			leavingLayer: N(null),
+			currentLayer: j(e.activeLayer.value),
+			leavingLayer: j(null),
 			txId: 0,
 			stop: () => {}
 		};
-		return t.stop = V(e.activeLayer, (e, n) => {
+		return t.stop = B(e.activeLayer, (e, n) => {
 			v(t, e, n);
 		}), o.add(t), t;
 	}
@@ -279,8 +290,8 @@ function se(e) {
 	}), S = { registerGroup(e) {
 		let t = y(e);
 		return {
-			currentLayer: M(t.currentLayer),
-			leavingLayer: M(t.leavingLayer),
+			currentLayer: A(t.currentLayer),
+			leavingLayer: A(t.leavingLayer),
 			release: () => b(t)
 		};
 	} };
@@ -290,44 +301,41 @@ function se(e) {
 		let r = u(i.value);
 		e.propertyName !== r && e.propertyName !== l(i.value) || a && a.settled && (m(x), h());
 	}
-	return A(() => {
+	return O(() => {
 		for (let e of o) e.stop();
 		o.clear(), c();
 	}), {
 		context: S,
-		outerCurrentLayer: M(x.currentLayer),
+		outerCurrentLayer: A(x.currentLayer),
 		onOuterTransitionEnd: C
 	};
 }
 //#endregion
 //#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
-var ce = [
+var fe = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], le = ["inert"], ue = ["inert"], Q = /* @__PURE__ */ S({
+], pe = {
+	key: 0,
+	class: "dock-persistent"
+}, me = ["inert"], he = ["inert"], ge = {
+	key: 2,
+	class: "dock-layers dock-layer--vertical-body"
+}, _e = { class: "dock-layer--vertical-section" }, X = /* @__PURE__ */ S({
 	__name: "GlassDock",
 	props: {
-		collapseDelay: { default: 2e3 },
-		startCollapsed: {
-			type: Boolean,
-			default: !0
-		},
-		fitContent: {
-			type: Boolean,
-			default: !1
-		},
-		position: { default: "inline" },
-		alwaysExpanded: {
-			type: Boolean,
-			default: !1
-		},
-		variant: { default: "dock" },
-		shape: { default: "pill" },
-		layout: { default: "linear" },
-		orientation: { default: "horizontal" },
-		density: { default: "comfortable" },
-		overflow: { default: "grow" },
+		variant: {},
+		collapseDelay: {},
+		startCollapsed: { type: Boolean },
+		layout: {},
+		fitContent: { type: Boolean },
+		position: {},
+		alwaysExpanded: { type: Boolean },
+		shape: {},
+		orientation: {},
+		density: {},
+		overflow: {},
 		containerName: {}
 	},
 	setup(e, { expose: t }) {
@@ -336,154 +344,159 @@ var ce = [
 				"container-type": "inline-size",
 				"container-name": n.containerName
 			};
-		}), a = B("dockEl"), o = B("layersEl"), s = g(() => n.variant), l = g(() => n.shape), u = g(() => n.layout), d = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), f = g(() => n.density), p = g(() => n.overflow === "scroll" ? d.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), m = g(() => n.alwaysExpanded || d.value === "vertical" || n.layout === "grid"), h = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), _ = N(!1), v = i(n.collapseDelay), x = `glass-dock-${ee()}`, S = null, C = 0, { expanded: w, isPinned: T, isHeld: A, onMouseEnter: M, onMouseLeave: P, onFocusIn: I, onFocusOut: L, onClickCollapsed: z, keepOpen: te, release: H, expand: U, collapse: W } = ie({
-			collapseDelay: n.collapseDelay,
-			rootEl: a,
-			alwaysExpanded: m,
-			isTransitioning: _,
-			dockId: x
+		});
+		function a(e) {
+			return e.variant !== "rail" && e.variant !== "instrument-strip";
+		}
+		let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"), C = g(() => n.overflow === "scroll" ? _.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), w = g(() => n.alwaysExpanded || _.value === "vertical" || l.value === "grid"), T = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), O = j(!1), A = i(o.value), M = `glass-dock-${ne()}`, P = null, F = 0, { expanded: L, isPinned: R, isHeld: V, onMouseEnter: H, onMouseLeave: U, onFocusIn: W, onFocusOut: re, onClickCollapsed: G, keepOpen: K, release: ie, expand: q, collapse: ae } = se({
+			collapseDelay: o.value,
+			rootEl: u,
+			alwaysExpanded: w,
+			isTransitioning: O,
+			dockId: M
 		});
 		c({
-			id: x,
-			orientation: d,
-			keepOpen: te,
-			release: H,
-			held: A
+			id: M,
+			orientation: _,
+			layout: m,
+			keepOpen: K,
+			release: ie,
+			held: V
 		});
-		let G = g(() => m.value || w.value), { context: ne, onOuterTransitionEnd: K } = se({
-			rootEl: a,
-			outerEl: o,
-			outerActiveLayer: g(() => G.value ? "full" : "summary"),
+		let J = g(() => w.value || L.value), { context: ce, onOuterTransitionEnd: Y } = de({
+			rootEl: u,
+			outerEl: d,
+			outerActiveLayer: g(() => J.value ? "full" : "summary"),
 			outerAxis: g(() => "horizontal")
 		});
-		ae(ne);
-		let q = g(() => ({ "view-transition-name": x.replace(/[^a-zA-Z0-9_-]/g, "-") }));
-		function J(e) {
+		le(ce);
+		let ue = g(() => ({ "view-transition-name": M.replace(/[^a-zA-Z0-9_-]/g, "-") }));
+		function X(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 re(e) {
-			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(J), r = t.transitionDelay.split(",").map(J);
+		function Z(e) {
+			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(X), r = t.transitionDelay.split(",").map(X);
 			return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
 		}
-		function Y(e) {
-			let t = J(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
+		function ve(e) {
+			let t = X(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
 			return Math.max(t > 0 ? t * 2 : 0, 600);
 		}
-		function X() {
-			S &&= (clearTimeout(S), null);
+		function Q() {
+			P &&= (clearTimeout(P), null);
 		}
-		let Z = new Set([
+		let ye = new Set([
 			"width",
 			"height",
 			"padding",
 			"transform"
 		]);
-		function oe() {
-			let e = a.value;
+		function be() {
+			let e = u.value;
 			if (!e) return;
-			let t = ++C;
-			X(), _.value = !0, S = setTimeout(() => {
-				t === C && (_.value = !1, S = null);
-			}, Math.max(re(e), Y(e)) + 50);
+			let t = ++F;
+			Q(), O.value = !0, P = setTimeout(() => {
+				t === F && (O.value = !1, P = null);
+			}, Math.max(Z(e), ve(e)) + 50);
 		}
-		function Q(e) {
-			e.target === a.value && Z.has(e.propertyName) && (X(), C++, _.value = !1);
+		function xe(e) {
+			e.target === u.value && ye.has(e.propertyName) && (Q(), F++, O.value = !1);
 		}
-		k(() => {
-			(n.alwaysExpanded || !n.startCollapsed) && U();
+		te(() => {
+			(n.alwaysExpanded || !s.value) && q();
 		});
 		function $() {
-			return d.value === "horizontal" && !m.value;
+			return _.value === "horizontal" && !w.value;
 		}
-		function de(e) {
-			if (!$() || G.value) return;
-			let t = a.value, n = e.touches[0];
-			!t || !n || v.handleTouchStart(t, n.clientY);
+		function Se(e) {
+			if (!$() || J.value) return;
+			let t = u.value, n = e.touches[0];
+			!t || !n || A.handleTouchStart(t, n.clientY);
 		}
-		function fe(e) {
-			$() && v.handleScrollCheck(e);
+		function Ce(e) {
+			$() && A.handleScrollCheck(e);
 		}
-		function pe() {
+		function we() {
 			if (!$()) return;
-			let e = v.isActive.value;
-			v.handleTouchEnd(), !e && v.isActive.value && !G.value && U();
+			let e = A.isActive.value;
+			A.handleTouchEnd(), !e && A.isActive.value && !J.value && q();
 		}
-		return V(v.isActive, (e) => {
-			!e && w.value && !T.value && !m.value && W();
-		}), V(G, (e) => {
-			oe(), e || v.deactivate();
-		}), O(X), t({
-			expanded: w,
-			isPinned: T,
-			isHeld: A,
-			isTransitioning: _,
-			expand: U,
-			collapse: W,
-			keepOpen: te,
-			release: H
-		}), (t, n) => (j(), y("div", {
+		return B(A.isActive, (e) => {
+			!e && L.value && !R.value && !w.value && ae();
+		}), B(J, (e) => {
+			be(), e || A.deactivate();
+		}), D(Q), t({
+			expanded: L,
+			isPinned: R,
+			isHeld: V,
+			isTransitioning: O,
+			expand: q,
+			collapse: ae,
+			keepOpen: K,
+			release: ie
+		}), (t, n) => (k(), y("div", {
 			ref_key: "dockEl",
-			ref: a,
+			ref: u,
 			class: E(["glass-dock", [
-				d.value,
-				`variant-${s.value}`,
-				`shape-${l.value}`,
-				`layout-${u.value}`,
-				p.value,
+				_.value,
+				`variant-${f.value}`,
+				`shape-${p.value}`,
+				`layout-${I(m)}`,
+				C.value,
 				{
-					expanded: G.value,
-					collapsed: !G.value,
-					pinned: R(T),
-					"fit-content": h.value,
-					"always-expanded": m.value,
-					"dock-overflow-wrap": e.overflow === "wrap" && d.value !== "vertical"
+					expanded: J.value,
+					collapsed: !J.value,
+					pinned: I(R),
+					"fit-content": T.value,
+					"always-expanded": w.value,
+					"dock-overflow-wrap": e.overflow === "wrap" && _.value !== "vertical"
 				},
 				e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
 			]]),
-			"data-density": f.value,
-			"data-held": R(A) || void 0,
+			"data-density": S.value,
+			"data-held": I(V) || void 0,
 			"data-container-name": e.containerName || void 0,
-			style: D([r.value, q.value]),
-			onMouseenter: n[2] ||= (...e) => R(M) && R(M)(...e),
-			onMouseleave: n[3] ||= (e) => R(P)(e),
-			onFocusin: n[4] ||= (...e) => R(I) && R(I)(...e),
-			onFocusout: n[5] ||= (...e) => R(L) && R(L)(...e),
-			onTouchstart: de,
-			onTouchmove: fe,
-			onTouchend: pe,
-			onTransitionend: Q,
-			onTransitioncancel: Q
-		}, [d.value === "horizontal" ? (j(), y("div", {
-			key: 0,
+			style: ee([r.value, ue.value]),
+			onMouseenter: n[2] ||= (...e) => I(H) && I(H)(...e),
+			onMouseleave: n[3] ||= (e) => I(U)(e),
+			onFocusin: n[4] ||= (...e) => I(W) && I(W)(...e),
+			onFocusout: n[5] ||= (...e) => I(re) && I(re)(...e),
+			onTouchstart: Se,
+			onTouchmove: Ce,
+			onTouchend: we,
+			onTransitionend: xe,
+			onTransitioncancel: xe
+		}, [t.$slots.persistent ? (k(), y("div", pe, [N(t.$slots, "persistent")])) : v("", !0), _.value === "horizontal" ? (k(), y("div", {
+			key: 1,
 			ref_key: "layersEl",
-			ref: o,
+			ref: d,
 			class: "dock-layers",
-			onTransitionend: n[1] ||= (...e) => R(K) && R(K)(...e)
+			onTransitionend: n[1] ||= (...e) => I(Y) && I(Y)(...e)
 		}, [b("div", {
-			class: E(["dock-layer dock-layer--full", { "is-active": G.value }]),
-			inert: !R(w) || void 0
-		}, [F(t.$slots, "default")], 10, le), b("div", {
-			class: E(["dock-layer dock-layer--summary", { "is-active": !G.value }]),
-			inert: R(w) || void 0,
-			onClick: n[0] ||= (...e) => R(z) && R(z)(...e)
-		}, [F(t.$slots, "collapsed")], 10, ue)], 544)) : F(t.$slots, "default", { key: 1 })], 46, ce));
-	}
-}), $ = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
-$.KEY;
-function de(e) {
-	$.provide(e);
+			class: E(["dock-layer dock-layer--full", { "is-active": J.value }]),
+			inert: !I(L) || void 0
+		}, [N(t.$slots, "default")], 10, me), b("div", {
+			class: E(["dock-layer dock-layer--summary", { "is-active": !J.value }]),
+			inert: I(L) || void 0,
+			onClick: n[0] ||= (...e) => I(G) && I(G)(...e)
+		}, [N(t.$slots, "collapsed")], 10, he)], 544)) : (k(), y("div", ge, [N(t.$slots, "default"), t.$slots.collapsed ? (k(), y(h, { key: 0 }, [x(oe), b("div", _e, [N(t.$slots, "collapsed")])], 64)) : v("", !0)]))], 46, fe));
+	}
+}), Z = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
+Z.KEY;
+function ve(e) {
+	Z.provide(e);
 }
-var fe = $.use;
-$.useOptional;
+var Q = Z.use;
+Z.useOptional;
 //#endregion
 //#region src/components/custom/dock/composables/useLayerTransition.ts
-var pe = {
+var ye = {
 	response: .32,
 	dampingFraction: .7
 };
-function me(e) {
-	let { containerEl: t, activeLayer: n, axis: r } = e, i = g(() => r?.value === "vertical" ? "height" : "width"), a = g(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = N(n.value), c = N(null), l = 0, u = null, d = null;
+function be(e) {
+	let { containerEl: t, activeLayer: n, axis: r } = e, i = g(() => r?.value === "vertical" ? "height" : "width"), a = g(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = j(n.value), c = j(null), l = 0, u = null, d = null;
 	function f() {
 		u &&= (u.dispose(), null), d = null;
 	}
@@ -501,9 +514,9 @@ function me(e) {
 			h(e, t);
 			return;
 		}
-		e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new q({
-			response: pe.response,
-			dampingFraction: pe.dampingFraction,
+		e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new K({
+			response: ye.response,
+			dampingFraction: ye.dampingFraction,
 			initial: 0,
 			respectReducedMotion: !0
 		}), d = e);
@@ -512,7 +525,7 @@ function me(e) {
 			n === l && (t.style.setProperty("--dock-morph-t", `${r}`), s.settled && h(e, t));
 		});
 	}
-	V(n, (e, n) => {
+	B(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
 		if (!r) {
@@ -534,7 +547,7 @@ function me(e) {
 		let n = t.value;
 		n && e.target === n && (e.propertyName !== a.value && e.propertyName !== i.value || u && u.settled && h(n, p(n)));
 	}
-	return A(f), {
+	return O(f), {
 		onTransitionEnd: v,
 		currentLayer: s,
 		leavingLayer: c
@@ -542,7 +555,7 @@ function me(e) {
 }
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
+var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
 	__name: "DockLayerGroup",
 	props: /* @__PURE__ */ C({
 		orientation: {},
@@ -557,23 +570,23 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, n = te(e, "active"), r = s(), i = N([]), a = B("containerEl");
+		let t = e, n = R(e, "active"), r = s(), i = j([]), a = z("containerEl");
 		function o(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 l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = oe(), S, C, w;
-		if (u) {
-			let e = u.registerGroup({
+		let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S = ue(), C, w, T;
+		if (S) {
+			let e = S.registerGroup({
 				containerEl: a,
 				activeLayer: n,
 				axis: l
 			});
-			S = e.currentLayer, C = e.leavingLayer, w = () => {}, O(() => e.release());
+			C = e.currentLayer, w = e.leavingLayer, T = () => {}, D(() => e.release());
 		} else {
-			let e = me({
+			let e = be({
 				containerEl: a,
 				activeLayer: n,
 				axis: l,
@@ -582,74 +595,75 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 					return [i.value.findIndex((e) => e.id === t) < n ? "layer-back" : "layer-forward"];
 				}
 			});
-			S = M(e.currentLayer), C = M(e.leavingLayer), w = e.onTransitionEnd;
+			C = A(e.currentLayer), w = A(e.leavingLayer), T = e.onTransitionEnd;
 		}
-		let T = typeof document < "u" && "startViewTransition" in document, k = ee(), A = g(() => T ? {
-			"view-transition-name": `gl-dock-stack-${k.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+		let te = typeof document < "u" && "startViewTransition" in document, O = ne(), L = g(() => te ? {
+			"view-transition-name": `gl-dock-stack-${O.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
-		de({
+		ve({
 			register: o,
 			unregister: c,
-			currentLayerId: S,
-			leavingLayerId: C
+			currentLayerId: C,
+			leavingLayerId: w
 		});
-		function z(e) {
+		function B(e) {
 			return typeof e == "object" && !!e;
 		}
-		let V = N(!1);
+		let H = j(!1);
 		function U() {
-			V.value || (V.value = !0, r?.keepOpen());
+			H.value || (H.value = !0, r?.keepOpen());
 		}
 		function W(e) {
 			let t = e.relatedTarget, n = e.currentTarget;
-			t && n?.contains(t) || V.value && (V.value = !1, r?.release());
+			t && n?.contains(t) || H.value && (H.value = !1, r?.release());
 		}
-		return (t, r) => (j(), y("div", { class: E(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (j(), _(R(d), {
+		return (t, r) => (k(), y("div", { class: E(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (k(), _(I(d), {
 			key: 0,
 			modelValue: n.value,
 			"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
-			orientation: "horizontal",
+			orientation: u.value,
 			"as-child": !0
 		}, {
-			default: H(() => [x(R(m), {
+			default: V(() => [x(I(m), {
 				class: E(["dock-layer-rail", e.railPosition]),
+				indicator: !1,
 				onFocusin: U,
 				onFocusout: W
 			}, {
-				default: H(() => [(j(!0), y(h, null, P(i.value, (e) => (j(), _(R(p), {
+				default: V(() => [(k(!0), y(h, null, M(i.value, (e) => (k(), _(I(p), {
 					key: e.id,
 					value: e.id,
 					class: "dock-layer-tab",
 					title: e.label,
 					"aria-label": e.label ?? e.id
 				}, {
-					default: H(() => [z(e.icon) ? (j(), _(I(e.icon), {
+					default: V(() => [B(e.icon) ? (k(), _(P(e.icon), {
 						key: 0,
 						class: "size-4"
-					})) : typeof e.icon == "string" ? (j(), y("span", he, L(e.icon), 1)) : (j(), y("span", ge, L((e.label ?? e.id).charAt(0)), 1))]),
+					})) : typeof e.icon == "string" ? (k(), y("span", xe, F(e.icon), 1)) : (k(), y("span", $, F((e.label ?? e.id).charAt(0)), 1))]),
 					_: 2
 				}, 1032, [
 					"value",
 					"title",
 					"aria-label"
-				]))), 128)), x(R(f), { class: "dock-layer-tab-indicator" })]),
+				]))), 128)), x(I(f), { class: "dock-layer-tab-indicator" })]),
 				_: 1
 			}, 8, ["class"])]),
 			_: 1
-		}, 8, ["modelValue"])) : v("", !0), b("div", {
+		}, 8, ["modelValue", "orientation"])) : v("", !0), b("div", {
 			ref_key: "containerEl",
 			ref: a,
 			class: "dock-layer-stack",
-			style: D(A.value),
-			onTransitionend: r[1] ||= (...e) => R(w) && R(w)(...e)
-		}, [F(t.$slots, "default")], 36)], 2));
+			style: ee(L.value),
+			onTransitionend: r[1] ||= (...e) => I(T) && I(T)(...e)
+		}, [N(t.$slots, "default")], 36)], 2));
 	}
-}), ve = [
+}), Ce = [
 	"inert",
 	"aria-hidden",
 	"tabindex"
-], ye = /* @__PURE__ */ S({
+], we = /* @__PURE__ */ S({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -657,23 +671,23 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = fe();
-		k(() => {
+		let t = e, n = Q();
+		te(() => {
 			n.register({
 				id: t.id,
 				label: t.label,
 				icon: t.icon
 			});
-		}), O(() => {
+		}), D(() => {
 			n.unregister(t.id);
 		});
-		let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = B("hostEl");
-		return V(r, async (e, t) => {
+		let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = z("hostEl");
+		return B(r, async (e, t) => {
 			!e || t || typeof document < "u" && (() => {
 				let e = document.activeElement;
 				return !e || e === document.body ? !0 : !!e.closest("[inert]");
 			})() && (await T(), a.value?.focus());
-		}), (e, t) => (j(), y("div", {
+		}), (e, t) => (k(), y("div", {
 			ref_key: "hostEl",
 			ref: a,
 			class: E(["dock-layer-item-host", {
@@ -683,9 +697,9 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 			inert: r.value ? void 0 : !0,
 			"aria-hidden": r.value ? void 0 : !0,
 			tabindex: r.value ? -1 : void 0
-		}, [F(e.$slots, "default")], 10, ve));
+		}, [N(e.$slots, "default")], 10, Ce));
 	}
-}), be = /* @__PURE__ */ S({
+}), Te = /* @__PURE__ */ S({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -708,15 +722,15 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 	},
 	setup(t) {
 		let n = t, i = g(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), { specularStyle: a, onPointerMove: o } = r(), s = g(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
-		return (e, n) => (j(), _(R(W), w({
+		return (e, n) => (k(), _(I(U), w({
 			as: t.as,
 			"as-child": t.asChild
 		}, s.value, {
 			class: i.value,
-			style: R(a),
-			onPointermove: R(o)
+			style: I(a),
+			onPointermove: I(o)
 		}), {
-			default: H(() => [F(e.$slots, "default")]),
+			default: V(() => [N(e.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"as",
@@ -726,7 +740,7 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 			"onPointermove"
 		]));
 	}
-}), xe = /* @__PURE__ */ S({
+}), Ee = /* @__PURE__ */ S({
 	__name: "DockBackgroundToggle",
 	props: {
 		paused: {
@@ -742,18 +756,18 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 		function a() {
 			r("update:paused", !n.paused);
 		}
-		return (t, n) => (j(), _(be, {
+		return (t, n) => (k(), _(Te, {
 			type: "button",
 			"aria-pressed": e.paused,
 			"aria-label": i.value,
 			title: i.value,
 			onClick: a
 		}, {
-			default: H(() => [e.paused ? (j(), _(R(re), {
+			default: V(() => [e.paused ? (k(), _(I(q), {
 				key: 0,
 				size: 18,
 				"aria-hidden": "true"
-			})) : (j(), _(R(J), {
+			})) : (k(), _(I(ie), {
 				key: 1,
 				size: 18,
 				"aria-hidden": "true"
@@ -765,7 +779,7 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 			"title"
 		]));
 	}
-}), Se = /* @__PURE__ */ S({
+}), De = /* @__PURE__ */ S({
 	__name: "DockTabButton",
 	props: {
 		as: { default: "button" },
@@ -782,13 +796,13 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let n = t, r = z(), i = g(() => r["data-tier"] === "primary"), a = g(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (j(), _(R(W), {
+		let n = t, r = L(), i = g(() => r["data-tier"] === "primary"), a = g(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
+		return (e, n) => (k(), _(I(U), {
 			as: t.as,
 			"as-child": t.asChild,
 			class: E(a.value)
 		}, {
-			default: H(() => [F(e.$slots, "default")]),
+			default: V(() => [N(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -796,7 +810,7 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 			"class"
 		]));
 	}
-}), Ce = /* @__PURE__ */ S({
+}), Oe = /* @__PURE__ */ S({
 	__name: "DockSelectTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -812,19 +826,19 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let r = t, i = K(g(() => {
+		let r = t, i = G(g(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (t, a) => (j(), _(R(ne), w(R(i), { class: R(e)("dock-select-trigger", r.class) }), {
-			default: H(() => [F(t.$slots, "default"), x(R(G), { "as-child": "" }, {
-				default: H(() => [F(t.$slots, "icon", {}, () => [x(R(n), { class: "dock-select-trigger__chevron" })])]),
+		return (t, a) => (k(), _(I(re), w(I(i), { class: I(e)("dock-select-trigger", r.class) }), {
+			default: V(() => [N(t.$slots, "default"), x(I(W), { "as-child": "" }, {
+				default: V(() => [N(t.$slots, "icon", {}, () => [x(I(n), { class: "dock-select-trigger__chevron" })])]),
 				_: 3
 			})]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), we = /* @__PURE__ */ S({
+}), ke = /* @__PURE__ */ S({
 	__name: "DockDropdownTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -840,15 +854,15 @@ var he = { key: 1 }, ge = { key: 2 }, _e = /* @__PURE__ */ S({
 		] }
 	},
 	setup(t) {
-		let n = t, r = K(g(() => {
+		let n = t, r = G(g(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (j(), _(R(U), w(R(r), { class: R(e)("dock-dropdown-trigger", n.class) }), {
-			default: H(() => [F(t.$slots, "default")]),
+		return (t, i) => (k(), _(I(H), w(I(r), { class: I(e)("dock-dropdown-trigger", n.class) }), {
+			default: V(() => [N(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { u as DOCK_CONTEXT_KEY, xe as DockBackgroundToggle, we as DockDropdownTrigger, be as DockIconButton, ye as DockLayer, _e as DockLayerGroup, Ce as DockSelectTrigger, Se as DockTabButton, Q as GlassDock, c as provideDockContext, l as useDockContext, me as useLayerTransition, s as useOptionalDockContext };
+export { u as DOCK_CONTEXT_KEY, Ee as DockBackgroundToggle, ke as DockDropdownTrigger, Te as DockIconButton, we as DockLayer, Se as DockLayerGroup, Oe as DockSelectTrigger, oe as DockSeparator, De as DockTabButton, X as GlassDock, c as provideDockContext, l as useDockContext, be as useLayerTransition, s as useOptionalDockContext };