morya-ui 0.4.2 → 0.4.4

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 (357) hide show
  1. package/CHANGELOG.md +780 -755
  2. package/LICENSE +21 -21
  3. package/README.md +156 -150
  4. package/README.zh-CN.md +156 -150
  5. package/dist/{Button-BaYLh91a.js → Button-Bjsth0ct.js} +3 -3
  6. package/dist/{Card-B1CB9Trm.js → Card-Ct5vJmoV.js} +1 -1
  7. package/dist/{Checkbox-LxCFF19I.js → Checkbox-Bo26OGHP.js} +1 -1
  8. package/dist/{DatePicker-DGPNukEW.js → DatePicker-CsMGzCqY.js} +4 -4
  9. package/dist/{Empty-2_f_FgyK.js → Empty-rMhOPi79.js} +2 -2
  10. package/dist/{FlyoutSubmenu-Da6AcoM4.js → FlyoutSubmenu-C0id6-Sb.js} +1 -1
  11. package/dist/{Icon-od9Ob-Ay.js → Icon-CmHjx7W8.js} +1 -1
  12. package/dist/{Input-NspPDc2R.js → Input-CxSTVp9E.js} +3 -3
  13. package/dist/{Loading-BK4dQPCS.js → Loading-D_qRwfKv.js} +4 -4
  14. package/dist/{Pagination-tdrlaZ3u.js → Pagination-CnGOpp0m.js} +3 -3
  15. package/dist/{Popover-BumMfUpV.js → Popover-D1uZ1N9Z.js} +2 -2
  16. package/dist/{ProgressSpinner-BQ1tLioO.js → ProgressSpinner-hmR23xpi.js} +2 -2
  17. package/dist/{Radio-BCn2OVCF.js → Radio-CZAyelC_.js} +1 -1
  18. package/dist/{Segmented-ppmDmku5.js → Segmented-BpdO7arR.js} +2 -2
  19. package/dist/{Select-CN1tM76U.js → Select-CySmusHs.js} +4 -4
  20. package/dist/{Textarea-Ch1KCXEv.js → Textarea-DskjTCcz.js} +3 -3
  21. package/dist/{Tooltip-DKsXxU_B.js → Tooltip-DSfkflHp.js} +2 -2
  22. package/dist/accordion/style.css +1205 -1205
  23. package/dist/affix/style.css +1205 -1205
  24. package/dist/alert/index.js +15 -15
  25. package/dist/alert/style.css +1206 -1206
  26. package/dist/anchor/style.css +1205 -1205
  27. package/dist/auto-complete/index.js +4 -4
  28. package/dist/auto-complete/style.css +1749 -1749
  29. package/dist/avatar/index.js +1 -1
  30. package/dist/avatar/style.css +1318 -1318
  31. package/dist/badge/index.js +24 -24
  32. package/dist/badge/style.css +1371 -1372
  33. package/dist/block-ui/index.js +1 -1
  34. package/dist/block-ui/style.css +1205 -1205
  35. package/dist/breadcrumb/index.js +1 -1
  36. package/dist/breadcrumb/style.css +1205 -1205
  37. package/dist/button/index.js +1 -1
  38. package/dist/button/style.css +1909 -1909
  39. package/dist/calendar/index.js +3 -3
  40. package/dist/calendar/style.css +1880 -1880
  41. package/dist/card/index.js +1 -1
  42. package/dist/card/style.css +1205 -1205
  43. package/dist/carousel/index.js +2 -2
  44. package/dist/carousel/style.css +2208 -2208
  45. package/dist/cascade-select/index.js +4 -4
  46. package/dist/cascade-select/style.css +1909 -1909
  47. package/dist/checkbox/index.js +1 -1
  48. package/dist/checkbox/style.css +1205 -1205
  49. package/dist/chip/index.js +35 -35
  50. package/dist/chip/style.css +1349 -1349
  51. package/dist/command-menu/index.js +5 -5
  52. package/dist/command-menu/style.css +1438 -1438
  53. package/dist/components/Alert/Alert.vue.d.ts +2 -2
  54. package/dist/components/Alert/Alert.vue.d.ts.map +1 -1
  55. package/dist/components/Alert/index.d.ts +1 -1
  56. package/dist/components/Alert/index.d.ts.map +1 -1
  57. package/dist/components/Alert/styles.css +1 -1
  58. package/dist/components/Alert/types.d.ts +3 -3
  59. package/dist/components/Alert/types.d.ts.map +1 -1
  60. package/dist/components/AutoComplete/styles.css +209 -209
  61. package/dist/components/Avatar/styles.css +113 -113
  62. package/dist/components/Badge/Badge.vue.d.ts +2 -2
  63. package/dist/components/Badge/index.d.ts +1 -1
  64. package/dist/components/Badge/index.d.ts.map +1 -1
  65. package/dist/components/Badge/styles.css +164 -165
  66. package/dist/components/Badge/types.d.ts +3 -4
  67. package/dist/components/Badge/types.d.ts.map +1 -1
  68. package/dist/components/Button/styles.css +698 -698
  69. package/dist/components/Button/types.d.ts +1 -5
  70. package/dist/components/Button/types.d.ts.map +1 -1
  71. package/dist/components/Carousel/styles.css +302 -302
  72. package/dist/components/CascadeSelect/styles.css +168 -168
  73. package/dist/components/Chip/index.d.ts +1 -1
  74. package/dist/components/Chip/index.d.ts.map +1 -1
  75. package/dist/components/Chip/styles.css +144 -144
  76. package/dist/components/Chip/types.d.ts +3 -3
  77. package/dist/components/Chip/types.d.ts.map +1 -1
  78. package/dist/components/CommandMenu/styles.css +102 -102
  79. package/dist/components/ConfigProvider/styles.css +6 -6
  80. package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts.map +1 -1
  81. package/dist/components/ConfirmDialog/styles.css +24 -24
  82. package/dist/components/ConfirmDialog/types.d.ts +1 -1
  83. package/dist/components/ConfirmDialog/types.d.ts.map +1 -1
  84. package/dist/components/ConfirmPopup/styles.css +35 -35
  85. package/dist/components/ContextMenu/styles.css +138 -138
  86. package/dist/components/DatePicker/styles.css +453 -453
  87. package/dist/components/Dialog/Dialog.vue.d.ts.map +1 -1
  88. package/dist/components/Dialog/styles.css +420 -421
  89. package/dist/components/Dialog/types.d.ts +1 -2
  90. package/dist/components/Dialog/types.d.ts.map +1 -1
  91. package/dist/components/Dock/styles.css +84 -84
  92. package/dist/components/Drawer/styles.css +346 -346
  93. package/dist/components/Dropdown/styles.css +135 -135
  94. package/dist/components/Empty/styles.css +146 -146
  95. package/dist/components/FileUpload/styles.css +359 -359
  96. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  97. package/dist/components/Form/styles.css +125 -125
  98. package/dist/components/Gallery/styles.css +100 -100
  99. package/dist/components/Input/styles.css +392 -392
  100. package/dist/components/InputColor/styles.css +139 -139
  101. package/dist/components/InputNumber/styles.css +262 -262
  102. package/dist/components/InputPassword/styles.css +189 -189
  103. package/dist/components/InputTags/styles.css +121 -121
  104. package/dist/components/Layout/styles.css +433 -433
  105. package/dist/components/List/styles.css +229 -229
  106. package/dist/components/Listbox/styles.css +130 -130
  107. package/dist/components/Loading/styles.css +378 -378
  108. package/dist/components/MegaMenu/styles.css +97 -97
  109. package/dist/components/Menu/styles.css +565 -565
  110. package/dist/components/Menubar/styles.css +144 -144
  111. package/dist/components/Message/Message.vue.d.ts.map +1 -1
  112. package/dist/components/Message/index.d.ts +1 -1
  113. package/dist/components/Message/index.d.ts.map +1 -1
  114. package/dist/components/Message/message.d.ts +4 -0
  115. package/dist/components/Message/message.d.ts.map +1 -1
  116. package/dist/components/Message/styles.css +248 -252
  117. package/dist/components/Message/types.d.ts +4 -4
  118. package/dist/components/Message/types.d.ts.map +1 -1
  119. package/dist/components/MeterGroup/styles.css +49 -49
  120. package/dist/components/Page/PageFilters.vue.d.ts.map +1 -1
  121. package/dist/components/Page/PageStat.vue.d.ts +2 -2
  122. package/dist/components/Page/index.d.ts +1 -1
  123. package/dist/components/Page/index.d.ts.map +1 -1
  124. package/dist/components/Page/styles.css +430 -430
  125. package/dist/components/Page/types.d.ts +2 -2
  126. package/dist/components/Page/types.d.ts.map +1 -1
  127. package/dist/components/Pagination/styles.css +124 -124
  128. package/dist/components/Popover/styles.css +92 -92
  129. package/dist/components/ProgressBar/ProgressBar.vue.d.ts.map +1 -1
  130. package/dist/components/ProgressBar/styles.css +1 -1
  131. package/dist/components/ProgressBar/types.d.ts +2 -7
  132. package/dist/components/ProgressBar/types.d.ts.map +1 -1
  133. package/dist/components/Result/styles.css +146 -146
  134. package/dist/components/Scrollbar/styles.css +131 -131
  135. package/dist/components/Select/styles.css +222 -222
  136. package/dist/components/SelectButton/styles.css +107 -107
  137. package/dist/components/Sidebar/styles.css +74 -74
  138. package/dist/components/Slider/styles.css +211 -211
  139. package/dist/components/SplitButton/styles.css +216 -216
  140. package/dist/components/Status/Status.vue.d.ts +2 -2
  141. package/dist/components/Status/Status.vue.d.ts.map +1 -1
  142. package/dist/components/Status/index.d.ts +1 -1
  143. package/dist/components/Status/index.d.ts.map +1 -1
  144. package/dist/components/Status/styles.css +190 -191
  145. package/dist/components/Status/types.d.ts +4 -5
  146. package/dist/components/Status/types.d.ts.map +1 -1
  147. package/dist/components/Stepper/styles.css +152 -152
  148. package/dist/components/Switch/styles.css +129 -129
  149. package/dist/components/Tabs/styles.css +165 -165
  150. package/dist/components/Tag/Tag.vue.d.ts +2 -2
  151. package/dist/components/Tag/index.d.ts +1 -1
  152. package/dist/components/Tag/index.d.ts.map +1 -1
  153. package/dist/components/Tag/styles.css +0 -1
  154. package/dist/components/Tag/types.d.ts +4 -5
  155. package/dist/components/Tag/types.d.ts.map +1 -1
  156. package/dist/components/Terminal/styles.css +75 -75
  157. package/dist/components/Textarea/styles.css +146 -146
  158. package/dist/components/TieredMenu/styles.css +125 -125
  159. package/dist/components/Timeline/Timeline.vue.d.ts.map +1 -1
  160. package/dist/components/Timeline/index.d.ts +1 -1
  161. package/dist/components/Timeline/index.d.ts.map +1 -1
  162. package/dist/components/Timeline/styles.css +157 -159
  163. package/dist/components/Timeline/types.d.ts +3 -3
  164. package/dist/components/Timeline/types.d.ts.map +1 -1
  165. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  166. package/dist/components/Toast/index.d.ts +1 -1
  167. package/dist/components/Toast/index.d.ts.map +1 -1
  168. package/dist/components/Toast/styles.css +1 -3
  169. package/dist/components/Toast/toast.d.ts +4 -0
  170. package/dist/components/Toast/toast.d.ts.map +1 -1
  171. package/dist/components/Toast/types.d.ts +5 -5
  172. package/dist/components/Toast/types.d.ts.map +1 -1
  173. package/dist/components/Toast/useNotification.d.ts +3 -2
  174. package/dist/components/Toast/useNotification.d.ts.map +1 -1
  175. package/dist/components/TreeSelect/styles.css +172 -172
  176. package/dist/components/VirtualScroller/styles.css +27 -27
  177. package/dist/{config-CB_TiIvg.js → config-BEpyhJi3.js} +1 -1
  178. package/dist/config-provider/index.js +1 -1
  179. package/dist/config-provider/style.css +2301 -2301
  180. package/dist/confirm-dialog/index.js +54 -57
  181. package/dist/confirm-dialog/style.css +2347 -2348
  182. package/dist/confirm-popup/index.js +5 -5
  183. package/dist/confirm-popup/style.css +1938 -1938
  184. package/dist/context-menu/index.js +5 -5
  185. package/dist/context-menu/style.css +1474 -1474
  186. package/dist/data-view/index.js +3 -3
  187. package/dist/data-view/style.css +1707 -1707
  188. package/dist/date-picker/index.js +1 -1
  189. package/dist/date-picker/style.css +1658 -1658
  190. package/dist/descriptions/index.js +1 -1
  191. package/dist/descriptions/style.css +1205 -1205
  192. package/dist/dialog/index.js +95 -98
  193. package/dist/dialog/style.css +2323 -2324
  194. package/dist/divider/style.css +1205 -1205
  195. package/dist/dock/index.js +2 -2
  196. package/dist/dock/style.css +1289 -1289
  197. package/dist/drawer/index.js +4 -4
  198. package/dist/drawer/style.css +1551 -1551
  199. package/dist/dropdown/index.js +6 -6
  200. package/dist/dropdown/style.css +1471 -1471
  201. package/dist/empty/index.js +1 -1
  202. package/dist/empty/style.css +1351 -1351
  203. package/dist/fieldset/index.js +1 -1
  204. package/dist/fieldset/style.css +1205 -1205
  205. package/dist/file-upload/index.js +2 -2
  206. package/dist/file-upload/style.css +1564 -1564
  207. package/dist/flex/index.js +1 -1
  208. package/dist/flex/style.css +1205 -1205
  209. package/dist/float-label/style.css +1205 -1205
  210. package/dist/fluid/style.css +1205 -1205
  211. package/dist/form/index.js +2 -2
  212. package/dist/form/style.css +1332 -1332
  213. package/dist/gallery/index.js +2 -2
  214. package/dist/gallery/style.css +1436 -1436
  215. package/dist/grid/style.css +1205 -1205
  216. package/dist/icon/index.js +1 -1
  217. package/dist/icon/style.css +1205 -1205
  218. package/dist/{icon-COrt_N8A.js → icon-H8prbteT.js} +1 -1
  219. package/dist/icon-field/style.css +1597 -1597
  220. package/dist/image/index.js +2 -2
  221. package/dist/image/style.css +1205 -1205
  222. package/dist/index.d.ts +11 -11
  223. package/dist/index.d.ts.map +1 -1
  224. package/dist/index.js +3013 -3025
  225. package/dist/inplace/style.css +1205 -1205
  226. package/dist/input/index.js +1 -1
  227. package/dist/input/style.css +1722 -1722
  228. package/dist/input-color/index.js +2 -2
  229. package/dist/input-color/style.css +1346 -1346
  230. package/dist/input-group/style.css +1205 -1205
  231. package/dist/input-number/index.js +3 -3
  232. package/dist/input-number/style.css +1467 -1467
  233. package/dist/input-otp/index.js +2 -2
  234. package/dist/input-otp/style.css +1205 -1205
  235. package/dist/input-password/index.js +4 -4
  236. package/dist/input-password/style.css +1519 -1519
  237. package/dist/input-tags/index.js +3 -3
  238. package/dist/input-tags/style.css +1326 -1326
  239. package/dist/knob/style.css +1205 -1205
  240. package/dist/label/style.css +1205 -1205
  241. package/dist/layout/index.js +2 -2
  242. package/dist/layout/style.css +1769 -1769
  243. package/dist/list/index.js +4 -4
  244. package/dist/list/style.css +2087 -2087
  245. package/dist/listbox/index.js +2 -2
  246. package/dist/listbox/style.css +1497 -1497
  247. package/dist/loading/index.js +1 -1
  248. package/dist/loading/style.css +1585 -1585
  249. package/dist/{locale-CR2PIaxt.js → locale-CZddM-tH.js} +1 -1
  250. package/dist/mega-menu/index.js +5 -5
  251. package/dist/mega-menu/style.css +1302 -1302
  252. package/dist/mentions/index.js +4 -4
  253. package/dist/mentions/style.css +1330 -1330
  254. package/dist/menu/index.js +6 -6
  255. package/dist/menu/style.css +2059 -2059
  256. package/dist/menubar/index.js +5 -5
  257. package/dist/menubar/style.css +1480 -1480
  258. package/dist/message/index.js +116 -117
  259. package/dist/message/style.css +1453 -1457
  260. package/dist/meter-group/style.css +1256 -1256
  261. package/dist/order-list/index.js +2 -2
  262. package/dist/order-list/style.css +1205 -1205
  263. package/dist/page/index.js +8 -7
  264. package/dist/page/style.css +2597 -2597
  265. package/dist/pagination/index.js +1 -1
  266. package/dist/pagination/style.css +1551 -1551
  267. package/dist/panel/index.js +3 -3
  268. package/dist/panel/style.css +1205 -1205
  269. package/dist/pick-list/index.js +2 -2
  270. package/dist/pick-list/style.css +1205 -1205
  271. package/dist/popover/index.js +1 -1
  272. package/dist/popover/style.css +1299 -1299
  273. package/dist/progress-bar/index.js +33 -34
  274. package/dist/progress-bar/style.css +1206 -1206
  275. package/dist/progress-spinner/index.js +1 -1
  276. package/dist/progress-spinner/style.css +1205 -1205
  277. package/dist/qr-code/index.js +4 -4
  278. package/dist/qr-code/style.css +1903 -1903
  279. package/dist/radio/index.js +1 -1
  280. package/dist/radio/style.css +1205 -1205
  281. package/dist/rating/index.js +3 -3
  282. package/dist/rating/style.css +1205 -1205
  283. package/dist/result/index.js +2 -2
  284. package/dist/result/style.css +1351 -1351
  285. package/dist/scroll-top/index.js +3 -3
  286. package/dist/scroll-top/style.css +1336 -1336
  287. package/dist/scrollbar/style.css +1338 -1338
  288. package/dist/segmented/index.js +1 -1
  289. package/dist/segmented/style.css +1205 -1205
  290. package/dist/select/index.js +1 -1
  291. package/dist/select/style.css +2115 -2115
  292. package/dist/select-button/index.js +1 -1
  293. package/dist/select-button/style.css +1314 -1314
  294. package/dist/shared/styles/control-affix-icon.css +110 -110
  295. package/dist/shared/styles/control-suffix.css +118 -118
  296. package/dist/shared/styles/select-overlay.css +177 -177
  297. package/dist/shared/types.d.ts +7 -20
  298. package/dist/shared/types.d.ts.map +1 -1
  299. package/dist/sidebar/index.js +3 -3
  300. package/dist/sidebar/style.css +1279 -1279
  301. package/dist/skeleton/style.css +1205 -1205
  302. package/dist/slider/index.js +2 -2
  303. package/dist/slider/style.css +1418 -1418
  304. package/dist/space/index.js +1 -1
  305. package/dist/space/style.css +1205 -1205
  306. package/dist/speed-dial/index.js +5 -5
  307. package/dist/speed-dial/style.css +1205 -1205
  308. package/dist/split-button/index.js +5 -5
  309. package/dist/split-button/style.css +2119 -2119
  310. package/dist/splitter/index.js +1 -1
  311. package/dist/splitter/style.css +1205 -1205
  312. package/dist/statistic/style.css +1205 -1205
  313. package/dist/status/index.js +30 -31
  314. package/dist/status/style.css +1395 -1396
  315. package/dist/stepper/index.js +1 -1
  316. package/dist/stepper/style.css +1357 -1357
  317. package/dist/styles/base.css +804 -804
  318. package/dist/styles.css +1 -1
  319. package/dist/switch/index.js +1 -1
  320. package/dist/switch/style.css +1336 -1336
  321. package/dist/table/index.js +11 -11
  322. package/dist/table/style.css +1840 -1840
  323. package/dist/tabs/index.js +2 -2
  324. package/dist/tabs/style.css +1501 -1501
  325. package/dist/tag/index.js +52 -52
  326. package/dist/tag/style.css +1205 -1206
  327. package/dist/terminal/index.js +1 -1
  328. package/dist/terminal/style.css +1282 -1282
  329. package/dist/textarea/index.js +1 -1
  330. package/dist/textarea/style.css +1476 -1476
  331. package/dist/theme/styles.css +401 -401
  332. package/dist/tiered-menu/index.js +4 -4
  333. package/dist/tiered-menu/style.css +1461 -1461
  334. package/dist/time-picker/index.js +1 -1
  335. package/dist/time-picker/style.css +1660 -1660
  336. package/dist/timeline/index.js +67 -72
  337. package/dist/timeline/style.css +1493 -1495
  338. package/dist/toast/index.js +135 -136
  339. package/dist/toast/style.css +1904 -1906
  340. package/dist/toggle-button/index.js +3 -3
  341. package/dist/toggle-button/style.css +1205 -1205
  342. package/dist/toolbar/style.css +1205 -1205
  343. package/dist/tooltip/index.js +1 -1
  344. package/dist/tooltip/style.css +1205 -1205
  345. package/dist/tour/index.js +4 -4
  346. package/dist/tour/style.css +1903 -1903
  347. package/dist/tree/index.js +3 -3
  348. package/dist/tree/style.css +1205 -1205
  349. package/dist/tree-select/index.js +5 -5
  350. package/dist/tree-select/style.css +1913 -1913
  351. package/dist/{types-DGuu4Eg4.js → types-DBQfGctj.js} +1 -4
  352. package/dist/typography/index.js +3 -3
  353. package/dist/typography/style.css +1351 -1351
  354. package/dist/{useMotionTransition-D8JOR3ih.js → useMotionTransition-DqL_SEML.js} +1 -1
  355. package/dist/virtual-scroller/style.css +1366 -1366
  356. package/dist/watermark/style.css +1205 -1205
  357. package/package.json +2 -1
