morya-ui 0.2.3 → 0.2.5

package/dist/theme/styles.css

@@ -38,8 +38,12 @@
     --m-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.25);
     --m-shadow-md: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
     --m-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
-    --m-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
+    --m-shadow-raised: 0 0.25rem 0.75rem
+        color-mix(in srgb, var(--m-color-text) 14%, transparent);
+    --m-shadow-sticky: 4px 0 8px
+        color-mix(in srgb, var(--m-color-text) 6%, transparent);
+    --m-shadow-sticky-end: -4px 0 8px
+        color-mix(in srgb, var(--m-color-text) 6%, transparent);
 
     /* Typography scale (component text, not control-height fonts) */
     --m-font-size-xs: 0.75rem;
@@ -204,29 +208,29 @@
 }
 
 [data-m-density="compact"] .m-layout-header {
-    --m-layout-header-height: 48px;
+    --m-layout-header-height: 3rem;
 }
 
 [data-m-density="compact"] .m-layout-footer {
-    --m-layout-footer-height: 40px;
+    --m-layout-footer-height: 2.5rem;
 }
 
 [data-m-density="compact"] .m-layout-sider {
-    --m-layout-sider-width: 240px;
-    --m-layout-sider-collapsed-width: 52px;
+    --m-layout-sider-width: 15rem;
+    --m-layout-sider-collapsed-width: 3.25rem;
 }
 
 [data-m-density="spacious"] .m-layout-header {
-    --m-layout-header-height: 64px;
+    --m-layout-header-height: 4rem;
 }
 
 [data-m-density="spacious"] .m-layout-footer {
-    --m-layout-footer-height: 56px;
+    --m-layout-footer-height: 3.5rem;
 }
 
 [data-m-density="spacious"] .m-layout-sider {
-    --m-layout-sider-width: 288px;
-    --m-layout-sider-collapsed-width: 72px;
+    --m-layout-sider-width: 18rem;
+    --m-layout-sider-collapsed-width: 4.5rem;
 }
 
 [data-theme="dark"] {
@@ -241,12 +245,13 @@
         color-mix(in srgb, var(--m-color-primary) 28%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
         color-mix(in srgb, var(--m-color-danger) 28%, transparent);
-    --m-color-success: #5eead4;
-    --m-color-info: #93c5fd;
-    --m-color-warning: #fbbf24;
+    /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
+    --m-color-success: #0f766e;
+    --m-color-info: #1d4ed8;
+    --m-color-warning: #b45309;
     --m-color-warn: var(--m-color-warning);
-    --m-color-help: #c084fc;
-    --m-color-danger: #fca5a5;
+    --m-color-help: #7e22ce;
+    --m-color-danger: #dc2626;
     --m-color-contrast: #f8fafc;
     --m-color-contrast-fg: #0f172a;
     --m-color-contrast-hover: #e2e8f0;
@@ -255,8 +260,12 @@
     --m-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
     --m-shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
     --m-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
-    --m-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
+    --m-shadow-raised: 0 0.25rem 0.75rem
+        color-mix(in srgb, var(--m-color-text) 22%, transparent);
+    --m-shadow-sticky: 4px 0 8px
+        color-mix(in srgb, #000 35%, transparent);
+    --m-shadow-sticky-end: -4px 0 8px
+        color-mix(in srgb, #000 35%, transparent);
 
     --m-table-border-color: color-mix(in srgb, var(--m-color-border) 88%, var(--m-color-text));
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 10%, var(--m-color-surface));

package/dist/tiered-menu/index.js

@@ -2,54 +2,48 @@ import { r as e } from "../useComponentAttrs-BTYEe61P.js";
 import { t } from "../Icon-DfpIfo2L.js";
 import { n, t as r } from "../overlay-oR-5MDuE.js";
 import { t as i } from "../overlayPlacement-Cd20JTD_.js";
-import { t as a } from "../lastPointer-CRxcUqdd.js";
-import { c as o } from "../config-CI8_WBbE.js";
+import { t as a } from "../Scrollbar-BYnCO8fv.js";
+import { t as o } from "../lastPointer-CRxcUqdd.js";
+import { t as s } from "../FlyoutSubmenu-kymVjXLs.js";
+import { c } from "../config-Dln2-u_v.js";
 import "./style.js";
-import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as ee, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, nextTick as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useAttrs as w, watch as T, withCtx as E } from "vue";
+import { Fragment as l, Teleport as u, Transition as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, nextTick as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useAttrs as D, watch as O, withCtx as k } from "vue";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var D = ["onMouseenter"], O = {
+var A = ["onMouseenter"], j = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, te = [
+}, M = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], ne = {
+], ee = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, re = {
-	key: 2,
-	class: "m-tieredmenu__submenu",
-	role: "menu"
-}, ie = {
+}, te = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ae = ["disabled", "onClick"], k = ["onMouseenter"], A = {
+}, ne = ["disabled", "onClick"], re = ["onMouseenter"], ie = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, j = [
+}, ae = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], M = {
+], N = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, N = {
-	key: 2,
-	class: "m-tieredmenu__submenu",
-	role: "menu"
 }, P = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, F = ["disabled", "onClick"], I = /* @__PURE__ */ h({
+}, F = ["disabled", "onClick"], I = /* @__PURE__ */ v({
 	inheritAttrs: !1,
 	__name: "TieredMenu",
 	props: {
@@ -71,10 +65,10 @@ var D = ["onMouseenter"], O = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue"],
-	setup(h, { emit: I }) {
-		let L = h, R = w(), { rootAttrs: z } = e(R, () => L.pt), B = I, V = o(), H = b(null), U = b(null), W = b({}), G = u(() => n(L.popup ? L : { teleport: !1 }, V.value.appendTo)), K = u(() => L.popup && r(L, V.value.appendTo));
-		function q() {
-			let { x: e, y: t } = a();
+	setup(v, { emit: I }) {
+		let L = v, R = I, z = D(), { rootAttrs: B } = e(z, () => L.pt), V = c(), H = C(null), U = C(null), W = C(null), G = C({}), K = f(() => n(L.popup ? L : { teleport: !1 }, V.value.appendTo)), q = f(() => L.popup && r(L, V.value.appendTo));
+		function oe() {
+			let { x: e, y: t } = o();
 			return {
 				left: e,
 				top: t,
@@ -85,51 +79,118 @@ var D = ["onMouseenter"], O = {
 			};
 		}
 		function J() {
-			!L.popup || !L.modelValue || !K.value || (W.value = i(q(), L.placement, { minWidth: "12rem" }));
+			!L.popup || !L.modelValue || !q.value || (G.value = i(oe(), L.placement, { minWidth: "12rem" }));
 		}
 		function Y() {
 			L.modelValue && J();
 		}
 		function X(e) {
-			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, L.popup && B("update:modelValue", !1));
+			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
 		}
 		function Z(e) {
-			e.disabled || e.separator || (e.command?.(), U.value = null, L.popup && B("update:modelValue", !1));
+			e.disabled || e.separator || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
 		}
-		function Q(e, t) {
+		function se(e) {
+			if (!(e?.currentTarget instanceof HTMLElement)) return null;
+			let t = e.currentTarget;
+			return t.classList.contains("m-tieredmenu__item") ? t : t.querySelector(".m-tieredmenu__item");
+		}
+		function Q(e, t, n) {
 			if (t.disabled || !t.items?.length) {
-				U.value = null;
+				U.value = null, W.value = null;
 				return;
 			}
-			U.value = e;
+			U.value = e, W.value = se(n);
 		}
 		function $(e) {
-			H.value && !H.value.contains(e.target) && (U.value = null, L.popup && L.modelValue && B("update:modelValue", !1));
+			let t = e.target;
+			H.value?.contains(t) || document.querySelector(".m-tieredmenu__submenu--teleported")?.contains(t) || (U.value = null, W.value = null, L.popup && L.modelValue && R("update:modelValue", !1));
 		}
-		return T(() => !!(!L.popup || L.modelValue), (e) => {
+		return O(() => !!(!L.popup || L.modelValue), (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), T(() => L.modelValue, (e) => {
-			L.popup && (e ? (_(J), K.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0)));
-		}, { immediate: !0 }), v(() => {
+		}, { immediate: !0 }), O(() => L.modelValue, (e) => {
+			L.popup && (e ? (b(J), q.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0)));
+		}, { immediate: !0 }), x(() => {
 			document.removeEventListener("click", $), window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0);
-		}), (e, n) => h.popup ? (y(), ee(c, {
+		}), (e, n) => v.popup ? (S(), p(u, {
 			key: 1,
-			to: G.value.to,
-			disabled: G.value.disabled
-		}, [m(l, { name: "m-scale-fade" }, {
-			default: E(() => [h.modelValue ? (y(), f("div", g({
+			to: K.value.to,
+			disabled: K.value.disabled
+		}, [_(d, { name: "m-scale-fade" }, {
+			default: k(() => [v.modelValue ? (S(), h("div", y({
 				key: 0,
 				ref_key: "root",
 				ref: H
-			}, C(z), {
-				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": K.value }],
-				style: K.value ? W.value : void 0,
+			}, E(B), {
+				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": q.value }],
+				style: q.value ? G.value : void 0,
 				role: "menu"
-			}), [(y(!0), f(s, null, x(h.model, (e, n) => (y(), f("div", {
+			}), [_(a, {
+				class: "m-tieredmenu__scroll",
+				"fit-content": "",
+				"wrap-class": "m-tieredmenu__scroll-wrap",
+				"view-class": "m-tieredmenu__scroll-view"
+			}, {
+				default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
+					key: `${e.label ?? "sep"}-${n}`,
+					class: "m-tieredmenu__row",
+					onMouseenter: (t) => Q(n, e, t)
+				}, [e.separator ? (S(), h("div", ie)) : (S(), h("button", {
+					key: 1,
+					type: "button",
+					class: "m-tieredmenu__item",
+					role: "menuitem",
+					disabled: e.disabled,
+					"aria-haspopup": e.items?.length ? "menu" : void 0,
+					"aria-expanded": e.items?.length ? U.value === n : void 0,
+					onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
+				}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", N, [_(t, {
+					name: "chevron-right",
+					size: "sm"
+				})])) : m("", !0)], 8, ae)), _(s, {
+					open: U.value === n && !!e.items?.length,
+					anchor: U.value === n ? W.value : null,
+					"panel-class": "m-tieredmenu__submenu"
+				}, {
+					default: k(() => [_(a, {
+						class: "m-tieredmenu__submenu-scroll",
+						"fit-content": "",
+						"wrap-class": "m-tieredmenu__submenu-wrap-inner",
+						"view-class": "m-tieredmenu__submenu-view"
+					}, {
+						default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", P)) : (S(), h("button", {
+							key: 1,
+							type: "button",
+							class: "m-tieredmenu__item",
+							role: "menuitem",
+							disabled: e.disabled,
+							onClick: (t) => Z(e)
+						}, T(e.label), 9, F))], 64))), 128))]),
+						_: 2
+					}, 1024)]),
+					_: 2
+				}, 1032, ["open", "anchor"])], 40, re))), 128))]),
+				_: 1
+			})], 16)) : m("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"])) : (S(), h("div", y({
+			key: 0,
+			ref_key: "root",
+			ref: H
+		}, E(B), {
+			class: "m-tieredmenu",
+			role: "menu"
+		}), [_(a, {
+			class: "m-tieredmenu__scroll",
+			"fit-content": "",
+			"wrap-class": "m-tieredmenu__scroll-wrap",
+			"view-class": "m-tieredmenu__scroll-view"
+		}, {
+			default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
 				key: `${e.label ?? "sep"}-${n}`,
 				class: "m-tieredmenu__row",
-				onMouseenter: (t) => Q(n, e)
-			}, [e.separator ? (y(), f("div", A)) : (y(), f("button", {
+				onMouseenter: (t) => Q(n, e, t)
+			}, [e.separator ? (S(), h("div", j)) : (S(), h("button", {
 				key: 1,
 				type: "button",
 				class: "m-tieredmenu__item",
@@ -137,50 +198,35 @@ var D = ["onMouseenter"], O = {
 				disabled: e.disabled,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
 				"aria-expanded": e.items?.length ? U.value === n : void 0,
-				onClick: (t) => e.items?.length ? Q(n, e) : X(e)
-			}, [p("span", null, S(e.label), 1), e.items?.length ? (y(), f("span", M, [m(t, {
+				onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
+			}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", ee, [_(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : d("", !0)], 8, j)), e.items?.length && U.value === n ? (y(), f("div", N, [(y(!0), f(s, null, x(e.items, (e, t) => (y(), f(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (y(), f("div", P)) : (y(), f("button", {
-				key: 1,
-				type: "button",
-				class: "m-tieredmenu__item",
-				role: "menuitem",
-				disabled: e.disabled,
-				onClick: (t) => Z(e)
-			}, S(e.label), 9, F))], 64))), 128))])) : d("", !0)], 40, k))), 128))], 16)) : d("", !0)]),
+			})])) : m("", !0)], 8, M)), _(s, {
+				open: U.value === n && !!e.items?.length,
+				anchor: U.value === n ? W.value : null,
+				"panel-class": "m-tieredmenu__submenu"
+			}, {
+				default: k(() => [_(a, {
+					class: "m-tieredmenu__submenu-scroll",
+					"fit-content": "",
+					"wrap-class": "m-tieredmenu__submenu-wrap-inner",
+					"view-class": "m-tieredmenu__submenu-view"
+				}, {
+					default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", te)) : (S(), h("button", {
+						key: 1,
+						type: "button",
+						class: "m-tieredmenu__item",
+						role: "menuitem",
+						disabled: e.disabled,
+						onClick: (t) => Z(e)
+					}, T(e.label), 9, ne))], 64))), 128))]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, ["open", "anchor"])], 40, A))), 128))]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (y(), f("div", g({
-			key: 0,
-			ref_key: "root",
-			ref: H
-		}, C(z), {
-			class: "m-tieredmenu",
-			role: "menu"
-		}), [(y(!0), f(s, null, x(h.model, (e, n) => (y(), f("div", {
-			key: `${e.label ?? "sep"}-${n}`,
-			class: "m-tieredmenu__row",
-			onMouseenter: (t) => Q(n, e)
-		}, [e.separator ? (y(), f("div", O)) : (y(), f("button", {
-			key: 1,
-			type: "button",
-			class: "m-tieredmenu__item",
-			role: "menuitem",
-			disabled: e.disabled,
-			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			"aria-expanded": e.items?.length ? U.value === n : void 0,
-			onClick: (t) => e.items?.length ? Q(n, e) : X(e)
-		}, [p("span", null, S(e.label), 1), e.items?.length ? (y(), f("span", ne, [m(t, {
-			name: "chevron-right",
-			size: "sm"
-		})])) : d("", !0)], 8, te)), e.items?.length && U.value === n ? (y(), f("div", re, [(y(!0), f(s, null, x(e.items, (e, t) => (y(), f(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (y(), f("div", ie)) : (y(), f("button", {
-			key: 1,
-			type: "button",
-			class: "m-tieredmenu__item",
-			role: "menuitem",
-			disabled: e.disabled,
-			onClick: (t) => Z(e)
-		}, S(e.label), 9, ae))], 64))), 128))])) : d("", !0)], 40, D))), 128))], 16));
+		})], 16));
 	}
 });
 //#endregion