morya-ui 0.4.5 → 0.5.1

package/dist/menu/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }
@@ -1497,11 +1488,21 @@
     padding: var(--m-space-2) var(--m-space-3);
     pointer-events: none;
     position: absolute;
-    transform: translateX(-50%);
     white-space: nowrap;
     z-index: var(--m-z-popper);
 }
 
+/*
+ * Static centering transforms only apply to in-place (non-teleported) tips.
+ * Teleported tips get viewport coords plus the inline `translate` property
+ * from JS, and a static transform here would stack with it (double offset).
+ * Keeping the transforms off `.m-tooltip__content--teleported` also lets
+ * transition presets that animate `transform` (e.g. scale-fade) win.
+ */
+.m-tooltip__content:not(.m-tooltip__content--teleported) {
+    transform: translateX(-50%);
+}
+
 .m-tooltip__content--top {
     bottom: calc(100% + var(--m-space-2));
 }
@@ -1514,12 +1515,15 @@
     left: auto;
     right: calc(100% + var(--m-space-2));
     top: 50%;
-    transform: translateY(-50%);
 }
 
 .m-tooltip__content--right {
     left: calc(100% + var(--m-space-2));
     top: 50%;
+}
+
+.m-tooltip__content--left:not(.m-tooltip__content--teleported),
+.m-tooltip__content--right:not(.m-tooltip__content--teleported) {
     transform: translateY(-50%);
 }
 
@@ -1602,7 +1606,8 @@
 
 .m-menu--popup {
     --m-menu-popup-max-height: min(18rem, 45vh);
-    box-shadow: var(--m-shadow-md);
+    border-color: color-mix(in srgb, var(--m-color-border) 85%, transparent);
+    box-shadow: var(--m-shadow-lg);
     display: flex;
     flex-direction: column;
     max-height: var(--m-menu-popup-max-height);
@@ -1616,6 +1621,13 @@
     z-index: var(--m-z-popper);
 }
 
+/* Open-state affordance on the slotted trigger (button stays "pressed"). */
+.m-menu-popup--open .m-menu-popup__anchor > .m-button,
+.m-menu-popup[data-open='true'] .m-menu-popup__anchor > .m-button {
+    border-color: color-mix(in srgb, var(--m-color-primary) 45%, var(--m-color-border));
+    color: var(--m-color-primary);
+}
+
 .m-menu--popup .m-menu__scroll {
     max-height: 100%;
     min-height: 0;
@@ -1687,7 +1699,7 @@
 .m-menu--horizontal .m-menu__item-content {
     align-items: center;
     border-bottom: none;
-    border-radius: var(--m-radius-control);
+    border-radius: var(--m-radius-control) var(--m-radius-control) 0 0;
     font-weight: 500;
     height: var(--m-menu-horizontal-height);
     padding-inline: var(--m-space-3);
@@ -1695,11 +1707,36 @@
 }
 
 .m-menu--horizontal .m-menu__item-content::before {
-    border-radius: var(--m-radius-control);
+    border-radius: var(--m-radius-control) var(--m-radius-control) 0 0;
     display: block;
     inset: 0;
 }
 
+/* Bottom indicator: the signature affordance of a horizontal nav */
+.m-menu--horizontal .m-menu__item-content::after {
+    background: var(--m-menu-item-text-active);
+    border-radius: 999px;
+    bottom: 0;
+    content: "";
+    height: 2px;
+    left: 50%;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%) scaleX(0.3);
+    opacity: 0;
+    transition:
+        opacity var(--m-motion-fast) var(--m-motion-ease),
+        transform var(--m-motion-fast) var(--m-motion-ease);
+    width: calc(100% - 2 * var(--m-space-3));
+    z-index: 2;
+}
+
+.m-menu--horizontal .m-menu__item-content--selected::after,
+.m-menu--horizontal .m-menu__item-content--child-active::after {
+    opacity: 1;
+    transform: translateX(-50%) scaleX(1);
+}
+
 .m-menu--horizontal .m-menu__item-content--selected::before,
 .m-menu--horizontal .m-menu__item-content--child-active::before {
     background: var(--m-menu-item-color-active) !important;
@@ -1717,6 +1754,15 @@
     color: var(--m-menu-item-text-active);
 }
 
