morya-ui 0.3.0 → 0.3.1

package/dist/loading/index.js

@@ -1,462 +1,48 @@
-import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { i as t } from "../types-DGuu4Eg4.js";
-import { t as n } from "../usePauseOffscreen-BIikV_gj.js";
-import { n as r, t as i } from "../useMotionTransition-Bxnnb_9u.js";
-import { n as a } from "../overlay-oR-5MDuE.js";
-import { i as o } from "../content-h8POj44-.js";
-import { t as s } from "../overlayHost-78CGtMgR.js";
-import { c, i as l, l as u, t as d } from "../config-CapALqt3.js";
-import { n as f } from "../locale-Bzm2nbEp.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../Loading-BSsRs6v9.js";
 import "./style.js";
-import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createStaticVNode as x, createVNode as S, defineComponent as C, h as w, mergeProps as T, normalizeClass as ee, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, reactive as k, ref as A, render as j, renderList as M, renderSlot as N, toDisplayString as P, toValue as F, unref as I, useAttrs as te, useSlots as ne, watch as L, withCtx as R } from "vue";
-//#region src/components/Loading/types.ts
-var z = [
-	"circular",
-	"aurora",
-	"bounce",
-	"wave",
-	"pulse",
-	"stardust"
-], B = new Set(z);
-function V(e) {
-	return typeof e == "string" && B.has(e);
-}
-function H(e) {
-	return V(e) ? e : "circular";
-}
-//#endregion
-//#region src/components/Loading/LoadingIndicator.vue?vue&type=script&setup=true&lang.ts
-var U = ["aria-label"], W = {
-	class: "m-loading-indicator__graphic",
-	"aria-hidden": "true"
-}, re = {
-	key: 0,
-	class: "m-loading-aurora"
-}, ie = {
-	key: 1,
-	class: "m-loading-bounce"
-}, ae = {
-	key: 2,
-	class: "m-loading-wave"
-}, oe = {
-	key: 3,
-	class: "m-loading-pulse"
-}, se = {
-	key: 4,
-	class: "m-loading-stardust"
-}, ce = {
-	key: 5,
-	class: "m-loading-circular"
-}, le = {
-	key: 0,
-	class: "m-loading-indicator__tip"
-}, G = /* @__PURE__ */ C({
-	name: "MLoadingIndicator",
-	__name: "LoadingIndicator",
-	props: {
-		effect: {},
-		text: {},
-		ariaLabel: {},
-		size: {}
-	},
-	setup(e) {
-		let r = e, i = f(), a = A(null), { pauseAttrs: o } = n(a, !0), s = l("Loading"), c = g(() => H(r.effect ?? s.value.effect)), u = g(() => r.size ?? s.value.size), d = g(() => {
-			let e = t(u.value);
-			return {
-				"m-loading-indicator--small": e === "small",
-				"m-loading-indicator--large": e === "large"
-			};
-		}), m = g(() => r.ariaLabel ?? (r.text ? void 0 : i.value.loading));
-		return (t, n) => (O(), y("div", T({
-			ref_key: "rootRef",
-			ref: a
-		}, I(o), {
-			class: ["m-loading-indicator", d.value],
-			role: "status",
-			"aria-live": "polite",
-			"aria-label": m.value
-		}), [b("div", W, [c.value === "aurora" ? (O(), y("div", re, [...n[0] ||= [b("div", { class: "m-loading-aurora__ring" }, null, -1), b("div", { class: "m-loading-aurora__glow" }, null, -1)]])) : c.value === "bounce" ? (O(), y("div", ie, [...n[1] ||= [
-			b("span", { class: "m-loading-bounce__ball" }, null, -1),
-			b("span", { class: "m-loading-bounce__ball" }, null, -1),
-			b("span", { class: "m-loading-bounce__ball" }, null, -1)
-		]])) : c.value === "wave" ? (O(), y("div", ae, [...n[2] ||= [x("<span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span><span class=\"m-loading-wave__bar\"></span>", 5)]])) : c.value === "pulse" ? (O(), y("div", oe, [...n[3] ||= [
-			b("span", { class: "m-loading-pulse__ring" }, null, -1),
-			b("span", { class: "m-loading-pulse__ring" }, null, -1),
-			b("span", { class: "m-loading-pulse__ring" }, null, -1),
-			b("span", { class: "m-loading-pulse__ring" }, null, -1)
-		]])) : c.value === "stardust" ? (O(), y("div", se, [(O(), y(p, null, M(8, (e) => b("span", {
-			key: e,
-			class: "m-loading-stardust__dot",
-			style: E({ "--i": String(e - 1) })
-		}, null, 4)), 64))])) : (O(), y("div", ce, [...n[4] ||= [b("svg", {
-			class: "m-loading-circular__svg",
-			viewBox: "0 0 50 50"
-		}, [b("circle", {
-			class: "m-loading-circular__path",
-			cx: "25",
-			cy: "25",
-			r: "20",
-			fill: "none"
-		})], -1)]]))]), e.text ? (O(), y("p", le, P(e.text), 1)) : v("", !0)], 16, U));
-	}
-});
-//#endregion
-//#region src/components/Loading/loading.ts
-function ue(e) {
-	let t = e ?? s();
-	if (!t) return;
-	let n = t.provides?.[d];
-	return n == null ? t.config.globalProperties.$m : F(n);
-}
-function de(e) {
-	let t = ue(e);
-	return r({
-		rolePreset: t?.motion?.transitions?.overlay,
-		componentDefault: u(t?.componentDefaults, "Loading", "transition"),
-		fallback: "loading"
-	});
-}
-var K = /* @__PURE__ */ new Set(), q = null, J = 0, Y = "";
-function X() {
-	typeof document > "u" || (J === 0 && (Y = document.body.style.overflow), J += 1, document.body.style.overflow = "hidden");
-}
-function Z() {
-	typeof document > "u" || (J = Math.max(0, J - 1), J === 0 && (document.body.style.overflow = Y));
-}
-function fe(e) {
-	if (typeof document > "u") throw Error("[MLoading] service is only available in the browser");
-	if (!e || e === document.body) return document.body;
-	if (typeof e == "string") {
-		let t = document.querySelector(e);
-		if (!(t instanceof HTMLElement)) throw TypeError(`[MLoading] target not found: ${e}`);
-		return t;
-	}
-	return e;
-}
-function pe(e) {
-	let t = 0;
-	return () => {
-		t ||= requestAnimationFrame(() => {
-			t = 0, e();
-		});
-	};
-}
-function me(e) {
-	let t = k({
-		visible: !e.delay,
-		text: e.text ?? "",
-		effect: e.effect,
-		background: e.background,
-		customClass: e.customClass,
-		size: e.size,
-		fullscreen: !!e.fullscreen,
-		body: !!e.body && !e.fullscreen,
-		spinner: e.spinner,
-		top: 0,
-		left: 0,
-		width: 0,
-		height: 0
-	});
-	t.fullscreen && q && q.destroy();
-	let n = document.createElement("div");
-	(t.fullscreen || t.body ? document.body : e.target).appendChild(n);
-	let r = !1;
-	if (!t.fullscreen && !t.body) {
-		let t = getComputedStyle(e.target).position;
-		(!t || t === "static") && (e.target.classList.add("m-loading-parent--relative"), r = !0);
-	}
-	e.target.setAttribute("aria-busy", "true");
-	let i = !1;
-	function a(e) {
-		if (e && !i) {
-			X(), i = !0;
-			return;
-		}
-		!e && i && (Z(), i = !1);
-	}
-	t.visible && a(!!e.lock);
-	function c() {
-		if (!t.body) return;
-		let n = e.target.getBoundingClientRect();
-		t.top = n.top, t.left = n.left, t.width = n.width, t.height = n.height;
-	}
-	let l = pe(c), u = null;
-	t.body && (c(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), typeof ResizeObserver < "u" && (u = new ResizeObserver(l), u.observe(e.target)));
-	let d = null;
-	e.delay && e.delay > 0 && (d = setTimeout(() => {
-		d = null, t.visible = !0, a(!!e.lock);
-	}, e.delay));
-	let f = null, p = !1, m = !1, g = null;
-	function _() {
-		m || (m = !0, p = !0, d !== null && (clearTimeout(d), d = null), f !== null && (clearTimeout(f), f = null), a(!1), t.body && (window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), u?.disconnect(), u = null), r && e.target.classList.remove("m-loading-parent--relative"), e.target.getAttribute("aria-busy") === "true" && e.target.removeAttribute("aria-busy"), j(null, n), n.remove(), g && (K.delete(g), q === g && (q = null)));
-	}
-	let v = C({
-		name: "MLoadingMask",
-		setup() {
-			let n = de(e.appContext);
-			return () => w(h, {
-				name: n,
-				css: n !== void 0,
-				appear: !0,
-				duration: {
-					enter: 180,
-					leave: 130
-				},
-				onAfterLeave: () => _()
-			}, { default: () => {
-				if (!t.visible) return null;
-				let e = [
-					"m-loading-mask",
-					t.fullscreen ? "m-loading-mask--fullscreen" : void 0,
-					t.body ? "m-loading-mask--body" : void 0,
-					t.customClass || void 0
-				].filter((e) => !!e), n = {};
-				t.background && (n.background = t.background), t.body && (n.top = `${t.top}px`, n.left = `${t.left}px`, n.width = `${t.width}px`, n.height = `${t.height}px`);
-				let r = t.spinner ? o(t.spinner) : w(G, {
-					effect: t.effect,
-					size: t.size,
-					text: t.text || void 0
-				});
-				return w("div", {
-					class: e,
-					style: n
-				}, [r]);
-			} });
-		}
-	});
-	g = {
-		fullscreen: t.fullscreen,
-		destroy: _,
-		close() {
-			if (!p) {
-				if (p = !0, d !== null) {
-					clearTimeout(d), d = null, _();
-					return;
-				}
-				if (!t.visible) {
-					_();
-					return;
-				}
-				t.visible = !1, f = setTimeout(_, 200);
-			}
-		}
-	}, K.add(g), t.fullscreen && (q = g);
-	let y = w(v);
-	return y.appContext = e.appContext ?? s(), j(y, n), {
-		close: () => g.close(),
-		destroy: () => _(),
-		setText(e) {
-			m || (t.text = e);
-		},
-		update(e) {
-			m || (e.text !== void 0 && (t.text = e.text), e.effect !== void 0 && (t.effect = e.effect), e.background !== void 0 && (t.background = e.background), e.customClass !== void 0 && (t.customClass = e.customClass), e.size !== void 0 && (t.size = e.size), e.spinner !== void 0 && (t.spinner = e.spinner), e.lock !== void 0 && t.visible && a(e.lock));
-		}
-	};
-}
-function he() {
-	return {
-		close() {},
-		setText() {},
-		destroy() {}
-	};
-}
-function ge(e = {}) {
-	if (typeof document > "u") return he();
-	let t = e.fullscreen ?? (e.target == null && !e.body), n = me({
-		target: t ? document.body : fe(e.target ?? document.body),
-		fullscreen: t,
-		body: !!e.body && !t,
-		lock: e.lock,
-		text: e.text,
-		effect: e.effect,
-		background: e.background,
-		customClass: e.customClass,
-		size: e.size,
-		delay: e.delay,
-		spinner: e.spinner
-	});
-	return {
-		close: () => n.close(),
-		setText: (e) => n.setText(e),
-		destroy: () => n.destroy()
-	};
-}
-var _e = { service: ge }, ve = ["aria-busy"], ye = ["inert"], be = /* @__PURE__ */ C({
-	name: "MLoading",
-	inheritAttrs: !1,
-	__name: "Loading",
-	props: {
-		pt: {},
-		loading: {
-			type: Boolean,
-			default: !0
-		},
-		effect: {},
-		text: {},
-		ariaLabel: {},
-		size: {},
-		background: {},
-		customClass: {},
-		fullscreen: {
-			type: Boolean,
-			default: !1
-		},
-		lock: {
-			type: Boolean,
-			default: !1
-		},
-		delay: { default: 0 },
-		transition: {
-			type: [String, Boolean],
-			default: void 0
-		}
-	},
-	setup(t) {
-		let n = t, r = te(), o = ne(), { rootAttrs: s } = e(r, () => n.pt), u = l("Loading"), d = c(), { transitionName: f, transitionCss: x } = i({
-			role: "overlay",
-			local: () => n.transition,
-			componentName: "Loading",
-			fallback: "loading"
-		}), C = g(() => !!o.default), w = g(() => C.value || n.fullscreen), k = g(() => H(n.effect ?? u.value.effect)), j = g(() => n.size ?? u.value.size), M = g(() => n.delay ?? u.value.delay ?? 0), P = g(() => n.background ? { background: n.background } : void 0), F = g(() => a(n.fullscreen ? {
-			teleport: !0,
-			appendTo: "body"
-		} : { teleport: !1 }, d.value.appendTo)), z = A(n.loading && M.value <= 0), B = null;
-		function V() {
-			B !== null && (clearTimeout(B), B = null);
-		}
-		L(() => [
-			n.loading,
-			M.value,
-			w.value
-		], ([e, t]) => {
-			if (V(), !e || !w.value) {
-				z.value = !1;
-				return;
-			}
-			if (!t) {
-				z.value = !0;
-				return;
-			}
-			z.value = !1, B = setTimeout(() => {
-				z.value = !0, B = null;
-			}, t);
-		}, { immediate: !0 });
-		let U = g(() => n.lock && z.value && w.value), W = !1;
-		return L(U, (e) => {
-			if (e && !W) {
-				X(), W = !0;
-				return;
-			}
-			!e && W && (Z(), W = !1);
-		}, { immediate: !0 }), D(() => {
-			V(), W &&= (Z(), !1);
-		}), (e, n) => w.value ? (O(), y(p, { key: 0 }, [C.value ? (O(), y("div", T({ key: 0 }, I(s), {
-			class: ["m-loading", { "m-loading--active": z.value }],
-			"aria-busy": z.value || void 0
-		}), [b("div", {
-			class: "m-loading__content",
-			inert: z.value || void 0
-		}, [N(e.$slots, "default")], 8, ye), (O(), _(m, {
-			to: F.value.to,
-			disabled: F.value.disabled
-		}, [S(h, {
-			name: I(f),
-			css: I(x)
-		}, {
-			default: R(() => [z.value ? (O(), y("div", {
-				key: 0,
-				class: ee(["m-loading-mask", [{ "m-loading-mask--fullscreen": t.fullscreen }, t.customClass]]),
-				style: E(P.value)
-			}, [N(e.$slots, "indicator", {}, () => [S(G, {
-				effect: k.value,
-				size: j.value,
-				text: t.text,
-				"aria-label": t.ariaLabel
-			}, null, 8, [
-				"effect",
-				"size",
-				"text",
-				"aria-label"
-			])])], 6)) : v("", !0)]),
-			_: 3
-		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 16, ve)) : (O(), _(m, {
-			key: 1,
-			to: F.value.to,
-			disabled: F.value.disabled
-		}, [S(h, {
-			name: I(f),
-			css: I(x)
-		}, {
-			default: R(() => [z.value ? (O(), y("div", T({ key: 0 }, I(s), {
-				class: ["m-loading-mask m-loading-mask--fullscreen", t.customClass],
-				style: P.value,
-				role: "presentation",
-				"aria-busy": "true"
-			}), [N(e.$slots, "indicator", {}, () => [S(G, {
-				effect: k.value,
-				size: j.value,
-				text: t.text,
-				"aria-label": t.ariaLabel
-			}, null, 8, [
-				"effect",
-				"size",
-				"text",
-				"aria-label"
-			])])], 16)) : v("", !0)]),
-			_: 3
-		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 64)) : (O(), _(G, T({ key: 1 }, I(s), {
-			effect: k.value,
-			size: j.value,
-			text: t.text,
-			"aria-label": t.ariaLabel
-		}), null, 16, [
-			"effect",
-			"size",
-			"text",
-			"aria-label"
-		]));
-	}
-}), Q = /* @__PURE__ */ new WeakMap();
-function $(e, ...t) {
+import { onBeforeUnmount as o } from "vue";
+//#region src/components/Loading/directive.ts
+var s = /* @__PURE__ */ new WeakMap();
+function c(e, ...t) {
 	for (let n of t) {
 		let t = e.getAttribute(n);
 		if (t != null) return t;
 	}
 }
-function xe(e) {
-	return V(e) ? e : void 0;
+function l(t) {
+	return e(t) ? t : void 0;
 }
-function Se(e, t) {
-	let n = t.value, r = n && typeof n == "object" ? n : void 0, i = typeof n == "boolean" ? n : r ? r.loading !== !1 : !!n, a = !!(t.modifiers.fullscreen || r?.fullscreen), o = !!(t.modifiers.body || r?.body) && !a, s = xe(r?.effect ?? $(e, "m-loading-effect")), c = r?.size, l = $(e, "m-loading-delay"), u = r?.delay ?? (l == null ? void 0 : Number(l));
+function u(e, t) {
+	let n = t.value, r = n && typeof n == "object" ? n : void 0, i = typeof n == "boolean" ? n : r ? r.loading !== !1 : !!n, a = !!(t.modifiers.fullscreen || r?.fullscreen), o = !!(t.modifiers.body || r?.body) && !a, s = l(r?.effect ?? c(e, "m-loading-effect")), u = r?.size, d = c(e, "m-loading-delay"), f = r?.delay ?? (d == null ? void 0 : Number(d));
 	return {
 		visible: i,
-		text: r?.text ?? $(e, "m-loading-text"),
+		text: r?.text ?? c(e, "m-loading-text"),
 		effect: s,
-		background: r?.background ?? $(e, "m-loading-background"),
-		customClass: r?.customClass ?? $(e, "m-loading-custom-class"),
-		size: typeof c == "string" ? c : void 0,
+		background: r?.background ?? c(e, "m-loading-background"),
+		customClass: r?.customClass ?? c(e, "m-loading-custom-class"),
+		size: typeof u == "string" ? u : void 0,
 		fullscreen: a,
 		lock: !!(t.modifiers.lock || r?.lock),
 		body: o,
-		delay: Number.isFinite(u) ? u : void 0,
+		delay: Number.isFinite(f) ? f : void 0,
 		spinner: r?.spinner,
 		mode: `${a}:${o}`
 	};
 }
-function Ce(e, t) {
-	let n = Se(e, t), r = Q.get(e);
+function d(e, t) {
+	let n = u(e, t), r = s.get(e);
 	if (!n.visible) {
 		if (!r) return;
-		Q.delete(e), r.instance.close();
+		s.delete(e), r.instance.close();
 		return;
 	}
 	if (r && r.mode === n.mode) {
 		r.instance.update(n);
 		return;
 	}
-	r?.instance.destroy(), Q.set(e, {
+	r?.instance.destroy(), s.set(e, {
 		mode: n.mode,
-		instance: me({
+		instance: i({
 			target: e,
 			text: n.text,
 			effect: n.effect,
@@ -472,35 +58,35 @@ function Ce(e, t) {
 		})
 	});
 }
-var we = {
-	mounted: Ce,
-	updated: Ce,
+var f = {
+	mounted: d,
+	updated: d,
 	unmounted(e) {
-		let t = Q.get(e);
-		t && (Q.delete(e), t.instance.destroy());
+		let t = s.get(e);
+		t && (s.delete(e), t.instance.destroy());
 	}
 };
 //#endregion
 //#region src/components/Loading/useLoading.ts
-function Te(e = {}) {
+function p(e = {}) {
 	let t = null;
-	function n() {
+	function r() {
 		t?.close(), t = null;
 	}
-	return D(() => {
+	return o(() => {
 		t?.destroy(), t = null;
 	}), {
-		open(r = {}) {
-			return n(), t = _e.service({
+		open(i = {}) {
+			return r(), t = n.service({
 				...e,
-				...r
+				...i
 			}), t;
 		},
-		close: n,
+		close: r,
 		setText(e) {
 			t?.setText(e);
 		}
 	};
 }
 //#endregion
-export { z as LOADING_EFFECTS, be as MLoading, V as isLoadingEffect, _e as loading, H as normalizeLoadingEffect, Te as useLoading, we as vLoading };
+export { t as LOADING_EFFECTS, a as MLoading, e as isLoadingEffect, n as loading, r as normalizeLoadingEffect, p as useLoading, f as vLoading };

package/dist/loading/style.css

@@ -529,9 +529,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {

package/dist/mega-menu/index.js

@@ -1,11 +1,11 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
 import { n as r, t as ee } from "../overlay-oR-5MDuE.js";
 import { t as te } from "../overlayPlacement-Cd20JTD_.js";
 import { t as i } from "../useFloatingViewportSync-DZdJ7W8n.js";
 import { t as a } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as ne } from "../icon-DWXkh-RM.js";
+import { t as ne } from "../icon-COrt_N8A.js";
 import { c as re } from "../config-CapALqt3.js";
 import { n as ie } from "../locale-Bzm2nbEp.js";
 import "./style.js";

package/dist/mega-menu/style.css

@@ -529,9 +529,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {

package/dist/menu/index.js

@@ -1,12 +1,12 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
 import { n as r, t as i } from "../overlay-oR-5MDuE.js";
 import { t as a } from "../overlayPlacement-Cd20JTD_.js";
 import { t as o } from "../useFloatingViewportSync-DZdJ7W8n.js";
 import { t as s } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as c } from "../Scrollbar-DTeJ8P5b.js";
-import { t as ee } from "../icon-DWXkh-RM.js";
+import { t as ee } from "../icon-COrt_N8A.js";
 import { t as l } from "../key-CaQYVkjh.js";
 import { t as u } from "../lastPointer-CRxcUqdd.js";
 import { t as d } from "../Popover-BQ07q4VV.js";

package/dist/menu/style.css

@@ -529,9 +529,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -1671,9 +1675,13 @@
     display: flex;
     flex-direction: column;
     max-height: var(--m-menu-popup-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     overflow: hidden;
     padding: var(--m-space-1) 0 var(--m-space-2);
     position: absolute;
+    /* Grow with the content: shrink-to-fit would clamp to the anchor width
+       (the containing block) when not teleported. */
+    width: max-content;
     z-index: var(--m-z-popper);
 }
 
@@ -1693,6 +1701,8 @@
 
 .m-menu-popup .m-menu--popup:not(.m-menu--teleported) {
     left: 0;
+    /* Keep the in-place popup at least as wide as its anchor. */
+    min-width: 100%;
     top: calc(100% + var(--m-space-2));
 }
 

package/dist/menubar/index.js

@@ -1,12 +1,12 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
 import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
 import { t as ne } from "../overlayPlacement-Cd20JTD_.js";
 import { t as re } from "../useFloatingViewportSync-DZdJ7W8n.js";
 import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as ie } from "../Scrollbar-DTeJ8P5b.js";
-import { t as ae } from "../icon-DWXkh-RM.js";
+import { t as ae } from "../icon-COrt_N8A.js";
 import { c as oe } from "../config-CapALqt3.js";
 import { n as i } from "../locale-Bzm2nbEp.js";
 import "./style.js";
@@ -74,7 +74,10 @@ var he = ["aria-label"], ge = {
 			let e = P.value[M.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			F.value = ne(t, "bottom-start", { gap: 4 });
+			F.value = ne(t, "bottom-start", {
+				gap: 4,
+				minWidth: "var(--m-menu-min-width, 12rem)"
+			});
 		}
 		function z(e) {
 			return e.key ?? e.label;

package/dist/menubar/style.css

@@ -529,9 +529,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -1466,11 +1470,15 @@
     gap: var(--m-menubar-item-gap);
     left: 0;
     max-height: var(--m-menubar-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: var(--m-menubar-menu-min-width);
     overflow: hidden;
     padding: var(--m-space-1);
     position: absolute;
     top: calc(100% + var(--m-space-1));
+    /* Grow with the content: shrink-to-fit would clamp to the trigger item
+       width (the containing block) when not teleported. */
+    width: max-content;
     z-index: var(--m-z-popper);
 }