morya-ui 0.3.0 → 0.3.1

package/dist/dropdown/index.js

@@ -1,49 +1,54 @@
 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 "../Scrollbar-DTeJ8P5b.js";
-import { t as c } from "../icon-DWXkh-RM.js";
+import { t as c } from "../icon-COrt_N8A.js";
 import { t as l } from "../key-CaQYVkjh.js";
 import { t as u } from "../FlyoutSubmenu-BrUPmJa1.js";
 import { c as d } from "../config-CapALqt3.js";
 import { n as f } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as ee, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as te, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as ne, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useAttrs as re, watch as ie, withCtx as N } from "vue";
+import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as ee, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as te, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useAttrs as ne, watch as re, withCtx as P } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
-var P = {
+var F = {
 	key: 0,
 	class: "m-dropdown__separator",
 	role: "separator"
-}, F = {
+}, I = {
 	key: 1,
 	class: "m-dropdown__group"
-}, I = { class: "m-dropdown__group-label" }, L = ["onMouseenter"], R = ["disabled"], z = {
+}, L = { class: "m-dropdown__group-label" }, R = ["onMouseenter"], z = ["disabled"], B = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, B = {
+}, V = {
 	class: "m-dropdown__caret",
 	"aria-hidden": "true"
-}, V = [
+}, H = [
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], H = {
+], U = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, U = /* @__PURE__ */ C({
+}, W = /* @__PURE__ */ C({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
 		highlightedValue: {}
 	},
-	emits: ["select", "highlight"],
+	emits: [
+		"select",
+		"highlight",
+		"submenuEnter",
+		"submenuLeave"
+	],
 	setup(e, { emit: n }) {
-		let r = n, i = O(null), a = O(null), o;
+		let r = n, i = k(null), a = k(null), o;
 		function d() {
 			o && clearTimeout(o), o = void 0;
 		}
@@ -61,35 +66,41 @@ var P = {
 		function g(e, t) {
 			return l(e, t, "dd");
 		}
-		function b(e) {
+		function C(e) {
 			return c(e.icon);
 		}
-		function C(e, t, n) {
+		function w(e, t, n) {
 			if (e.disabled || m(e) || h(e) || (d(), r("highlight", e.value), !e.items?.length)) return;
 			i.value = g(e, t);
 			let o = n.currentTarget;
 			a.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
 		}
-		function w() {
-			f();
-		}
 		function te() {
-			d();
+			f();
 		}
 		function E() {
-			f();
+			d(), r("submenuEnter");
 		}
-		return (n, r) => (D(!0), v(p, null, k(e.items, (o, c) => (D(), v(p, { key: g(o, c) }, [m(o) ? (D(), v("div", P)) : h(o) ? (D(), v("div", F, [y("div", I, j(o.label), 1), o.items?.length ? (D(), ee(U, {
+		function D() {
+			f(), r("submenuLeave");
+		}
+		return (n, r) => (O(!0), v(p, null, A(e.items, (o, c) => (O(), v(p, { key: g(o, c) }, [m(o) ? (O(), v("div", F)) : h(o) ? (O(), v("div", I, [y("div", L, M(o.label), 1), o.items?.length ? (O(), ee(W, {
 			key: 0,
 			items: o.items,
 			"highlighted-value": e.highlightedValue,
 			onSelect: r[0] ||= (e) => n.$emit("select", e),
-			onHighlight: r[1] ||= (e) => n.$emit("highlight", e)
-		}, null, 8, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (D(), v("div", {
+			onHighlight: r[1] ||= (e) => n.$emit("highlight", e),
+			onSubmenuEnter: E,
+			onSubmenuLeave: D
+		}, b({ _: 2 }, [n.$slots.item ? {
+			name: "item",
+			fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+			key: "0"
+		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (O(), v("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => C(o, c, e),
-			onMouseleave: w
+			onMouseenter: (e) => w(o, c, e),
+			onMouseleave: te
 		}, [y("button", {
 			type: "button",
 			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
@@ -97,38 +108,44 @@ var P = {
 			disabled: o.disabled,
 			"aria-haspopup": !0
 		}, [
-			b(o) ? (D(), v("span", z, [S(t, {
-				name: b(o),
+			C(o) ? (O(), v("span", B, [S(t, {
+				name: C(o),
 				size: "sm"
 			}, null, 8, ["name"])])) : _("", !0),
-			A(n.$slots, "item", { item: o }, () => [x(j(o.label), 1)]),
-			y("span", B, [S(t, {
+			j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)]),
+			y("span", V, [S(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 10, R), S(u, {
+		], 10, z), S(u, {
 			open: i.value === g(o, c),
 			anchor: i.value === g(o, c) ? a.value : null,
 			"panel-class": "m-dropdown__submenu",
-			onEnter: te,
-			onLeave: E
+			onEnter: E,
+			onLeave: D
 		}, {
-			default: N(() => [S(s, {
+			default: P(() => [S(s, {
 				class: "m-dropdown__submenu-scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__submenu-wrap-inner",
 				"view-class": "m-dropdown__submenu-view"
 			}, {
-				default: N(() => [S(U, {
+				default: P(() => [S(W, {
 					items: o.items,
 					"highlighted-value": e.highlightedValue,
 					onSelect: r[2] ||= (e) => n.$emit("select", e),
-					onHighlight: r[3] ||= (e) => n.$emit("highlight", e)
-				}, null, 8, ["items", "highlighted-value"])]),
+					onHighlight: r[3] ||= (e) => n.$emit("highlight", e),
+					onSubmenuEnter: E,
+					onSubmenuLeave: D
+				}, b({ _: 2 }, [n.$slots.item ? {
+					name: "item",
+					fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+					key: "0"
+				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1032, ["open", "anchor"])], 40, L)) : (D(), v("button", {
+		}, 1032, ["open", "anchor"])], 40, R)) : (O(), v("button", {
 			key: 3,
 			type: "button",
 			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
@@ -136,12 +153,12 @@ var P = {
 			disabled: o.disabled,
 			onMouseenter: (e) => !o.disabled && n.$emit("highlight", o.value),
 			onClick: (e) => n.$emit("select", o)
-		}, [b(o) ? (D(), v("span", H, [S(t, {
-			name: b(o),
+		}, [C(o) ? (O(), v("span", U, [S(t, {
+			name: C(o),
 			size: "sm"
-		}, null, 8, ["name"])])) : _("", !0), A(n.$slots, "item", { item: o }, () => [x(j(o.label), 1)])], 42, V))], 64))), 128));
+		}, null, 8, ["name"])])) : _("", !0), j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)])], 42, H))], 64))), 128));
 	}
-}), ae = ["aria-expanded"], W = /* @__PURE__ */ C({
+}), ie = ["aria-expanded"], G = /* @__PURE__ */ C({
 	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
@@ -171,104 +188,104 @@ var P = {
 	},
 	emits: ["update:modelValue", "select"],
 	setup(t, { emit: c }) {
-		let l = t, u = c, p = re(), { rootAttrs: C } = e(p, () => l.pt), k = d(), { transitionName: P, transitionCss: F } = n({
+		let l = t, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = n({
 			role: "popup",
 			local: () => l.transition,
 			componentName: "Dropdown",
 			fallback: "scale-fade"
-		}), I = f(), L = O(null), R = O(null), z = O(null), B = O({}), V = O(-1), H = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), W = g(() => H.value[V.value]?.value), G, K, q = g(() => r(l, k.value.appendTo)), J = g(() => i(l, k.value.appendTo));
-		function oe() {
-			V.value = H.value.length ? 0 : -1;
+		}), L = f(), R = k(null), z = k(null), B = k(null), V = k({}), H = k(-1), U = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => U.value[H.value]?.value), K, q, J = g(() => r(l, A.value.appendTo)), Y = g(() => i(l, A.value.appendTo));
+		function ae() {
+			H.value = U.value.length ? 0 : -1;
 		}
-		function Y() {
-			if (!J.value || !R.value) return;
-			let e = R.value.getBoundingClientRect();
-			B.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		function X() {
+			if (!Y.value || !z.value) return;
+			let e = z.value.getBoundingClientRect();
+			V.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
-		function X(e) {
-			u("update:modelValue", e), e && (oe(), te(() => {
-				Y(), z.value?.focus({ preventScroll: !0 });
+		function Z(e) {
+			u("update:modelValue", e), e && (ae(), te(() => {
+				X(), B.value?.focus({ preventScroll: !0 });
 			}));
 		}
-		function se() {
-			X(!l.modelValue);
+		function oe() {
+			Z(!l.modelValue);
 		}
-		function ce() {
-			l.modelValue && Y();
+		function se() {
+			l.modelValue && X();
 		}
-		function Z(e) {
-			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && X(!1));
+		function ce(e) {
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && Z(!1));
 		}
 		function Q() {
-			G && clearTimeout(G), K && clearTimeout(K), G = void 0, K = void 0;
+			K && clearTimeout(K), q && clearTimeout(q), K = void 0, q = void 0;
 		}
 		function le() {
-			l.trigger === "hover" && (Q(), G = setTimeout(X, l.showDelay, !0));
+			l.trigger === "hover" && (Q(), K = setTimeout(Z, l.showDelay, !0));
 		}
 		function ue() {
-			l.trigger === "hover" && (Q(), K = setTimeout(X, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
 		function de() {
 			l.trigger === "hover" && Q();
 		}
 		function fe() {
-			l.trigger === "hover" && (Q(), K = setTimeout(X, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
 		function pe(e) {
 			if (l.modelValue) {
 				if (e.key === "Escape") {
-					e.preventDefault(), X(!1), R.value?.focus({ preventScroll: !0 });
+					e.preventDefault(), Z(!1), z.value?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = e.key === "ArrowDown" ? 1 : -1, n = H.value.length;
-					n && (V.value = (V.value + t + n) % n);
+					let t = e.key === "ArrowDown" ? 1 : -1, n = U.value.length;
+					n && (H.value = (H.value + t + n) % n);
 				}
-				if (e.key === "Home" && (e.preventDefault(), V.value = 0), e.key === "End" && (e.preventDefault(), V.value = H.value.length - 1), e.key === "Enter" || e.key === " ") {
-					let t = H.value[V.value];
-					V.value >= 0 && t && (e.preventDefault(), Z(t));
+				if (e.key === "Home" && (e.preventDefault(), H.value = 0), e.key === "End" && (e.preventDefault(), H.value = U.value.length - 1), e.key === "Enter" || e.key === " ") {
+					let t = U.value[H.value];
+					H.value >= 0 && t && (e.preventDefault(), ce(t));
 				}
 			}
 		}
 		function me(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || X(!0));
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
 		}
 		function $(e) {
-			l.modelValue && L.value && !L.value.contains(e.target) && !z.value?.contains(e.target) && X(!1);
+			l.modelValue && R.value && !R.value.contains(e.target) && !B.value?.contains(e.target) && Z(!1);
 		}
-		return ie(() => l.modelValue, (e) => {
+		return re(() => l.modelValue, (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), o(() => l.modelValue && J.value, ce), ne(() => {
+		}, { immediate: !0 }), o(() => l.modelValue && Y.value, se), D(() => {
 			document.removeEventListener("click", $), Q();
-		}), (e, n) => (D(), v("div", w({
+		}), (e, n) => (O(), v("div", w({
 			ref_key: "root",
-			ref: L
-		}, M(C), { class: "m-dropdown" }), [y("span", {
+			ref: R
+		}, N(C), { class: "m-dropdown" }), [y("span", {
 			ref_key: "trigger",
-			ref: R,
+			ref: z,
 			class: "m-dropdown__trigger",
 			role: "button",
 			tabindex: "0",
 			"aria-expanded": t.modelValue,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => l.trigger === "click" && se(),
+			onClick: n[0] ||= (e) => l.trigger === "click" && oe(),
 			onMouseenter: le,
 			onMouseleave: ue,
 			onKeydown: me
-		}, [A(e.$slots, "trigger", {}, () => [x(j(M(I).openMenu), 1)])], 40, ae), (D(), ee(m, {
-			to: q.value.to,
-			disabled: q.value.disabled
+		}, [j(e.$slots, "trigger", {}, () => [x(M(N(L).openMenu), 1)])], 40, ie), (O(), ee(m, {
+			to: J.value.to,
+			disabled: J.value.disabled
 		}, [S(h, {
-			name: M(P),
-			css: M(F)
+			name: N(F),
+			css: N(I)
 		}, {
-			default: N(() => [t.modelValue ? (D(), v("div", {
+			default: P(() => [t.modelValue ? (O(), v("div", {
 				key: 0,
 				ref_key: "menu",
-				ref: z,
-				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": J.value }]]),
-				style: E(J.value ? B.value : void 0),
+				ref: B,
+				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
+				style: E(Y.value ? V.value : void 0),
 				role: "menu",
 				tabindex: "-1",
 				onKeydown: pe,
@@ -280,14 +297,16 @@ var P = {
 				"wrap-class": "m-dropdown__scroll-wrap",
 				"view-class": "m-dropdown__scroll-view"
 			}, {
-				default: N(() => [S(U, {
+				default: P(() => [S(W, {
 					items: t.items,
-					"highlighted-value": W.value,
-					onSelect: Z,
-					onHighlight: n[1] ||= (e) => V.value = H.value.findIndex((t) => t.value === e)
+					"highlighted-value": G.value,
+					onSelect: ce,
+					onHighlight: n[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
+					onSubmenuEnter: de,
+					onSubmenuLeave: fe
 				}, b({ _: 2 }, [e.$slots.item ? {
 					name: "item",
-					fn: N(({ item: t }) => [A(e.$slots, "item", { item: t })]),
+					fn: P(({ item: t }) => [j(e.$slots, "item", { item: t })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 3
@@ -297,4 +316,4 @@ var P = {
 	}
 });
 //#endregion
-export { W as MDropdown };
+export { G as MDropdown };

package/dist/dropdown/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 {
@@ -1426,10 +1430,16 @@
     box-shadow: var(--m-shadow-md);
     display: grid;
     gap: var(--m-space-1);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: var(--m-dropdown-menu-min-width);
+    overflow: hidden;
     padding: var(--m-space-1);
     position: absolute;
     top: calc(100% + var(--m-space-2));
+    /* Grow with the content: the default shrink-to-fit width of an abs/fixed
+       box is clamped by its containing block (the trigger width when not
+       teleported), so long items would be clipped instead of widening the menu. */
+    width: max-content;
     z-index: var(--m-z-popper);
 }
 
@@ -1467,9 +1477,10 @@
     cursor: pointer;
     display: flex;
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-md);
-    min-height: var(--m-menu-item-height);
-    padding: var(--m-space-2) var(--m-space-3);
+    font-size: var(--m-control-font-medium);
+    gap: var(--m-space-2);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
     text-align: left;
     transition:
         background-color var(--m-motion-fast) var(--m-motion-ease),
@@ -1477,6 +1488,10 @@
     white-space: nowrap;
 }
 
+.m-dropdown__caret {
+    margin-left: auto;
+}
+
 .m-dropdown__item:hover:not(:disabled),
 .m-dropdown__item--highlighted:not(:disabled) {
     background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
@@ -1484,7 +1499,8 @@
 }
 
 .m-dropdown__item:focus-visible {
-    box-shadow: var(--m-focus-shadow);
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
     outline: none;
 }
 
@@ -1500,8 +1516,15 @@
     margin: var(--m-space-1) 0;
 }
 
+/* Groups nest items in a wrapper div, outside the scroll-view grid: restate
+   the grid so grouped items keep the same gap rhythm and stretch full width. */
+.m-dropdown__group {
+    display: grid;
+    gap: var(--m-space-1);
+}
+
 .m-dropdown__group-label {
     color: var(--m-color-text-muted);
     font-size: var(--m-font-size-xs);
-    padding: var(--m-space-2) var(--m-space-3) var(--m-space-1);
+    padding: var(--m-space-2) var(--m-control-padding-x-medium) var(--m-space-1);
 }

package/dist/empty/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 { t as n } from "../useMId-BXFYayPP.js";
 import { n as r } from "../locale-Bzm2nbEp.js";
 import "./style.js";

package/dist/empty/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/fieldset/index.js

@@ -1,6 +1,6 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../useControllable-elmWaz23.js";
-import { t as n } from "../Icon-lcN1rS87.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
 import { t as r } from "../useMId-BXFYayPP.js";
 import "./style.js";
 import { Transition as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, vShow as _, withCtx as v, withDirectives as y } from "vue";

package/dist/fieldset/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/file-upload/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 { n } from "../locale-Bzm2nbEp.js";
 import "./style.js";
 import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as ee, createVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as te, watch as ne } from "vue";

package/dist/file-upload/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/flex/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/float-label/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/fluid/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/form/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/gallery/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 { t as n } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as r } from "../Scrollbar-DTeJ8P5b.js";
 import { n as i } from "../locale-Bzm2nbEp.js";

package/dist/gallery/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/grid/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 {