package/dist/components/Input/styles.css CHANGED
@@ -1,392 +1,392 @@
1
- .m-input:hover:not(:disabled):not(:focus):not(.m-input--invalid):not(
2
- .m-input--warning
3
- ) {
4
- border-color: var(--m-color-primary-hover);
5
- }
6
-
7
- /* Outlined active state: border color + soft control-outline shadow */
8
- .m-input:focus,
9
- .m-input:focus-visible {
10
- border-color: var(--m-color-primary);
11
- box-shadow: var(--m-focus-shadow);
12
- outline: 0;
13
- }
14
-
15
- .m-input--invalid:hover:not(:disabled):not(:focus) {
16
- border-color: var(--m-color-danger);
17
- }
18
-
19
- .m-input--invalid:focus,
20
- .m-input--invalid:focus-visible {
21
- border-color: var(--m-color-danger);
22
- box-shadow: var(--m-focus-shadow-danger);
23
- outline: 0;
24
- }
25
-
26
- .m-input--warning:hover:not(:disabled):not(:focus) {
27
- border-color: var(--m-color-warning);
28
- }
29
-
30
- .m-input--warning:focus,
31
- .m-input--warning:focus-visible {
32
- border-color: var(--m-color-warning);
33
- box-shadow: var(--m-focus-shadow-warning);
34
- outline: 0;
35
- }
36
-
37
- .m-input-field {
38
- display: grid;
39
- gap: var(--m-space-2);
40
- }
41
-
42
- .m-input-field--fluid {
43
- width: 100%;
44
- }
45
-
46
- .m-input-field__label {
47
- color: var(--m-color-text);
48
- font-family: var(--m-font-sans);
49
- font-size: var(--m-font-size-md);
50
- font-weight: 500;
51
- }
52
-
53
- .m-input-field__help {
54
- color: var(--m-color-text-muted);
55
- font-size: var(--m-font-size-xs);
56
- }
57
-
58
- .m-input-field__help--invalid {
59
- color: var(--m-color-danger);
60
- }
61
-
62
- .m-input-field__control {
63
- position: relative;
64
- }
65
-
66
- /*
67
- * Affix/clear shell: prefix/suffix participate in flex flow so long slot
68
- * content reserves real width instead of fighting fixed input padding.
69
- */
70
- .m-input-field__control--prefixed,
71
- .m-input-field__control--suffixed,
72
- .m-input-field__control--clearable {
73
- align-items: center;
74
- background: var(--m-color-surface);
75
- border: var(--m-border-width) solid var(--m-color-border);
76
- border-radius: var(--m-radius-control);
77
- box-sizing: border-box;
78
- display: flex;
79
- max-width: 100%;
80
- min-height: var(--m-control-height-medium);
81
- transition:
82
- border-color var(--m-motion-fast) var(--m-motion-ease),
83
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
84
- background-color var(--m-motion-fast) var(--m-motion-ease);
85
- }
86
-
87
- .m-input-field--fluid .m-input-field__control--prefixed,
88
- .m-input-field--fluid .m-input-field__control--suffixed,
89
- .m-input-field--fluid .m-input-field__control--clearable {
90
- width: 100%;
91
- }
92
-
93
- .m-input-field__control--prefixed:has(.m-input--small),
94
- .m-input-field__control--suffixed:has(.m-input--small),
95
- .m-input-field__control--clearable:has(.m-input--small),
96
- .m-input-field__control--prefixed:has(.m-input--sm),
97
- .m-input-field__control--suffixed:has(.m-input--sm),
98
- .m-input-field__control--clearable:has(.m-input--sm) {
99
- min-height: var(--m-control-height-small);
100
- }
101
-
102
- .m-input-field__control--prefixed:has(.m-input--large),
103
- .m-input-field__control--suffixed:has(.m-input--large),
104
- .m-input-field__control--clearable:has(.m-input--large),
105
- .m-input-field__control--prefixed:has(.m-input--lg),
106
- .m-input-field__control--suffixed:has(.m-input--lg),
107
- .m-input-field__control--clearable:has(.m-input--lg) {
108
- min-height: var(--m-control-height-large);
109
- }
110
-
111
- .m-input-field__control--prefixed:has(.m-input--filled),
112
- .m-input-field__control--suffixed:has(.m-input--filled),
113
- .m-input-field__control--clearable:has(.m-input--filled) {
114
- background: color-mix(
115
- in srgb,
116
- var(--m-color-text-muted) 12%,
117
- var(--m-color-surface)
118
- );
119
- border-color: transparent;
120
- }
121
-
122
- .m-input-field__control--prefixed:has(.m-input--invalid),
123
- .m-input-field__control--suffixed:has(.m-input--invalid),
124
- .m-input-field__control--clearable:has(.m-input--invalid) {
125
- border-color: var(--m-color-danger);
126
- }
127
-
128
- .m-input-field__control--prefixed:has(.m-input--warning),
129
- .m-input-field__control--suffixed:has(.m-input--warning),
130
- .m-input-field__control--clearable:has(.m-input--warning) {
131
- border-color: var(--m-color-warning);
132
- }
133
-
134
- .m-input-field__control--prefixed:hover:not(:focus-within):has(
135
- .m-input:not(:disabled)
136
- ),
137
- .m-input-field__control--suffixed:hover:not(:focus-within):has(
138
- .m-input:not(:disabled)
139
- ),
140
- .m-input-field__control--clearable:hover:not(:focus-within):has(
141
- .m-input:not(:disabled)
142
- ) {
143
- border-color: var(--m-color-primary-hover);
144
- }
145
-
146
- .m-input-field__control--prefixed:focus-within,
147
- .m-input-field__control--suffixed:focus-within,
148
- .m-input-field__control--clearable:focus-within {
149
- border-color: var(--m-color-primary);
150
- box-shadow: var(--m-focus-shadow);
151
- }
152
-
153
- .m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
154
- .m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
155
- .m-input-field__control--clearable:has(.m-input--invalid):focus-within {
156
- border-color: var(--m-color-danger);
157
- box-shadow: var(--m-focus-shadow-danger);
158
- }
159
-
160
- .m-input-field__control--prefixed:has(.m-input--warning):focus-within,
161
- .m-input-field__control--suffixed:has(.m-input--warning):focus-within,
162
- .m-input-field__control--clearable:has(.m-input--warning):focus-within {
163
- border-color: var(--m-color-warning);
164
- box-shadow: var(--m-focus-shadow-warning);
165
- }
166
-
167
- .m-input-field__control--prefixed:has(.m-input:disabled),
168
- .m-input-field__control--suffixed:has(.m-input:disabled),
169
- .m-input-field__control--clearable:has(.m-input:disabled) {
170
- background-color: var(--m-color-bg-disabled);
171
- color: var(--m-color-text-disabled);
172
- cursor: not-allowed;
173
- opacity: 1;
174
- }
175
-
176
- .m-input-field__control--prefixed .m-input,
177
- .m-input-field__control--suffixed .m-input,
178
- .m-input-field__control--clearable .m-input {
179
- background: transparent;
180
- border: 0;
181
- border-radius: 0;
182
- box-shadow: none;
183
- flex: 1 1 auto;
184
- height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
185
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
186
- min-height: 0;
187
- min-width: 0;
188
- width: auto;
189
- }
190
-
191
- .m-input-field__control--prefixed:has(.m-input--small) .m-input,
192
- .m-input-field__control--suffixed:has(.m-input--small) .m-input,
193
- .m-input-field__control--clearable:has(.m-input--small) .m-input,
194
- .m-input-field__control--prefixed:has(.m-input--sm) .m-input,
195
- .m-input-field__control--suffixed:has(.m-input--sm) .m-input,
196
- .m-input-field__control--clearable:has(.m-input--sm) .m-input {
197
- height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
198
- line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
199
- }
200
-
201
- .m-input-field__control--prefixed:has(.m-input--large) .m-input,
202
- .m-input-field__control--suffixed:has(.m-input--large) .m-input,
203
- .m-input-field__control--clearable:has(.m-input--large) .m-input,
204
- .m-input-field__control--prefixed:has(.m-input--lg) .m-input,
205
- .m-input-field__control--suffixed:has(.m-input--lg) .m-input,
206
- .m-input-field__control--clearable:has(.m-input--lg) .m-input {
207
- height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
208
- line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
209
- }
210
-
211
- .m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
212
- .m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
213
- .m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
214
- .m-input-field__control--prefixed .m-input:focus-visible,
215
- .m-input-field__control--suffixed .m-input:focus-visible,
216
- .m-input-field__control--clearable .m-input:focus-visible,
217
- .m-input-field__control--prefixed .m-input--invalid:focus-visible,
218
- .m-input-field__control--suffixed .m-input--invalid:focus-visible,
219
- .m-input-field__control--clearable .m-input--invalid:focus-visible {
220
- border-color: transparent;
221
- box-shadow: none;
222
- }
223
-
224
- .m-input-field__control--prefixed .m-input {
225
- padding-left: 0;
226
- }
227
-
228
- .m-input-field__control--suffixed .m-input,
229
- .m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
230
- padding-right: 0;
231
- }
232
-
233
- .m-input__prefix,
234
- .m-input__suffix {
235
- align-items: center;
236
- color: var(--m-color-text-muted);
237
- display: inline-flex;
238
- flex: 0 0 auto;
239
- font-size: inherit;
240
- gap: var(--m-space-1);
241
- line-height: 1;
242
- padding-inline: var(--m-space-2);
243
- pointer-events: none;
244
- white-space: nowrap;
245
- }
246
-
247
- .m-input-field__control--prefixed .m-input__prefix,
248
- .m-input-field__control--suffixed .m-input__suffix {
249
- font-size: var(--m-control-font-medium);
250
- }
251
-
252
- .m-input-field__control:has(.m-input--small) .m-input__prefix,
253
- .m-input-field__control:has(.m-input--small) .m-input__suffix,
254
- .m-input-field__control:has(.m-input--sm) .m-input__prefix,
255
- .m-input-field__control:has(.m-input--sm) .m-input__suffix {
256
- font-size: var(--m-control-font-small);
257
- padding-inline: var(--m-space-2);
258
- }
259
-
260
- .m-input-field__control:has(.m-input--large) .m-input__prefix,
261
- .m-input-field__control:has(.m-input--large) .m-input__suffix,
262
- .m-input-field__control:has(.m-input--lg) .m-input__prefix,
263
- .m-input-field__control:has(.m-input--lg) .m-input__suffix {
264
- font-size: var(--m-control-font-large);
265
- padding-inline: var(--m-space-3);
266
- }
267
-
268
- .m-input__prefix button,
269
- .m-input__suffix button,
270
- .m-input__prefix a,
271
- .m-input__suffix a {
272
- pointer-events: auto;
273
- }
274
-
275
- .m-input {
276
- background: var(--m-color-surface);
277
- border: var(--m-border-width) solid var(--m-color-border);
278
- border-radius: var(--m-radius-control);
279
- color: var(--m-color-text);
280
- font-family: var(--m-font-sans);
281
- font-size: var(--m-control-font-medium);
282
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
283
- min-height: var(--m-control-height-medium);
284
- padding: 0 var(--m-control-padding-x-medium);
285
- transition:
286
- border-color var(--m-motion-fast) var(--m-motion-ease),
287
- box-shadow var(--m-motion-fast) var(--m-motion-ease),
288
- background-color var(--m-motion-fast) var(--m-motion-ease),
289
- opacity var(--m-motion-fast) var(--m-motion-ease);
290
- }
291
-
292
- .m-input--filled {
293
- background: color-mix(
294
- in srgb,
295
- var(--m-color-text-muted) 12%,
296
- var(--m-color-surface)
297
- );
298
- border-color: transparent;
299
- }
300
-
301
- .m-input--fluid {
302
- width: 100%;
303
- }
304
-
305
- .m-input--invalid {
306
- border-color: var(--m-color-danger);
307
- }
308
-
309
- .m-input--warning {
310
- border-color: var(--m-color-warning);
311
- }
312
-
313
- .m-input--small,
314
- .m-input--sm {
315
- font-size: var(--m-control-font-small);
316
- line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
317
- min-height: var(--m-control-height-small);
318
- padding: 0 var(--m-control-padding-x-small);
319
- }
320
-
321
- .m-input--normal {
322
- font-size: var(--m-control-font-medium);
323
- line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
324
- min-height: var(--m-control-height-medium);
325
- padding: 0 var(--m-control-padding-x-medium);
326
- }
327
-
328
- .m-input--large,
329
- .m-input--lg {
330
- font-size: var(--m-control-font-large);
331
- line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
332
- min-height: var(--m-control-height-large);
333
- padding: 0 var(--m-control-padding-x-large);
334
- }
335
-
336
- .m-input-field__control .m-input {
337
- width: 100%;
338
- }
339
-
340
- .m-input-field__control--prefixed .m-input,
341
- .m-input-field__control--suffixed .m-input,
342
- .m-input-field__control--clearable .m-input {
343
- width: auto;
344
- }
345
-
346
- .m-input__clear {
347
- align-items: center;
348
- align-self: center;
349
- background: transparent;
350
- border: 0;
351
- border-radius: var(--m-radius-sm);
352
- color: var(--m-color-text-muted);
353
- cursor: pointer;
354
- display: flex;
355
- flex: 0 0 auto;
356
- font-size: var(--m-font-size-lg);
357
- height: min(
358
- var(--m-control-affix-size),
359
- calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
360
- );
361
- justify-content: center;
362
- max-height: 100%;
363
- padding: 0;
364
- width: min(
365
- var(--m-control-affix-size),
366
- calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
367
- );
368
- }
369
-
370
- .m-input-field__control:has(.m-input--small) .m-input__clear {
371
- height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
372
- width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
373
- }
374
-
375
- .m-input-field__control:has(.m-input--large) .m-input__clear {
376
- height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
377
- width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
378
- }
379
-
380
- .m-input__clear:hover:not(:disabled) {
381
- color: var(--m-color-text);
382
- }
383
-
384
- .m-input__clear:focus-visible {
385
- box-shadow: var(--m-focus-shadow);
386
- outline: none;
387
- }
388
-
389
- .m-input__clear:disabled {
390
- cursor: not-allowed;
391
- opacity: var(--m-opacity-disabled);
392
- }
1
+ .m-input:hover:not(:disabled):not(:focus):not(.m-input--invalid):not(
2
+ .m-input--warning
3
+ ) {
4
+ border-color: var(--m-color-primary-hover);
5
+ }
6
+
7
+ /* Outlined active state: border color + soft control-outline shadow */
8
+ .m-input:focus,
9
+ .m-input:focus-visible {
10
+ border-color: var(--m-color-primary);
11
+ box-shadow: var(--m-focus-shadow);
12
+ outline: 0;
13
+ }
14
+
15
+ .m-input--invalid:hover:not(:disabled):not(:focus) {
16
+ border-color: var(--m-color-danger);
17
+ }
18
+
19
+ .m-input--invalid:focus,
20
+ .m-input--invalid:focus-visible {
21
+ border-color: var(--m-color-danger);
22
+ box-shadow: var(--m-focus-shadow-danger);
23
+ outline: 0;
24
+ }
25
+
26
+ .m-input--warning:hover:not(:disabled):not(:focus) {
27
+ border-color: var(--m-color-warning);
28
+ }
29
+
30
+ .m-input--warning:focus,
31
+ .m-input--warning:focus-visible {
32
+ border-color: var(--m-color-warning);
33
+ box-shadow: var(--m-focus-shadow-warning);
34
+ outline: 0;
35
+ }
36
+
37
+ .m-input-field {
38
+ display: grid;
39
+ gap: var(--m-space-2);
40
+ }
41
+
42
+ .m-input-field--fluid {
43
+ width: 100%;
44
+ }
45
+
46
+ .m-input-field__label {
47
+ color: var(--m-color-text);
48
+ font-family: var(--m-font-sans);
49
+ font-size: var(--m-font-size-md);
50
+ font-weight: 500;
51
+ }
52
+
53
+ .m-input-field__help {
54
+ color: var(--m-color-text-muted);
55
+ font-size: var(--m-font-size-xs);
56
+ }
57
+
58
+ .m-input-field__help--invalid {
59
+ color: var(--m-color-danger);
60
+ }
61
+
62
+ .m-input-field__control {
63
+ position: relative;
64
+ }
65
+
66
+ /*
67
+ * Affix/clear shell: prefix/suffix participate in flex flow so long slot
68
+ * content reserves real width instead of fighting fixed input padding.
69
+ */
70
+ .m-input-field__control--prefixed,
71
+ .m-input-field__control--suffixed,
72
+ .m-input-field__control--clearable {
73
+ align-items: center;
74
+ background: var(--m-color-surface);
75
+ border: var(--m-border-width) solid var(--m-color-border);
76
+ border-radius: var(--m-radius-control);
77
+ box-sizing: border-box;
78
+ display: flex;
79
+ max-width: 100%;
80
+ min-height: var(--m-control-height-medium);
81
+ transition:
82
+ border-color var(--m-motion-fast) var(--m-motion-ease),
83
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
84
+ background-color var(--m-motion-fast) var(--m-motion-ease);
85
+ }
86
+
87
+ .m-input-field--fluid .m-input-field__control--prefixed,
88
+ .m-input-field--fluid .m-input-field__control--suffixed,
89
+ .m-input-field--fluid .m-input-field__control--clearable {
90
+ width: 100%;
91
+ }
92
+
93
+ .m-input-field__control--prefixed:has(.m-input--small),
94
+ .m-input-field__control--suffixed:has(.m-input--small),
95
+ .m-input-field__control--clearable:has(.m-input--small),
96
+ .m-input-field__control--prefixed:has(.m-input--sm),
97
+ .m-input-field__control--suffixed:has(.m-input--sm),
98
+ .m-input-field__control--clearable:has(.m-input--sm) {
99
+ min-height: var(--m-control-height-small);
100
+ }
101
+
102
+ .m-input-field__control--prefixed:has(.m-input--large),
103
+ .m-input-field__control--suffixed:has(.m-input--large),
104
+ .m-input-field__control--clearable:has(.m-input--large),
105
+ .m-input-field__control--prefixed:has(.m-input--lg),
106
+ .m-input-field__control--suffixed:has(.m-input--lg),
107
+ .m-input-field__control--clearable:has(.m-input--lg) {
108
+ min-height: var(--m-control-height-large);
109
+ }
110
+
111
+ .m-input-field__control--prefixed:has(.m-input--filled),
112
+ .m-input-field__control--suffixed:has(.m-input--filled),
113
+ .m-input-field__control--clearable:has(.m-input--filled) {
114
+ background: color-mix(
115
+ in srgb,
116
+ var(--m-color-text-muted) 12%,
117
+ var(--m-color-surface)
118
+ );
119
+ border-color: transparent;
120
+ }
121
+
122
+ .m-input-field__control--prefixed:has(.m-input--invalid),
123
+ .m-input-field__control--suffixed:has(.m-input--invalid),
124
+ .m-input-field__control--clearable:has(.m-input--invalid) {
125
+ border-color: var(--m-color-danger);
126
+ }
127
+
128
+ .m-input-field__control--prefixed:has(.m-input--warning),
129
+ .m-input-field__control--suffixed:has(.m-input--warning),
130
+ .m-input-field__control--clearable:has(.m-input--warning) {
131
+ border-color: var(--m-color-warning);
132
+ }
133
+
134
+ .m-input-field__control--prefixed:hover:not(:focus-within):has(
135
+ .m-input:not(:disabled)
136
+ ),
137
+ .m-input-field__control--suffixed:hover:not(:focus-within):has(
138
+ .m-input:not(:disabled)
139
+ ),
140
+ .m-input-field__control--clearable:hover:not(:focus-within):has(
141
+ .m-input:not(:disabled)
142
+ ) {
143
+ border-color: var(--m-color-primary-hover);
144
+ }
145
+
146
+ .m-input-field__control--prefixed:focus-within,
147
+ .m-input-field__control--suffixed:focus-within,
148
+ .m-input-field__control--clearable:focus-within {
149
+ border-color: var(--m-color-primary);
150
+ box-shadow: var(--m-focus-shadow);
151
+ }
152
+
153
+ .m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
154
+ .m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
155
+ .m-input-field__control--clearable:has(.m-input--invalid):focus-within {
156
+ border-color: var(--m-color-danger);
157
+ box-shadow: var(--m-focus-shadow-danger);
158
+ }
159
+
160
+ .m-input-field__control--prefixed:has(.m-input--warning):focus-within,
161
+ .m-input-field__control--suffixed:has(.m-input--warning):focus-within,
162
+ .m-input-field__control--clearable:has(.m-input--warning):focus-within {
163
+ border-color: var(--m-color-warning);
164
+ box-shadow: var(--m-focus-shadow-warning);
165
+ }
166
+
167
+ .m-input-field__control--prefixed:has(.m-input:disabled),
168
+ .m-input-field__control--suffixed:has(.m-input:disabled),
169
+ .m-input-field__control--clearable:has(.m-input:disabled) {
170
+ background-color: var(--m-color-bg-disabled);
171
+ color: var(--m-color-text-disabled);
172
+ cursor: not-allowed;
173
+ opacity: 1;
174
+ }
175
+
176
+ .m-input-field__control--prefixed .m-input,
177
+ .m-input-field__control--suffixed .m-input,
178
+ .m-input-field__control--clearable .m-input {
179
+ background: transparent;
180
+ border: 0;
181
+ border-radius: 0;
182
+ box-shadow: none;
183
+ flex: 1 1 auto;
184
+ height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
185
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
186
+ min-height: 0;
187
+ min-width: 0;
188
+ width: auto;
189
+ }
190
+
191
+ .m-input-field__control--prefixed:has(.m-input--small) .m-input,
192
+ .m-input-field__control--suffixed:has(.m-input--small) .m-input,
193
+ .m-input-field__control--clearable:has(.m-input--small) .m-input,
194
+ .m-input-field__control--prefixed:has(.m-input--sm) .m-input,
195
+ .m-input-field__control--suffixed:has(.m-input--sm) .m-input,
196
+ .m-input-field__control--clearable:has(.m-input--sm) .m-input {
197
+ height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
198
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
199
+ }
200
+
201
+ .m-input-field__control--prefixed:has(.m-input--large) .m-input,
202
+ .m-input-field__control--suffixed:has(.m-input--large) .m-input,
203
+ .m-input-field__control--clearable:has(.m-input--large) .m-input,
204
+ .m-input-field__control--prefixed:has(.m-input--lg) .m-input,
205
+ .m-input-field__control--suffixed:has(.m-input--lg) .m-input,
206
+ .m-input-field__control--clearable:has(.m-input--lg) .m-input {
207
+ height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
208
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
209
+ }
210
+
211
+ .m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
212
+ .m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
213
+ .m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
214
+ .m-input-field__control--prefixed .m-input:focus-visible,
215
+ .m-input-field__control--suffixed .m-input:focus-visible,
216
+ .m-input-field__control--clearable .m-input:focus-visible,
217
+ .m-input-field__control--prefixed .m-input--invalid:focus-visible,
218
+ .m-input-field__control--suffixed .m-input--invalid:focus-visible,
219
+ .m-input-field__control--clearable .m-input--invalid:focus-visible {
220
+ border-color: transparent;
221
+ box-shadow: none;
222
+ }
223
+
224
+ .m-input-field__control--prefixed .m-input {
225
+ padding-left: 0;
226
+ }
227
+
228
+ .m-input-field__control--suffixed .m-input,
229
+ .m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
230
+ padding-right: 0;
231
+ }
232
+
233
+ .m-input__prefix,
234
+ .m-input__suffix {
235
+ align-items: center;
236
+ color: var(--m-color-text-muted);
237
+ display: inline-flex;
238
+ flex: 0 0 auto;
239
+ font-size: inherit;
240
+ gap: var(--m-space-1);
241
+ line-height: 1;
242
+ padding-inline: var(--m-space-2);
243
+ pointer-events: none;
244
+ white-space: nowrap;
245
+ }
246
+
247
+ .m-input-field__control--prefixed .m-input__prefix,
248
+ .m-input-field__control--suffixed .m-input__suffix {
249
+ font-size: var(--m-control-font-medium);
250
+ }
251
+
252
+ .m-input-field__control:has(.m-input--small) .m-input__prefix,
253
+ .m-input-field__control:has(.m-input--small) .m-input__suffix,
254
+ .m-input-field__control:has(.m-input--sm) .m-input__prefix,
255
+ .m-input-field__control:has(.m-input--sm) .m-input__suffix {
256
+ font-size: var(--m-control-font-small);
257
+ padding-inline: var(--m-space-2);
258
+ }
259
+
260
+ .m-input-field__control:has(.m-input--large) .m-input__prefix,
261
+ .m-input-field__control:has(.m-input--large) .m-input__suffix,
262
+ .m-input-field__control:has(.m-input--lg) .m-input__prefix,
263
+ .m-input-field__control:has(.m-input--lg) .m-input__suffix {
264
+ font-size: var(--m-control-font-large);
265
+ padding-inline: var(--m-space-3);
266
+ }
267
+
268
+ .m-input__prefix button,
269
+ .m-input__suffix button,
270
+ .m-input__prefix a,
271
+ .m-input__suffix a {
272
+ pointer-events: auto;
273
+ }
274
+
275
+ .m-input {
276
+ background: var(--m-color-surface);
277
+ border: var(--m-border-width) solid var(--m-color-border);
278
+ border-radius: var(--m-radius-control);
279
+ color: var(--m-color-text);
280
+ font-family: var(--m-font-sans);
281
+ font-size: var(--m-control-font-medium);
282
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
283
+ min-height: var(--m-control-height-medium);
284
+ padding: 0 var(--m-control-padding-x-medium);
285
+ transition:
286
+ border-color var(--m-motion-fast) var(--m-motion-ease),
287
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
288
+ background-color var(--m-motion-fast) var(--m-motion-ease),
289
+ opacity var(--m-motion-fast) var(--m-motion-ease);
290
+ }
291
+
292
+ .m-input--filled {
293
+ background: color-mix(
294
+ in srgb,
295
+ var(--m-color-text-muted) 12%,
296
+ var(--m-color-surface)
297
+ );
298
+ border-color: transparent;
299
+ }
300
+
301
+ .m-input--fluid {
302
+ width: 100%;
303
+ }
304
+
305
+ .m-input--invalid {
306
+ border-color: var(--m-color-danger);
307
+ }
308
+
309
+ .m-input--warning {
310
+ border-color: var(--m-color-warning);
311
+ }
312
+
313
+ .m-input--small,
314
+ .m-input--sm {
315
+ font-size: var(--m-control-font-small);
316
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
317
+ min-height: var(--m-control-height-small);
318
+ padding: 0 var(--m-control-padding-x-small);
319
+ }
320
+
321
+ .m-input--normal {
322
+ font-size: var(--m-control-font-medium);
323
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
324
+ min-height: var(--m-control-height-medium);
325
+ padding: 0 var(--m-control-padding-x-medium);
326
+ }
327
+
328
+ .m-input--large,
329
+ .m-input--lg {
330
+ font-size: var(--m-control-font-large);
331
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
332
+ min-height: var(--m-control-height-large);
333
+ padding: 0 var(--m-control-padding-x-large);
334
+ }
335
+
336
+ .m-input-field__control .m-input {
337
+ width: 100%;
338
+ }
339
+
340
+ .m-input-field__control--prefixed .m-input,
341
+ .m-input-field__control--suffixed .m-input,
342
+ .m-input-field__control--clearable .m-input {
343
+ width: auto;
344
+ }
345
+
346
+ .m-input__clear {
347
+ align-items: center;
348
+ align-self: center;
349
+ background: transparent;
350
+ border: 0;
351
+ border-radius: var(--m-radius-sm);
352
+ color: var(--m-color-text-muted);
353
+ cursor: pointer;
354
+ display: flex;
355
+ flex: 0 0 auto;
356
+ font-size: var(--m-font-size-lg);
357
+ height: min(
358
+ var(--m-control-affix-size),
359
+ calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
360
+ );
361
+ justify-content: center;
362
+ max-height: 100%;
363
+ padding: 0;
364
+ width: min(
365
+ var(--m-control-affix-size),
366
+ calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
367
+ );
368
+ }
369
+
370
+ .m-input-field__control:has(.m-input--small) .m-input__clear {
371
+ height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
372
+ width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
373
+ }
374
+
375
+ .m-input-field__control:has(.m-input--large) .m-input__clear {
376
+ height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
377
+ width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
378
+ }
379
+
380
+ .m-input__clear:hover:not(:disabled) {
381
+ color: var(--m-color-text);
382
+ }
383
+
384
+ .m-input__clear:focus-visible {
385
+ box-shadow: var(--m-focus-shadow);
386
+ outline: none;
387
+ }
388
+
389
+ .m-input__clear:disabled {
390
+ cursor: not-allowed;
391
+ opacity: var(--m-opacity-disabled);
392
+ }