+.m-menu--horizontal .m-menu__item-content--selected .m-menu__label {
+    font-weight: 600;
+}
+
+[data-m-motion="reduced"] .m-menu--horizontal .m-menu__item-content::after,
+[data-m-motion="none"] .m-menu--horizontal .m-menu__item-content::after {
+    transition: none;
+}
+
 .m-menu--horizontal .m-menu__arrow {
     margin-inline-start: var(--m-space-1);
 }

package/dist/menubar/index.js

@@ -6,42 +6,42 @@ import { t as ne } from "../useMotionTransition-DohkfWRB.js";
 import { t as r } from "../Icon-CmHjx7W8.js";
 import { t as re } from "../Scrollbar-DTeJ8P5b.js";
 import { t as i } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as ie } from "../icon-H8prbteT.js";
-import { l as ae } from "../config-Cd20zAyW.js";
-import { n as oe } from "../locale-BcxMPufl.js";
+import { n as ie, t as ae } from "../icon-CUrSaD8r.js";
+import { l as oe } from "../config-Cd20zAyW.js";
+import { n as se } from "../locale-BcxMPufl.js";
 import "./style.js";
-import { Fragment as a, Teleport as se, Transition as ce, computed as o, createBlock as le, createCommentVNode as s, createElementBlock as c, createElementVNode as ue, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as de, nextTick as f, normalizeClass as p, normalizeStyle as fe, onBeforeUnmount as m, onMounted as pe, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as me, watch as x, withCtx as S, withModifiers as C } from "vue";
+import { Fragment as a, Teleport as ce, Transition as le, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as ue, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as de, nextTick as p, normalizeClass as m, normalizeStyle as fe, onBeforeUnmount as pe, onMounted as me, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useAttrs as he, watch as S, withCtx as C, withModifiers as w } from "vue";
 //#region src/components/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
