@mkbabb/glass-ui 2.1.0 → 3.1.0

package/dist/dock.js

@@ -1,11 +1,12 @@
 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-BDGSrwsV.js";
-import { t as o } from "./useTouchGate-BhhEMlwJ.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, inject as h, mergeModels as g, mergeProps as _, nextTick as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, onMounted as S, onUnmounted as C, openBlock as w, provide as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as k, toDisplayString as A, unref as j, useAttrs as M, useModel as N, useTemplateRef as P, watch as F, withCtx as I } from "vue";
-import { DropdownMenuTrigger as L, Primitive as R, SelectIcon as z, SelectTrigger as B, useForwardProps as V } from "reka-ui";
+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";
 //#region src/components/custom/dock/composables/isTeleportedTarget.ts
-function H(e, t) {
+function W(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;
@@ -13,7 +14,7 @@ function H(e, t) {
 //#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, l = s(), u = E(l ? "pinned" : "collapsed"), d = E(l), f = E(l), p = null, m = E(0), h = c(() => m.value > 0), g = null, _ = null, v = !1, y = u.value;
+	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 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;
 	}
@@ -23,15 +24,15 @@ function ee(e) {
 	function S() {
 		_ !== null && (cancelAnimationFrame(_), _ = null);
 	}
-	function w() {
+	function C() {
 		S(), g?.();
 	}
 	function T() {
 		s() || m.value > 0 || (x(), p = setTimeout(() => {
-			D(), u.value = "collapsed", b();
+			E(), u.value = "collapsed", b();
 		}, t));
 	}
-	function D() {
+	function E() {
 		typeof document > "u" || typeof PointerEvent > "u" || document.body.dispatchEvent(new PointerEvent("pointerdown", {
 			bubbles: !0,
 			composed: !0
@@ -42,7 +43,7 @@ function ee(e) {
 			u.value = "pinned", b();
 			return;
 		}
-		v ||= (v = !0, x(), D(), u.value = "collapsed", b(), !1);
+		v ||= (v = !0, x(), E(), u.value = "collapsed", b(), !1);
 	}
 	function k() {
 		if (s()) {
@@ -59,7 +60,7 @@ function ee(e) {
 			if (m.value > 0) return;
 			if (e) {
 				let t = n.value;
-				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || H(e.relatedTarget, a)) return;
+				if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || W(e.relatedTarget, a)) return;
 			}
 			T();
 		}
@@ -70,7 +71,7 @@ function ee(e) {
 	function N(e) {
 		if (s() || u.value !== "hover" || m.value > 0) return;
 		let t = e.currentTarget;
-		e.relatedTarget && t.contains(e.relatedTarget) || H(e.relatedTarget, a) || T();
+		e.relatedTarget && t.contains(e.relatedTarget) || W(e.relatedTarget, a) || T();
 	}
 	function P() {
 		if (s()) {
@@ -79,10 +80,10 @@ function ee(e) {
 		}
 		x(), u.value = "pinned", b();
 	}
-	function I() {
+	function F() {
 		m.value++, x();
 	}
-	function L() {
+	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();
 		}, Math.min(t, 800)));
@@ -90,22 +91,22 @@ function ee(e) {
 	function R(e) {
 		if (s() || i?.value) return;
 		let t = n.value;
-		!t || t.contains(e.target) || H(e.target, a) || O();
+		!t || t.contains(e.target) || W(e.target, a) || O();
 	}
-	return F(d, (e) => {
-		e ? (w(), _ = requestAnimationFrame(() => {
+	return L(d, (e) => {
+		e ? (C(), _ = requestAnimationFrame(() => {
 			_ = null, d.value && (document.addEventListener("pointerdown", R, !0), g = () => {
 				document.removeEventListener("pointerdown", R, !0), g = null;
 			});
-		})) : w();
-	}), typeof r == "boolean" ? r && (u.value = "pinned", b()) : F(r, (e) => {
+		})) : C();
+	}), typeof r == "boolean" ? r && (u.value = "pinned", b()) : L(r, (e) => {
 		if (e) {
 			x(), u.value = "pinned", b();
 			return;
 		}
 		u.value = "collapsed", b();
-	}, { immediate: !0 }), C(() => {
-		x(), w();
+	}, { immediate: !0 }), w(() => {
+		x(), C();
 	}), {
 		state: u,
 		expanded: d,
@@ -116,68 +117,78 @@ function ee(e) {
 		onFocusIn: M,
 		onFocusOut: N,
 		onClickCollapsed: P,
-		keepOpen: I,
-		release: L,
+		keepOpen: F,
+		release: I,
 		expand: k,
 		collapse: O
 	};
 }
 //#endregion
 //#region src/components/custom/dock/composables/useLayerTransition.ts
-function U(e) {
-	let { containerEl: t, activeLayer: n, axis: r } = e, i = c(() => r?.value === "vertical" ? "height" : "width"), a = (e) => e.getBoundingClientRect()[i.value], o = E(n.value), s = E(null), l = 0, u = null;
-	function d(e) {
+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) {
 		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 f(e) {
-		let t = getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = t.transitionDuration.split(",").map(d), a = t.transitionDelay.split(",").map(d), o = r.map((e, t) => {
+	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) => {
 			let r = n[t] ?? n[0] ?? "all";
-			return r !== "all" && r !== i.value ? 0 : e + (a[t] ?? a[0] ?? 0);
+			return r !== "all" && r !== a.value ? 0 : e + (i[t] ?? i[0] ?? 0);
 		});
 		return Math.max(0, ...o) + 50;
 	}
-	function p() {
-		u &&= (clearTimeout(u), null);
+	function h() {
+		f &&= (clearTimeout(f), null);
 	}
-	function m(e, t) {
-		e.style.setProperty(i.value, t);
+	function g(e, t) {
+		e.style.setProperty(a.value, t);
 	}
-	function h(e) {
-		e.style.removeProperty(i.value);
+	function _(e) {
+		e.style.removeProperty(a.value);
 	}
-	F(n, (e, n) => {
+	L(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
 		if (!r) {
-			o.value = e, s.value = null;
+			c.value = e, u.value = null;
+			return;
+		}
+		if (i) {
+			h();
+			let t = ++d, { finished: r } = s(() => {
+				u.value = n, c.value = e;
+			});
+			r.finally(() => {
+				t === d && (u.value = null);
+			});
 			return;
 		}
-		p();
-		let i = ++l, c = a(r);
-		m(r, `${c}px`), s.value = n, o.value = e, v(() => {
-			if (i !== l || !r) return;
-			r.style.transition = "none", h(r);
-			let e = a(r);
-			if (m(r, `${c}px`), r.offsetWidth, r.style.transition = "", requestAnimationFrame(() => {
-				i === l && m(r, `${e}px`);
-			}), Math.abs(e - c) < .5) {
-				h(r), s.value = null;
+		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;
 			}
-			u = setTimeout(() => {
-				i === l && (h(r), s.value = null);
-			}, f(r));
+			f = setTimeout(() => {
+				a === d && (_(r), u.value = null);
+			}, m(r));
 		});
 	});
-	function g(e) {
+	function v(e) {
 		let n = t.value;
-		n && e.target === n && e.propertyName === i.value && (p(), h(n), s.value = null);
+		n && e.target === n && e.propertyName === a.value && (h(), _(n), u.value = null);
 	}
-	return C(p), {
-		onTransitionEnd: g,
-		currentLayer: o,
-		leavingLayer: s
+	return w(h), {
+		onTransitionEnd: v,
+		currentLayer: c,
+		leavingLayer: u
 	};
 }
 //#endregion
@@ -186,7 +197,7 @@ var te = [
 	"data-density",
 	"data-held",
 	"data-container-name"
-], ne = ["inert"], re = ["inert"], W = /* @__PURE__ */ m({
+], ne = ["inert"], re = ["inert"], K = /* @__PURE__ */ h({
 	__name: "GlassDock",
 	props: {
 		collapseDelay: { default: 2e3 },
@@ -214,94 +225,97 @@ var te = [
 		containerName: {}
 	},
 	setup(e, { expose: t }) {
-		let n = 0, i = e, a = c(() => {
+		let n = 0, i = e, a = l(() => {
 			if (i.containerName) return {
 				"container-type": "inline-size",
 				"container-name": i.containerName,
 				overflow: "visible"
 			};
-		}), s = P("dockEl"), l = P("layersEl"), u = c(() => i.variant), p = c(() => i.shape), m = c(() => i.variant === "rail" || i.variant === "instrument-strip" ? "vertical" : i.orientation), h = c(() => i.density), g = c(() => i.alwaysExpanded || m.value === "vertical"), _ = c(() => i.fitContent || i.variant === "rail" || i.variant === "instrument-strip"), v = E(!1), C = o(i.collapseDelay), T = `glass-dock-${++n}`, D = null, { expanded: k, isPinned: A, isHeld: M, onMouseEnter: N, onMouseLeave: I, onFocusIn: L, onFocusOut: R, onClickCollapsed: z, keepOpen: B, release: V, expand: H, collapse: W } = ee({
+		}), s = I("dockEl"), c = I("layersEl"), u = l(() => i.variant), d = l(() => i.shape), m = l(() => i.variant === "rail" || i.variant === "instrument-strip" ? "vertical" : i.orientation), h = l(() => i.density), g = l(() => i.alwaysExpanded || m.value === "vertical"), _ = l(() => i.fitContent || i.variant === "rail" || i.variant === "instrument-strip"), v = D(!1), y = o(i.collapseDelay), w = `glass-dock-${++n}`, E = null, { expanded: O, isPinned: A, isHeld: j, onMouseEnter: N, onMouseLeave: P, onFocusIn: F, onFocusOut: R, onClickCollapsed: z, keepOpen: B, release: V, expand: H, collapse: U } = ee({
 			collapseDelay: i.collapseDelay,
 			rootEl: s,
 			alwaysExpanded: g,
 			isTransitioning: v,
-			dockId: T
+			dockId: w
 		});
 		r({
-			id: T,
+			id: w,
 			orientation: m,
 			keepOpen: B,
 			release: V,
-			held: M
-		});
-		let G = c(() => g.value || k.value), { onTransitionEnd: K } = U({
-			containerEl: l,
-			activeLayer: c(() => G.value ? "full" : "summary"),
-			axis: c(() => "horizontal")
+			held: j
 		});
-		function q(e) {
+		let W = l(() => g.value || O.value), { onTransitionEnd: K } = G({
+			containerEl: c,
+			activeLayer: l(() => W.value ? "full" : "summary"),
+			axis: l(() => "horizontal")
+		}), q = typeof document < "u" && "startViewTransition" in document, J = l(() => q ? {
+			"view-transition-name": w.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 J(e) {
-			let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(q), r = t.transitionDelay.split(",").map(q);
+		function X(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 Y() {
-			D &&= (clearTimeout(D), null);
+		function Z() {
+			E &&= (clearTimeout(E), null);
 		}
-		function X() {
+		function ie() {
 			let e = s.value;
-			e && (Y(), v.value = !0, D = setTimeout(() => {
-				v.value = !1, D = null;
-			}, J(e) + 50));
+			e && (Z(), v.value = !0, E = setTimeout(() => {
+				v.value = !1, E = null;
+			}, X(e) + 50));
 		}
-		function Z(e) {
-			e.target === s.value && (Y(), v.value = !1);
+		function Q(e) {
+			e.target === s.value && (Z(), v.value = !1);
 		}
-		S(() => {
+		C(() => {
 			(i.alwaysExpanded || !i.startCollapsed) && H();
 		});
-		function Q() {
+		function $() {
 			return m.value === "horizontal" && !g.value;
 		}
-		function ie(e) {
-			if (!Q() || G.value) return;
+		function ae(e) {
+			if (!$() || W.value) return;
 			let t = s.value, n = e.touches[0];
-			!t || !n || C.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
+			!t || !n || y.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
 		}
-		function $(e) {
-			Q() && C.handleScrollCheck(e);
+		function oe(e) {
+			$() && y.handleScrollCheck(e);
 		}
-		function ae(e) {
-			if (!Q()) return;
-			let t = C.isActive.value;
-			C.handleTouchEnd(), !t && C.isActive.value && !G.value && (e.preventDefault(), e.stopPropagation(), H());
+		function se(e) {
+			if (!$()) return;
+			let t = y.isActive.value;
+			y.handleTouchEnd(), !t && y.isActive.value && !W.value && (e.preventDefault(), e.stopPropagation(), H());
 		}
-		return F(C.isActive, (e) => {
-			!e && k.value && !A.value && !g.value && W();
-		}), F(G, (e) => {
-			X(), e || C.deactivate();
-		}), x(Y), t({
-			expanded: k,
+		return L(y.isActive, (e) => {
+			!e && O.value && !A.value && !g.value && U();
+		}), L(W, (e) => {
+			ie(), e || y.deactivate();
+		}), S(Z), t({
+			expanded: O,
 			isPinned: A,
-			isHeld: M,
+			isHeld: j,
 			isTransitioning: v,
 			expand: H,
-			collapse: W,
+			collapse: U,
 			keepOpen: B,
 			release: V
-		}), (t, n) => (w(), d("div", {
+		}), (t, n) => (T(), f("div", {
 			ref_key: "dockEl",
 			ref: s,
-			class: y(["glass-dock", [
+			class: b(["glass-dock", [
 				m.value,
 				`variant-${u.value}`,
-				`shape-${p.value}`,
+				`shape-${d.value}`,
 				{
-					expanded: G.value,
-					collapsed: !G.value,
-					pinned: j(A),
+					expanded: W.value,
+					collapsed: !W.value,
+					pinned: M(A),
 					"fit-content": _.value,
 					"always-expanded": g.value,
 					"dock-wrap": e.wrap
@@ -309,52 +323,53 @@ var te = [
 				e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
 			]]),
 			"data-density": h.value,
-			"data-held": j(M) || void 0,
+			"data-held": M(j) || void 0,
 			"data-container-name": e.containerName || void 0,
-			style: b(a.value),
-			onMouseenter: n[2] ||= (...e) => j(N) && j(N)(...e),
-			onMouseleave: n[3] ||= (e) => j(I)(e),
-			onFocusin: n[4] ||= (...e) => j(L) && j(L)(...e),
-			onFocusout: n[5] ||= (...e) => j(R) && j(R)(...e),
-			onTouchstart: ie,
-			onTouchmove: $,
-			onTouchend: ae,
-			onTransitionend: Z,
-			onTransitioncancel: Z
-		}, [m.value === "horizontal" ? (w(), d("div", {
+			style: x(a.value),
+			onMouseenter: n[2] ||= (...e) => M(N) && M(N)(...e),
+			onMouseleave: n[3] ||= (e) => M(P)(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,
+			onTransitionend: Q,
+			onTransitioncancel: Q
+		}, [m.value === "horizontal" ? (T(), f("div", {
 			key: 0,
 			ref_key: "layersEl",
-			ref: l,
+			ref: c,
 			class: "dock-layers",
-			onTransitionend: n[1] ||= (...e) => j(K) && j(K)(...e)
-		}, [f("div", {
-			class: y(["dock-layer dock-layer--full", { "layer-active": G.value }]),
-			inert: !j(k) || void 0
-		}, [O(t.$slots, "default")], 10, ne), f("div", {
-			class: y(["dock-layer dock-layer--summary", { "layer-active": !G.value }]),
-			inert: j(k) || void 0,
-			onClick: n[0] ||= (...e) => j(z) && j(z)(...e)
-		}, [O(t.$slots, "collapsed")], 10, re)], 544)) : O(t.$slots, "default", { key: 1 })], 46, te));
+			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(O) || void 0
+		}, [k(t.$slots, "default")], 10, ne), p("div", {
+			class: b(["dock-layer dock-layer--summary", { "layer-active": !W.value }]),
+			inert: M(O) || 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));
 	}
-}), G = Symbol("glass-ui:dock-layer-group");
-function K(e) {
-	T(G, e);
+}), q = Symbol("glass-ui:dock-layer-group");
+function J(e) {
+	E(q, e);
 }
-function q() {
-	let e = h(G);
+function Y() {
+	let e = g(q);
 	if (!e) throw Error("[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
 	return e;
 }
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var J = [
+var X = [
 	"title",
 	"aria-label",
 	"aria-pressed",
 	"onClick"
-], Y = { key: 1 }, X = { key: 2 }, Z = /* @__PURE__ */ m({
+], Z = { key: 1 }, ie = { key: 2 }, Q = /* @__PURE__ */ h({
 	__name: "DockLayerGroup",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ _({
 		orientation: {},
 		showRail: {
 			type: Boolean,
@@ -367,49 +382,53 @@ var J = [
 	}),
 	emits: ["update:active"],
 	setup(e) {
-		let t = e, r = N(e, "active"), i = n(), a = E([]), o = P("containerEl");
-		function p(e) {
+		let t = e, r = F(e, "active"), i = n(), a = D([]), o = I("containerEl");
+		function s(e) {
 			a.value.find((t) => t.id === e.id) || a.value.push(e);
 		}
 		function m(e) {
 			a.value = a.value.filter((t) => t.id !== e);
 		}
-		let h = c(() => t.orientation ?? i?.orientation.value ?? "horizontal"), { onTransitionEnd: g, currentLayer: _, leavingLayer: v } = U({
+		let h = l(() => t.orientation ?? i?.orientation.value ?? "horizontal"), { onTransitionEnd: g, currentLayer: _, leavingLayer: v } = G({
 			containerEl: o,
 			activeLayer: r,
 			axis: h
-		});
-		K({
-			register: p,
+		}), 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, "-")}`,
+			"view-transition-class": "gl-dock-layer"
+		} : void 0);
+		J({
+			register: s,
 			unregister: m,
 			currentLayerId: _,
 			leavingLayerId: v
 		});
-		function b(e) {
+		function w(e) {
 			return typeof e == "object" && !!e;
 		}
-		return (t, n) => (w(), d("div", { class: y(["dock-layer-group", [h.value, `rail-${e.railPosition}`]]) }, [e.showRail && a.value.length > 1 ? (w(), d("nav", {
+		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: y(["dock-layer-rail", e.railPosition])
-		}, [(w(!0), d(s, null, D(a.value, (e) => (w(), d("button", {
+			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: y(["dock-layer-tab", { "is-active": r.value === e.id }]),
+			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
-		}, [b(e.icon) ? (w(), l(k(e.icon), {
+		}, [w(e.icon) ? (T(), u(A(e.icon), {
 			key: 0,
 			class: "size-4"
-		})) : typeof e.icon == "string" ? (w(), d("span", Y, A(e.icon), 1)) : (w(), d("span", X, A((e.label ?? e.id).charAt(0)), 1))], 10, J))), 128))], 2)) : u("", !0), f("div", {
+		})) : 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", {
 			ref_key: "containerEl",
 			ref: o,
 			class: "dock-layer-stack",
-			onTransitionend: n[0] ||= (...e) => j(g) && j(g)(...e)
-		}, [O(t.$slots, "default")], 544)], 2));
+			style: x(C.value),
+			onTransitionend: n[0] ||= (...e) => M(g) && M(g)(...e)
+		}, [k(t.$slots, "default")], 36)], 2));
 	}
-}), Q = ["inert"], ie = /* @__PURE__ */ m({
+}), $ = ["inert"], ae = /* @__PURE__ */ h({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -417,26 +436,26 @@ var J = [
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = q();
-		S(() => {
+		let t = e, n = Y();
+		C(() => {
 			n.register({
 				id: t.id,
 				label: t.label,
 				icon: t.icon
 			});
-		}), x(() => {
+		}), S(() => {
 			n.unregister(t.id);
 		});
-		let r = c(() => n.currentLayerId.value === t.id), i = c(() => n.leavingLayerId.value === t.id);
-		return (e, t) => (w(), d("div", {
-			class: y(["dock-layer-item-host", {
+		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", {
 				"is-active": r.value,
 				"is-leaving": i.value
 			}]),
 			inert: r.value ? void 0 : !0
-		}, [O(e.$slots, "default")], 10, Q));
+		}, [k(e.$slots, "default")], 10, $));
 	}
-}), $ = ["type"], ae = /* @__PURE__ */ m({
+}), oe = ["type"], se = /* @__PURE__ */ h({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -453,13 +472,13 @@ var J = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = c(() => e("dock-icon-button", { "dock-icon-button--compact": n.compact }, n.class));
-		return (e, n) => (w(), d("button", {
+		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: y(r.value)
-		}, [O(e.$slots, "default")], 10, $));
+			class: b(r.value)
+		}, [k(e.$slots, "default")], 10, oe));
 	}
-}), oe = /* @__PURE__ */ m({
+}), ce = /* @__PURE__ */ h({
 	__name: "DockTabButton",
 	props: {
 		as: { default: "button" },
@@ -476,13 +495,13 @@ var J = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = M(), i = c(() => r["data-tier"] === "primary"), a = c(() => e("dock-tab-button", i.value && "btn-audacious", n.class));
-		return (e, n) => (w(), l(j(R), {
+		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), {
 			as: t.as,
 			"as-child": t.asChild,
-			class: y(a.value)
+			class: b(a.value)
 		}, {
-			default: I(() => [O(e.$slots, "default")]),
+			default: R(() => [k(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -490,7 +509,7 @@ var J = [
 			"class"
 		]));
 	}
-}), se = /* @__PURE__ */ m({
+}), le = /* @__PURE__ */ h({
 	__name: "DockSelectTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -506,19 +525,19 @@ var J = [
 		] }
 	},
 	setup(n) {
-		let r = n, i = V(c(() => {
+		let r = n, i = U(l(() => {
 			let { class: e, ...t } = r;
 			return t;
 		}));
-		return (n, a) => (w(), l(j(B), _(j(i), { class: j(e)("dock-select-trigger", r.class) }), {
-			default: I(() => [O(n.$slots, "default"), p(j(z), { "as-child": "" }, {
-				default: I(() => [O(n.$slots, "icon", {}, () => [p(j(t), { class: "dock-select-trigger__chevron" })])]),
+		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" })])]),
 				_: 3
 			})]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), ce = /* @__PURE__ */ m({
+}), ue = /* @__PURE__ */ h({
 	__name: "DockDropdownTrigger",
 	props: {
 		disabled: { type: Boolean },
@@ -534,15 +553,15 @@ var J = [
 		] }
 	},
 	setup(t) {
-		let n = t, r = V(c(() => {
+		let n = t, r = U(l(() => {
 			let { class: e, ...t } = n;
 			return t;
 		}));
-		return (t, i) => (w(), l(j(L), _(j(r), { class: j(e)("dock-dropdown-trigger", n.class) }), {
-			default: I(() => [O(t.$slots, "default")]),
+		return (t, i) => (T(), u(M(z), v(M(r), { class: M(e)("dock-dropdown-trigger", n.class) }), {
+			default: R(() => [k(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { a as DOCK_CONTEXT_KEY, ce as DockDropdownTrigger, ae as DockIconButton, ie as DockLayer, Z as DockLayerGroup, se as DockSelectTrigger, oe as DockTabButton, W as GlassDock, r as provideDockContext, i as useDockContext, n as useOptionalDockContext };
+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 };