morya-ui 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (255) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/dist/Button-gBiRj7wz.js +227 -0
  3. package/dist/{Card-Dsmnzong.js → Card-B1CB9Trm.js} +3 -5
  4. package/dist/Empty-C5tndBOm.js +147 -0
  5. package/dist/{FlyoutSubmenu-BrUPmJa1.js → FlyoutSubmenu-H_741alW.js} +2 -2
  6. package/dist/{Loading-BSsRs6v9.js → Loading-qS2Yv_gm.js} +1 -1
  7. package/dist/Pagination-Bvv2qvEK.js +166 -0
  8. package/dist/{Popover-BQ07q4VV.js → Popover-rnZG_ap0.js} +3 -3
  9. package/dist/Select-CiXd074W.js +572 -0
  10. package/dist/Skeleton-DCYdXAH2.js +59 -0
  11. package/dist/{Tooltip-D5DO0B3z.js → Tooltip-B02o9BOW.js} +3 -3
  12. package/dist/accordion/style.css +16 -71
  13. package/dist/auto-complete/index.js +120 -122
  14. package/dist/auto-complete/style.css +6 -82
  15. package/dist/avatar/style.css +6 -67
  16. package/dist/badge/style.css +6 -68
  17. package/dist/block-ui/index.js +1 -1
  18. package/dist/block-ui/style.css +6 -68
  19. package/dist/breadcrumb/style.css +6 -61
  20. package/dist/button/index.js +1 -1
  21. package/dist/button/style.css +345 -118
  22. package/dist/card/index.js +1 -1
  23. package/dist/card/style.css +26 -67
  24. package/dist/carousel/style.css +6 -73
  25. package/dist/cascade-select/index.js +3 -3
  26. package/dist/cascade-select/style.css +6 -75
  27. package/dist/checkbox/style.css +6 -61
  28. package/dist/chip/style.css +6 -67
  29. package/dist/command-menu/index.js +37 -39
  30. package/dist/command-menu/style.css +6 -75
  31. package/dist/components/Accordion/styles.css +10 -10
  32. package/dist/components/AutoComplete/AutoComplete.vue.d.ts.map +1 -1
  33. package/dist/components/AutoComplete/styles.css +0 -7
  34. package/dist/components/Badge/styles.css +0 -7
  35. package/dist/components/BlockUI/styles.css +0 -7
  36. package/dist/components/Button/Button.vue.d.ts +3 -0
  37. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  38. package/dist/components/Button/styles.css +339 -51
  39. package/dist/components/Button/types.d.ts +11 -2
  40. package/dist/components/Button/types.d.ts.map +1 -1
  41. package/dist/components/Card/Card.vue.d.ts +2 -2
  42. package/dist/components/Card/Card.vue.d.ts.map +1 -1
  43. package/dist/components/Card/index.d.ts +1 -1
  44. package/dist/components/Card/index.d.ts.map +1 -1
  45. package/dist/components/Card/styles.css +20 -6
  46. package/dist/components/Card/types.d.ts +4 -2
  47. package/dist/components/Card/types.d.ts.map +1 -1
  48. package/dist/components/Carousel/styles.css +0 -6
  49. package/dist/components/CommandMenu/CommandMenu.vue.d.ts.map +1 -1
  50. package/dist/components/ConfigProvider/ConfigProvider.vue.d.ts +2 -2
  51. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  52. package/dist/components/ContextMenu/styles.css +19 -14
  53. package/dist/components/Dialog/styles.css +3 -46
  54. package/dist/components/Dock/styles.css +0 -10
  55. package/dist/components/Drawer/styles.css +2 -51
  56. package/dist/components/Fieldset/styles.css +0 -7
  57. package/dist/components/FileUpload/FileUpload.vue.d.ts.map +1 -1
  58. package/dist/components/FileUpload/fileUtils.d.ts +8 -0
  59. package/dist/components/FileUpload/fileUtils.d.ts.map +1 -0
  60. package/dist/components/Gallery/styles.css +0 -8
  61. package/dist/components/Icon/styles.css +0 -6
  62. package/dist/components/Knob/styles.css +0 -6
  63. package/dist/components/Layout/styles.css +0 -12
  64. package/dist/components/Listbox/Listbox.vue.d.ts.map +1 -1
  65. package/dist/components/Loading/styles.css +0 -16
  66. package/dist/components/Menu/Menu.vue.d.ts.map +1 -1
  67. package/dist/components/Menu/styles.css +4 -11
  68. package/dist/components/Message/styles.css +0 -13
  69. package/dist/components/Page/PageContent.vue.d.ts +2 -1
  70. package/dist/components/Page/PageContent.vue.d.ts.map +1 -1
  71. package/dist/components/Page/PageFilterChips.vue.d.ts +16 -0
  72. package/dist/components/Page/PageFilterChips.vue.d.ts.map +1 -0
  73. package/dist/components/Page/PageFilters.vue.d.ts +15 -3
  74. package/dist/components/Page/PageFilters.vue.d.ts.map +1 -1
  75. package/dist/components/Page/PageHeader.vue.d.ts +8 -4
  76. package/dist/components/Page/PageHeader.vue.d.ts.map +1 -1
  77. package/dist/components/Page/PagePlaceholder.vue.d.ts +6 -2
  78. package/dist/components/Page/PagePlaceholder.vue.d.ts.map +1 -1
  79. package/dist/components/Page/PageSection.vue.d.ts +8 -2
  80. package/dist/components/Page/PageSection.vue.d.ts.map +1 -1
  81. package/dist/components/Page/PageStat.vue.d.ts +8 -3
  82. package/dist/components/Page/PageStat.vue.d.ts.map +1 -1
  83. package/dist/components/Page/index.d.ts +2 -1
  84. package/dist/components/Page/index.d.ts.map +1 -1
  85. package/dist/components/Page/styles.css +239 -44
  86. package/dist/components/Page/types.d.ts +40 -0
  87. package/dist/components/Page/types.d.ts.map +1 -1
  88. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  89. package/dist/components/Pagination/styles.css +7 -10
  90. package/dist/components/Pagination/types.d.ts +1 -1
  91. package/dist/components/Pagination/types.d.ts.map +1 -1
  92. package/dist/components/Panel/styles.css +0 -7
  93. package/dist/components/Popover/styles.css +21 -79
  94. package/dist/components/ProgressBar/styles.css +0 -9
  95. package/dist/components/ProgressSpinner/styles.css +0 -7
  96. package/dist/components/ScrollTop/styles.css +0 -7
  97. package/dist/components/Scrollbar/styles.css +0 -8
  98. package/dist/components/Select/Select.vue.d.ts +1 -3
  99. package/dist/components/Select/Select.vue.d.ts.map +1 -1
  100. package/dist/components/Select/selectOptions.d.ts +46 -0
  101. package/dist/components/Select/selectOptions.d.ts.map +1 -0
  102. package/dist/components/Select/styles.css +5 -7
  103. package/dist/components/Sidebar/styles.css +0 -6
  104. package/dist/components/Skeleton/styles.css +0 -6
  105. package/dist/components/Status/styles.css +0 -7
  106. package/dist/components/Switch/styles.css +0 -7
  107. package/dist/components/Table/hooks/useExpandableRow.d.ts.map +1 -1
  108. package/dist/components/Table/hooks/useTotalItems.d.ts.map +1 -1
  109. package/dist/components/Table/styles.css +7 -10
  110. package/dist/components/Table/tableQuery.d.ts +30 -0
  111. package/dist/components/Table/tableQuery.d.ts.map +1 -0
  112. package/dist/components/Tree/Tree.vue.d.ts.map +1 -1
  113. package/dist/components/Tree/treeQuery.d.ts +31 -0
  114. package/dist/components/Tree/treeQuery.d.ts.map +1 -0
  115. package/dist/components/TreeSelect/TreeSelect.vue.d.ts.map +1 -1
  116. package/dist/config-provider/index.js +1 -1
  117. package/dist/config-provider/style.css +345 -112
  118. package/dist/confirm-dialog/index.js +2 -2
  119. package/dist/confirm-dialog/style.css +348 -164
  120. package/dist/confirm-popup/index.js +5 -5
  121. package/dist/confirm-popup/style.css +345 -118
  122. package/dist/context-menu/index.js +105 -96
  123. package/dist/context-menu/style.css +25 -89
  124. package/dist/data-view/index.js +2 -2
  125. package/dist/data-view/style.css +13 -87
  126. package/dist/date-picker/index.js +3 -3
  127. package/dist/date-picker/style.css +6 -67
  128. package/dist/dialog/index.js +2 -2
  129. package/dist/dialog/style.css +348 -164
  130. package/dist/divider/style.css +6 -61
  131. package/dist/dock/style.css +6 -77
  132. package/dist/drawer/index.js +1 -1
  133. package/dist/drawer/style.css +8 -118
  134. package/dist/dropdown/index.js +4 -4
  135. package/dist/dropdown/style.css +6 -75
  136. package/dist/empty/index.js +5 -150
  137. package/dist/empty/style.css +6 -67
  138. package/dist/fieldset/style.css +6 -74
  139. package/dist/file-upload/index.js +147 -145
  140. package/dist/file-upload/style.css +6 -67
  141. package/dist/filterByQuery-Bczaxzih.js +17 -0
  142. package/dist/flex/style.css +6 -61
  143. package/dist/float-label/style.css +6 -61
  144. package/dist/fluid/style.css +6 -61
  145. package/dist/form/style.css +6 -61
  146. package/dist/gallery/style.css +6 -83
  147. package/dist/grid/style.css +6 -61
  148. package/dist/icon/style.css +6 -67
  149. package/dist/icon-field/style.css +6 -61
  150. package/dist/index.d.ts +3 -2
  151. package/dist/index.d.ts.map +1 -1
  152. package/dist/index.js +9135 -8796
  153. package/dist/inplace/style.css +6 -61
  154. package/dist/input/style.css +6 -67
  155. package/dist/input-color/style.css +6 -61
  156. package/dist/input-group/style.css +6 -61
  157. package/dist/input-number/style.css +6 -67
  158. package/dist/input-otp/style.css +6 -61
  159. package/dist/input-password/style.css +6 -67
  160. package/dist/input-tags/style.css +6 -67
  161. package/dist/knob/style.css +6 -67
  162. package/dist/label/style.css +6 -61
  163. package/dist/layout/style.css +6 -87
  164. package/dist/listbox/index.js +30 -32
  165. package/dist/listbox/style.css +6 -69
  166. package/dist/loading/index.js +1 -1
  167. package/dist/loading/style.css +6 -77
  168. package/dist/mega-menu/index.js +3 -3
  169. package/dist/mega-menu/style.css +6 -67
  170. package/dist/menu/index.js +268 -258
  171. package/dist/menu/style.css +31 -165
  172. package/dist/menubar/index.js +3 -3
  173. package/dist/menubar/style.css +6 -75
  174. package/dist/message/index.js +1 -1
  175. package/dist/message/style.css +6 -80
  176. package/dist/meter-group/style.css +6 -61
  177. package/dist/order-list/style.css +6 -67
  178. package/dist/{overlayPlacement-Cd20JTD_.js → overlayPlacement-qwEJPVS4.js} +8 -8
  179. package/dist/page/index.js +228 -69
  180. package/dist/page/style.css +1605 -299
  181. package/dist/page/style.js +3 -0
  182. package/dist/pagination/index.js +1 -1
  183. package/dist/pagination/style.css +206 -77
  184. package/dist/pagination/style.js +1 -0
  185. package/dist/panel/style.css +6 -74
  186. package/dist/pick-list/style.css +6 -67
  187. package/dist/popover/index.js +1 -1
  188. package/dist/popover/style.css +27 -140
  189. package/dist/progress-bar/style.css +6 -70
  190. package/dist/progress-spinner/style.css +6 -68
  191. package/dist/radio/style.css +6 -61
  192. package/dist/rating/style.css +6 -67
  193. package/dist/resolver-map.d.ts.map +1 -1
  194. package/dist/resolver.js +1 -0
  195. package/dist/result/style.css +6 -67
  196. package/dist/scroll-top/style.css +6 -82
  197. package/dist/scrollbar/style.css +6 -69
  198. package/dist/select/index.js +2 -545
  199. package/dist/select/style.css +11 -82
  200. package/dist/select-button/style.css +6 -61
  201. package/dist/shared/config.d.ts +2 -2
  202. package/dist/shared/filterByQuery.d.ts +14 -0
  203. package/dist/shared/filterByQuery.d.ts.map +1 -0
  204. package/dist/shared/menu/expand.d.ts +38 -0
  205. package/dist/shared/menu/expand.d.ts.map +1 -0
  206. package/dist/shared/menu/index.d.ts +2 -0
  207. package/dist/shared/menu/index.d.ts.map +1 -1
  208. package/dist/shared/overlayPlacement.d.ts.map +1 -1
  209. package/dist/sidebar/style.css +6 -73
  210. package/dist/skeleton/index.js +2 -59
  211. package/dist/skeleton/style.css +6 -67
  212. package/dist/slider/style.css +6 -61
  213. package/dist/space/style.css +6 -61
  214. package/dist/speed-dial/index.js +3 -3
  215. package/dist/speed-dial/style.css +6 -67
  216. package/dist/split-button/index.js +3 -3
  217. package/dist/split-button/style.css +345 -118
  218. package/dist/splitter/style.css +6 -61
  219. package/dist/status/style.css +6 -74
  220. package/dist/stepper/style.css +6 -67
  221. package/dist/styles/base.css +1 -50
  222. package/dist/styles.css +1 -1
  223. package/dist/switch/style.css +6 -68
  224. package/dist/table/index.js +343 -313
  225. package/dist/table/style.css +20 -111
  226. package/dist/tabs/style.css +6 -75
  227. package/dist/tag/style.css +6 -67
  228. package/dist/terminal/style.css +6 -61
  229. package/dist/textarea/style.css +6 -67
  230. package/dist/theme/motionPresets.d.ts.map +1 -1
  231. package/dist/theme/styles.css +5 -11
  232. package/dist/theme/useMotion.d.ts +5 -1
  233. package/dist/theme/useMotion.d.ts.map +1 -1
  234. package/dist/tiered-menu/index.js +4 -4
  235. package/dist/tiered-menu/style.css +6 -75
  236. package/dist/timeline/style.css +6 -75
  237. package/dist/toast/index.js +1 -1
  238. package/dist/toast/style.css +6 -67
  239. package/dist/toggle-button/style.css +6 -67
  240. package/dist/toolbar/style.css +6 -61
  241. package/dist/tooltip/index.js +1 -1
  242. package/dist/tooltip/style.css +6 -61
  243. package/dist/tree/index.js +158 -172
  244. package/dist/tree/style.css +6 -67
  245. package/dist/tree-select/index.js +201 -215
  246. package/dist/tree-select/style.css +6 -75
  247. package/dist/tree-table/style.css +6 -67
  248. package/dist/treeQuery-CnHkyYOA.js +107 -0
  249. package/dist/{useFloatingViewportSync-DZdJ7W8n.js → useFloatingViewportSync-wLLKIGUA.js} +4 -1
  250. package/dist/{useMotionTransition-Bxnnb_9u.js → useMotionTransition-95Y79FoL.js} +1 -1
  251. package/dist/virtual-scroller/style.css +6 -69
  252. package/package.json +2 -1
  253. package/dist/Button-smoDleh0.js +0 -156
  254. package/dist/Pagination-DrXmzcEy.js +0 -158
  255. package/dist/checkStrategy-CZzuUKDI.js +0 -63
