morya-ui 0.3.0 → 0.3.2

package/dist/tree/index.js

@@ -1,13 +1,13 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { a as t, t as n } from "../Icon-lcN1rS87.js";
+import { a as t, t as n } from "../Icon-od9Ob-Ay.js";
 import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as i } from "../Checkbox-BzbAUfyZ.js";
-import { a, c as ee, n as o, o as s, s as c, t as l } from "../checkStrategy-CZzuUKDI.js";
-import { n as te } from "../locale-Bzm2nbEp.js";
+import { a, c as ee, d as o, f as s, i as c, l, o as u, p as d, r as te, s as ne, t as f } from "../treeQuery-CnHkyYOA.js";
+import { n as re } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, defineComponent as _, inject as v, mergeProps as y, nextTick as ne, normalizeClass as b, openBlock as x, provide as S, reactive as C, ref as w, renderList as T, renderSlot as re, resolveDynamicComponent as ie, toDisplayString as E, unref as D, useAttrs as O, useSlots as ae, watch as k, withModifiers as A } from "vue";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, defineComponent as b, inject as x, mergeProps as S, nextTick as C, normalizeClass as w, openBlock as T, provide as E, reactive as D, ref as O, renderList as ie, renderSlot as ae, resolveDynamicComponent as oe, toDisplayString as k, unref as A, useAttrs as se, useSlots as ce, watch as j, withModifiers as M } from "vue";
 //#region src/components/Tree/context.ts
