@m3ui-vue/m3ui-vue 0.3.1 → 0.4.0

package/dist/{MMenuItem-C6RwHl-l.js → MMenuItem-FyttjOj_.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./MIcon-CaEooCmZ.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, onUnmounted as v, openBlock as y, ref as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useId as T, useSlots as E, watch as D, withCtx as O, withModifiers as k } from "vue";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, onUnmounted as v, openBlock as y, provide as b, ref as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useId as E, useSlots as D, watch as O, withCtx as k, withModifiers as A } from "vue";
 //#region src/composables/useLocale.ts
-var A = {
+var j = {
 	search: "Search...",
 	noResults: "No results",
 	close: "Close",
@@ -71,17 +71,74 @@ var A = {
 	insertImage: "Insert image",
 	imageUrlLabel: "Image URL",
 	insert: "Insert"
-}, j = Symbol("m3-locale");
-function M() {
-	let e = p(j, {});
+}, M = Symbol("m3-locale");
+function N() {
+	let e = p(M, {});
 	return {
-		...A,
+		...j,
 		...e
 	};
 }
 //#endregion
-//#region src/composables/useFieldBg.ts
-var N = [
+//#region src/components/MSpinner.vue?vue&type=script&setup=true&lang.ts
+var P = ["aria-label"], F = {
+	key: 0,
+	class: "block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
+}, I = [
+	"width",
+	"height",
+	"viewBox"
+], L = ["d", "stroke-dasharray"], R = 3, z = 9, B = /* @__PURE__ */ f({
+	__name: "MSpinner",
+	props: {
+		size: { default: 20 },
+		wavy: {
+			type: Boolean,
+			default: !1
+		},
+		label: {}
+	},
+	setup(e) {
+		let t = e, n = N(), r = a(() => (t.size / 2 - 1 - R / 2) / 1.25), i = a(() => t.size / 2), o = a(() => {
+			let e = i.value, t = r.value, n = t * .08, a = z * 24, o = [], s = 0, c = 0, l = 0;
+			for (let r = 0; r <= a; r++) {
+				let i = 2 * Math.PI * r / a - Math.PI / 2, u = t + n * Math.sin(z * i), d = e + u * Math.cos(i), f = e + u * Math.sin(i);
+				r > 0 && (s += Math.sqrt((d - c) ** 2 + (f - l) ** 2)), o.push(`${r === 0 ? "M" : "L"}${d.toFixed(2)},${f.toFixed(2)}`), c = d, l = f;
+			}
+			let u = s * .58, d = s - u, f = `${u.toFixed(1)} ${d.toFixed(1)}`;
+			return {
+				path: o.join("") + "Z",
+				dash: f,
+				len: s.toFixed(1)
+			};
+		});
+		return (t, r) => (y(), c("span", {
+			class: "inline-flex shrink-0 items-center justify-center",
+			style: h({
+				width: `${e.size}px`,
+				height: `${e.size}px`
+			}),
+			role: "status",
+			"aria-label": e.label ?? T(n).loading
+		}, [e.wavy ? (y(), c("svg", {
+			key: 1,
+			width: e.size,
+			height: e.size,
+			viewBox: `0 0 ${e.size} ${e.size}`,
+			fill: "none",
+			class: "animate-[m3-wavy-spin_2.8s_linear_infinite]",
+			style: h(`transform-origin: ${i.value}px ${i.value}px`)
+		}, [l("path", {
+			d: o.value.path,
+			stroke: "currentColor",
+			"stroke-width": R,
+			"stroke-linecap": "round",
+			"stroke-dasharray": o.value.dash,
+			class: "animate-[m3-wavy-travel_2s_linear_infinite]",
+			style: h({ "--m3-wave-len": o.value.len })
+		}, null, 12, L)], 12, I)) : (y(), c("span", F))], 12, P));
+	}
+}), V = [
 	"bg-surface-container-highest",
 	"bg-surface-container-high",
 	"bg-surface-container-low",
@@ -102,11 +159,11 @@ var N = [
 	"bg-tertiary",
 	"bg-error"
 ];
-function P(e) {
-	for (let t of N) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
+function H(e) {
+	for (let t of V) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
 	return null;
 }
-function F(e) {
+function U(e) {
 	if (!e || e === "transparent") return !0;
 	let t = e.match(/^rgba?\(([^)]+)\)$/);
 	if (t) {
@@ -115,15 +172,15 @@ function F(e) {
 	}
 	return !1;
 }
-function I(e, t) {
-	let n = b("var(--color-surface)");
+function W(e, t) {
+	let n = x("var(--color-surface)");
 	function r(r) {
 		n.value = r, e.value?.style.setProperty("--field-bg", t() ?? r);
 	}
 	function i() {
 		let t = e.value?.parentElement ?? null;
 		for (; t;) {
-			let e = P(t);
+			let e = H(t);
 			if (e) {
 				r(e);
 				return;
@@ -133,7 +190,7 @@ function I(e, t) {
 				return;
 			}
 			let n = getComputedStyle(t).backgroundColor;
-			if (!F(n)) {
+			if (!U(n)) {
 				r(n);
 				return;
 			}
@@ -154,65 +211,92 @@ function I(e, t) {
 	}), g(() => o?.disconnect()), { resolvedFieldBg: a(() => t() ?? n.value) };
 }
 //#endregion
-//#region src/components/MSpinner.vue?vue&type=script&setup=true&lang.ts
-var L = ["aria-label"], R = {
-	key: 0,
-	class: "block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
-}, z = [
-	"width",
-	"height",
-	"viewBox"
-], B = ["d", "stroke-dasharray"], V = 3, H = 9, U = /* @__PURE__ */ f({
-	__name: "MSpinner",
+//#region src/components/MIconButton.vue?vue&type=script&setup=true&lang.ts
+var G = "inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", K = /* @__PURE__ */ f({
+	__name: "MIconButton",
 	props: {
-		size: { default: 20 },
-		wavy: {
+		icon: {},
+		label: {},
+		variant: { default: "standard" },
+		shape: { default: "rounded" },
+		size: { default: "sm" },
+		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		label: {}
+		to: {}
 	},
-	setup(e) {
-		let t = e, n = M(), r = a(() => (t.size / 2 - 1 - V / 2) / 1.25), i = a(() => t.size / 2), o = a(() => {
-			let e = i.value, t = r.value, n = t * .08, a = H * 24, o = [], s = 0, c = 0, l = 0;
-			for (let r = 0; r <= a; r++) {
-				let i = 2 * Math.PI * r / a - Math.PI / 2, u = t + n * Math.sin(H * i), d = e + u * Math.cos(i), f = e + u * Math.sin(i);
-				r > 0 && (s += Math.sqrt((d - c) ** 2 + (f - l) ** 2)), o.push(`${r === 0 ? "M" : "L"}${d.toFixed(2)},${f.toFixed(2)}`), c = d, l = f;
+	setup(t) {
+		let n = t, r = a(() => n.to ? "RouterLink" : "button"), i = {
+			xs: {
+				px: 32,
+				icon: 16
+			},
+			sm: {
+				px: 40,
+				icon: 20
+			},
+			md: {
+				px: 48,
+				icon: 24
+			},
+			lg: {
+				px: 56,
+				icon: 28
+			},
+			xl: {
+				px: 64,
+				icon: 32
+			}
+		}, s = a(() => typeof n.size == "number" ? {
+			px: n.size,
+			icon: Math.round(n.size * .55)
+		} : i[n.size] ?? i.sm), c = a(() => n.shape === "squared" ? "rounded-md" : "rounded-full");
+		function l(e) {
+			if (n.disabled) return;
+			let t = e.currentTarget, r = t.getBoundingClientRect(), i = Math.max(r.width, r.height) * 2, a = document.createElement("span");
+			a.className = "m3-ripple", a.style.cssText = `width:${i}px;height:${i}px;top:${e.clientY - r.top - i / 2}px;left:${e.clientX - r.left - i / 2}px`, t.appendChild(a), a.addEventListener("animationend", () => a.remove(), { once: !0 });
+		}
+		let u = a(() => {
+			switch (n.variant) {
+				case "filled": return "bg-primary text-on-primary hover:shadow-elevation-1";
+				case "tonal": return "bg-secondary-container text-on-secondary-container hover:shadow-elevation-1";
+				case "outlined": return "border border-outline text-on-surface-variant hover:bg-on-surface/8";
+				default: return "text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12";
 			}
-			let u = s * .58, d = s - u, f = `${u.toFixed(1)} ${d.toFixed(1)}`;
-			return {
-				path: o.join("") + "Z",
-				dash: f,
-				len: s.toFixed(1)
-			};
 		});
-		return (t, r) => (y(), c("span", {
-			class: "inline-flex shrink-0 items-center justify-center",
+		return (n, i) => (y(), o(C(r.value), {
+			to: t.to || void 0,
+			type: t.to ? void 0 : "button",
+			"aria-label": t.label || void 0,
+			disabled: t.disabled,
+			class: m([
+				G,
+				c.value,
+				u.value,
+				"relative overflow-hidden"
+			]),
 			style: h({
-				width: `${e.size}px`,
-				height: `${e.size}px`
+				width: `${s.value.px}px`,
+				height: `${s.value.px}px`
 			}),
-			role: "status",
-			"aria-label": e.label ?? w(n).loading
-		}, [e.wavy ? (y(), c("svg", {
-			key: 1,
-			width: e.size,
-			height: e.size,
-			viewBox: `0 0 ${e.size} ${e.size}`,
-			fill: "none",
-			class: "animate-[m3-wavy-spin_2.8s_linear_infinite]",
-			style: h(`transform-origin: ${i.value}px ${i.value}px`)
-		}, [l("path", {
-			d: o.value.path,
-			stroke: "currentColor",
-			"stroke-width": V,
-			"stroke-linecap": "round",
-			"stroke-dasharray": o.value.dash,
-			class: "animate-[m3-wavy-travel_2s_linear_infinite]",
-			style: h({ "--m3-wave-len": o.value.len })
-		}, null, 12, B)], 12, z)) : (y(), c("span", R))], 12, L));
+			onPointerdown: l
+		}, {
+			default: k(() => [d(e, {
+				name: t.icon,
+				size: s.value.icon
+			}, null, 8, ["name", "size"])]),
+			_: 1
+		}, 40, [
+			"to",
+			"type",
+			"aria-label",
+			"disabled",
+			"class",
+			"style"
+		]));
 	}
-}), W = "relative inline-flex items-center justify-center gap-2 h-10 rounded-full text-label-large font-medium whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]", G = /* @__PURE__ */ f({
+}), q = "relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]", J = /* @__PURE__ */ f({
 	__name: "MButton",
 	props: {
 		variant: { default: "filled" },
@@ -227,6 +311,8 @@ var L = ["aria-label"], R = {
 			default: !1
 		},
 		icon: {},
+		size: { default: "sm" },
+		shape: { default: "rounded" },
 		to: {}
 	},
 	setup(t) {
@@ -237,38 +323,90 @@ var L = ["aria-label"], R = {
 				"--color-primary-container": r.color + "33",
 				"--color-on-primary-container": r.color
 			};
-		}), u = a(() => r.color === "error"), d = a(() => {
+		}), u = a(() => r.color === "error"), d = a(() => r.shape === "squared" ? "rounded-md" : "rounded-full"), f = {
+			xs: {
+				h: "h-8",
+				text: "text-label-medium",
+				icon: 16,
+				spinner: 14,
+				px: "px-4",
+				pxIcon: "pl-3 pr-4",
+				pxText: "px-2"
+			},
+			sm: {
+				h: "h-10",
+				text: "text-label-large",
+				icon: 20,
+				spinner: 16,
+				px: "px-6",
+				pxIcon: "pl-4 pr-6",
+				pxText: "px-3"
+			},
+			md: {
+				h: "h-14",
+				text: "text-title-medium",
+				icon: 20,
+				spinner: 18,
+				px: "px-6",
+				pxIcon: "pl-5 pr-6",
+				pxText: "px-3"
+			},
+			lg: {
+				h: "h-16",
+				text: "text-title-large",
+				icon: 22,
+				spinner: 20,
+				px: "px-7",
+				pxIcon: "pl-6 pr-7",
+				pxText: "px-4"
+			},
+			xl: {
+				h: "h-20",
+				text: "text-headline-small",
+				icon: 24,
+				spinner: 22,
+				px: "px-8",
+				pxIcon: "pl-7 pr-8",
+				pxText: "px-4"
+			}
+		}, p = a(() => f[r.size] ?? f.sm), g = a(() => `${p.value.h} ${p.value.text}`), _ = a(() => p.value.icon), v = a(() => p.value.spinner), b = a(() => r.variant === "text" ? p.value.pxText : r.icon || r.loading ? p.value.pxIcon : p.value.px), x = a(() => {
 			let e = u.value;
 			switch (r.variant) {
-				case "filled": return e ? "px-6 bg-error text-on-error enabled:hover:shadow-elevation-1 enabled:active:shadow-none" : "px-6 bg-primary text-on-primary enabled:hover:shadow-elevation-1 enabled:active:shadow-none";
-				case "tonal": return e ? "px-6 bg-error-container text-on-error-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none" : "px-6 bg-secondary-container text-on-secondary-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none";
-				case "elevated": return e ? "px-6 bg-surface-container-low text-error shadow-elevation-1 enabled:hover:shadow-elevation-2" : "px-6 bg-surface-container-low text-primary shadow-elevation-1 enabled:hover:shadow-elevation-2";
-				case "outlined": return e ? "px-6 border border-error text-error" : "px-6 border border-outline text-primary";
-				case "text": return e ? "px-3 text-error" : "px-3 text-primary";
+				case "filled": return e ? "bg-error text-on-error enabled:hover:shadow-elevation-1 enabled:active:shadow-none" : "bg-primary text-on-primary enabled:hover:shadow-elevation-1 enabled:active:shadow-none";
+				case "tonal": return e ? "bg-error-container text-on-error-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none" : "bg-secondary-container text-on-secondary-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none";
+				case "elevated": return e ? "bg-surface-container-low text-error shadow-elevation-1 enabled:hover:shadow-elevation-2" : "bg-surface-container-low text-primary shadow-elevation-1 enabled:hover:shadow-elevation-2";
+				case "outlined": return e ? "border border-error text-error" : "border border-outline text-primary";
+				case "text": return e ? "text-error" : "text-primary";
 				default: return "";
 			}
 		});
-		function f(e) {
+		function w(e) {
 			if (r.disabled || r.loading) return;
 			let t = e.currentTarget, n = t.getBoundingClientRect(), i = Math.max(n.width, n.height) * 2, a = document.createElement("span");
 			a.className = "m3-ripple", a.style.cssText = `width:${i}px;height:${i}px;top:${e.clientY - n.top - i / 2}px;left:${e.clientX - n.left - i / 2}px`, t.appendChild(a), a.addEventListener("animationend", () => a.remove(), { once: !0 });
 		}
-		return (n, r) => (y(), o(S(i.value), {
+		return (n, r) => (y(), o(C(i.value), {
 			to: t.to || void 0,
 			type: t.to ? void 0 : t.type,
 			disabled: t.disabled || t.loading,
-			class: m([W, d.value]),
+			class: m([
+				q,
+				d.value,
+				g.value,
+				b.value,
+				x.value
+			]),
 			style: h(l.value),
-			onPointerdown: f
+			onPointerdown: w
 		}, {
-			default: O(() => [t.loading ? (y(), o(U, {
+			default: k(() => [t.loading ? (y(), o(B, {
 				key: 0,
-				size: 18
-			})) : t.icon ? (y(), o(e, {
+				size: v.value
+			}, null, 8, ["size"])) : t.icon ? (y(), o(e, {
 				key: 1,
 				name: t.icon,
-				size: 20
-			}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
+				size: _.value
+			}, null, 8, ["name", "size"])) : s("", !0), S(n.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"to",
@@ -278,57 +416,16 @@ var L = ["aria-label"], R = {
 			"style"
 		]));
 	}
-}), K = "inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", q = /* @__PURE__ */ f({
-	__name: "MIconButton",
-	props: {
-		icon: {},
-		label: {},
-		variant: { default: "standard" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: 40 },
-		to: {}
-	},
-	setup(t) {
-		let n = t, r = a(() => n.to ? "RouterLink" : "button"), i = a(() => {
-			switch (n.variant) {
-				case "filled": return "bg-primary text-on-primary hover:shadow-elevation-1";
-				case "tonal": return "bg-secondary-container text-on-secondary-container hover:shadow-elevation-1";
-				case "outlined": return "border border-outline text-on-surface-variant hover:bg-on-surface/8";
-				default: return "text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12";
-			}
-		});
-		return (n, a) => (y(), o(S(r.value), {
-			to: t.to || void 0,
-			type: t.to ? void 0 : "button",
-			"aria-label": t.label || void 0,
-			disabled: t.disabled,
-			class: m([K, i.value]),
-			style: h({
-				width: `${t.size}px`,
-				height: `${t.size}px`
-			})
-		}, {
-			default: O(() => [d(e, {
-				name: t.icon,
-				size: Math.round(t.size * .55)
-			}, null, 8, ["name", "size"])]),
-			_: 1
-		}, 8, [
-			"to",
-			"type",
-			"aria-label",
-			"disabled",
-			"class",
-			"style"
-		]));
-	}
-}), J = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, Y = { class: "text-headline-small text-on-surface" }, X = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, Z = {
+}), Y = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, X = { class: "text-headline-small text-on-surface" }, Z = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, Q = {
 	key: 0,
 	class: "flex justify-end gap-2 px-6 py-4"
-}, Q = /*#__PURE__*/ t(/* @__PURE__ */ f({
+}, $ = {
+	key: 0,
+	class: "dialog-fs fixed inset-0 z-50 flex flex-col bg-surface"
+}, ee = { class: "flex h-14 shrink-0 items-center gap-2 px-2" }, te = { class: "flex-1 text-title-large font-medium text-on-surface" }, ne = {
+	key: 1,
+	class: "flex items-center gap-2"
+}, re = { class: "flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant" }, ie = /*#__PURE__*/ t(/* @__PURE__ */ f({
 	__name: "MDialog",
 	props: {
 		modelValue: { type: Boolean },
@@ -338,63 +435,85 @@ var L = ["aria-label"], R = {
 			type: Boolean,
 			default: !1
 		},
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		},
 		closeLabel: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = e, a = M(), f = t;
-		function p() {
-			n.persistent || f("update:modelValue", !1);
+		let n = e, a = N(), d = t;
+		function f() {
+			n.persistent || d("update:modelValue", !1);
 		}
-		function h(e) {
-			e.key === "Escape" && p();
+		function p(e) {
+			e.key === "Escape" && f();
 		}
-		return D(() => n.modelValue, (e) => {
-			e ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", h), document.body.style.overflow = "");
-		}), (t, n) => (y(), o(r, { to: "body" }, [d(i, { name: "m3-dialog" }, {
-			default: O(() => [e.modelValue ? (y(), c("div", {
+		return O(() => n.modelValue, (e) => {
+			e ? (document.addEventListener("keydown", p), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", p), document.body.style.overflow = "");
+		}), (t, n) => (y(), o(r, { to: "body" }, [e.fullscreen ? (y(), o(i, {
+			key: 1,
+			name: "m3-dialog-fs"
+		}, {
+			default: k(() => [e.modelValue ? (y(), c("div", $, [l("div", ee, [
+				e.persistent ? s("", !0) : (y(), o(K, {
+					key: 0,
+					icon: "close",
+					label: e.closeLabel ?? T(a).close,
+					onClick: f
+				}, null, 8, ["label"])),
+				l("h2", te, [S(t.$slots, "title", {}, () => [u(w(e.title), 1)], !0)]),
+				t.$slots.actions ? (y(), c("div", ne, [S(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
+			]), l("div", re, [S(t.$slots, "default", {}, void 0, !0)])])) : s("", !0)]),
+			_: 3
+		})) : (y(), o(i, {
+			key: 0,
+			name: "m3-dialog"
+		}, {
+			default: k(() => [e.modelValue ? (y(), c("div", {
 				key: 0,
 				class: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-				onClick: k(p, ["self"])
+				onClick: A(f, ["self"])
 			}, [l("div", { class: m(["dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3", e.maxWidth]) }, [
-				l("div", J, [l("h2", Y, [x(t.$slots, "title", {}, () => [u(C(e.title), 1)], !0)]), e.persistent ? s("", !0) : (y(), o(q, {
+				l("div", Y, [l("h2", X, [S(t.$slots, "title", {}, () => [u(w(e.title), 1)], !0)]), e.persistent ? s("", !0) : (y(), o(K, {
 					key: 0,
 					icon: "close",
-					label: e.closeLabel ?? w(a).close,
-					onClick: p
+					label: e.closeLabel ?? T(a).close,
+					onClick: f
 				}, null, 8, ["label"]))]),
-				l("div", X, [x(t.$slots, "default", {}, void 0, !0)]),
-				t.$slots.actions ? (y(), c("div", Z, [x(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
+				l("div", Z, [S(t.$slots, "default", {}, void 0, !0)]),
+				t.$slots.actions ? (y(), c("div", Q, [S(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
 			], 2)])) : s("", !0)]),
 			_: 3
-		})]));
+		}))]));
 	}
-}), [["__scopeId", "data-v-4ccfbc3c"]]), $ = { class: "flex flex-col gap-1" }, ee = [
+}), [["__scopeId", "data-v-2e3c3567"]]), ae = { class: "flex flex-col gap-1" }, oe = [
 	"id",
 	"value",
 	"rows",
 	"disabled",
 	"required"
-], te = [
+], se = [
 	"id",
 	"type",
 	"value",
 	"disabled",
 	"required",
 	"autocomplete"
-], ne = ["for"], re = {
+], ce = ["for"], le = {
 	key: 0,
 	class: "text-error"
-}, ie = {
+}, ue = {
 	key: 3,
 	class: "absolute right-2 top-1/2 -translate-y-1/2"
-}, ae = {
+}, de = {
 	key: 0,
 	class: "px-4 text-body-small text-error"
-}, oe = {
+}, fe = {
 	key: 1,
 	class: "px-4 text-body-small text-on-surface-variant"
-}, se = /* @__PURE__ */ f({
+}, pe = /* @__PURE__ */ f({
 	__name: "MTextField",
 	props: {
 		modelValue: {},
@@ -417,7 +536,7 @@ var L = ["aria-label"], R = {
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = t, i = n, o = T(), f = E(), p = b(null), { resolvedFieldBg: g } = I(p, () => r.fieldBg), _ = a(() => r.clearable && String(r.modelValue).length > 0 && !r.disabled), v = a(() => {
+		let r = t, i = n, o = E(), f = D(), p = x(null), { resolvedFieldBg: g } = W(p, () => r.fieldBg), _ = a(() => r.clearable && String(r.modelValue).length > 0 && !r.disabled), v = a(() => {
 			let e = !!f.trailing || r.clearable, t = r.leadingIcon ? "pl-12" : "pl-4", n = e ? "pr-12" : "pr-4", i = [
 				"peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent",
 				"transition-[border-color,border-width] duration-150",
@@ -435,7 +554,7 @@ var L = ["aria-label"], R = {
 				"rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2",
 				r.error ? "border-error focus:border-b-2 focus:border-error" : "border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary"
 			].join(" ");
-		}), S = a(() => {
+		}), b = a(() => {
 			let e = [
 				"pointer-events-none absolute truncate transition-all duration-200",
 				r.leadingIcon ? r.variant === "outlined" ? "left-11" : "left-12" : r.variant === "outlined" ? "left-3" : "left-4",
@@ -455,15 +574,15 @@ var L = ["aria-label"], R = {
 				r.error ? "text-error peer-focus:text-error" : "text-on-surface-variant peer-focus:text-primary"
 			].join(" ");
 		});
-		function D(e) {
+		function C(e) {
 			let t = e.target;
 			i("update:modelValue", t.value);
 		}
-		return (n, r) => (y(), c("div", $, [l("div", {
+		return (n, r) => (y(), c("div", ae, [l("div", {
 			ref_key: "fieldBgEl",
 			ref: p,
 			class: m(["relative", t.variant === "outlined" ? "mt-2" : ""]),
-			style: h(t.variant === "outlined" ? { "--field-bg": w(g) } : void 0)
+			style: h(t.variant === "outlined" ? { "--field-bg": T(g) } : void 0)
 		}, [
 			t.leadingIcon ? (y(), c("div", {
 				key: 0,
@@ -474,17 +593,17 @@ var L = ["aria-label"], R = {
 			}, null, 8, ["name"])], 2)) : s("", !0),
 			t.multiline ? (y(), c("textarea", {
 				key: 1,
-				id: w(o),
+				id: T(o),
 				value: String(t.modelValue),
 				rows: t.rows,
 				disabled: t.disabled,
 				required: t.required,
 				placeholder: " ",
 				class: m(v.value),
-				onInput: D
-			}, null, 42, ee)) : (y(), c("input", {
+				onInput: C
+			}, null, 42, oe)) : (y(), c("input", {
 				key: 2,
-				id: w(o),
+				id: T(o),
 				type: t.type,
 				value: t.modelValue,
 				disabled: t.disabled,
@@ -492,13 +611,13 @@ var L = ["aria-label"], R = {
 				autocomplete: t.autocomplete,
 				placeholder: " ",
 				class: m(v.value),
-				onInput: D
-			}, null, 42, te)),
+				onInput: C
+			}, null, 42, se)),
 			l("label", {
-				for: w(o),
-				class: m(S.value)
-			}, [u(C(t.label), 1), t.required ? (y(), c("span", re, "\xA0*")) : s("", !0)], 10, ne),
-			n.$slots.trailing ? (y(), c("div", ie, [x(n.$slots, "trailing")])) : _.value ? (y(), c("button", {
+				for: T(o),
+				class: m(b.value)
+			}, [u(w(t.label), 1), t.required ? (y(), c("span", le, "\xA0*")) : s("", !0)], 10, ce),
+			n.$slots.trailing ? (y(), c("div", ue, [S(n.$slots, "trailing")])) : _.value ? (y(), c("button", {
 				key: 4,
 				type: "button",
 				class: "absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface",
@@ -507,56 +626,56 @@ var L = ["aria-label"], R = {
 				name: "close",
 				size: 18
 			})])) : s("", !0)
-		], 6), t.error ? (y(), c("p", ae, C(t.error), 1)) : t.hint ? (y(), c("p", oe, C(t.hint), 1)) : s("", !0)]));
+		], 6), t.error ? (y(), c("p", de, w(t.error), 1)) : t.hint ? (y(), c("p", fe, w(t.hint), 1)) : s("", !0)]));
 	}
-}), ce = /* @__PURE__ */ f({
+}), me = /* @__PURE__ */ f({
 	__name: "MMenu",
 	props: { align: { default: "right" } },
 	setup(e, { expose: t }) {
-		let u = e, f = b(!1), p = b(null), m = b(null), g = b({});
-		function S() {
+		let u = e, f = x(!1), p = x(null), m = x(null), g = x({});
+		function C() {
 			if (!p.value) return;
 			let e = p.value.getBoundingClientRect(), t = window.innerHeight - e.bottom - 8, n = t < 200 && e.top > t, r = { maxHeight: `${Math.min(n ? e.top - 12 : t, 400)}px` };
 			n ? r.bottom = `${window.innerHeight - e.top + 4}px` : r.top = `${e.bottom + 4}px`, u.align === "right" ? r.right = `${window.innerWidth - e.right}px` : r.left = `${e.left}px`, g.value = r;
 		}
-		function C() {
-			f.value || S(), f.value = !f.value;
-		}
 		function w() {
+			f.value || C(), f.value = !f.value;
+		}
+		function T() {
 			f.value = !1;
 		}
-		t({
-			close: w,
+		b("m-menu-close", T), t({
+			close: T,
 			open: f
 		});
-		function T(e) {
+		function E(e) {
 			let t = e.target;
-			!p.value?.contains(t) && !m.value?.contains(t) && w();
+			p.value?.contains(t) || m.value?.contains(t) || t.closest?.(".m3-submenu") || T();
 		}
-		function E(e) {
+		function D(e) {
 			if (!f.value || m.value?.contains(e.target) || !p.value) return;
 			let t = p.value.getBoundingClientRect();
 			if (t.bottom < 0 || t.top > window.innerHeight) {
-				w();
+				T();
 				return;
 			}
-			S();
+			C();
 		}
-		function D(e) {
-			e.key === "Escape" && w();
+		function O(e) {
+			e.key === "Escape" && T();
 		}
 		_(() => {
-			document.addEventListener("mousedown", T), document.addEventListener("keydown", D), window.addEventListener("scroll", E, !0);
+			document.addEventListener("mousedown", E), document.addEventListener("keydown", O), window.addEventListener("scroll", D, !0);
 		}), v(() => {
-			document.removeEventListener("mousedown", T), document.removeEventListener("keydown", D), window.removeEventListener("scroll", E, !0);
+			document.removeEventListener("mousedown", E), document.removeEventListener("keydown", O), window.removeEventListener("scroll", D, !0);
 		});
-		let k = a(() => u.align === "right" ? "top right" : "top left");
+		let A = a(() => u.align === "right" ? "top right" : "top left");
 		return (e, t) => (y(), c(n, null, [l("div", {
 			ref_key: "triggerEl",
 			ref: p,
 			class: "inline-block",
-			onClick: C
-		}, [x(e.$slots, "trigger", { open: f.value })], 512), (y(), o(r, { to: "body" }, [d(i, {
+			onClick: w
+		}, [S(e.$slots, "trigger", { open: f.value })], 512), (y(), o(r, { to: "body" }, [d(i, {
 			"enter-active-class": "transition-[opacity,transform] duration-100 ease-out",
 			"enter-from-class": "opacity-0 scale-95",
 			"enter-to-class": "opacity-100 scale-100",
@@ -564,44 +683,117 @@ var L = ["aria-label"], R = {
 			"leave-from-class": "opacity-100 scale-100",
 			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: O(() => [f.value ? (y(), c("div", {
+			default: k(() => [f.value ? (y(), c("div", {
 				key: 0,
 				ref_key: "dropdownEl",
 				ref: m,
-				class: "fixed z-500 min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2",
+				class: "fixed z-500 min-w-48 overflow-hidden rounded-lg bg-surface-container shadow-elevation-2",
 				style: h({
 					...g.value,
-					transformOrigin: k.value
-				}),
-				onClick: w
-			}, [x(e.$slots, "default")], 4)) : s("", !0)]),
+					transformOrigin: A.value
+				})
+			}, [l("div", {
+				class: "overflow-y-auto py-1",
+				style: h({ maxHeight: g.value.maxHeight })
+			}, [S(e.$slots, "default", { close: T })], 4)], 4)) : s("", !0)]),
 			_: 3
 		})]))], 64));
 	}
-}), le = /* @__PURE__ */ f({
+}), he = { class: "flex-1" }, ge = /* @__PURE__ */ f({
 	__name: "MMenuItem",
 	props: {
 		icon: {},
-		to: {}
+		to: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		danger: {
+			type: Boolean,
+			default: !1
+		}
 	},
-	setup(t) {
-		let n = t, r = a(() => n.to ? "RouterLink" : "button");
-		return (n, i) => (y(), o(S(r.value), {
+	emits: ["click"],
+	setup(t, { emit: n }) {
+		let u = t, f = n, g = D(), _ = a(() => u.to ? "RouterLink" : "button"), v = a(() => !!g.children), b = p("m-menu-close", null);
+		function w() {
+			u.disabled || v.value || (f("click"), b?.());
+		}
+		let T = x(!1), E = x(), O = x({});
+		function A() {
+			if (!v.value || u.disabled || (T.value = !0, !E.value)) return;
+			let e = E.value.getBoundingClientRect(), t = e.right + 200 > window.innerWidth;
+			O.value = {
+				position: "fixed",
+				top: `${e.top}px`,
+				...t ? { right: `${window.innerWidth - e.left}px` } : { left: `${e.right}px` },
+				zIndex: "501"
+			};
+		}
+		function j(e) {
+			e.relatedTarget?.closest(".m3-submenu") || (T.value = !1);
+		}
+		function M(e) {
+			let t = e.relatedTarget;
+			t?.closest(".m3-submenu") || E.value?.contains(t) || (T.value = !1);
+		}
+		return (n, a) => (y(), c("div", {
+			ref_key: "itemEl",
+			ref: E,
+			onMouseenter: A,
+			onMouseleave: j
+		}, [(y(), o(C(_.value), {
 			to: t.to || void 0,
 			type: t.to ? void 0 : "button",
-			class: "flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-body-large text-on-surface hover:bg-on-surface/8"
+			class: m(["flex w-full items-center gap-3 px-4 py-2.5 text-left text-body-large transition-colors", [
+				t.disabled ? "cursor-not-allowed opacity-[0.38] text-on-surface" : "cursor-pointer",
+				!t.disabled && t.danger ? "text-error hover:bg-error/8" : "",
+				!t.disabled && !t.danger ? "text-on-surface hover:bg-on-surface/8" : ""
+			]]),
+			disabled: t.disabled || void 0,
+			onClick: w
+		}, {
+			default: k(() => [
+				t.icon ? (y(), o(e, {
+					key: 0,
+					name: t.icon,
+					size: 20,
+					class: m(["shrink-0", t.danger ? "text-error" : "text-on-surface-variant"])
+				}, null, 8, ["name", "class"])) : s("", !0),
+				l("span", he, [S(n.$slots, "default")]),
+				v.value ? (y(), o(e, {
+					key: 1,
+					name: "chevron_right",
+					size: 18,
+					class: "shrink-0 text-on-surface-variant"
+				})) : s("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"to",
+			"type",
+			"class",
+			"disabled"
+		])), v.value ? (y(), o(r, {
+			key: 0,
+			to: "body"
+		}, [d(i, {
+			"enter-active-class": "transition-opacity duration-100",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-75",
+			"leave-to-class": "opacity-0"
 		}, {
-			default: O(() => [t.icon ? (y(), o(e, {
+			default: k(() => [T.value ? (y(), c("div", {
 				key: 0,
-				name: t.icon,
-				size: 20,
-				class: "text-on-surface-variant"
-			}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
+				class: "m3-submenu min-w-44 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2",
+				style: h(O.value),
+				onMouseleave: M
+			}, [S(n.$slots, "children")], 36)) : s("", !0)]),
 			_: 3
-		}, 8, ["to", "type"]));
+		})])) : s("", !0)], 544));
 	}
 });
 //#endregion
-export { q as a, I as c, M as d, Q as i, j as l, ce as n, G as o, se as r, U as s, le as t, A as u };
+export { J as a, B as c, N as d, ie as i, M as l, me as n, K as o, pe as r, W as s, ge as t, j as u };
 
-//# sourceMappingURL=MMenuItem-C6RwHl-l.js.map
+//# sourceMappingURL=MMenuItem-FyttjOj_.js.map