morya-ui 0.3.0 → 0.3.2

package/dist/carousel/index.js

@@ -1,8 +1,8 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { n } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, watch as S } from "vue";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as ee, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, watch as S } from "vue";
 //#region src/components/Carousel/Carousel.vue?vue&type=script&setup=true&lang.ts
 var C = ["aria-label", "disabled"], w = { class: "m-carousel__main" }, T = {
 	key: 0,
@@ -39,58 +39,64 @@ var C = ["aria-label", "disabled"], w = { class: "m-carousel__main" }, T = {
 	},
 	emits: ["update:page"],
 	setup(u, { emit: k }) {
-		let A = u, j = k, M = x(), { rootAttrs: N } = e(M, () => A.pt), P = g(0), F = i(() => A.page ?? P.value), I = n(), L = null, R = i(() => Math.max(0, A.value.length - A.numVisible)), z = i(() => Array.from({ length: R.value + 1 }, (e, t) => t)), B = i(() => {
-			let e = Math.min(F.value, R.value);
-			return A.value.slice(e, e + A.numVisible).map((t, n) => ({
-				item: t,
-				index: e + n
-			}));
+		let A = u, j = k, te = x(), { rootAttrs: M } = e(te, () => A.pt), N = g(0), P = i(() => A.page ?? N.value), F = n(), I = g(!1), L = null, R = i(() => A.value.length), z = i(() => Math.max(1, A.numVisible)), B = i(() => Math.max(0, R.value - z.value)), V = i(() => Array.from({ length: B.value + 1 }, (e, t) => t)), H = i(() => {
+			let e = Math.max(R.value, 1), t = z.value;
+			return {
+				"--m-carousel-page": String(P.value),
+				"--m-carousel-count": String(e),
+				"--m-carousel-visible": String(t)
+			};
 		});
-		function V(e) {
-			let t = e;
+		function U(e) {
+			let t = P.value, n = e, r = !1;
 			if (A.circular) {
-				let n = R.value + 1;
-				t = (e % n + n) % n;
-			} else t = Math.min(R.value, Math.max(0, e));
-			P.value = t, j("update:page", t);
+				let t = B.value + 1;
+				if (t <= 0) return;
+				(e < 0 || e > B.value) && (r = !0), n = (e % t + t) % t;
+			} else n = Math.min(B.value, Math.max(0, e));
+			n !== t && (r && (I.value = !0), N.value = n, j("update:page", n), r && ee(() => {
+				requestAnimationFrame(() => {
+					I.value = !1;
+				});
+			}));
 		}
-		S(R, (e) => {
-			P.value > e && (P.value = e);
+		S(B, (e) => {
+			N.value > e && (N.value = e);
 		});
-		function H() {
-			V(F.value - 1);
-		}
-		function U() {
-			V(F.value + 1);
+		function W() {
+			U(P.value - 1);
 		}
-		function W(e) {
-			e.key === "ArrowLeft" ? (e.preventDefault(), H()) : e.key === "ArrowRight" && (e.preventDefault(), U());
+		function G() {
+			U(P.value + 1);
 		}
-		let G = null;
 		function K(e) {
-			!e.isPrimary || e.pointerType === "mouse" || (G = e.clientX);
+			e.key === "ArrowLeft" ? (e.preventDefault(), W()) : e.key === "ArrowRight" && (e.preventDefault(), G());
 		}
-		function q(e) {
-			if (G === null || !e.isPrimary) return;
-			let t = e.clientX - G;
-			G = null, !(Math.abs(t) < O) && (t > 0 ? H() : U());
-		}
-		function J() {
-			G = null;
+		let q = null;
+		function J(e) {
+			!e.isPrimary || e.pointerType === "mouse" || (q = e.clientX);
 		}
 		function Y(e) {
-			return I.value.carouselPage.replace("{index}", String(e + 1)).replace("{total}", String(z.value.length));
+			if (q === null || !e.isPrimary) return;
+			let t = e.clientX - q;
+			q = null, !(Math.abs(t) < O) && (t > 0 ? W() : G());
 		}
 		function X() {
+			q = null;
+		}
+		function Z(e) {
+			return F.value.carouselPage.replace("{index}", String(e + 1)).replace("{total}", String(V.value.length));
+		}
+		function Q() {
 			L !== null && (clearInterval(L), L = null);
 		}
-		function Z() {
-			X(), !(!A.autoplay || A.value.length <= A.numVisible) && (L = setInterval(() => {
-				if (!A.circular && F.value >= R.value) {
-					V(0);
+		function $() {
+			Q(), !(!A.autoplay || A.value.length <= A.numVisible) && (L = setInterval(() => {
+				if (!A.circular && P.value >= B.value) {
+					U(0);
 					return;
 				}
-				U();
+				G();
 			}, Math.max(400, A.interval)));
 		}
 		return S(() => [
@@ -98,52 +104,54 @@ var C = ["aria-label", "disabled"], w = { class: "m-carousel__main" }, T = {
 			A.interval,
 			A.value.length,
 			A.numVisible
-		], () => Z(), { immediate: !0 }), m(X), (e, n) => (h(), o("div", d(b(N), {
+		], () => $(), { immediate: !0 }), m(Q), (e, n) => (h(), o("div", d(b(M), {
 			class: "m-carousel",
-			onKeydown: W,
-			onMouseenter: X,
-			onMouseleave: Z,
-			onFocusin: X,
-			onFocusout: Z
+			onKeydown: K,
+			onMouseenter: Q,
+			onMouseleave: $,
+			onFocusin: Q,
+			onFocusout: $
 		}), [
 			u.showArrows ? (h(), o("button", {
 				key: 0,
 				type: "button",
 				class: "m-carousel__nav m-carousel__nav--prev",
-				"aria-label": b(I).prev,
-				disabled: !u.circular && F.value <= 0,
-				onClick: H
+				"aria-label": b(F).prev,
+				disabled: !u.circular && P.value <= 0,
+				onClick: W
 			}, [l(t, {
 				name: "chevron-left",
 				size: "sm"
 			})], 8, C)) : a("", !0),
 			s("div", w, [s("div", {
 				class: "m-carousel__viewport",
-				onPointerdown: K,
-				onPointerup: q,
-				onPointercancel: J
-			}, [(h(!0), o(r, null, _(B.value, (t) => (h(), o("div", {
-				key: t.index,
-				class: "m-carousel__item",
-				style: p({ flex: `0 0 ${100 / u.numVisible}%` })
+				onPointerdown: J,
+				onPointerup: Y,
+				onPointercancel: X
+			}, [s("div", {
+				class: f(["m-carousel__track", { "m-carousel__track--instant": I.value }]),
+				style: p(H.value)
+			}, [(h(!0), o(r, null, _(u.value, (t, n) => (h(), o("div", {
+				key: n,
+				class: "m-carousel__item"
 			}, [v(e.$slots, "item", {
-				item: t.item,
-				index: t.index
-			}, () => [c(y(t.item), 1)])], 4))), 128))], 32), u.showIndicators && z.value.length > 1 ? (h(), o("div", T, [(h(!0), o(r, null, _(z.value, (e) => (h(), o("button", {
+				item: t,
+				index: n
+			}, () => [c(y(t), 1)])]))), 128))], 6)], 32), u.showIndicators && V.value.length > 1 ? (h(), o("div", T, [(h(!0), o(r, null, _(V.value, (e) => (h(), o("button", {
 				key: e,
 				type: "button",
-				class: f(["m-carousel__indicator", { "m-carousel__indicator--active": e === F.value }]),
-				"aria-label": Y(e),
-				"aria-current": e === F.value ? "true" : void 0,
-				onClick: (t) => V(e)
+				class: f(["m-carousel__indicator", { "m-carousel__indicator--active": e === P.value }]),
+				"aria-label": Z(e),
+				"aria-current": e === P.value ? "true" : void 0,
+				onClick: (t) => U(e)
 			}, null, 10, E))), 128))])) : a("", !0)]),
 			u.showArrows ? (h(), o("button", {
 				key: 1,
 				type: "button",
 				class: "m-carousel__nav m-carousel__nav--next",
-				"aria-label": b(I).next,
-				disabled: !u.circular && F.value >= R.value,
-				onClick: U
+				"aria-label": b(F).next,
+				disabled: !u.circular && P.value >= B.value,
+				onClick: G
 			}, [l(t, {
 				name: "chevron-right",
 				size: "sm"

package/dist/carousel/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;
@@ -1257,6 +1200,7 @@
 /* —— Media: Carousel —— */
 .m-carousel {
     --m-carousel-indicator-size: 0.45rem;
+    --m-carousel-gap: var(--m-space-2);
     align-items: center;
     display: flex;
     gap: var(--m-space-2);
@@ -1264,20 +1208,36 @@
 }
 
 .m-carousel__viewport {
-    display: flex;
-    flex: 1;
-    gap: var(--m-space-2);
-    min-width: 0;
+    margin-inline: calc(var(--m-carousel-gap) / -2);
     overflow: hidden;
     touch-action: pan-y;
+    width: 100%;
+}
+
+.m-carousel__track {
+    --m-carousel-page: 0;
+    --m-carousel-count: 1;
+    --m-carousel-visible: 1;
+    display: flex;
+    transform: translate3d(
+        calc(-100% * var(--m-carousel-page) / var(--m-carousel-count)),
+        0,
+        0
+    );
+    transition: transform var(--m-motion-normal) var(--m-motion-ease);
+    width: calc(100% * var(--m-carousel-count) / var(--m-carousel-visible));
+    will-change: transform;
+}
+
+.m-carousel__track--instant {
+    transition: none;
 }
 
 .m-carousel__item {
     box-sizing: border-box;
+    flex: 0 0 calc(100% / var(--m-carousel-count));
     min-width: 0;
-    transition:
-        opacity var(--m-motion-normal) var(--m-motion-ease),
-        transform var(--m-motion-normal) var(--m-motion-ease);
+    padding-inline: calc(var(--m-carousel-gap) / 2);
 }
 
 .m-carousel__main {
@@ -1334,13 +1294,7 @@
     outline: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-carousel__item {
-        transition: none;
-    }
-}
-
-[data-m-motion="reduced"] .m-carousel__item,
-[data-m-motion="none"] .m-carousel__item {
+[data-m-motion="reduced"] .m-carousel__track,
+[data-m-motion="none"] .m-carousel__track {
     transition: none;
 }

package/dist/cascade-select/index.js

@@ -1,5 +1,5 @@
 import { i 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 ee } from "../overlayPlacement-Cd20JTD_.js";

package/dist/cascade-select/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;
-    }
-}
-
 /* Shared picker suffix slot: clear + dropdown indicator (Select, TreeSelect). */
 .m-select__control {
     --m-control-end-padding: var(--m-control-affix-padding);
@@ -1578,21 +1527,29 @@
 
 .m-select__filter,
 .m-treeselect__filter {
+    /* size="1" + min-width:0 keep intrinsic width from inflating width:max-content menus */
+    align-self: stretch;
     background: var(--m-color-surface);
-    border: 0;
-    border-bottom: var(--m-border-width) solid var(--m-color-border);
+    border: var(--m-border-width) solid var(--m-color-border);
     border-radius: var(--m-radius-sm);
     box-sizing: border-box;
     color: var(--m-color-text);
     flex: 0 0 auto;
-    font: inherit;
-    margin: calc(var(--m-space-1) * -1) calc(var(--m-space-1) * -1) 0;
-    padding: var(--m-space-2) var(--m-space-3);
-    width: calc(100% + var(--m-space-1) * 2);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-small);
+    height: var(--m-control-height-small);
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    margin: var(--m-space-2);
+    max-width: calc(100% - 2 * var(--m-space-2));
+    min-width: 0;
+    outline: none;
+    padding: 0 var(--m-control-padding-x-small);
+    width: auto;
 }
 
 .m-select__filter:focus-visible,
 .m-treeselect__filter:focus-visible {
+    border-color: var(--m-color-primary-hover);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
@@ -1641,12 +1598,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;
@@ -1776,14 +1727,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,