@m3ui-vue/m3ui-vue 0.1.11 → 0.2.1

package/dist/{MMenuItem-_n5OG5MT.js → MMenuItem-DpoEsH91.js}

@@ -1,8 +1,87 @@
 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, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, onUnmounted as _, openBlock as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as w, useSlots as T, watch as E, withCtx as D, withModifiers as O } 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, 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";
+//#region src/composables/useLocale.ts
+var A = {
+	search: "Search...",
+	noResults: "No results",
+	close: "Close",
+	cancel: "Cancel",
+	confirm: "Confirm",
+	loading: "Loading",
+	previous: "Previous",
+	next: "Next",
+	today: "Today",
+	more: "more",
+	selectedCount: "selected",
+	recordCount: "record",
+	expand: "Expand",
+	columns: "Columns",
+	exportCsv: "Export CSV",
+	noGroup: "No group",
+	finish: "Finish",
+	dropText: "Drop files here or",
+	selectText: "browse",
+	maxSizePrefix: "Max.",
+	remove: "Remove",
+	selectDate: "Select date",
+	selectTime: "Select time",
+	selectRange: "Select range",
+	pickStart: "Select start",
+	pickEnd: "Select end",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	dayView: "Day",
+	weekView: "Week",
+	available: "Available",
+	selected: "Selected",
+	noItems: "No items",
+	moveAllRight: "Move all right",
+	moveRight: "Move selected right",
+	moveLeft: "Move selected left",
+	moveAllLeft: "Move all left",
+	searchCommand: "Search command...",
+	navigateHint: "navigate",
+	selectHint: "select",
+	openHint: "open",
+	closeHint: "close",
+	loadingMore: "Loading...",
+	noMoreItems: "No more items",
+	bold: "Bold",
+	italic: "Italic",
+	underline: "Underline",
+	strikethrough: "Strikethrough",
+	highlight: "Highlight",
+	bulletList: "Bullet list",
+	orderedList: "Ordered list",
+	blockquote: "Blockquote",
+	code: "Code",
+	alignLeft: "Align left",
+	alignCenter: "Align center",
+	alignRight: "Align right",
+	undo: "Undo",
+	redo: "Redo",
+	link: "Link",
+	image: "Image",
+	paragraph: "Paragraph",
+	heading1: "Heading 1",
+	heading2: "Heading 2",
+	heading3: "Heading 3",
+	insertLink: "Insert link",
+	insertImage: "Insert image",
+	imageUrlLabel: "Image URL",
+	insert: "Insert"
+}, j = Symbol("m3-locale");
+function M() {
+	let e = p(j, {});
+	return {
+		...A,
+		...e
+	};
+}
+//#endregion
 //#region src/composables/useFieldBg.ts
