morya-ui 0.1.1 → 0.2.2

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 (525) hide show
  1. package/CHANGELOG.md +106 -64
  2. package/LICENSE +21 -21
  3. package/README.md +149 -149
  4. package/README.zh-CN.md +149 -149
  5. package/dist/Checkbox-BjtAYUUD.js +110 -0
  6. package/dist/Pagination-DNjDBPfR.js +158 -0
  7. package/dist/Popover-6eE5yIT7.js +166 -0
  8. package/dist/ProgressSpinner-CT7IP3Yr.js +90 -0
  9. package/dist/Radio-DcotfGnv.js +93 -0
  10. package/dist/Scrollbar-DoNZvgX2.js +410 -0
  11. package/dist/accordion/index.js +42 -39
  12. package/dist/accordion/style.css +272 -272
  13. package/dist/auto-complete/index.js +96 -85
  14. package/dist/auto-complete/style.css +574 -574
  15. package/dist/avatar/index.js +47 -44
  16. package/dist/avatar/style.css +387 -387
  17. package/dist/badge/style.css +415 -415
  18. package/dist/block-ui/index.js +21 -16
  19. package/dist/block-ui/style.css +272 -272
  20. package/dist/breadcrumb/index.js +25 -22
  21. package/dist/breadcrumb/style.css +272 -272
  22. package/dist/button/index.js +13 -10
  23. package/dist/button/style.css +927 -927
  24. package/dist/card/index.js +29 -26
  25. package/dist/card/style.css +272 -272
  26. package/dist/carousel/index.js +89 -86
  27. package/dist/carousel/style.css +353 -353
  28. package/dist/cascade-select/index.js +141 -138
  29. package/dist/cascade-select/style.css +755 -755
  30. package/dist/checkbox/index.js +28 -25
  31. package/dist/checkbox/style.css +272 -272
  32. package/dist/chip/style.css +410 -410
  33. package/dist/command-menu/index.js +64 -62
  34. package/dist/command-menu/style.css +477 -477
  35. package/dist/components/Accordion/Accordion.vue.d.ts.map +1 -1
  36. package/dist/components/Accordion/types.d.ts +2 -0
  37. package/dist/components/Accordion/types.d.ts.map +1 -1
  38. package/dist/components/AutoComplete/AutoComplete.vue.d.ts +3 -3
  39. package/dist/components/AutoComplete/AutoComplete.vue.d.ts.map +1 -1
  40. package/dist/components/AutoComplete/styles.css +178 -178
  41. package/dist/components/AutoComplete/types.d.ts +5 -2
  42. package/dist/components/AutoComplete/types.d.ts.map +1 -1
  43. package/dist/components/Avatar/AvatarGroup.vue.d.ts.map +1 -1
  44. package/dist/components/Avatar/styles.css +113 -113
  45. package/dist/components/Avatar/types.d.ts +2 -0
  46. package/dist/components/Avatar/types.d.ts.map +1 -1
  47. package/dist/components/Badge/styles.css +143 -143
  48. package/dist/components/BlockUI/BlockUI.vue.d.ts.map +1 -1
  49. package/dist/components/BlockUI/types.d.ts +2 -0
  50. package/dist/components/BlockUI/types.d.ts.map +1 -1
  51. package/dist/components/Breadcrumb/Breadcrumb.vue.d.ts.map +1 -1
  52. package/dist/components/Breadcrumb/types.d.ts +2 -0
  53. package/dist/components/Breadcrumb/types.d.ts.map +1 -1
  54. package/dist/components/Button/Button.vue.d.ts +1 -1
  55. package/dist/components/Button/ButtonGroup.vue.d.ts.map +1 -1
  56. package/dist/components/Button/styles.css +653 -653
  57. package/dist/components/Button/types.d.ts +2 -0
  58. package/dist/components/Button/types.d.ts.map +1 -1
  59. package/dist/components/Card/Card.vue.d.ts.map +1 -1
  60. package/dist/components/Card/types.d.ts +2 -0
  61. package/dist/components/Card/types.d.ts.map +1 -1
  62. package/dist/components/Carousel/Carousel.vue.d.ts.map +1 -1
  63. package/dist/components/Carousel/styles.css +79 -79
  64. package/dist/components/Carousel/types.d.ts +2 -0
  65. package/dist/components/Carousel/types.d.ts.map +1 -1
  66. package/dist/components/CascadeSelect/CascadeSelect.vue.d.ts +1 -1
  67. package/dist/components/CascadeSelect/CascadeSelect.vue.d.ts.map +1 -1
  68. package/dist/components/CascadeSelect/styles.css +142 -142
  69. package/dist/components/CascadeSelect/types.d.ts +5 -2
  70. package/dist/components/CascadeSelect/types.d.ts.map +1 -1
  71. package/dist/components/Checkbox/Checkbox.vue.d.ts.map +1 -1
  72. package/dist/components/Checkbox/CheckboxGroup.vue.d.ts.map +1 -1
  73. package/dist/components/Checkbox/types.d.ts +4 -0
  74. package/dist/components/Checkbox/types.d.ts.map +1 -1
  75. package/dist/components/Chip/styles.css +136 -136
  76. package/dist/components/CommandMenu/CommandMenu.vue.d.ts.map +1 -1
  77. package/dist/components/CommandMenu/styles.css +81 -81
  78. package/dist/components/CommandMenu/types.d.ts +2 -0
  79. package/dist/components/CommandMenu/types.d.ts.map +1 -1
  80. package/dist/components/ConfigProvider/ConfigProvider.vue.d.ts +2 -0
  81. package/dist/components/ConfigProvider/ConfigProvider.vue.d.ts.map +1 -1
  82. package/dist/components/ConfigProvider/styles.css +6 -6
  83. package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts.map +1 -1
  84. package/dist/components/ConfirmDialog/styles.css +24 -24
  85. package/dist/components/ConfirmDialog/types.d.ts +2 -0
  86. package/dist/components/ConfirmDialog/types.d.ts.map +1 -1
  87. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts +1 -1
  88. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts.map +1 -1
  89. package/dist/components/ConfirmPopup/styles.css +35 -35
  90. package/dist/components/ConfirmPopup/types.d.ts +2 -0
  91. package/dist/components/ConfirmPopup/types.d.ts.map +1 -1
  92. package/dist/components/ContextMenu/ContextMenu.vue.d.ts +11 -6
  93. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  94. package/dist/components/ContextMenu/styles.css +99 -99
  95. package/dist/components/ContextMenu/types.d.ts +2 -0
  96. package/dist/components/ContextMenu/types.d.ts.map +1 -1
  97. package/dist/components/ContextMenu/useContextMenu.d.ts.map +1 -1
  98. package/dist/components/DataView/DataView.vue.d.ts +1 -1
  99. package/dist/components/DataView/DataView.vue.d.ts.map +1 -1
  100. package/dist/components/DataView/types.d.ts +2 -0
  101. package/dist/components/DataView/types.d.ts.map +1 -1
  102. package/dist/components/DatePicker/DatePicker.vue.d.ts +2 -2
  103. package/dist/components/DatePicker/DatePicker.vue.d.ts.map +1 -1
  104. package/dist/components/DatePicker/styles.css +261 -261
  105. package/dist/components/DatePicker/types.d.ts +5 -1
  106. package/dist/components/DatePicker/types.d.ts.map +1 -1
  107. package/dist/components/Dialog/Dialog.vue.d.ts +1 -1
  108. package/dist/components/Dialog/Dialog.vue.d.ts.map +1 -1
  109. package/dist/components/Dialog/styles.css +230 -230
  110. package/dist/components/Dialog/types.d.ts +2 -0
  111. package/dist/components/Dialog/types.d.ts.map +1 -1
  112. package/dist/components/Dock/Dock.vue.d.ts.map +1 -1
  113. package/dist/components/Dock/styles.css +68 -68
  114. package/dist/components/Dock/types.d.ts +2 -0
  115. package/dist/components/Dock/types.d.ts.map +1 -1
  116. package/dist/components/Drawer/Drawer.vue.d.ts +1 -1
  117. package/dist/components/Drawer/Drawer.vue.d.ts.map +1 -1
  118. package/dist/components/Drawer/styles.css +133 -133
  119. package/dist/components/Drawer/types.d.ts +2 -0
  120. package/dist/components/Drawer/types.d.ts.map +1 -1
  121. package/dist/components/Dropdown/Dropdown.vue.d.ts +1 -1
  122. package/dist/components/Dropdown/Dropdown.vue.d.ts.map +1 -1
  123. package/dist/components/Dropdown/styles.css +79 -79
  124. package/dist/components/Dropdown/types.d.ts +3 -0
  125. package/dist/components/Dropdown/types.d.ts.map +1 -1
  126. package/dist/components/Fieldset/Fieldset.vue.d.ts.map +1 -1
  127. package/dist/components/Fieldset/types.d.ts +2 -0
  128. package/dist/components/Fieldset/types.d.ts.map +1 -1
  129. package/dist/components/FileUpload/FileUpload.vue.d.ts.map +1 -1
  130. package/dist/components/FileUpload/styles.css +335 -335
  131. package/dist/components/FileUpload/types.d.ts +2 -0
  132. package/dist/components/FileUpload/types.d.ts.map +1 -1
  133. package/dist/components/Flex/Flex.vue.d.ts.map +1 -1
  134. package/dist/components/Flex/types.d.ts +2 -0
  135. package/dist/components/Flex/types.d.ts.map +1 -1
  136. package/dist/components/FloatLabel/FloatLabel.vue.d.ts.map +1 -1
  137. package/dist/components/FloatLabel/types.d.ts +3 -0
  138. package/dist/components/FloatLabel/types.d.ts.map +1 -1
  139. package/dist/components/Fluid/Fluid.vue.d.ts.map +1 -1
  140. package/dist/components/Fluid/types.d.ts +2 -0
  141. package/dist/components/Fluid/types.d.ts.map +1 -1
  142. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  143. package/dist/components/Form/FormItem.vue.d.ts.map +1 -1
  144. package/dist/components/Form/styles.css +90 -90
  145. package/dist/components/Form/types.d.ts +5 -0
  146. package/dist/components/Form/types.d.ts.map +1 -1
  147. package/dist/components/Gallery/Gallery.vue.d.ts.map +1 -1
  148. package/dist/components/Gallery/styles.css +87 -87
  149. package/dist/components/Gallery/types.d.ts +2 -0
  150. package/dist/components/Gallery/types.d.ts.map +1 -1
  151. package/dist/components/Grid/Grid.vue.d.ts.map +1 -1
  152. package/dist/components/Grid/GridItem.vue.d.ts.map +1 -1
  153. package/dist/components/Grid/types.d.ts +5 -0
  154. package/dist/components/Grid/types.d.ts.map +1 -1
  155. package/dist/components/Icon/styles.css +2 -2
  156. package/dist/components/IconField/IconField.vue.d.ts.map +1 -1
  157. package/dist/components/IconField/types.d.ts +3 -0
  158. package/dist/components/IconField/types.d.ts.map +1 -1
  159. package/dist/components/Inplace/Inplace.vue.d.ts.map +1 -1
  160. package/dist/components/Inplace/types.d.ts +2 -0
  161. package/dist/components/Inplace/types.d.ts.map +1 -1
  162. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  163. package/dist/components/Input/index.d.ts +1 -1
  164. package/dist/components/Input/index.d.ts.map +1 -1
  165. package/dist/components/Input/styles.css +193 -193
  166. package/dist/components/Input/types.d.ts +6 -1
  167. package/dist/components/Input/types.d.ts.map +1 -1
  168. package/dist/components/InputColor/InputColor.vue.d.ts.map +1 -1
  169. package/dist/components/InputColor/styles.css +104 -104
  170. package/dist/components/InputColor/types.d.ts +5 -1
  171. package/dist/components/InputColor/types.d.ts.map +1 -1
  172. package/dist/components/InputGroup/InputGroup.vue.d.ts.map +1 -1
  173. package/dist/components/InputGroup/types.d.ts +3 -0
  174. package/dist/components/InputGroup/types.d.ts.map +1 -1
  175. package/dist/components/InputNumber/InputNumber.vue.d.ts.map +1 -1
  176. package/dist/components/InputNumber/styles.css +175 -175
  177. package/dist/components/InputNumber/types.d.ts +5 -1
  178. package/dist/components/InputNumber/types.d.ts.map +1 -1
  179. package/dist/components/InputOtp/InputOtp.vue.d.ts +1 -1
  180. package/dist/components/InputOtp/InputOtp.vue.d.ts.map +1 -1
  181. package/dist/components/InputOtp/types.d.ts +3 -0
  182. package/dist/components/InputOtp/types.d.ts.map +1 -1
  183. package/dist/components/InputPassword/InputPassword.vue.d.ts.map +1 -1
  184. package/dist/components/InputPassword/styles.css +168 -168
  185. package/dist/components/InputPassword/types.d.ts +5 -1
  186. package/dist/components/InputPassword/types.d.ts.map +1 -1
  187. package/dist/components/InputTags/InputTags.vue.d.ts.map +1 -1
  188. package/dist/components/InputTags/styles.css +86 -86
  189. package/dist/components/InputTags/types.d.ts +5 -2
  190. package/dist/components/InputTags/types.d.ts.map +1 -1
  191. package/dist/components/Knob/Knob.vue.d.ts.map +1 -1
  192. package/dist/components/Knob/types.d.ts +3 -0
  193. package/dist/components/Knob/types.d.ts.map +1 -1
  194. package/dist/components/Label/Label.vue.d.ts.map +1 -1
  195. package/dist/components/Label/types.d.ts +3 -0
  196. package/dist/components/Label/types.d.ts.map +1 -1
  197. package/dist/components/Layout/Layout.vue.d.ts.map +1 -1
  198. package/dist/components/Layout/LayoutContent.vue.d.ts.map +1 -1
  199. package/dist/components/Layout/LayoutFooter.vue.d.ts.map +1 -1
  200. package/dist/components/Layout/LayoutHeader.vue.d.ts.map +1 -1
  201. package/dist/components/Layout/LayoutSider.vue.d.ts.map +1 -1
  202. package/dist/components/Layout/styles.css +384 -384
  203. package/dist/components/Layout/types.d.ts +6 -0
  204. package/dist/components/Layout/types.d.ts.map +1 -1
  205. package/dist/components/Listbox/Listbox.vue.d.ts +1 -1
  206. package/dist/components/Listbox/Listbox.vue.d.ts.map +1 -1
  207. package/dist/components/Listbox/styles.css +100 -100
  208. package/dist/components/Listbox/types.d.ts +3 -0
  209. package/dist/components/Listbox/types.d.ts.map +1 -1
  210. package/dist/components/MegaMenu/MegaMenu.vue.d.ts.map +1 -1
  211. package/dist/components/MegaMenu/styles.css +89 -89
  212. package/dist/components/MegaMenu/types.d.ts +2 -0
  213. package/dist/components/MegaMenu/types.d.ts.map +1 -1
  214. package/dist/components/Menu/Menu.vue.d.ts.map +1 -1
  215. package/dist/components/Menu/MenuCollapsedTooltip.vue.d.ts +27 -0
  216. package/dist/components/Menu/MenuCollapsedTooltip.vue.d.ts.map +1 -0
  217. package/dist/components/Menu/MenuNodes.vue.d.ts.map +1 -1
  218. package/dist/components/Menu/styles.css +518 -496
  219. package/dist/components/Menu/types.d.ts +2 -0
  220. package/dist/components/Menu/types.d.ts.map +1 -1
  221. package/dist/components/Menubar/Menubar.vue.d.ts.map +1 -1
  222. package/dist/components/Menubar/styles.css +114 -114
  223. package/dist/components/Menubar/types.d.ts +2 -0
  224. package/dist/components/Menubar/types.d.ts.map +1 -1
  225. package/dist/components/Message/Message.vue.d.ts +1 -1
  226. package/dist/components/Message/Message.vue.d.ts.map +1 -1
  227. package/dist/components/Message/styles.css +221 -221
  228. package/dist/components/Message/types.d.ts +2 -0
  229. package/dist/components/Message/types.d.ts.map +1 -1
  230. package/dist/components/MeterGroup/MeterGroup.vue.d.ts.map +1 -1
  231. package/dist/components/MeterGroup/styles.css +49 -49
  232. package/dist/components/MeterGroup/types.d.ts +2 -0
  233. package/dist/components/MeterGroup/types.d.ts.map +1 -1
  234. package/dist/components/OrderList/OrderList.vue.d.ts.map +1 -1
  235. package/dist/components/OrderList/types.d.ts +2 -0
  236. package/dist/components/OrderList/types.d.ts.map +1 -1
  237. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  238. package/dist/components/Pagination/styles.css +86 -86
  239. package/dist/components/Pagination/types.d.ts +2 -0
  240. package/dist/components/Pagination/types.d.ts.map +1 -1
  241. package/dist/components/Panel/Panel.vue.d.ts.map +1 -1
  242. package/dist/components/Panel/types.d.ts +2 -0
  243. package/dist/components/Panel/types.d.ts.map +1 -1
  244. package/dist/components/PickList/PickList.vue.d.ts.map +1 -1
  245. package/dist/components/PickList/types.d.ts +2 -0
  246. package/dist/components/PickList/types.d.ts.map +1 -1
  247. package/dist/components/Popover/Popover.vue.d.ts +1 -1
  248. package/dist/components/Popover/Popover.vue.d.ts.map +1 -1
  249. package/dist/components/Popover/styles.css +118 -118
  250. package/dist/components/Popover/types.d.ts +2 -0
  251. package/dist/components/Popover/types.d.ts.map +1 -1
  252. package/dist/components/ProgressBar/styles.css +3 -3
  253. package/dist/components/ProgressSpinner/ProgressSpinner.vue.d.ts.map +1 -1
  254. package/dist/components/ProgressSpinner/styles.css +3 -3
  255. package/dist/components/ProgressSpinner/types.d.ts +2 -0
  256. package/dist/components/ProgressSpinner/types.d.ts.map +1 -1
  257. package/dist/components/Radio/Radio.vue.d.ts.map +1 -1
  258. package/dist/components/Radio/RadioGroup.vue.d.ts.map +1 -1
  259. package/dist/components/Radio/types.d.ts +4 -0
  260. package/dist/components/Radio/types.d.ts.map +1 -1
  261. package/dist/components/Rating/Rating.vue.d.ts +1 -1
  262. package/dist/components/Rating/Rating.vue.d.ts.map +1 -1
  263. package/dist/components/Rating/types.d.ts +3 -0
  264. package/dist/components/Rating/types.d.ts.map +1 -1
  265. package/dist/components/ScrollTop/ScrollTop.vue.d.ts.map +1 -1
  266. package/dist/components/ScrollTop/types.d.ts +2 -0
  267. package/dist/components/ScrollTop/types.d.ts.map +1 -1
  268. package/dist/components/Scrollbar/Scrollbar.vue.d.ts.map +1 -1
  269. package/dist/components/Scrollbar/styles.css +122 -122
  270. package/dist/components/Scrollbar/types.d.ts +2 -0
  271. package/dist/components/Scrollbar/types.d.ts.map +1 -1
  272. package/dist/components/Select/Select.vue.d.ts +3 -3
  273. package/dist/components/Select/Select.vue.d.ts.map +1 -1
  274. package/dist/components/Select/styles.css +240 -240
  275. package/dist/components/Select/types.d.ts +5 -2
  276. package/dist/components/Select/types.d.ts.map +1 -1
  277. package/dist/components/SelectButton/SelectButton.vue.d.ts.map +1 -1
  278. package/dist/components/SelectButton/styles.css +89 -89
  279. package/dist/components/SelectButton/types.d.ts +2 -0
  280. package/dist/components/SelectButton/types.d.ts.map +1 -1
  281. package/dist/components/Sidebar/Sidebar.vue.d.ts.map +1 -1
  282. package/dist/components/Sidebar/styles.css +65 -65
  283. package/dist/components/Sidebar/types.d.ts +2 -0
  284. package/dist/components/Sidebar/types.d.ts.map +1 -1
  285. package/dist/components/Skeleton/Skeleton.vue.d.ts.map +1 -1
  286. package/dist/components/Skeleton/styles.css +2 -2
  287. package/dist/components/Skeleton/types.d.ts +2 -0
  288. package/dist/components/Skeleton/types.d.ts.map +1 -1
  289. package/dist/components/Slider/Slider.vue.d.ts +1 -1
  290. package/dist/components/Slider/Slider.vue.d.ts.map +1 -1
  291. package/dist/components/Slider/styles.css +188 -188
  292. package/dist/components/Slider/types.d.ts +5 -1
  293. package/dist/components/Slider/types.d.ts.map +1 -1
  294. package/dist/components/Space/Space.vue.d.ts.map +1 -1
  295. package/dist/components/Space/types.d.ts +2 -0
  296. package/dist/components/Space/types.d.ts.map +1 -1
  297. package/dist/components/SpeedDial/SpeedDial.vue.d.ts.map +1 -1
  298. package/dist/components/SpeedDial/types.d.ts +2 -0
  299. package/dist/components/SpeedDial/types.d.ts.map +1 -1
  300. package/dist/components/SplitButton/SplitButton.vue.d.ts.map +1 -1
  301. package/dist/components/SplitButton/styles.css +184 -184
  302. package/dist/components/SplitButton/types.d.ts +2 -0
  303. package/dist/components/SplitButton/types.d.ts.map +1 -1
  304. package/dist/components/Splitter/Splitter.vue.d.ts.map +1 -1
  305. package/dist/components/Splitter/types.d.ts +2 -0
  306. package/dist/components/Splitter/types.d.ts.map +1 -1
  307. package/dist/components/Stepper/Stepper.vue.d.ts.map +1 -1
  308. package/dist/components/Stepper/styles.css +121 -121
  309. package/dist/components/Stepper/types.d.ts +2 -0
  310. package/dist/components/Stepper/types.d.ts.map +1 -1
  311. package/dist/components/Switch/Switch.vue.d.ts +1 -1
  312. package/dist/components/Switch/Switch.vue.d.ts.map +1 -1
  313. package/dist/components/Switch/styles.css +107 -107
  314. package/dist/components/Switch/types.d.ts +3 -0
  315. package/dist/components/Switch/types.d.ts.map +1 -1
  316. package/dist/components/Table/Table.vue.d.ts +1 -1
  317. package/dist/components/Table/Table.vue.d.ts.map +1 -1
  318. package/dist/components/Table/types.d.ts +2 -0
  319. package/dist/components/Table/types.d.ts.map +1 -1
  320. package/dist/components/Tabs/Tabs.vue.d.ts.map +1 -1
  321. package/dist/components/Tabs/types.d.ts +2 -0
  322. package/dist/components/Tabs/types.d.ts.map +1 -1
  323. package/dist/components/Terminal/Terminal.vue.d.ts.map +1 -1
  324. package/dist/components/Terminal/styles.css +64 -64
  325. package/dist/components/Terminal/types.d.ts +2 -0
  326. package/dist/components/Terminal/types.d.ts.map +1 -1
  327. package/dist/components/Textarea/Textarea.vue.d.ts +1 -1
  328. package/dist/components/Textarea/Textarea.vue.d.ts.map +1 -1
  329. package/dist/components/Textarea/styles.css +96 -96
  330. package/dist/components/Textarea/types.d.ts +5 -1
  331. package/dist/components/Textarea/types.d.ts.map +1 -1
  332. package/dist/components/TieredMenu/TieredMenu.vue.d.ts.map +1 -1
  333. package/dist/components/TieredMenu/styles.css +90 -90
  334. package/dist/components/TieredMenu/types.d.ts +2 -0
  335. package/dist/components/TieredMenu/types.d.ts.map +1 -1
  336. package/dist/components/Timeline/Timeline.vue.d.ts.map +1 -1
  337. package/dist/components/Timeline/types.d.ts +2 -0
  338. package/dist/components/Timeline/types.d.ts.map +1 -1
  339. package/dist/components/Toast/Toast.vue.d.ts +1 -1
  340. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  341. package/dist/components/Toast/types.d.ts +2 -0
  342. package/dist/components/Toast/types.d.ts.map +1 -1
  343. package/dist/components/Toolbar/Toolbar.vue.d.ts.map +1 -1
  344. package/dist/components/Toolbar/types.d.ts +2 -0
  345. package/dist/components/Toolbar/types.d.ts.map +1 -1
  346. package/dist/components/Tree/Tree.vue.d.ts +1 -1
  347. package/dist/components/Tree/Tree.vue.d.ts.map +1 -1
  348. package/dist/components/Tree/types.d.ts +2 -0
  349. package/dist/components/Tree/types.d.ts.map +1 -1
  350. package/dist/components/TreeSelect/TreeSelect.vue.d.ts +2 -2
  351. package/dist/components/TreeSelect/TreeSelect.vue.d.ts.map +1 -1
  352. package/dist/components/TreeSelect/styles.css +162 -162
  353. package/dist/components/TreeSelect/types.d.ts +5 -2
  354. package/dist/components/TreeSelect/types.d.ts.map +1 -1
  355. package/dist/components/TreeTable/TreeTable.vue.d.ts.map +1 -1
  356. package/dist/components/TreeTable/types.d.ts +2 -0
  357. package/dist/components/TreeTable/types.d.ts.map +1 -1
  358. package/dist/components/VirtualScroller/VirtualScroller.vue.d.ts.map +1 -1
  359. package/dist/components/VirtualScroller/types.d.ts +2 -0
  360. package/dist/components/VirtualScroller/types.d.ts.map +1 -1
  361. package/dist/config-provider/index.js +71 -68
  362. package/dist/config-provider/style.css +1124 -1124
  363. package/dist/confirm-dialog/index.js +82 -80
  364. package/dist/confirm-dialog/style.css +1181 -1181
  365. package/dist/confirm-popup/index.js +67 -63
  366. package/dist/confirm-popup/style.css +962 -962
  367. package/dist/context-menu/index.js +108 -93
  368. package/dist/context-menu/style.css +373 -373
  369. package/dist/data-view/index.js +48 -45
  370. package/dist/data-view/style.css +361 -361
  371. package/dist/date-picker/index.js +101 -90
  372. package/dist/date-picker/style.css +535 -535
  373. package/dist/dialog/index.js +102 -100
  374. package/dist/dialog/style.css +1157 -1157
  375. package/dist/divider/style.css +272 -272
  376. package/dist/dock/index.js +27 -24
  377. package/dist/dock/style.css +342 -342
  378. package/dist/drawer/index.js +60 -58
  379. package/dist/drawer/style.css +407 -407
  380. package/dist/dropdown/index.js +121 -119
  381. package/dist/dropdown/style.css +353 -353
  382. package/dist/fieldset/index.js +28 -25
  383. package/dist/fieldset/style.css +274 -274
  384. package/dist/file-upload/index.js +184 -181
  385. package/dist/file-upload/style.css +609 -609
  386. package/dist/flex/index.js +21 -19
  387. package/dist/flex/style.css +272 -272
  388. package/dist/float-label/index.js +20 -16
  389. package/dist/float-label/style.css +272 -272
  390. package/dist/fluid/index.js +14 -8
  391. package/dist/fluid/style.css +272 -272
  392. package/dist/form/index.js +170 -165
  393. package/dist/form/style.css +362 -362
  394. package/dist/gallery/index.js +68 -65
  395. package/dist/gallery/style.css +361 -361
  396. package/dist/grid/index.js +101 -98
  397. package/dist/grid/style.css +272 -272
  398. package/dist/icon/style.css +274 -274
  399. package/dist/icon-field/index.js +13 -8
  400. package/dist/icon-field/style.css +272 -272
  401. package/dist/index.js +5817 -5427
  402. package/dist/inplace/index.js +43 -40
  403. package/dist/inplace/style.css +272 -272
  404. package/dist/input/index.js +91 -77
  405. package/dist/input/style.css +467 -467
  406. package/dist/input-color/index.js +63 -49
  407. package/dist/input-color/style.css +376 -376
  408. package/dist/input-group/index.js +14 -9
  409. package/dist/input-group/style.css +272 -272
  410. package/dist/input-number/index.js +130 -119
  411. package/dist/input-number/style.css +449 -449
  412. package/dist/input-otp/index.js +61 -58
  413. package/dist/input-otp/style.css +272 -272
  414. package/dist/input-password/index.js +92 -79
  415. package/dist/input-password/style.css +442 -442
  416. package/dist/input-tags/index.js +72 -60
  417. package/dist/input-tags/style.css +360 -360
  418. package/dist/knob/index.js +65 -62
  419. package/dist/knob/style.css +272 -272
  420. package/dist/label/index.js +11 -9
  421. package/dist/label/style.css +272 -272
  422. package/dist/layout/index.js +159 -148
  423. package/dist/layout/style.css +658 -658
  424. package/dist/listbox/index.js +76 -73
  425. package/dist/listbox/style.css +494 -494
  426. package/dist/mega-menu/index.js +116 -113
  427. package/dist/mega-menu/style.css +363 -363
  428. package/dist/menu/index.js +375 -327
  429. package/dist/menu/style.css +932 -858
  430. package/dist/menu/style.js +1 -0
  431. package/dist/menubar/index.js +120 -117
  432. package/dist/menubar/style.css +388 -388
  433. package/dist/message/index.js +113 -110
  434. package/dist/message/style.css +495 -495
  435. package/dist/meter-group/index.js +27 -24
  436. package/dist/meter-group/style.css +321 -321
  437. package/dist/order-list/index.js +86 -83
  438. package/dist/order-list/style.css +274 -274
  439. package/dist/pagination/index.js +1 -1
  440. package/dist/pagination/style.css +360 -360
  441. package/dist/panel/index.js +44 -41
  442. package/dist/panel/style.css +274 -274
  443. package/dist/pick-list/index.js +81 -78
  444. package/dist/pick-list/style.css +274 -274
  445. package/dist/popover/index.js +1 -1
  446. package/dist/popover/style.css +390 -390
  447. package/dist/progress-bar/style.css +275 -275
  448. package/dist/progress-spinner/index.js +1 -1
  449. package/dist/progress-spinner/style.css +275 -275
  450. package/dist/radio/index.js +26 -23
  451. package/dist/radio/style.css +272 -272
  452. package/dist/rating/index.js +81 -78
  453. package/dist/rating/style.css +274 -274
  454. package/dist/scroll-top/index.js +47 -44
  455. package/dist/scroll-top/style.css +274 -274
  456. package/dist/scrollbar/index.js +1 -1
  457. package/dist/scrollbar/style.css +394 -394
  458. package/dist/select/index.js +96 -88
  459. package/dist/select/style.css +853 -853
  460. package/dist/select-button/index.js +46 -43
  461. package/dist/select-button/style.css +361 -361
  462. package/dist/shared/nativeControlProps.d.ts +32 -0
  463. package/dist/shared/nativeControlProps.d.ts.map +1 -0
  464. package/dist/shared/passThrough.d.ts +11 -0
  465. package/dist/shared/passThrough.d.ts.map +1 -0
  466. package/dist/shared/styles/control-affix-icon.css +110 -110
  467. package/dist/shared/styles/control-suffix.css +107 -107
  468. package/dist/shared/useComponentAttrs.d.ts +61 -0
  469. package/dist/shared/useComponentAttrs.d.ts.map +1 -0
  470. package/dist/sidebar/index.js +38 -35
  471. package/dist/sidebar/style.css +339 -339
  472. package/dist/skeleton/index.js +24 -24
  473. package/dist/skeleton/style.css +274 -274
  474. package/dist/slider/index.js +104 -92
  475. package/dist/slider/style.css +460 -460
  476. package/dist/space/index.js +23 -20
  477. package/dist/space/style.css +272 -272
  478. package/dist/speed-dial/index.js +79 -76
  479. package/dist/speed-dial/style.css +274 -274
  480. package/dist/split-button/index.js +64 -61
  481. package/dist/split-button/style.css +1111 -1111
  482. package/dist/splitter/index.js +94 -90
  483. package/dist/splitter/style.css +272 -272
  484. package/dist/stepper/index.js +39 -36
  485. package/dist/stepper/style.css +395 -395
  486. package/dist/styles/base.css +1 -1
  487. package/dist/styles.css +1 -1
  488. package/dist/switch/index.js +32 -30
  489. package/dist/switch/style.css +379 -379
  490. package/dist/table/index.js +341 -337
  491. package/dist/table/style.css +485 -485
  492. package/dist/tabs/index.js +77 -74
  493. package/dist/tabs/style.css +274 -274
  494. package/dist/tag/style.css +274 -274
  495. package/dist/terminal/index.js +41 -38
  496. package/dist/terminal/style.css +336 -336
  497. package/dist/textarea/index.js +90 -76
  498. package/dist/textarea/style.css +370 -370
  499. package/dist/theme/styles.css +271 -271
  500. package/dist/tiered-menu/index.js +65 -60
  501. package/dist/tiered-menu/style.css +364 -364
  502. package/dist/timeline/index.js +50 -47
  503. package/dist/timeline/style.css +274 -274
  504. package/dist/toast/index.js +111 -108
  505. package/dist/toast/style.css +274 -274
  506. package/dist/toggle-button/style.css +274 -274
  507. package/dist/toolbar/index.js +21 -15
  508. package/dist/toolbar/style.css +272 -272
  509. package/dist/tooltip/style.css +272 -272
  510. package/dist/tree/index.js +214 -211
  511. package/dist/tree/style.css +274 -274
  512. package/dist/tree-select/index.js +218 -215
  513. package/dist/tree-select/style.css +653 -653
  514. package/dist/tree-table/index.js +58 -55
  515. package/dist/tree-table/style.css +274 -274
  516. package/dist/useComponentAttrs-BTYEe61P.js +70 -0
  517. package/dist/virtual-scroller/index.js +32 -29
  518. package/dist/virtual-scroller/style.css +272 -272
  519. package/package.json +13 -8
  520. package/dist/Checkbox-D8Ma0ZbG.js +0 -108
  521. package/dist/Pagination-BiaLUjrx.js +0 -155
  522. package/dist/Popover-BXSXRV-B.js +0 -162
  523. package/dist/ProgressSpinner-DPavp_Ff.js +0 -89
  524. package/dist/Radio-ChJ6GX_G.js +0 -91
  525. package/dist/Scrollbar-BGCxnXaQ.js +0 -407