-var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
+var le = Symbol("m-tree"), ue = Symbol("m-tree-node-slot"), N = [
 	"aria-expanded",
 	"aria-disabled",
 	"aria-level",
@@ -23,101 +23,101 @@ var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
 	key: 3,
 	class: "m-tree__icon",
 	"aria-hidden": "true"
-}, R = ["disabled"], oe = {
+}, R = ["disabled"], z = {
 	key: 0,
 	class: "m-tree__children",
 	role: "group"
-}, se = /* @__PURE__ */ _({
+}, B = /* @__PURE__ */ b({
 	__name: "TreeNodeItem",
 	props: {
 		node: {},
 		depth: { default: 1 }
 	},
 	setup(e) {
-		let r = e, a = v(j), ee = v(M, void 0), o = te(), s = d(() => a.isExpanded(r.node.key)), c = d(() => a.isSelected(r.node.key)), l = d(() => a.isChecked(r.node.key)), _ = d(() => a.isIndeterminate(r.node.key)), y = d(() => a.isDisabled(r.node)), ne = d(() => a.isMatch(r.node)), S = d(() => !!a.loadingKeys[r.node.key]), C = d(() => a.hasChildren(r.node)), w = d(() => {
+		let r = e, a = x(le), ee = x(ue, void 0), o = re(), s = m(() => a.isExpanded(r.node.key)), c = m(() => a.isSelected(r.node.key)), l = m(() => a.isChecked(r.node.key)), u = m(() => a.isIndeterminate(r.node.key)), d = m(() => a.isDisabled(r.node)), te = m(() => a.isMatch(r.node)), ne = m(() => !!a.loadingKeys[r.node.key]), f = m(() => a.hasChildren(r.node)), b = m(() => {
 			if (r.node.icon && t(r.node.icon)) return r.node.icon;
-		}), re = d(() => r.node.children ?? a.loadedChildren[r.node.key] ?? []), O = d(() => ee?.({
+		}), S = m(() => r.node.children ?? a.loadedChildren[r.node.key] ?? []), C = m(() => ee?.({
 			node: r.node,
 			data: r.node
 		}));
-		return (t, r) => (x(), m("li", {
-			class: b(["m-tree__node", { "m-tree__node--active": D(a).activeKey.value === e.node.key }]),
+		return (t, r) => (T(), _("li", {
+			class: w(["m-tree__node", { "m-tree__node--active": A(a).activeKey.value === e.node.key }]),
 			role: "treeitem",
-			"aria-expanded": C.value ? s.value : void 0,
-			"aria-disabled": y.value || void 0,
+			"aria-expanded": f.value ? s.value : void 0,
+			"aria-disabled": d.value || void 0,
 			"aria-level": e.depth,
 			"aria-selected": c.value,
-			"aria-checked": D(a).showCheckbox ? l.value : void 0,
-			tabindex: D(a).tabindexForKey(e.node.key),
+			"aria-checked": A(a).showCheckbox ? l.value : void 0,
+			tabindex: A(a).tabindexForKey(e.node.key),
 			"data-m-tree-key": e.node.key,
-			onFocus: r[8] ||= (t) => D(a).setActiveKey(e.node.key)
-		}, [h("div", {
-			class: b(["m-tree__row", {
+			onFocus: r[8] ||= (t) => A(a).setActiveKey(e.node.key)
+		}, [v("div", {
+			class: w(["m-tree__row", {
 				"m-tree__row--selected": c.value,
-				"m-tree__row--disabled": y.value,
-				"m-tree__row--matched": ne.value,
-				"m-tree__row--indeterminate": _.value
+				"m-tree__row--disabled": d.value,
+				"m-tree__row--matched": te.value,
+				"m-tree__row--indeterminate": u.value
 			}]),
-			draggable: D(a).draggable && !y.value,
-			onDragstart: r[4] ||= (t) => D(a).onDragStart(e.node, t),
-			onDragover: r[5] ||= (t) => D(a).onDragOver(e.node, t),
-			onDrop: r[6] ||= (t) => D(a).onDrop(e.node, t),
-			onDragend: r[7] ||= (e) => D(a).onDragEnd()
+			draggable: A(a).draggable && !d.value,
+			onDragstart: r[4] ||= (t) => A(a).onDragStart(e.node, t),
+			onDragover: r[5] ||= (t) => A(a).onDragOver(e.node, t),
+			onDrop: r[6] ||= (t) => A(a).onDrop(e.node, t),
+			onDragend: r[7] ||= (e) => A(a).onDragEnd()
 		}, [
-			C.value ? (x(), m("button", {
+			f.value ? (T(), _("button", {
 				key: 0,
 				type: "button",
 				class: "m-tree__toggler",
 				tabindex: "-1",
-				"aria-label": s.value ? D(o).collapse : D(o).expand,
-				disabled: y.value,
-				onClick: r[0] ||= (t) => D(a).toggleExpand(e.node)
-			}, [S.value ? (x(), f(n, {
+				"aria-label": s.value ? A(o).collapse : A(o).expand,
+				disabled: d.value,
+				onClick: r[0] ||= (t) => A(a).toggleExpand(e.node)
+			}, [ne.value ? (T(), h(n, {
 				key: 0,
 				name: "loader",
 				size: "sm"
-			})) : (x(), f(n, {
+			})) : (T(), h(n, {
 				key: 1,
 				name: s.value ? "chevron-down" : "chevron-right",
 				size: "sm"
-			}, null, 8, ["name"]))], 8, F)) : (x(), m("span", I)),
-			D(a).showCheckbox ? (x(), f(i, {
+			}, null, 8, ["name"]))], 8, F)) : (T(), _("span", I)),
+			A(a).showCheckbox ? (T(), h(i, {
 				key: 2,
 				class: "m-tree__checkbox",
 				tabindex: "-1",
 				"model-value": l.value,
-				indeterminate: _.value,
-				disabled: y.value,
-				"onUpdate:modelValue": r[1] ||= (t) => D(a).toggleCheck(e.node),
-				onClick: r[2] ||= A(() => {}, ["stop"])
+				indeterminate: u.value,
+				disabled: d.value,
+				"onUpdate:modelValue": r[1] ||= (t) => A(a).toggleCheck(e.node),
+				onClick: r[2] ||= M(() => {}, ["stop"])
 			}, null, 8, [
 				"model-value",
 				"indeterminate",
 				"disabled"
-			])) : p("", !0),
-			w.value || e.node.icon ? (x(), m("span", L, [w.value ? (x(), f(n, {
+			])) : g("", !0),
+			b.value || e.node.icon ? (T(), _("span", L, [b.value ? (T(), h(n, {
 				key: 0,
-				name: w.value,
+				name: b.value,
 				size: "sm"
-			}, null, 8, ["name"])) : (x(), m(u, { key: 1 }, [g(E(e.node.icon), 1)], 64))])) : p("", !0),
-			h("button", {
+			}, null, 8, ["name"])) : (T(), _(p, { key: 1 }, [y(k(e.node.icon), 1)], 64))])) : g("", !0),
+			v("button", {
 				type: "button",
 				class: "m-tree__label",
 				tabindex: "-1",
-				disabled: y.value,
-				onClick: r[3] ||= (t) => D(a).select(e.node)
-			}, [O.value ? (x(), f(ie({ render: () => O.value }), { key: 0 })) : (x(), m(u, { key: 1 }, [g(E(e.node.label), 1)], 64))], 8, R)
-		], 42, P), C.value && s.value ? (x(), m("ul", oe, [(x(!0), m(u, null, T(re.value, (t) => (x(), f(se, {
+				disabled: d.value,
+				onClick: r[3] ||= (t) => A(a).select(e.node)
+			}, [C.value ? (T(), h(oe({ render: () => C.value }), { key: 0 })) : (T(), _(p, { key: 1 }, [y(k(e.node.label), 1)], 64))], 8, R)
+		], 42, P), f.value && s.value ? (T(), _("ul", z, [(T(!0), _(p, null, ie(S.value, (t) => (T(), h(B, {
 			key: t.key,
 			node: t,
 			depth: e.depth + 1
-		}, null, 8, ["node", "depth"]))), 128))])) : p("", !0)], 42, N));
+		}, null, 8, ["node", "depth"]))), 128))])) : g("", !0)], 42, N));
 	}
-}), ce = {
+}), de = {
 	key: 1,
 	class: "m-tree__message",
 	role: "status"
-}, le = { class: "m-tree__empty-text" }, z = /* @__PURE__ */ _({
+}, fe = { class: "m-tree__empty-text" }, V = /* @__PURE__ */ b({
 	inheritAttrs: !1,
 	__name: "Tree",
 	props: {
@@ -172,91 +172,77 @@ var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
 		"node-drop"
 	],
 	setup(t, { emit: n }) {
-		let i = t, p = n, g = O(), { rootAttrs: _ } = e(g, () => i.pt), v = ae(), b = te();
-		S(M, v.default);
-		let ie = d(() => i.emptyMessage ?? b.value.emptyMessage), A = w({}), N = C({}), P = C({}), F = C({}), I = C({}), L = w(null), R = w(null), oe = d(() => l(i.value)), z = d(() => i.checkStrategy ?? "all");
-		k(() => [
+		let i = t, g = n, y = se(), { rootAttrs: b } = e(y, () => i.pt), x = ce(), w = re();
+		E(ue, x.default);
+		let oe = m(() => i.emptyMessage ?? w.value.emptyMessage), M = O({}), N = D({}), P = D({}), F = D({}), I = D({}), L = O(null), R = O(null), z = m(() => ne(i.value)), V = m(() => i.checkStrategy ?? "all");
+		j(() => [
 			i.value,
 			i.defaultExpandAll,
 			i.expandedKeys
 		], () => {
 			if (i.expandedKeys) {
-				A.value = { ...i.expandedKeys };
+				M.value = { ...i.expandedKeys };
 				return;
 			}
-			if (i.defaultExpandAll) {
-				let e = {};
-				ee(i.value, (t) => {
-					t.children?.length && (e[t.key] = !0);
-				}), A.value = e;
-			}
-		}, { immediate: !0 }), k(() => i.expandedKeys, (e) => {
-			e && (A.value = { ...e });
+			i.defaultExpandAll && (M.value = f(i.value));
+		}, { immediate: !0 }), j(() => i.expandedKeys, (e) => {
+			e && (M.value = { ...e });
 		});
-		let B = d(() => i.selectionMode === "single" && i.modelValue ? { [i.modelValue]: !0 } : i.selectionKeys ?? {}), V = d(() => o(i.value, i.checkedKeys ?? {}, z.value, i.checkStrictly));
-		function H(e, t) {
-			return t.label.toLowerCase().includes(e.toLowerCase());
-		}
-		function U(e) {
-			let t = i.filter?.trim();
-			return !t || (i.filterNode ?? H)(t, e) ? !0 : (e.children ?? []).some((e) => U(e));
+		let H = m(() => i.selectionMode === "single" && i.modelValue ? { [i.modelValue]: !0 } : i.selectionKeys ?? {}), U = m(() => ee(i.value, i.checkedKeys ?? {}, V.value, i.checkStrictly)), W = m(() => i.filterNode ?? c);
+		function pe(e) {
+			return u(e, i.filter ?? "", W.value);
 		}
-		let W = d(() => i.filter?.trim() ? i.value.filter((e) => U(e)) : i.value), ue = d(() => !!i.filter?.trim() && W.value.length === 0);
-		function G(e) {
+		let G = m(() => te(i.value, i.filter ?? "", W.value)), me = m(() => !!i.filter?.trim() && G.value.length === 0);
+		function K(e) {
 			if (i.filter?.trim()) {
-				let t = de(i.value, e);
-				if (t && (t.children ?? []).some((e) => U(e))) return !0;
+				let t = l(i.value, e);
+				if (t && (t.children ?? []).some((e) => pe(e))) return !0;
 			}
-			return !!A.value[e];
+			return !!M.value[e];
 		}
-		function de(e, t) {
-			for (let n of e) {
-				if (n.key === t) return n;
-				let e = de(n.children ?? [], t);
-				if (e) return e;
-			}
-			return null;
-		}
-		function fe(e) {
-			return !!B.value[e];
+		function he(e) {
+			return !!H.value[e];
 		}
-		function K(e) {
-			return !!V.value[e];
+		function q(e) {
+			return !!U.value[e];
 		}
-		function pe(e) {
+		function ge(e) {
 			if (i.checkStrictly || !i.showCheckbox) return !1;
-			let t = oe.value.get(e) ?? [];
+			let t = z.value.get(e) ?? [];
 			if (!t.length) return !1;
 			let n = 0, r = !1;
-			for (let e of t) K(e.key) && (n += 1), pe(e.key) && (r = !0);
+			for (let e of t) q(e.key) && (n += 1), ge(e.key) && (r = !0);
 			return r ? !0 : n > 0 && n < t.length;
 		}
-		function q(e) {
+		function J(e) {
 			return !!e.disabled;
 		}
-		function me(e) {
+		function _e(e) {
 			return e.isLeaf ? !0 : i.lazy ? !e.children?.length && !P[e.key]?.length && !N[e.key] : !e.children?.length && !P[e.key]?.length;
 		}
-		function J(e) {
+		function Y(e) {
 			return e.children?.length || P[e.key]?.length ? !0 : i.lazy && !e.isLeaf && !F[e.key];
 		}
-		function he(e) {
+		function ve(e) {
 			return e.children ?? P[e.key] ?? [];
 		}
-		function ge(e) {
+		function ye(e) {
 			let t = i.filter?.trim();
-			return t ? (i.filterNode ?? H)(t, e) : !1;
+			return t ? W.value(t, e) : !1;
 		}
-		async function Y(e) {
-			if (q(e)) return;
-			let t = G(e.key), n = { ...A.value };
-			if (t) delete n[e.key], p("node-collapse", e);
-			else if (i.accordion && (n = {}), n[e.key] = !0, p("node-expand", e), i.lazy && i.load && !e.children?.length && !F[e.key] && !e.isLeaf) {
+		async function X(e) {
+			if (J(e)) return;
+			let t = K(e.key), n = a(M.value, e.key, {
+				open: t,
+				accordion: i.accordion
+			});
+			if (t) g("node-collapse", e);
+			else if (g("node-expand", e), i.lazy && i.load && !e.children?.length && !F[e.key] && !e.isLeaf) {
 				N[e.key] = !0, delete I[e.key];
 				try {
 					P[e.key] = await i.load(e), F[e.key] = !0;
 				} catch (t) {
-					I[e.key] = !0, delete n[e.key], p("node-load-error", {
+					I[e.key] = !0, n = { ...n }, delete n[e.key], g("node-load-error", {
 						node: e,
 						error: t
 					});
@@ -264,82 +250,82 @@ var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
 					N[e.key] = !1;
 				}
 			}
-			A.value = n, p("update:expandedKeys", n);
+			M.value = n, g("update:expandedKeys", n);
 		}
-		function _e(e) {
-			if (q(e)) return;
+		function be(e) {
+			if (J(e)) return;
 			if (i.selectionMode === "single") {
-				let t = fe(e.key) ? null : e.key;
-				p("update:modelValue", t), p("update:selectionKeys", t ? { [t]: !0 } : {}), p(t ? "node-select" : "node-unselect", e);
+				let t = he(e.key) ? null : e.key;
+				g("update:modelValue", t), g("update:selectionKeys", t ? { [t]: !0 } : {}), g(t ? "node-select" : "node-unselect", e);
 				return;
 			}
-			let t = { ...B.value };
-			t[e.key] ? (delete t[e.key], p("node-unselect", e)) : (t[e.key] = !0, p("node-select", e)), p("update:selectionKeys", t);
+			let t = { ...H.value };
+			t[e.key] ? (delete t[e.key], g("node-unselect", e)) : (t[e.key] = !0, g("node-select", e)), g("update:selectionKeys", t);
 		}
-		function ve(e) {
-			if (q(e)) return;
-			let t = { ...V.value }, n = !K(e.key);
-			i.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (s(e, n, t), c(i.value, t));
-			let r = a(i.value, t, z.value, i.checkStrictly);
-			p("update:checkedKeys", r), p("check", {
+		function xe(e) {
+			if (J(e)) return;
+			let t = { ...U.value }, n = !q(e.key);
+			i.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (s(e, n, t), d(i.value, t));
+			let r = o(i.value, t, V.value, i.checkStrictly);
+			g("update:checkedKeys", r), g("check", {
 				node: e,
 				checkedKeys: r
 			});
 		}
-		function ye(e, t) {
-			if (!i.draggable || q(e)) {
+		function Se(e, t) {
+			if (!i.draggable || J(e)) {
 				t.preventDefault();
 				return;
 			}
 			L.value = e.key, t.dataTransfer?.setData("text/plain", e.key), t.dataTransfer.effectAllowed = "move";
 		}
-		function be(e, t) {
+		function Ce(e, t) {
 			!i.draggable || !L.value || L.value === e.key || (t.preventDefault(), t.dataTransfer.dropEffect = "move");
 		}
-		function xe(e, t) {
+		function we(e, t) {
 			if (!i.draggable || !L.value || L.value === e.key) return;
 			t.preventDefault();
 			let n = t.currentTarget.getBoundingClientRect(), r = t.clientY - n.top, a = "inside";
-			r < n.height * .25 ? a = "before" : r > n.height * .75 && (a = "after"), p("node-drop", {
+			r < n.height * .25 ? a = "before" : r > n.height * .75 && (a = "after"), g("node-drop", {
 				dragKey: L.value,
 				dropKey: e.key,
 				position: a
 			}), L.value = null;
 		}
-		function Se() {
+		function Te() {
 			L.value = null;
 		}
-		let X = d(() => {
+		let Z = m(() => {
 			let e = [], t = (n, r) => {
 				for (let i of n) e.push({
 					node: i,
 					parentKey: r
-				}), G(i.key) && t(he(i), i.key);
+				}), K(i.key) && t(ve(i), i.key);
 			};
-			return t(W.value, null), e;
-		}), Z = r({
-			itemCount: () => X.value.length,
-			isItemDisabled: (e) => !!X.value[e]?.node.disabled,
+			return t(G.value, null), e;
+		}), Q = r({
+			itemCount: () => Z.value.length,
+			isItemDisabled: (e) => !!Z.value[e]?.node.disabled,
 			onActivate: (e, t) => {
-				let n = X.value[e];
-				n && (t.key === " " && i.showCheckbox ? ve(n.node) : _e(n.node));
+				let n = Z.value[e];
+				n && (t.key === " " && i.showCheckbox ? xe(n.node) : be(n.node));
 			}
-		}), Q = d(() => X.value[Z.activeIndex.value]?.node.key ?? null);
-		function Ce(e) {
-			if (Q.value === e) return 0;
-			if (Z.activeIndex.value < 0) {
-				let t = X.value.findIndex((e) => !e.node.disabled);
-				if (t >= 0 && X.value[t].node.key === e) return 0;
+		}), $ = m(() => Z.value[Q.activeIndex.value]?.node.key ?? null);
+		function Ee(e) {
+			if ($.value === e) return 0;
+			if (Q.activeIndex.value < 0) {
+				let t = Z.value.findIndex((e) => !e.node.disabled);
+				if (t >= 0 && Z.value[t].node.key === e) return 0;
 			}
 			return -1;
 		}
-		function we(e) {
-			let t = X.value.findIndex((t) => t.node.key === e);
-			t >= 0 && Z.setActive(t);
+		function De(e) {
+			let t = Z.value.findIndex((t) => t.node.key === e);
+			t >= 0 && Q.setActive(t);
 		}
-		k(Z.activeIndex, () => {
-			ne(() => {
-				let e = Q.value;
+		j(Q.activeIndex, () => {
+			C(() => {
+				let e = $.value;
 				if (e == null || !R.value) return;
 				let t = R.value.querySelectorAll("[data-m-tree-key]");
 				for (let n of t) if (n.dataset.mTreeKey === e) {
@@ -348,33 +334,33 @@ var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
 				}
 			});
 		});
-		function $(e) {
-			let t = Z.activeIndex.value, n = X.value[t];
+		function Oe(e) {
+			let t = Q.activeIndex.value, n = Z.value[t];
 			if (e.key === "ArrowRight") {
 				if (e.preventDefault(), !n) return;
-				J(n.node) && (G(n.node.key) ? Z.setActive(t + 1) : Y(n.node));
+				Y(n.node) && (K(n.node.key) ? Q.setActive(t + 1) : X(n.node));
 				return;
 			}
 			if (e.key === "ArrowLeft") {
 				if (e.preventDefault(), !n) return;
-				if (J(n.node) && G(n.node.key)) Y(n.node);
+				if (Y(n.node) && K(n.node.key)) X(n.node);
 				else if (n.parentKey != null) {
-					let e = X.value.findIndex((e) => e.node.key === n.parentKey);
-					e >= 0 && Z.setActive(e);
+					let e = Z.value.findIndex((e) => e.node.key === n.parentKey);
+					e >= 0 && Q.setActive(e);
 				}
 				return;
 			}
-			Z.onKeydown(e);
+			Q.onKeydown(e);
 		}
-		return S(j, {
-			isExpanded: G,
-			isSelected: fe,
-			isChecked: K,
-			isIndeterminate: pe,
-			isDisabled: q,
-			isLeaf: me,
-			hasChildren: J,
-			isMatch: ge,
+		return E(le, {
+			isExpanded: K,
+			isSelected: he,
+			isChecked: q,
+			isIndeterminate: ge,
+			isDisabled: J,
+			isLeaf: _e,
+			hasChildren: Y,
+			isMatch: ye,
 			get showCheckbox() {
 				return i.showCheckbox;
 			},
@@ -388,36 +374,36 @@ var j = Symbol("m-tree"), M = Symbol("m-tree-node-slot"), N = [
 			loadedChildren: P,
 			loadedKeys: F,
 			loadFailedKeys: I,
-			activeKey: Q,
-			tabindexForKey: Ce,
-			setActiveKey: we,
-			toggleExpand: Y,
-			select: _e,
-			toggleCheck: ve,
-			onDragStart: ye,
-			onDragOver: be,
-			onDrop: xe,
-			onDragEnd: Se
-		}), (e, t) => (x(), m("div", y(D(_), { class: "m-tree-root" }), [W.value.length ? (x(), m("ul", {
+			activeKey: $,
+			tabindexForKey: Ee,
+			setActiveKey: De,
+			toggleExpand: X,
+			select: be,
+			toggleCheck: xe,
+			onDragStart: Se,
+			onDragOver: Ce,
+			onDrop: we,
+			onDragEnd: Te
+		}), (e, t) => (T(), _("div", S(A(b), { class: "m-tree-root" }), [G.value.length ? (T(), _("ul", {
 			key: 0,
 			ref_key: "root",
 			ref: R,
 			class: "m-tree",
 			role: "tree",
-			onKeydown: $
-		}, [(x(!0), m(u, null, T(W.value, (e) => (x(), f(se, {
+			onKeydown: Oe
+		}, [(T(!0), _(p, null, ie(G.value, (e) => (T(), h(B, {
 			key: e.key,
 			node: e,
 			depth: 1
-		}, null, 8, ["node"]))), 128))], 544)) : ue.value ? (x(), m("div", ce, [re(e.$slots, "empty", {}, () => [h("p", le, E(ie.value), 1)])])) : (x(), m("ul", {
+		}, null, 8, ["node"]))), 128))], 544)) : me.value ? (T(), _("div", de, [ae(e.$slots, "empty", {}, () => [v("p", fe, k(oe.value), 1)])])) : (T(), _("ul", {
 			key: 2,
 			ref_key: "root",
 			ref: R,
 			class: "m-tree",
 			role: "tree",
-			onKeydown: $
+			onKeydown: Oe
 		}, null, 544))], 16));
 	}
 });
 //#endregion
-export { z as MTree };
+export { V as MTree };

package/dist/tree/style.css

@@ -50,6 +50,10 @@
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    /* Display scale (page titles, KPI figures) */
+    --m-font-size-xl: 1.25rem;
+    --m-font-size-2xl: 1.5rem;
+    --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
@@ -192,20 +196,10 @@
 
 /*
  * Global motion policy (complements per-component rules):
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ * - `reduced`: keep short paint transitions; stop loops
  *   and layout/transform size animation.
  * - `none`: zero all transition/animation durations.
  */
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-property: background-color, border-color, color, opacity, box-shadow,
-            outline, fill, stroke, stroke-dashoffset !important;
-    }
-}
 
 [data-m-motion="reduced"] *,
 [data-m-motion="reduced"] *::before,
@@ -529,9 +523,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 {
@@ -611,7 +609,7 @@
 .m-zoom-enter-from,
 .m-zoom-leave-to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
 }
 
 .m-slide-up-enter-active,
@@ -656,44 +654,6 @@
     transform: translateX(calc(var(--m-motion-distance) * -1));
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
-        transition: none;
-    }
-
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
-        transform: none;
-    }
-}
-
 [data-m-motion="reduced"] .m-fade-enter-active,
 [data-m-motion="reduced"] .m-fade-leave-active,
 [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1188,17 +1148,6 @@
     animation: none !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
 .m-checkbox__control {
     border-radius: var(--m-radius-sm);
 }
@@ -1271,12 +1220,6 @@
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
-        animation: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-icon--spin svg,
 :root[data-m-motion='reduced'] .m-icon--spin svg {
     animation: none;