morya-ui 0.3.0 → 0.3.1

package/dist/Loading-BSsRs6v9.js

@@ -0,0 +1,420 @@
+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 { 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 E, normalizeStyle as D, onBeforeUnmount as O, openBlock as k, reactive as A, ref as j, render as M, renderList as N, renderSlot as P, toDisplayString as F, toValue as I, unref as L, useAttrs as ee, useSlots as te, watch as R, withCtx as z } from "vue";
+//#region src/components/Loading/types.ts
+var B = [
+	"circular",
+	"aurora",
+	"bounce",
+	"wave",
+	"pulse",
+	"stardust"
+], V = new Set(B);
+function H(e) {
+	return typeof e == "string" && V.has(e);
+}
+function U(e) {
+	return H(e) ? e : "circular";
+}
+//#endregion
+//#region src/components/Loading/LoadingIndicator.vue?vue&type=script&setup=true&lang.ts
+var W = ["aria-label"], G = {
+	class: "m-loading-indicator__graphic",
+	"aria-hidden": "true"
+}, ne = {
+	key: 0,
+	class: "m-loading-aurora"
+}, re = {
+	key: 1,
+	class: "m-loading-bounce"
+}, ie = {
+	key: 2,
+	class: "m-loading-wave"
+}, ae = {
+	key: 3,
+	class: "m-loading-pulse"
+}, oe = {
+	key: 4,
+	class: "m-loading-stardust"
+}, se = {
+	key: 5,
+	class: "m-loading-circular"
+}, ce = {
+	key: 0,
+	class: "m-loading-indicator__tip"
+}, K = /* @__PURE__ */ C({
+	name: "MLoadingIndicator",
+	__name: "LoadingIndicator",
+	props: {
+		effect: {},
+		text: {},
+		ariaLabel: {},
+		size: {}
+	},
+	setup(e) {
+		let r = e, i = f(), a = j(null), { pauseAttrs: o } = n(a, !0), s = l("Loading"), c = g(() => U(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) => (k(), y("div", T({
+			ref_key: "rootRef",
+			ref: a
+		}, L(o), {
+			class: ["m-loading-indicator", d.value],
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": m.value
+		}), [b("div", G, [c.value === "aurora" ? (k(), y("div", ne, [...n[0] ||= [b("div", { class: "m-loading-aurora__ring" }, null, -1), b("div", { class: "m-loading-aurora__glow" }, null, -1)]])) : c.value === "bounce" ? (k(), y("div", re, [...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" ? (k(), y("div", ie, [...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" ? (k(), y("div", ae, [...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" ? (k(), y("div", oe, [(k(), y(p, null, N(8, (e) => b("span", {
+			key: e,
+			class: "m-loading-stardust__dot",
+			style: D({ "--i": String(e - 1) })
+		}, null, 4)), 64))])) : (k(), y("div", se, [...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 ? (k(), y("p", ce, F(e.text), 1)) : v("", !0)], 16, W));
+	}
+});
+//#endregion
+//#region src/components/Loading/loading.ts
+function le(e) {
+	let t = e ?? s();
+	if (!t) return;
+	let n = t.provides?.[d];
+	return n == null ? t.config.globalProperties.$m : I(n);
+}
+function ue(e) {
+	let t = le(e);
+	return r({
+		rolePreset: t?.motion?.transitions?.overlay,
+		componentDefault: u(t?.componentDefaults, "Loading", "transition"),
+		fallback: "loading"
+	});
+}
+var q = /* @__PURE__ */ new Set(), J = null, Y = 0, X = "";
+function Z() {
+	typeof document > "u" || (Y === 0 && (X = document.body.style.overflow), Y += 1, document.body.style.overflow = "hidden");
+}
+function Q() {
+	typeof document > "u" || (Y = Math.max(0, Y - 1), Y === 0 && (document.body.style.overflow = X));
+}
+function de(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 fe(e) {
+	let t = 0;
+	return () => {
+		t ||= requestAnimationFrame(() => {
+			t = 0, e();
+		});
+	};
+}
+function $(e) {
+	let t = A({
+		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 && J && J.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) {
+			Z(), i = !0;
+			return;
+		}
+		!e && i && (Q(), 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 = fe(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"), M(null, n), n.remove(), g && (q.delete(g), J === g && (J = null)));
+	}
+	let v = C({
+		name: "MLoadingMask",
+		setup() {
+			let n = ue(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(K, {
+					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);
+			}
+		}
+	}, q.add(g), t.fullscreen && (J = g);
+	let y = w(v);
+	return y.appContext = e.appContext ?? s(), M(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 pe() {
+	return {
+		close() {},
+		setText() {},
+		destroy() {}
+	};
+}
+function me(e = {}) {
+	if (typeof document > "u") return pe();
+	let t = e.fullscreen ?? (e.target == null && !e.body), n = $({
+		target: t ? document.body : de(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 he = { service: me }, ge = ["aria-busy"], _e = ["inert"], ve = /* @__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 = ee(), o = te(), { 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), A = g(() => U(n.effect ?? u.value.effect)), M = g(() => n.size ?? u.value.size), N = g(() => n.delay ?? u.value.delay ?? 0), F = g(() => n.background ? { background: n.background } : void 0), I = g(() => a(n.fullscreen ? {
+			teleport: !0,
+			appendTo: "body"
+		} : { teleport: !1 }, d.value.appendTo)), B = j(n.loading && N.value <= 0), V = null;
+		function H() {
+			V !== null && (clearTimeout(V), V = null);
+		}
+		R(() => [
+			n.loading,
+			N.value,
+			w.value
+		], ([e, t]) => {
+			if (H(), !e || !w.value) {
+				B.value = !1;
+				return;
+			}
+			if (!t) {
+				B.value = !0;
+				return;
+			}
+			B.value = !1, V = setTimeout(() => {
+				B.value = !0, V = null;
+			}, t);
+		}, { immediate: !0 });
+		let W = g(() => n.lock && B.value && w.value), G = !1;
+		return R(W, (e) => {
+			if (e && !G) {
+				Z(), G = !0;
+				return;
+			}
+			!e && G && (Q(), G = !1);
+		}, { immediate: !0 }), O(() => {
+			H(), G &&= (Q(), !1);
+		}), (e, n) => w.value ? (k(), y(p, { key: 0 }, [C.value ? (k(), y("div", T({ key: 0 }, L(s), {
+			class: ["m-loading", { "m-loading--active": B.value }],
+			"aria-busy": B.value || void 0
+		}), [b("div", {
+			class: "m-loading__content",
+			inert: B.value || void 0
+		}, [P(e.$slots, "default")], 8, _e), (k(), _(m, {
+			to: I.value.to,
+			disabled: I.value.disabled
+		}, [S(h, {
+			name: L(f),
+			css: L(x)
+		}, {
+			default: z(() => [B.value ? (k(), y("div", {
+				key: 0,
+				class: E(["m-loading-mask", [{ "m-loading-mask--fullscreen": t.fullscreen }, t.customClass]]),
+				style: D(F.value)
+			}, [P(e.$slots, "indicator", {}, () => [S(K, {
+				effect: A.value,
+				size: M.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, ge)) : (k(), _(m, {
+			key: 1,
+			to: I.value.to,
+			disabled: I.value.disabled
+		}, [S(h, {
+			name: L(f),
+			css: L(x)
+		}, {
+			default: z(() => [B.value ? (k(), y("div", T({ key: 0 }, L(s), {
+				class: ["m-loading-mask m-loading-mask--fullscreen", t.customClass],
+				style: F.value,
+				role: "presentation",
+				"aria-busy": "true"
+			}), [P(e.$slots, "indicator", {}, () => [S(K, {
+				effect: A.value,
+				size: M.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)) : (k(), _(K, T({ key: 1 }, L(s), {
+			effect: A.value,
+			size: M.value,
+			text: t.text,
+			"aria-label": t.ariaLabel
+		}), null, 16, [
+			"effect",
+			"size",
+			"text",
+			"aria-label"
+		]));
+	}
+});
+//#endregion
+export { H as a, B as i, he as n, U as o, $ as r, ve as t };

package/dist/{Pagination-CVrH8Ypi.js → Pagination-DrXmzcEy.js}

@@ -1,5 +1,5 @@
 import { a as e } from "./useComponentAttrs-e-5QAjdw.js";
-import { t } from "./Icon-lcN1rS87.js";
+import { t } from "./Icon-od9Ob-Ay.js";
 import { n, t as r } from "./locale-Bzm2nbEp.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, useAttrs as v, withKeys as y, withModifiers as b } from "vue";
 //#region src/components/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts

package/dist/accordion/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/auto-complete/index.js

@@ -1,5 +1,5 @@
 import { i 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";

package/dist/auto-complete/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 {
@@ -1348,21 +1352,29 @@
 
 .m-select__filter,
 .m-treeselect__filter {
+    /* size="1" + min-width:0 keep intrinsic width from inflating width:max-content menus */
+    align-self: stretch;
     background: var(--m-color-surface);
-    border: 0;
-    border-bottom: var(--m-border-width) solid var(--m-color-border);
+    border: var(--m-border-width) solid var(--m-color-border);
     border-radius: var(--m-radius-sm);
     box-sizing: border-box;
     color: var(--m-color-text);
     flex: 0 0 auto;
-    font: inherit;
-    margin: calc(var(--m-space-1) * -1) calc(var(--m-space-1) * -1) 0;
-    padding: var(--m-space-2) var(--m-space-3);
-    width: calc(100% + var(--m-space-1) * 2);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-small);
+    height: var(--m-control-height-small);
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    margin: var(--m-space-2);
+    max-width: calc(100% - 2 * var(--m-space-2));
+    min-width: 0;
+    outline: none;
+    padding: 0 var(--m-control-padding-x-small);
+    width: auto;
 }
 
 .m-select__filter:focus-visible,
 .m-treeselect__filter:focus-visible {
+    border-color: var(--m-color-primary-hover);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }

package/dist/avatar/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import "./style.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useAttrs as y, useSlots as b, watch as x } from "vue";
 //#region src/components/Avatar/Avatar.vue?vue&type=script&setup=true&lang.ts

package/dist/avatar/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/badge/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/block-ui/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/breadcrumb/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/button/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Button-B5X_R4Md.js";
+import { t } from "../Button-smoDleh0.js";
 import "./style.js";
 import { computed as n, createElementBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useAttrs as l } from "vue";
 //#region src/components/Button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts

package/dist/button/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/card/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 {