-var he = ["aria-label"], ge = {
+var ge = ["aria-label"], _e = {
 	key: 0,
 	class: "m-menubar__start"
-}, _e = [
+}, ve = [
 	"disabled",
 	"tabindex",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick",
 	"onFocus"
-], ve = {
+], ye = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, ye = {
+}, be = {
 	key: 1,
 	class: "m-menubar__caret",
 	"aria-hidden": "true"
-}, w = [
+}, xe = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], be = {
+], T = {
 	key: 0,
 	class: "m-menubar__icon",
 	"aria-hidden": "true"
-}, xe = {
+}, Se = {
 	key: 1,
 	class: "m-menubar__end"
-}, T = /* @__PURE__ */ d({
+}, E = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "Menubar",
 	props: {
@@ -59,97 +59,103 @@ var he = ["aria-label"], ge = {
 		}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(d, { emit: T }) {
-		let E = d, D = T, Se = me(), { rootAttrs: O } = e(Se, () => E.pt), k = ae(), { transitionName: A, transitionCss: j } = ne({
+	setup(f, { emit: E }) {
+		let D = f, O = E, Ce = he(), { rootAttrs: we } = e(Ce, () => D.pt), k = oe(), { transitionName: Te, transitionCss: Ee } = ne({
 			role: "popup",
-			local: () => E.transition,
+			local: () => D.transition,
 			componentName: "Menubar",
 			fallback: "scale-fade"
-		}), Ce = oe(), M = g(null), N = g(null), P = g([]), F = g({}), I = o(() => t(E, k.value.appendTo)), L = o(() => n(E, k.value.appendTo));
-		function we(e, t) {
-			P.value[t] = e instanceof HTMLElement ? e : null;
+		}), De = se(), A = g(null), j = g(null), M = g([]), N = g({}), P = o(() => t(D, k.value.appendTo)), F = o(() => n(D, k.value.appendTo));
+		function Oe(e, t) {
+			M.value[t] = e instanceof HTMLElement ? e : null;
 		}
-		function R() {
-			if (!L.value || M.value == null) return;
-			let e = P.value[M.value];
+		function I() {
+			if (!F.value || A.value == null) return;
+			let e = M.value[A.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			F.value = ee(t, "bottom-start", {
+			N.value = ee(t, "bottom-start", {
 				gap: 4,
-				minWidth: "var(--m-menu-min-width, 12rem)"
+				minWidth: "var(--m-overlay-menu-min-width, 12rem)"
 			});
 		}
-		function z(e) {
+		function L(e) {
 			return e.key ?? e.label;
 		}
+		function R(e) {
+			return !!(D.selectedKey && L(e) === D.selectedKey);
+		}
+		function z(e) {
+			return typeof e.icon == "string" ? ae(e.icon) : void 0;
+		}
 		function B(e) {
-			return !!(E.selectedKey && z(e) === E.selectedKey);
+			return ie(e.icon);
 		}
 		function V(e) {
-			return ie(e.icon);
+			return !!(z(e) || B(e));
 		}
 		function H(e) {
-			e.disabled || (e.command?.(), D("update:selectedKey", z(e)), D("select", e));
+			e.disabled || (e.command?.(), O("update:selectedKey", L(e)), O("select", e));
 		}
 		function U(e, t) {
 			if (!t.disabled) {
 				if (G.setActive(e), !t.items?.length) {
-					H(t), M.value = null;
+					H(t), A.value = null;
 					return;
 				}
-				M.value = M.value === e ? null : e, M.value != null && f(() => R());
+				A.value = A.value === e ? null : e, A.value != null && p(() => I());
 			}
 		}
-		let W = o(() => M.value == null ? [] : E.model[M.value]?.items ?? []), G = i({
-			itemCount: () => E.model.length,
-			isItemDisabled: (e) => !!E.model[e]?.disabled,
+		let W = o(() => A.value == null ? [] : D.model[A.value]?.items ?? []), G = i({
+			itemCount: () => D.model.length,
+			isItemDisabled: (e) => !!D.model[e]?.disabled,
 			orientation: "horizontal",
 			initialActiveIndex: 0,
 			onActivate: (e) => {
-				let t = E.model[e];
+				let t = D.model[e];
 				t && U(e, t);
 			}
 		}), K = i({
 			itemCount: () => W.value.length,
 			isItemDisabled: (e) => !!W.value[e]?.disabled,
-			enabled: () => M.value != null,
+			enabled: () => A.value != null,
 			onActivate: (e) => {
 				let t = W.value[e];
 				t && Q(t);
 			}
 		});
 		function q(e) {
-			P.value[e]?.focus({ preventScroll: !0 });
+			M.value[e]?.focus({ preventScroll: !0 });
 		}
-		function Te() {
-			return N.value?.querySelector(".m-menubar__submenu") || document.querySelector(".m-menubar__submenu--teleported");
+		function ke() {
+			return j.value?.querySelector(".m-menubar__submenu") || document.querySelector(".m-menubar__submenu--teleported");
 		}
 		function J() {
 			let e = K.activeIndex.value;
-			e < 0 || Te()?.querySelectorAll(".m-menubar__subitem")[e]?.focus({ preventScroll: !0 });
+			e < 0 || ke()?.querySelectorAll(".m-menubar__subitem")[e]?.focus({ preventScroll: !0 });
 		}
 		function Y(e = !1) {
-			let t = M.value;
-			M.value = null, K.reset(), e && t != null && q(t);
+			let t = A.value;
+			A.value = null, K.reset(), e && t != null && q(t);
 		}
 		function X(e, t = !1) {
-			M.value = e, G.setActive(e), f(() => {
-				R(), t && (K.moveFirst(), J());
+			A.value = e, G.setActive(e), p(() => {
+				I(), t && (K.moveFirst(), J());
 			});
 		}
 		function Z(e) {
 			G.move(e);
-			let t = G.activeIndex.value, n = E.model[t];
-			M.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
+			let t = G.activeIndex.value, n = D.model[t];
+			A.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
 		}
-		function Ee(e) {
+		function Ae(e) {
 			if (e.key === "Escape") {
-				M.value != null && (e.preventDefault(), Y(!0));
+				A.value != null && (e.preventDefault(), Y(!0));
 				return;
 			}
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
-				let t = G.activeIndex.value, n = E.model[t];
+				let t = G.activeIndex.value, n = D.model[t];
 				n?.items?.length && !n.disabled && X(t, !0);
 				return;
 			}
@@ -159,7 +165,7 @@ var he = ["aria-label"], ge = {
 			}
 			G.onKeydown(e);
 		}
-		function De(e) {
+		function je(e) {
 			if (e.stopPropagation(), e.key === "Escape") {
 				e.preventDefault(), Y(!0);
 				return;
@@ -173,93 +179,95 @@ var he = ["aria-label"], ge = {
 		function Q(e) {
 			H(e), Y(!0);
 		}
-		x(G.activeIndex, (e) => {
-			e >= 0 && M.value == null && q(e);
-		}), x(K.activeIndex, () => {
-			M.value != null && J();
+		S(G.activeIndex, (e) => {
+			e >= 0 && A.value == null && q(e);
+		}), S(K.activeIndex, () => {
+			A.value != null && J();
 		});
 		function $(e) {
 			let t = e.target;
-			N.value?.contains(t) || document.querySelector(".m-menubar__submenu--teleported")?.contains(t) || Y();
+			j.value?.contains(t) || document.querySelector(".m-menubar__submenu--teleported")?.contains(t) || Y();
 		}
-		function Oe() {
-			M.value != null && R();
+		function Me() {
+			A.value != null && I();
 		}
-		return te(() => M.value != null && L.value, Oe), pe(() => document.addEventListener("click", $)), m(() => {
+		return te(() => A.value != null && F.value, Me), me(() => document.addEventListener("click", $)), pe(() => {
 			document.removeEventListener("click", $);
-		}), (e, t) => (h(), c("nav", de(b(O), {
+		}), (e, t) => (h(), l("nav", de(x(we), {
 			ref_key: "root",
-			ref: N,
+			ref: j,
 			class: "m-menubar",
-			"aria-label": b(Ce).menubar,
-			onKeydown: Ee
+			"aria-label": x(De).menubar,
+			onKeydown: Ae
 		}), [
-			e.$slots.start ? (h(), c("div", ge, [v(e.$slots, "start")])) : s("", !0),
-			(h(!0), c(a, null, _(d.model, (e, t) => (h(), c("div", {
+			e.$slots.start ? (h(), l("div", _e, [v(e.$slots, "start")])) : c("", !0),
+			(h(!0), l(a, null, _(f.model, (e, t) => (h(), l("div", {
 				key: `${e.label}-${t}`,
-				class: p(["m-menubar__item", {
-					"m-menubar__item--open": M.value === t,
-					"m-menubar__item--selected": B(e)
+				class: m(["m-menubar__item", {
+					"m-menubar__item--open": A.value === t,
+					"m-menubar__item--selected": R(e)
 				}])
 			}, [ue("button", {
 				ref_for: !0,
-				ref: (e) => we(e, t),
+				ref: (e) => Oe(e, t),
 				type: "button",
-				class: p(["m-menubar__trigger", { "m-menubar__trigger--selected": B(e) }]),
+				class: m(["m-menubar__trigger", { "m-menubar__trigger--selected": R(e) }]),
 				disabled: e.disabled,
-				tabindex: b(G).tabindexFor(t),
-				"aria-expanded": e.items?.length ? M.value === t : void 0,
+				tabindex: x(G).tabindexFor(t),
+				"aria-expanded": e.items?.length ? A.value === t : void 0,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
-				onClick: C((n) => U(t, e), ["stop"]),
-				onFocus: (e) => b(G).setActive(t)
+				onClick: w((n) => U(t, e), ["stop"]),
+				onFocus: (e) => x(G).setActive(t)
 			}, [
-				V(e) ? (h(), c("span", ve, [u(r, {
-					name: V(e),
+				V(e) ? (h(), l("span", ye, [z(e) ? (h(), s(r, {
+					key: 0,
+					name: z(e),
 					size: "sm"
-				}, null, 8, ["name"])])) : s("", !0),
-				l(" " + y(e.label) + " ", 1),
-				e.items?.length ? (h(), c("span", ye, [u(r, {
+				}, null, 8, ["name"])) : B(e) ? (h(), s(y(B(e)), { key: 1 })) : c("", !0)])) : c("", !0),
+				u(" " + b(e.label) + " ", 1),
+				e.items?.length ? (h(), l("span", be, [d(r, {
 					name: "chevron-down",
 					size: "sm"
-				})])) : s("", !0)
-			], 42, _e), (h(), le(se, {
-				to: I.value.to,
-				disabled: I.value.disabled
-			}, [u(ce, {
-				name: b(A),
-				css: b(j)
+				})])) : c("", !0)
+			], 42, ve), (h(), s(ce, {
+				to: P.value.to,
+				disabled: P.value.disabled
+			}, [d(le, {
+				name: x(Te),
+				css: x(Ee)
 			}, {
-				default: S(() => [e.items?.length && M.value === t ? (h(), c("div", {
+				default: C(() => [e.items?.length && A.value === t ? (h(), l("div", {
 					key: 0,
-					class: p(["m-menubar__submenu", { "m-menubar__submenu--teleported": L.value }]),
-					style: fe(L.value ? F.value : void 0),
+					class: m(["m-menubar__submenu", { "m-menubar__submenu--teleported": F.value }]),
+					style: fe(F.value ? N.value : void 0),
 					role: "menu",
-					onKeydown: De
-				}, [u(re, {
+					onKeydown: je
+				}, [d(re, {
 					class: "m-menubar__submenu-scroll",
 					"fit-content": "",
 					"wrap-class": "m-menubar__submenu-wrap",
 					"view-class": "m-menubar__submenu-view"
 				}, {
-					default: S(() => [(h(!0), c(a, null, _(e.items, (e, t) => (h(), c("button", {
+					default: C(() => [(h(!0), l(a, null, _(e.items, (e, t) => (h(), l("button", {
 						key: `${e.label}-${t}`,
 						type: "button",
-						class: p(["m-menubar__subitem", { "m-menubar__subitem--selected": B(e) }]),
+						class: m(["m-menubar__subitem", { "m-menubar__subitem--selected": R(e) }]),
 						role: "menuitem",
 						disabled: e.disabled,
-						tabindex: b(K).tabindexFor(t),
-						onClick: C((t) => Q(e), ["stop"])
-					}, [V(e) ? (h(), c("span", be, [u(r, {
-						name: V(e),
+						tabindex: x(K).tabindexFor(t),
+						onClick: w((t) => Q(e), ["stop"])
+					}, [V(e) ? (h(), l("span", T, [z(e) ? (h(), s(r, {
+						key: 0,
+						name: z(e),
 						size: "sm"
-					}, null, 8, ["name"])])) : s("", !0), l(" " + y(e.label), 1)], 10, w))), 128))]),
+					}, null, 8, ["name"])) : B(e) ? (h(), s(y(B(e)), { key: 1 })) : c("", !0)])) : c("", !0), u(" " + b(e.label), 1)], 10, xe))), 128))]),
 					_: 2
-				}, 1024)], 38)) : s("", !0)]),
+				}, 1024)], 38)) : c("", !0)]),
 				_: 2
 			}, 1032, ["name", "css"])], 8, ["to", "disabled"]))], 2))), 128)),
-			e.$slots.end ? (h(), c("div", xe, [v(e.$slots, "end")])) : s("", !0)
-		], 16, he));
+			e.$slots.end ? (h(), l("div", Se, [v(e.$slots, "end")])) : c("", !0)
+		], 16, ge));
 	}
 });
 //#endregion
-export { T as MMenubar };
+export { E as MMenubar };

package/dist/menubar/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }
@@ -1389,7 +1380,7 @@
 
 /* —— Navigation: Menubar —— */
 .m-menubar {
-    --m-menubar-menu-min-width: var(--m-menu-min-width, 10rem);
+    --m-menubar-menu-min-width: var(--m-overlay-menu-min-width, 10rem);
     --m-menubar-item-gap: var(--m-space-1);
     align-items: stretch;
     background: var(--m-color-surface);