morya-ui 0.2.3 → 0.2.4

package/dist/menu/index.js

@@ -3,17 +3,18 @@ import { t } from "../Icon-DfpIfo2L.js";
 import { n, t as r } from "../overlay-oR-5MDuE.js";
 import { t as i } from "../overlayPlacement-Cd20JTD_.js";
 import { t as a } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as o } from "../icon-xUOyawgJ.js";
-import { t as s } from "../key-CaQYVkjh.js";
-import { t as c } from "../lastPointer-CRxcUqdd.js";
-import { t as ee } from "../Popover-6eE5yIT7.js";
+import { t as o } from "../Scrollbar-DoNZvgX2.js";
+import { t as s } from "../icon-xUOyawgJ.js";
+import { t as c } from "../key-CaQYVkjh.js";
+import { t as ee } from "../lastPointer-CRxcUqdd.js";
+import { t as te } from "../Popover-6eE5yIT7.js";
 import { t as l } from "../Tooltip-CrKm9FMD.js";
-import { c as te } from "../config-CI8_WBbE.js";
+import { c as u } from "../config-CI8_WBbE.js";
 import "./style.js";
-import { Fragment as u, Teleport as d, Transition as ne, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, getCurrentInstance as y, inject as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, openBlock as E, provide as D, reactive as O, ref as k, renderList as A, renderSlot as j, resolveDynamicComponent as M, toDisplayString as N, unref as P, useAttrs as re, useSlots as ie, watch as F, withCtx as I } from "vue";
+import { Fragment as d, Teleport as f, Transition as ne, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, getCurrentInstance as b, inject as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeStyle as T, onBeforeUnmount as E, openBlock as D, provide as O, reactive as re, ref as k, renderList as A, renderSlot as j, resolveDynamicComponent as M, toDisplayString as N, unref as P, useAttrs as ie, useSlots as ae, watch as F, withCtx as I } from "vue";
 //#region src/shared/menu/tree.ts
 function L(e, t, n = "item") {
-	return s(e, t, n);
+	return c(e, t, n);
 }
 function R(e, t, n = "item") {
 	for (let r = 0; r < e.length; r++) {
@@ -28,20 +29,20 @@ function R(e, t, n = "item") {
 	}
 	return null;
 }
-function ae(e, t, n, r = "item") {
+function oe(e, t, n, r = "item") {
 	return e.items?.length ? L(e, n, r) === t || R(e.items, t, `${r}-${n}`) !== null : !1;
 }
-function oe(e, t = "item") {
+function se(e, t = "item") {
 	let n = [];
 	for (let r = 0; r < e.length; r++) {
 		let i = e[r];
 		if (i.separator || !i.items?.length) continue;
 		let a = L(i, r, t);
-		n.push(a), n.push(...oe(i.items, `${t}-${r}`));
+		n.push(a), n.push(...se(i.items, `${t}-${r}`));
 	}
 	return n;
 }
-function se(e, t = "item") {
+function ce(e, t = "item") {
 	let n = [];
 	for (let r = 0; r < e.length; r++) {
 		let i = e[r];
@@ -51,7 +52,7 @@ function se(e, t = "item") {
 }
 //#endregion
 //#region src/components/Menu/context.ts
-var ce = Symbol("muMenu"), z = /* @__PURE__ */ v({
+var le = Symbol("muMenu"), z = /* @__PURE__ */ y({
 	__name: "MenuCollapsedTooltip",
 	props: {
 		label: {},
@@ -65,8 +66,8 @@ var ce = Symbol("muMenu"), z = /* @__PURE__ */ v({
 		}
 	},
 	setup(e) {
-		let t = e, n = f(() => t.active && !!t.label && !t.suspended);
-		return (t, r) => n.value ? (E(), p(l, {
+		let t = e, n = p(() => t.active && !!t.label && !t.suspended);
+		return (t, r) => n.value ? (D(), m(l, {
 			key: 0,
 			content: e.label,
 			placement: "right",
@@ -81,16 +82,16 @@ var ce = Symbol("muMenu"), z = /* @__PURE__ */ v({
 //#endregion
 //#region src/shared/optionalRouter.ts
 function B() {
-	let e = y();
+	let e = b();
 	if (!e) return !1;
 	for (let t of Object.values(e.appContext.provides)) if (t && typeof t == "object" && "resolve" in t && "push" in t) return !0;
 	return !1;
 }
-function le() {
-	let e = y();
+function ue() {
+	let e = b();
 	return !e || !B() ? null : e.appContext.components.RouterLink ?? null;
 }
-function ue(e) {
+function de(e) {
 	return typeof e == "string" ? e : typeof e.path == "string" ? e.path : typeof e.href == "string" ? e.href : "#";
 }
 function V(e) {
@@ -111,14 +112,14 @@ var H = {
 	key: 0,
 	class: "m-menu__icon",
 	"aria-hidden": "true"
-}, de = { class: "m-menu__label" }, fe = {
+}, fe = { class: "m-menu__label" }, pe = {
 	key: 1,
 	class: "m-menu__arrow",
 	"aria-hidden": "true"
 }, G = {
 	class: "m-menu m-menu--flyout",
 	role: "menu"
-}, pe = [
+}, me = [
 	"tabindex",
 	"data-m-menu-key",
 	"aria-expanded",
@@ -132,11 +133,11 @@ var H = {
 	key: 0,
 	class: "m-menu__submenu",
 	role: "group"
-}, Y = { class: "m-menu__submenu-inner" }, me = {
+}, Y = { class: "m-menu__submenu-inner" }, he = {
 	key: 0,
 	class: "m-menu__icon",
 	"aria-hidden": "true"
-}, he = { class: "m-menu__label" }, X = /* @__PURE__ */ v({
+}, ge = { class: "m-menu__label" }, X = /* @__PURE__ */ y({
 	__name: "MenuNodes",
 	props: {
 		items: {},
@@ -145,17 +146,17 @@ var H = {
 		flyout: { type: Boolean }
 	},
 	setup(e) {
-		let n = e, r = b(ce);
+		let n = e, r = x(le);
 		if (!r) throw Error("MenuNodes must be used inside MMenu");
-		let i = r, a = le(), s = f(() => i.collapsed.value && !n.flyout), c = f(() => i.mode === "horizontal"), l = f(() => (s.value || c.value) && !n.flyout);
-		function te(e, t) {
+		let i = r, a = ue(), o = p(() => i.collapsed.value && !n.flyout), c = p(() => i.mode === "horizontal"), ee = p(() => (o.value || c.value) && !n.flyout);
+		function l(e, t) {
 			i.setFlyoutOpen(e, t);
 		}
-		function d(e, t) {
+		function u(e, t) {
 			return i.resolveKey(e, t, n.prefix);
 		}
-		function v(e) {
-			return o(e.icon);
+		function f(e) {
+			return s(e.icon);
 		}
 		function y(e, t) {
 			if (e.disabled) {
@@ -164,85 +165,85 @@ var H = {
 			}
 			i.activate(e), e.to || t.preventDefault();
 		}
-		function x(e, t) {
-			e.disabled || l.value || i.toggleExpand(d(e, t));
+		function b(e, t) {
+			e.disabled || ee.value || i.toggleExpand(u(e, t));
 		}
 		function S(e, t) {
-			return i.isExpanded(d(e, t));
+			return i.isExpanded(u(e, t));
 		}
-		function T(e, t) {
-			let r = v(e);
+		function C(e, t) {
+			let r = f(e);
 			return {
 				"m-menu__item-content--selected": i.isSelected(e, t, n.prefix),
 				"m-menu__item-content--child-active": i.isChildActive(e, t, n.prefix),
 				"m-menu__item-content--disabled": !!e.disabled,
-				"m-menu__item-content--collapsed": s.value,
+				"m-menu__item-content--collapsed": o.value,
 				"m-menu__item-content--no-icon": !r,
-				"m-menu__item-content--active": i.activeKey.value === d(e, t)
+				"m-menu__item-content--active": i.activeKey.value === u(e, t)
 			};
 		}
-		function D(e, t) {
-			return n.flyout ? 0 : i.tabindexForKey(d(e, t));
+		function E(e, t) {
+			return n.flyout ? 0 : i.tabindexForKey(u(e, t));
 		}
 		function O(e) {
 			if (!(c.value || n.flyout)) return i.paddingStyle(e);
 		}
-		function k(e, t) {
+		function re(e, t) {
 			return S(e, t);
 		}
-		function j(e) {
+		function k(e) {
 			return !!(e.to && a && !V(e.to));
 		}
-		function re(e) {
-			if (!(!e.to || j(e))) return ue(e.to);
+		function j(e) {
+			if (!(!e.to || k(e))) return de(e.to);
 		}
 		function ie(e) {
-			if (!(!j(e) || !e.to)) return e.to;
+			if (!(!k(e) || !e.to)) return e.to;
 		}
-		function F(e) {
-			return s.value && !!e.label;
+		function ae(e) {
+			return o.value && !!e.label;
 		}
-		function L(e, t) {
-			return !!i.flyoutOpen[d(e, t)];
+		function F(e, t) {
+			return !!i.flyoutOpen[u(e, t)];
 		}
-		return (n, r) => (E(!0), h(u, null, A(e.items, (n, r) => (E(), h(u, { key: d(n, r) }, [n.separator ? (E(), h("div", H)) : n.items?.length ? (E(), h("div", {
+		return (n, r) => (D(!0), g(d, null, A(e.items, (n, r) => (D(), g(d, { key: u(n, r) }, [n.separator ? (D(), g("div", H)) : n.items?.length ? (D(), g("div", {
 			key: 1,
-			class: C(["m-menu__item m-menu__item--submenu", { "m-menu__item--horizontal": c.value }]),
+			class: w(["m-menu__item m-menu__item--submenu", { "m-menu__item--horizontal": c.value }]),
 			role: "none"
-		}, [l.value ? (E(), p(ee, {
+		}, [ee.value ? (D(), m(te, {
 			key: 0,
 			class: "m-menu__collapsed-popover",
-			"model-value": !!P(i).flyoutOpen[d(n, r)],
+			"model-value": !!P(i).flyoutOpen[u(n, r)],
 			trigger: c.value ? "click" : "hover",
 			placement: c.value ? "bottom-start" : "right-start",
 			"show-delay": c.value ? 0 : 50,
 			"hide-delay": c.value ? 0 : 80,
-			"onUpdate:modelValue": (e) => te(d(n, r), e)
+			"onUpdate:modelValue": (e) => l(u(n, r), e)
 		}, {
-			default: I(() => [_(z, {
+			default: I(() => [v(z, {
 				label: n.label,
-				active: F(n),
-				suspended: L(n, r)
+				active: ae(n),
+				suspended: F(n, r)
 			}, {
-				default: I(() => [g("div", {
-					class: C(["m-menu__item-content", T(n, r)]),
-					style: w(O(e.depth)),
+				default: I(() => [_("div", {
+					class: w(["m-menu__item-content", C(n, r)]),
+					style: T(O(e.depth)),
 					role: "menuitem",
-					tabindex: D(n, r),
-					"data-m-menu-key": e.flyout ? void 0 : d(n, r),
+					tabindex: E(n, r),
+					"data-m-menu-key": e.flyout ? void 0 : u(n, r),
 					"aria-label": n.label,
 					"aria-haspopup": "menu",
-					"aria-expanded": c.value ? !!P(i).flyoutOpen[d(n, r)] : void 0
+					"aria-expanded": c.value ? !!P(i).flyoutOpen[u(n, r)] : void 0
 				}, [
-					v(n) ? (E(), h("span", W, [_(t, {
-						name: v(n),
+					f(n) ? (D(), g("span", W, [v(t, {
+						name: f(n),
 						size: "sm"
-					}, null, 8, ["name"])])) : m("", !0),
-					g("span", de, N(n.label), 1),
-					c.value ? (E(), h("span", fe, [_(t, {
+					}, null, 8, ["name"])])) : h("", !0),
+					_("span", fe, N(n.label), 1),
+					c.value ? (D(), g("span", pe, [v(t, {
 						name: "chevron-down",
 						size: "sm"
-					})])) : m("", !0)
+					})])) : h("", !0)
 				], 14, U)]),
 				_: 2
 			}, 1032, [
@@ -250,7 +251,7 @@ var H = {
 				"active",
 				"suspended"
 			])]),
-			content: I(() => [g("div", G, [_(X, {
+			content: I(() => [_("div", G, [v(X, {
 				items: n.items,
 				depth: 0,
 				prefix: `${e.prefix}-${r}`,
@@ -264,31 +265,31 @@ var H = {
 			"show-delay",
 			"hide-delay",
 			"onUpdate:modelValue"
-		])) : (E(), h(u, { key: 1 }, [g("div", {
-			class: C(["m-menu__item-content", T(n, r)]),
-			style: w(O(e.depth)),
+		])) : (D(), g(d, { key: 1 }, [_("div", {
+			class: w(["m-menu__item-content", C(n, r)]),
+			style: T(O(e.depth)),
 			role: "menuitem",
-			tabindex: D(n, r),
-			"data-m-menu-key": e.flyout ? void 0 : d(n, r),
+			tabindex: E(n, r),
+			"data-m-menu-key": e.flyout ? void 0 : u(n, r),
 			"aria-haspopup": "menu",
 			"aria-expanded": S(n, r),
 			"aria-disabled": n.disabled || void 0,
-			onClick: (e) => x(n, r)
+			onClick: (e) => b(n, r)
 		}, [
-			v(n) ? (E(), h("span", K, [_(t, {
-				name: v(n),
+			f(n) ? (D(), g("span", K, [v(t, {
+				name: f(n),
 				size: "sm"
-			}, null, 8, ["name"])])) : m("", !0),
-			g("span", q, N(n.label), 1),
-			g("span", {
-				class: C(["m-menu__arrow", { "m-menu__arrow--expanded": k(n, r) }]),
+			}, null, 8, ["name"])])) : h("", !0),
+			_("span", q, N(n.label), 1),
+			_("span", {
+				class: w(["m-menu__arrow", { "m-menu__arrow--expanded": re(n, r) }]),
 				"aria-hidden": "true"
-			}, [_(t, {
+			}, [v(t, {
 				name: "chevron-right",
 				size: "sm"
 			})], 2)
-		], 14, pe), _(ne, { name: "m-menu-expand" }, {
-			default: I(() => [S(n, r) ? (E(), h("div", J, [g("div", Y, [_(X, {
+		], 14, me), v(ne, { name: "m-menu-expand" }, {
+			default: I(() => [S(n, r) ? (D(), g("div", J, [_("div", Y, [v(X, {
 				items: n.items,
 				depth: e.depth + 1,
 				prefix: `${e.prefix}-${r}`
@@ -296,32 +297,32 @@ var H = {
 				"items",
 				"depth",
 				"prefix"
-			])])])) : m("", !0)]),
+			])])])) : h("", !0)]),
 			_: 2
-		}, 1024)], 64))], 2)) : (E(), h("div", {
+		}, 1024)], 64))], 2)) : (D(), g("div", {
 			key: 2,
-			class: C(["m-menu__item", { "m-menu__item--horizontal": c.value }]),
+			class: w(["m-menu__item", { "m-menu__item--horizontal": c.value }]),
 			role: "none"
-		}, [_(z, {
+		}, [v(z, {
 			label: n.label,
-			active: F(n)
+			active: ae(n)
 		}, {
-			default: I(() => [(E(), p(M(j(n) ? P(a) : re(n) ? "a" : "div"), {
-				class: C(["m-menu__item-content", T(n, r)]),
-				style: w(O(e.depth)),
+			default: I(() => [(D(), m(M(k(n) ? P(a) : j(n) ? "a" : "div"), {
+				class: w(["m-menu__item-content", C(n, r)]),
+				style: T(O(e.depth)),
 				role: "menuitem",
-				tabindex: D(n, r),
-				"data-m-menu-key": e.flyout ? void 0 : d(n, r),
+				tabindex: E(n, r),
+				"data-m-menu-key": e.flyout ? void 0 : u(n, r),
 				"aria-disabled": n.disabled || void 0,
 				"aria-current": P(i).isSelected(n, r, e.prefix) ? "page" : void 0,
-				href: re(n),
+				href: j(n),
 				to: ie(n),
 				onClick: (e) => y(n, e)
 			}, {
-				default: I(() => [v(n) ? (E(), h("span", me, [_(t, {
-					name: v(n),
+				default: I(() => [f(n) ? (D(), g("span", he, [v(t, {
+					name: f(n),
 					size: "sm"
-				}, null, 8, ["name"])])) : m("", !0), g("span", he, N(n.label), 1)]),
+				}, null, 8, ["name"])])) : h("", !0), _("span", ge, N(n.label), 1)]),
 				_: 2
 			}, 1032, [
 				"class",
@@ -337,7 +338,7 @@ var H = {
 			_: 2
 		}, 1032, ["label", "active"])], 2))], 64))), 128));
 	}
-}), ge = /* @__PURE__ */ v({
+}), _e = /* @__PURE__ */ y({
 	inheritAttrs: !1,
 	__name: "Menu",
 	props: {
@@ -391,18 +392,18 @@ var H = {
 		"update:expandedKeys",
 		"select"
 	],
-	setup(t, { emit: o }) {
-		let s = t, ee = re(), { rootAttrs: l } = e(ee, () => s.pt), u = o, v = ie(), y = te(), b = k(null), A = k(null), M = k({}), N = f(() => !!v.default?.()?.length), z = f(() => n(s.popup ? s : { teleport: !1 }, y.value.appendTo)), B = f(() => s.popup && r(s, y.value.appendTo)), le = f(() => s.embedded ?? !s.popup), ue = f(() => s.selectedKey), V = k([]), H = O({});
+	setup(t, { emit: s }) {
+		let c = t, te = ie(), { rootAttrs: l } = e(te, () => c.pt), d = s, y = ae(), b = u(), x = k(null), A = k(null), M = k({}), N = p(() => !!y.default?.()?.length), z = p(() => n(c.popup ? c : { teleport: !1 }, b.value.appendTo)), B = p(() => c.popup && r(c, b.value.appendTo)), ue = p(() => c.embedded ?? !c.popup), de = p(() => c.selectedKey), V = k([]), H = re({});
 		function U(e, t) {
 			H[e] = t;
 		}
 		function W() {
 			for (let e of Object.keys(H)) H[e] = !1;
 		}
-		function de() {
+		function fe() {
 			let e = A.value?.getBoundingClientRect();
 			if (e && (e.width > 0 || e.height > 0)) return e;
-			let { x: t, y: n } = c();
+			let { x: t, y: n } = ee();
 			return {
 				left: t,
 				top: n,
@@ -412,35 +413,35 @@ var H = {
 				height: 0
 			};
 		}
-		function fe() {
-			!s.popup || !s.modelValue || !B.value || (M.value = i(de(), s.placement, { minWidth: "10rem" }));
+		function pe() {
+			!c.popup || !c.modelValue || !B.value || (M.value = i(fe(), c.placement, { minWidth: "10rem" }));
 		}
 		function G() {
-			s.modelValue && fe();
+			c.modelValue && pe();
 		}
-		function pe() {
-			if (s.defaultExpandAll) {
-				V.value = oe(s.model);
+		function me() {
+			if (c.defaultExpandAll) {
+				V.value = se(c.model);
 				return;
 			}
-			if (s.defaultExpandedKeys.length) {
-				V.value = [...s.defaultExpandedKeys];
+			if (c.defaultExpandedKeys.length) {
+				V.value = [...c.defaultExpandedKeys];
 				return;
 			}
-			if (s.selectedKey) {
-				let e = R(s.model, s.selectedKey);
+			if (c.selectedKey) {
+				let e = R(c.model, c.selectedKey);
 				V.value = e ?? [];
 				return;
 			}
 			V.value = [];
 		}
-		pe();
-		let K = f({
-			get: () => s.expandedKeys ?? V.value,
+		me();
+		let K = p({
+			get: () => c.expandedKeys ?? V.value,
 			set: (e) => {
-				V.value = e, u("update:expandedKeys", e);
+				V.value = e, d("update:expandedKeys", e);
 			}
-		}), q = f(() => se(s.model));
+		}), q = p(() => ce(c.model));
 		function J(e) {
 			return K.value.includes(e);
 		}
@@ -448,7 +449,7 @@ var H = {
 			let t = [...K.value], n = t.indexOf(e);
 			if (n >= 0) t.splice(n, 1);
 			else {
-				if (s.accordion && q.value.includes(e)) {
+				if (c.accordion && q.value.includes(e)) {
 					for (let n of [...t]) if (q.value.includes(n) && n !== e) {
 						let e = t.indexOf(n);
 						e >= 0 && t.splice(e, 1);
@@ -458,47 +459,47 @@ var H = {
 			}
 			K.value = t;
 		}
-		function me(e) {
+		function he(e) {
 			if (!e) return;
-			let t = R(s.model, e);
+			let t = R(c.model, e);
 			if (!t?.length) return;
 			let n = /* @__PURE__ */ new Set([...K.value, ...t]);
-			if (s.accordion) for (let e of q.value) n.has(e) && !t.includes(e) && n.delete(e);
+			if (c.accordion) for (let e of q.value) n.has(e) && !t.includes(e) && n.delete(e);
 			K.value = Array.from(n);
 		}
-		F(() => s.selectedKey, me);
-		function he(e, t, n) {
-			return L(e, t, n);
-		}
+		F(() => c.selectedKey, he);
 		function ge(e, t, n) {
-			let r = he(e, t, n);
-			return !!(s.selectedKey && r === s.selectedKey);
+			return L(e, t, n);
 		}
 		function _e(e, t, n) {
-			return s.selectedKey ? ae(e, s.selectedKey, t, n) : !1;
+			let r = ge(e, t, n);
+			return !!(c.selectedKey && r === c.selectedKey);
 		}
-		function ve(e) {
-			if (s.mode !== "horizontal" && s.collapsed) return Math.max(0, s.collapsedWidth / 2 - 10);
+		function ve(e, t, n) {
+			return c.selectedKey ? oe(e, c.selectedKey, t, n) : !1;
 		}
 		function ye(e) {
-			if (s.mode === "horizontal") return { paddingInlineStart: `${s.rootIndent}px` };
-			if (s.collapsed) {
-				let t = ve(e);
+			if (c.mode !== "horizontal" && c.collapsed) return Math.max(0, c.collapsedWidth / 2 - 10);
+		}
+		function be(e) {
+			if (c.mode === "horizontal") return { paddingInlineStart: `${c.rootIndent}px` };
+			if (c.collapsed) {
+				let t = ye(e);
 				return t == null ? void 0 : { paddingInlineStart: `${t}px` };
 			}
 			return { paddingInlineStart: `calc(var(--m-menu-root-indent) + ${e} * var(--m-menu-indent))` };
 		}
-		function be(e) {
+		function xe(e) {
 			if (e.disabled || e.separator) return;
 			e.command?.();
 			let t = e.key ?? e.label ?? null;
-			u("update:selectedKey", t), u("select", e), s.popup && (u("update:modelValue", !1), xe()), s.mode === "horizontal" && W();
+			d("update:selectedKey", t), d("select", e), c.popup && (d("update:modelValue", !1), Se()), c.mode === "horizontal" && W();
 		}
-		function xe() {
+		function Se() {
 			(A.value?.querySelector("button, [tabindex]") ?? A.value)?.focus({ preventScroll: !0 });
 		}
-		let Z = f(() => {
-			let e = s.collapsed || s.mode === "horizontal", t = [], n = (r, i, a) => {
+		let Z = p(() => {
+			let e = c.collapsed || c.mode === "horizontal", t = [], n = (r, i, a) => {
 				r.forEach((r, o) => {
 					if (r.separator) return;
 					let s = L(r, o, i), c = !!r.items?.length;
@@ -510,47 +511,47 @@ var H = {
 					}), c && !e && J(s) && n(r.items, `${i}-${o}`, s);
 				});
 			};
-			return n(s.model, "item", null), t;
+			return n(c.model, "item", null), t;
 		}), Q = a({
 			itemCount: () => Z.value.length,
 			isItemDisabled: (e) => !!Z.value[e]?.item.disabled,
-			orientation: () => s.mode === "horizontal" ? "horizontal" : "vertical",
+			orientation: () => c.mode === "horizontal" ? "horizontal" : "vertical",
 			onActivate: (e) => {
 				let t = Z.value[e];
 				if (t) {
 					if (t.hasChildren) {
-						if (s.collapsed || s.mode === "horizontal") {
+						if (c.collapsed || c.mode === "horizontal") {
 							let e = !H[t.key];
 							W(), U(t.key, e);
 						} else Y(t.key);
 						return;
 					}
-					be(t.item);
+					xe(t.item);
 				}
 			},
 			onEscape: () => {
-				s.popup ? u("update:modelValue", !1) : W();
+				c.popup ? d("update:modelValue", !1) : W();
 			},
-			returnFocusTo: () => s.popup ? A.value?.querySelector("button, [tabindex]") ?? A.value : null
-		}), Se = f(() => Z.value[Q.activeIndex.value]?.key ?? null);
-		function Ce(e) {
-			let t = Se.value;
+			returnFocusTo: () => c.popup ? A.value?.querySelector("button, [tabindex]") ?? A.value : null
+		}), Ce = p(() => Z.value[Q.activeIndex.value]?.key ?? null);
+		function we(e) {
+			let t = Ce.value;
 			return t == null ? Z.value.find((e) => !e.item.disabled)?.key === e ? 0 : -1 : e === t ? 0 : -1;
 		}
-		function we(e) {
-			if (e == null || !b.value) return;
-			let t = b.value.querySelectorAll("[data-m-menu-key]");
+		function Te(e) {
+			if (e == null || !x.value) return;
+			let t = x.value.querySelectorAll("[data-m-menu-key]");
 			for (let n of t) if (n.dataset.mMenuKey === e) {
 				n.focus({ preventScroll: !0 });
 				return;
 			}
 		}
-		function Te(e) {
+		function Ee(e) {
 			let t = Z.value[Q.activeIndex.value];
-			if (s.mode !== "horizontal") {
+			if (c.mode !== "horizontal") {
 				if (e.key === "ArrowRight") {
 					if (e.preventDefault(), !t) return;
-					if (t.hasChildren && !s.collapsed) {
+					if (t.hasChildren && !c.collapsed) {
 						if (!J(t.key)) Y(t.key);
 						else {
 							let e = Z.value.findIndex((e) => e.parentKey === t.key);
@@ -561,7 +562,7 @@ var H = {
 				}
 				if (e.key === "ArrowLeft") {
 					if (e.preventDefault(), !t) return;
-					if (t.hasChildren && !s.collapsed && J(t.key)) Y(t.key);
+					if (t.hasChildren && !c.collapsed && J(t.key)) Y(t.key);
 					else if (t.parentKey != null) {
 						let e = Z.value.findIndex((e) => e.key === t.parentKey);
 						e >= 0 && Q.setActive(e);
@@ -575,107 +576,123 @@ var H = {
 			Q.onKeydown(e);
 		}
 		F(Q.activeIndex, () => {
-			S(() => we(Se.value));
-		}), D(ce, {
-			collapsed: f(() => s.collapsed),
-			selectedKey: ue,
+			C(() => Te(Ce.value));
+		}), O(le, {
+			collapsed: p(() => c.collapsed),
+			selectedKey: de,
 			expandedKeys: K,
-			accordion: s.accordion,
-			indent: s.indent,
-			rootIndent: s.rootIndent,
-			mode: s.mode,
-			inverted: s.inverted,
+			accordion: c.accordion,
+			indent: c.indent,
+			rootIndent: c.rootIndent,
+			mode: c.mode,
+			inverted: c.inverted,
 			flyoutOpen: H,
 			setFlyoutOpen: U,
 			toggleExpand: Y,
 			isExpanded: J,
-			activate: be,
-			resolveKey: he,
-			isSelected: ge,
-			isChildActive: _e,
-			paddingStyle: ye,
-			activeKey: Se,
-			tabindexForKey: Ce
+			activate: xe,
+			resolveKey: ge,
+			isSelected: _e,
+			isChildActive: ve,
+			paddingStyle: be,
+			activeKey: Ce,
+			tabindexForKey: we
 		});
-		function Ee(e) {
-			if (!s.popup || !s.modelValue) return;
+		function De(e) {
+			if (!c.popup || !c.modelValue) return;
 			let t = e.target;
-			b.value?.contains(t) || A.value?.contains(t) || u("update:modelValue", !1);
+			x.value?.contains(t) || A.value?.contains(t) || d("update:modelValue", !1);
 		}
-		F(() => s.modelValue, (e) => {
-			s.popup && (e ? (S(fe), document.addEventListener("click", Ee), B.value && (window.addEventListener("resize", G), window.addEventListener("scroll", G, !0))) : (document.removeEventListener("click", Ee), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0)));
-		}, { immediate: !0 }), T(() => {
-			document.removeEventListener("click", Ee), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0);
+		F(() => c.modelValue, (e) => {
+			c.popup && (e ? (C(pe), document.addEventListener("click", De), B.value && (window.addEventListener("resize", G), window.addEventListener("scroll", G, !0))) : (document.removeEventListener("click", De), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0)));
+		}, { immediate: !0 }), E(() => {
+			document.removeEventListener("click", De), window.removeEventListener("resize", G), window.removeEventListener("scroll", G, !0);
 		});
-		let De = f(() => ["m-menu", {
-			"m-menu--popup": s.popup,
+		let Oe = p(() => ["m-menu", {
+			"m-menu--popup": c.popup,
 			"m-menu--teleported": B.value,
-			"m-menu--collapsed": s.collapsed,
-			"m-menu--embedded": le.value,
-			"m-menu--horizontal": s.mode === "horizontal",
-			"m-menu--inverted": s.inverted
-		}]), $ = f(() => ({
-			"--m-menu-indent": `${s.indent / 16}rem`,
-			"--m-menu-root-indent": `${s.rootIndent / 16}rem`
-		})), Oe = f(() => B.value ? {
+			"m-menu--collapsed": c.collapsed,
+			"m-menu--embedded": ue.value,
+			"m-menu--horizontal": c.mode === "horizontal",
+			"m-menu--inverted": c.inverted
+		}]), $ = p(() => ({
+			"--m-menu-indent": `${c.indent / 16}rem`,
+			"--m-menu-root-indent": `${c.rootIndent / 16}rem`
+		})), ke = p(() => B.value ? {
 			...$.value,
 			...M.value
 		} : $.value);
-		return (e, n) => t.popup ? N.value ? (E(), h("div", x({ key: 1 }, P(l), { class: "m-menu-popup" }), [g("div", {
+		return (e, n) => t.popup ? N.value ? (D(), g("div", S({ key: 1 }, P(l), { class: "m-menu-popup" }), [_("div", {
 			ref_key: "triggerEl",
 			ref: A,
 			class: "m-menu-popup__anchor"
-		}, [j(e.$slots, "default")], 512), (E(), p(d, {
+		}, [j(e.$slots, "default")], 512), (D(), m(f, {
 			to: z.value.to,
 			disabled: z.value.disabled
-		}, [_(ne, { name: "m-scale-fade" }, {
-			default: I(() => [t.modelValue ? (E(), h("div", {
+		}, [v(ne, { name: "m-scale-fade" }, {
+			default: I(() => [t.modelValue ? (D(), g("div", {
 				key: 0,
 				ref_key: "root",
-				ref: b,
-				class: C(De.value),
-				style: w(B.value ? Oe.value : $.value),
+				ref: x,
+				class: w(Oe.value),
+				style: T(B.value ? ke.value : $.value),
 				role: "menu",
-				onKeydown: Te
-			}, [_(X, {
-				items: t.model,
-				depth: 0,
-				prefix: "item"
-			}, null, 8, ["items"])], 38)) : m("", !0)]),
+				onKeydown: Ee
+			}, [v(o, {
+				class: "m-menu__scroll",
+				"fit-content": "",
+				"wrap-class": "m-menu__scroll-wrap",
+				"view-class": "m-menu__scroll-view"
+			}, {
+				default: I(() => [v(X, {
+					items: t.model,
+					depth: 0,
+					prefix: "item"
+				}, null, 8, ["items"])]),
+				_: 1
+			})], 38)) : h("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"]))], 16)) : (E(), p(d, {
+		})], 8, ["to", "disabled"]))], 16)) : (D(), m(f, {
 			key: 2,
 			to: z.value.to,
 			disabled: z.value.disabled
-		}, [_(ne, { name: "m-scale-fade" }, {
-			default: I(() => [t.modelValue ? (E(), h("div", x({
+		}, [v(ne, { name: "m-scale-fade" }, {
+			default: I(() => [t.modelValue ? (D(), g("div", S({
 				key: 0,
 				ref_key: "root",
-				ref: b
+				ref: x
 			}, P(l), {
-				class: De.value,
+				class: Oe.value,
 				style: B.value ? {
 					...$.value,
 					...M.value
 				} : $.value,
 				role: "menu",
-				onKeydown: Te
-			}), [_(X, {
-				items: t.model,
-				depth: 0,
-				prefix: "item"
-			}, null, 8, ["items"])], 16)) : m("", !0)]),
+				onKeydown: Ee
+			}), [v(o, {
+				class: "m-menu__scroll",
+				"fit-content": "",
+				"wrap-class": "m-menu__scroll-wrap",
+				"view-class": "m-menu__scroll-view"
+			}, {
+				default: I(() => [v(X, {
+					items: t.model,
+					depth: 0,
+					prefix: "item"
+				}, null, 8, ["items"])]),
+				_: 1
+			})], 16)) : h("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (E(), h("div", x({
+		})], 8, ["to", "disabled"])) : (D(), g("div", S({
 			key: 0,
 			ref_key: "root",
-			ref: b
+			ref: x
 		}, P(l), {
-			class: De.value,
+			class: Oe.value,
 			style: $.value,
 			role: "menu",
-			onKeydown: Te
-		}), [_(X, {
+			onKeydown: Ee
+		}), [v(X, {
 			items: t.model,
 			depth: 0,
 			prefix: "item"
@@ -683,4 +700,4 @@ var H = {
 	}
 });
 //#endregion
-export { ge as MMenu };
+export { _e as MMenu };