package/dist/components/Button/styles.css CHANGED
@@ -1,653 +1,653 @@
1
- .m-button {
2
- --m-button-padding-x-small: var(--m-control-padding-x-small);
3
- --m-button-padding-x-medium: calc(
4
- var(--m-control-padding-x-medium) + var(--m-space-1)
5
- );
6
- --m-button-padding-x-large: calc(
7
- var(--m-control-padding-x-large) + var(--m-space-1)
8
- );
9
- --m-button-icon-stack-min-height: 3.25rem;
10
- --m-button-badge-min-width: 1.15rem;
11
- --m-button-spinner-size: 0.875rem;
12
- --m-button-icon-size: 1rem;
13
- --m-button-bg: var(--m-color-primary);
14
- --m-button-fg: var(--m-color-on-emphasis);
15
- --m-button-border: var(--m-color-primary);
16
- --m-button-hover-bg: var(--m-color-primary-hover);
17
- --m-button-hover-fg: var(--m-color-on-emphasis);
18
- --m-button-hover-border: var(--m-color-primary-hover);
19
- --m-button-active-bg: color-mix(
20
- in srgb,
21
- var(--m-color-primary) 82%,
22
- black
23
- );
24
- align-items: center;
25
- background: var(--m-button-bg);
26
- border: var(--m-border-width) solid var(--m-button-border);
27
- border-radius: var(--m-radius-control);
28
- color: var(--m-button-fg);
29
- cursor: pointer;
30
- display: inline-flex;
31
- flex-direction: row;
32
- font-size: var(--m-control-font-medium);
33
- font-weight: 600;
34
- gap: var(--m-space-2);
35
- justify-content: center;
36
- line-height: 1;
37
- min-height: var(--m-control-height-medium);
38
- padding: 0 var(--m-button-padding-x-medium);
39
- position: relative;
40
- transition:
41
- background-color var(--m-motion-fast) var(--m-motion-ease),
42
- border-color var(--m-motion-fast) var(--m-motion-ease),
43
- color var(--m-motion-fast) var(--m-motion-ease),
44
- box-shadow var(--m-motion-fast) var(--m-motion-ease);
45
- vertical-align: middle;
46
- white-space: nowrap;
47
- }
48
-
49
- .m-button:hover:not(:disabled) {
50
- background: var(--m-button-hover-bg);
51
- border-color: var(--m-button-hover-border);
52
- color: var(--m-button-hover-fg);
53
- }
54
-
55
- .m-button:active:not(:disabled) {
56
- background: var(--m-button-active-bg);
57
- }
58
-
59
- /* Naive-style focus: soft glow, not outline-offset ring */
60
- .m-button:focus {
61
- outline: none;
62
- }
63
-
64
- .m-button:focus-visible {
65
- box-shadow: var(--m-focus-shadow);
66
- outline: none;
67
- }
68
-
69
- .m-button--primary {
70
- --m-button-bg: var(--m-color-primary);
71
- --m-button-fg: var(--m-color-on-emphasis);
72
- --m-button-border: var(--m-color-primary);
73
- --m-button-hover-bg: var(--m-color-primary-hover);
74
- --m-button-hover-fg: var(--m-color-on-emphasis);
75
- --m-button-hover-border: var(--m-color-primary-hover);
76
- --m-button-active-bg: color-mix(
77
- in srgb,
78
- var(--m-color-primary) 82%,
79
- black
80
- );
81
- }
82
-
83
- .m-button--secondary {
84
- --m-button-bg: color-mix(
85
- in srgb,
86
- var(--m-color-text-muted) 16%,
87
- var(--m-color-surface)
88
- );
89
- --m-button-fg: var(--m-color-text);
90
- --m-button-border: transparent;
91
- --m-button-hover-bg: color-mix(
92
- in srgb,
93
- var(--m-color-text-muted) 24%,
94
- var(--m-color-surface)
95
- );
96
- --m-button-hover-fg: var(--m-color-text);
97
- --m-button-hover-border: transparent;
98
- --m-button-active-bg: color-mix(
99
- in srgb,
100
- var(--m-color-text-muted) 32%,
101
- var(--m-color-surface)
102
- );
103
- }
104
-
105
- .m-button--success {
106
- --m-button-bg: var(--m-color-success);
107
- --m-button-fg: var(--m-color-on-emphasis);
108
- --m-button-border: var(--m-color-success);
109
- --m-button-hover-bg: color-mix(
110
- in srgb,
111
- var(--m-color-success) 85%,
112
- black
113
- );
114
- --m-button-hover-fg: var(--m-color-on-emphasis);
115
- --m-button-hover-border: color-mix(
116
- in srgb,
117
- var(--m-color-success) 85%,
118
- black
119
- );
120
- --m-button-active-bg: color-mix(
121
- in srgb,
122
- var(--m-color-success) 75%,
123
- black
124
- );
125
- }
126
-
127
- .m-button--info {
128
- --m-button-bg: var(--m-color-info);
129
- --m-button-fg: var(--m-color-on-emphasis);
130
- --m-button-border: var(--m-color-info);
131
- --m-button-hover-bg: color-mix(in srgb, var(--m-color-info) 85%, black);
132
- --m-button-hover-fg: var(--m-color-on-emphasis);
133
- --m-button-hover-border: color-mix(
134
- in srgb,
135
- var(--m-color-info) 85%,
136
- black
137
- );
138
- --m-button-active-bg: color-mix(in srgb, var(--m-color-info) 75%, black);
139
- }
140
-
141
- .m-button--warn {
142
- --m-button-bg: var(--m-color-warn);
143
- --m-button-fg: var(--m-color-on-emphasis);
144
- --m-button-border: var(--m-color-warn);
145
- --m-button-hover-bg: color-mix(in srgb, var(--m-color-warn) 85%, black);
146
- --m-button-hover-fg: var(--m-color-on-emphasis);
147
- --m-button-hover-border: color-mix(
148
- in srgb,
149
- var(--m-color-warn) 85%,
150
- black
151
- );
152
- --m-button-active-bg: color-mix(in srgb, var(--m-color-warn) 75%, black);
153
- }
154
-
155
- .m-button--help {
156
- --m-button-bg: var(--m-color-help);
157
- --m-button-fg: var(--m-color-on-emphasis);
158
- --m-button-border: var(--m-color-help);
159
- --m-button-hover-bg: color-mix(in srgb, var(--m-color-help) 85%, black);
160
- --m-button-hover-fg: var(--m-color-on-emphasis);
161
- --m-button-hover-border: color-mix(
162
- in srgb,
163
- var(--m-color-help) 85%,
164
- black
165
- );
166
- --m-button-active-bg: color-mix(in srgb, var(--m-color-help) 75%, black);
167
- }
168
-
169
- .m-button--danger {
170
- --m-button-bg: var(--m-color-danger);
171
- --m-button-fg: var(--m-color-on-emphasis);
172
- --m-button-border: var(--m-color-danger);
173
- --m-button-hover-bg: color-mix(in srgb, var(--m-color-danger) 85%, black);
174
- --m-button-hover-fg: var(--m-color-on-emphasis);
175
- --m-button-hover-border: color-mix(
176
- in srgb,
177
- var(--m-color-danger) 85%,
178
- black
179
- );
180
- --m-button-active-bg: color-mix(
181
- in srgb,
182
- var(--m-color-danger) 75%,
183
- black
184
- );
185
- }
186
-
187
- .m-button--contrast {
188
- --m-button-bg: var(--m-color-contrast);
189
- --m-button-fg: var(--m-color-contrast-fg);
190
- --m-button-border: var(--m-color-contrast);
191
- --m-button-hover-bg: var(--m-color-contrast-hover);
192
- --m-button-hover-fg: var(--m-color-contrast-fg);
193
- --m-button-hover-border: var(--m-color-contrast-hover);
194
- --m-button-active-bg: var(--m-color-contrast-active);
195
- }
196
-
197
- .m-button--outlined {
198
- --m-button-bg: transparent;
199
- --m-button-fg: var(--m-button-border);
200
- --m-button-hover-bg: color-mix(
201
- in srgb,
202
- var(--m-button-border) 10%,
203
- transparent
204
- );
205
- --m-button-hover-fg: var(--m-button-border);
206
- --m-button-hover-border: var(--m-button-border);
207
- --m-button-active-bg: color-mix(
208
- in srgb,
209
- var(--m-button-border) 16%,
210
- transparent
211
- );
212
- }
213
-
214
- .m-button--secondary.m-button--outlined {
215
- --m-button-border: var(--m-color-border);
216
- --m-button-fg: var(--m-color-text);
217
- --m-button-hover-fg: var(--m-color-text);
218
- }
219
-
220
- .m-button--text,
221
- .m-button--link {
222
- --m-button-bg: transparent;
223
- --m-button-border: transparent;
224
- --m-button-fg: var(--m-color-primary);
225
- --m-button-hover-bg: color-mix(
226
- in srgb,
227
- var(--m-color-primary) 10%,
228
- transparent
229
- );
230
- --m-button-hover-fg: var(--m-color-primary);
231
- --m-button-hover-border: transparent;
232
- --m-button-active-bg: color-mix(
233
- in srgb,
234
- var(--m-color-primary) 16%,
235
- transparent
236
- );
237
- }
238
-
239
- .m-button--secondary.m-button--text,
240
- .m-button--secondary.m-button--link {
241
- --m-button-fg: var(--m-color-text-muted);
242
- --m-button-hover-bg: color-mix(
243
- in srgb,
244
- var(--m-color-text-muted) 12%,
245
- transparent
246
- );
247
- --m-button-hover-fg: var(--m-color-text);
248
- }
249
-
250
- .m-button--success.m-button--text,
251
- .m-button--success.m-button--link,
252
- .m-button--success.m-button--outlined {
253
- --m-button-fg: var(--m-color-success);
254
- --m-button-border: var(--m-color-success);
255
- --m-button-hover-bg: color-mix(
256
- in srgb,
257
- var(--m-color-success) 10%,
258
- transparent
259
- );
260
- --m-button-hover-fg: var(--m-color-success);
261
- --m-button-hover-border: var(--m-color-success);
262
- }
263
-
264
- .m-button--info.m-button--text,
265
- .m-button--info.m-button--link,
266
- .m-button--info.m-button--outlined {
267
- --m-button-fg: var(--m-color-info);
268
- --m-button-border: var(--m-color-info);
269
- --m-button-hover-bg: color-mix(
270
- in srgb,
271
- var(--m-color-info) 10%,
272
- transparent
273
- );
274
- --m-button-hover-fg: var(--m-color-info);
275
- --m-button-hover-border: var(--m-color-info);
276
- }
277
-
278
- .m-button--warn.m-button--text,
279
- .m-button--warn.m-button--link,
280
- .m-button--warn.m-button--outlined {
281
- --m-button-fg: var(--m-color-warn);
282
- --m-button-border: var(--m-color-warn);
283
- --m-button-hover-bg: color-mix(
284
- in srgb,
285
- var(--m-color-warn) 10%,
286
- transparent
287
- );
288
- --m-button-hover-fg: var(--m-color-warn);
289
- --m-button-hover-border: var(--m-color-warn);
290
- }
291
-
292
- .m-button--help.m-button--text,
293
- .m-button--help.m-button--link,
294
- .m-button--help.m-button--outlined {
295
- --m-button-fg: var(--m-color-help);
296
- --m-button-border: var(--m-color-help);
297
- --m-button-hover-bg: color-mix(
298
- in srgb,
299
- var(--m-color-help) 10%,
300
- transparent
301
- );
302
- --m-button-hover-fg: var(--m-color-help);
303
- --m-button-hover-border: var(--m-color-help);
304
- }
305
-
306
- .m-button--danger.m-button--text,
307
- .m-button--danger.m-button--link,
308
- .m-button--danger.m-button--outlined {
309
- --m-button-fg: var(--m-color-danger);
310
- --m-button-border: var(--m-color-danger);
311
- --m-button-hover-bg: color-mix(
312
- in srgb,
313
- var(--m-color-danger) 10%,
314
- transparent
315
- );
316
- --m-button-hover-fg: var(--m-color-danger);
317
- --m-button-hover-border: var(--m-color-danger);
318
- }
319
-
320
- .m-button--contrast.m-button--text,
321
- .m-button--contrast.m-button--link,
322
- .m-button--contrast.m-button--outlined {
323
- --m-button-fg: var(--m-color-contrast);
324
- --m-button-border: var(--m-color-contrast);
325
- --m-button-hover-bg: color-mix(
326
- in srgb,
327
- var(--m-color-contrast) 10%,
328
- transparent
329
- );
330
- --m-button-hover-fg: var(--m-color-contrast);
331
- --m-button-hover-border: var(--m-color-contrast);
332
- }
333
-
334
- .m-button--plain.m-button--text,
335
- .m-button--plain.m-button--outlined,
336
- .m-button--plain.m-button--link {
337
- --m-button-fg: var(--m-color-text-muted);
338
- --m-button-border: var(--m-color-border);
339
- --m-button-hover-bg: color-mix(
340
- in srgb,
341
- var(--m-color-text-muted) 12%,
342
- transparent
343
- );
344
- --m-button-hover-fg: var(--m-color-text);
345
- --m-button-hover-border: var(--m-color-border);
346
- }
347
-
348
- .m-button--link {
349
- height: auto;
350
- min-height: 0;
351
- padding: 0;
352
- }
353
-
354
- .m-button--link:hover:not(:disabled) {
355
- text-decoration: underline;
356
- }
357
-
358
- .m-button--ghost {
359
- --m-button-bg: transparent;
360
- --m-button-fg: var(--m-button-border);
361
- --m-button-hover-bg: color-mix(
362
- in srgb,
363
- var(--m-button-border) 12%,
364
- transparent
365
- );
366
- --m-button-hover-fg: var(--m-button-border);
367
- --m-button-hover-border: var(--m-button-border);
368
- --m-button-active-bg: color-mix(
369
- in srgb,
370
- var(--m-button-border) 18%,
371
- transparent
372
- );
373
- }
374
-
375
- .m-button--secondary.m-button--ghost {
376
- --m-button-border: var(--m-color-border);
377
- --m-button-fg: var(--m-color-text);
378
- --m-button-hover-fg: var(--m-color-text);
379
- }
380
-
381
- .m-button--success.m-button--ghost {
382
- --m-button-fg: var(--m-color-success);
383
- --m-button-border: var(--m-color-success);
384
- }
385
-
386
- .m-button--info.m-button--ghost {
387
- --m-button-fg: var(--m-color-info);
388
- --m-button-border: var(--m-color-info);
389
- }
390
-
391
- .m-button--warn.m-button--ghost {
392
- --m-button-fg: var(--m-color-warn);
393
- --m-button-border: var(--m-color-warn);
394
- }
395
-
396
- .m-button--help.m-button--ghost {
397
- --m-button-fg: var(--m-color-help);
398
- --m-button-border: var(--m-color-help);
399
- }
400
-
401
- .m-button--danger.m-button--ghost {
402
- --m-button-fg: var(--m-color-danger);
403
- --m-button-border: var(--m-color-danger);
404
- }
405
-
406
- .m-button--contrast.m-button--ghost {
407
- --m-button-fg: var(--m-color-contrast);
408
- --m-button-border: var(--m-color-contrast);
409
- }
410
-
411
- .m-button--quaternary {
412
- --m-button-bg: transparent;
413
- --m-button-border: transparent;
414
- --m-button-fg: var(--m-color-text);
415
- --m-button-hover-bg: color-mix(
416
- in srgb,
417
- var(--m-color-text-muted) 10%,
418
- transparent
419
- );
420
- --m-button-hover-fg: var(--m-color-text);
421
- --m-button-hover-border: transparent;
422
- --m-button-active-bg: color-mix(
423
- in srgb,
424
- var(--m-color-text-muted) 16%,
425
- transparent
426
- );
427
- }
428
-
429
- .m-button--custom {
430
- --m-button-bg: var(--m-button-color);
431
- --m-button-fg: var(--m-color-on-emphasis);
432
- --m-button-border: var(--m-button-color);
433
- --m-button-hover-bg: color-mix(in srgb, var(--m-button-color) 85%, black);
434
- --m-button-hover-fg: var(--m-color-on-emphasis);
435
- --m-button-hover-border: color-mix(
436
- in srgb,
437
- var(--m-button-color) 85%,
438
- black
439
- );
440
- --m-button-active-bg: color-mix(
441
- in srgb,
442
- var(--m-button-color) 75%,
443
- black
444
- );
445
- }
446
-
447
- .m-button--custom.m-button--outlined,
448
- .m-button--custom.m-button--ghost,
449
- .m-button--custom.m-button--text,
450
- .m-button--custom.m-button--quaternary,
451
- .m-button--custom.m-button--link {
452
- --m-button-bg: transparent;
453
- --m-button-fg: var(--m-button-color);
454
- --m-button-border: var(--m-button-color);
455
- --m-button-hover-bg: color-mix(
456
- in srgb,
457
- var(--m-button-color) 12%,
458
- transparent
459
- );
460
- --m-button-hover-fg: var(--m-button-color);
461
- --m-button-hover-border: var(--m-button-color);
462
- }
463
-
464
- .m-button--custom.m-button--text,
465
- .m-button--custom.m-button--quaternary,
466
- .m-button--custom.m-button--link {
467
- --m-button-border: transparent;
468
- --m-button-hover-border: transparent;
469
- }
470
-
471
- .m-button-group {
472
- display: inline-flex;
473
- vertical-align: middle;
474
- }
475
-
476
- .m-button-group--fluid {
477
- display: flex;
478
- width: 100%;
479
- }
480
-
481
- .m-button-group--fluid > .m-button {
482
- flex: 1;
483
- }
484
-
485
- .m-button-group > .m-button {
486
- border-radius: 0;
487
- margin: 0;
488
- }
489
-
490
- .m-button-group > .m-button + .m-button {
491
- margin-left: -1px;
492
- }
493
-
494
- .m-button-group > .m-button:first-child {
495
- border-top-left-radius: var(--m-radius-md);
496
- border-bottom-left-radius: var(--m-radius-md);
497
- }
498
-
499
- .m-button-group > .m-button:last-child {
500
- border-top-right-radius: var(--m-radius-md);
501
- border-bottom-right-radius: var(--m-radius-md);
502
- }
503
-
504
- .m-button--raised {
505
- box-shadow: 0 0.25rem 0.75rem
506
- color-mix(in srgb, var(--m-color-text) 14%, transparent);
507
- }
508
-
509
- .m-button--rounded {
510
- border-radius: var(--m-radius-full);
511
- }
512
-
513
- .m-button--icon-only {
514
- gap: 0;
515
- min-width: var(--m-control-height-medium);
516
- padding: 0;
517
- width: var(--m-control-height-medium);
518
- }
519
-
520
- .m-button--icon-only.m-button--small {
521
- min-width: var(--m-control-height-small);
522
- width: var(--m-control-height-small);
523
- }
524
-
525
- .m-button--icon-only.m-button--large {
526
- min-width: var(--m-control-height-large);
527
- width: var(--m-control-height-large);
528
- }
529
-
530
- .m-button--icon-right {
531
- flex-direction: row-reverse;
532
- }
533
-
534
- .m-button--icon-top {
535
- flex-direction: column;
536
- min-height: var(--m-button-icon-stack-min-height);
537
- padding-block: var(--m-space-2);
538
- }
539
-
540
- .m-button--icon-bottom {
541
- flex-direction: column-reverse;
542
- min-height: var(--m-button-icon-stack-min-height);
543
- padding-block: var(--m-space-2);
544
- }
545
-
546
- .m-button--fluid {
547
- display: flex;
548
- width: 100%;
549
- }
550
-
551
- .m-button--small {
552
- --m-button-icon-size: 0.875rem;
553
- font-size: var(--m-control-font-small);
554
- min-height: var(--m-control-height-small);
555
- padding: 0 var(--m-button-padding-x-small);
556
- }
557
-
558
- .m-button--large {
559
- --m-button-icon-size: 1.25rem;
560
- font-size: var(--m-control-font-large);
561
- min-height: var(--m-control-height-large);
562
- padding: 0 var(--m-button-padding-x-large);
563
- }
564
-
565
- .m-button__icon,
566
- .m-button__label {
567
- align-items: center;
568
- display: inline-flex;
569
- justify-content: center;
570
- }
571
-
572
- .m-button__icon {
573
- flex: 0 0 auto;
574
- width: var(--m-button-icon-size);
575
- height: var(--m-button-icon-size);
576
- line-height: 0;
577
- }
578
-
579
- .m-button__icon :is(.m-icon, .m-button__icon-graphic, svg) {
580
- display: block;
581
- flex-shrink: 0;
582
- width: 100%;
583
- height: 100%;
584
- }
585
-
586
- .m-button__icon .m-icon {
587
- max-width: 100%;
588
- max-height: 100%;
589
- }
590
-
591
- .m-button__badge {
592
- align-items: center;
593
- background: var(--m-color-contrast);
594
- border-radius: var(--m-radius-full);
595
- color: var(--m-color-contrast-fg);
596
- display: inline-flex;
597
- font-size: var(--m-font-size-xs);
598
- font-weight: 700;
599
- justify-content: center;
600
- line-height: 1;
601
- margin-inline-start: var(--m-space-1);
602
- min-width: var(--m-button-badge-min-width);
603
- padding: var(--m-space-1) var(--m-space-2);
604
- }
605
-
606
- .m-button__badge--secondary {
607
- background: color-mix(
608
- in srgb,
609
- var(--m-color-text-muted) 25%,
610
- var(--m-color-surface)
611
- );
612
- color: var(--m-color-text);
613
- }
614
-
615
- .m-button__badge--success {
616
- background: var(--m-color-success);
617
- color: var(--m-color-on-emphasis);
618
- }
619
-
620
- .m-button__badge--info {
621
- background: var(--m-color-info);
622
- color: var(--m-color-on-emphasis);
623
- }
624
-
625
- .m-button__badge--warn {
626
- background: var(--m-color-warn);
627
- color: var(--m-color-on-emphasis);
628
- }
629
-
630
- .m-button__badge--danger {
631
- background: var(--m-color-danger);
632
- color: var(--m-color-on-emphasis);
633
- }
634
-
635
- .m-button__badge--contrast {
636
- background: var(--m-color-contrast);
637
- color: var(--m-color-contrast-fg);
638
- }
639
-
640
- .m-button__spinner {
641
- animation: wk-button-spin var(--m-motion-spin-fast) linear infinite;
642
- border: 2px solid currentColor;
643
- border-right-color: transparent;
644
- border-radius: var(--m-radius-full);
645
- height: var(--m-button-spinner-size);
646
- width: var(--m-button-spinner-size);
647
- }
648
-
649
- @keyframes wk-button-spin {
650
- to {
651
- transform: rotate(360deg);
652
- }
653
- }
1
+ .m-button {
2
+ --m-button-padding-x-small: var(--m-control-padding-x-small);
3
+ --m-button-padding-x-medium: calc(
4
+ var(--m-control-padding-x-medium) + var(--m-space-1)
5
+ );
6
+ --m-button-padding-x-large: calc(
7
+ var(--m-control-padding-x-large) + var(--m-space-1)
8
+ );
9
+ --m-button-icon-stack-min-height: 3.25rem;
10
+ --m-button-badge-min-width: 1.15rem;
11
+ --m-button-spinner-size: 0.875rem;
12
+ --m-button-icon-size: 1rem;
13
+ --m-button-bg: var(--m-color-primary);
14
+ --m-button-fg: var(--m-color-on-emphasis);
15
+ --m-button-border: var(--m-color-primary);
16
+ --m-button-hover-bg: var(--m-color-primary-hover);
17
+ --m-button-hover-fg: var(--m-color-on-emphasis);
18
+ --m-button-hover-border: var(--m-color-primary-hover);
19
+ --m-button-active-bg: color-mix(
20
+ in srgb,
21
+ var(--m-color-primary) 82%,
22
+ black
23
+ );
24
+ align-items: center;
25
+ background: var(--m-button-bg);
26
+ border: var(--m-border-width) solid var(--m-button-border);
27
+ border-radius: var(--m-radius-control);
28
+ color: var(--m-button-fg);
29
+ cursor: pointer;
30
+ display: inline-flex;
31
+ flex-direction: row;
32
+ font-size: var(--m-control-font-medium);
33
+ font-weight: 600;
34
+ gap: var(--m-space-2);
35
+ justify-content: center;
36
+ line-height: 1;
37
+ min-height: var(--m-control-height-medium);
38
+ padding: 0 var(--m-button-padding-x-medium);
39
+ position: relative;
40
+ transition:
41
+ background-color var(--m-motion-fast) var(--m-motion-ease),
42
+ border-color var(--m-motion-fast) var(--m-motion-ease),
43
+ color var(--m-motion-fast) var(--m-motion-ease),
44
+ box-shadow var(--m-motion-fast) var(--m-motion-ease);
45
+ vertical-align: middle;
46
+ white-space: nowrap;
47
+ }
48
+
49
+ .m-button:hover:not(:disabled) {
50
+ background: var(--m-button-hover-bg);
51
+ border-color: var(--m-button-hover-border);
52
+ color: var(--m-button-hover-fg);
53
+ }
54
+
55
+ .m-button:active:not(:disabled) {
56
+ background: var(--m-button-active-bg);
57
+ }
58
+
59
+ /* Naive-style focus: soft glow, not outline-offset ring */
60
+ .m-button:focus {
61
+ outline: none;
62
+ }
63
+
64
+ .m-button:focus-visible {
65
+ box-shadow: var(--m-focus-shadow);
66
+ outline: none;
67
+ }
68
+
69
+ .m-button--primary {
70
+ --m-button-bg: var(--m-color-primary);
71
+ --m-button-fg: var(--m-color-on-emphasis);
72
+ --m-button-border: var(--m-color-primary);
73
+ --m-button-hover-bg: var(--m-color-primary-hover);
74
+ --m-button-hover-fg: var(--m-color-on-emphasis);
75
+ --m-button-hover-border: var(--m-color-primary-hover);
76
+ --m-button-active-bg: color-mix(
77
+ in srgb,
78
+ var(--m-color-primary) 82%,
79
+ black
80
+ );
81
+ }
82
+
83
+ .m-button--secondary {
84
+ --m-button-bg: color-mix(
85
+ in srgb,
86
+ var(--m-color-text-muted) 16%,
87
+ var(--m-color-surface)
88
+ );
89
+ --m-button-fg: var(--m-color-text);
90
+ --m-button-border: transparent;
91
+ --m-button-hover-bg: color-mix(
92
+ in srgb,
93
+ var(--m-color-text-muted) 24%,
94
+ var(--m-color-surface)
95
+ );
96
+ --m-button-hover-fg: var(--m-color-text);
97
+ --m-button-hover-border: transparent;
98
+ --m-button-active-bg: color-mix(
99
+ in srgb,
100
+ var(--m-color-text-muted) 32%,
101
+ var(--m-color-surface)
102
+ );
103
+ }
104
+
105
+ .m-button--success {
106
+ --m-button-bg: var(--m-color-success);
107
+ --m-button-fg: var(--m-color-on-emphasis);
108
+ --m-button-border: var(--m-color-success);
109
+ --m-button-hover-bg: color-mix(
110
+ in srgb,
111
+ var(--m-color-success) 85%,
112
+ black
113
+ );
114
+ --m-button-hover-fg: var(--m-color-on-emphasis);
115
+ --m-button-hover-border: color-mix(
116
+ in srgb,
117
+ var(--m-color-success) 85%,
118
+ black
119
+ );
120
+ --m-button-active-bg: color-mix(
121
+ in srgb,
122
+ var(--m-color-success) 75%,
123
+ black
124
+ );
125
+ }
126
+
127
+ .m-button--info {
128
+ --m-button-bg: var(--m-color-info);
129
+ --m-button-fg: var(--m-color-on-emphasis);
130
+ --m-button-border: var(--m-color-info);
131
+ --m-button-hover-bg: color-mix(in srgb, var(--m-color-info) 85%, black);
132
+ --m-button-hover-fg: var(--m-color-on-emphasis);
133
+ --m-button-hover-border: color-mix(
134
+ in srgb,
135
+ var(--m-color-info) 85%,
136
+ black
137
+ );
138
+ --m-button-active-bg: color-mix(in srgb, var(--m-color-info) 75%, black);
139
+ }
140
+
141
+ .m-button--warn {
142
+ --m-button-bg: var(--m-color-warn);
143
+ --m-button-fg: var(--m-color-on-emphasis);
144
+ --m-button-border: var(--m-color-warn);
145
+ --m-button-hover-bg: color-mix(in srgb, var(--m-color-warn) 85%, black);
146
+ --m-button-hover-fg: var(--m-color-on-emphasis);
147
+ --m-button-hover-border: color-mix(
148
+ in srgb,
149
+ var(--m-color-warn) 85%,
150
+ black
151
+ );
152
+ --m-button-active-bg: color-mix(in srgb, var(--m-color-warn) 75%, black);
153
+ }
154
+
155
+ .m-button--help {
156
+ --m-button-bg: var(--m-color-help);
157
+ --m-button-fg: var(--m-color-on-emphasis);
158
+ --m-button-border: var(--m-color-help);
159
+ --m-button-hover-bg: color-mix(in srgb, var(--m-color-help) 85%, black);
160
+ --m-button-hover-fg: var(--m-color-on-emphasis);
161
+ --m-button-hover-border: color-mix(
162
+ in srgb,
163
+ var(--m-color-help) 85%,
164
+ black
165
+ );
166
+ --m-button-active-bg: color-mix(in srgb, var(--m-color-help) 75%, black);
167
+ }
168
+
169
+ .m-button--danger {
170
+ --m-button-bg: var(--m-color-danger);
171
+ --m-button-fg: var(--m-color-on-emphasis);
172
+ --m-button-border: var(--m-color-danger);
173
+ --m-button-hover-bg: color-mix(in srgb, var(--m-color-danger) 85%, black);
174
+ --m-button-hover-fg: var(--m-color-on-emphasis);
175
+ --m-button-hover-border: color-mix(
176
+ in srgb,
177
+ var(--m-color-danger) 85%,
178
+ black
179
+ );
180
+ --m-button-active-bg: color-mix(
181
+ in srgb,
182
+ var(--m-color-danger) 75%,
183
+ black
184
+ );
185
+ }
186
+
187
+ .m-button--contrast {
188
+ --m-button-bg: var(--m-color-contrast);
189
+ --m-button-fg: var(--m-color-contrast-fg);
190
+ --m-button-border: var(--m-color-contrast);
191
+ --m-button-hover-bg: var(--m-color-contrast-hover);
192
+ --m-button-hover-fg: var(--m-color-contrast-fg);
193
+ --m-button-hover-border: var(--m-color-contrast-hover);
194
+ --m-button-active-bg: var(--m-color-contrast-active);
195
+ }
196
+
197
+ .m-button--outlined {
198
+ --m-button-bg: transparent;
199
+ --m-button-fg: var(--m-button-border);
200
+ --m-button-hover-bg: color-mix(
201
+ in srgb,
202
+ var(--m-button-border) 10%,
203
+ transparent
204
+ );
205
+ --m-button-hover-fg: var(--m-button-border);
206
+ --m-button-hover-border: var(--m-button-border);
207
+ --m-button-active-bg: color-mix(
208
+ in srgb,
209
+ var(--m-button-border) 16%,
210
+ transparent
211
+ );
212
+ }
213
+
214
+ .m-button--secondary.m-button--outlined {
215
+ --m-button-border: var(--m-color-border);
216
+ --m-button-fg: var(--m-color-text);
217
+ --m-button-hover-fg: var(--m-color-text);
218
+ }
219
+
220
+ .m-button--text,
221
+ .m-button--link {
222
+ --m-button-bg: transparent;
223
+ --m-button-border: transparent;
224
+ --m-button-fg: var(--m-color-primary);
225
+ --m-button-hover-bg: color-mix(
226
+ in srgb,
227
+ var(--m-color-primary) 10%,
228
+ transparent
229
+ );
230
+ --m-button-hover-fg: var(--m-color-primary);
231
+ --m-button-hover-border: transparent;
232
+ --m-button-active-bg: color-mix(
233
+ in srgb,
234
+ var(--m-color-primary) 16%,
235
+ transparent
236
+ );
237
+ }
238
+
239
+ .m-button--secondary.m-button--text,
240
+ .m-button--secondary.m-button--link {
241
+ --m-button-fg: var(--m-color-text-muted);
242
+ --m-button-hover-bg: color-mix(
243
+ in srgb,
244
+ var(--m-color-text-muted) 12%,
245
+ transparent
246
+ );
247
+ --m-button-hover-fg: var(--m-color-text);
248
+ }
249
+
250
+ .m-button--success.m-button--text,
251
+ .m-button--success.m-button--link,
252
+ .m-button--success.m-button--outlined {
253
+ --m-button-fg: var(--m-color-success);
254
+ --m-button-border: var(--m-color-success);
255
+ --m-button-hover-bg: color-mix(
256
+ in srgb,
257
+ var(--m-color-success) 10%,
258
+ transparent
259
+ );
260
+ --m-button-hover-fg: var(--m-color-success);
261
+ --m-button-hover-border: var(--m-color-success);
262
+ }
263
+
264
+ .m-button--info.m-button--text,
265
+ .m-button--info.m-button--link,
266
+ .m-button--info.m-button--outlined {
267
+ --m-button-fg: var(--m-color-info);
268
+ --m-button-border: var(--m-color-info);
269
+ --m-button-hover-bg: color-mix(
270
+ in srgb,
271
+ var(--m-color-info) 10%,
272
+ transparent
273
+ );
274
+ --m-button-hover-fg: var(--m-color-info);
275
+ --m-button-hover-border: var(--m-color-info);
276
+ }
277
+
278
+ .m-button--warn.m-button--text,
279
+ .m-button--warn.m-button--link,
280
+ .m-button--warn.m-button--outlined {
281
+ --m-button-fg: var(--m-color-warn);
282
+ --m-button-border: var(--m-color-warn);
283
+ --m-button-hover-bg: color-mix(
284
+ in srgb,
285
+ var(--m-color-warn) 10%,
286
+ transparent
287
+ );
288
+ --m-button-hover-fg: var(--m-color-warn);
289
+ --m-button-hover-border: var(--m-color-warn);
290
+ }
291
+
292
+ .m-button--help.m-button--text,
293
+ .m-button--help.m-button--link,
294
+ .m-button--help.m-button--outlined {
295
+ --m-button-fg: var(--m-color-help);
296
+ --m-button-border: var(--m-color-help);
297
+ --m-button-hover-bg: color-mix(
298
+ in srgb,
299
+ var(--m-color-help) 10%,
300
+ transparent
301
+ );
302
+ --m-button-hover-fg: var(--m-color-help);
303
+ --m-button-hover-border: var(--m-color-help);
304
+ }
305
+
306
+ .m-button--danger.m-button--text,
307
+ .m-button--danger.m-button--link,
308
+ .m-button--danger.m-button--outlined {
309
+ --m-button-fg: var(--m-color-danger);
310
+ --m-button-border: var(--m-color-danger);
311
+ --m-button-hover-bg: color-mix(
312
+ in srgb,
313
+ var(--m-color-danger) 10%,
314
+ transparent
315
+ );
316
+ --m-button-hover-fg: var(--m-color-danger);
317
+ --m-button-hover-border: var(--m-color-danger);
318
+ }
319
+
320
+ .m-button--contrast.m-button--text,
321
+ .m-button--contrast.m-button--link,
322
+ .m-button--contrast.m-button--outlined {
323
+ --m-button-fg: var(--m-color-contrast);
324
+ --m-button-border: var(--m-color-contrast);
325
+ --m-button-hover-bg: color-mix(
326
+ in srgb,
327
+ var(--m-color-contrast) 10%,
328
+ transparent
329
+ );
330
+ --m-button-hover-fg: var(--m-color-contrast);
331
+ --m-button-hover-border: var(--m-color-contrast);
332
+ }
333
+
334
+ .m-button--plain.m-button--text,
335
+ .m-button--plain.m-button--outlined,
336
+ .m-button--plain.m-button--link {
337
+ --m-button-fg: var(--m-color-text-muted);
338
+ --m-button-border: var(--m-color-border);
339
+ --m-button-hover-bg: color-mix(
340
+ in srgb,
341
+ var(--m-color-text-muted) 12%,
342
+ transparent
343
+ );
344
+ --m-button-hover-fg: var(--m-color-text);
345
+ --m-button-hover-border: var(--m-color-border);
346
+ }
347
+
348
+ .m-button--link {
349
+ height: auto;
350
+ min-height: 0;
351
+ padding: 0;
352
+ }
353
+
354
+ .m-button--link:hover:not(:disabled) {
355
+ text-decoration: underline;
356
+ }
357
+
358
+ .m-button--ghost {
359
+ --m-button-bg: transparent;
360
+ --m-button-fg: var(--m-button-border);
361
+ --m-button-hover-bg: color-mix(
362
+ in srgb,
363
+ var(--m-button-border) 12%,
364
+ transparent
365
+ );
366
+ --m-button-hover-fg: var(--m-button-border);
367
+ --m-button-hover-border: var(--m-button-border);
368
+ --m-button-active-bg: color-mix(
369
+ in srgb,
370
+ var(--m-button-border) 18%,
371
+ transparent
372
+ );
373
+ }
374
+
375
+ .m-button--secondary.m-button--ghost {
376
+ --m-button-border: var(--m-color-border);
377
+ --m-button-fg: var(--m-color-text);
378
+ --m-button-hover-fg: var(--m-color-text);
379
+ }
380
+
381
+ .m-button--success.m-button--ghost {
382
+ --m-button-fg: var(--m-color-success);
383
+ --m-button-border: var(--m-color-success);
384
+ }
385
+
386
+ .m-button--info.m-button--ghost {
387
+ --m-button-fg: var(--m-color-info);
388
+ --m-button-border: var(--m-color-info);
389
+ }
390
+
391
+ .m-button--warn.m-button--ghost {
392
+ --m-button-fg: var(--m-color-warn);
393
+ --m-button-border: var(--m-color-warn);
394
+ }
395
+
396
+ .m-button--help.m-button--ghost {
397
+ --m-button-fg: var(--m-color-help);
398
+ --m-button-border: var(--m-color-help);
399
+ }
400
+
401
+ .m-button--danger.m-button--ghost {
402
+ --m-button-fg: var(--m-color-danger);
403
+ --m-button-border: var(--m-color-danger);
404
+ }
405
+
406
+ .m-button--contrast.m-button--ghost {
407
+ --m-button-fg: var(--m-color-contrast);
408
+ --m-button-border: var(--m-color-contrast);
409
+ }
410
+
411
+ .m-button--quaternary {
412
+ --m-button-bg: transparent;
413
+ --m-button-border: transparent;
414
+ --m-button-fg: var(--m-color-text);
415
+ --m-button-hover-bg: color-mix(
416
+ in srgb,
417
+ var(--m-color-text-muted) 10%,
418
+ transparent
419
+ );
420
+ --m-button-hover-fg: var(--m-color-text);
421
+ --m-button-hover-border: transparent;
422
+ --m-button-active-bg: color-mix(
423
+ in srgb,
424
+ var(--m-color-text-muted) 16%,
425
+ transparent
426
+ );
427
+ }
428
+
429
+ .m-button--custom {
430
+ --m-button-bg: var(--m-button-color);
431
+ --m-button-fg: var(--m-color-on-emphasis);
432
+ --m-button-border: var(--m-button-color);
433
+ --m-button-hover-bg: color-mix(in srgb, var(--m-button-color) 85%, black);
434
+ --m-button-hover-fg: var(--m-color-on-emphasis);
435
+ --m-button-hover-border: color-mix(
436
+ in srgb,
437
+ var(--m-button-color) 85%,
438
+ black
439
+ );
440
+ --m-button-active-bg: color-mix(
441
+ in srgb,
442
+ var(--m-button-color) 75%,
443
+ black
444
+ );
445
+ }
446
+
447
+ .m-button--custom.m-button--outlined,
448
+ .m-button--custom.m-button--ghost,
449
+ .m-button--custom.m-button--text,
450
+ .m-button--custom.m-button--quaternary,
451
+ .m-button--custom.m-button--link {
452
+ --m-button-bg: transparent;
453
+ --m-button-fg: var(--m-button-color);
454
+ --m-button-border: var(--m-button-color);
455
+ --m-button-hover-bg: color-mix(
456
+ in srgb,
457
+ var(--m-button-color) 12%,
458
+ transparent
459
+ );
460
+ --m-button-hover-fg: var(--m-button-color);
461
+ --m-button-hover-border: var(--m-button-color);
462
+ }
463
+
464
+ .m-button--custom.m-button--text,
465
+ .m-button--custom.m-button--quaternary,
466
+ .m-button--custom.m-button--link {
467
+ --m-button-border: transparent;
468
+ --m-button-hover-border: transparent;
469
+ }
470
+
471
+ .m-button-group {
472
+ display: inline-flex;
473
+ vertical-align: middle;
474
+ }
475
+
476
+ .m-button-group--fluid {
477
+ display: flex;
478
+ width: 100%;
479
+ }
480
+
481
+ .m-button-group--fluid > .m-button {
482
+ flex: 1;
483
+ }
484
+
485
+ .m-button-group > .m-button {
486
+ border-radius: 0;
487
+ margin: 0;
488
+ }
489
+
490
+ .m-button-group > .m-button + .m-button {
491
+ margin-left: -1px;
492
+ }
493
+
494
+ .m-button-group > .m-button:first-child {
495
+ border-top-left-radius: var(--m-radius-md);
496
+ border-bottom-left-radius: var(--m-radius-md);
497
+ }
498
+
499
+ .m-button-group > .m-button:last-child {
500
+ border-top-right-radius: var(--m-radius-md);
501
+ border-bottom-right-radius: var(--m-radius-md);
502
+ }
503
+
504
+ .m-button--raised {
505
+ box-shadow: 0 0.25rem 0.75rem
506
+ color-mix(in srgb, var(--m-color-text) 14%, transparent);
507
+ }
508
+
509
+ .m-button--rounded {
510
+ border-radius: var(--m-radius-full);
511
+ }
512
+
513
+ .m-button--icon-only {
514
+ gap: 0;
515
+ min-width: var(--m-control-height-medium);
516
+ padding: 0;
517
+ width: var(--m-control-height-medium);
518
+ }
519
+
520
+ .m-button--icon-only.m-button--small {
521
+ min-width: var(--m-control-height-small);
522
+ width: var(--m-control-height-small);
523
+ }
524
+
525
+ .m-button--icon-only.m-button--large {
526
+ min-width: var(--m-control-height-large);
527
+ width: var(--m-control-height-large);
528
+ }
529
+
530
+ .m-button--icon-right {
531
+ flex-direction: row-reverse;
532
+ }
533
+
534
+ .m-button--icon-top {
535
+ flex-direction: column;
536
+ min-height: var(--m-button-icon-stack-min-height);
537
+ padding-block: var(--m-space-2);
538
+ }
539
+
540
+ .m-button--icon-bottom {
541
+ flex-direction: column-reverse;
542
+ min-height: var(--m-button-icon-stack-min-height);
543
+ padding-block: var(--m-space-2);
544
+ }
545
+
546
+ .m-button--fluid {
547
+ display: flex;
548
+ width: 100%;
549
+ }
550
+
551
+ .m-button--small {
552
+ --m-button-icon-size: 0.875rem;
553
+ font-size: var(--m-control-font-small);
554
+ min-height: var(--m-control-height-small);
555
+ padding: 0 var(--m-button-padding-x-small);
556
+ }
557
+
558
+ .m-button--large {
559
+ --m-button-icon-size: 1.25rem;
560
+ font-size: var(--m-control-font-large);
561
+ min-height: var(--m-control-height-large);
562
+ padding: 0 var(--m-button-padding-x-large);
563
+ }
564
+
565
+ .m-button__icon,
566
+ .m-button__label {
567
+ align-items: center;
568
+ display: inline-flex;
569
+ justify-content: center;
570
+ }
571
+
572
+ .m-button__icon {
573
+ flex: 0 0 auto;
574
+ width: var(--m-button-icon-size);
575
+ height: var(--m-button-icon-size);
576
+ line-height: 0;
577
+ }
578
+
579
+ .m-button__icon :is(.m-icon, .m-button__icon-graphic, svg) {
580
+ display: block;
581
+ flex-shrink: 0;
582
+ width: 100%;
583
+ height: 100%;
584
+ }
585
+
586
+ .m-button__icon .m-icon {
587
+ max-width: 100%;
588
+ max-height: 100%;
589
+ }
590
+
591
+ .m-button__badge {
592
+ align-items: center;
593
+ background: var(--m-color-contrast);
594
+ border-radius: var(--m-radius-full);
595
+ color: var(--m-color-contrast-fg);
596
+ display: inline-flex;
597
+ font-size: var(--m-font-size-xs);
598
+ font-weight: 700;
599
+ justify-content: center;
600
+ line-height: 1;
601
+ margin-inline-start: var(--m-space-1);
602
+ min-width: var(--m-button-badge-min-width);
603
+ padding: var(--m-space-1) var(--m-space-2);
604
+ }
605
+
606
+ .m-button__badge--secondary {
607
+ background: color-mix(
608
+ in srgb,
609
+ var(--m-color-text-muted) 25%,
610
+ var(--m-color-surface)
611
+ );
612
+ color: var(--m-color-text);
613
+ }
614
+
615
+ .m-button__badge--success {
616
+ background: var(--m-color-success);
617
+ color: var(--m-color-on-emphasis);
618
+ }
619
+
620
+ .m-button__badge--info {
621
+ background: var(--m-color-info);
622
+ color: var(--m-color-on-emphasis);
623
+ }
624
+
625
+ .m-button__badge--warn {
626
+ background: var(--m-color-warn);
627
+ color: var(--m-color-on-emphasis);
628
+ }
629
+
630
+ .m-button__badge--danger {
631
+ background: var(--m-color-danger);
632
+ color: var(--m-color-on-emphasis);
633
+ }
634
+
635
+ .m-button__badge--contrast {
636
+ background: var(--m-color-contrast);
637
+ color: var(--m-color-contrast-fg);
638
+ }
639
+
640
+ .m-button__spinner {
641
+ animation: m-button-spin var(--m-motion-spin-fast) linear infinite;
642
+ border: 2px solid currentColor;
643
+ border-right-color: transparent;
644
+ border-radius: var(--m-radius-full);
645
+ height: var(--m-button-spinner-size);
646
+ width: var(--m-button-spinner-size);
647
+ }
648
+
649
+ @keyframes m-button-spin {
650
+ to {
651
+ transform: rotate(360deg);
652
+ }
653
+ }