@@ -50,6 +50,10 @@
50
50
  --m-font-size-sm: 0.8125rem;
51
51
  --m-font-size-md: 0.875rem;
52
52
  --m-font-size-lg: 1.125rem;
53
+ /* Display scale (page titles, KPI figures) */
54
+ --m-font-size-xl: 1.25rem;
55
+ --m-font-size-2xl: 1.5rem;
56
+ --m-font-size-3xl: 1.75rem;
53
57
  --m-opacity-disabled: 0.55;
54
58
  /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
55
59
  --m-z-base: 1000;
@@ -192,20 +196,10 @@
192
196
 
193
197
  /*
194
198
  * Global motion policy (complements per-component rules):
195
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
199
+ * - `reduced`: keep short paint transitions; stop loops
196
200
  * and layout/transform size animation.
197
201
  * - `none`: zero all transition/animation durations.
198
202
  */
199
- @media (prefers-reduced-motion: reduce) {
200
- html:not([data-m-ignore-reduced-motion]) *,
201
- html:not([data-m-ignore-reduced-motion]) *::before,
202
- html:not([data-m-ignore-reduced-motion]) *::after {
203
- animation-duration: 0.01ms !important;
204
- animation-iteration-count: 1 !important;
205
- transition-property: background-color, border-color, color, opacity, box-shadow,
206
- outline, fill, stroke, stroke-dashoffset !important;
207
- }
208
- }
209
203
 
