@well-insight/ui 0.1.9 → 0.1.11

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 (462) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/README.md +3 -3
  3. package/README.zh-CN.md +3 -3
  4. package/dist/{Button-BZzV1X-d.js → Button-tnrMSwNg.js} +4 -8
  5. package/dist/{Checkbox-BtgWgkHI.js → Checkbox-CoovLjt_.js} +6 -6
  6. package/dist/{Icon-B6gOD07E.js → Icon-DHGs8l-M.js} +27 -1
  7. package/dist/Pagination-UvgyUKB1.js +155 -0
  8. package/dist/{ProgressSpinner-YThgaSzb.js → ProgressSpinner-BTijCc7l.js} +1 -1
  9. package/dist/accordion/style.css +42 -28
  10. package/dist/auto-complete/index.js +106 -99
  11. package/dist/auto-complete/style.css +184 -162
  12. package/dist/avatar/index.js +1 -1
  13. package/dist/avatar/style.css +106 -79
  14. package/dist/badge/style.css +150 -115
  15. package/dist/block-ui/style.css +42 -28
  16. package/dist/breadcrumb/index.js +1 -1
  17. package/dist/breadcrumb/style.css +42 -28
  18. package/dist/button/index.js +1 -1
  19. package/dist/button/style.css +609 -452
  20. package/dist/card/style.css +42 -28
  21. package/dist/carousel/index.js +61 -54
  22. package/dist/carousel/style.css +116 -62
  23. package/dist/carousel/style.js +1 -0
  24. package/dist/cascade-select/index.js +143 -76
  25. package/dist/cascade-select/style.css +193 -110
  26. package/dist/cascade-select/style.js +1 -0
  27. package/dist/checkbox/index.js +1 -1
  28. package/dist/checkbox/style.css +42 -28
  29. package/dist/chip/index.js +32 -29
  30. package/dist/chip/style.css +121 -100
  31. package/dist/command-menu/index.js +2 -2
  32. package/dist/command-menu/style.css +101 -85
  33. package/dist/components/Accordion/Accordion.vue.d.ts.map +1 -1
  34. package/dist/components/AutoComplete/AutoComplete.vue.d.ts +2 -0
  35. package/dist/components/AutoComplete/AutoComplete.vue.d.ts.map +1 -1
  36. package/dist/components/AutoComplete/styles.css +142 -134
  37. package/dist/components/AutoComplete/types.d.ts +1 -0
  38. package/dist/components/AutoComplete/types.d.ts.map +1 -1
  39. package/dist/components/Avatar/Avatar.vue.d.ts.map +1 -1
  40. package/dist/components/Avatar/AvatarGroup.vue.d.ts.map +1 -1
  41. package/dist/components/Avatar/styles.css +64 -51
  42. package/dist/components/Badge/Badge.vue.d.ts.map +1 -1
  43. package/dist/components/Badge/styles.css +108 -87
  44. package/dist/components/BlockUI/BlockUI.vue.d.ts.map +1 -1
  45. package/dist/components/Breadcrumb/Breadcrumb.vue.d.ts.map +1 -1
  46. package/dist/components/Button/Button.vue.d.ts +1 -2
  47. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  48. package/dist/components/Button/ButtonGroup.vue.d.ts.map +1 -1
  49. package/dist/components/Button/styles.css +567 -424
  50. package/dist/components/Button/types.d.ts +0 -2
  51. package/dist/components/Button/types.d.ts.map +1 -1
  52. package/dist/components/Card/Card.vue.d.ts.map +1 -1
  53. package/dist/components/Carousel/Carousel.vue.d.ts +2 -2
  54. package/dist/components/Carousel/Carousel.vue.d.ts.map +1 -1
  55. package/dist/components/Carousel/styles.css +36 -35
  56. package/dist/components/CascadeSelect/CascadeSelect.vue.d.ts +6 -0
  57. package/dist/components/CascadeSelect/CascadeSelect.vue.d.ts.map +1 -1
  58. package/dist/components/CascadeSelect/styles.css +137 -107
  59. package/dist/components/CascadeSelect/types.d.ts +11 -0
  60. package/dist/components/CascadeSelect/types.d.ts.map +1 -1
  61. package/dist/components/Checkbox/Checkbox.vue.d.ts.map +1 -1
  62. package/dist/components/Checkbox/CheckboxGroup.vue.d.ts.map +1 -1
  63. package/dist/components/Chip/Chip.vue.d.ts.map +1 -1
  64. package/dist/components/Chip/styles.css +79 -72
  65. package/dist/components/CommandMenu/CommandMenu.vue.d.ts.map +1 -1
  66. package/dist/components/CommandMenu/styles.css +59 -57
  67. package/dist/components/ConfigProvider/ConfigProvider.vue.d.ts.map +1 -1
  68. package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts.map +1 -1
  69. package/dist/components/ConfirmDialog/styles.css +17 -16
  70. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts.map +1 -1
  71. package/dist/components/ConfirmPopup/styles.css +27 -26
  72. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  73. package/dist/components/ContextMenu/ContextMenuNodes.vue.d.ts.map +1 -1
  74. package/dist/components/ContextMenu/index.d.ts +1 -1
  75. package/dist/components/ContextMenu/index.d.ts.map +1 -1
  76. package/dist/components/ContextMenu/styles.css +43 -37
  77. package/dist/components/ContextMenu/useContextMenu.d.ts.map +1 -1
  78. package/dist/components/DataView/DataView.vue.d.ts.map +1 -1
  79. package/dist/components/DatePicker/DatePicker.vue.d.ts +2 -0
  80. package/dist/components/DatePicker/DatePicker.vue.d.ts.map +1 -1
  81. package/dist/components/DatePicker/styles.css +200 -151
  82. package/dist/components/DatePicker/types.d.ts +1 -0
  83. package/dist/components/DatePicker/types.d.ts.map +1 -1
  84. package/dist/components/Dialog/Dialog.vue.d.ts +3 -3
  85. package/dist/components/Dialog/Dialog.vue.d.ts.map +1 -1
  86. package/dist/components/Dialog/styles.css +155 -150
  87. package/dist/components/Divider/Divider.vue.d.ts.map +1 -1
  88. package/dist/components/Divider/types.d.ts +0 -5
  89. package/dist/components/Divider/types.d.ts.map +1 -1
  90. package/dist/components/Dock/Dock.vue.d.ts.map +1 -1
  91. package/dist/components/Dock/styles.css +37 -32
  92. package/dist/components/Drawer/Drawer.vue.d.ts +2 -2
  93. package/dist/components/Drawer/Drawer.vue.d.ts.map +1 -1
  94. package/dist/components/Drawer/styles.css +82 -80
  95. package/dist/components/Dropdown/Dropdown.vue.d.ts.map +1 -1
  96. package/dist/components/Dropdown/DropdownNodes.vue.d.ts +2 -2
  97. package/dist/components/Dropdown/DropdownNodes.vue.d.ts.map +1 -1
  98. package/dist/components/Dropdown/styles.css +58 -57
  99. package/dist/components/Fieldset/Fieldset.vue.d.ts +4 -4
  100. package/dist/components/Fieldset/Fieldset.vue.d.ts.map +1 -1
  101. package/dist/components/FileUpload/FileUpload.vue.d.ts +2 -2
  102. package/dist/components/FileUpload/FileUpload.vue.d.ts.map +1 -1
  103. package/dist/components/FileUpload/styles.css +238 -221
  104. package/dist/components/Flex/Flex.vue.d.ts.map +1 -1
  105. package/dist/components/FloatLabel/FloatLabel.vue.d.ts.map +1 -1
  106. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  107. package/dist/components/Form/FormItem.vue.d.ts.map +1 -1
  108. package/dist/components/Form/index.d.ts +2 -2
  109. package/dist/components/Form/index.d.ts.map +1 -1
  110. package/dist/components/Form/styles.css +46 -44
  111. package/dist/components/Gallery/Gallery.vue.d.ts.map +1 -1
  112. package/dist/components/Gallery/styles.css +42 -39
  113. package/dist/components/Grid/Grid.vue.d.ts.map +1 -1
  114. package/dist/components/Grid/GridItem.vue.d.ts.map +1 -1
  115. package/dist/components/Icon/Icon.vue.d.ts.map +1 -1
  116. package/dist/components/Icon/icons.d.ts +32 -0
  117. package/dist/components/Icon/icons.d.ts.map +1 -1
  118. package/dist/components/IconField/IconField.vue.d.ts.map +1 -1
  119. package/dist/components/Inplace/Inplace.vue.d.ts.map +1 -1
  120. package/dist/components/Input/Input.vue.d.ts +0 -1
  121. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  122. package/dist/components/Input/styles.css +196 -191
  123. package/dist/components/Input/types.d.ts +1 -3
  124. package/dist/components/Input/types.d.ts.map +1 -1
  125. package/dist/components/InputColor/InputColor.vue.d.ts.map +1 -1
  126. package/dist/components/InputColor/styles.css +50 -48
  127. package/dist/components/InputNumber/InputNumber.vue.d.ts.map +1 -1
  128. package/dist/components/InputNumber/styles.css +90 -80
  129. package/dist/components/InputOtp/InputOtp.vue.d.ts.map +1 -1
  130. package/dist/components/InputPassword/InputPassword.vue.d.ts +4 -4
  131. package/dist/components/InputPassword/InputPassword.vue.d.ts.map +1 -1
  132. package/dist/components/InputPassword/styles.css +130 -117
  133. package/dist/components/InputTags/InputTags.vue.d.ts.map +1 -1
  134. package/dist/components/InputTags/styles.css +51 -43
  135. package/dist/components/Knob/Knob.vue.d.ts.map +1 -1
  136. package/dist/components/Label/Label.vue.d.ts.map +1 -1
  137. package/dist/components/Layout/Layout.vue.d.ts +1 -4
  138. package/dist/components/Layout/Layout.vue.d.ts.map +1 -1
  139. package/dist/components/Layout/LayoutContent.vue.d.ts +1 -4
  140. package/dist/components/Layout/LayoutContent.vue.d.ts.map +1 -1
  141. package/dist/components/Layout/LayoutFooter.vue.d.ts.map +1 -1
  142. package/dist/components/Layout/LayoutHeader.vue.d.ts.map +1 -1
  143. package/dist/components/Layout/LayoutSider.vue.d.ts +2 -5
  144. package/dist/components/Layout/LayoutSider.vue.d.ts.map +1 -1
  145. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts +9 -0
  146. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts.map +1 -0
  147. package/dist/components/Layout/composables/useLayoutScroll.d.ts +6 -0
  148. package/dist/components/Layout/composables/useLayoutScroll.d.ts.map +1 -0
  149. package/dist/components/Layout/composables/useLayoutSiderCollapse.d.ts +16 -0
  150. package/dist/components/Layout/composables/useLayoutSiderCollapse.d.ts.map +1 -0
  151. package/dist/components/Layout/index.d.ts +2 -2
  152. package/dist/components/Layout/index.d.ts.map +1 -1
  153. package/dist/components/Layout/styles.css +293 -271
  154. package/dist/components/Layout/types.d.ts +30 -34
  155. package/dist/components/Layout/types.d.ts.map +1 -1
  156. package/dist/components/Layout/utils.d.ts +3 -0
  157. package/dist/components/Layout/utils.d.ts.map +1 -0
  158. package/dist/components/Listbox/Listbox.vue.d.ts.map +1 -1
  159. package/dist/components/Listbox/styles.css +61 -51
  160. package/dist/components/MegaMenu/MegaMenu.vue.d.ts.map +1 -1
  161. package/dist/components/MegaMenu/styles.css +60 -58
  162. package/dist/components/Menu/Menu.vue.d.ts.map +1 -1
  163. package/dist/components/Menu/MenuNodes.vue.d.ts.map +1 -1
  164. package/dist/components/Menu/styles.css +53 -47
  165. package/dist/components/Menubar/Menubar.vue.d.ts.map +1 -1
  166. package/dist/components/Menubar/styles.css +80 -70
  167. package/dist/components/Message/Message.vue.d.ts.map +1 -1
  168. package/dist/components/Message/index.d.ts +1 -1
  169. package/dist/components/Message/index.d.ts.map +1 -1
  170. package/dist/components/Message/message.d.ts +2 -2
  171. package/dist/components/Message/message.d.ts.map +1 -1
  172. package/dist/components/Message/messageState.d.ts.map +1 -1
  173. package/dist/components/Message/styles.css +193 -143
  174. package/dist/components/Message/types.d.ts +1 -1
  175. package/dist/components/Message/types.d.ts.map +1 -1
  176. package/dist/components/MeterGroup/MeterGroup.vue.d.ts.map +1 -1
  177. package/dist/components/MeterGroup/styles.css +36 -34
  178. package/dist/components/OrderList/OrderList.vue.d.ts.map +1 -1
  179. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  180. package/dist/components/Pagination/styles.css +59 -57
  181. package/dist/components/Panel/Panel.vue.d.ts +3 -3
  182. package/dist/components/Panel/Panel.vue.d.ts.map +1 -1
  183. package/dist/components/PickList/PickList.vue.d.ts.map +1 -1
  184. package/dist/components/Popover/Popover.vue.d.ts.map +1 -1
  185. package/dist/components/Popover/styles.css +87 -45
  186. package/dist/components/ProgressBar/ProgressBar.vue.d.ts.map +1 -1
  187. package/dist/components/ProgressSpinner/ProgressSpinner.vue.d.ts.map +1 -1
  188. package/dist/components/Radio/Radio.vue.d.ts.map +1 -1
  189. package/dist/components/Radio/RadioGroup.vue.d.ts.map +1 -1
  190. package/dist/components/Rating/Rating.vue.d.ts.map +1 -1
  191. package/dist/components/Rating/styles.css +28 -23
  192. package/dist/components/ScrollTop/ScrollTop.vue.d.ts.map +1 -1
  193. package/dist/components/Scrollbar/Scrollbar.vue.d.ts.map +1 -1
  194. package/dist/components/Scrollbar/Thumb.vue.d.ts.map +1 -1
  195. package/dist/components/Scrollbar/constants.d.ts +2 -2
  196. package/dist/components/Scrollbar/constants.d.ts.map +1 -1
  197. package/dist/components/Scrollbar/styles.css +68 -59
  198. package/dist/components/Select/Select.vue.d.ts +1 -1
  199. package/dist/components/Select/Select.vue.d.ts.map +1 -1
  200. package/dist/components/Select/styles.css +184 -271
  201. package/dist/components/Select/types.d.ts +3 -3
  202. package/dist/components/Select/types.d.ts.map +1 -1
  203. package/dist/components/SelectButton/SelectButton.vue.d.ts.map +1 -1
  204. package/dist/components/SelectButton/styles.css +64 -51
  205. package/dist/components/Sidebar/Sidebar.vue.d.ts.map +1 -1
  206. package/dist/components/Sidebar/styles.css +40 -38
  207. package/dist/components/Skeleton/Skeleton.vue.d.ts.map +1 -1
  208. package/dist/components/Slider/Slider.vue.d.ts.map +1 -1
  209. package/dist/components/Slider/styles.css +111 -95
  210. package/dist/components/Slider/types.d.ts +2 -0
  211. package/dist/components/Slider/types.d.ts.map +1 -1
  212. package/dist/components/Space/Space.vue.d.ts.map +1 -1
  213. package/dist/components/SpeedDial/SpeedDial.vue.d.ts.map +1 -1
  214. package/dist/components/SplitButton/SplitButton.vue.d.ts.map +1 -1
  215. package/dist/components/SplitButton/styles.css +105 -89
  216. package/dist/components/Splitter/Splitter.vue.d.ts.map +1 -1
  217. package/dist/components/Stepper/Stepper.vue.d.ts.map +1 -1
  218. package/dist/components/Stepper/styles.css +63 -58
  219. package/dist/components/Switch/Switch.vue.d.ts.map +1 -1
  220. package/dist/components/Switch/styles.css +82 -53
  221. package/dist/components/Table/Table.vue.d.ts +9 -9
  222. package/dist/components/Table/Table.vue.d.ts.map +1 -1
  223. package/dist/components/Tabs/Tabs.vue.d.ts +3 -3
  224. package/dist/components/Tabs/Tabs.vue.d.ts.map +1 -1
  225. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  226. package/dist/components/Terminal/Terminal.vue.d.ts.map +1 -1
  227. package/dist/components/Terminal/styles.css +46 -34
  228. package/dist/components/Textarea/Textarea.vue.d.ts +0 -2
  229. package/dist/components/Textarea/Textarea.vue.d.ts.map +1 -1
  230. package/dist/components/Textarea/styles.css +68 -62
  231. package/dist/components/Textarea/types.d.ts +2 -6
  232. package/dist/components/Textarea/types.d.ts.map +1 -1
  233. package/dist/components/TieredMenu/TieredMenu.vue.d.ts.map +1 -1
  234. package/dist/components/TieredMenu/styles.css +69 -62
  235. package/dist/components/Timeline/Timeline.vue.d.ts.map +1 -1
  236. package/dist/components/Timeline/types.d.ts +1 -1
  237. package/dist/components/Timeline/types.d.ts.map +1 -1
  238. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  239. package/dist/components/Toast/index.d.ts +1 -1
  240. package/dist/components/Toast/index.d.ts.map +1 -1
  241. package/dist/components/Toast/toast.d.ts +2 -2
  242. package/dist/components/Toast/toast.d.ts.map +1 -1
  243. package/dist/components/Toast/toastState.d.ts.map +1 -1
  244. package/dist/components/Toast/types.d.ts +1 -1
  245. package/dist/components/Toast/types.d.ts.map +1 -1
  246. package/dist/components/ToggleButton/ToggleButton.vue.d.ts.map +1 -1
  247. package/dist/components/Tooltip/Tooltip.vue.d.ts.map +1 -1
  248. package/dist/components/Tree/Tree.vue.d.ts.map +1 -1
  249. package/dist/components/Tree/TreeNodeItem.vue.d.ts.map +1 -1
  250. package/dist/components/Tree/context.d.ts +2 -2
  251. package/dist/components/Tree/context.d.ts.map +1 -1
  252. package/dist/components/Tree/index.d.ts +1 -1
  253. package/dist/components/Tree/index.d.ts.map +1 -1
  254. package/dist/components/TreeSelect/TreeSelect.vue.d.ts.map +1 -1
  255. package/dist/components/TreeSelect/TreeSelectNodeItem.vue.d.ts.map +1 -1
  256. package/dist/components/TreeSelect/styles.css +149 -138
  257. package/dist/components/TreeTable/TreeTable.vue.d.ts.map +1 -1
  258. package/dist/components/TreeTable/TreeTableRow.vue.d.ts.map +1 -1
  259. package/dist/components/VirtualScroller/VirtualScroller.vue.d.ts.map +1 -1
  260. package/dist/components/VirtualScroller/index.d.ts +1 -1
  261. package/dist/components/VirtualScroller/index.d.ts.map +1 -1
  262. package/dist/{config-DWwce9jA.js → config-CTLkobga.js} +1 -0
  263. package/dist/config-provider/index.js +1 -1
  264. package/dist/config-provider/style.css +767 -605
  265. package/dist/confirm-dialog/index.js +4 -4
  266. package/dist/confirm-dialog/style.css +781 -618
  267. package/dist/confirm-popup/index.js +62 -77
  268. package/dist/confirm-popup/style.css +636 -478
  269. package/dist/context-menu/index.js +69 -61
  270. package/dist/context-menu/style.css +85 -65
  271. package/dist/data-view/index.js +1 -1
  272. package/dist/data-view/style.css +101 -85
  273. package/dist/date-picker/index.js +144 -137
  274. package/dist/date-picker/style.css +266 -164
  275. package/dist/date-picker/style.js +1 -0
  276. package/dist/dialog/index.js +76 -70
  277. package/dist/dialog/style.css +764 -602
  278. package/dist/divider/index.js +1 -2
  279. package/dist/divider/style.css +42 -28
  280. package/dist/dock/style.css +79 -60
  281. package/dist/drawer/index.js +49 -45
  282. package/dist/drawer/style.css +163 -108
  283. package/dist/drawer/style.js +1 -0
  284. package/dist/dropdown/index.js +98 -97
  285. package/dist/dropdown/style.css +100 -85
  286. package/dist/fieldset/index.js +16 -12
  287. package/dist/fieldset/style.css +81 -28
  288. package/dist/fieldset/style.js +1 -0
  289. package/dist/file-upload/index.js +2 -2
  290. package/dist/file-upload/style.css +274 -243
  291. package/dist/flex/index.js +1 -1
  292. package/dist/flex/style.css +42 -28
  293. package/dist/float-label/index.js +15 -4
  294. package/dist/float-label/style.css +42 -28
  295. package/dist/fluid/style.css +42 -28
  296. package/dist/form/index.js +1 -1
  297. package/dist/form/style.css +88 -72
  298. package/dist/gallery/index.js +41 -34
  299. package/dist/gallery/style.css +122 -66
  300. package/dist/gallery/style.js +1 -0
  301. package/dist/grid/index.js +39 -39
  302. package/dist/grid/style.css +42 -28
  303. package/dist/icon/index.js +1 -1
  304. package/dist/icon/style.css +42 -28
  305. package/dist/icon-Cg5TeFqe.js +7 -0
  306. package/dist/icon-field/style.css +42 -28
  307. package/dist/index.d.ts +174 -174
  308. package/dist/index.d.ts.map +1 -1
  309. package/dist/index.js +3433 -3241
  310. package/dist/inplace/style.css +42 -28
  311. package/dist/input/index.js +64 -66
  312. package/dist/input/style.css +275 -217
  313. package/dist/input/style.js +1 -0
  314. package/dist/input-color/index.js +3 -3
  315. package/dist/input-color/style.css +92 -76
  316. package/dist/input-group/style.css +42 -28
  317. package/dist/input-number/index.js +82 -66
  318. package/dist/input-number/style.css +170 -107
  319. package/dist/input-number/style.js +1 -0
  320. package/dist/input-otp/index.js +3 -3
  321. package/dist/input-otp/style.css +42 -28
  322. package/dist/input-password/index.js +59 -57
  323. package/dist/input-password/style.css +172 -145
  324. package/dist/input-tags/index.js +50 -46
  325. package/dist/input-tags/style.css +131 -70
  326. package/dist/input-tags/style.js +1 -0
  327. package/dist/key-CaQYVkjh.js +6 -0
  328. package/dist/knob/style.css +42 -28
  329. package/dist/label/style.css +42 -28
  330. package/dist/layout/index.js +196 -229
  331. package/dist/layout/style.css +348 -364
  332. package/dist/layout/style.js +1 -1
  333. package/dist/listbox/index.js +1 -1
  334. package/dist/listbox/style.css +103 -79
  335. package/dist/locale/en-US.d.ts.map +1 -1
  336. package/dist/locale/index.d.ts +1 -1
  337. package/dist/locale/index.d.ts.map +1 -1
  338. package/dist/locale/types.d.ts +1 -0
  339. package/dist/locale/types.d.ts.map +1 -1
  340. package/dist/locale/zh-CN.d.ts.map +1 -1
  341. package/dist/{locale-CYkJyRd1.js → locale-DxAvgqgB.js} +1 -1
  342. package/dist/mega-menu/index.js +47 -49
  343. package/dist/mega-menu/style.css +102 -86
  344. package/dist/menu/index.js +81 -76
  345. package/dist/menu/style.css +95 -75
  346. package/dist/menubar/index.js +75 -73
  347. package/dist/menubar/style.css +122 -98
  348. package/dist/message/index.js +3 -3
  349. package/dist/message/style.css +235 -171
  350. package/dist/meter-group/style.css +78 -62
  351. package/dist/order-list/index.js +2 -2
  352. package/dist/order-list/style.css +42 -28
  353. package/dist/overlayPlacement-CN1tuC95.js +51 -0
  354. package/dist/pagination/index.js +1 -1
  355. package/dist/pagination/style.css +140 -85
  356. package/dist/pagination/style.js +1 -0
  357. package/dist/panel/index.js +27 -23
  358. package/dist/panel/style.css +81 -28
  359. package/dist/panel/style.js +1 -0
  360. package/dist/pick-list/index.js +2 -2
  361. package/dist/pick-list/style.css +42 -28
  362. package/dist/popover/index.js +79 -100
  363. package/dist/popover/style.css +129 -73
  364. package/dist/progress-bar/style.css +42 -28
  365. package/dist/progress-spinner/index.js +1 -1
  366. package/dist/progress-spinner/style.css +42 -28
  367. package/dist/radio/index.js +5 -5
  368. package/dist/radio/style.css +42 -28
  369. package/dist/rating/index.js +54 -44
  370. package/dist/rating/style.css +109 -51
  371. package/dist/rating/style.js +1 -0
  372. package/dist/scroll-top/index.js +45 -41
  373. package/dist/scroll-top/style.css +81 -28
  374. package/dist/scroll-top/style.js +1 -0
  375. package/dist/scrollbar/index.js +382 -2
  376. package/dist/scrollbar/style.css +110 -87
  377. package/dist/select/index.js +149 -141
  378. package/dist/select/style.css +238 -272
  379. package/dist/select/style.js +1 -0
  380. package/dist/select-button/index.js +1 -1
  381. package/dist/select-button/style.css +106 -79
  382. package/dist/shared/Renderable.d.ts.map +1 -1
  383. package/dist/shared/componentDefaults.d.ts +5 -1
  384. package/dist/shared/componentDefaults.d.ts.map +1 -1
  385. package/dist/shared/config.d.ts.map +1 -1
  386. package/dist/shared/content.d.ts.map +1 -1
  387. package/dist/shared/menu/icon.d.ts +4 -0
  388. package/dist/shared/menu/icon.d.ts.map +1 -0
  389. package/dist/shared/menu/index.d.ts +4 -0
  390. package/dist/shared/menu/index.d.ts.map +1 -0
  391. package/dist/shared/menu/key.d.ts +4 -0
  392. package/dist/shared/menu/key.d.ts.map +1 -0
  393. package/dist/shared/menu/types.d.ts +11 -0
  394. package/dist/shared/menu/types.d.ts.map +1 -0
  395. package/dist/shared/overlayHost.d.ts.map +1 -1
  396. package/dist/shared/overlayPlacement.d.ts +12 -0
  397. package/dist/shared/overlayPlacement.d.ts.map +1 -0
  398. package/dist/shared/useModalOverlay.d.ts.map +1 -1
  399. package/dist/shared/vnode.d.ts.map +1 -1
  400. package/dist/sidebar/index.js +1 -1
  401. package/dist/sidebar/style.css +82 -66
  402. package/dist/skeleton/style.css +42 -28
  403. package/dist/slider/index.js +6 -3
  404. package/dist/slider/style.css +153 -123
  405. package/dist/space/index.js +1 -1
  406. package/dist/space/style.css +42 -28
  407. package/dist/speed-dial/index.js +55 -66
  408. package/dist/speed-dial/style.css +81 -28
  409. package/dist/speed-dial/style.js +1 -0
  410. package/dist/split-button/index.js +66 -63
  411. package/dist/split-button/style.css +763 -551
  412. package/dist/split-button/style.js +1 -0
  413. package/dist/splitter/index.js +1 -1
  414. package/dist/splitter/style.css +42 -28
  415. package/dist/stepper/style.css +105 -86
  416. package/dist/styles/base.css +4 -5
  417. package/dist/styles.css +1 -1
  418. package/dist/switch/index.js +6 -6
  419. package/dist/switch/style.css +124 -81
  420. package/dist/table/index.js +42 -36
  421. package/dist/table/style.css +101 -85
  422. package/dist/tabs/index.js +78 -65
  423. package/dist/tabs/style.css +81 -28
  424. package/dist/tabs/style.js +1 -0
  425. package/dist/tag/index.js +31 -28
  426. package/dist/tag/style.css +42 -28
  427. package/dist/terminal/index.js +1 -1
  428. package/dist/terminal/style.css +88 -62
  429. package/dist/textarea/index.js +69 -76
  430. package/dist/textarea/style.css +149 -90
  431. package/dist/textarea/style.js +1 -0
  432. package/dist/theme/index.d.ts +5 -5
  433. package/dist/theme/index.d.ts.map +1 -1
  434. package/dist/theme/styles.css +38 -23
  435. package/dist/theme/tokens.d.ts +11 -0
  436. package/dist/theme/tokens.d.ts.map +1 -1
  437. package/dist/theme/useTheme.d.ts.map +1 -1
  438. package/dist/tiered-menu/index.js +66 -59
  439. package/dist/tiered-menu/style.css +150 -90
  440. package/dist/tiered-menu/style.js +1 -0
  441. package/dist/timeline/index.js +1 -1
  442. package/dist/timeline/style.css +42 -28
  443. package/dist/toast/index.js +93 -89
  444. package/dist/toast/style.css +81 -28
  445. package/dist/toast/style.js +1 -0
  446. package/dist/toggle-button/index.js +1 -1
  447. package/dist/toggle-button/style.css +42 -28
  448. package/dist/toolbar/style.css +42 -28
  449. package/dist/tooltip/index.js +47 -71
  450. package/dist/tooltip/style.css +42 -28
  451. package/dist/tree/index.js +13 -13
  452. package/dist/tree/style.css +42 -28
  453. package/dist/tree-select/index.js +164 -155
  454. package/dist/tree-select/style.css +202 -138
  455. package/dist/tree-select/style.js +1 -0
  456. package/dist/tree-table/index.js +34 -30
  457. package/dist/tree-table/style.css +81 -28
  458. package/dist/tree-table/style.js +1 -0
  459. package/dist/virtual-scroller/style.css +42 -28
  460. package/package.json +18 -11
  461. package/dist/Pagination-C-F_ZDXr.js +0 -148
  462. package/dist/Scrollbar-D-bR2noX.js +0 -382
