morya-ui 0.3.4 → 0.3.6

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 (249) hide show
  1. package/CHANGELOG.md +536 -523
  2. package/LICENSE +21 -21
  3. package/README.md +150 -150
  4. package/README.zh-CN.md +150 -150
  5. package/dist/{Button-gBiRj7wz.js → Button-3vJoiEQC.js} +1 -1
  6. package/dist/{Checkbox-BzbAUfyZ.js → Checkbox-B2gcDJHM.js} +1 -1
  7. package/dist/{Empty-C5tndBOm.js → Empty-5pTDp3ZM.js} +1 -1
  8. package/dist/{FlyoutSubmenu-H_741alW.js → FlyoutSubmenu-C_OrDaPN.js} +1 -1
  9. package/dist/{Loading-qS2Yv_gm.js → Loading-Ba-Js5-u.js} +3 -3
  10. package/dist/{Pagination-Bvv2qvEK.js → Pagination-lJ7cce6g.js} +2 -2
  11. package/dist/{Popover-rnZG_ap0.js → Popover-CQ2VYpFJ.js} +2 -2
  12. package/dist/{Radio-rF6zdR5Y.js → Radio-BbJ_Jyil.js} +1 -1
  13. package/dist/{Select-CiXd074W.js → Select-DyxORH6Q.js} +3 -3
  14. package/dist/{Tooltip-B02o9BOW.js → Tooltip-D3WUemno.js} +2 -2
  15. package/dist/accordion/style.css +1148 -1148
  16. package/dist/auto-complete/index.js +3 -3
  17. package/dist/auto-complete/style.css +1690 -1690
  18. package/dist/avatar/style.css +1261 -1261
  19. package/dist/badge/style.css +1315 -1315
  20. package/dist/block-ui/index.js +1 -1
  21. package/dist/block-ui/style.css +1148 -1148
  22. package/dist/breadcrumb/index.js +1 -1
  23. package/dist/breadcrumb/style.css +1148 -1148
  24. package/dist/button/index.js +1 -1
  25. package/dist/button/style.css +2138 -2138
  26. package/dist/card/style.css +1148 -1148
  27. package/dist/carousel/index.js +1 -1
  28. package/dist/carousel/style.css +1249 -1249
  29. package/dist/cascade-select/index.js +3 -3
  30. package/dist/cascade-select/style.css +1839 -1839
  31. package/dist/checkbox/index.js +1 -1
  32. package/dist/checkbox/style.css +1148 -1148
  33. package/dist/chip/index.js +1 -1
  34. package/dist/chip/style.css +1292 -1292
  35. package/dist/command-menu/index.js +3 -3
  36. package/dist/command-menu/style.css +1381 -1381
  37. package/dist/components/AutoComplete/styles.css +209 -209
  38. package/dist/components/Avatar/styles.css +113 -113
  39. package/dist/components/Badge/styles.css +165 -165
  40. package/dist/components/Button/styles.css +962 -962
  41. package/dist/components/Carousel/styles.css +101 -101
  42. package/dist/components/CascadeSelect/styles.css +157 -157
  43. package/dist/components/Chip/styles.css +144 -144
  44. package/dist/components/CommandMenu/styles.css +102 -102
  45. package/dist/components/ConfigProvider/styles.css +6 -6
  46. package/dist/components/ConfirmDialog/styles.css +24 -24
  47. package/dist/components/ConfirmPopup/styles.css +35 -35
  48. package/dist/components/ContextMenu/styles.css +138 -138
  49. package/dist/components/DatePicker/styles.css +335 -335
  50. package/dist/components/Dialog/styles.css +421 -421
  51. package/dist/components/Dock/styles.css +84 -84
  52. package/dist/components/Drawer/styles.css +334 -334
  53. package/dist/components/Dropdown/styles.css +130 -130
  54. package/dist/components/Empty/styles.css +146 -146
  55. package/dist/components/FileUpload/styles.css +359 -359
  56. package/dist/components/Form/styles.css +114 -114
  57. package/dist/components/Gallery/styles.css +100 -100
  58. package/dist/components/Input/styles.css +356 -356
  59. package/dist/components/InputColor/styles.css +129 -129
  60. package/dist/components/InputNumber/styles.css +261 -261
  61. package/dist/components/InputPassword/styles.css +178 -178
  62. package/dist/components/InputTags/styles.css +112 -112
  63. package/dist/components/Layout/styles.css +433 -433
  64. package/dist/components/Loading/styles.css +378 -378
  65. package/dist/components/MegaMenu/styles.css +97 -97
  66. package/dist/components/Menu/styles.css +564 -564
  67. package/dist/components/Menubar/styles.css +144 -144
  68. package/dist/components/Message/styles.css +250 -250
  69. package/dist/components/MeterGroup/styles.css +49 -49
  70. package/dist/components/Page/PageFilters.vue.d.ts +5 -3
  71. package/dist/components/Page/PageFilters.vue.d.ts.map +1 -1
  72. package/dist/components/Page/styles.css +430 -412
  73. package/dist/components/Page/types.d.ts +2 -2
  74. package/dist/components/Page/types.d.ts.map +1 -1
  75. package/dist/components/Pagination/styles.css +105 -105
  76. package/dist/components/Popover/styles.css +92 -92
  77. package/dist/components/Result/styles.css +146 -146
  78. package/dist/components/Scrollbar/styles.css +131 -131
  79. package/dist/components/Select/styles.css +192 -192
  80. package/dist/components/SelectButton/styles.css +105 -105
  81. package/dist/components/Sidebar/styles.css +74 -74
  82. package/dist/components/Slider/styles.css +211 -211
  83. package/dist/components/SplitButton/styles.css +216 -216
  84. package/dist/components/Status/styles.css +191 -191
  85. package/dist/components/Stepper/styles.css +135 -135
  86. package/dist/components/Switch/styles.css +129 -129
  87. package/dist/components/Tabs/styles.css +131 -131
  88. package/dist/components/Terminal/styles.css +74 -74
  89. package/dist/components/Textarea/styles.css +126 -126
  90. package/dist/components/TieredMenu/styles.css +125 -125
  91. package/dist/components/Timeline/styles.css +159 -159
  92. package/dist/components/TreeSelect/styles.css +161 -161
  93. package/dist/components/TreeTable/styles.css +97 -97
  94. package/dist/components/VirtualScroller/styles.css +27 -27
  95. package/dist/{config-CapALqt3.js → config-De8ueCY-.js} +2 -0
  96. package/dist/config-provider/index.js +1 -1
  97. package/dist/config-provider/style.css +2472 -2472
  98. package/dist/confirm-dialog/index.js +4 -4
  99. package/dist/confirm-dialog/style.css +2555 -2555
  100. package/dist/confirm-popup/index.js +4 -4
  101. package/dist/confirm-popup/style.css +2145 -2145
  102. package/dist/context-menu/index.js +3 -3
  103. package/dist/context-menu/style.css +1417 -1417
  104. package/dist/data-view/index.js +3 -3
  105. package/dist/data-view/style.css +1631 -1631
  106. package/dist/date-picker/index.js +3 -3
  107. package/dist/date-picker/style.css +1483 -1483
  108. package/dist/dialog/index.js +4 -4
  109. package/dist/dialog/style.css +2531 -2531
  110. package/dist/divider/style.css +1148 -1148
  111. package/dist/dock/style.css +1232 -1232
  112. package/dist/drawer/index.js +3 -3
  113. package/dist/drawer/style.css +1482 -1482
  114. package/dist/dropdown/index.js +4 -4
  115. package/dist/dropdown/style.css +1409 -1409
  116. package/dist/empty/index.js +1 -1
  117. package/dist/empty/style.css +1294 -1294
  118. package/dist/fieldset/style.css +1148 -1148
  119. package/dist/file-upload/index.js +1 -1
  120. package/dist/file-upload/style.css +1507 -1507
  121. package/dist/flex/index.js +1 -1
  122. package/dist/flex/style.css +1148 -1148
  123. package/dist/float-label/style.css +1148 -1148
  124. package/dist/fluid/style.css +1148 -1148
  125. package/dist/form/index.js +1 -1
  126. package/dist/form/style.css +1264 -1264
  127. package/dist/gallery/index.js +1 -1
  128. package/dist/gallery/style.css +1379 -1379
  129. package/dist/grid/style.css +1148 -1148
  130. package/dist/icon/style.css +1148 -1148
  131. package/dist/icon-field/style.css +1504 -1504
  132. package/dist/index.js +84 -69
  133. package/dist/inplace/style.css +1148 -1148
  134. package/dist/input/index.js +2 -2
  135. package/dist/input/style.css +1504 -1504
  136. package/dist/input-color/index.js +2 -2
  137. package/dist/input-color/style.css +1279 -1279
  138. package/dist/input-group/style.css +1148 -1148
  139. package/dist/input-number/index.js +2 -2
  140. package/dist/input-number/style.css +1409 -1409
  141. package/dist/input-otp/index.js +2 -2
  142. package/dist/input-otp/style.css +1148 -1148
  143. package/dist/input-password/index.js +2 -2
  144. package/dist/input-password/style.css +1326 -1326
  145. package/dist/input-tags/index.js +2 -2
  146. package/dist/input-tags/style.css +1260 -1260
  147. package/dist/knob/style.css +1148 -1148
  148. package/dist/label/style.css +1148 -1148
  149. package/dist/layout/index.js +1 -1
  150. package/dist/layout/style.css +1712 -1712
  151. package/dist/listbox/index.js +2 -2
  152. package/dist/listbox/style.css +1306 -1306
  153. package/dist/loading/index.js +1 -1
  154. package/dist/loading/style.css +1528 -1528
  155. package/dist/locale/en-US.d.ts.map +1 -1
  156. package/dist/locale/types.d.ts +4 -0
  157. package/dist/locale/types.d.ts.map +1 -1
  158. package/dist/locale/zh-CN.d.ts.map +1 -1
  159. package/dist/{locale-Bzm2nbEp.js → locale-xavS6-Hw.js} +1 -1
  160. package/dist/mega-menu/index.js +3 -3
  161. package/dist/mega-menu/style.css +1245 -1245
  162. package/dist/menu/index.js +4 -4
  163. package/dist/menu/style.css +2001 -2001
  164. package/dist/menubar/index.js +3 -3
  165. package/dist/menubar/style.css +1423 -1423
  166. package/dist/message/index.js +3 -3
  167. package/dist/message/style.css +1398 -1398
  168. package/dist/meter-group/style.css +1199 -1199
  169. package/dist/order-list/index.js +1 -1
  170. package/dist/order-list/style.css +1148 -1148
  171. package/dist/page/index.js +63 -52
  172. package/dist/page/style.css +2806 -2788
  173. package/dist/pagination/index.js +1 -1
  174. package/dist/pagination/style.css +1445 -1445
  175. package/dist/panel/index.js +1 -1
  176. package/dist/panel/style.css +1148 -1148
  177. package/dist/pick-list/index.js +1 -1
  178. package/dist/pick-list/style.css +1148 -1148
  179. package/dist/popover/index.js +1 -1
  180. package/dist/popover/style.css +1242 -1242
  181. package/dist/progress-bar/style.css +1148 -1148
  182. package/dist/progress-spinner/index.js +1 -1
  183. package/dist/progress-spinner/style.css +1148 -1148
  184. package/dist/radio/index.js +1 -1
  185. package/dist/radio/style.css +1148 -1148
  186. package/dist/rating/index.js +2 -2
  187. package/dist/rating/style.css +1148 -1148
  188. package/dist/result/index.js +1 -1
  189. package/dist/result/style.css +1294 -1294
  190. package/dist/scroll-top/index.js +2 -2
  191. package/dist/scroll-top/style.css +1279 -1279
  192. package/dist/scrollbar/style.css +1281 -1281
  193. package/dist/select/index.js +1 -1
  194. package/dist/select/style.css +1901 -1901
  195. package/dist/select-button/index.js +1 -1
  196. package/dist/select-button/style.css +1255 -1255
  197. package/dist/shared/styles/control-affix-icon.css +110 -110
  198. package/dist/shared/styles/control-suffix.css +118 -118
  199. package/dist/shared/styles/select-overlay.css +175 -175
  200. package/dist/sidebar/index.js +1 -1
  201. package/dist/sidebar/style.css +1222 -1222
  202. package/dist/skeleton/style.css +1148 -1148
  203. package/dist/slider/index.js +2 -2
  204. package/dist/slider/style.css +1361 -1361
  205. package/dist/space/index.js +1 -1
  206. package/dist/space/style.css +1148 -1148
  207. package/dist/speed-dial/index.js +3 -3
  208. package/dist/speed-dial/style.css +1148 -1148
  209. package/dist/split-button/index.js +3 -3
  210. package/dist/split-button/style.css +2326 -2326
  211. package/dist/splitter/index.js +1 -1
  212. package/dist/splitter/style.css +1148 -1148
  213. package/dist/status/index.js +1 -1
  214. package/dist/status/style.css +1339 -1339
  215. package/dist/stepper/style.css +1283 -1283
  216. package/dist/styles/base.css +790 -790
  217. package/dist/styles.css +1 -1
  218. package/dist/switch/index.js +1 -1
  219. package/dist/switch/style.css +1279 -1279
  220. package/dist/table/index.js +7 -7
  221. package/dist/table/style.css +1812 -1812
  222. package/dist/tabs/index.js +1 -1
  223. package/dist/tabs/style.css +1410 -1410
  224. package/dist/tag/index.js +2 -2
  225. package/dist/tag/style.css +1148 -1148
  226. package/dist/terminal/index.js +1 -1
  227. package/dist/terminal/style.css +1224 -1224
  228. package/dist/textarea/index.js +2 -2
  229. package/dist/textarea/style.css +1274 -1274
  230. package/dist/theme/styles.css +358 -358
  231. package/dist/tiered-menu/index.js +3 -3
  232. package/dist/tiered-menu/style.css +1404 -1404
  233. package/dist/timeline/style.css +1438 -1438
  234. package/dist/toast/index.js +3 -3
  235. package/dist/toast/style.css +1148 -1148
  236. package/dist/toggle-button/index.js +1 -1
  237. package/dist/toggle-button/style.css +1148 -1148
  238. package/dist/toolbar/style.css +1148 -1148
  239. package/dist/tooltip/index.js +1 -1
  240. package/dist/tooltip/style.css +1148 -1148
  241. package/dist/tree/index.js +2 -2
  242. package/dist/tree/style.css +1148 -1148
  243. package/dist/tree-select/index.js +4 -4
  244. package/dist/tree-select/style.css +1843 -1843
  245. package/dist/tree-table/index.js +1 -1
  246. package/dist/tree-table/style.css +1245 -1245
  247. package/dist/{useMotionTransition-95Y79FoL.js → useMotionTransition-tW0yeJsy.js} +1 -1
  248. package/dist/virtual-scroller/style.css +1309 -1309
  249. package/package.json +29 -31
