morya-ui 0.2.7 → 0.2.9

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 (226) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +1 -0
  3. package/README.zh-CN.md +1 -0
  4. package/dist/{Button--RkQybU-.js → Button-DO5oukfg.js} +1 -1
  5. package/dist/Icon-B6IBrJ5S.js +606 -0
  6. package/dist/{Pagination-BKvR-RUW.js → Pagination-CUwCtWhz.js} +1 -1
  7. package/dist/Renderable-DHU4Jcfw.js +20 -0
  8. package/dist/accordion/style.css +26 -23
  9. package/dist/auto-complete/index.js +1 -1
  10. package/dist/auto-complete/style.css +64 -40
  11. package/dist/avatar/index.js +1 -1
  12. package/dist/avatar/style.css +26 -23
  13. package/dist/badge/style.css +26 -23
  14. package/dist/block-ui/style.css +26 -23
  15. package/dist/breadcrumb/style.css +26 -23
  16. package/dist/button/index.js +1 -1
  17. package/dist/button/style.css +26 -23
  18. package/dist/card/style.css +26 -23
  19. package/dist/carousel/index.js +1 -1
  20. package/dist/carousel/style.css +26 -23
  21. package/dist/cascade-select/index.js +1 -1
  22. package/dist/cascade-select/style.css +27 -24
  23. package/dist/checkbox/style.css +26 -23
  24. package/dist/chip/index.js +1 -1
  25. package/dist/chip/style.css +26 -23
  26. package/dist/command-menu/index.js +2 -2
  27. package/dist/command-menu/style.css +26 -23
  28. package/dist/component-registry.d.ts.map +1 -1
  29. package/dist/components/AutoComplete/styles.css +38 -17
  30. package/dist/components/Carousel/Carousel.vue.d.ts +1 -1
  31. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts +1 -1
  32. package/dist/components/DatePicker/styles.css +65 -21
  33. package/dist/components/Icon/icon-categories.d.ts +21 -0
  34. package/dist/components/Icon/icon-categories.d.ts.map +1 -0
  35. package/dist/components/Icon/icons-tabler.d.ts +77 -0
  36. package/dist/components/Icon/icons-tabler.d.ts.map +1 -0
  37. package/dist/components/Icon/icons-types.d.ts +36 -0
  38. package/dist/components/Icon/icons-types.d.ts.map +1 -0
  39. package/dist/components/Icon/icons.d.ts +75 -32
  40. package/dist/components/Icon/icons.d.ts.map +1 -1
  41. package/dist/components/Icon/index.d.ts +2 -0
  42. package/dist/components/Icon/index.d.ts.map +1 -1
  43. package/dist/components/IconField/IconField.vue.d.ts +3 -1
  44. package/dist/components/IconField/IconField.vue.d.ts.map +1 -1
  45. package/dist/components/IconField/styles.css +306 -31
  46. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  47. package/dist/components/Input/styles.css +172 -33
  48. package/dist/components/InputNumber/styles.css +103 -40
  49. package/dist/components/InputPassword/InputPassword.vue.d.ts.map +1 -1
  50. package/dist/components/InputPassword/styles.css +79 -79
  51. package/dist/components/Layout/LayoutContent.vue.d.ts +4 -8
  52. package/dist/components/Layout/LayoutContent.vue.d.ts.map +1 -1
  53. package/dist/components/Layout/LayoutSider.vue.d.ts +4 -6
  54. package/dist/components/Layout/LayoutSider.vue.d.ts.map +1 -1
  55. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts +2 -0
  56. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts.map +1 -1
  57. package/dist/components/Layout/styles.css +7 -42
  58. package/dist/components/Layout/types.d.ts +4 -7
  59. package/dist/components/Layout/types.d.ts.map +1 -1
  60. package/dist/components/Loading/Loading.vue.d.ts +25 -0
  61. package/dist/components/Loading/Loading.vue.d.ts.map +1 -0
  62. package/dist/components/Loading/LoadingIndicator.vue.d.ts +13 -0
  63. package/dist/components/Loading/LoadingIndicator.vue.d.ts.map +1 -0
  64. package/dist/components/Loading/directive.d.ts +12 -0
  65. package/dist/components/Loading/directive.d.ts.map +1 -0
  66. package/dist/components/Loading/index.d.ts +8 -0
  67. package/dist/components/Loading/index.d.ts.map +1 -0
  68. package/dist/components/Loading/loading.d.ts +35 -0
  69. package/dist/components/Loading/loading.d.ts.map +1 -0
  70. package/dist/components/Loading/styles.css +386 -0
  71. package/dist/components/Loading/types.d.ts +74 -0
  72. package/dist/components/Loading/types.d.ts.map +1 -0
  73. package/dist/components/Loading/useLoading.d.ts +11 -0
  74. package/dist/components/Loading/useLoading.d.ts.map +1 -0
  75. package/dist/components/Menu/styles.css +4 -1
  76. package/dist/components/Page/PageContent.vue.d.ts +2 -2
  77. package/dist/components/ProgressSpinner/ProgressSpinner.vue.d.ts +1 -1
  78. package/dist/components/Rating/Rating.vue.d.ts +1 -1
  79. package/dist/components/Table/Table.vue.d.ts +1 -1
  80. package/dist/components/Textarea/styles.css +15 -1
  81. package/dist/config-provider/style.css +198 -56
  82. package/dist/confirm-dialog/index.js +11 -11
  83. package/dist/confirm-dialog/style.css +26 -23
  84. package/dist/confirm-popup/index.js +2 -2
  85. package/dist/confirm-popup/style.css +26 -23
  86. package/dist/content-h8POj44-.js +28 -0
  87. package/dist/context-menu/index.js +2 -2
  88. package/dist/context-menu/style.css +26 -23
  89. package/dist/data-view/index.js +1 -1
  90. package/dist/data-view/style.css +26 -23
  91. package/dist/date-picker/index.js +1 -1
  92. package/dist/date-picker/style.css +91 -44
  93. package/dist/dialog/index.js +2 -2
  94. package/dist/dialog/style.css +26 -23
  95. package/dist/divider/style.css +26 -23
  96. package/dist/dock/index.js +2 -2
  97. package/dist/dock/style.css +26 -23
  98. package/dist/drawer/index.js +1 -1
  99. package/dist/drawer/style.css +26 -23
  100. package/dist/dropdown/index.js +2 -2
  101. package/dist/dropdown/style.css +26 -23
  102. package/dist/empty/index.js +1 -1
  103. package/dist/empty/style.css +26 -23
  104. package/dist/fieldset/index.js +1 -1
  105. package/dist/fieldset/style.css +26 -23
  106. package/dist/file-upload/index.js +1 -1
  107. package/dist/file-upload/style.css +26 -23
  108. package/dist/flex/style.css +26 -23
  109. package/dist/float-label/style.css +26 -23
  110. package/dist/fluid/style.css +26 -23
  111. package/dist/form/style.css +26 -23
  112. package/dist/gallery/index.js +1 -1
  113. package/dist/gallery/style.css +26 -23
  114. package/dist/grid/style.css +26 -23
  115. package/dist/icon/index.js +212 -2
  116. package/dist/icon/style.css +26 -23
  117. package/dist/icon-field/index.js +41 -7
  118. package/dist/icon-field/style.css +672 -54
  119. package/dist/icon-field/style.js +1 -0
  120. package/dist/{icon-xUOyawgJ.js → icon-iOBeyIRp.js} +1 -1
  121. package/dist/index.d.ts +10 -1
  122. package/dist/index.d.ts.map +1 -1
  123. package/dist/index.js +4722 -3962
  124. package/dist/inplace/style.css +26 -23
  125. package/dist/input/index.js +78 -80
  126. package/dist/input/style.css +198 -56
  127. package/dist/input-color/style.css +26 -23
  128. package/dist/input-group/style.css +26 -23
  129. package/dist/input-number/index.js +1 -1
  130. package/dist/input-number/style.css +129 -63
  131. package/dist/input-otp/style.css +26 -23
  132. package/dist/input-password/index.js +83 -82
  133. package/dist/input-password/style.css +105 -102
  134. package/dist/input-tags/index.js +1 -1
  135. package/dist/input-tags/style.css +26 -23
  136. package/dist/knob/style.css +26 -23
  137. package/dist/label/style.css +26 -23
  138. package/dist/layout/index.js +60 -83
  139. package/dist/layout/style.css +33 -65
  140. package/dist/listbox/style.css +26 -23
  141. package/dist/loading/index.js +467 -0
  142. package/dist/loading/style.css +1380 -0
  143. package/dist/loading/style.js +3 -0
  144. package/dist/mega-menu/index.js +2 -2
  145. package/dist/mega-menu/style.css +26 -23
  146. package/dist/menu/index.js +2 -2
  147. package/dist/menu/style.css +30 -24
  148. package/dist/menubar/index.js +2 -2
  149. package/dist/menubar/style.css +26 -23
  150. package/dist/message/index.js +8 -7
  151. package/dist/message/style.css +26 -23
  152. package/dist/meter-group/style.css +26 -23
  153. package/dist/order-list/index.js +1 -1
  154. package/dist/order-list/style.css +26 -23
  155. package/dist/page/index.js +1 -1
  156. package/dist/page/style.css +26 -23
  157. package/dist/pagination/index.js +1 -1
  158. package/dist/pagination/style.css +26 -23
  159. package/dist/panel/index.js +1 -1
  160. package/dist/panel/style.css +26 -23
  161. package/dist/pick-list/index.js +1 -1
  162. package/dist/pick-list/style.css +26 -23
  163. package/dist/popover/style.css +26 -23
  164. package/dist/progress-bar/style.css +26 -23
  165. package/dist/progress-spinner/style.css +26 -23
  166. package/dist/radio/style.css +26 -23
  167. package/dist/rating/index.js +1 -1
  168. package/dist/rating/style.css +26 -23
  169. package/dist/resolver-map.d.ts.map +1 -1
  170. package/dist/resolver.js +1 -0
  171. package/dist/result/index.js +1 -1
  172. package/dist/result/style.css +26 -23
  173. package/dist/scroll-top/index.js +1 -1
  174. package/dist/scroll-top/style.css +26 -23
  175. package/dist/scrollbar/style.css +26 -23
  176. package/dist/select/index.js +1 -1
  177. package/dist/select/style.css +27 -24
  178. package/dist/select-button/style.css +26 -23
  179. package/dist/shared/config.d.ts.map +1 -1
  180. package/dist/shared/styles/control-suffix.css +1 -1
  181. package/dist/sidebar/index.js +2 -2
  182. package/dist/sidebar/style.css +26 -23
  183. package/dist/skeleton/style.css +26 -23
  184. package/dist/slider/style.css +26 -23
  185. package/dist/space/style.css +26 -23
  186. package/dist/speed-dial/index.js +2 -2
  187. package/dist/speed-dial/style.css +26 -23
  188. package/dist/split-button/index.js +1 -1
  189. package/dist/split-button/style.css +26 -23
  190. package/dist/splitter/style.css +26 -23
  191. package/dist/status/index.js +1 -1
  192. package/dist/status/style.css +26 -23
  193. package/dist/stepper/index.js +1 -1
  194. package/dist/stepper/style.css +26 -23
  195. package/dist/styles/base.css +26 -23
  196. package/dist/styles.css +1 -1
  197. package/dist/switch/style.css +26 -23
  198. package/dist/table/index.js +2 -2
  199. package/dist/table/style.css +26 -23
  200. package/dist/tabs/index.js +1 -1
  201. package/dist/tabs/style.css +26 -23
  202. package/dist/tag/index.js +1 -1
  203. package/dist/tag/style.css +26 -23
  204. package/dist/terminal/style.css +26 -23
  205. package/dist/textarea/index.js +1 -1
  206. package/dist/textarea/style.css +41 -24
  207. package/dist/tiered-menu/index.js +1 -1
  208. package/dist/tiered-menu/style.css +26 -23
  209. package/dist/timeline/index.js +1 -1
  210. package/dist/timeline/style.css +26 -23
  211. package/dist/toast/index.js +13 -12
  212. package/dist/toast/style.css +26 -23
  213. package/dist/toggle-button/index.js +2 -2
  214. package/dist/toggle-button/style.css +26 -23
  215. package/dist/toolbar/style.css +26 -23
  216. package/dist/tooltip/style.css +26 -23
  217. package/dist/tree/index.js +1 -1
  218. package/dist/tree/style.css +26 -23
  219. package/dist/tree-select/index.js +1 -1
  220. package/dist/tree-select/style.css +27 -24
  221. package/dist/tree-table/index.js +1 -1
  222. package/dist/tree-table/style.css +26 -23
  223. package/dist/virtual-scroller/style.css +26 -23
  224. package/package.json +9 -2
  225. package/dist/Icon-DfpIfo2L.js +0 -521
  226. package/dist/Renderable-BaaCI4tS.js +0 -45