package/dist/button/style.css CHANGED
@@ -16,12 +16,13 @@
16
16
  --wi-control-padding-x-small: 10px;
17
17
  --wi-control-padding-x-medium: 12px;
18
18
  --wi-control-padding-x-large: 14px;
19
- --wi-button-padding-x-small: 10px;
20
- --wi-button-padding-x-medium: 14px;
21
- --wi-button-padding-x-large: 18px;
19
+
22
20
  --wi-radius-control: 3px;
23
- --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
24
- --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
21
+ --wi-border-width: 1px;
22
+ --wi-focus-shadow: 0 0 0 2px
23
+ color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
24
+ --wi-focus-shadow-danger: 0 0 0 2px
25
+ color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
25
26
  --wi-color-success: #159570;
26
27
  --wi-color-info: #2563eb;
27
28
  --wi-color-warning: #d97706;
@@ -39,10 +40,7 @@
39
40
  --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
40
41
  --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
41
42
  --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
42
- --wi-terminal-bg: #111827;
43
- --wi-terminal-fg: #e5e7eb;
44
- --wi-terminal-prompt: #34d399;
45
- --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
43
+
46
44
  /* Typography scale (component text, not control-height fonts) */
47
45
  --wi-font-size-xs: 0.75rem;
48
46
  --wi-font-size-sm: 0.8125rem;