package/dist/components/Input/styles.css CHANGED
@@ -1,356 +1,356 @@
1
- .m-input:focus {
2
- outline: none;
3
- }
4
-
5
- .m-input:hover:not(:disabled):not(:focus) {
6
- border-color: var(--m-color-primary-hover);
7
- }
8
-
9
- .m-input:focus-visible {
10
- border-color: var(--m-color-primary-hover);
11
- box-shadow: var(--m-focus-shadow);
12
- outline: none;
13
- }
14
-
15
- .m-input--invalid:focus-visible {
16
- border-color: var(--m-color-danger);
17
- box-shadow: var(--m-focus-shadow-danger);
18
- }
19
-
20
- .m-input-field {
21
- display: grid;
22
- gap: var(--m-space-2);
23
- }
24
-
25
- .m-input-field--fluid {
26
- width: 100%;
27
- }
28
-
29
- .m-input-field__label {
30
- color: var(--m-color-text);
31
- font-family: var(--m-font-sans);
32
- font-size: var(--m-font-size-md);
33
- font-weight: 600;
34
- }
35
-
36
- .m-input-field__help {
37
- color: var(--m-color-text-muted);
38
- font-size: var(--m-font-size-xs);
39
- }
40
-
41
- .m-input-field__help--invalid {
42
- color: var(--m-color-danger);
43
- }
44
-
45
- .m-input-field__control {
46
- position: relative;
47
- }
48
-
49
- /*
50
- * Affix/clear shell: prefix/suffix participate in flex flow so long slot
51
- * content reserves real width instead of fighting fixed input padding.
52
- */
53
- .m-input-field__control--prefixed,
54
- .m-input-field__control--suffixed,
55
- .m-input-field__control--clearable {
56
- align-items: center;
57
- background: var(--m-color-surface);
58
- border: var(--m-border-width) solid var(--m-color-border);
59
- border-radius: var(--m-radius-control);
60
- box-sizing: border-box;
61
- display: flex;
62
- max-width: 100%;
63
- min-height: var(--m-control-height-medium);
64
- transition:
65
- border-color var(--m-motion-fast) var(--m-motion-ease),
66
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
67
- background-color var(--m-motion-fast) var(--m-motion-ease);
68
- }
69
-
70
- .m-input-field--fluid .m-input-field__control--prefixed,
71
- .m-input-field--fluid .m-input-field__control--suffixed,
72
- .m-input-field--fluid .m-input-field__control--clearable {
73
- width: 100%;
74
- }
75
-
76
- .m-input-field__control--prefixed:has(.m-input--small),
77
- .m-input-field__control--suffixed:has(.m-input--small),
78
- .m-input-field__control--clearable:has(.m-input--small),
79
- .m-input-field__control--prefixed:has(.m-input--sm),
80
- .m-input-field__control--suffixed:has(.m-input--sm),
81
- .m-input-field__control--clearable:has(.m-input--sm) {
82
- min-height: var(--m-control-height-small);
83
- }
84
-
85
- .m-input-field__control--prefixed:has(.m-input--large),
86
- .m-input-field__control--suffixed:has(.m-input--large),
87
- .m-input-field__control--clearable:has(.m-input--large),
88
- .m-input-field__control--prefixed:has(.m-input--lg),
89
- .m-input-field__control--suffixed:has(.m-input--lg),
90
- .m-input-field__control--clearable:has(.m-input--lg) {
91
- min-height: var(--m-control-height-large);
92
- }
93
-
94
- .m-input-field__control--prefixed:has(.m-input--filled),
95
- .m-input-field__control--suffixed:has(.m-input--filled),
96
- .m-input-field__control--clearable:has(.m-input--filled) {
97
- background: color-mix(
98
- in srgb,
99
- var(--m-color-text-muted) 12%,
100
- var(--m-color-surface)
101
- );
102
- border-color: transparent;
103
- }
104
-
105
- .m-input-field__control--prefixed:has(.m-input--invalid),
106
- .m-input-field__control--suffixed:has(.m-input--invalid),
107
- .m-input-field__control--clearable:has(.m-input--invalid) {
108
- border-color: var(--m-color-danger);
109
- }
110
-
111
- .m-input-field__control--prefixed:hover:not(:focus-within):has(
112
- .m-input:not(:disabled)
113
- ),
114
- .m-input-field__control--suffixed:hover:not(:focus-within):has(
115
- .m-input:not(:disabled)
116
- ),
117
- .m-input-field__control--clearable:hover:not(:focus-within):has(
118
- .m-input:not(:disabled)
119
- ) {
120
- border-color: var(--m-color-primary-hover);
121
- }
122
-
123
- .m-input-field__control--prefixed:focus-within,
124
- .m-input-field__control--suffixed:focus-within,
125
- .m-input-field__control--clearable:focus-within {
126
- border-color: var(--m-color-primary-hover);
127
- box-shadow: var(--m-focus-shadow);
128
- }
129
-
130
- .m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
131
- .m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
132
- .m-input-field__control--clearable:has(.m-input--invalid):focus-within {
133
- border-color: var(--m-color-danger);
134
- box-shadow: var(--m-focus-shadow-danger);
135
- }
136
-
137
- .m-input-field__control--prefixed:has(.m-input:disabled),
138
- .m-input-field__control--suffixed:has(.m-input:disabled),
139
- .m-input-field__control--clearable:has(.m-input:disabled) {
140
- cursor: not-allowed;
141
- opacity: var(--m-opacity-disabled);
142
- }
143
-
144
- .m-input-field__control--prefixed .m-input,
145
- .m-input-field__control--suffixed .m-input,
146
- .m-input-field__control--clearable .m-input {
147
- background: transparent;
148
- border: 0;
149
- border-radius: 0;
150
- box-shadow: none;
151
- flex: 1 1 auto;
152
- height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
153
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
154
- min-height: 0;
155
- min-width: 0;
156
- width: auto;
157
- }
158
-
159
- .m-input-field__control--prefixed:has(.m-input--small) .m-input,
160
- .m-input-field__control--suffixed:has(.m-input--small) .m-input,
161
- .m-input-field__control--clearable:has(.m-input--small) .m-input,
162
- .m-input-field__control--prefixed:has(.m-input--sm) .m-input,
163
- .m-input-field__control--suffixed:has(.m-input--sm) .m-input,
164
- .m-input-field__control--clearable:has(.m-input--sm) .m-input {
165
- height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
166
- line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
167
- }
168
-
169
- .m-input-field__control--prefixed:has(.m-input--large) .m-input,
170
- .m-input-field__control--suffixed:has(.m-input--large) .m-input,
171
- .m-input-field__control--clearable:has(.m-input--large) .m-input,
172
- .m-input-field__control--prefixed:has(.m-input--lg) .m-input,
173
- .m-input-field__control--suffixed:has(.m-input--lg) .m-input,
174
- .m-input-field__control--clearable:has(.m-input--lg) .m-input {
175
- height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
176
- line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
177
- }
178
-
179
- .m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
180
- .m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
181
- .m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
182
- .m-input-field__control--prefixed .m-input:focus-visible,
183
- .m-input-field__control--suffixed .m-input:focus-visible,
184
- .m-input-field__control--clearable .m-input:focus-visible,
185
- .m-input-field__control--prefixed .m-input--invalid:focus-visible,
186
- .m-input-field__control--suffixed .m-input--invalid:focus-visible,
187
- .m-input-field__control--clearable .m-input--invalid:focus-visible {
188
- border-color: transparent;
189
- box-shadow: none;
190
- }
191
-
192
- .m-input-field__control--prefixed .m-input {
193
- padding-left: 0;
194
- }
195
-
196
- .m-input-field__control--suffixed .m-input,
197
- .m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
198
- padding-right: 0;
199
- }
200
-
201
- .m-input__prefix,
202
- .m-input__suffix {
203
- align-items: center;
204
- color: var(--m-color-text-muted);
205
- display: inline-flex;
206
- flex: 0 0 auto;
207
- font-size: inherit;
208
- gap: var(--m-space-1);
209
- line-height: 1;
210
- padding-inline: var(--m-space-2);
211
- pointer-events: none;
212
- white-space: nowrap;
213
- }
214
-
215
- .m-input-field__control--prefixed .m-input__prefix,
216
- .m-input-field__control--suffixed .m-input__suffix {
217
- font-size: var(--m-control-font-medium);
218
- }
219
-
220
- .m-input-field__control:has(.m-input--small) .m-input__prefix,
221
- .m-input-field__control:has(.m-input--small) .m-input__suffix,
222
- .m-input-field__control:has(.m-input--sm) .m-input__prefix,
223
- .m-input-field__control:has(.m-input--sm) .m-input__suffix {
224
- font-size: var(--m-control-font-small);
225
- padding-inline: var(--m-space-2);
226
- }
227
-
228
- .m-input-field__control:has(.m-input--large) .m-input__prefix,
229
- .m-input-field__control:has(.m-input--large) .m-input__suffix,
230
- .m-input-field__control:has(.m-input--lg) .m-input__prefix,
231
- .m-input-field__control:has(.m-input--lg) .m-input__suffix {
232
- font-size: var(--m-control-font-large);
233
- padding-inline: var(--m-space-3);
234
- }
235
-
236
- .m-input__prefix button,
237
- .m-input__suffix button,
238
- .m-input__prefix a,
239
- .m-input__suffix a {
240
- pointer-events: auto;
241
- }
242
-
243
- .m-input {
244
- background: var(--m-color-surface);
245
- border: var(--m-border-width) solid var(--m-color-border);
246
- border-radius: var(--m-radius-control);
247
- color: var(--m-color-text);
248
- font-family: var(--m-font-sans);
249
- font-size: var(--m-control-font-medium);
250
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
251
- min-height: var(--m-control-height-medium);
252
- padding: 0 var(--m-control-padding-x-medium);
253
- transition:
254
- border-color var(--m-motion-fast) var(--m-motion-ease),
255
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
256
- background-color var(--m-motion-fast) var(--m-motion-ease),
257
- opacity var(--m-motion-fast) var(--m-motion-ease);
258
- }
259
-
260
- .m-input--filled {
261
- background: color-mix(
262
- in srgb,
263
- var(--m-color-text-muted) 12%,
264
- var(--m-color-surface)
265
- );
266
- border-color: transparent;
267
- }
268
-
269
- .m-input--fluid {
270
- width: 100%;
271
- }
272
-
273
- .m-input--invalid {
274
- border-color: var(--m-color-danger);
275
- }
276
-
277
- .m-input--small,
278
- .m-input--sm {
279
- font-size: var(--m-control-font-small);
280
- line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
281
- min-height: var(--m-control-height-small);
282
- padding: 0 var(--m-control-padding-x-small);
283
- }
284
-
285
- .m-input--normal {
286
- font-size: var(--m-control-font-medium);
287
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
288
- min-height: var(--m-control-height-medium);
289
- padding: 0 var(--m-control-padding-x-medium);
290
- }
291
-
292
- .m-input--large,
293
- .m-input--lg {
294
- font-size: var(--m-control-font-large);
295
- line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
296
- min-height: var(--m-control-height-large);
297
- padding: 0 var(--m-control-padding-x-large);
298
- }
299
-
300
- .m-input-field__control .m-input {
301
- width: 100%;
302
- }
303
-
304
- .m-input-field__control--prefixed .m-input,
305
- .m-input-field__control--suffixed .m-input,
306
- .m-input-field__control--clearable .m-input {
307
- width: auto;
308
- }
309
-
310
- .m-input__clear {
311
- align-items: center;
312
- align-self: center;
313
- background: transparent;
314
- border: 0;
315
- border-radius: var(--m-radius-sm);
316
- color: var(--m-color-text-muted);
317
- cursor: pointer;
318
- display: flex;
319
- flex: 0 0 auto;
320
- font-size: var(--m-font-size-lg);
321
- height: min(
322
- var(--m-control-affix-size),
323
- calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
324
- );
325
- justify-content: center;
326
- max-height: 100%;
327
- padding: 0;
328
- width: min(
329
- var(--m-control-affix-size),
330
- calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
331
- );
332
- }
333
-
334
- .m-input-field__control:has(.m-input--small) .m-input__clear {
335
- height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
336
- width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
337
- }
338
-
339
- .m-input-field__control:has(.m-input--large) .m-input__clear {
340
- height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
341
- width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
342
- }
343
-
344
- .m-input__clear:hover:not(:disabled) {
345
- color: var(--m-color-text);
346
- }
347
-
348
- .m-input__clear:focus-visible {
349
- box-shadow: var(--m-focus-shadow);
350
- outline: none;
351
- }
352
-
353
- .m-input__clear:disabled {
354
- cursor: not-allowed;
355
- opacity: var(--m-opacity-disabled);
356
- }
1
+ .m-input:focus {
2
+ outline: none;
3
+ }
4
+
5
+ .m-input:hover:not(:disabled):not(:focus) {
6
+ border-color: var(--m-color-primary-hover);
7
+ }
8
+
9
+ .m-input:focus-visible {
10
+ border-color: var(--m-color-primary-hover);
11
+ box-shadow: var(--m-focus-shadow);
12
+ outline: none;
13
+ }
14
+
15
+ .m-input--invalid:focus-visible {
16
+ border-color: var(--m-color-danger);
17
+ box-shadow: var(--m-focus-shadow-danger);
18
+ }
19
+
20
+ .m-input-field {
21
+ display: grid;
22
+ gap: var(--m-space-2);
23
+ }
24
+
25
+ .m-input-field--fluid {
26
+ width: 100%;
27
+ }
28
+
29
+ .m-input-field__label {
30
+ color: var(--m-color-text);
31
+ font-family: var(--m-font-sans);
32
+ font-size: var(--m-font-size-md);
33
+ font-weight: 600;
34
+ }
35
+
36
+ .m-input-field__help {
37
+ color: var(--m-color-text-muted);
38
+ font-size: var(--m-font-size-xs);
39
+ }
40
+
41
+ .m-input-field__help--invalid {
42
+ color: var(--m-color-danger);
43
+ }
44
+
45
+ .m-input-field__control {
46
+ position: relative;
47
+ }
48
+
49
+ /*
50
+ * Affix/clear shell: prefix/suffix participate in flex flow so long slot
51
+ * content reserves real width instead of fighting fixed input padding.
52
+ */
53
+ .m-input-field__control--prefixed,
54
+ .m-input-field__control--suffixed,
55
+ .m-input-field__control--clearable {
56
+ align-items: center;
57
+ background: var(--m-color-surface);
58
+ border: var(--m-border-width) solid var(--m-color-border);
59
+ border-radius: var(--m-radius-control);
60
+ box-sizing: border-box;
61
+ display: flex;
62
+ max-width: 100%;
63
+ min-height: var(--m-control-height-medium);
64
+ transition:
65
+ border-color var(--m-motion-fast) var(--m-motion-ease),
66
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
67
+ background-color var(--m-motion-fast) var(--m-motion-ease);
68
+ }
69
+
70
+ .m-input-field--fluid .m-input-field__control--prefixed,
71
+ .m-input-field--fluid .m-input-field__control--suffixed,
72
+ .m-input-field--fluid .m-input-field__control--clearable {
73
+ width: 100%;
74
+ }
75
+
76
+ .m-input-field__control--prefixed:has(.m-input--small),
77
+ .m-input-field__control--suffixed:has(.m-input--small),
78
+ .m-input-field__control--clearable:has(.m-input--small),
79
+ .m-input-field__control--prefixed:has(.m-input--sm),
80
+ .m-input-field__control--suffixed:has(.m-input--sm),
81
+ .m-input-field__control--clearable:has(.m-input--sm) {
82
+ min-height: var(--m-control-height-small);
83
+ }
84
+
85
+ .m-input-field__control--prefixed:has(.m-input--large),
86
+ .m-input-field__control--suffixed:has(.m-input--large),
87
+ .m-input-field__control--clearable:has(.m-input--large),
88
+ .m-input-field__control--prefixed:has(.m-input--lg),
89
+ .m-input-field__control--suffixed:has(.m-input--lg),
90
+ .m-input-field__control--clearable:has(.m-input--lg) {
91
+ min-height: var(--m-control-height-large);
92
+ }
93
+
94
+ .m-input-field__control--prefixed:has(.m-input--filled),
95
+ .m-input-field__control--suffixed:has(.m-input--filled),
96
+ .m-input-field__control--clearable:has(.m-input--filled) {
97
+ background: color-mix(
98
+ in srgb,
99
+ var(--m-color-text-muted) 12%,
100
+ var(--m-color-surface)
101
+ );
102
+ border-color: transparent;
103
+ }
104
+
105
+ .m-input-field__control--prefixed:has(.m-input--invalid),
106
+ .m-input-field__control--suffixed:has(.m-input--invalid),
107
+ .m-input-field__control--clearable:has(.m-input--invalid) {
108
+ border-color: var(--m-color-danger);
109
+ }
110
+
111
+ .m-input-field__control--prefixed:hover:not(:focus-within):has(
112
+ .m-input:not(:disabled)
113
+ ),
114
+ .m-input-field__control--suffixed:hover:not(:focus-within):has(
115
+ .m-input:not(:disabled)
116
+ ),
117
+ .m-input-field__control--clearable:hover:not(:focus-within):has(
118
+ .m-input:not(:disabled)
119
+ ) {
120
+ border-color: var(--m-color-primary-hover);
121
+ }
122
+
123
+ .m-input-field__control--prefixed:focus-within,
124
+ .m-input-field__control--suffixed:focus-within,
125
+ .m-input-field__control--clearable:focus-within {
126
+ border-color: var(--m-color-primary-hover);
127
+ box-shadow: var(--m-focus-shadow);
128
+ }
129
+
130
+ .m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
131
+ .m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
132
+ .m-input-field__control--clearable:has(.m-input--invalid):focus-within {
133
+ border-color: var(--m-color-danger);
134
+ box-shadow: var(--m-focus-shadow-danger);
135
+ }
136
+
137
+ .m-input-field__control--prefixed:has(.m-input:disabled),
138
+ .m-input-field__control--suffixed:has(.m-input:disabled),
139
+ .m-input-field__control--clearable:has(.m-input:disabled) {
140
+ cursor: not-allowed;
141
+ opacity: var(--m-opacity-disabled);
142
+ }
143
+
144
+ .m-input-field__control--prefixed .m-input,
145
+ .m-input-field__control--suffixed .m-input,
146
+ .m-input-field__control--clearable .m-input {
147
+ background: transparent;
148
+ border: 0;
149
+ border-radius: 0;
150
+ box-shadow: none;
151
+ flex: 1 1 auto;
152
+ height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
153
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
154
+ min-height: 0;
155
+ min-width: 0;
156
+ width: auto;
157
+ }
158
+
159
+ .m-input-field__control--prefixed:has(.m-input--small) .m-input,
160
+ .m-input-field__control--suffixed:has(.m-input--small) .m-input,
161
+ .m-input-field__control--clearable:has(.m-input--small) .m-input,
162
+ .m-input-field__control--prefixed:has(.m-input--sm) .m-input,
163
+ .m-input-field__control--suffixed:has(.m-input--sm) .m-input,
164
+ .m-input-field__control--clearable:has(.m-input--sm) .m-input {
165
+ height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
166
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
167
+ }
168
+
169
+ .m-input-field__control--prefixed:has(.m-input--large) .m-input,
170
+ .m-input-field__control--suffixed:has(.m-input--large) .m-input,
171
+ .m-input-field__control--clearable:has(.m-input--large) .m-input,
172
+ .m-input-field__control--prefixed:has(.m-input--lg) .m-input,
173
+ .m-input-field__control--suffixed:has(.m-input--lg) .m-input,
174
+ .m-input-field__control--clearable:has(.m-input--lg) .m-input {
175
+ height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
176
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
177
+ }
178
+
179
+ .m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
180
+ .m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
181
+ .m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
182
+ .m-input-field__control--prefixed .m-input:focus-visible,
183
+ .m-input-field__control--suffixed .m-input:focus-visible,
184
+ .m-input-field__control--clearable .m-input:focus-visible,
185
+ .m-input-field__control--prefixed .m-input--invalid:focus-visible,
186
+ .m-input-field__control--suffixed .m-input--invalid:focus-visible,
187
+ .m-input-field__control--clearable .m-input--invalid:focus-visible {
188
+ border-color: transparent;
189
+ box-shadow: none;
190
+ }
191
+
192
+ .m-input-field__control--prefixed .m-input {
193
+ padding-left: 0;
194
+ }
195
+
196
+ .m-input-field__control--suffixed .m-input,
197
+ .m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
198
+ padding-right: 0;
199
+ }
200
+
201
+ .m-input__prefix,
202
+ .m-input__suffix {
203
+ align-items: center;
204
+ color: var(--m-color-text-muted);
205
+ display: inline-flex;
206
+ flex: 0 0 auto;
207
+ font-size: inherit;
208
+ gap: var(--m-space-1);
209
+ line-height: 1;
210
+ padding-inline: var(--m-space-2);
211
+ pointer-events: none;
212
+ white-space: nowrap;
213
+ }
214
+
215
+ .m-input-field__control--prefixed .m-input__prefix,
216
+ .m-input-field__control--suffixed .m-input__suffix {
217
+ font-size: var(--m-control-font-medium);
218
+ }
219
+
220
+ .m-input-field__control:has(.m-input--small) .m-input__prefix,
221
+ .m-input-field__control:has(.m-input--small) .m-input__suffix,
222
+ .m-input-field__control:has(.m-input--sm) .m-input__prefix,
223
+ .m-input-field__control:has(.m-input--sm) .m-input__suffix {
224
+ font-size: var(--m-control-font-small);
225
+ padding-inline: var(--m-space-2);
226
+ }
227
+
228
+ .m-input-field__control:has(.m-input--large) .m-input__prefix,
229
+ .m-input-field__control:has(.m-input--large) .m-input__suffix,
230
+ .m-input-field__control:has(.m-input--lg) .m-input__prefix,
231
+ .m-input-field__control:has(.m-input--lg) .m-input__suffix {
232
+ font-size: var(--m-control-font-large);
233
+ padding-inline: var(--m-space-3);
234
+ }
235
+
236
+ .m-input__prefix button,
237
+ .m-input__suffix button,
238
+ .m-input__prefix a,
239
+ .m-input__suffix a {
240
+ pointer-events: auto;
241
+ }
242
+
243
+ .m-input {
244
+ background: var(--m-color-surface);
245
+ border: var(--m-border-width) solid var(--m-color-border);
246
+ border-radius: var(--m-radius-control);
247
+ color: var(--m-color-text);
248
+ font-family: var(--m-font-sans);
249
+ font-size: var(--m-control-font-medium);
250
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
251
+ min-height: var(--m-control-height-medium);
252
+ padding: 0 var(--m-control-padding-x-medium);
253
+ transition:
254
+ border-color var(--m-motion-fast) var(--m-motion-ease),
255
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
256
+ background-color var(--m-motion-fast) var(--m-motion-ease),
257
+ opacity var(--m-motion-fast) var(--m-motion-ease);
258
+ }
259
+
260
+ .m-input--filled {
261
+ background: color-mix(
262
+ in srgb,
263
+ var(--m-color-text-muted) 12%,
264
+ var(--m-color-surface)
265
+ );
266
+ border-color: transparent;
267
+ }
268
+
269
+ .m-input--fluid {
270
+ width: 100%;
271
+ }
272
+
273
+ .m-input--invalid {
274
+ border-color: var(--m-color-danger);
275
+ }
276
+
277
+ .m-input--small,
278
+ .m-input--sm {
279
+ font-size: var(--m-control-font-small);
280
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
281
+ min-height: var(--m-control-height-small);
282
+ padding: 0 var(--m-control-padding-x-small);
283
+ }
284
+
285
+ .m-input--normal {
286
+ font-size: var(--m-control-font-medium);
287
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
288
+ min-height: var(--m-control-height-medium);
289
+ padding: 0 var(--m-control-padding-x-medium);
290
+ }
291
+
292
+ .m-input--large,
293
+ .m-input--lg {
294
+ font-size: var(--m-control-font-large);
295
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
296
+ min-height: var(--m-control-height-large);
297
+ padding: 0 var(--m-control-padding-x-large);
298
+ }
299
+
300
+ .m-input-field__control .m-input {
301
+ width: 100%;
302
+ }
303
+
304
+ .m-input-field__control--prefixed .m-input,
305
+ .m-input-field__control--suffixed .m-input,
306
+ .m-input-field__control--clearable .m-input {
307
+ width: auto;
308
+ }
309
+
310
+ .m-input__clear {
311
+ align-items: center;
312
+ align-self: center;
313
+ background: transparent;
314
+ border: 0;
315
+ border-radius: var(--m-radius-sm);
316
+ color: var(--m-color-text-muted);
317
+ cursor: pointer;
318
+ display: flex;
319
+ flex: 0 0 auto;
320
+ font-size: var(--m-font-size-lg);
321
+ height: min(
322
+ var(--m-control-affix-size),
323
+ calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
324
+ );
325
+ justify-content: center;
326
+ max-height: 100%;
327
+ padding: 0;
328
+ width: min(
329
+ var(--m-control-affix-size),
330
+ calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
331
+ );
332
+ }
333
+
334
+ .m-input-field__control:has(.m-input--small) .m-input__clear {
335
+ height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
336
+ width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
337
+ }
338
+
339
+ .m-input-field__control:has(.m-input--large) .m-input__clear {
340
+ height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
341
+ width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
342
+ }
343
+
344
+ .m-input__clear:hover:not(:disabled) {
345
+ color: var(--m-color-text);
346
+ }
347
+
348
+ .m-input__clear:focus-visible {
349
+ box-shadow: var(--m-focus-shadow);
350
+ outline: none;
351
+ }
352
+
353
+ .m-input__clear:disabled {
354
+ cursor: not-allowed;
355
+ opacity: var(--m-opacity-disabled);
356
+ }