210
204
  [data-m-motion="reduced"] *,
211
205
  [data-m-motion="reduced"] *::before,
@@ -615,7 +609,7 @@
615
609
  .m-zoom-enter-from,
616
610
  .m-zoom-leave-to {
617
611
  opacity: 0;
618
- transform: scale(0.9);
612
+ transform: scale(0.95);
619
613
  }
620
614
 
621
615
  .m-slide-up-enter-active,
@@ -660,44 +654,6 @@
660
654
  transform: translateX(calc(var(--m-motion-distance) * -1));
661
655
  }
662
656
 
663
- @media (prefers-reduced-motion: reduce) {
664
- html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
665
- html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
666
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
667
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
668
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
669
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
670
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
671
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
672
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
673
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
674
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
675
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
676
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
677
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
678
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
679
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
680
- transition: none;
681
- }
682
-
683
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
684
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
685
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
686
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
687
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
688
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
689
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
690
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
691
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
692
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
693
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
694
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
695
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
696
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
697
- transform: none;
698
- }
699
- }
700
-
701
657
  [data-m-motion="reduced"] .m-fade-enter-active,
702
658
  [data-m-motion="reduced"] .m-fade-leave-active,
703
659
  [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1192,17 +1148,6 @@
1192
1148
  animation: none !important;
1193
1149
  }
