morya-ui 0.3.0 → 0.3.2

package/dist/layout/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,
@@ -1764,7 +1699,10 @@
 .m-layout-sider__bar-bottom {
     background: var(--m-color-text-muted);
     border-radius: var(--m-radius-sm);
-    height: calc(var(--m-space-8) + var(--m-space-2) - var(--m-space-1));
+    /* The bars overlap by --m-space-1 at the joint: the rounded tips stay
+       hidden inside each other when straight, and close the chevron vertex
+       on hover. */
+    height: calc(var(--m-space-8) + var(--m-space-2) - var(--m-space-1) / 2);
     left: calc(var(--m-space-3) + var(--m-space-1));
     position: absolute;
     transition:
@@ -1778,7 +1716,7 @@
 }
 
 .m-layout-sider__bar-bottom {
-    top: calc(var(--m-space-8) + var(--m-space-1));
+    top: calc(var(--m-space-8) + var(--m-space-1) / 2);
 }
 
 .m-layout-sider__trigger--bar:hover .m-layout-sider__bar-top {
@@ -1808,18 +1746,6 @@
     top: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-layout,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-header,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-footer,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-sider,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-sider__arrow,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-sider__bar-top,
-    html:not([data-m-ignore-reduced-motion]) .m-layout-sider__bar-bottom {
-        transition: none;
-    }
-}
-
 [data-m-motion="reduced"] .m-layout,
 [data-m-motion="reduced"] .m-layout-header,
 [data-m-motion="reduced"] .m-layout-footer,

package/dist/listbox/index.js

@@ -1,36 +1,37 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as n } from "../Scrollbar-DTeJ8P5b.js";
-import { t as r } from "../useFieldFeedback-C5qIqYMK.js";
+import { t as r } from "../filterByQuery-Bczaxzih.js";
 import { t as i } from "../VirtualScroller-CHoFCmpP.js";
-import { o as a } from "../config-CapALqt3.js";
-import { n as o } from "../locale-Bzm2nbEp.js";
+import { t as a } from "../useFieldFeedback-C5qIqYMK.js";
+import { o } from "../config-CapALqt3.js";
+import { n as s } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeProps as ee, nextTick as te, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, vModelText as w, watch as T, withCtx as E, withDirectives as ne } from "vue";
+import { Fragment as ee, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as te, defineComponent as m, mergeProps as ne, nextTick as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, vModelText as w, watch as re, withCtx as T, withDirectives as ie } from "vue";
 //#region src/components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var re = [