@@ -56,8 +54,7 @@
56
54
  --wi-z-dropdown: calc(var(--wi-z-base) + 50);
57
55
  --wi-z-toast: calc(var(--wi-z-base) + 100);
58
56
  --wi-z-popper: 40;
59
- --wi-menu-min-width: 10rem;
60
- --wi-menu-min-width-lg: 12rem;
57
+
61
58
  --wi-control-affix-size: 2rem;
62
59
  --wi-control-affix-gap: 2.35rem;
63
60
  --wi-control-affix-padding: 2.5rem;
@@ -118,9 +115,6 @@
118
115
  --wi-control-padding-x-small: 8px;
119
116
  --wi-control-padding-x-medium: 10px;
120
117
  --wi-control-padding-x-large: 12px;
121
- --wi-button-padding-x-small: 8px;
122
- --wi-button-padding-x-medium: 12px;
123
- --wi-button-padding-x-large: 16px;
124
118
  }
125
119
 
126
120
  [data-wi-density="spacious"] {
@@ -139,9 +133,32 @@
139
133
  --wi-control-padding-x-small: 12px;
140
134
  --wi-control-padding-x-medium: 14px;
141
135
  --wi-control-padding-x-large: 16px;
142
- --wi-button-padding-x-small: 12px;
143
- --wi-button-padding-x-medium: 16px;
144
- --wi-button-padding-x-large: 20px;
136
+ }
137
+
138
+ [data-wi-density="compact"] .wi-layout-header {
139
+ --wi-layout-header-height: 48px;
140
+ }
141
+
142
+ [data-wi-density="compact"] .wi-layout-footer {
143
+ --wi-layout-footer-height: 40px;
144
+ }
145
+
146
+ [data-wi-density="compact"] .wi-layout-sider {
147
+ --wi-layout-sider-width: 240px;
148
+ --wi-layout-sider-collapsed-width: 44px;
149
+ }
150
+
151
+ [data-wi-density="spacious"] .wi-layout-header {
152
+ --wi-layout-header-height: 64px;
153
+ }
154
+
155
+ [data-wi-density="spacious"] .wi-layout-footer {
156
+ --wi-layout-footer-height: 56px;
157
+ }
158
+
159
+ [data-wi-density="spacious"] .wi-layout-sider {
160
+ --wi-layout-sider-width: 288px;
161
+ --wi-layout-sider-collapsed-width: 52px;
145
162
  }