1194
1150
 
1195
- @media (prefers-reduced-motion: reduce) {
1196
- html:not([data-m-ignore-reduced-motion]) *,
1197
- html:not([data-m-ignore-reduced-motion]) *::before,
1198
- html:not([data-m-ignore-reduced-motion]) *::after {
1199
- animation-duration: 0.01ms !important;
1200
- animation-iteration-count: 1 !important;
1201
- scroll-behavior: auto !important;
1202
- transition-duration: 0.01ms !important;
1203
- }
1204
- }
1205
-
1206
1151
  /* —— Feedback: Popover —— */
1207
1152
  .m-popover {
1208
1153
  --m-popover-min-width: 12rem;
@@ -1221,135 +1166,77 @@
1221
1166
  box-shadow: var(--m-shadow-md);
1222
1167
  color: var(--m-color-text);
1223
1168
  min-width: var(--m-popover-min-width);
1169
+ overscroll-behavior: contain;
1224
1170
  padding: var(--m-space-3);
1225
1171
  position: absolute;
1226
1172
  z-index: var(--m-z-popper);
1227
1173
  }
1228
1174
 
1175
+ /*
1176
+ * Placement uses the independent `translate` property so scale-fade's
1177
+ * `transform` (opacity + scale/slide) can compose without fighting layout.
1178
+ */
1229
1179
  .m-popover__content--top {
1230
1180
  bottom: calc(100% + var(--m-space-2));
1231
1181
  left: 50%;
1232
- transform: translateX(-50%);
1182
+ transform-origin: bottom center;
1183
+ translate: -50% 0;
1233
1184
  }