@@ -0,0 +1,1380 @@
1
+ :root {
2
+ --m-color-primary: #2563eb;
3
+ --m-color-primary-hover: #1d4ed8;
4
+ --m-color-surface: #ffffff;
5
+ --m-color-text: #0f172a;
6
+ --m-color-text-muted: #64748b;
7
+ --m-color-border: #e2e8f0;
8
+ --m-color-focus-ring: #2563eb;
9
+ /* Naive-inspired control sizing (tiny omitted; medium = default) */
10
+ --m-control-height-small: 28px;
11
+ --m-control-height-medium: 34px;
12
+ --m-control-height-large: 40px;
13
+ --m-control-font-small: 14px;
14
+ --m-control-font-medium: 14px;
15
+ --m-control-font-large: 15px;
16
+ --m-control-padding-x-small: 10px;
17
+ --m-control-padding-x-medium: 12px;
18
+ --m-control-padding-x-large: 14px;
19
+
20
+ --m-radius-control: 3px;
21
+ --m-border-width: 1px;
22
+ --m-focus-shadow: 0 0 0 2px
23
+ color-mix(in srgb, var(--m-color-primary) 20%, transparent);
24
+ --m-focus-shadow-danger: 0 0 0 2px
25
+ color-mix(in srgb, var(--m-color-danger) 20%, transparent);
26
+ --m-color-success: #159570;
27
+ --m-color-info: #2563eb;
28
+ --m-color-warning: #d97706;
29
+ --m-color-warn: var(--m-color-warning);
30
+ --m-color-help: #9333ea;
31
+ --m-color-danger: #dc2626;
32
+ --m-color-contrast: #0f172a;
33
+ --m-color-contrast-fg: #ffffff;
34
+ --m-color-contrast-hover: #1e293b;
35
+ --m-color-contrast-active: #020617;
36
+ --m-color-on-emphasis: #ffffff;
37
+ --m-overlay-scrim: rgb(15 23 42 / 0.55);
38
+ --m-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.25);
39
+ --m-shadow-md: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
40
+ --m-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
41
+ --m-shadow-raised: 0 0.25rem 0.75rem
42
+ color-mix(in srgb, var(--m-color-text) 14%, transparent);
43
+ --m-shadow-sticky: 4px 0 8px
44
+ color-mix(in srgb, var(--m-color-text) 6%, transparent);
45
+ --m-shadow-sticky-end: -4px 0 8px
46
+ color-mix(in srgb, var(--m-color-text) 6%, transparent);
47
+
48
+ /* Typography scale (component text, not control-height fonts) */
49
+ --m-font-size-xs: 0.75rem;
50
+ --m-font-size-sm: 0.8125rem;
51
+ --m-font-size-md: 0.875rem;
52
+ --m-font-size-lg: 1.125rem;
53
+ --m-opacity-disabled: 0.55;
54
+ /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
55
+ --m-z-base: 1000;
56
+ --m-z-overlay: var(--m-z-base);
57
+ --m-z-overlay-raised: calc(var(--m-z-base) + 1);
58
+ --m-z-dropdown: calc(var(--m-z-base) + 50);
59
+ --m-z-tooltip: calc(var(--m-z-base) + 60);
60
+ --m-z-toast: calc(var(--m-z-base) + 100);
61
+ --m-z-popper: 40;
62
+
63
+ --m-control-affix-size: 2rem;
64
+ --m-control-affix-gap: 2.35rem;
65
+ --m-control-affix-padding: 2.5rem;
66
+ --m-space-1: 0.25rem;
67
+ --m-space-2: 0.5rem;
68
+ --m-space-3: 0.75rem;
69
+ --m-space-4: 1rem;
70
+ --m-space-5: 1.25rem;
71
+ --m-space-6: 1.5rem;
72
+ --m-space-8: 2rem;
73
+ --m-radius-sm: 0.25rem;
74
+ --m-radius-md: 0.5rem;
75
+ --m-radius-lg: 0.75rem;
76
+ --m-radius-full: 9999px;
77
+ --m-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
78
+ --m-motion-fast: 150ms;
79
+ --m-motion-normal: 250ms;
80
+ --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
81
+ --m-motion-enter: 180ms;
82
+ --m-motion-exit: 130ms;
83
+ --m-motion-distance: 0.5rem;
84
+ --m-motion-spin: 1s;
85
+ --m-motion-spin-dash: 1.5s;
86
+ --m-motion-spin-fast: 0.8s;
87
+ --m-motion-spin-medium: 0.7s;
88
+ --m-motion-skeleton: 1.4s;
89
+ --m-motion-pulse: 1.2s;
90
+ --m-motion-scrollbar-show: 340ms;
91
+ --m-motion-scrollbar-hide: 120ms;
92
+ --m-dataview-grid-min: 10rem;
93
+ --m-tree-indent: 0.7rem;
94
+ --m-tree-indent-padding: var(--m-space-3);
95
+ --m-layout-trigger-bar-height: 4.5rem;
96
+ --m-layout-trigger-bar-offset: 1.75rem;
97
+ --m-layout-trigger-bar-width: 2rem;
98
+ --m-layout-trigger-bar-top: 2.25rem;
99
+ --m-timeline-event-min-height: 4rem;
100
+ --m-timeline-marker-size: 1.5rem;
101
+ --m-tag-font-size-small: var(--m-font-size-xs);
102
+ --m-slider-tooltip-offset: 1.5rem;
103
+ --m-slider-tooltip-padding-block: 0.15rem;
104
+ --m-slider-tooltip-padding-inline: 0.4rem;
105
+ --m-rating-star-size-small: 1rem;
106
+ --m-rating-star-size-medium: 1.25rem;
107
+ --m-rating-star-size-large: 1.5rem;
108
+ --m-rating-star-padding: 0.15rem;
109
+ --m-slider-marks-inset: 0.9rem;
110
+ --m-slider-marks-side: 0.5rem;
111
+ --m-stepper-connector-color: var(--m-color-border);
112
+
113
+ /* Table (Element Plus–aligned) */
114
+ --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
115
+ --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 3.5%, var(--m-color-surface));
116
+ --m-table-border-color: var(--m-color-border);
117
+ --m-table-header-bg: var(--m-color-fill-light);
118
+ --m-table-header-text: var(--m-color-text);
119
+ --m-table-text: var(--m-color-text);
120
+ --m-table-row-bg: var(--m-color-surface);
121
+ --m-table-row-hover-bg: var(--m-color-fill-light);
122
+ --m-table-row-striped-bg: var(--m-color-fill-lighter);
123
+ --m-table-row-current-bg: color-mix(in srgb, var(--m-color-primary) 10%, var(--m-color-surface));
124
+ --m-table-row-selected-bg: color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface));
125
+ --m-table-expanded-bg: var(--m-color-fill-lighter);
126
+ --m-table-font-size: var(--m-font-size-md);
127
+ --m-table-row-height: 40px;
128
+ --m-table-cell-line-height: 23px;
129
+ --m-table-cell-padding-inline: 12px;
130
+ }
131
+
132
+ :root[data-m-motion="reduced"] {
133
+ --m-motion-fast: 80ms;
134
+ --m-motion-normal: 120ms;
135
+ --m-motion-enter: 100ms;
136
+ --m-motion-exit: 80ms;
137
+ --m-motion-distance: 0;
138
+ }
139
+
140
+ :root[data-m-motion="none"] {
141
+ --m-motion-fast: 0ms;
142
+ --m-motion-normal: 0ms;
143
+ --m-motion-enter: 0ms;
144
+ --m-motion-exit: 0ms;
145
+ --m-motion-distance: 0;
146
+ }
147
+
148
+ /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
149
+ :root,
150
+ [data-m-density="comfortable"] {
151
+ --m-density-scale: 1;
152
+ --m-menu-item-height: calc(var(--m-control-height-medium) + var(--m-space-2));
153
+ --m-checkbox-control-size: 1.125rem;
154
+ }
155
+
156
+ [data-m-density="compact"] {
157
+ --m-menu-item-height: calc(var(--m-control-height-medium) + var(--m-space-1));
158
+ --m-control-affix-padding: 2.15rem;
159
+ --m-control-affix-gap: 2rem;
160
+ --m-checkbox-control-size: 1rem;
161
+ --m-space-1: 0.2rem;
162
+ --m-space-2: 0.4rem;
163
+ --m-space-3: 0.6rem;
164
+ --m-space-4: 0.85rem;
165
+ --m-space-5: 1.05rem;
166
+ --m-space-6: 1.25rem;
167
+ --m-space-8: 1.7rem;
168
+ --m-control-height-small: 24px;
169
+ --m-control-height-medium: 28px;
170
+ --m-control-height-large: 34px;
171
+ --m-control-font-small: 13px;
172
+ --m-control-font-medium: 13px;
173
+ --m-control-font-large: 14px;
174
+ --m-control-padding-x-small: 8px;
175
+ --m-control-padding-x-medium: 10px;
176
+ --m-control-padding-x-large: 12px;
177
+ --m-table-row-height: 36px;
178
+ --m-table-cell-line-height: 20px;
179
+ --m-table-cell-padding-inline: 10px;
180
+ --m-table-font-size: var(--m-font-size-sm);
181
+ }
182
+
183
+ [data-m-density="spacious"] {
184
+ --m-menu-item-height: calc(var(--m-control-height-medium) + var(--m-space-3));
185
+ --m-control-affix-padding: 2.85rem;
186
+ --m-control-affix-gap: 2.65rem;
187
+ --m-checkbox-control-size: 1.25rem;
188
+ --m-space-1: 0.3rem;
189
+ --m-space-2: 0.6rem;
190
+ --m-space-3: 0.9rem;
191
+ --m-space-4: 1.15rem;
192
+ --m-space-5: 1.45rem;
193
+ --m-space-6: 1.75rem;
194
+ --m-space-8: 2.35rem;
195
+ --m-control-height-small: 32px;
196
+ --m-control-height-medium: 40px;
197
+ --m-control-height-large: 46px;
198
+ --m-control-font-small: 14px;
199
+ --m-control-font-medium: 15px;
200
+ --m-control-font-large: 16px;
201
+ --m-control-padding-x-small: 12px;
202
+ --m-control-padding-x-medium: 14px;
203
+ --m-control-padding-x-large: 16px;
204
+ --m-table-row-height: 48px;
205
+ --m-table-cell-line-height: 26px;
206
+ --m-table-cell-padding-inline: 16px;
207
+ --m-table-font-size: 1rem;
208
+ }
209
+
210
+ [data-m-density="compact"] .m-layout-header {
211
+ --m-layout-header-height: 3rem;
212
+ }
213
+
214
+ [data-m-density="compact"] .m-layout-footer {
215
+ --m-layout-footer-height: 2.5rem;
216
+ }
217
+
218
+ [data-m-density="compact"] .m-layout-sider {
219
+ --m-layout-sider-width: 15rem;
220
+ --m-layout-sider-collapsed-width: 3.25rem;
221
+ }
222
+
223
+ [data-m-density="spacious"] .m-layout-header {
224
+ --m-layout-header-height: 4rem;
225
+ }
226
+
227
+ [data-m-density="spacious"] .m-layout-footer {
228
+ --m-layout-footer-height: 3.5rem;
229
+ }
230
+
231
+ [data-m-density="spacious"] .m-layout-sider {
232
+ --m-layout-sider-width: 18rem;
233
+ --m-layout-sider-collapsed-width: 4.5rem;
234
+ }
235
+
236
+ [data-theme="dark"] {
237
+ --m-color-primary: #60a5fa;
238
+ --m-color-primary-hover: #93c5fd;
239
+ --m-color-surface: #0f172a;
240
+ --m-color-text: #f8fafc;
241
+ --m-color-text-muted: #94a3b8;
242
+ --m-color-border: #334155;
243
+ --m-color-focus-ring: #93c5fd;
244
+ --m-focus-shadow: 0 0 0 2px
245
+ color-mix(in srgb, var(--m-color-primary) 28%, transparent);
246
+ --m-focus-shadow-danger: 0 0 0 2px
247
+ color-mix(in srgb, var(--m-color-danger) 28%, transparent);
248
+ /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
249
+ --m-color-success: #0f766e;
250
+ --m-color-info: #1d4ed8;
251
+ --m-color-warning: #b45309;
252
+ --m-color-warn: var(--m-color-warning);
253
+ --m-color-help: #7e22ce;
254
+ --m-color-danger: #dc2626;
255
+ --m-color-contrast: #f8fafc;
256
+ --m-color-contrast-fg: #0f172a;
257
+ --m-color-contrast-hover: #e2e8f0;
258
+ --m-color-contrast-active: #cbd5e1;
259
+ --m-overlay-scrim: rgb(2 6 23 / 0.72);
260
+ --m-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
261
+ --m-shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
262
+ --m-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
263
+ --m-shadow-raised: 0 0.25rem 0.75rem
264
+ color-mix(in srgb, var(--m-color-text) 22%, transparent);
265
+ --m-shadow-sticky: 4px 0 8px
266
+ color-mix(in srgb, #000 35%, transparent);
267
+ --m-shadow-sticky-end: -4px 0 8px
268
+ color-mix(in srgb, #000 35%, transparent);
269
+
270
+ --m-table-border-color: color-mix(in srgb, var(--m-color-border) 88%, var(--m-color-text));
271
+ --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 10%, var(--m-color-surface));
272
+ --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
273
+ --m-table-header-bg: var(--m-color-fill-light);
274
+ --m-table-row-bg: var(--m-color-surface);
275
+ --m-table-row-hover-bg: color-mix(in srgb, var(--m-color-text) 8%, var(--m-color-surface));
276
+ --m-table-row-striped-bg: var(--m-color-fill-lighter);
277
+ --m-table-row-current-bg: color-mix(in srgb, var(--m-color-primary) 16%, var(--m-color-surface));
278
+ --m-table-row-selected-bg: color-mix(in srgb, var(--m-color-primary) 20%, var(--m-color-surface));
279
+ --m-table-expanded-bg: var(--m-color-fill-lighter);
280
+ }
281
+
282
+ /* Shared tokens consumption, type, focus, and mixed selectors. */
283
+
284
+ :root {
285
+ /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
286
+ --m-menu-min-width: 12rem;
287
+ }
288
+
289
+ .m-button,
290
+ .m-input,
291
+ .m-card,
292
+ .m-dialog,
293
+ .m-drawer,
294
+ .m-popover,
295
+ .m-accordion,
296
+ .m-scrollbar,
297
+ .m-panel,
298
+ .m-fieldset,
299
+ .m-flex,
300
+ .m-space,
301
+ .m-grid,
302
+ .m-layout,
303
+ .m-layout-header,
304
+ .m-layout-footer,
305
+ .m-layout-sider,
306
+ .m-splitter,
307
+ .m-stepper,
308
+ .m-toolbar,
309
+ .m-page-content,
310
+ .m-page-header,
311
+ .m-page-toolbar,
312
+ .m-menu,
313
+ .m-menubar,
314
+ .m-contextmenu,
315
+ .m-tieredmenu,
316
+ .m-dropdown,
317
+ .m-breadcrumb,
318
+ .m-tabs,
319
+ .m-datepicker,
320
+ .m-listbox,
321
+ .m-togglebutton,
322
+ .m-selectbutton,
323
+ .m-inputotp,
324
+ .m-knob,
325
+ .m-autocomplete,
326
+ .m-splitbutton,
327
+ .m-tree,
328
+ .m-timeline,
329
+ .m-dataview,
330
+ .m-confirmpopup,
331
+ .m-scrolltop,
332
+ .m-blockui,
333
+ .m-inplace,
334
+ .m-message,
335
+ .m-toast,
336
+ .m-tooltip,
337
+ .m-empty,
338
+ .m-result,
339
+ .m-progress-spinner,
340
+ .m-cascadeselect,
341
+ .m-treeselect,
342
+ .m-inputcolor,
343
+ .m-inputtags,
344
+ .m-label,
345
+ .m-speeddial,
346
+ .m-orderlist,
347
+ .m-picklist,
348
+ .m-virtualscroller,
349
+ .m-treetable,
350
+ .m-megamenu,
351
+ .m-dock,
352
+ .m-sidebar,
353
+ .m-commandmenu,
354
+ .m-fileupload,
355
+ .m-carousel,
356
+ .m-gallery,
357
+ .m-metergroup,
358
+ .m-fluid,
359
+ .m-terminal {
360
+ font-family: var(--m-font-sans);
361
+ box-sizing: border-box;
362
+ }
363
+
364
+ .m-button:disabled,
365
+ .m-input:disabled,
366
+ .m-password__input:disabled,
367
+ .m-inputnumber__input:disabled,
368
+ .m-inputotp__input:disabled,
369
+ .m-inputcolor__text:disabled,
370
+ .m-inputcolor__swatch:disabled,
371
+ .m-inputtags--disabled {
372
+ cursor: not-allowed;
373
+ opacity: var(--m-opacity-disabled);
374
+ }
375
+
376
+ .m-input-field__control--prefixed .m-input:disabled,
377
+ .m-input-field__control--suffixed .m-input:disabled,
378
+ .m-input-field__control--clearable .m-input:disabled,
379
+ .m-password--disabled .m-password__input,
380
+ .m-inputnumber--disabled .m-inputnumber__input,
381
+ .m-datepicker--disabled .m-datepicker__input,
382
+ .m-icon-field--anchored .m-input:disabled,
383
+ .m-icon-field--anchored .m-textarea:disabled {
384
+ opacity: 1;
385
+ }
386
+
387
+ .m-input::placeholder,
388
+ .m-textarea::placeholder,
389
+ .m-password__input::placeholder,
390
+ .m-inputnumber__input::placeholder,
391
+ .m-inputtags__input::placeholder,
392
+ .m-inputcolor__text::placeholder {
393
+ color: var(--m-color-text-muted);
394
+ opacity: 1;
395
+ }
396
+
397
+ .m-input-field__meta,
398
+ .m-textarea-field__meta,
399
+ .m-password-field__meta {
400
+ align-items: baseline;
401
+ display: flex;
402
+ gap: var(--m-space-2);
403
+ justify-content: space-between;
404
+ }
405
+
406
+ .m-input-field__meta:not(:has(.m-input-field__help)),
407
+ .m-textarea-field__meta:not(:has(.m-textarea-field__help)),
408
+ .m-password-field__meta:not(:has(.m-password__feedback)) {
409
+ justify-content: flex-end;
410
+ }
411
+
412
+ .m-input-field__count,
413
+ .m-textarea-field__count,
414
+ .m-password-field__count {
415
+ color: var(--m-color-text-muted);
416
+ flex: 0 0 auto;
417
+ font-size: var(--m-font-size-xs);
418
+ margin-left: auto;
419
+ }
420
+
421
+ .m-dropdown__item--parent {
422
+ align-items: center;
423
+ display: flex;
424
+ justify-content: space-between;
425
+ width: 100%;
426
+ }
427
+
428
+ .m-dropdown__icon,
429
+ .m-dropdown__caret,
430
+ .m-menu__icon,
431
+ .m-menubar__icon {
432
+ flex-shrink: 0;
433
+ }
434
+
435
+ .m-dropdown__submenu-wrap {
436
+ position: relative;
437
+ }
438
+
439
+ .m-dropdown__submenu {
440
+ --m-dropdown-submenu-max-height: min(18rem, 45vh);
441
+ background: var(--m-color-surface);
442
+ border: var(--m-border-width) solid var(--m-color-border);
443
+ border-radius: var(--m-radius-md);
444
+ box-shadow: var(--m-shadow-md);
445
+ max-height: var(--m-dropdown-submenu-max-height);
446
+ min-width: 10rem;
447
+ overflow: hidden;
448
+ padding: var(--m-space-1);
449
+ }
450
+
451
+ .m-dropdown__submenu--teleported {
452
+ position: fixed;
453
+ z-index: var(--m-z-dropdown);
454
+ }
455
+
456
+ .m-dropdown__submenu-scroll {
457
+ max-height: calc(var(--m-dropdown-submenu-max-height) - var(--m-space-2));
458
+ min-height: 0;
459
+ }
460
+
461
+ .m-dropdown__submenu-view {
462
+ display: grid;
463
+ gap: var(--m-space-1);
464
+ }
465
+
466
+ .m-fade-enter-active,
467
+ .m-fade-leave-active {
468
+ transition: opacity var(--m-motion-exit) var(--m-motion-ease);
469
+ }
470
+
471
+ .m-fade-enter-from,
472
+ .m-fade-leave-to {
473
+ opacity: 0;
474
+ }
475
+
476
+ .m-scale-fade-enter-active {
477
+ transition:
478
+ opacity var(--m-motion-enter) var(--m-motion-ease),
479
+ transform var(--m-motion-enter) var(--m-motion-ease);
480
+ }
481
+
482
+ .m-scale-fade-leave-active {
483
+ transition:
484
+ opacity var(--m-motion-exit) var(--m-motion-ease),
485
+ transform var(--m-motion-exit) var(--m-motion-ease);
486
+ }
487
+
488
+ .m-scale-fade-enter-from,
489
+ .m-scale-fade-leave-to {
490
+ opacity: 0;
491
+ transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.98);
492
+ }
493
+
494
+ .m-slide-fade-enter-active {
495
+ transition:
496
+ opacity var(--m-motion-enter) var(--m-motion-ease),
497
+ transform var(--m-motion-enter) var(--m-motion-ease);
498
+ }
499
+
500
+ .m-slide-fade-leave-active {
501
+ transition:
502
+ opacity var(--m-motion-exit) var(--m-motion-ease),
503
+ transform var(--m-motion-exit) var(--m-motion-ease);
504
+ }
505
+
506
+ .m-slide-fade-enter-from,
507
+ .m-slide-fade-leave-to {
508
+ opacity: 0;
509
+ transform: translateY(calc(var(--m-motion-distance) * -1));
510
+ }
511
+
512
+ @media (prefers-reduced-motion: reduce) {
513
+ html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
514
+ html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
515
+ html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
516
+ html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
517
+ html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
518
+ html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active {
519
+ transition: none;
520
+ }
521
+
522
+ html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
523
+ html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
524
+ html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
525
+ html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to {
526
+ transform: none;
527
+ }
528
+ }
529
+
530
+ [data-m-motion="reduced"] .m-fade-enter-active,
531
+ [data-m-motion="reduced"] .m-fade-leave-active,
532
+ [data-m-motion="reduced"] .m-scale-fade-enter-active,
533
+ [data-m-motion="reduced"] .m-scale-fade-leave-active,
534
+ [data-m-motion="reduced"] .m-slide-fade-enter-active,
535
+ [data-m-motion="reduced"] .m-slide-fade-leave-active,
536
+ [data-m-motion="none"] .m-fade-enter-active,
537
+ [data-m-motion="none"] .m-fade-leave-active,
538
+ [data-m-motion="none"] .m-scale-fade-enter-active,
539
+ [data-m-motion="none"] .m-scale-fade-leave-active,
540
+ [data-m-motion="none"] .m-slide-fade-enter-active,
541
+ [data-m-motion="none"] .m-slide-fade-leave-active {
542
+ transition: none;
543
+ }
544
+
545
+ [data-m-motion="reduced"] .m-scale-fade-enter-from,
546
+ [data-m-motion="reduced"] .m-scale-fade-leave-to,
547
+ [data-m-motion="reduced"] .m-slide-fade-enter-from,
548
+ [data-m-motion="reduced"] .m-slide-fade-leave-to,
549
+ [data-m-motion="none"] .m-scale-fade-enter-from,
550
+ [data-m-motion="none"] .m-scale-fade-leave-to,
551
+ [data-m-motion="none"] .m-slide-fade-enter-from,
552
+ [data-m-motion="none"] .m-slide-fade-leave-to {
553
+ transform: none;
554
+ }
555
+
556
+ /* Shared loading spinner rotation (ProgressSpinner, Switch, ProgressBar, AutoComplete) */
557
+ @keyframes m-progress-spinner-rotate {
558
+ 100% {
559
+ transform: rotate(360deg);
560
+ }
561
+ }
562
+
563
+ .m-checkbox,
564
+ .m-radio,
565
+ .m-switch {
566
+ align-items: center;
567
+ color: var(--m-color-text);
568
+ cursor: pointer;
569
+ display: inline-flex;
570
+ font-family: var(--m-font-sans);
571
+ gap: var(--m-space-2);
572
+ /* 避免绝对定位 input 挂到上层 MScrollbar,聚焦时把滚动容器拽回顶部 */
573
+ position: relative;
574
+ }
575
+
576
+ .m-checkbox--disabled,
577
+ .m-radio--disabled,
578
+ .m-switch--disabled {
579
+ color: var(--m-color-text-muted);
580
+ cursor: not-allowed;
581
+ opacity: var(--m-opacity-disabled);
582
+ }
583
+
584
+ .m-checkbox--invalid .m-checkbox__control,
585
+ .m-radio--invalid .m-radio__control {
586
+ border-color: var(--m-color-danger);
587
+ }
588
+
589
+ .m-checkbox__input,
590
+ .m-radio__input,
591
+ .m-switch__input {
592
+ clip: rect(0, 0, 0, 0);
593
+ clip-path: inset(50%);
594
+ height: 1px;
595
+ margin: -1px;
596
+ overflow: hidden;
597
+ opacity: 0;
598
+ position: absolute;
599
+ white-space: nowrap;
600
+ width: 1px;
601
+ }
602
+
603
+ .m-checkbox__control,
604
+ .m-radio__control {
605
+ align-items: center;
606
+ background: var(--m-color-surface);
607
+ border: var(--m-border-width) solid var(--m-color-border);
608
+ display: inline-flex;
609
+ flex: 0 0 auto;
610
+ height: var(--m-checkbox-control-size, 1.125rem);
611
+ justify-content: center;
612
+ transition:
613
+ background-color var(--m-motion-fast) var(--m-motion-ease),
614
+ border-color var(--m-motion-fast) var(--m-motion-ease),
615
+ box-shadow var(--m-motion-fast) var(--m-motion-ease);
616
+ width: var(--m-checkbox-control-size, 1.125rem);
617
+ }
618
+
619
+ .m-checkbox__input:checked + .m-checkbox__control,
620
+ .m-radio__input:checked + .m-radio__control {
621
+ background: var(--m-color-primary);
622
+ border-color: var(--m-color-primary);
623
+ }
624
+
625
+ .m-checkbox:not(.m-checkbox--disabled):hover .m-checkbox__control,
626
+ .m-radio:not(.m-radio--disabled):hover .m-radio__control {
627
+ border-color: color-mix(in srgb, var(--m-color-primary) 45%, var(--m-color-border));
628
+ }
629
+
630
+ .m-checkbox__input:focus-visible + .m-checkbox__control,
631
+ .m-radio__input:focus-visible + .m-radio__control,
632
+ .m-switch__input:focus-visible + .m-switch__track {
633
+ box-shadow: var(--m-focus-shadow);
634
+ outline: none;
635
+ }
636
+
637
+ .m-checkbox__label,
638
+ .m-radio__label,
639
+ .m-switch__label {
640
+ font-size: var(--m-font-size-md);
641
+ }
642
+
643
+ .m-textarea-field,
644
+ .m-select-field {
645
+ display: grid;
646
+ font-family: var(--m-font-sans);
647
+ gap: var(--m-space-2);
648
+ max-width: 100%;
649
+ min-width: var(--m-menu-min-width);
650
+ position: relative;
651
+ width: fit-content;
652
+ }
653
+
654
+ .m-textarea-field--fluid,
655
+ .m-select-field--fluid {
656
+ width: 100%;
657
+ }
658
+
659
+ .m-textarea-field__label,
660
+ .m-select-field__label {
661
+ color: var(--m-color-text);
662
+ font-family: var(--m-font-sans);
663
+ font-size: var(--m-font-size-md);
664
+ font-weight: 600;
665
+ }
666
+
667
+ .m-textarea-field__help,
668
+ .m-select-field__help {
669
+ color: var(--m-color-text-muted);
670
+ font-size: var(--m-font-size-xs);
671
+ }
672
+
673
+ .m-textarea-field__help--invalid,
674
+ .m-select-field__help--invalid {
675
+ color: var(--m-color-danger);
676
+ }
677
+
678
+ .m-textarea,
679
+ .m-select {
680
+ background: var(--m-color-surface);
681
+ border: var(--m-border-width) solid var(--m-color-border);
682
+ border-radius: var(--m-radius-control);
683
+ color: var(--m-color-text);
684
+ font: inherit;
685
+ transition:
686
+ border-color var(--m-motion-fast) var(--m-motion-ease),
687
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
688
+ background-color var(--m-motion-fast) var(--m-motion-ease);
689
+ width: 100%;
690
+ }
691
+
692
+ .m-textarea--invalid:focus-visible,
693
+ .m-select--invalid.m-select--open,
694
+ .m-select--invalid:focus-visible {
695
+ border-color: var(--m-color-danger);
696
+ box-shadow: var(--m-focus-shadow-danger);
697
+ }
698
+
699
+ .m-textarea:disabled,
700
+ .m-select:disabled,
701
+ .m-select--disabled {
702
+ cursor: not-allowed;
703
+ opacity: var(--m-opacity-disabled);
704
+ }
705
+
706
+ .m-inputgroup > .m-input,
707
+ .m-inputgroup > .m-input-field,
708
+ .m-inputgroup > .m-password-field,
709
+ .m-inputgroup > .m-inputnumber-field {
710
+ flex: 1 1 auto;
711
+ min-width: 0;
712
+ }
713
+
714
+ .m-inputgroup > .m-input-field,
715
+ .m-inputgroup > .m-password-field,
716
+ .m-inputgroup > .m-inputnumber-field {
717
+ display: flex;
718
+ flex-direction: column;
719
+ gap: 0;
720
+ }
721
+
722
+ .m-inputgroup > .m-input,
723
+ .m-inputgroup .m-input,
724
+ .m-inputgroup .m-password,
725
+ .m-inputgroup .m-inputnumber__input-wrap,
726
+ .m-inputgroup .m-input-field__control--prefixed,
727
+ .m-inputgroup .m-input-field__control--suffixed,
728
+ .m-inputgroup .m-input-field__control--clearable {
729
+ border-radius: 0;
730
+ width: 100%;
731
+ }
732
+
733
+ .m-inputgroup > :first-child.m-input,
734
+ .m-inputgroup > :first-child .m-input,
735
+ .m-inputgroup > :first-child .m-password,
736
+ .m-inputgroup > :first-child .m-inputnumber__input-wrap,
737
+ .m-inputgroup > :first-child .m-input-field__control--prefixed,
738
+ .m-inputgroup > :first-child .m-input-field__control--suffixed,
739
+ .m-inputgroup > :first-child .m-input-field__control--clearable,
740
+ .m-inputgroup > :first-child.m-inputgroup-addon {
741
+ border-bottom-left-radius: var(--m-radius-control);
742
+ border-top-left-radius: var(--m-radius-control);
743
+ }
744
+
745
+ .m-inputgroup > :last-child.m-input,
746
+ .m-inputgroup > :last-child .m-input,
747
+ .m-inputgroup > :last-child .m-password,
748
+ .m-inputgroup > :last-child .m-inputnumber__input-wrap,
749
+ .m-inputgroup > :last-child .m-input-field__control--prefixed,
750
+ .m-inputgroup > :last-child .m-input-field__control--suffixed,
751
+ .m-inputgroup > :last-child .m-input-field__control--clearable,
752
+ .m-inputgroup > :last-child.m-inputgroup-addon {
753
+ border-bottom-right-radius: var(--m-radius-control);
754
+ border-top-right-radius: var(--m-radius-control);
755
+ }
756
+
757
+ .m-inputgroup > .m-inputgroup-addon + .m-input,
758
+ .m-inputgroup > .m-inputgroup-addon + .m-input-field .m-input,
759
+ .m-inputgroup > .m-input + .m-inputgroup-addon,
760
+ .m-inputgroup > .m-input-field + .m-inputgroup-addon {
761
+ margin-left: calc(var(--m-border-width) * -1);
762
+ }
763
+
764
+ .m-layout__scrollbar > .m-scrollbar__wrap {
765
+ height: 100%;
766
+ overflow-x: hidden;
767
+ }
768
+
769
+ .m-layout-sider__scrollbar > .m-scrollbar__wrap {
770
+ height: 100%;
771
+ overflow-x: hidden;
772
+ }
773
+
774
+ .m-treetable__scrollbar > .m-scrollbar__wrap,
775
+ .m-terminal__scrollbar > .m-scrollbar__wrap {
776
+ height: 100%;
777
+ overflow-x: hidden;
778
+ }
779
+
780
+ .m-scroll-body.m-scrollbar {
781
+ min-height: 0;
782
+ min-width: 0;
783
+ }
784
+
785
+ /* fit-content scroll wrappers: grow with content; max-height only clips when set on the wrapper */
786
+ .m-scrollbar--fit-content.m-scrollbar--fill:not(.m-layout__scrollbar):not(.m-layout-sider__scrollbar):not(.m-scroll-body) {
787
+ width: 100%;
788
+ }
789
+
790
+ .m-scrollbar--fit-content.m-scrollbar--fill:not(.m-layout__scrollbar):not(.m-layout-sider__scrollbar):not(.m-scroll-body) .m-scrollbar__wrap {
791
+ overflow: auto;
792
+ }
793
+
794
+ .m-orderlist__btn,
795
+ .m-picklist__btn {
796
+ align-items: center;
797
+ background: var(--m-color-surface);
798
+ border: var(--m-border-width) solid var(--m-color-border);
799
+ border-radius: var(--m-radius-sm);
800
+ color: var(--m-color-text);
801
+ cursor: pointer;
802
+ display: inline-flex;
803
+ font: inherit;
804
+ gap: 0;
805
+ justify-content: center;
806
+ min-height: var(--m-control-height-small, 1.75rem);
807
+ min-width: var(--m-control-affix-size);
808
+ padding: var(--m-space-1) var(--m-space-2);
809
+ }
810
+
811
+ .m-orderlist__btn:hover:not(:disabled),
812
+ .m-picklist__btn:hover:not(:disabled) {
813
+ border-color: var(--m-color-primary);
814
+ color: var(--m-color-primary);
815
+ }
816
+
817
+ .m-orderlist__btn:disabled,
818
+ .m-picklist__btn:disabled {
819
+ cursor: not-allowed;
820
+ opacity: var(--m-opacity-disabled);
821
+ }
822
+
823
+ .m-orderlist__btn:focus-visible,
824
+ .m-picklist__btn:focus-visible {
825
+ border-color: var(--m-color-primary);
826
+ box-shadow: var(--m-focus-shadow);
827
+ outline: none;
828
+ }
829
+
830
+ .m-picklist__btn .m-icon + .m-icon {
831
+ margin-left: -0.35rem;
832
+ }
833
+
834
+ .m-orderlist__scrollbar,
835
+ .m-picklist__scrollbar {
836
+ flex: 1;
837
+ max-height: 16rem;
838
+ min-height: 12rem;
839
+ min-width: var(--m-menu-min-width);
840
+ }
841
+
842
+ .m-orderlist__list,
843
+ .m-picklist__list {
844
+ background: var(--m-color-surface);
845
+ border: var(--m-border-width) solid var(--m-color-border);
846
+ border-radius: var(--m-radius-md);
847
+ padding: var(--m-space-1);
848
+ }
849
+
850
+ .m-orderlist__options,
851
+ .m-picklist__options {
852
+ list-style: none;
853
+ margin: 0;
854
+ padding: 0;
855
+ }
856
+
857
+ .m-orderlist__item,
858
+ .m-picklist__item {
859
+ border-radius: var(--m-radius-sm);
860
+ cursor: pointer;
861
+ padding: var(--m-space-2) var(--m-space-3);
862
+ }
863
+
864
+ .m-orderlist__item:hover,
865
+ .m-picklist__item:hover {
866
+ background: color-mix(in srgb, var(--m-color-primary) 8%, var(--m-color-surface));
867
+ }
868
+
869
+ .m-orderlist__item:focus-visible,
870
+ .m-picklist__item:focus-visible {
871
+ box-shadow: var(--m-focus-shadow);
872
+ outline: none;
873
+ }
874
+
875
+ .m-orderlist__item--selected,
876
+ .m-picklist__item--selected {
877
+ background: color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface));
878
+ color: var(--m-color-primary);
879
+ font-weight: 600;
880
+ }
881
+
882
+ .m-carousel__nav,
883
+ .m-gallery__nav {
884
+ background: var(--m-color-surface);
885
+ border: var(--m-border-width) solid var(--m-color-border);
886
+ border-radius: var(--m-radius-full, 999px);
887
+ color: var(--m-color-text);
888
+ cursor: pointer;
889
+ flex: 0 0 auto;
890
+ font: inherit;
891
+ height: var(--m-control-affix-size);
892
+ width: var(--m-control-affix-size);
893
+ }
894
+
895
+ .m-carousel__nav:disabled,
896
+ .m-gallery__nav:disabled {
897
+ cursor: not-allowed;
898
+ opacity: var(--m-opacity-disabled);
899
+ }
900
+
901
+ /* Shared Naive-like hover/focus for remaining form triggers */
902
+ .m-inputotp__input:hover:not(:disabled):not(:focus),
903
+ .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
904
+ .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
905
+ .m-inputcolor__text:hover:not(:disabled):not(:focus),
906
+ .m-inputtags:hover:not(.m-inputtags--disabled),
907
+ .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
908
+ .m-inplace__display:hover {
909
+ border-color: var(--m-color-primary-hover);
910
+ }
911
+
912
+ .m-inputotp__input:focus-visible,
913
+ .m-cascadeselect__trigger:focus-visible,
914
+ .m-treeselect__trigger:focus-visible,
915
+ .m-inputcolor__text:focus-visible,
916
+ .m-inputtags:focus-within,
917
+ .m-togglebutton:focus-visible,
918
+ .m-selectbutton__button:focus-visible,
919
+ .m-splitbutton__main:focus-visible,
920
+ .m-splitbutton__trigger:focus-visible,
921
+ .m-inplace__display:focus-visible,
922
+ .m-pagination__button:focus-visible {
923
+ border-color: var(--m-color-primary-hover);
924
+ box-shadow: var(--m-focus-shadow);
925
+ outline: none;
926
+ }
927
+
928
+ .m-inputotp--invalid .m-inputotp__input:focus-visible,
929
+ .m-inputtags--invalid:focus-within,
930
+ .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
931
+ border-color: var(--m-color-danger);
932
+ box-shadow: var(--m-focus-shadow-danger);
933
+ }
934
+
935
+ .m-checkbox-group,
936
+ .m-radio-group {
937
+ display: flex;
938
+ flex-wrap: wrap;
939
+ gap: var(--m-space-3);
940
+ }
941
+
942
+ .m-checkbox--small .m-checkbox__control,
943
+ .m-radio--small .m-radio__control {
944
+ height: 0.95rem;
945
+ width: 0.95rem;
946
+ }
947
+
948
+ .m-checkbox--large .m-checkbox__control,
949
+ .m-radio--large .m-radio__control {
950
+ height: 1.35rem;
951
+ width: 1.35rem;
952
+ }
953
+
954
+ .m-inputnumber__clear,
955
+ .m-autocomplete__clear {
956
+ background: transparent;
957
+ border: 0;
958
+ color: var(--m-color-text-muted);
959
+ cursor: pointer;
960
+ font: inherit;
961
+ line-height: 1;
962
+ }
963
+
964
+ [data-m-motion="none"] *,
965
+ [data-m-motion="none"] *::before,
966
+ [data-m-motion="none"] *::after {
967
+ animation-duration: 0.01ms !important;
968
+ animation-iteration-count: 1 !important;
969
+ scroll-behavior: auto !important;
970
+ transition-duration: 0.01ms !important;
971
+ }
972
+
973
+ [data-m-motion="reduced"] .m-progress-spinner,
974
+ [data-m-motion="reduced"] .m-progress-spinner__circle,
975
+ [data-m-motion="reduced"] .m-skeleton,
976
+ [data-m-motion="reduced"] .m-badge--processing,
977
+ [data-m-motion="reduced"] .m-icon--spin,
978
+ [data-m-motion="reduced"] .m-button__spinner,
979
+ [data-m-motion="reduced"] .m-select__loading-icon,
980
+ [data-m-motion="reduced"] .m-switch__loading-icon {
981
+ animation: none !important;
982
+ }
983
+
984
+ @media (prefers-reduced-motion: reduce) {
985
+ html:not([data-m-ignore-reduced-motion]) *,
986
+ html:not([data-m-ignore-reduced-motion]) *::before,
987
+ html:not([data-m-ignore-reduced-motion]) *::after {
988
+ animation-duration: 0.01ms !important;
989
+ animation-iteration-count: 1 !important;
990
+ scroll-behavior: auto !important;
991
+ transition-duration: 0.01ms !important;
992
+ }
993
+ }
994
+
995
+ /* —— Feedback: Loading —— */
996
+
997
+ .m-loading {
998
+ position: relative;
999
+ }
1000
+
1001
+ .m-loading--fullscreen {
1002
+ inset: 0;
1003
+ position: fixed;
1004
+ z-index: var(--m-loading-z-index, calc(var(--m-z-base) + 200));
1005
+ }
1006
+
1007
+ .m-loading__content {
1008
+ position: relative;
1009
+ }
1010
+
1011
+ .m-loading--active .m-loading__content {
1012
+ pointer-events: none;
1013
+ user-select: none;
1014
+ }
1015
+
1016
+ .m-loading-parent--relative {
1017
+ position: relative;
1018
+ }
1019
+
1020
+ .m-loading-mask {
1021
+ --m-loading-z-index: calc(var(--m-z-base) + 200);
1022
+ --m-loading-mask-bg: color-mix(in srgb, var(--m-color-surface) 80%, transparent);
1023
+ align-items: center;
1024
+ background: var(--m-loading-mask-bg);
1025
+ display: flex;
1026
+ inset: 0;
1027
+ justify-content: center;
1028
+ position: absolute;
1029
+ z-index: 10;
1030
+ }
1031
+
1032
+ .m-loading-mask--fullscreen,
1033
+ .m-loading-mask--body {
1034
+ position: fixed;
1035
+ z-index: var(--m-loading-z-index);
1036
+ }
1037
+
1038
+ .m-loading-mask--body {
1039
+ inset: auto;
1040
+ }
1041
+
1042
+ .m-loading-enter-active {
1043
+ transition: opacity var(--m-motion-enter) var(--m-motion-ease);
1044
+ }
1045
+
1046
+ .m-loading-leave-active {
1047
+ transition: opacity var(--m-motion-exit) var(--m-motion-ease);
1048
+ }
1049
+
1050
+ .m-loading-enter-from,
1051
+ .m-loading-leave-to {
1052
+ opacity: 0;
1053
+ }
1054
+
1055
+ .m-loading-indicator {
1056
+ --m-loading-c1: var(--m-color-primary);
1057
+ --m-loading-c2: color-mix(in srgb, var(--m-color-primary) 62%, white);
1058
+ --m-loading-c3: var(--m-color-success);
1059
+ --m-loading-c4: var(--m-color-warning);
1060
+ --m-loading-c5: var(--m-color-danger);
1061
+ --m-loading-c6: var(--m-color-text-muted);
1062
+ --m-loading-spin: var(--m-motion-spin);
1063
+ --m-loading-aurora-glow: 3s;
1064
+ --m-loading-bounce: 0.6s;
1065
+ --m-loading-wave: var(--m-motion-spin-medium);
1066
+ --m-loading-pulse: 1.8s;
1067
+ --m-loading-stardust: 1.6s;
1068
+ --m-loading-circular-rotate: 2s;
1069
+ --m-loading-circular-dash: var(--m-motion-spin-dash);
1070
+ --m-loading-scale: 1;
1071
+
1072
+ align-items: center;
1073
+ display: inline-flex;
1074
+ flex-direction: column;
1075
+ font-family: var(--m-font-sans);
1076
+ gap: var(--m-space-3);
1077
+ justify-content: center;
1078
+ }
1079
+
1080
+ .m-loading-indicator__graphic {
1081
+ align-items: center;
1082
+ display: inline-flex;
1083
+ justify-content: center;
1084
+ transform: scale(var(--m-loading-scale));
1085
+ }
1086
+
1087
+ .m-loading-indicator__tip {
1088
+ color: var(--m-color-text-muted);
1089
+ font-size: var(--m-font-size-sm);
1090
+ line-height: 1;
1091
+ margin: 0;
1092
+ }
1093
+
1094
+ .m-loading-indicator--small {
1095
+ --m-loading-scale: 0.85;
1096
+ }
1097
+
1098
+ .m-loading-indicator--large {
1099
+ --m-loading-scale: 1.15;
1100
+ }
1101
+
1102
+ .m-loading-aurora,
1103
+ .m-loading-pulse,
1104
+ .m-loading-stardust {
1105
+ height: 3.75rem;
1106
+ position: relative;
1107
+ width: 3.75rem;
1108
+ }
1109
+
1110
+ .m-loading-aurora__ring {
1111
+ animation: m-loading-spin var(--m-loading-spin) cubic-bezier(0.5, 0, 0.5, 1) infinite;
1112
+ border: 4px solid transparent;
1113
+ border-bottom-color: var(--m-loading-c2);
1114
+ border-left-color: var(--m-loading-c3);
1115
+ border-radius: 50%;
1116
+ border-right-color: var(--m-loading-c5);
1117
+ border-top-color: var(--m-loading-c1);
1118
+ box-sizing: border-box;
1119
+ height: 100%;
1120
+ position: relative;
1121
+ width: 100%;
1122
+ z-index: 2;
1123
+ }
1124
+
1125
+ .m-loading-aurora__glow {
1126
+ animation: m-loading-spin var(--m-loading-aurora-glow) linear infinite reverse;
1127
+ background: conic-gradient(
1128
+ from 0deg,
1129
+ var(--m-loading-c1),
1130
+ var(--m-loading-c5),
1131
+ var(--m-loading-c2),
1132
+ var(--m-loading-c3),
1133
+ var(--m-loading-c1)
1134
+ );
1135
+ border-radius: 50%;
1136
+ filter: blur(10px);
1137
+ inset: -6px;
1138
+ opacity: 0.22;
1139
+ position: absolute;
1140
+ z-index: 1;
1141
+ }
1142
+
1143
+ .m-loading-bounce {
1144
+ align-items: flex-end;
1145
+ display: flex;
1146
+ gap: var(--m-space-3);
1147
+ height: 3.125rem;
1148
+ }
1149
+
1150
+ .m-loading-bounce__ball {
1151
+ animation: m-loading-bounce var(--m-loading-bounce) cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate;
1152
+ background: var(--m-loading-c1);
1153
+ border-radius: 50%;
1154
+ display: block;
1155
+ height: 1rem;
1156
+ width: 1rem;
1157
+ }
1158
+
1159
+ .m-loading-bounce__ball:nth-child(1) {
1160
+ animation-delay: 0s;
1161
+ background: var(--m-loading-c5);
1162
+ }
1163
+
1164
+ .m-loading-bounce__ball:nth-child(2) {
1165
+ animation-delay: 0.15s;
1166
+ background: var(--m-loading-c2);
1167
+ }
1168
+
1169
+ .m-loading-bounce__ball:nth-child(3) {
1170
+ animation-delay: 0.3s;
1171
+ background: var(--m-loading-c6);
1172
+ }
1173
+
1174
+ .m-loading-wave {
1175
+ align-items: center;
1176
+ display: flex;
1177
+ gap: 0.375rem;
1178
+ height: 3.125rem;
1179
+ }
1180
+
1181
+ .m-loading-wave__bar {
1182
+ animation: m-loading-wave var(--m-loading-wave) ease-in-out infinite alternate;
1183
+ background: var(--m-loading-c1);
1184
+ border-radius: 0.375rem;
1185
+ display: block;
1186
+ height: 2.875rem;
1187
+ transform-origin: center center;
1188
+ width: 0.5rem;
1189
+ }
1190
+
1191
+ .m-loading-wave__bar:nth-child(1) {
1192
+ animation-delay: 0s;
1193
+ background: var(--m-loading-c1);
1194
+ }
1195
+
1196
+ .m-loading-wave__bar:nth-child(2) {
1197
+ animation-delay: 0.09s;
1198
+ background: var(--m-loading-c5);
1199
+ }
1200
+
1201
+ .m-loading-wave__bar:nth-child(3) {
1202
+ animation-delay: 0.18s;
1203
+ background: var(--m-loading-c2);
1204
+ }
1205
+
1206
+ .m-loading-wave__bar:nth-child(4) {
1207
+ animation-delay: 0.27s;
1208
+ background: var(--m-loading-c3);
1209
+ }
1210
+
1211
+ .m-loading-wave__bar:nth-child(5) {
1212
+ animation-delay: 0.36s;
1213
+ background: var(--m-loading-c6);
1214
+ }
1215
+
1216
+ .m-loading-pulse__ring {
1217
+ animation: m-loading-pulse var(--m-loading-pulse) ease-out infinite;
1218
+ border: 3px solid var(--m-loading-c2);
1219
+ border-radius: 50%;
1220
+ box-sizing: border-box;
1221
+ inset: 0;
1222
+ position: absolute;
1223
+ }
1224
+
1225
+ .m-loading-pulse__ring:nth-child(1) {
1226
+ animation-delay: 0s;
1227
+ border-color: var(--m-loading-c1);
1228
+ }
1229
+
1230
+ .m-loading-pulse__ring:nth-child(2) {
1231
+ animation-delay: 0.45s;
1232
+ border-color: var(--m-loading-c5);
1233
+ }
1234
+
1235
+ .m-loading-pulse__ring:nth-child(3) {
1236
+ animation-delay: 0.9s;
1237
+ border-color: var(--m-loading-c2);
1238
+ }
1239
+
1240
+ .m-loading-pulse__ring:nth-child(4) {
1241
+ animation-delay: 1.35s;
1242
+ border-color: var(--m-loading-c3);
1243
+ }
1244
+
1245
+ .m-loading-stardust__dot {
1246
+ --i: 0;
1247
+ animation: m-loading-stardust var(--m-loading-stardust) ease-in-out infinite;
1248
+ background: var(--m-loading-c1);
1249
+ border-radius: 50%;
1250
+ height: 0.5rem;
1251
+ left: 50%;
1252
+ position: absolute;
1253
+ top: 50%;
1254
+ transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(22px);
1255
+ width: 0.5rem;
1256
+ }
1257
+
1258
+ .m-loading-stardust__dot:nth-child(1) { animation-delay: 0s; background: var(--m-loading-c1); }
1259
+ .m-loading-stardust__dot:nth-child(2) { animation-delay: 0.08s; background: var(--m-loading-c5); }
1260
+ .m-loading-stardust__dot:nth-child(3) { animation-delay: 0.16s; background: var(--m-loading-c4); }
1261
+ .m-loading-stardust__dot:nth-child(4) { animation-delay: 0.24s; background: var(--m-loading-c2); }
1262
+ .m-loading-stardust__dot:nth-child(5) { animation-delay: 0.32s; background: var(--m-loading-c3); }
1263
+ .m-loading-stardust__dot:nth-child(6) { animation-delay: 0.4s; background: var(--m-loading-c6); }
1264
+ .m-loading-stardust__dot:nth-child(7) { animation-delay: 0.48s; background: color-mix(in srgb, var(--m-loading-c1) 55%, white); }
1265
+ .m-loading-stardust__dot:nth-child(8) { animation-delay: 0.56s; background: var(--m-loading-c2); }
1266
+
1267
+ .m-loading-circular {
1268
+ align-items: center;
1269
+ display: inline-flex;
1270
+ justify-content: center;
1271
+ }
1272
+
1273
+ .m-loading-circular__svg {
1274
+ animation: m-loading-circular-rotate var(--m-loading-circular-rotate) linear infinite;
1275
+ display: inline-block;
1276
+ height: 2.625rem;
1277
+ width: 2.625rem;
1278
+ }
1279
+
1280
+ .m-loading-circular__path {
1281
+ animation: m-loading-circular-dash var(--m-loading-circular-dash) ease-in-out infinite;
1282
+ fill: none;
1283
+ stroke: var(--m-loading-c1);
1284
+ stroke-linecap: round;
1285
+ stroke-width: 2;
1286
+ }
1287
+
1288
+ @keyframes m-loading-spin {
1289
+ from { transform: rotate(0deg); }
1290
+ to { transform: rotate(360deg); }
1291
+ }
1292
+
1293
+ @keyframes m-loading-bounce {
1294
+ from { transform: translateY(0) scale(1); }
1295
+ to { transform: translateY(-34px) scale(1.1); }
1296
+ }
1297
+
1298
+ @keyframes m-loading-wave {
1299
+ from { transform: scaleY(0.26); }
1300
+ to { transform: scaleY(1); }
1301
+ }
1302
+
1303
+ @keyframes m-loading-pulse {
1304
+ from { opacity: 1; transform: scale(0.15); }
1305
+ to { opacity: 0; transform: scale(1.6); }
1306
+ }
1307
+
1308
+ @keyframes m-loading-stardust {
1309
+ 0%,
1310
+ 100% {
1311
+ opacity: 0.2;
1312
+ transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(22px) scale(0.3);
1313
+ }
1314
+
1315
+ 50% {
1316
+ opacity: 1;
1317
+ transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + 180deg)) translateX(28px) scale(1.2);
1318
+ }
1319
+ }
1320
+
1321
+ @keyframes m-loading-circular-rotate {
1322
+ to { transform: rotate(360deg); }
1323
+ }
1324
+
1325
+ @keyframes m-loading-circular-dash {
1326
+ 0% {
1327
+ stroke-dasharray: 1, 200;
1328
+ stroke-dashoffset: 0;
1329
+ }
1330
+
1331
+ 50% {
1332
+ stroke-dasharray: 90, 150;
1333
+ stroke-dashoffset: -40px;
1334
+ }
1335
+
1336
+ 100% {
1337
+ stroke-dasharray: 90, 150;
1338
+ stroke-dashoffset: -120px;
1339
+ }
1340
+ }
1341
+
1342
+ @media (prefers-reduced-motion: reduce) {
1343
+ html:not([data-m-ignore-reduced-motion]) .m-loading-aurora__ring,
1344
+ html:not([data-m-ignore-reduced-motion]) .m-loading-aurora__glow,
1345
+ html:not([data-m-ignore-reduced-motion]) .m-loading-bounce__ball,
1346
+ html:not([data-m-ignore-reduced-motion]) .m-loading-wave__bar,
1347
+ html:not([data-m-ignore-reduced-motion]) .m-loading-pulse__ring,
1348
+ html:not([data-m-ignore-reduced-motion]) .m-loading-stardust__dot,
1349
+ html:not([data-m-ignore-reduced-motion]) .m-loading-circular__svg,
1350
+ html:not([data-m-ignore-reduced-motion]) .m-loading-circular__path,
1351
+ html:not([data-m-ignore-reduced-motion]) .m-loading-enter-active,
1352
+ html:not([data-m-ignore-reduced-motion]) .m-loading-leave-active {
1353
+ animation: none;
1354
+ transition: none;
1355
+ }
1356
+ }
1357
+
1358
+ [data-m-motion="reduced"] .m-loading-aurora__ring,
1359
+ [data-m-motion="reduced"] .m-loading-aurora__glow,
1360
+ [data-m-motion="reduced"] .m-loading-bounce__ball,
1361
+ [data-m-motion="reduced"] .m-loading-wave__bar,
1362
+ [data-m-motion="reduced"] .m-loading-pulse__ring,
1363
+ [data-m-motion="reduced"] .m-loading-stardust__dot,
1364
+ [data-m-motion="reduced"] .m-loading-circular__svg,
1365
+ [data-m-motion="reduced"] .m-loading-circular__path,
1366
+ [data-m-motion="reduced"] .m-loading-enter-active,
1367
+ [data-m-motion="reduced"] .m-loading-leave-active,
1368
+ [data-m-motion="none"] .m-loading-aurora__ring,
1369
+ [data-m-motion="none"] .m-loading-aurora__glow,
1370
+ [data-m-motion="none"] .m-loading-bounce__ball,
1371
+ [data-m-motion="none"] .m-loading-wave__bar,
1372
+ [data-m-motion="none"] .m-loading-pulse__ring,
1373
+ [data-m-motion="none"] .m-loading-stardust__dot,
1374
+ [data-m-motion="none"] .m-loading-circular__svg,
1375
+ [data-m-motion="none"] .m-loading-circular__path,
1376
+ [data-m-motion="none"] .m-loading-enter-active,
1377
+ [data-m-motion="none"] .m-loading-leave-active {
1378
+ animation: none;
1379
+ transition: none;
1380
+ }