146
163
 
147
164
  [data-theme="dark"] {
@@ -152,8 +169,10 @@
152
169
  --wi-color-text-muted: #94a3b8;
153
170
  --wi-color-border: #334155;
154
171
  --wi-color-focus-ring: #93c5fd;
155
- --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
156
- --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
172
+ --wi-focus-shadow: 0 0 0 2px
173
+ color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
174
+ --wi-focus-shadow-danger: 0 0 0 2px
175
+ color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
157
176
  --wi-color-success: #5eead4;
158
177
  --wi-color-info: #93c5fd;
159
178
  --wi-color-warning: #fbbf24;
@@ -170,10 +189,6 @@
170
189
  --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
171
190
  --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
172
191
  --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
173
- --wi-terminal-bg: #020617;
174
- --wi-terminal-fg: #e2e8f0;
175
- --wi-terminal-prompt: #5eead4;
176
- --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
177
192
  }
178
193
 
179
194
  @media (prefers-reduced-motion: reduce) {
@@ -465,8 +480,8 @@
465
480
  font-size: var(--wi-font-size-xs);
466
481
  }
467
482
 
468
- .wi-textarea-field__help--error,
469
- .wi-select-field__help--error {
483
+ .wi-textarea-field__help--invalid,
484
+ .wi-select-field__help--invalid {
470
485
  color: var(--wi-color-danger);
471
486
  }
472
487
 
@@ -485,9 +500,8 @@
485
500
  }
486
501
 
487
502
  .wi-textarea--invalid:focus-visible,
488
- .wi-textarea--error:focus-visible,
489
- .wi-select--error.wi-select--open,
490
- .wi-select--error:focus-visible {
503
+ .wi-select--invalid.wi-select--open,
504
+ .wi-select--invalid:focus-visible {
491
505
  border-color: var(--wi-color-danger);
492
506
  box-shadow: var(--wi-focus-shadow-danger);
493
507
  }
@@ -774,495 +788,638 @@
774
788
  }
775
789
  }
776
790
 
