morya-ui 0.3.0 → 0.3.2

package/dist/dropdown/index.js

@@ -1,49 +1,54 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
 import { n as r, t as i } from "../overlay-oR-5MDuE.js";
 import { t as a } from "../overlayPlacement-Cd20JTD_.js";
 import { t as o } from "../useFloatingViewportSync-DZdJ7W8n.js";
 import { t as s } from "../Scrollbar-DTeJ8P5b.js";
-import { t as c } from "../icon-DWXkh-RM.js";
+import { t as c } from "../icon-COrt_N8A.js";
 import { t as l } from "../key-CaQYVkjh.js";
 import { t as u } from "../FlyoutSubmenu-BrUPmJa1.js";
 import { c as d } from "../config-CapALqt3.js";
 import { n as f } from "../locale-Bzm2nbEp.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 ne, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useAttrs as re, watch as ie, withCtx as N } from "vue";
+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";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
-var P = {
+var F = {
 	key: 0,
 	class: "m-dropdown__separator",
 	role: "separator"
-}, F = {
+}, I = {
 	key: 1,
 	class: "m-dropdown__group"
-}, I = { class: "m-dropdown__group-label" }, L = ["onMouseenter"], R = ["disabled"], z = {
+}, L = { class: "m-dropdown__group-label" }, R = ["onMouseenter"], z = ["disabled"], B = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, B = {
+}, V = {
 	class: "m-dropdown__caret",
 	"aria-hidden": "true"
-}, V = [
+}, H = [
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], H = {
+], U = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, U = /* @__PURE__ */ C({
+}, W = /* @__PURE__ */ C({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
 		highlightedValue: {}
 	},
-	emits: ["select", "highlight"],
+	emits: [
+		"select",
+		"highlight",
+		"submenuEnter",
+		"submenuLeave"
+	],
 	setup(e, { emit: n }) {
-		let r = n, i = O(null), a = O(null), o;
+		let r = n, i = k(null), a = k(null), o;
 		function d() {
 			o && clearTimeout(o), o = void 0;
 		}
@@ -61,35 +66,41 @@ var P = {
 		function g(e, t) {
 			return l(e, t, "dd");
 		}
-		function b(e) {
+		function C(e) {
 			return c(e.icon);
 		}
-		function C(e, t, n) {
+		function w(e, t, n) {
 			if (e.disabled || m(e) || h(e) || (d(), r("highlight", e.value), !e.items?.length)) return;
 			i.value = g(e, t);
 			let o = n.currentTarget;
 			a.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
 		}
-		function w() {
-			f();
-		}
 		function te() {
-			d();
+			f();
 		}
 		function E() {
-			f();
+			d(), r("submenuEnter");
 		}
-		return (n, r) => (D(!0), v(p, null, k(e.items, (o, c) => (D(), v(p, { key: g(o, c) }, [m(o) ? (D(), v("div", P)) : h(o) ? (D(), v("div", F, [y("div", I, j(o.label), 1), o.items?.length ? (D(), ee(U, {
+		function D() {
+			f(), r("submenuLeave");
+		}
+		return (n, r) => (O(!0), v(p, null, A(e.items, (o, c) => (O(), v(p, { key: g(o, c) }, [m(o) ? (O(), v("div", F)) : h(o) ? (O(), v("div", I, [y("div", L, M(o.label), 1), o.items?.length ? (O(), ee(W, {
 			key: 0,
 			items: o.items,
 			"highlighted-value": e.highlightedValue,
 			onSelect: r[0] ||= (e) => n.$emit("select", e),
-			onHighlight: r[1] ||= (e) => n.$emit("highlight", e)
-		}, null, 8, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (D(), v("div", {
+			onHighlight: r[1] ||= (e) => n.$emit("highlight", e),
+			onSubmenuEnter: E,
+			onSubmenuLeave: D
+		}, b({ _: 2 }, [n.$slots.item ? {
+			name: "item",
+			fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+			key: "0"
+		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (O(), v("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => C(o, c, e),
-			onMouseleave: w
+			onMouseenter: (e) => w(o, c, e),
+			onMouseleave: te
 		}, [y("button", {
 			type: "button",
 			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
@@ -97,38 +108,44 @@ var P = {
 			disabled: o.disabled,
 			"aria-haspopup": !0
 		}, [
-			b(o) ? (D(), v("span", z, [S(t, {
-				name: b(o),
+			C(o) ? (O(), v("span", B, [S(t, {
+				name: C(o),
 				size: "sm"
 			}, null, 8, ["name"])])) : _("", !0),
-			A(n.$slots, "item", { item: o }, () => [x(j(o.label), 1)]),
-			y("span", B, [S(t, {
+			j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)]),
+			y("span", V, [S(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 10, R), S(u, {
+		], 10, z), S(u, {
 			open: i.value === g(o, c),
 			anchor: i.value === g(o, c) ? a.value : null,
 			"panel-class": "m-dropdown__submenu",
-			onEnter: te,
-			onLeave: E
+			onEnter: E,
+			onLeave: D
 		}, {
-			default: N(() => [S(s, {
+			default: P(() => [S(s, {
 				class: "m-dropdown__submenu-scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__submenu-wrap-inner",
 				"view-class": "m-dropdown__submenu-view"
 			}, {
-				default: N(() => [S(U, {
+				default: P(() => [S(W, {
 					items: o.items,
 					"highlighted-value": e.highlightedValue,
 					onSelect: r[2] ||= (e) => n.$emit("select", e),
-					onHighlight: r[3] ||= (e) => n.$emit("highlight", e)
-				}, null, 8, ["items", "highlighted-value"])]),
+					onHighlight: r[3] ||= (e) => n.$emit("highlight", e),
+					onSubmenuEnter: E,
+					onSubmenuLeave: D
+				}, b({ _: 2 }, [n.$slots.item ? {
+					name: "item",
+					fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+					key: "0"
+				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1032, ["open", "anchor"])], 40, L)) : (D(), v("button", {
+		}, 1032, ["open", "anchor"])], 40, R)) : (O(), v("button", {
 			key: 3,
 			type: "button",
 			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
@@ -136,12 +153,12 @@ var P = {
 			disabled: o.disabled,
 			onMouseenter: (e) => !o.disabled && n.$emit("highlight", o.value),
 			onClick: (e) => n.$emit("select", o)
-		}, [b(o) ? (D(), v("span", H, [S(t, {
-			name: b(o),
+		}, [C(o) ? (O(), v("span", U, [S(t, {
+			name: C(o),
 			size: "sm"
-		}, null, 8, ["name"])])) : _("", !0), A(n.$slots, "item", { item: o }, () => [x(j(o.label), 1)])], 42, V))], 64))), 128));
+		}, null, 8, ["name"])])) : _("", !0), j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)])], 42, H))], 64))), 128));
 	}
-}), ae = ["aria-expanded"], W = /* @__PURE__ */ C({
+}), ie = ["aria-expanded"], G = /* @__PURE__ */ C({
 	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
@@ -171,104 +188,104 @@ var P = {
 	},
 	emits: ["update:modelValue", "select"],
 	setup(t, { emit: c }) {
-		let l = t, u = c, p = re(), { rootAttrs: C } = e(p, () => l.pt), k = d(), { transitionName: P, transitionCss: F } = n({
+		let l = t, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = n({
 			role: "popup",
 			local: () => l.transition,
 			componentName: "Dropdown",
 			fallback: "scale-fade"
-		}), I = f(), L = O(null), R = O(null), z = O(null), B = O({}), V = O(-1), H = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), W = g(() => H.value[V.value]?.value), G, K, q = g(() => r(l, k.value.appendTo)), J = g(() => i(l, k.value.appendTo));
-		function oe() {
-			V.value = H.value.length ? 0 : -1;
+		}), 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(() => r(l, A.value.appendTo)), Y = g(() => i(l, A.value.appendTo));
+		function ae() {
+			H.value = U.value.length ? 0 : -1;
 		}
-		function Y() {
-			if (!J.value || !R.value) return;
-			let e = R.value.getBoundingClientRect();
-			B.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		function X() {
+			if (!Y.value || !z.value) return;
+			let e = z.value.getBoundingClientRect();
+			V.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
-		function X(e) {
-			u("update:modelValue", e), e && (oe(), te(() => {
-				Y(), z.value?.focus({ preventScroll: !0 });
+		function Z(e) {
+			u("update:modelValue", e), e && (ae(), te(() => {
+				X(), B.value?.focus({ preventScroll: !0 });
 			}));
 		}
-		function se() {
-			X(!l.modelValue);
+		function oe() {
+			Z(!l.modelValue);
 		}
-		function ce() {
-			l.modelValue && Y();
+		function se() {
+			l.modelValue && X();
 		}
-		function Z(e) {
-			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && X(!1));
+		function ce(e) {
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && Z(!1));
 		}
 		function Q() {
-			G && clearTimeout(G), K && clearTimeout(K), G = void 0, K = void 0;
+			K && clearTimeout(K), q && clearTimeout(q), K = void 0, q = void 0;
 		}
 		function le() {
-			l.trigger === "hover" && (Q(), G = setTimeout(X, l.showDelay, !0));
+			l.trigger === "hover" && (Q(), K = setTimeout(Z, l.showDelay, !0));
 		}
 		function ue() {
-			l.trigger === "hover" && (Q(), K = setTimeout(X, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
 		function de() {
 			l.trigger === "hover" && Q();
 		}
 		function fe() {
-			l.trigger === "hover" && (Q(), K = setTimeout(X, l.hideDelay, !1));
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
 		function pe(e) {
 			if (l.modelValue) {
 				if (e.key === "Escape") {
-					e.preventDefault(), X(!1), R.value?.focus({ preventScroll: !0 });
+					e.preventDefault(), Z(!1), z.value?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = e.key === "ArrowDown" ? 1 : -1, n = H.value.length;
-					n && (V.value = (V.value + t + n) % n);
+					let t = e.key === "ArrowDown" ? 1 : -1, n = U.value.length;
+					n && (H.value = (H.value + t + n) % n);
 				}
-				if (e.key === "Home" && (e.preventDefault(), V.value = 0), e.key === "End" && (e.preventDefault(), V.value = H.value.length - 1), e.key === "Enter" || e.key === " ") {
-					let t = H.value[V.value];
-					V.value >= 0 && t && (e.preventDefault(), Z(t));
+				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));
 				}
 			}
 		}
 		function me(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || X(!0));
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
 		}
 		function $(e) {
-			l.modelValue && L.value && !L.value.contains(e.target) && !z.value?.contains(e.target) && X(!1);
+			l.modelValue && R.value && !R.value.contains(e.target) && !B.value?.contains(e.target) && Z(!1);
 		}
-		return ie(() => l.modelValue, (e) => {
+		return re(() => l.modelValue, (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), o(() => l.modelValue && J.value, ce), ne(() => {
+		}, { immediate: !0 }), o(() => l.modelValue && Y.value, se), D(() => {
 			document.removeEventListener("click", $), Q();
-		}), (e, n) => (D(), v("div", w({
+		}), (e, n) => (O(), v("div", w({
 			ref_key: "root",
-			ref: L
-		}, M(C), { class: "m-dropdown" }), [y("span", {
+			ref: R
+		}, N(C), { class: "m-dropdown" }), [y("span", {
 			ref_key: "trigger",
-			ref: R,
+			ref: z,
 			class: "m-dropdown__trigger",
 			role: "button",
 			tabindex: "0",
 			"aria-expanded": t.modelValue,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => l.trigger === "click" && se(),
+			onClick: n[0] ||= (e) => l.trigger === "click" && oe(),
 			onMouseenter: le,
 			onMouseleave: ue,
 			onKeydown: me
-		}, [A(e.$slots, "trigger", {}, () => [x(j(M(I).openMenu), 1)])], 40, ae), (D(), ee(m, {
-			to: q.value.to,
-			disabled: q.value.disabled
+		}, [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: M(P),
-			css: M(F)
+			name: N(F),
+			css: N(I)
 		}, {
-			default: N(() => [t.modelValue ? (D(), v("div", {
+			default: P(() => [t.modelValue ? (O(), v("div", {
 				key: 0,
 				ref_key: "menu",
-				ref: z,
-				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": J.value }]]),
-				style: E(J.value ? B.value : void 0),
+				ref: B,
+				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
+				style: E(Y.value ? V.value : void 0),
 				role: "menu",
 				tabindex: "-1",
 				onKeydown: pe,
@@ -280,14 +297,16 @@ var P = {
 				"wrap-class": "m-dropdown__scroll-wrap",
 				"view-class": "m-dropdown__scroll-view"
 			}, {
-				default: N(() => [S(U, {
+				default: P(() => [S(W, {
 					items: t.items,
-					"highlighted-value": W.value,
-					onSelect: Z,
-					onHighlight: n[1] ||= (e) => V.value = H.value.findIndex((t) => t.value === e)
+					"highlighted-value": G.value,
+					onSelect: ce,
+					onHighlight: n[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
+					onSubmenuEnter: de,
+					onSubmenuLeave: fe
 				}, b({ _: 2 }, [e.$slots.item ? {
 					name: "item",
-					fn: N(({ item: t }) => [A(e.$slots, "item", { item: t })]),
+					fn: P(({ item: t }) => [j(e.$slots, "item", { item: t })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 3
@@ -297,4 +316,4 @@ var P = {
 	}
 });
 //#endregion
-export { W as MDropdown };
+export { G as MDropdown };

package/dist/dropdown/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-icon {
     color: currentColor;
     display: inline-flex;
@@ -1243,12 +1192,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;
@@ -1378,14 +1321,6 @@
     opacity: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar__thumb,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-leave-active {
-        transition: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-scrollbar__thumb,
 :root[data-m-motion='none'] .m-scrollbar-fade-enter-active,
 :root[data-m-motion='none'] .m-scrollbar-fade-leave-active,
@@ -1426,10 +1361,16 @@
     box-shadow: var(--m-shadow-md);
     display: grid;
     gap: var(--m-space-1);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: var(--m-dropdown-menu-min-width);
+    overflow: hidden;
     padding: var(--m-space-1);
     position: absolute;
     top: calc(100% + var(--m-space-2));
+    /* Grow with the content: the default shrink-to-fit width of an abs/fixed
+       box is clamped by its containing block (the trigger width when not
+       teleported), so long items would be clipped instead of widening the menu. */
+    width: max-content;
     z-index: var(--m-z-popper);
 }
 
@@ -1467,9 +1408,10 @@
     cursor: pointer;
     display: flex;
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-md);
-    min-height: var(--m-menu-item-height);
-    padding: var(--m-space-2) var(--m-space-3);
+    font-size: var(--m-control-font-medium);
+    gap: var(--m-space-2);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
     text-align: left;
     transition:
         background-color var(--m-motion-fast) var(--m-motion-ease),
@@ -1477,6 +1419,10 @@
     white-space: nowrap;
 }
 
+.m-dropdown__caret {
+    margin-left: auto;
+}
+
 .m-dropdown__item:hover:not(:disabled),
 .m-dropdown__item--highlighted:not(:disabled) {
     background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
@@ -1484,7 +1430,8 @@
 }
 
 .m-dropdown__item:focus-visible {
-    box-shadow: var(--m-focus-shadow);
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
     outline: none;
 }
 
@@ -1500,8 +1447,15 @@
     margin: var(--m-space-1) 0;
 }
 
+/* Groups nest items in a wrapper div, outside the scroll-view grid: restate
+   the grid so grouped items keep the same gap rhythm and stretch full width. */
+.m-dropdown__group {
+    display: grid;
+    gap: var(--m-space-1);
+}
+
 .m-dropdown__group-label {
     color: var(--m-color-text-muted);
     font-size: var(--m-font-size-xs);
-    padding: var(--m-space-2) var(--m-space-3) var(--m-space-1);
+    padding: var(--m-space-2) var(--m-control-padding-x-medium) var(--m-space-1);
 }