1234
1185
 
1235
1186
  .m-popover__content--bottom {
1236
1187
  left: 50%;
1237
1188
  top: calc(100% + var(--m-space-2));
1238
- transform: translateX(-50%);
1189
+ transform-origin: top center;
1190
+ translate: -50% 0;
1239
1191
  }
1240
1192
 
1241
1193
  .m-popover__content--left {
1242
1194
  right: calc(100% + var(--m-space-2));
1243
1195
  top: 50%;
1244
- transform: translateY(-50%);
1196
+ transform-origin: right center;
1197
+ translate: 0 -50%;
1245
1198
  }
1246
1199
 
1247
1200
  .m-popover__content--right {
1248
1201
  left: calc(100% + var(--m-space-2));
1249
1202
  top: 50%;
1250
- transform: translateY(-50%);
1203
+ transform-origin: left center;
1204
+ translate: 0 -50%;
1251
1205
  }
1252
1206
 
1253
1207
  .m-popover__content--right-start {
1254
1208
  left: calc(100% + var(--m-space-2));
1255
1209
  top: 0;
1256
- transform: none;
1210
+ transform-origin: top left;
1257
1211
  }
1258
1212
 
1259
1213
  .m-popover__content--left-start {
1260
1214
  right: calc(100% + var(--m-space-2));
1261
1215
  top: 0;
1262
- transform: none;
1216
+ transform-origin: top right;
1263
1217
  }
1264
1218
 
1265
1219
  .m-popover__content--bottom-start {
1266
1220
  left: 0;
1267
1221
  top: calc(100% + var(--m-space-2));
1222
+ transform-origin: top left;
1268
1223
  }
1269
1224
 
1270
1225
  .m-popover__content--bottom-end {
1271
1226
  right: 0;
1272
1227
  top: calc(100% + var(--m-space-2));
1228
+ transform-origin: top right;
1273
1229
  }
1274
1230
 
1275
1231
  .m-popover__content--teleported {
1276
1232
  bottom: auto;
1277
1233
  left: auto;
1234
+ overscroll-behavior: contain;
1278
1235
  position: fixed;
1279
1236
  right: auto;
1280
1237
  top: auto;
1281
- transform: none;
1238
+ /* Reset non-teleport placement translates; inline `translate` from
1239
+ computeFloatingOverlayStyle provides the teleported alignment. */
1240
+ translate: none;
1282
1241
  z-index: var(--m-z-tooltip);
1283
1242
  }
