@mkbabb/glass-ui 3.5.1 → 3.6.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-CJnqg6wl.js";
+import { t as p } from "./useViewTransition-DI0Rs2rV.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", {
+var ne = t("pause", [["rect", {
 	x: "14",
 	y: "3",
 	width: "5",
@@ -23,7 +23,7 @@ var J = t("pause", [["rect", {
 	height: "18",
 	rx: "1",
 	key: "1wsw3u"
-}]]), ne = t("play", [["path", {
+}]]), J = 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"
 }]]);
@@ -192,6 +192,16 @@ function ie(e) {
 	function D(e) {
 		T(e)?.removeAttribute("data-morphing");
 	}
+	function O(e, t) {
+		let n = t < 0 ? 0 : t > 1 ? 1 : t;
+		e.style.setProperty("--dock-morph-progress", `${n}`);
+	}
+	function A(e) {
+		e.setAttribute("data-revealing", ""), e.style.setProperty("--dock-morph-progress", "0");
+	}
+	function j(e) {
+		e.removeAttribute("data-revealing"), e.style.removeProperty("--dock-morph-progress");
+	}
 	V(n, (e, n) => {
 		if (e === n) return;
 		let r = t.value;
@@ -203,10 +213,10 @@ function ie(e) {
 			y();
 			let t = ++u;
 			E(r);
-			let { finished: i } = p(() => {
+			let a = i?.(n, e), { finished: o } = p(() => {
 				l.value = n, c.value = e;
-			});
-			i.finally(() => {
+			}, a && a.length > 0 ? { types: a } : void 0);
+			o.finally(() => {
 				t === u && (l.value = null, D(r));
 			});
 			return;
@@ -216,39 +226,41 @@ function ie(e) {
 			return;
 		}
 		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;
+		let o = ++u, h = f !== null && m === r && !f.settled ? f : null, _ = h ? h.value : s(r);
+		h || (g(), b(r, `${_}px`)), w(() => {
+			o === u && r && requestAnimationFrame(() => {
+				if (o !== 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;
+				if (b(r, `${_}px`), r.offsetWidth, !h && Math.abs(t - _) < .5) {
+					r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null;
 					return;
 				}
-				S(r), E(r), o || (f = new te({
+				S(r), E(r), A(r);
+				let i = t - _;
+				h || (f = new te({
 					response: X.response,
 					dampingFraction: X.dampingFraction,
-					initial: h,
+					initial: _,
 					respectReducedMotion: !0
 				}), 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()));
+					o === u && (b(r, `${e}px`), Math.abs(i) > .5 ? O(r, (e - _) / i) : O(r, 1), a.settled && (r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null, g()));
 				}), d = setTimeout(() => {
-					i === u && (r.style.transition = "", x(r), C(r), D(r), l.value = null, g());
+					o === u && (r.style.transition = "", x(r), C(r), D(r), j(r), l.value = null, g());
 				}, v(r));
 			});
 		});
 	});
-	function O(e) {
+	function N(e) {
 		let n = t.value;
-		n && e.target === n && e.propertyName === o.value && (y(), g(), n.style.transition = "", x(n), C(n), D(n), l.value = null);
+		n && e.target === n && e.propertyName === o.value && (y(), g(), n.style.transition = "", x(n), C(n), D(n), j(n), l.value = null);
 	}
 	return k(() => {
 		y(), g();
 	}), {
-		onTransitionEnd: O,
+		onTransitionEnd: N,
 		currentLayer: c,
 		leavingLayer: l
 	};
@@ -278,6 +290,7 @@ var ae = [
 		},
 		variant: { default: "dock" },
 		shape: { default: "pill" },
+		layout: { default: "linear" },
 		orientation: { default: "horizontal" },
 		density: { default: "comfortable" },
 		overflow: { default: "grow" },
@@ -289,133 +302,135 @@ var ae = [
 				"container-type": "inline-size",
 				"container-name": n.containerName
 			};
-		}), 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({
+		}), a = B("dockEl"), s = B("layersEl"), c = h(() => n.variant), l = h(() => n.shape), u = h(() => n.layout), d = h(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation), f = h(() => n.density), p = h(() => n.overflow === "scroll" ? d.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), m = h(() => n.alwaysExpanded || d.value === "vertical" || n.layout === "grid"), g = h(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), _ = M(!1), b = r(n.collapseDelay), x = `glass-dock-${ee()}`, S = null, C = 0, { expanded: w, isPinned: k, isHeld: j, onMouseEnter: N, onMouseLeave: F, onFocusIn: I, onFocusOut: R, onClickCollapsed: z, keepOpen: H, release: U, expand: W, collapse: G } = re({
 			collapseDelay: n.collapseDelay,
 			rootEl: a,
-			alwaysExpanded: p,
-			isTransitioning: g,
-			dockId: b
+			alwaysExpanded: m,
+			isTransitioning: _,
+			dockId: x
 		});
 		o({
-			id: b,
-			orientation: u,
-			keepOpen: z,
-			release: H,
-			held: k
+			id: x,
+			orientation: d,
+			keepOpen: H,
+			release: U,
+			held: j
 		});
-		let G = h(() => p.value || C.value), { onTransitionEnd: K } = ie({
+		let K = h(() => m.value || w.value), { onTransitionEnd: q } = ie({
 			containerEl: s,
-			activeLayer: h(() => G.value ? "full" : "summary"),
-			axis: h(() => "horizontal")
-		}), q = typeof document < "u" && "startViewTransition" in document, te = h(() => q ? {
-			"view-transition-name": b.replace(/[^a-zA-Z0-9_-]/g, "-"),
+			activeLayer: h(() => K.value ? "full" : "summary"),
+			axis: h(() => "horizontal"),
+			directionTypes: (e, t) => [t === "full" ? "dock-expand" : "dock-collapse"]
+		}), te = typeof document < "u" && "startViewTransition" in document, ne = h(() => te ? {
+			"view-transition-name": x.replace(/[^a-zA-Z0-9_-]/g, "-"),
 			"view-transition-class": "gl-dock-layer"
 		} : void 0);
 		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 ne(e) {
+		function Y(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 Y() {
-			x &&= (clearTimeout(x), null);
+		function X() {
+			S &&= (clearTimeout(S), null);
 		}
-		let X = new Set([
+		let ce = new Set([
 			"width",
 			"height",
 			"padding",
 			"transform"
 		]);
-		function ce() {
+		function Z() {
 			let e = a.value;
 			if (!e) return;
-			let t = ++S;
-			Y(), g.value = !0, x = setTimeout(() => {
-				t === S && (g.value = !1, x = null);
-			}, ne(e) + 50);
+			let t = ++C;
+			X(), _.value = !0, S = setTimeout(() => {
+				t === C && (_.value = !1, S = null);
+			}, Y(e) + 50);
 		}
-		function Z(e) {
-			e.target === a.value && X.has(e.propertyName) && (Y(), S++, g.value = !1);
+		function Q(e) {
+			e.target === a.value && ce.has(e.propertyName) && (X(), C++, _.value = !1);
 		}
 		O(() => {
-			(n.alwaysExpanded || !n.startCollapsed) && U();
+			(n.alwaysExpanded || !n.startCollapsed) && W();
 		});
-		function Q() {
-			return u.value === "horizontal" && !p.value;
+		function $() {
+			return d.value === "horizontal" && !m.value;
 		}
 		function le(e) {
-			if (!Q() || G.value) return;
+			if (!$() || K.value) return;
 			let t = a.value, n = e.touches[0];
-			!t || !n || _.handleTouchStart(t, n.clientY);
+			!t || !n || b.handleTouchStart(t, n.clientY);
 		}
 		function ue(e) {
-			Q() && _.handleScrollCheck(e);
+			$() && b.handleScrollCheck(e);
 		}
 		function de() {
-			if (!Q()) return;
-			let e = _.isActive.value;
-			_.handleTouchEnd(), !e && _.isActive.value && !G.value && U();
+			if (!$()) return;
+			let e = b.isActive.value;
+			b.handleTouchEnd(), !e && b.isActive.value && !K.value && W();
 		}
-		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: U,
-			collapse: W,
-			keepOpen: z,
-			release: H
+		return V(b.isActive, (e) => {
+			!e && w.value && !k.value && !m.value && G();
+		}), V(K, (e) => {
+			Z(), e || b.deactivate();
+		}), D(X), t({
+			expanded: w,
+			isPinned: k,
+			isHeld: j,
+			isTransitioning: _,
+			expand: W,
+			collapse: G,
+			keepOpen: H,
+			release: U
 		}), (t, n) => (A(), v("div", {
 			ref_key: "dockEl",
 			ref: a,
 			class: T(["glass-dock", [
-				u.value,
+				d.value,
 				`variant-${c.value}`,
 				`shape-${l.value}`,
-				f.value,
+				`layout-${u.value}`,
+				p.value,
 				{
-					expanded: G.value,
-					collapsed: !G.value,
-					pinned: L(w),
-					"fit-content": m.value,
-					"always-expanded": p.value,
+					expanded: K.value,
+					collapsed: !K.value,
+					pinned: L(k),
+					"fit-content": g.value,
+					"always-expanded": m.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": d.value,
-			"data-held": L(k) || void 0,
+			"data-density": f.value,
+			"data-held": L(j) || void 0,
 			"data-container-name": e.containerName || void 0,
 			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),
+			onMouseenter: n[2] ||= (...e) => L(N) && L(N)(...e),
+			onMouseleave: n[3] ||= (e) => L(F)(e),
+			onFocusin: n[4] ||= (...e) => L(I) && L(I)(...e),
+			onFocusout: n[5] ||= (...e) => L(R) && L(R)(...e),
 			onTouchstart: le,
 			onTouchmove: ue,
 			onTouchend: de,
-			onTransitionend: Z,
-			onTransitioncancel: Z
-		}, [u.value === "horizontal" ? (A(), v("div", {
+			onTransitionend: Q,
+			onTransitioncancel: Q
+		}, [d.value === "horizontal" ? (A(), v("div", {
 			key: 0,
 			ref_key: "layersEl",
 			ref: s,
 			class: "dock-layers",
-			style: E(te.value),
-			onTransitionend: n[1] ||= (...e) => L(K) && L(K)(...e)
+			style: E(ne.value),
+			onTransitionend: n[1] ||= (...e) => L(q) && L(q)(...e)
 		}, [y("div", {
-			class: T(["dock-layer dock-layer--full", { "layer-active": G.value }]),
-			inert: !L(C) || void 0
+			class: T(["dock-layer dock-layer--full", { "layer-active": K.value }]),
+			inert: !L(w) || void 0
 		}, [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)
+			class: T(["dock-layer dock-layer--summary", { "layer-active": !K.value }]),
+			inert: L(w) || void 0,
+			onClick: n[0] ||= (...e) => L(z) && L(z)(...e)
 		}, [P(t.$slots, "collapsed")], 10, se)], 36)) : P(t.$slots, "default", { key: 1 })], 46, ae));
 	}
 }), Z = i("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
@@ -423,11 +438,11 @@ Z.KEY;
 function Q(e) {
 	Z.provide(e);
 }
-var le = Z.use;
+var $ = Z.use;
 Z.useOptional;
 //#endregion
 //#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
-var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
+var le = { key: 1 }, ue = { key: 2 }, de = /* @__PURE__ */ x({
 	__name: "DockLayerGroup",
 	props: /* @__PURE__ */ S({
 		orientation: {},
@@ -452,7 +467,11 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 		let p = h(() => t.orientation ?? r?.orientation.value ?? "horizontal"), { onTransitionEnd: x, currentLayer: S, leavingLayer: C } = ie({
 			containerEl: o,
 			activeLayer: n,
-			axis: p
+			axis: p,
+			directionTypes: (e, t) => {
+				let n = i.value.findIndex((t) => t.id === e);
+				return [i.value.findIndex((e) => e.id === t) < n ? "layer-back" : "layer-forward"];
+			}
 		}), 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"
@@ -496,7 +515,7 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 					default: H(() => [k(e.icon) ? (A(), g(F(e.icon), {
 						key: 0,
 						class: "size-4"
-					})) : typeof e.icon == "string" ? (A(), v("span", ue, I(e.icon), 1)) : (A(), v("span", de, I((e.label ?? e.id).charAt(0)), 1))]),
+					})) : 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",
@@ -514,11 +533,11 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 			onTransitionend: r[1] ||= (...e) => L(x) && L(x)(...e)
 		}, [P(t.$slots, "default")], 36)], 2));
 	}
-}), pe = [
+}), fe = [
 	"inert",
 	"aria-hidden",
 	"tabindex"
-], me = /* @__PURE__ */ x({
+], pe = /* @__PURE__ */ x({
 	__name: "DockLayer",
 	props: {
 		id: {},
@@ -526,7 +545,7 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 		icon: {}
 	},
 	setup(e) {
-		let t = e, n = le();
+		let t = e, n = $();
 		O(() => {
 			n.register({
 				id: t.id,
@@ -552,9 +571,9 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__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, pe));
+		}, [P(e.$slots, "default")], 10, fe));
 	}
-}), $ = /* @__PURE__ */ x({
+}), me = /* @__PURE__ */ x({
 	__name: "DockIconButton",
 	props: {
 		compact: {
@@ -622,18 +641,18 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 		function a() {
 			r("update:paused", !n.paused);
 		}
-		return (t, n) => (A(), g($, {
+		return (t, n) => (A(), g(me, {
 			type: "button",
 			"aria-pressed": e.paused,
 			"aria-label": i.value,
 			title: i.value,
 			onClick: a
 		}, {
-			default: H(() => [e.paused ? (A(), g(L(ne), {
+			default: H(() => [e.paused ? (A(), g(L(J), {
 				key: 0,
 				size: 18,
 				"aria-hidden": "true"
-			})) : (A(), g(L(J), {
+			})) : (A(), g(L(ne), {
 				key: 1,
 				size: 18,
 				"aria-hidden": "true"
@@ -731,4 +750,4 @@ var ue = { key: 1 }, de = { key: 2 }, fe = /* @__PURE__ */ x({
 	}
 });
 //#endregion
-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 };
+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, ce as GlassDock, o as provideDockContext, s as useDockContext, a as useOptionalDockContext };

package/dist/expandable-container.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./minimize-2-BP27-qBY.js";
-import { i as n } from "./useKeyboardShortcuts-BQfnAHHW.js";
+import { i as n } from "./useKeyboardShortcuts-i8tHd5WO.js";
 import { Fragment as r, Teleport as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, onMounted as m, onUnmounted as h, openBlock as g, renderSlot as _, unref as v, useModel as y, watch as b } from "vue";
 //#region src/components/custom/expandable-container/ExpandableContainer.vue?vue&type=script&setup=true&lang.ts
 var x = ["aria-label"], S = {

package/dist/forms.js

@@ -2,7 +2,7 @@ import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./search-DBG8qaRs.js";
 import { t as n } from "./menuItemVariants-C2QlXqT3.js";
 import { t as r } from "./useUserInvalidAria-DmvZ_6Dx.js";
-import { t as i } from "./Input-CU9CNKmo.js";
+import { t as i } from "./Input-CRJ2owjN.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, isRef as f, mergeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, vModelText as v, withCtx as y, withDirectives as b } from "vue";
 import { ComboboxAnchor as x, ComboboxCancel as S, ComboboxContent as C, ComboboxEmpty as w, ComboboxGroup as T, ComboboxInput as E, ComboboxItem as D, ComboboxItemIndicator as O, ComboboxLabel as k, ComboboxPortal as A, ComboboxRoot as j, ComboboxSeparator as M, ComboboxTrigger as N, ComboboxViewport as P, useForwardProps as F, useForwardPropsEmits as I } from "reka-ui";
 import { reactiveOmit as L, useVModel as R } from "@vueuse/core";