777
- .wi-button {
778
- --wi-button-bg: var(--wi-color-primary);
779
- --wi-button-fg: var(--wi-color-on-emphasis);
780
- --wi-button-border: var(--wi-color-primary);
781
- --wi-button-hover-bg: var(--wi-color-primary-hover);
782
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
783
- --wi-button-hover-border: var(--wi-color-primary-hover);
784
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
785
- align-items: center;
786
- background: var(--wi-button-bg);
787
- border: 1px solid var(--wi-button-border);
788
- border-radius: var(--wi-radius-control);
789
- color: var(--wi-button-fg);
790
- cursor: pointer;
791
- display: inline-flex;
792
- flex-direction: row;
793
- font-size: var(--wi-control-font-medium);
794
- font-weight: 600;
795
- gap: var(--wi-space-2);
796
- justify-content: center;
797
- line-height: 1;
798
- min-height: var(--wi-control-height-medium);
799
- padding: 0 var(--wi-button-padding-x-medium);
800
- position: relative;
801
- transition:
802
- background-color var(--wi-motion-fast) var(--wi-motion-ease),
803
- border-color var(--wi-motion-fast) var(--wi-motion-ease),
804
- color var(--wi-motion-fast) var(--wi-motion-ease),
805
- box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
806
- vertical-align: middle;
807
- white-space: nowrap;
808
- }
809
-
810
- .wi-button:hover:not(:disabled) {
811
- background: var(--wi-button-hover-bg);
812
- border-color: var(--wi-button-hover-border);
813
- color: var(--wi-button-hover-fg);
791
+ .wi-button {
792
+ --wi-button-padding-x-small: var(--wi-control-padding-x-small);
793
+ --wi-button-padding-x-medium: calc(
794
+ var(--wi-control-padding-x-medium) + var(--wi-space-1)
795
+ );
796
+ --wi-button-padding-x-large: calc(
797
+ var(--wi-control-padding-x-large) + var(--wi-space-1)
798
+ );
799
+ --wi-button-icon-stack-min-height: 3.25rem;
800
+ --wi-button-badge-min-width: 1.15rem;
801
+ --wi-button-spinner-size: 0.875rem;
802
+ --wi-button-bg: var(--wi-color-primary);
803
+ --wi-button-fg: var(--wi-color-on-emphasis);
804
+ --wi-button-border: var(--wi-color-primary);
805
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
806
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
807
+ --wi-button-hover-border: var(--wi-color-primary-hover);
808
+ --wi-button-active-bg: color-mix(
809
+ in srgb,
810
+ var(--wi-color-primary) 82%,
811
+ black
812
+ );
813
+ align-items: center;
814
+ background: var(--wi-button-bg);
815
+ border: 1px solid var(--wi-button-border);
816
+ border-radius: var(--wi-radius-control);
817
+ color: var(--wi-button-fg);
818
+ cursor: pointer;
819
+ display: inline-flex;
820
+ flex-direction: row;
821
+ font-size: var(--wi-control-font-medium);
822
+ font-weight: 600;
823
+ gap: var(--wi-space-2);
824
+ justify-content: center;
825
+ line-height: 1;
826
+ min-height: var(--wi-control-height-medium);
827
+ padding: 0 var(--wi-button-padding-x-medium);
828
+ position: relative;
829
+ transition:
830
+ background-color var(--wi-motion-fast) var(--wi-motion-ease),
831
+ border-color var(--wi-motion-fast) var(--wi-motion-ease),
832
+ color var(--wi-motion-fast) var(--wi-motion-ease),
833
+ box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
834
+ vertical-align: middle;
835
+ white-space: nowrap;
836
+ }
837
+
838
+ .wi-button:hover:not(:disabled) {
839
+ background: var(--wi-button-hover-bg);
840
+ border-color: var(--wi-button-hover-border);
841
+ color: var(--wi-button-hover-fg);
842
+ }
843
+
844
+ .wi-button:active:not(:disabled) {
845
+ background: var(--wi-button-active-bg);
846
+ }
847
+
848
+ /* Naive-style focus: soft glow, not outline-offset ring */
849
+ .wi-button:focus {
850
+ outline: none;
851
+ }
852
+
853
+ .wi-button:focus-visible {
854
+ box-shadow: var(--wi-focus-shadow);
855
+ outline: none;
856
+ }
857
+
858
+ .wi-button--primary {
859
+ --wi-button-bg: var(--wi-color-primary);
860
+ --wi-button-fg: var(--wi-color-on-emphasis);
861
+ --wi-button-border: var(--wi-color-primary);
862
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
863
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
864
+ --wi-button-hover-border: var(--wi-color-primary-hover);
865
+ --wi-button-active-bg: color-mix(
866
+ in srgb,
867
+ var(--wi-color-primary) 82%,
868
+ black
869
+ );
870
+ }
871
+
872
+ .wi-button--secondary {
873
+ --wi-button-bg: color-mix(
874
+ in srgb,
875
+ var(--wi-color-text-muted) 16%,
876
+ var(--wi-color-surface)
877
+ );
878
+ --wi-button-fg: var(--wi-color-text);
879
+ --wi-button-border: transparent;
880
+ --wi-button-hover-bg: color-mix(
881
+ in srgb,
882
+ var(--wi-color-text-muted) 24%,
883
+ var(--wi-color-surface)
884
+ );
885
+ --wi-button-hover-fg: var(--wi-color-text);
886
+ --wi-button-hover-border: transparent;
887
+ --wi-button-active-bg: color-mix(
888
+ in srgb,
889
+ var(--wi-color-text-muted) 32%,
890
+ var(--wi-color-surface)
891
+ );
892
+ }
893
+
894
+ .wi-button--success {
895
+ --wi-button-bg: var(--wi-color-success);
896
+ --wi-button-fg: var(--wi-color-on-emphasis);
897
+ --wi-button-border: var(--wi-color-success);
898
+ --wi-button-hover-bg: color-mix(
899
+ in srgb,
900
+ var(--wi-color-success) 85%,
901
+ black
902
+ );
903
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
904
+ --wi-button-hover-border: color-mix(
905
+ in srgb,
906
+ var(--wi-color-success) 85%,
907
+ black
908
+ );
909
+ --wi-button-active-bg: color-mix(
910
+ in srgb,
911
+ var(--wi-color-success) 75%,
912
+ black
913
+ );
914
+ }
915
+
916
+ .wi-button--info {
917
+ --wi-button-bg: var(--wi-color-info);
918
+ --wi-button-fg: var(--wi-color-on-emphasis);
919
+ --wi-button-border: var(--wi-color-info);
920
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
921
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
922
+ --wi-button-hover-border: color-mix(
923
+ in srgb,
924
+ var(--wi-color-info) 85%,
925
+ black
926
+ );
927
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
928
+ }
929
+
930
+ .wi-button--warn {
931
+ --wi-button-bg: var(--wi-color-warn);
932
+ --wi-button-fg: var(--wi-color-on-emphasis);
933
+ --wi-button-border: var(--wi-color-warn);
934
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
935
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
936
+ --wi-button-hover-border: color-mix(
937
+ in srgb,
938
+ var(--wi-color-warn) 85%,
939
+ black
940
+ );
941
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
942
+ }
943
+
944
+ .wi-button--help {
945
+ --wi-button-bg: var(--wi-color-help);
946
+ --wi-button-fg: var(--wi-color-on-emphasis);
947
+ --wi-button-border: var(--wi-color-help);
948
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
949
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
950
+ --wi-button-hover-border: color-mix(
951
+ in srgb,
952
+ var(--wi-color-help) 85%,
953
+ black
954
+ );
955
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
956
+ }
957
+
958
+ .wi-button--danger {
959
+ --wi-button-bg: var(--wi-color-danger);
960
+ --wi-button-fg: var(--wi-color-on-emphasis);
961
+ --wi-button-border: var(--wi-color-danger);
962
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
963
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
964
+ --wi-button-hover-border: color-mix(
965
+ in srgb,
966
+ var(--wi-color-danger) 85%,
967
+ black
968
+ );
969
+ --wi-button-active-bg: color-mix(
970
+ in srgb,
971
+ var(--wi-color-danger) 75%,
972
+ black
973
+ );
974
+ }
975
+
976
+ .wi-button--contrast {
977
+ --wi-button-bg: var(--wi-color-contrast);
978
+ --wi-button-fg: var(--wi-color-contrast-fg);
979
+ --wi-button-border: var(--wi-color-contrast);
980
+ --wi-button-hover-bg: var(--wi-color-contrast-hover);
981
+ --wi-button-hover-fg: var(--wi-color-contrast-fg);
982
+ --wi-button-hover-border: var(--wi-color-contrast-hover);
983
+ --wi-button-active-bg: var(--wi-color-contrast-active);
984
+ }
985
+
986
+ .wi-button--outlined {
987
+ --wi-button-bg: transparent;
988
+ --wi-button-fg: var(--wi-button-border);
989
+ --wi-button-hover-bg: color-mix(
990
+ in srgb,
991
+ var(--wi-button-border) 10%,
992
+ transparent
993
+ );
994
+ --wi-button-hover-fg: var(--wi-button-border);
995
+ --wi-button-hover-border: var(--wi-button-border);
996
+ --wi-button-active-bg: color-mix(
997
+ in srgb,
998
+ var(--wi-button-border) 16%,
999
+ transparent
1000
+ );
1001
+ }
1002
+
1003
+ .wi-button--secondary.wi-button--outlined {
1004
+ --wi-button-border: var(--wi-color-border);
1005
+ --wi-button-fg: var(--wi-color-text);
1006
+ --wi-button-hover-fg: var(--wi-color-text);
1007
+ }
1008
+
1009
+ .wi-button--text,
1010
+ .wi-button--link {
1011
+ --wi-button-bg: transparent;
1012
+ --wi-button-border: transparent;
1013
+ --wi-button-fg: var(--wi-color-primary);
1014
+ --wi-button-hover-bg: color-mix(
1015
+ in srgb,
1016
+ var(--wi-color-primary) 10%,
1017
+ transparent
1018
+ );
1019
+ --wi-button-hover-fg: var(--wi-color-primary);
1020
+ --wi-button-hover-border: transparent;
1021
+ --wi-button-active-bg: color-mix(
1022
+ in srgb,
1023
+ var(--wi-color-primary) 16%,
1024
+ transparent
1025
+ );
1026
+ }
1027
+
1028
+ .wi-button--secondary.wi-button--text,
1029
+ .wi-button--secondary.wi-button--link {
1030
+ --wi-button-fg: var(--wi-color-text-muted);
1031
+ --wi-button-hover-bg: color-mix(
1032
+ in srgb,
1033
+ var(--wi-color-text-muted) 12%,
1034
+ transparent
1035
+ );
1036
+ --wi-button-hover-fg: var(--wi-color-text);
1037
+ }
1038
+
1039
+ .wi-button--success.wi-button--text,
1040
+ .wi-button--success.wi-button--link,
1041
+ .wi-button--success.wi-button--outlined {
1042
+ --wi-button-fg: var(--wi-color-success);
1043
+ --wi-button-border: var(--wi-color-success);
1044
+ --wi-button-hover-bg: color-mix(
1045
+ in srgb,
1046
+ var(--wi-color-success) 10%,
1047
+ transparent
1048
+ );
1049
+ --wi-button-hover-fg: var(--wi-color-success);
1050
+ --wi-button-hover-border: var(--wi-color-success);
1051
+ }
1052
+
1053
+ .wi-button--info.wi-button--text,
1054
+ .wi-button--info.wi-button--link,
1055
+ .wi-button--info.wi-button--outlined {
1056
+ --wi-button-fg: var(--wi-color-info);
1057
+ --wi-button-border: var(--wi-color-info);
1058
+ --wi-button-hover-bg: color-mix(
1059
+ in srgb,
1060
+ var(--wi-color-info) 10%,
1061
+ transparent
1062
+ );
1063
+ --wi-button-hover-fg: var(--wi-color-info);
1064
+ --wi-button-hover-border: var(--wi-color-info);
1065
+ }
1066
+
1067
+ .wi-button--warn.wi-button--text,
1068
+ .wi-button--warn.wi-button--link,
1069
+ .wi-button--warn.wi-button--outlined {
1070
+ --wi-button-fg: var(--wi-color-warn);
1071
+ --wi-button-border: var(--wi-color-warn);
1072
+ --wi-button-hover-bg: color-mix(
1073
+ in srgb,
1074
+ var(--wi-color-warn) 10%,
1075
+ transparent
1076
+ );
1077
+ --wi-button-hover-fg: var(--wi-color-warn);
1078
+ --wi-button-hover-border: var(--wi-color-warn);
1079
+ }
1080
+
1081
+ .wi-button--help.wi-button--text,
1082
+ .wi-button--help.wi-button--link,
1083
+ .wi-button--help.wi-button--outlined {
1084
+ --wi-button-fg: var(--wi-color-help);
1085
+ --wi-button-border: var(--wi-color-help);
1086
+ --wi-button-hover-bg: color-mix(
1087
+ in srgb,
1088
+ var(--wi-color-help) 10%,
1089
+ transparent
1090
+ );
1091
+ --wi-button-hover-fg: var(--wi-color-help);
1092
+ --wi-button-hover-border: var(--wi-color-help);
1093
+ }
1094
+
1095
+ .wi-button--danger.wi-button--text,
1096
+ .wi-button--danger.wi-button--link,
1097
+ .wi-button--danger.wi-button--outlined {
1098
+ --wi-button-fg: var(--wi-color-danger);
1099
+ --wi-button-border: var(--wi-color-danger);
1100
+ --wi-button-hover-bg: color-mix(
1101
+ in srgb,
1102
+ var(--wi-color-danger) 10%,
1103
+ transparent
1104
+ );
1105
+ --wi-button-hover-fg: var(--wi-color-danger);
1106
+ --wi-button-hover-border: var(--wi-color-danger);
1107
+ }
1108
+
1109
+ .wi-button--contrast.wi-button--text,
1110
+ .wi-button--contrast.wi-button--link,
1111
+ .wi-button--contrast.wi-button--outlined {
1112
+ --wi-button-fg: var(--wi-color-contrast);
1113
+ --wi-button-border: var(--wi-color-contrast);
1114
+ --wi-button-hover-bg: color-mix(
1115
+ in srgb,
1116
+ var(--wi-color-contrast) 10%,
1117
+ transparent
1118
+ );
1119
+ --wi-button-hover-fg: var(--wi-color-contrast);
1120
+ --wi-button-hover-border: var(--wi-color-contrast);
1121
+ }
1122
+
1123
+ .wi-button--plain.wi-button--text,
1124
+ .wi-button--plain.wi-button--outlined,
1125
+ .wi-button--plain.wi-button--link {
1126
+ --wi-button-fg: var(--wi-color-text-muted);
1127
+ --wi-button-border: var(--wi-color-border);
1128
+ --wi-button-hover-bg: color-mix(
1129
+ in srgb,
1130
+ var(--wi-color-text-muted) 12%,
1131
+ transparent
1132
+ );
1133
+ --wi-button-hover-fg: var(--wi-color-text);
1134
+ --wi-button-hover-border: var(--wi-color-border);
1135
+ }
1136
+
1137
+ .wi-button--link {
1138
+ height: auto;
1139
+ min-height: 0;
1140
+ padding: 0;
1141
+ }
1142
+
1143
+ .wi-button--link:hover:not(:disabled) {
1144
+ text-decoration: underline;
1145
+ }
1146
+
1147
+ .wi-button--ghost {
1148
+ --wi-button-bg: transparent;
1149
+ --wi-button-fg: var(--wi-button-border);
1150
+ --wi-button-hover-bg: color-mix(
1151
+ in srgb,
1152
+ var(--wi-button-border) 12%,
1153
+ transparent
1154
+ );
1155
+ --wi-button-hover-fg: var(--wi-button-border);
1156
+ --wi-button-hover-border: var(--wi-button-border);
1157
+ --wi-button-active-bg: color-mix(
1158
+ in srgb,
1159
+ var(--wi-button-border) 18%,
1160
+ transparent
1161
+ );
1162
+ }
1163
+
1164
+ .wi-button--secondary.wi-button--ghost {
1165
+ --wi-button-border: var(--wi-color-border);
1166
+ --wi-button-fg: var(--wi-color-text);
1167
+ --wi-button-hover-fg: var(--wi-color-text);
1168
+ }
1169
+
1170
+ .wi-button--success.wi-button--ghost {
1171
+ --wi-button-fg: var(--wi-color-success);
1172
+ --wi-button-border: var(--wi-color-success);
1173
+ }
1174
+
1175
+ .wi-button--info.wi-button--ghost {
1176
+ --wi-button-fg: var(--wi-color-info);
1177
+ --wi-button-border: var(--wi-color-info);
1178
+ }
1179
+
1180
+ .wi-button--warn.wi-button--ghost {
1181
+ --wi-button-fg: var(--wi-color-warn);
1182
+ --wi-button-border: var(--wi-color-warn);
1183
+ }
1184
+
1185
+ .wi-button--help.wi-button--ghost {
1186
+ --wi-button-fg: var(--wi-color-help);
1187
+ --wi-button-border: var(--wi-color-help);
1188
+ }
1189
+
1190
+ .wi-button--danger.wi-button--ghost {
1191
+ --wi-button-fg: var(--wi-color-danger);
1192
+ --wi-button-border: var(--wi-color-danger);
814
1193
  }
815
-
816
- .wi-button:active:not(:disabled) {
817
- background: var(--wi-button-active-bg);
818
- }
819
-
820
- /* Naive-style focus: soft glow, not outline-offset ring */
821
- .wi-button:focus {
822
- outline: none;
823
- }
824
-
825
- .wi-button:focus-visible {
826
- box-shadow: var(--wi-focus-shadow);
827
- outline: none;
828
- }
829
-
830
- .wi-button--primary {
831
- --wi-button-bg: var(--wi-color-primary);
832
- --wi-button-fg: var(--wi-color-on-emphasis);
833
- --wi-button-border: var(--wi-color-primary);
834
- --wi-button-hover-bg: var(--wi-color-primary-hover);
835
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
836
- --wi-button-hover-border: var(--wi-color-primary-hover);
837
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
838
- }
839
-
840
- .wi-button--secondary {
841
- --wi-button-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, var(--wi-color-surface));
842
- --wi-button-fg: var(--wi-color-text);
843
- --wi-button-border: transparent;
844
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 24%, var(--wi-color-surface));
845
- --wi-button-hover-fg: var(--wi-color-text);
846
- --wi-button-hover-border: transparent;
847
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 32%, var(--wi-color-surface));
848
- }
849
-
850
- .wi-button--success {
851
- --wi-button-bg: var(--wi-color-success);
852
- --wi-button-fg: var(--wi-color-on-emphasis);
853
- --wi-button-border: var(--wi-color-success);
854
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 85%, black);
855
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
856
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-success) 85%, black);
857
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-success) 75%, black);
858
- }
859
-
860
- .wi-button--info {
861
- --wi-button-bg: var(--wi-color-info);
862
- --wi-button-fg: var(--wi-color-on-emphasis);
863
- --wi-button-border: var(--wi-color-info);
864
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
865
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
866
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-info) 85%, black);
867
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
868
- }
869
-
870
- .wi-button--warn {
871
- --wi-button-bg: var(--wi-color-warn);
872
- --wi-button-fg: var(--wi-color-on-emphasis);
873
- --wi-button-border: var(--wi-color-warn);
874
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
875
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
876
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-warn) 85%, black);
877
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
878
- }
879
-
880
- .wi-button--help {
881
- --wi-button-bg: var(--wi-color-help);
882
- --wi-button-fg: var(--wi-color-on-emphasis);
883
- --wi-button-border: var(--wi-color-help);
884
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
885
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
886
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-help) 85%, black);
887
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
888
- }
889
-
890
- .wi-button--danger {
891
- --wi-button-bg: var(--wi-color-danger);
892
- --wi-button-fg: var(--wi-color-on-emphasis);
893
- --wi-button-border: var(--wi-color-danger);
894
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
895
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
896
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-danger) 85%, black);
897
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-danger) 75%, black);
898
- }
899
-
900
- .wi-button--contrast {
901
- --wi-button-bg: var(--wi-color-contrast);
902
- --wi-button-fg: var(--wi-color-contrast-fg);
903
- --wi-button-border: var(--wi-color-contrast);
904
- --wi-button-hover-bg: var(--wi-color-contrast-hover);
905
- --wi-button-hover-fg: var(--wi-color-contrast-fg);
906
- --wi-button-hover-border: var(--wi-color-contrast-hover);
907
- --wi-button-active-bg: var(--wi-color-contrast-active);
908
- }
909
-
910
- .wi-button--outlined {
911
- --wi-button-bg: transparent;
912
- --wi-button-fg: var(--wi-button-border);
913
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 10%, transparent);
914
- --wi-button-hover-fg: var(--wi-button-border);
915
- --wi-button-hover-border: var(--wi-button-border);
916
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 16%, transparent);
917
- }
918
-
919
- .wi-button--secondary.wi-button--outlined {
920
- --wi-button-border: var(--wi-color-border);
921
- --wi-button-fg: var(--wi-color-text);
922
- --wi-button-hover-fg: var(--wi-color-text);
923
- }
924
-
925
- .wi-button--text,
926
- .wi-button--link {
927
- --wi-button-bg: transparent;
928
- --wi-button-border: transparent;
929
- --wi-button-fg: var(--wi-color-primary);
930
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
931
- --wi-button-hover-fg: var(--wi-color-primary);
932
- --wi-button-hover-border: transparent;
933
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 16%, transparent);
934
- }
935
-
936
- .wi-button--secondary.wi-button--text,
937
- .wi-button--secondary.wi-button--link {
938
- --wi-button-fg: var(--wi-color-text-muted);
939
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
940
- --wi-button-hover-fg: var(--wi-color-text);
941
- }
942
-
943
- .wi-button--success.wi-button--text,
944
- .wi-button--success.wi-button--link,
945
- .wi-button--success.wi-button--outlined {
946
- --wi-button-fg: var(--wi-color-success);
947
- --wi-button-border: var(--wi-color-success);
948
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 10%, transparent);
949
- --wi-button-hover-fg: var(--wi-color-success);
950
- --wi-button-hover-border: var(--wi-color-success);
951
- }
952
-
953
- .wi-button--info.wi-button--text,
954
- .wi-button--info.wi-button--link,
955
- .wi-button--info.wi-button--outlined {
956
- --wi-button-fg: var(--wi-color-info);
957
- --wi-button-border: var(--wi-color-info);
958
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 10%, transparent);
959
- --wi-button-hover-fg: var(--wi-color-info);
960
- --wi-button-hover-border: var(--wi-color-info);
1194
+
1195
+ .wi-button--contrast.wi-button--ghost {
1196
+ --wi-button-fg: var(--wi-color-contrast);
1197
+ --wi-button-border: var(--wi-color-contrast);
961
1198
  }