1284
-
1285
- .m-popover-enter-active {
1286
- transition:
1287
- opacity var(--m-motion-enter) var(--m-motion-ease),
1288
- transform var(--m-motion-enter) var(--m-motion-ease);
1289
- }
1290
-
1291
- .m-popover-leave-active {
1292
- transition:
1293
- opacity var(--m-motion-exit) var(--m-motion-ease),
1294
- transform var(--m-motion-exit) var(--m-motion-ease);
1295
- }
1296
-
1297
- .m-popover-enter-from,
1298
- .m-popover-leave-to {
1299
- opacity: 0;
1300
- }
1301
-
1302
- .m-popover-enter-from:not(.m-popover__content--teleported),
1303
- .m-popover-leave-to:not(.m-popover__content--teleported) {
1304
- transform: translateY(calc(var(--m-motion-distance) * -1));
1305
- }
1306
-
1307
- .m-popover__content--top.m-popover-enter-from,
1308
- .m-popover__content--top.m-popover-leave-to {
1309
- transform: translate(-50%, calc(-100% - var(--m-motion-distance)));
1310
- }
1311
-
1312
- .m-popover__content--bottom.m-popover-enter-from,
1313
- .m-popover__content--bottom.m-popover-leave-to,
1314
- .m-popover__content--bottom-start.m-popover-enter-from,
1315
- .m-popover__content--bottom-start.m-popover-leave-to,
1316
- .m-popover__content--bottom-end.m-popover-enter-from,
1317
- .m-popover__content--bottom-end.m-popover-leave-to {
1318
- transform: translateY(var(--m-motion-distance));
1319
- }
1320
-
1321
- .m-popover__content--left.m-popover-enter-from,
1322
- .m-popover__content--left.m-popover-leave-to {
1323
- transform: translate(calc(-100% - var(--m-motion-distance)), -50%);
1324
- }
1325
-
1326
- .m-popover__content--right.m-popover-enter-from,
1327
- .m-popover__content--right.m-popover-leave-to {
1328
- transform: translate(var(--m-motion-distance), -50%);
1329
- }
1330
-
1331
- @media (prefers-reduced-motion: reduce) {
1332
- html:not([data-m-ignore-reduced-motion]) .m-popover-enter-active,
1333
- html:not([data-m-ignore-reduced-motion]) .m-popover-leave-active {
1334
- transition: none;
1335
- }
1336
-
1337
- html:not([data-m-ignore-reduced-motion]) .m-popover-enter-from,
1338
- html:not([data-m-ignore-reduced-motion]) .m-popover-leave-to {
1339
- transform: none;
1340
- }
1341
- }
1342
-
1343
- [data-m-motion="reduced"] .m-popover-enter-active,
1344
- [data-m-motion="reduced"] .m-popover-leave-active,
1345
- [data-m-motion="none"] .m-popover-enter-active,
1346
- [data-m-motion="none"] .m-popover-leave-active {
1347
- transition: none;
1348
- }
1349
-
1350
- [data-m-motion="reduced"] .m-popover-enter-from,
1351
- [data-m-motion="reduced"] .m-popover-leave-to,
1352
- [data-m-motion="none"] .m-popover-enter-from,
1353
- [data-m-motion="none"] .m-popover-leave-to {
1354
- transform: none;
1355
- }
@@ -50,6 +50,10 @@
50
50
  --m-font-size-sm: 0.8125rem;
51
51
  --m-font-size-md: 0.875rem;
52
52
  --m-font-size-lg: 1.125rem;
53
+ /* Display scale (page titles, KPI figures) */
54
+ --m-font-size-xl: 1.25rem;
55
+ --m-font-size-2xl: 1.5rem;
56
+ --m-font-size-3xl: 1.75rem;
53
57
  --m-opacity-disabled: 0.55;
54
58
  /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
55
59
  --m-z-base: 1000;
@@ -192,20 +196,10 @@
192
196
 
193
197
  /*
194
198
  * Global motion policy (complements per-component rules):
195
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
199
+ * - `reduced`: keep short paint transitions; stop loops
196
200
  * and layout/transform size animation.
197
201
  * - `none`: zero all transition/animation durations.
198
202
  */
199
- @media (prefers-reduced-motion: reduce) {
200
- html:not([data-m-ignore-reduced-motion]) *,
201
- html:not([data-m-ignore-reduced-motion]) *::before,
202
- html:not([data-m-ignore-reduced-motion]) *::after {
203
- animation-duration: 0.01ms !important;
204
- animation-iteration-count: 1 !important;
205
- transition-property: background-color, border-color, color, opacity, box-shadow,
206
- outline, fill, stroke, stroke-dashoffset !important;
207
- }
208
- }
209
203
 
210
204
  [data-m-motion="reduced"] *,
211
205
  [data-m-motion="reduced"] *::before,
@@ -615,7 +609,7 @@
615
609
  .m-zoom-enter-from,
616
610
  .m-zoom-leave-to {
617
611
  opacity: 0;
618
- transform: scale(0.9);
612
+ transform: scale(0.95);
619
613
  }
620
614
 
621
615
  .m-slide-up-enter-active,
@@ -660,44 +654,6 @@
660
654
  transform: translateX(calc(var(--m-motion-distance) * -1));
661
655
  }
662
656
 
663
- @media (prefers-reduced-motion: reduce) {
664
- html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
665
- html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
666
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
667
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
668
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
669
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
670
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
671
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
672
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
673
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
674
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
675
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
676
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
677
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
678
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
679
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
680
- transition: none;
681
- }
682
-
683
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
684
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
685
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
686
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
687
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
688
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
689
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
690
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
691
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
692
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
693
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
694
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
695
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
696
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
697
- transform: none;
698
- }
699
- }
700
-
701
657
  [data-m-motion="reduced"] .m-fade-enter-active,
