morya-ui 0.4.5 → 0.5.1

package/dist/dropdown/index.js

@@ -5,37 +5,37 @@ import { t as i } from "../useFloatingViewportSync-wLLKIGUA.js";
 import { t as a } from "../useMotionTransition-DohkfWRB.js";
 import { t as o } from "../Icon-CmHjx7W8.js";
 import { t as s } from "../Scrollbar-DTeJ8P5b.js";
-import { t as c } from "../icon-H8prbteT.js";
-import { t as l } from "../key-CaQYVkjh.js";
-import { t as u } from "../FlyoutSubmenu-C1n-fr6i.js";
+import { t as c } from "../key-CaQYVkjh.js";
+import { n as l, t as u } from "../icon-CUrSaD8r.js";
+import { t as ee } from "../FlyoutSubmenu-C1n-fr6i.js";
 import { l as d } from "../config-Cd20zAyW.js";
 import { n as f } from "../locale-BcxMPufl.js";
 import "./style.js";
-import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as ee, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as te, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useAttrs as ne, watch as re, withCtx as P } from "vue";
+import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createSlots as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeProps as T, nextTick as E, normalizeClass as D, normalizeStyle as O, onBeforeUnmount as k, openBlock as A, ref as j, renderList as te, renderSlot as M, resolveDynamicComponent as N, toDisplayString as P, unref as F, useAttrs as I, watch as L, withCtx as R } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
-var F = {
+var ne = {
 	key: 0,
 	class: "m-dropdown__separator",
 	role: "separator"
-}, I = {
+}, z = {
 	key: 1,
 	class: "m-dropdown__group"
-}, L = { class: "m-dropdown__group-label" }, R = ["onMouseenter"], z = ["disabled"], B = {
+}, B = { class: "m-dropdown__group-label" }, V = ["onMouseenter"], H = ["disabled"], U = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, V = {
+}, W = {
 	class: "m-dropdown__caret",
 	"aria-hidden": "true"
-}, H = [
+}, G = [
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], U = {
+], K = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, W = /* @__PURE__ */ C({
+}, q = /* @__PURE__ */ w({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
@@ -48,7 +48,7 @@ var F = {
 		"submenuLeave"
 	],
 	setup(e, { emit: t }) {
-		let n = t, r = k(null), i = k(null), a;
+		let n = t, r = j(null), i = j(null), a;
 		function d() {
 			a && clearTimeout(a), a = void 0;
 		}
@@ -64,105 +64,113 @@ var F = {
 			return e.type === "group";
 		}
 		function g(e, t) {
-			return l(e, t, "dd");
+			return c(e, t, "dd");
 		}
-		function C(e) {
-			return c(e.icon);
+		function w(e) {
+			return typeof e.icon == "string" ? u(e.icon) : void 0;
 		}
-		function w(e, t, a) {
+		function T(e) {
+			return l(e.icon);
+		}
+		function E(e) {
+			return !!(w(e) || T(e));
+		}
+		function O(e, t, a) {
 			if (e.disabled || m(e) || h(e) || (d(), n("highlight", e.value), !e.items?.length)) return;
 			r.value = g(e, t);
 			let o = a.currentTarget;
 			i.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
 		}
-		function te() {
+		function k() {
 			f();
 		}
-		function E() {
+		function F() {
 			d(), n("submenuEnter");
 		}
-		function D() {
+		function I() {
 			f(), n("submenuLeave");
 		}
-		return (t, n) => (O(!0), v(p, null, A(e.items, (a, c) => (O(), v(p, { key: g(a, c) }, [m(a) ? (O(), v("div", F)) : h(a) ? (O(), v("div", I, [y("div", L, M(a.label), 1), a.items?.length ? (O(), ee(W, {
+		return (t, n) => (A(!0), y(p, null, te(e.items, (a, c) => (A(), y(p, { key: g(a, c) }, [m(a) ? (A(), y("div", ne)) : h(a) ? (A(), y("div", z, [b("div", B, P(a.label), 1), a.items?.length ? (A(), _(q, {
 			key: 0,
 			items: a.items,
 			"highlighted-value": e.highlightedValue,
 			onSelect: n[0] ||= (e) => t.$emit("select", e),
 			onHighlight: n[1] ||= (e) => t.$emit("highlight", e),
-			onSubmenuEnter: E,
-			onSubmenuLeave: D
-		}, b({ _: 2 }, [t.$slots.item ? {
+			onSubmenuEnter: F,
+			onSubmenuLeave: I
+		}, x({ _: 2 }, [t.$slots.item ? {
 			name: "item",
-			fn: P(({ item: e }) => [j(t.$slots, "item", { item: e })]),
+			fn: R(({ item: e }) => [M(t.$slots, "item", { item: e })]),
 			key: "0"
-		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : a.items?.length ? (O(), v("div", {
+		} : void 0]), 1032, ["items", "highlighted-value"])) : v("", !0)])) : a.items?.length ? (A(), y("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => w(a, c, e),
-			onMouseleave: te
-		}, [y("button", {
+			onMouseenter: (e) => O(a, c, e),
+			onMouseleave: k
+		}, [b("button", {
 			type: "button",
-			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
+			class: D(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
 			disabled: a.disabled,
 			"aria-haspopup": !0
 		}, [
-			C(a) ? (O(), v("span", B, [S(o, {
-				name: C(a),
+			E(a) ? (A(), y("span", U, [w(a) ? (A(), _(o, {
+				key: 0,
+				name: w(a),
 				size: "sm"
-			}, null, 8, ["name"])])) : _("", !0),
-			j(t.$slots, "item", { item: a }, () => [x(M(a.label), 1)]),
-			y("span", V, [S(o, {
+			}, null, 8, ["name"])) : T(a) ? (A(), _(N(T(a)), { key: 1 })) : v("", !0)])) : v("", !0),
+			M(t.$slots, "item", { item: a }, () => [S(P(a.label), 1)]),
+			b("span", W, [C(o, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 10, z), S(u, {
+		], 10, H), C(ee, {
 			open: r.value === g(a, c),
 			anchor: r.value === g(a, c) ? i.value : null,
 			"panel-class": "m-dropdown__submenu",
-			onEnter: E,
-			onLeave: D
+			onEnter: F,
+			onLeave: I
 		}, {
-			default: P(() => [S(s, {
+			default: R(() => [C(s, {
 				class: "m-dropdown__submenu-scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__submenu-wrap-inner",
 				"view-class": "m-dropdown__submenu-view"
 			}, {
-				default: P(() => [S(W, {
+				default: R(() => [C(q, {
 					items: a.items,
 					"highlighted-value": e.highlightedValue,
 					onSelect: n[2] ||= (e) => t.$emit("select", e),
 					onHighlight: n[3] ||= (e) => t.$emit("highlight", e),
-					onSubmenuEnter: E,
-					onSubmenuLeave: D
-				}, b({ _: 2 }, [t.$slots.item ? {
+					onSubmenuEnter: F,
+					onSubmenuLeave: I
+				}, x({ _: 2 }, [t.$slots.item ? {
 					name: "item",
-					fn: P(({ item: e }) => [j(t.$slots, "item", { item: e })]),
+					fn: R(({ item: e }) => [M(t.$slots, "item", { item: e })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1032, ["open", "anchor"])], 40, R)) : (O(), v("button", {
+		}, 1032, ["open", "anchor"])], 40, V)) : (A(), y("button", {
 			key: 3,
 			type: "button",
-			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
+			class: D(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
 			disabled: a.disabled,
 			onMouseenter: (e) => !a.disabled && t.$emit("highlight", a.value),
 			onClick: (e) => t.$emit("select", a)
-		}, [C(a) ? (O(), v("span", U, [S(o, {
-			name: C(a),
+		}, [E(a) ? (A(), y("span", K, [w(a) ? (A(), _(o, {
+			key: 0,
+			name: w(a),
 			size: "sm"
-		}, null, 8, ["name"])])) : _("", !0), j(t.$slots, "item", { item: a }, () => [x(M(a.label), 1)])], 42, H))], 64))), 128));
+		}, null, 8, ["name"])) : T(a) ? (A(), _(N(T(a)), { key: 1 })) : v("", !0)])) : v("", !0), M(t.$slots, "item", { item: a }, () => [S(P(a.label), 1)])], 42, G))], 64))), 128));
 	}
-}), ie = [
+}), re = [
 	"tabindex",
 	"aria-expanded",
 	"aria-disabled"
-], G = /* @__PURE__ */ C({
+], J = /* @__PURE__ */ w({
 	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
@@ -196,85 +204,85 @@ var F = {
 	},
 	emits: ["update:modelValue", "select"],
 	setup(o, { emit: c }) {
-		let l = o, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = a({
+		let l = o, u = c, ee = I(), { rootAttrs: p } = e(ee, () => l.pt), w = d(), { transitionName: te, transitionCss: N } = a({
 			role: "popup",
 			local: () => l.transition,
 			componentName: "Dropdown",
 			fallback: "scale-fade"
-		}), L = f(), R = k(null), z = k(null), B = k(null), V = k({}), H = k(-1), U = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => U.value[H.value]?.value), K, q, J = g(() => t(l, A.value.appendTo)), Y = g(() => n(l, A.value.appendTo));
-		function ae() {
-			H.value = U.value.length ? 0 : -1;
+		}), ne = f(), z = j(null), B = j(null), V = j(null), H = j({}), U = j(-1), W = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => W.value[U.value]?.value), K, J, Y = g(() => t(l, w.value.appendTo)), X = g(() => n(l, w.value.appendTo));
+		function ie() {
+			U.value = -1;
 		}
-		function X() {
-			if (!Y.value || !z.value) return;
-			let e = z.value.getBoundingClientRect();
-			V.value = r(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		function ae() {
+			if (!X.value || !B.value) return;
+			let e = B.value.getBoundingClientRect();
+			H.value = r(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
 		function Z(e) {
-			l.disabled && e || (u("update:modelValue", e), e && (ae(), te(() => {
-				X(), B.value?.focus({ preventScroll: !0 });
+			l.disabled && e || (u("update:modelValue", e), e && (ie(), E(() => {
+				ae(), V.value?.focus({ preventScroll: !0 });
 			})));
 		}
 		function oe() {
 			l.disabled || Z(!l.modelValue);
 		}
 		function se() {
-			l.modelValue && X();
+			l.modelValue && ae();
 		}
 		function ce(e) {
 			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && Z(!1));
 		}
 		function Q() {
-			K && clearTimeout(K), q && clearTimeout(q), K = void 0, q = void 0;
+			K && clearTimeout(K), J && clearTimeout(J), K = void 0, J = void 0;
 		}
 		function le() {
 			l.disabled || l.trigger !== "hover" || (Q(), K = setTimeout(Z, l.showDelay, !0));
 		}
 		function ue() {
-			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), J = setTimeout(Z, l.hideDelay, !1));
 		}
 		function de() {
 			l.trigger === "hover" && Q();
 		}
 		function fe() {
-			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), J = setTimeout(Z, l.hideDelay, !1));
 		}
 		function pe(e) {
 			if (l.modelValue) {
 				if (e.key === "Escape") {
-					e.preventDefault(), Z(!1), z.value?.focus({ preventScroll: !0 });
+					e.preventDefault(), Z(!1), B.value?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = e.key === "ArrowDown" ? 1 : -1, n = U.value.length;
-					n && (H.value = (H.value + t + n) % n);
+					let t = e.key === "ArrowDown" ? 1 : -1, n = W.value.length;
+					n && (U.value = (U.value + t + n) % n);
 				}
-				if (e.key === "Home" && (e.preventDefault(), H.value = 0), e.key === "End" && (e.preventDefault(), H.value = U.value.length - 1), e.key === "Enter" || e.key === " ") {
-					let t = U.value[H.value];
-					H.value >= 0 && t && (e.preventDefault(), ce(t));
+				if (e.key === "Home" && (e.preventDefault(), U.value = 0), e.key === "End" && (e.preventDefault(), U.value = W.value.length - 1), e.key === "Enter" || e.key === " ") {
+					let t = W.value[U.value];
+					U.value >= 0 && t && (e.preventDefault(), ce(t));
 				}
 			}
 		}
 		function me(e) {
 			l.disabled || (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
 		}
-		re(() => l.disabled, (e) => {
+		L(() => l.disabled, (e) => {
 			e && l.modelValue && Z(!1);
 		});
 		function $(e) {
-			l.modelValue && R.value && !R.value.contains(e.target) && !B.value?.contains(e.target) && Z(!1);
+			l.modelValue && z.value && !z.value.contains(e.target) && !V.value?.contains(e.target) && Z(!1);
 		}
-		return re(() => l.modelValue, (e) => {
+		return L(() => l.modelValue, (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), i(() => l.modelValue && Y.value, se), D(() => {
+		}, { immediate: !0 }), i(() => l.modelValue && X.value, se), k(() => {
 			document.removeEventListener("click", $), Q();
-		}), (e, t) => (O(), v("div", w({
+		}), (e, t) => (A(), y("div", T({
 			ref_key: "root",
-			ref: R
-		}, N(C), { class: ["m-dropdown", { "m-dropdown--disabled": o.disabled }] }), [y("span", {
+			ref: z
+		}, F(p), { class: ["m-dropdown", { "m-dropdown--disabled": o.disabled }] }), [b("span", {
 			ref_key: "trigger",
-			ref: z,
+			ref: B,
 			class: "m-dropdown__trigger",
 			role: "button",
 			tabindex: o.disabled ? -1 : 0,
@@ -285,47 +293,47 @@ var F = {
 			onMouseenter: le,
 			onMouseleave: ue,
 			onKeydown: me
-		}, [j(e.$slots, "trigger", {}, () => [x(M(N(L).openMenu), 1)])], 40, ie), (O(), ee(m, {
-			to: J.value.to,
-			disabled: J.value.disabled
-		}, [S(h, {
-			name: N(F),
-			css: N(I)
+		}, [M(e.$slots, "trigger", {}, () => [S(P(F(ne).openMenu), 1)])], 40, re), (A(), _(m, {
+			to: Y.value.to,
+			disabled: Y.value.disabled
+		}, [C(h, {
+			name: F(te),
+			css: F(N)
 		}, {
-			default: P(() => [o.modelValue ? (O(), v("div", {
+			default: R(() => [o.modelValue ? (A(), y("div", {
 				key: 0,
 				ref_key: "menu",
-				ref: B,
-				class: T(["m-dropdown__menu", [`m-dropdown__menu--${o.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
-				style: E(Y.value ? V.value : void 0),
+				ref: V,
+				class: D(["m-dropdown__menu", [`m-dropdown__menu--${o.placement}`, { "m-dropdown__menu--teleported": X.value }]]),
+				style: O(X.value ? H.value : void 0),
 				role: "menu",
 				tabindex: "-1",
 				onKeydown: pe,
 				onMouseenter: de,
 				onMouseleave: fe
-			}, [S(s, {
+			}, [C(s, {
 				class: "m-dropdown__scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__scroll-wrap",
 				"view-class": "m-dropdown__scroll-view"
 			}, {
-				default: P(() => [S(W, {
+				default: R(() => [C(q, {
 					items: o.items,
 					"highlighted-value": G.value,
 					onSelect: ce,
-					onHighlight: t[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
+					onHighlight: t[1] ||= (e) => U.value = W.value.findIndex((t) => t.value === e),
 					onSubmenuEnter: de,
 					onSubmenuLeave: fe
-				}, b({ _: 2 }, [e.$slots.item ? {
+				}, x({ _: 2 }, [e.$slots.item ? {
 					name: "item",
-					fn: P(({ item: t }) => [j(e.$slots, "item", { item: t })]),
+					fn: R(({ item: t }) => [M(e.$slots, "item", { item: t })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 3
-			})], 38)) : _("", !0)]),
+			})], 38)) : v("", !0)]),
 			_: 3
 		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 16));
 	}
 });
 //#endregion
-export { G as MDropdown };
+export { J as MDropdown };

package/dist/dropdown/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);
 }
@@ -1388,7 +1379,7 @@
 }
 
 .m-dropdown {
-    --m-dropdown-menu-min-width: var(--m-menu-min-width, 10rem);
+    --m-dropdown-menu-min-width: var(--m-overlay-menu-min-width, 10rem);
     display: inline-block;
     font-family: var(--m-font-sans);
     position: relative;

package/dist/empty/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);
 }

package/dist/fieldset/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);
 }