962
1199
 
963
- .wi-button--warn.wi-button--text,
964
- .wi-button--warn.wi-button--link,
965
- .wi-button--warn.wi-button--outlined {
966
- --wi-button-fg: var(--wi-color-warn);
967
- --wi-button-border: var(--wi-color-warn);
968
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 10%, transparent);
969
- --wi-button-hover-fg: var(--wi-color-warn);
970
- --wi-button-hover-border: var(--wi-color-warn);
1200
+ .wi-button--quaternary {
1201
+ --wi-button-bg: transparent;
1202
+ --wi-button-border: transparent;
1203
+ --wi-button-fg: var(--wi-color-text);
1204
+ --wi-button-hover-bg: color-mix(
1205
+ in srgb,
1206
+ var(--wi-color-text-muted) 10%,
1207
+ transparent
1208
+ );
1209
+ --wi-button-hover-fg: var(--wi-color-text);
1210
+ --wi-button-hover-border: transparent;
1211
+ --wi-button-active-bg: color-mix(
1212
+ in srgb,
1213
+ var(--wi-color-text-muted) 16%,
1214
+ transparent
1215
+ );
971
1216
  }
972
1217
 
973
- .wi-button--help.wi-button--text,
974
- .wi-button--help.wi-button--link,
975
- .wi-button--help.wi-button--outlined {
976
- --wi-button-fg: var(--wi-color-help);
977
- --wi-button-border: var(--wi-color-help);
978
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 10%, transparent);
979
- --wi-button-hover-fg: var(--wi-color-help);
980
- --wi-button-hover-border: var(--wi-color-help);
1218
+ .wi-button--custom {
1219
+ --wi-button-bg: var(--wi-button-color);
1220
+ --wi-button-fg: var(--wi-color-on-emphasis);
1221
+ --wi-button-border: var(--wi-button-color);
1222
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
1223
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
1224
+ --wi-button-hover-border: color-mix(
1225
+ in srgb,
1226
+ var(--wi-button-color) 85%,
1227
+ black
1228
+ );
1229
+ --wi-button-active-bg: color-mix(
1230
+ in srgb,
1231
+ var(--wi-button-color) 75%,
1232
+ black
1233
+ );
981
1234
  }