702
658
  [data-m-motion="reduced"] .m-fade-leave-active,
703
659
  [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1192,17 +1148,6 @@
1192
1148
  animation: none !important;
1193
1149
  }
1194
1150
 
1195
- @media (prefers-reduced-motion: reduce) {
1196
- html:not([data-m-ignore-reduced-motion]) *,
1197
- html:not([data-m-ignore-reduced-motion]) *::before,
1198
- html:not([data-m-ignore-reduced-motion]) *::after {
1199
- animation-duration: 0.01ms !important;
1200
- animation-iteration-count: 1 !important;
1201
- scroll-behavior: auto !important;
1202
- transition-duration: 0.01ms !important;
1203
- }
1204
- }
1205
-
1206
1151
  .m-progressbar {
1207
1152
  --m-progressbar-height: var(--m-meter-track-height);
1208
1153
  --m-progressbar-track: color-mix(in srgb, var(--m-color-text-muted) 16%, var(--m-color-surface));
@@ -1274,15 +1219,6 @@
1274
1219
  }
1275
1220
  }
1276
1221
 
1277
- @media (prefers-reduced-motion: reduce) {
1278
- html:not([data-m-ignore-reduced-motion]) .m-progressbar--indeterminate .m-progressbar__fill,
1279
- html:not([data-m-ignore-reduced-motion])
1280
- .m-progressbar--indeterminate.m-progressbar--circle
1281
- .m-progressbar__circle-value {
1282
- animation: none;
1283
- }
1284
- }
1285
-
1286
1222
  [data-m-motion="reduced"] .m-progressbar--indeterminate .m-progressbar__fill,
1287
1223
  [data-m-motion="reduced"]
1288
1224
  .m-progressbar--indeterminate.m-progressbar--circle
@@ -50,6 +50,10 @@
50
50
  --m-font-size-sm: 0.8125rem;
51
51
  --m-font-size-md: 0.875rem;
52
52
  --m-font-size-lg: 1.125rem;
53
+ /* Display scale (page titles, KPI figures) */
54
+ --m-font-size-xl: 1.25rem;
55
+ --m-font-size-2xl: 1.5rem;
56
+ --m-font-size-3xl: 1.75rem;
53
57
  --m-opacity-disabled: 0.55;
54
58
  /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
55
59
  --m-z-base: 1000;
@@ -192,20 +196,10 @@
192
196
 
193
197
  /*
194
198
  * Global motion policy (complements per-component rules):
195
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
199
+ * - `reduced`: keep short paint transitions; stop loops
196
200
  * and layout/transform size animation.
197
201
  * - `none`: zero all transition/animation durations.
198
202
  */
199
- @media (prefers-reduced-motion: reduce) {
200
- html:not([data-m-ignore-reduced-motion]) *,
201
- html:not([data-m-ignore-reduced-motion]) *::before,
202
- html:not([data-m-ignore-reduced-motion]) *::after {
203
- animation-duration: 0.01ms !important;
204
- animation-iteration-count: 1 !important;
205
- transition-property: background-color, border-color, color, opacity, box-shadow,
206
- outline, fill, stroke, stroke-dashoffset !important;
207
- }
208
- }
209
203
 
210
204
  [data-m-motion="reduced"] *,
211
205
  [data-m-motion="reduced"] *::before,
@@ -615,7 +609,7 @@
615
609
  .m-zoom-enter-from,
616
610
  .m-zoom-leave-to {
617
611
  opacity: 0;
618
- transform: scale(0.9);
612
+ transform: scale(0.95);
619
613
  }
620
614
 
621
615
  .m-slide-up-enter-active,
@@ -660,44 +654,6 @@
660
654
  transform: translateX(calc(var(--m-motion-distance) * -1));
661
655
  }
662
656
 
663
- @media (prefers-reduced-motion: reduce) {
664
- html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
665
- html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
666
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
667
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
668
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
669
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
670
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
671
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
672
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
673
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
674
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
675
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
676
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
677
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
678
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
679
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
680
- transition: none;
681
- }
682
-
683
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
684
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
685
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
686
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
687
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
688
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
689
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
690
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
691
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
692
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
693
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
694
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
695
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
696
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
697
- transform: none;
698
- }
699
- }
700
-
701
657
  [data-m-motion="reduced"] .m-fade-enter-active,
702
658
  [data-m-motion="reduced"] .m-fade-leave-active,
703
659
  [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1192,17 +1148,6 @@
1192
1148
  animation: none !important;
1193
1149
  }
1194
1150
 