-var k = [
+var N = [
 	"bg-surface-container-highest",
 	"bg-surface-container-high",
 	"bg-surface-container-low",
@@ -23,11 +102,11 @@ var k = [
 	"bg-tertiary",
 	"bg-error"
 ];
-function A(e) {
-	for (let t of k) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
+function P(e) {
+	for (let t of N) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
 	return null;
 }
-function j(e) {
+function F(e) {
 	if (!e || e === "transparent") return !0;
 	let t = e.match(/^rgba?\(([^)]+)\)$/);
 	if (t) {
@@ -36,15 +115,15 @@ function j(e) {
 	}
 	return !1;
 }
-function M(e, t) {
-	let n = y("var(--color-surface)");
+function I(e, t) {
+	let n = b("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 = A(t);
+			let e = P(t);
 			if (e) {
 				r(e);
 				return;
@@ -54,7 +133,7 @@ function M(e, t) {
 				return;
 			}
 			let n = getComputedStyle(t).backgroundColor;
-			if (!j(n)) {
+			if (!F(n)) {
 				r(n);
 				return;
 			}
@@ -63,7 +142,7 @@ function M(e, t) {
 		r("var(--color-surface)");
 	}
 	let o = null;
-	return g(() => {
+	return _(() => {
 		i(), o = new MutationObserver(() => i()), o.observe(document.documentElement, {
 			attributes: !0,
 			attributeFilter: [
@@ -72,32 +151,33 @@ function M(e, t) {
 				"data-theme"
 			]
 		});
-	}), h(() => o?.disconnect()), { resolvedFieldBg: a(() => t() ?? n.value) };
+	}), g(() => o?.disconnect()), { resolvedFieldBg: a(() => t() ?? n.value) };
 }
 //#endregion
 //#region src/components/MSpinner.vue?vue&type=script&setup=true&lang.ts
-var N = {
+var L = ["aria-label"], R = {
 	key: 0,
 	class: "block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
-}, P = [
+}, z = [
 	"width",
 	"height",
 	"viewBox"
-], F = ["d", "stroke-dasharray"], I = 3, L = 9, R = /* @__PURE__ */ f({
+], B = ["d", "stroke-dasharray"], V = 3, H = 9, U = /* @__PURE__ */ f({
 	__name: "MSpinner",
 	props: {
 		size: { default: 20 },
 		wavy: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		label: {}
 	},
 	setup(e) {
-		let t = e, n = a(() => (t.size / 2 - 1 - I / 2) / 1.25), r = a(() => t.size / 2), i = a(() => {
-			let e = r.value, t = n.value, i = t * .08, a = L * 24, o = [], s = 0, c = 0, l = 0;
-			for (let n = 0; n <= a; n++) {
-				let r = 2 * Math.PI * n / a - Math.PI / 2, u = t + i * Math.sin(L * r), d = e + u * Math.cos(r), f = e + u * Math.sin(r);
-				n > 0 && (s += Math.sqrt((d - c) ** 2 + (f - l) ** 2)), o.push(`${n === 0 ? "M" : "L"}${d.toFixed(2)},${f.toFixed(2)}`), c = d, l = f;
+		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;
 			}
 			let u = s * .58, d = s - u, f = `${u.toFixed(1)} ${d.toFixed(1)}`;
 			return {
@@ -106,33 +186,33 @@ var N = {
 				len: s.toFixed(1)
 			};
 		});
-		return (t, n) => (v(), c("span", {
+		return (t, r) => (y(), c("span", {
 			class: "inline-flex shrink-0 items-center justify-center",
-			style: m({
+			style: h({
 				width: `${e.size}px`,
 				height: `${e.size}px`
 			}),
 			role: "status",
-			"aria-label": "Cargando"
-		}, [e.wavy ? (v(), c("svg", {
+			"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: m(`transform-origin: ${r.value}px ${r.value}px`)
+			style: h(`transform-origin: ${i.value}px ${i.value}px`)
 		}, [l("path", {
-			d: i.value.path,
+			d: o.value.path,
 			stroke: "currentColor",
-			"stroke-width": I,
+			"stroke-width": V,
 			"stroke-linecap": "round",
-			"stroke-dasharray": i.value.dash,
+			"stroke-dasharray": o.value.dash,
 			class: "animate-[m3-wavy-travel_2s_linear_infinite]",
-			style: m({ "--m3-wave-len": i.value.len })
-		}, null, 12, F)], 12, P)) : (v(), c("span", N))], 4));
+			style: h({ "--m3-wave-len": o.value.len })
+		}, null, 12, B)], 12, z)) : (y(), c("span", R))], 12, L));
 	}
-}), z = "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]", B = /* @__PURE__ */ f({
+}), 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({
 	__name: "MButton",
 	props: {
 		variant: { default: "filled" },
@@ -173,22 +253,22 @@ var N = {
 			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) => (v(), o(x(i.value), {
+		return (n, r) => (y(), o(S(i.value), {
 			to: t.to || void 0,
 			type: t.to ? void 0 : t.type,
 			disabled: t.disabled || t.loading,
-			class: p([z, d.value]),
-			style: m(l.value),
+			class: m([W, d.value]),
+			style: h(l.value),
 			onPointerdown: f
 		}, {
-			default: D(() => [t.loading ? (v(), o(R, {
+			default: O(() => [t.loading ? (y(), o(U, {
 				key: 0,
 				size: 18
-			})) : t.icon ? (v(), o(e, {
+			})) : t.icon ? (y(), o(e, {
 				key: 1,
 				name: t.icon,
 				size: 20
-			}, null, 8, ["name"])) : s("", !0), b(n.$slots, "default")]),
+			}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"to",
@@ -198,7 +278,7 @@ var N = {
 			"style"
 		]));
 	}
-}), V = "inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", H = /* @__PURE__ */ f({
+}), 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: {},
@@ -220,18 +300,18 @@ var N = {
 				default: return "text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12";
 			}
 		});
-		return (n, a) => (v(), o(x(r.value), {
+		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: p([V, i.value]),
-			style: m({
+			class: m([K, i.value]),
+			style: h({
 				width: `${t.size}px`,
 				height: `${t.size}px`
 			})
 		}, {
-			default: D(() => [d(e, {
+			default: O(() => [d(e, {
 				name: t.icon,
 				size: Math.round(t.size * .55)
 			}, null, 8, ["name", "size"])]),
@@ -245,10 +325,10 @@ var N = {
 			"style"
 		]));
 	}
-}), U = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, W = { class: "text-headline-small text-on-surface" }, G = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, K = {
+}), 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 = {
 	key: 0,
 	class: "flex justify-end gap-2 px-6 py-4"
-}, q = /*#__PURE__*/ t(/* @__PURE__ */ f({
+}, Q = /*#__PURE__*/ t(/* @__PURE__ */ f({
 	__name: "MDialog",
 	props: {
 		modelValue: { type: Boolean },
@@ -257,66 +337,61 @@ var N = {
 		persistent: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		closeLabel: {}
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = e, a = t;
-		function f() {
-			n.persistent || a("update:modelValue", !1);
+		let n = e, a = M(), f = t;
+		function p() {
+			n.persistent || f("update:modelValue", !1);
 		}
-		function m(e) {
-			e.key === "Escape" && f();
+		function h(e) {
+			e.key === "Escape" && p();
 		}
-		return E(() => n.modelValue, (e) => {
-			e ? (document.addEventListener("keydown", m), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", m), document.body.style.overflow = "");
-		}), (t, n) => (v(), o(r, { to: "body" }, [d(i, { name: "m3-dialog" }, {
-			default: D(() => [e.modelValue ? (v(), c("div", {
+		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", {
 				key: 0,
 				class: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-				onClick: O(f, ["self"])
-			}, [l("div", { class: p(["dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3", e.maxWidth]) }, [
-				l("div", U, [l("h2", W, [b(t.$slots, "title", {}, () => [u(S(e.title), 1)], !0)]), e.persistent ? s("", !0) : (v(), o(H, {
+				onClick: k(p, ["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, {
 					key: 0,
 					icon: "close",
-					label: "Cerrar",
-					onClick: f
-				}))]),
-				l("div", G, [b(t.$slots, "default", {}, void 0, !0)]),
-				t.$slots.actions ? (v(), c("div", K, [b(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
+					label: e.closeLabel ?? w(a).close,
+					onClick: p
+				}, 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)
 			], 2)])) : s("", !0)]),
 			_: 3
 		})]));
 	}
-}), [["__scopeId", "data-v-e7dfca29"]]), J = { class: "flex flex-col gap-1" }, Y = {
-	key: 0,
-	class: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
-}, X = [
+}), [["__scopeId", "data-v-4ccfbc3c"]]), $ = { class: "flex flex-col gap-1" }, ee = [
 	"id",
 	"value",
 	"rows",
 	"disabled",
 	"required"
-], Z = [
+], te = [
 	"id",
 	"type",
 	"value",
 	"disabled",
 	"required",
 	"autocomplete"
-], Q = ["for"], $ = {
+], ne = ["for"], re = {
 	key: 0,
 	class: "text-error"
-}, ee = {
-	key: 3,
-	class: "absolute top-1/2 right-2 -translate-y-1/2"
-}, te = {
+}, ie = {
 	key: 0,
 	class: "px-4 text-body-small text-error"
-}, ne = {
+}, ae = {
 	key: 1,
 	class: "px-4 text-body-small text-on-surface-variant"
-}, re = /* @__PURE__ */ f({
+}, oe = /* @__PURE__ */ f({
 	__name: "MTextField",
 	props: {
 		modelValue: {},
@@ -331,12 +406,16 @@ var N = {
 		rows: { default: 3 },
 		autocomplete: {},
 		leadingIcon: {},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
 		fieldBg: {}
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = t, i = n, o = w(), f = T(), h = y(null), { resolvedFieldBg: g } = M(h, () => r.fieldBg), _ = a(() => {
-			let e = !!f.trailing, t = r.leadingIcon ? "pl-12" : "pl-4", n = e ? "pr-12" : "pr-4", i = [
+		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 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",
 				"disabled:cursor-not-allowed disabled:opacity-[0.38]",
@@ -353,12 +432,12 @@ var N = {
 				"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(" ");
-		}), x = a(() => {
+		}), S = 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",
 				"right-4",
-				"top-1/2 -translate-y-1/2 text-body-large"
+				`${r.variant === "filled" ? "top-[53%]" : "top-1/2"} -translate-y-1/2 text-body-large`
 			];
 			return r.variant === "outlined" ? [
 				...e,
@@ -373,58 +452,72 @@ var N = {
 				r.error ? "text-error peer-focus:text-error" : "text-on-surface-variant peer-focus:text-primary"
 			].join(" ");
 		});
-		function E(e) {
+		function D(e) {
 			let t = e.target;
 			i("update:modelValue", t.value);
 		}
-		return (n, r) => (v(), c("div", J, [l("div", {
+		return (n, r) => (y(), c("div", $, [l("div", {
 			ref_key: "fieldBgEl",
-			ref: h,
-			class: p(["relative", t.variant === "outlined" ? "mt-2" : ""]),
-			style: m(t.variant === "outlined" ? { "--field-bg": C(g) } : void 0)
+			ref: p,
+			class: m(["relative", t.variant === "outlined" ? "mt-2" : ""]),
+			style: h(t.variant === "outlined" ? { "--field-bg": w(g) } : void 0)
 		}, [
-			t.leadingIcon ? (v(), c("div", Y, [d(e, {
+			t.leadingIcon ? (y(), c("div", {
+				key: 0,
+				class: m(["pointer-events-none absolute left-3.5 text-on-surface-variant", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"])
+			}, [d(e, {
 				name: t.leadingIcon,
 				size: 20
-			}, null, 8, ["name"])])) : s("", !0),
-			t.multiline ? (v(), c("textarea", {
+			}, null, 8, ["name"])], 2)) : s("", !0),
+			t.multiline ? (y(), c("textarea", {
 				key: 1,
-				id: C(o),
+				id: w(o),
 				value: String(t.modelValue),
 				rows: t.rows,
 				disabled: t.disabled,
 				required: t.required,
 				placeholder: " ",
-				class: p(_.value),
-				onInput: E
-			}, null, 42, X)) : (v(), c("input", {
+				class: m(v.value),
+				onInput: D
+			}, null, 42, ee)) : (y(), c("input", {
 				key: 2,
-				id: C(o),
+				id: w(o),
 				type: t.type,
 				value: t.modelValue,
 				disabled: t.disabled,
 				required: t.required,
 				autocomplete: t.autocomplete,
 				placeholder: " ",
-				class: p(_.value),
-				onInput: E
-			}, null, 42, Z)),
+				class: m(v.value),
+				onInput: D
+			}, null, 42, te)),
 			l("label", {
-				for: C(o),
-				class: p(x.value)
-			}, [u(S(t.label), 1), t.required ? (v(), c("span", $, "\xA0*")) : s("", !0)], 10, Q),
-			n.$slots.trailing ? (v(), c("div", ee, [b(n.$slots, "trailing")])) : s("", !0)
-		], 6), t.error ? (v(), c("p", te, S(t.error), 1)) : t.hint ? (v(), c("p", ne, S(t.hint), 1)) : s("", !0)]));
+				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", {
+				key: 3,
+				class: m(["absolute right-2", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"])
+			}, [x(n.$slots, "trailing")], 2)) : _.value ? (y(), c("button", {
+				key: 4,
+				type: "button",
+				class: m(["absolute right-3 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", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"]),
+				onClick: r[0] ||= (e) => i("update:modelValue", "")
+			}, [d(e, {
+				name: "close",
+				size: 18
+			})], 2)) : s("", !0)
+		], 6), t.error ? (y(), c("p", ie, C(t.error), 1)) : t.hint ? (y(), c("p", ae, C(t.hint), 1)) : s("", !0)]));
 	}
-}), ie = /* @__PURE__ */ f({
+}), se = /* @__PURE__ */ f({
 	__name: "MMenu",
 	props: { align: { default: "right" } },
 	setup(e, { expose: t }) {
-		let u = e, f = y(!1), p = y(null), h = y(null), x = y({});
+		let u = e, f = b(!1), p = b(null), m = b(null), g = b({});
 		function S() {
 			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`, x.value = r;
+			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;
@@ -438,10 +531,10 @@ var N = {
 		});
 		function T(e) {
 			let t = e.target;
-			!p.value?.contains(t) && !h.value?.contains(t) && w();
+			!p.value?.contains(t) && !m.value?.contains(t) && w();
 		}
 		function E(e) {
-			if (!f.value || h.value?.contains(e.target) || !p.value) return;
+			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();
@@ -449,21 +542,21 @@ var N = {
 			}
 			S();
 		}
-		function O(e) {
+		function D(e) {
 			e.key === "Escape" && w();
 		}
-		g(() => {
-			document.addEventListener("mousedown", T), document.addEventListener("keydown", O), window.addEventListener("scroll", E, !0);
-		}), _(() => {
-			document.removeEventListener("mousedown", T), document.removeEventListener("keydown", O), window.removeEventListener("scroll", E, !0);
+		_(() => {
+			document.addEventListener("mousedown", T), document.addEventListener("keydown", D), window.addEventListener("scroll", E, !0);
+		}), v(() => {
+			document.removeEventListener("mousedown", T), document.removeEventListener("keydown", D), window.removeEventListener("scroll", E, !0);
 		});
 		let k = a(() => u.align === "right" ? "top right" : "top left");
-		return (e, t) => (v(), c(n, null, [l("div", {
+		return (e, t) => (y(), c(n, null, [l("div", {
 			ref_key: "triggerEl",
 			ref: p,
 			class: "inline-block",
 			onClick: C
-		}, [b(e.$slots, "trigger", { open: f.value })], 512), (v(), o(r, { to: "body" }, [d(i, {
+		}, [x(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",
@@ -471,21 +564,21 @@ var N = {
 			"leave-from-class": "opacity-100 scale-100",
 			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: D(() => [f.value ? (v(), c("div", {
+			default: O(() => [f.value ? (y(), c("div", {
 				key: 0,
 				ref_key: "dropdownEl",
-				ref: h,
+				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",
-				style: m({
-					...x.value,
+				style: h({
+					...g.value,
 					transformOrigin: k.value
 				}),
 				onClick: w
-			}, [b(e.$slots, "default")], 4)) : s("", !0)]),
+			}, [x(e.$slots, "default")], 4)) : s("", !0)]),
 			_: 3
 		})]))], 64));
 	}
-}), ae = /* @__PURE__ */ f({
+}), ce = /* @__PURE__ */ f({
 	__name: "MMenuItem",
 	props: {
 		icon: {},
@@ -493,22 +586,22 @@ var N = {
 	},
 	setup(t) {
 		let n = t, r = a(() => n.to ? "RouterLink" : "button");
-		return (n, i) => (v(), o(x(r.value), {
+		return (n, i) => (y(), o(S(r.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"
 		}, {
-			default: D(() => [t.icon ? (v(), o(e, {
+			default: O(() => [t.icon ? (y(), o(e, {
 				key: 0,
 				name: t.icon,
 				size: 20,
 				class: "text-on-surface-variant"
-			}, null, 8, ["name"])) : s("", !0), b(n.$slots, "default")]),
+			}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
 			_: 3
 		}, 8, ["to", "type"]));
 	}
 });
 //#endregion
-export { H as a, M as c, q as i, ie as n, B as o, re as r, R as s, ae as t };
+export { q as a, I as c, M as d, Q as i, j as l, se as n, G as o, oe as r, U as s, ce as t, A as u };
 
-//# sourceMappingURL=MMenuItem-_n5OG5MT.js.map
+//# sourceMappingURL=MMenuItem-DpoEsH91.js.map