982
1235
 
983
- .wi-button--danger.wi-button--text,
984
- .wi-button--danger.wi-button--link,
985
- .wi-button--danger.wi-button--outlined {
986
- --wi-button-fg: var(--wi-color-danger);
987
- --wi-button-border: var(--wi-color-danger);
988
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 10%, transparent);
989
- --wi-button-hover-fg: var(--wi-color-danger);
990
- --wi-button-hover-border: var(--wi-color-danger);
1236
+ .wi-button--custom.wi-button--outlined,
1237
+ .wi-button--custom.wi-button--ghost,
1238
+ .wi-button--custom.wi-button--text,
1239
+ .wi-button--custom.wi-button--quaternary,
1240
+ .wi-button--custom.wi-button--link {
1241
+ --wi-button-bg: transparent;
1242
+ --wi-button-fg: var(--wi-button-color);
1243
+ --wi-button-border: var(--wi-button-color);
1244
+ --wi-button-hover-bg: color-mix(
1245
+ in srgb,
1246
+ var(--wi-button-color) 12%,
1247
+ transparent
1248
+ );
1249
+ --wi-button-hover-fg: var(--wi-button-color);
1250
+ --wi-button-hover-border: var(--wi-button-color);
991
1251
  }
992
1252
 
993
- .wi-button--contrast.wi-button--text,
994
- .wi-button--contrast.wi-button--link,
995
- .wi-button--contrast.wi-button--outlined {
996
- --wi-button-fg: var(--wi-color-contrast);
997
- --wi-button-border: var(--wi-color-contrast);
998
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-contrast) 10%, transparent);
999
- --wi-button-hover-fg: var(--wi-color-contrast);
1000
- --wi-button-hover-border: var(--wi-color-contrast);
1253
+ .wi-button--custom.wi-button--text,
1254
+ .wi-button--custom.wi-button--quaternary,
1255
+ .wi-button--custom.wi-button--link {
1256
+ --wi-button-border: transparent;
1257
+ --wi-button-hover-border: transparent;
1001
1258
  }
1002
1259
 