1195
- @media (prefers-reduced-motion: reduce) {
1196
- html:not([data-m-ignore-reduced-motion]) *,
1197
- html:not([data-m-ignore-reduced-motion]) *::before,
1198
- html:not([data-m-ignore-reduced-motion]) *::after {
1199
- animation-duration: 0.01ms !important;
1200
- animation-iteration-count: 1 !important;
1201
- scroll-behavior: auto !important;
1202
- transition-duration: 0.01ms !important;
1203
- }
1204
- }
1205
-
1206
1151
  /* —— Feedback: ProgressSpinner —— */
1207
1152
  .m-progress-spinner {
1208
1153
  --m-progress-spinner-size: calc(var(--m-space-8) + var(--m-space-2));
@@ -1275,13 +1220,6 @@
1275
1220
  margin: 0;
1276
1221
  }
1277
1222
 
1278
- @media (prefers-reduced-motion: reduce) {
1279
- html:not([data-m-ignore-reduced-motion]) .m-progress-spinner,
1280
- html:not([data-m-ignore-reduced-motion]) .m-progress-spinner__circle {
1281
- animation: none;
1282
- }
1283
- }
1284
-
1285
1223
  [data-m-motion="reduced"] .m-progress-spinner,
1286
1224
  [data-m-motion="reduced"] .m-progress-spinner__circle,
1287
1225
  [data-m-motion="none"] .m-progress-spinner,
@@ -50,6 +50,10 @@
50
50
  --m-font-size-sm: 0.8125rem;
51
51
  --m-font-size-md: 0.875rem;
52
52
  --m-font-size-lg: 1.125rem;
53
+ /* Display scale (page titles, KPI figures) */
54
+ --m-font-size-xl: 1.25rem;
55
+ --m-font-size-2xl: 1.5rem;
56
+ --m-font-size-3xl: 1.75rem;
53
57
  --m-opacity-disabled: 0.55;
54
58
  /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
55
59
  --m-z-base: 1000;
@@ -192,20 +196,10 @@
192
196
 
193
197
  /*
194
198
  * Global motion policy (complements per-component rules):
195
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
199
+ * - `reduced`: keep short paint transitions; stop loops
196
200
  * and layout/transform size animation.
197
201
  * - `none`: zero all transition/animation durations.
198
202
  */
199
- @media (prefers-reduced-motion: reduce) {
200
- html:not([data-m-ignore-reduced-motion]) *,
201
- html:not([data-m-ignore-reduced-motion]) *::before,
202
- html:not([data-m-ignore-reduced-motion]) *::after {
203
- animation-duration: 0.01ms !important;
204
- animation-iteration-count: 1 !important;
205
- transition-property: background-color, border-color, color, opacity, box-shadow,
206
- outline, fill, stroke, stroke-dashoffset !important;
207
- }
208
- }
209
203
 
210
204
  [data-m-motion="reduced"] *,
211
205
  [data-m-motion="reduced"] *::before,
@@ -615,7 +609,7 @@
615
609
  .m-zoom-enter-from,
616
610
  .m-zoom-leave-to {
617
611
  opacity: 0;
618
- transform: scale(0.9);
612
+ transform: scale(0.95);
619
613
  }
620
614
 
621
615
  .m-slide-up-enter-active,
@@ -660,44 +654,6 @@
660
654
  transform: translateX(calc(var(--m-motion-distance) * -1));
661
655
  }
662
656
 
663
- @media (prefers-reduced-motion: reduce) {
664
- html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
665
- html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
666
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
667
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
668
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
669
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
670
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
671
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
672
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
673
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
674
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
675
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
676
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
677
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
678
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
679
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
680
- transition: none;
681
- }
682
-
683
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
684
- html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
685
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
686
- html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
687
- html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
688
- html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
689
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
690
- html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
691
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
692
- html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
693
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
694
- html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
695
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
696
- html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
697
- transform: none;
698
- }
699
- }
700
-
701
657
  [data-m-motion="reduced"] .m-fade-enter-active,
702
658
  [data-m-motion="reduced"] .m-fade-leave-active,
703
659
  [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1192,17 +1148,6 @@
1192
1148
  animation: none !important;
1193
1149
  }
1194
1150
 
1195
- @media (prefers-reduced-motion: reduce) {
1196
- html:not([data-m-ignore-reduced-motion]) *,
1197
- html:not([data-m-ignore-reduced-motion]) *::before,
1198
- html:not([data-m-ignore-reduced-motion]) *::after {
1199
- animation-duration: 0.01ms !important;
1200
- animation-iteration-count: 1 !important;
1201
- scroll-behavior: auto !important;
1202
- transition-duration: 0.01ms !important;
1203
- }
1204
- }
1205
-
1206
1151
  .m-radio__control {
1207
1152
  border-radius: var(--m-radius-full);
1208
1153
  }