+var ae = [
 	"placeholder",
 	"disabled",
 	"aria-label"
-], ie = [
+], oe = [
 	"aria-selected",
 	"disabled",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], ae = [
+], se = [
 	"aria-selected",
 	"disabled",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], oe = {
+], ce = {
 	key: 0,
 	class: "m-listbox__empty"
-}, se = {
+}, le = {
 	key: 3,
 	class: "m-listbox__empty"
-}, ce = 80, D = /* @__PURE__ */ h({
+}, E = 80, D = /* @__PURE__ */ m({
 	inheritAttrs: !1,
 	__name: "Listbox",
 	props: {
@@ -62,11 +63,8 @@ var re = [
 		pt: {}
 	},
 	emits: ["update:modelValue"],
-	setup(h, { emit: D }) {
-		let O = h, k = D, A = C(), { rootAttrs: j } = e(A, () => O.pt), M = v(""), N = o(), P = a("Listbox", () => O.size), { isInvalid: F } = r(O), I = c(() => O.emptyMessage ?? N.value.emptyOptions), L = c(() => O.listStyle), R = c(() => {
-			let e = M.value.trim().toLowerCase();
-			return e ? O.options.filter((t) => t.label.toLowerCase().includes(e)) : O.options;
-		}), z = c(() => O.virtual === !1 ? !1 : O.virtual === !0 || R.value.length >= ce), B = c(() => P.value === "small" ? 28 : P.value === "large" ? 40 : 34), V = c(() => Math.min(280, Math.max(B.value * 5, R.value.length * B.value))), H = c(() => [
+	setup(m, { emit: D }) {
+		let O = m, k = D, A = C(), { rootAttrs: j } = e(A, () => O.pt), M = v(""), N = s(), P = o("Listbox", () => O.size), { isInvalid: F } = a(O), I = c(() => O.emptyMessage ?? N.value.emptyOptions), L = c(() => O.listStyle), R = c(() => r(O.options, M.value)), z = c(() => O.virtual === !1 ? !1 : O.virtual === !0 || R.value.length >= E), B = c(() => P.value === "small" ? 28 : P.value === "large" ? 40 : 34), V = c(() => Math.min(280, Math.max(B.value * 5, R.value.length * B.value))), H = c(() => [
 			"m-listbox",
 			`m-listbox--${P.value}`,
 			{
@@ -111,12 +109,12 @@ var re = [
 		}
 		async function Q() {
 			let e = X.activeIndex.value;
-			e < 0 || (z.value && (J.value?.scrollToIndex(e), await te()), (z.value ? q.value?.querySelector(`[data-index="${e}"] .m-listbox__option`) : Y()?.querySelectorAll(".m-listbox__option")[e])?.focus({ preventScroll: !0 }));
+			e < 0 || (z.value && (J.value?.scrollToIndex(e), await h()), (z.value ? q.value?.querySelector(`[data-index="${e}"] .m-listbox__option`) : Y()?.querySelectorAll(".m-listbox__option")[e])?.focus({ preventScroll: !0 }));
 		}
 		function $(e) {
 			X.onKeydown(e);
 		}
-		function le(e) {
+		function ue(e) {
 			[
 				"ArrowUp",
 				"ArrowDown",
@@ -125,26 +123,26 @@ var re = [
 				"Enter"
 			].includes(e.key) && (X.onKeydown(e), Q());
 		}
-		return T(X.activeIndex, () => {
+		return re(X.activeIndex, () => {
 			Y()?.contains(document.activeElement) && Q();
-		}), (e, t) => (_(), d("div", ee(S(j), { class: H.value }), [
-			h.filter ? ne((_(), d("input", {
+		}), (e, t) => (_(), d("div", ne(S(j), { class: H.value }), [
+			m.filter ? ie((_(), d("input", {
 				key: 0,
 				"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
 				class: "m-listbox__filter",
 				type: "search",
 				placeholder: S(N).filterOptions,
-				disabled: h.disabled,
+				disabled: m.disabled,
 				"aria-label": S(N).filterOptions,
-				onKeydown: le
-			}, null, 40, re)), [[w, M.value]]) : u("", !0),
+				onKeydown: ue
+			}, null, 40, ae)), [[w, M.value]]) : u("", !0),
 			z.value && R.value.length ? (_(), d("div", {
 				key: 1,
 				ref_key: "virtualHost",
 				ref: q,
 				class: "m-listbox__virtual-host",
 				onKeydown: $
-			}, [m(i, {
+			}, [te(i, {
 				ref_key: "virtualList",
 				ref: J,
 				class: "m-listbox__list m-listbox__list--virtual",
@@ -155,16 +153,16 @@ var re = [
 				height: V.value,
 				buffer: 4
 			}, {
-				item: E(({ item: t, index: n }) => [f("button", {
+				item: T(({ item: t, index: n }) => [f("button", {
 					type: "button",
 					class: g(["m-listbox__option", { "m-listbox__option--selected": U(G(t).value) }]),
 					role: "option",
 					"aria-selected": U(G(t).value),
-					disabled: h.disabled || G(t).disabled,
+					disabled: m.disabled || G(t).disabled,
 					tabindex: Z(n),
 					onClick: (e) => W(G(t)),
 					onFocus: (e) => S(X).setActive(n)
-				}, [b(e.$slots, "option", { option: G(t) }, () => [p(x(G(t).label), 1)])], 42, ie)]),
+				}, [b(e.$slots, "option", { option: G(t) }, () => [p(x(G(t).label), 1)])], 42, oe)]),
 				_: 3
 			}, 8, [
 				"aria-label",
@@ -182,10 +180,10 @@ var re = [
 				"view-class": "m-listbox__list-view",
 				"view-style": L.value,
 				"aria-label": S(N).selectOption,
-				"aria-multiselectable": h.multiple || void 0,
+				"aria-multiselectable": m.multiple || void 0,
 				onKeydown: $
 			}, {
-				default: E(() => [(_(!0), d(s, null, y(R.value, (t, n) => (_(), d("li", {
+				default: T(() => [(_(!0), d(ee, null, y(R.value, (t, n) => (_(), d("li", {
 					key: String(t.value),
 					role: "presentation"
 				}, [f("button", {
@@ -193,18 +191,18 @@ var re = [
 					class: g(["m-listbox__option", { "m-listbox__option--selected": U(t.value) }]),
 					role: "option",
 					"aria-selected": U(t.value),
-					disabled: h.disabled || t.disabled,
+					disabled: m.disabled || t.disabled,
 					tabindex: Z(n),
 					onClick: (e) => W(t),
 					onFocus: (e) => S(X).setActive(n)
-				}, [b(e.$slots, "option", { option: t }, () => [p(x(t.label), 1)])], 42, ae)]))), 128)), R.value.length ? u("", !0) : (_(), d("li", oe, x(I.value), 1))]),
+				}, [b(e.$slots, "option", { option: t }, () => [p(x(t.label), 1)])], 42, se)]))), 128)), R.value.length ? u("", !0) : (_(), d("li", ce, x(I.value), 1))]),
 				_: 3
 			}, 8, [
 				"view-style",
 				"aria-label",
 				"aria-multiselectable"
 			])),
-			z.value && !R.value.length ? (_(), d("div", se, x(I.value), 1)) : u("", !0)
+			z.value && !R.value.length ? (_(), d("div", le, x(I.value), 1)) : u("", !0)
 		], 16));
 	}
 });

package/dist/listbox/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-scrollbar {
     --m-scrollbar-track-size: 6px;
     --m-scrollbar-inset: 0.125rem;
@@ -1323,14 +1272,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,