1003
- .wi-button--plain.wi-button--text,
1004
- .wi-button--plain.wi-button--outlined,
1005
- .wi-button--plain.wi-button--link {
1006
- --wi-button-fg: var(--wi-color-text-muted);
1007
- --wi-button-border: var(--wi-color-border);
1008
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
1009
- --wi-button-hover-fg: var(--wi-color-text);
1010
- --wi-button-hover-border: var(--wi-color-border);
1260
+ .wi-button-group {
1261
+ display: inline-flex;
1262
+ vertical-align: middle;
1011
1263
  }
1012
1264
 
1013
- .wi-button--link {
1014
- height: auto;
1015
- min-height: 0;
1016
- padding: 0;
1265
+ .wi-button-group--fluid {
1266
+ display: flex;
1267
+ width: 100%;
1017
1268
  }
1018
1269
 
1019
- .wi-button--link:hover:not(:disabled) {
1020
- text-decoration: underline;
1270
+ .wi-button-group--fluid > .wi-button {
1271
+ flex: 1;
1021
1272
  }
1022
1273
 
1023
- .wi-button--ghost {
1024
- --wi-button-bg: transparent;
1025
- --wi-button-fg: var(--wi-button-border);
1026
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 12%, transparent);
1027
- --wi-button-hover-fg: var(--wi-button-border);
1028
- --wi-button-hover-border: var(--wi-button-border);
1029
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 18%, transparent);
1274
+ .wi-button-group > .wi-button {
1275
+ border-radius: 0;
1276
+ margin: 0;
1030
1277
  }
1031
1278
 
1032
- .wi-button--secondary.wi-button--ghost {
1033
- --wi-button-border: var(--wi-color-border);
1034
- --wi-button-fg: var(--wi-color-text);
1035
- --wi-button-hover-fg: var(--wi-color-text);
1279
+ .wi-button-group > .wi-button + .wi-button {
1280
+ margin-left: -1px;
1036
1281
  }
1037
1282
 
1038
- .wi-button--success.wi-button--ghost {
1039
- --wi-button-fg: var(--wi-color-success);
1040
- --wi-button-border: var(--wi-color-success);
1283
+ .wi-button-group > .wi-button:first-child {
1284
+ border-top-left-radius: var(--wi-radius-md);
1285
+ border-bottom-left-radius: var(--wi-radius-md);
1041
1286
  }
1042
1287
 
1043
- .wi-button--info.wi-button--ghost {
1044
- --wi-button-fg: var(--wi-color-info);
1045
- --wi-button-border: var(--wi-color-info);
1288
+ .wi-button-group > .wi-button:last-child {
1289
+ border-top-right-radius: var(--wi-radius-md);
1290
+ border-bottom-right-radius: var(--wi-radius-md);
1046
1291
  }
1047
1292
 
1048
- .wi-button--warn.wi-button--ghost {
1049
- --wi-button-fg: var(--wi-color-warn);
1050
- --wi-button-border: var(--wi-color-warn);
1293
+ .wi-button--raised {
1294
+ box-shadow: 0 0.25rem 0.75rem
1295
+ color-mix(in srgb, var(--wi-color-text) 14%, transparent);
1051
1296
  }
1052
1297
 
1053
- .wi-button--help.wi-button--ghost {
1054
- --wi-button-fg: var(--wi-color-help);
1055
- --wi-button-border: var(--wi-color-help);
1298
+ .wi-button--rounded {
1299
+ border-radius: var(--wi-radius-full);
1056
1300
  }
1057
1301
 
1058
- .wi-button--danger.wi-button--ghost {
1059
- --wi-button-fg: var(--wi-color-danger);
1060
- --wi-button-border: var(--wi-color-danger);
1302
+ .wi-button--icon-only {
1303
+ gap: 0;
1304
+ min-width: var(--wi-control-height-medium);
1305
+ padding: 0;
1306
+ width: var(--wi-control-height-medium);
1061
1307
  }
1062
1308
 
1063
- .wi-button--contrast.wi-button--ghost {
1064
- --wi-button-fg: var(--wi-color-contrast);
1065
- --wi-button-border: var(--wi-color-contrast);
1309
+ .wi-button--icon-only.wi-button--small {
1310
+ min-width: var(--wi-control-height-small);
1311
+ width: var(--wi-control-height-small);
1066
1312
  }
1067
1313
 
1068
- .wi-button--quaternary {
1069
- --wi-button-bg: transparent;
1070
- --wi-button-border: transparent;
1071
- --wi-button-fg: var(--wi-color-text);
1072
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 10%, transparent);
1073
- --wi-button-hover-fg: var(--wi-color-text);
1074
- --wi-button-hover-border: transparent;
1075
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, transparent);
1314
+ .wi-button--icon-only.wi-button--large {
1315
+ min-width: var(--wi-control-height-large);
1316
+ width: var(--wi-control-height-large);
1076
1317
  }
1077
1318
 
1078
- .wi-button--custom {
1079
- --wi-button-bg: var(--wi-button-color);
1080
- --wi-button-fg: var(--wi-color-on-emphasis);
1081
- --wi-button-border: var(--wi-button-color);
1082
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
1083
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
1084
- --wi-button-hover-border: color-mix(in srgb, var(--wi-button-color) 85%, black);
1085
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-color) 75%, black);
1319
+ .wi-button--icon-right {
1320
+ flex-direction: row-reverse;
1086
1321
  }
1087
1322
 
1088
- .wi-button--custom.wi-button--outlined,
1089
- .wi-button--custom.wi-button--ghost,
1090
- .wi-button--custom.wi-button--text,
1091
- .wi-button--custom.wi-button--quaternary,
1092
- .wi-button--custom.wi-button--link {
1093
- --wi-button-bg: transparent;
1094
- --wi-button-fg: var(--wi-button-color);
1095
- --wi-button-border: var(--wi-button-color);
1096
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 12%, transparent);
1097
- --wi-button-hover-fg: var(--wi-button-color);
1098
- --wi-button-hover-border: var(--wi-button-color);
1323
+ .wi-button--icon-top {
1324
+ flex-direction: column;
1325
+ min-height: var(--wi-button-icon-stack-min-height);
1326
+ padding-block: var(--wi-space-2);
1099
1327
  }
1100
1328
 
1101
- .wi-button--custom.wi-button--text,
1102
- .wi-button--custom.wi-button--quaternary,
1103
- .wi-button--custom.wi-button--link {
1104
- --wi-button-border: transparent;
1105
- --wi-button-hover-border: transparent;
1329
+ .wi-button--icon-bottom {
1330
+ flex-direction: column-reverse;
1331
+ min-height: var(--wi-button-icon-stack-min-height);
1332
+ padding-block: var(--wi-space-2);
1106
1333
  }
1107
1334
 
1108
- .wi-button-group {
1109
- display: inline-flex;
1110
- vertical-align: middle;
1335
+ .wi-button--fluid {
1336
+ display: flex;
1337
+ width: 100%;
1111
1338
  }
1112
1339
 
1113
- .wi-button-group--fluid {
1114
- display: flex;
1115
- width: 100%;
1340
+ .wi-button--small {
1341
+ font-size: var(--wi-control-font-small);
1342
+ min-height: var(--wi-control-height-small);
1343
+ padding: 0 var(--wi-button-padding-x-small);
1116
1344
  }
1117
1345
 
1118
- .wi-button-group--fluid > .wi-button {
1119
- flex: 1;
1346
+ .wi-button--large {
1347
+ font-size: var(--wi-control-font-large);
1348
+ min-height: var(--wi-control-height-large);
1349
+ padding: 0 var(--wi-button-padding-x-large);
1120
1350
  }
1121
1351
 
1122
- .wi-button-group > .wi-button {
1123
- border-radius: 0;
1124
- margin: 0;
1352
+ .wi-button__icon,
1353
+ .wi-button__label {
1354
+ align-items: center;
1355
+ display: inline-flex;
1356
+ justify-content: center;
1125
1357
  }
1126
1358
 
1127
- .wi-button-group > .wi-button + .wi-button {
1128
- margin-left: -1px;
1359
+ .wi-button__icon {
1360
+ flex: 0 0 auto;
1129
1361
  }
1130
1362
 
1131
- .wi-button-group > .wi-button:first-child {
1132
- border-top-left-radius: var(--wi-radius-md);
1133
- border-bottom-left-radius: var(--wi-radius-md);
1363
+ .wi-button__badge {
1364
+ align-items: center;
1365
+ background: var(--wi-color-contrast);
1366
+ border-radius: var(--wi-radius-full);
1367
+ color: var(--wi-color-contrast-fg);
1368
+ display: inline-flex;
1369
+ font-size: var(--wi-font-size-xs);
1370
+ font-weight: 700;
1371
+ justify-content: center;
1372
+ line-height: 1;
1373
+ margin-inline-start: var(--wi-space-1);
1374
+ min-width: var(--wi-button-badge-min-width);
1375
+ padding: var(--wi-space-1) var(--wi-space-2);
1134
1376
  }
1135
1377
 
1136
- .wi-button-group > .wi-button:last-child {
1137
- border-top-right-radius: var(--wi-radius-md);
1138
- border-bottom-right-radius: var(--wi-radius-md);
1378
+ .wi-button__badge--secondary {
1379
+ background: color-mix(
1380
+ in srgb,
1381
+ var(--wi-color-text-muted) 25%,
1382
+ var(--wi-color-surface)
1383
+ );
1384
+ color: var(--wi-color-text);
1139
1385
  }
1140
1386
 
1141
- .wi-button--raised {
1142
- box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--wi-color-text) 14%, transparent);
1387
+ .wi-button__badge--success {
1388
+ background: var(--wi-color-success);
1389
+ color: var(--wi-color-on-emphasis);
1143
1390
  }
1144
1391
 
1145
- .wi-button--rounded {
1146
- border-radius: var(--wi-radius-full);
1392
+ .wi-button__badge--info {
1393
+ background: var(--wi-color-info);
1394
+ color: var(--wi-color-on-emphasis);
1147
1395
  }
1148
1396
 
1149
- .wi-button--icon-only {
1150
- gap: 0;
1151
- min-width: var(--wi-control-height-medium);
1152
- padding: 0;
1153
- width: var(--wi-control-height-medium);
1397
+ .wi-button__badge--warn {
1398
+ background: var(--wi-color-warn);
1399
+ color: var(--wi-color-on-emphasis);
1154
1400
  }
1155
1401
 
1156
- .wi-button--icon-only.wi-button--small {
1157
- min-width: var(--wi-control-height-small);
1158
- width: var(--wi-control-height-small);
1402
+ .wi-button__badge--danger {
1403
+ background: var(--wi-color-danger);
1404
+ color: var(--wi-color-on-emphasis);
1159
1405
  }
1160
1406
 
1161
- .wi-button--icon-only.wi-button--large {
1162
- min-width: var(--wi-control-height-large);
1163
- width: var(--wi-control-height-large);
1407
+ .wi-button__badge--contrast {
1408
+ background: var(--wi-color-contrast);
1409
+ color: var(--wi-color-contrast-fg);
1164
1410
  }
1165
1411
 
1166
- .wi-button--icon-right {
1167
- flex-direction: row-reverse;
1412
+ .wi-button__spinner {
1413
+ animation: wi-button-spin 700ms linear infinite;
1414
+ border: 2px solid currentColor;
1415
+ border-right-color: transparent;
1416
+ border-radius: var(--wi-radius-full);
1417
+ height: var(--wi-button-spinner-size);
1418
+ width: var(--wi-button-spinner-size);
1168
1419
  }
1169
1420
 
1170
- .wi-button--icon-top {
1171
- flex-direction: column;
1172
- min-height: 3.25rem;
1173
- padding-block: var(--wi-space-2);
1174
- }
1175
-
1176
- .wi-button--icon-bottom {
1177
- flex-direction: column-reverse;
1178
- min-height: 3.25rem;
1179
- padding-block: var(--wi-space-2);
1180
- }
1181
-
1182
- .wi-button--fluid {
1183
- display: flex;
1184
- width: 100%;
1185
- }
1186
-
1187
- .wi-button--small {
1188
- font-size: var(--wi-control-font-small);
1189
- min-height: var(--wi-control-height-small);
1190
- padding: 0 var(--wi-button-padding-x-small);
1191
- }
1192
-
1193
- .wi-button--large {
1194
- font-size: var(--wi-control-font-large);
1195
- min-height: var(--wi-control-height-large);
1196
- padding: 0 var(--wi-button-padding-x-large);
1197
- }
1198
-
1199
- .wi-button__icon,
1200
- .wi-button__label {
1201
- align-items: center;
1202
- display: inline-flex;
1203
- justify-content: center;
1204
- }
1205
-
1206
- .wi-button__icon {
1207
- flex: 0 0 auto;
1208
- }
1209
-
1210
- .wi-button__badge {
1211
- align-items: center;
1212
- background: var(--wi-color-contrast);
1213
- border-radius: var(--wi-radius-full);
1214
- color: var(--wi-color-contrast-fg);
1215
- display: inline-flex;
1216
- font-size: 0.65rem;
1217
- font-weight: 700;
1218
- justify-content: center;
1219
- line-height: 1;
1220
- margin-inline-start: var(--wi-space-1);
1221
- min-width: 1.15rem;
1222
- padding: 0.2rem 0.35rem;
1223
- }
1224
-
1225
- .wi-button__badge--secondary {
1226
- background: color-mix(in srgb, var(--wi-color-text-muted) 25%, var(--wi-color-surface));
1227
- color: var(--wi-color-text);
1228
- }
1229
-
1230
- .wi-button__badge--success {
1231
- background: var(--wi-color-success);
1232
- color: var(--wi-color-on-emphasis);
1233
- }
1234
-
1235
- .wi-button__badge--info {
1236
- background: var(--wi-color-info);
1237
- color: var(--wi-color-on-emphasis);
1238
- }
1239
-
1240
- .wi-button__badge--warn {
1241
- background: var(--wi-color-warn);
1242
- color: var(--wi-color-on-emphasis);
1243
- }
1244
-
1245
- .wi-button__badge--danger {
1246
- background: var(--wi-color-danger);
1247
- color: var(--wi-color-on-emphasis);
1248
- }
1249
-
1250
- .wi-button__badge--contrast {
1251
- background: var(--wi-color-contrast);
1252
- color: var(--wi-color-contrast-fg);
1253
- }
1254
-
1255
- .wi-button__spinner {
1256
- animation: wi-button-spin 700ms linear infinite;
1257
- border: 2px solid currentColor;
1258
- border-right-color: transparent;
1259
- border-radius: var(--wi-radius-full);
1260
- height: 0.875rem;
1261
- width: 0.875rem;
1262
- }
1263
-
1264
- @keyframes wi-button-spin {
1265
- to {
1266
- transform: rotate(360deg);
1267
- }
1421
+ @keyframes wi-button-spin {
1422
+ to {
1423
+ transform: rotate(360deg);
1424
+ }
1268
1425
  }