@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/config-provider/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
  }
@@ -735,690 +749,838 @@
735
749
  line-height: 1;
736
750
  }
737
751
 
738
- .wi-button {
739
- --wi-button-bg: var(--wi-color-primary);
740
- --wi-button-fg: var(--wi-color-on-emphasis);
741
- --wi-button-border: var(--wi-color-primary);
742
- --wi-button-hover-bg: var(--wi-color-primary-hover);
743
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
744
- --wi-button-hover-border: var(--wi-color-primary-hover);
745
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
746
- align-items: center;
747
- background: var(--wi-button-bg);
748
- border: 1px solid var(--wi-button-border);
749
- border-radius: var(--wi-radius-control);
750
- color: var(--wi-button-fg);
751
- cursor: pointer;
752
- display: inline-flex;
753
- flex-direction: row;
754
- font-size: var(--wi-control-font-medium);
755
- font-weight: 600;
756
- gap: var(--wi-space-2);
757
- justify-content: center;
758
- line-height: 1;
759
- min-height: var(--wi-control-height-medium);
760
- padding: 0 var(--wi-button-padding-x-medium);
761
- position: relative;
762
- transition:
763
- background-color var(--wi-motion-fast) var(--wi-motion-ease),
764
- border-color var(--wi-motion-fast) var(--wi-motion-ease),
765
- color var(--wi-motion-fast) var(--wi-motion-ease),
766
- box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
767
- vertical-align: middle;
768
- white-space: nowrap;
752
+ .wi-button {
753
+ --wi-button-padding-x-small: var(--wi-control-padding-x-small);
754
+ --wi-button-padding-x-medium: calc(
755
+ var(--wi-control-padding-x-medium) + var(--wi-space-1)
756
+ );
757
+ --wi-button-padding-x-large: calc(
758
+ var(--wi-control-padding-x-large) + var(--wi-space-1)
759
+ );
760
+ --wi-button-icon-stack-min-height: 3.25rem;
761
+ --wi-button-badge-min-width: 1.15rem;
762
+ --wi-button-spinner-size: 0.875rem;
763
+ --wi-button-bg: var(--wi-color-primary);
764
+ --wi-button-fg: var(--wi-color-on-emphasis);
765
+ --wi-button-border: var(--wi-color-primary);
766
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
767
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
768
+ --wi-button-hover-border: var(--wi-color-primary-hover);
769
+ --wi-button-active-bg: color-mix(
770
+ in srgb,
771
+ var(--wi-color-primary) 82%,
772
+ black
773
+ );
774
+ align-items: center;
775
+ background: var(--wi-button-bg);
776
+ border: 1px solid var(--wi-button-border);
777
+ border-radius: var(--wi-radius-control);
778
+ color: var(--wi-button-fg);
779
+ cursor: pointer;
780
+ display: inline-flex;
781
+ flex-direction: row;
782
+ font-size: var(--wi-control-font-medium);
783
+ font-weight: 600;
784
+ gap: var(--wi-space-2);
785
+ justify-content: center;
786
+ line-height: 1;
787
+ min-height: var(--wi-control-height-medium);
788
+ padding: 0 var(--wi-button-padding-x-medium);
789
+ position: relative;
790
+ transition:
791
+ background-color var(--wi-motion-fast) var(--wi-motion-ease),
792
+ border-color var(--wi-motion-fast) var(--wi-motion-ease),
793
+ color var(--wi-motion-fast) var(--wi-motion-ease),
794
+ box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
795
+ vertical-align: middle;
796
+ white-space: nowrap;
797
+ }
798
+
799
+ .wi-button:hover:not(:disabled) {
800
+ background: var(--wi-button-hover-bg);
801
+ border-color: var(--wi-button-hover-border);
802
+ color: var(--wi-button-hover-fg);
803
+ }
804
+
805
+ .wi-button:active:not(:disabled) {
806
+ background: var(--wi-button-active-bg);
807
+ }
808
+
809
+ /* Naive-style focus: soft glow, not outline-offset ring */
810
+ .wi-button:focus {
811
+ outline: none;
812
+ }
813
+
814
+ .wi-button:focus-visible {
815
+ box-shadow: var(--wi-focus-shadow);
816
+ outline: none;
817
+ }
818
+
819
+ .wi-button--primary {
820
+ --wi-button-bg: var(--wi-color-primary);
821
+ --wi-button-fg: var(--wi-color-on-emphasis);
822
+ --wi-button-border: var(--wi-color-primary);
823
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
824
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
825
+ --wi-button-hover-border: var(--wi-color-primary-hover);
826
+ --wi-button-active-bg: color-mix(
827
+ in srgb,
828
+ var(--wi-color-primary) 82%,
829
+ black
830
+ );
831
+ }
832
+
833
+ .wi-button--secondary {
834
+ --wi-button-bg: color-mix(
835
+ in srgb,
836
+ var(--wi-color-text-muted) 16%,
837
+ var(--wi-color-surface)
838
+ );
839
+ --wi-button-fg: var(--wi-color-text);
840
+ --wi-button-border: transparent;
841
+ --wi-button-hover-bg: color-mix(
842
+ in srgb,
843
+ var(--wi-color-text-muted) 24%,
844
+ var(--wi-color-surface)
845
+ );
846
+ --wi-button-hover-fg: var(--wi-color-text);
847
+ --wi-button-hover-border: transparent;
848
+ --wi-button-active-bg: color-mix(
849
+ in srgb,
850
+ var(--wi-color-text-muted) 32%,
851
+ var(--wi-color-surface)
852
+ );
853
+ }
854
+
855
+ .wi-button--success {
856
+ --wi-button-bg: var(--wi-color-success);
857
+ --wi-button-fg: var(--wi-color-on-emphasis);
858
+ --wi-button-border: var(--wi-color-success);
859
+ --wi-button-hover-bg: color-mix(
860
+ in srgb,
861
+ var(--wi-color-success) 85%,
862
+ black
863
+ );
864
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
865
+ --wi-button-hover-border: color-mix(
866
+ in srgb,
867
+ var(--wi-color-success) 85%,
868
+ black
869
+ );
870
+ --wi-button-active-bg: color-mix(
871
+ in srgb,
872
+ var(--wi-color-success) 75%,
873
+ black
874
+ );
875
+ }
876
+
877
+ .wi-button--info {
878
+ --wi-button-bg: var(--wi-color-info);
879
+ --wi-button-fg: var(--wi-color-on-emphasis);
880
+ --wi-button-border: var(--wi-color-info);
881
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
882
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
883
+ --wi-button-hover-border: color-mix(
884
+ in srgb,
885
+ var(--wi-color-info) 85%,
886
+ black
887
+ );
888
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
889
+ }
890
+
891
+ .wi-button--warn {
892
+ --wi-button-bg: var(--wi-color-warn);
893
+ --wi-button-fg: var(--wi-color-on-emphasis);
894
+ --wi-button-border: var(--wi-color-warn);
895
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
896
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
897
+ --wi-button-hover-border: color-mix(
898
+ in srgb,
899
+ var(--wi-color-warn) 85%,
900
+ black
901
+ );
902
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
903
+ }
904
+
905
+ .wi-button--help {
906
+ --wi-button-bg: var(--wi-color-help);
907
+ --wi-button-fg: var(--wi-color-on-emphasis);
908
+ --wi-button-border: var(--wi-color-help);
909
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
910
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
911
+ --wi-button-hover-border: color-mix(
912
+ in srgb,
913
+ var(--wi-color-help) 85%,
914
+ black
915
+ );
916
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
917
+ }
918
+
919
+ .wi-button--danger {
920
+ --wi-button-bg: var(--wi-color-danger);
921
+ --wi-button-fg: var(--wi-color-on-emphasis);
922
+ --wi-button-border: var(--wi-color-danger);
923
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
924
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
925
+ --wi-button-hover-border: color-mix(
926
+ in srgb,
927
+ var(--wi-color-danger) 85%,
928
+ black
929
+ );
930
+ --wi-button-active-bg: color-mix(
931
+ in srgb,
932
+ var(--wi-color-danger) 75%,
933
+ black
934
+ );
935
+ }
936
+
937
+ .wi-button--contrast {
938
+ --wi-button-bg: var(--wi-color-contrast);
939
+ --wi-button-fg: var(--wi-color-contrast-fg);
940
+ --wi-button-border: var(--wi-color-contrast);
941
+ --wi-button-hover-bg: var(--wi-color-contrast-hover);
942
+ --wi-button-hover-fg: var(--wi-color-contrast-fg);
943
+ --wi-button-hover-border: var(--wi-color-contrast-hover);
944
+ --wi-button-active-bg: var(--wi-color-contrast-active);
945
+ }
946
+
947
+ .wi-button--outlined {
948
+ --wi-button-bg: transparent;
949
+ --wi-button-fg: var(--wi-button-border);
950
+ --wi-button-hover-bg: color-mix(
951
+ in srgb,
952
+ var(--wi-button-border) 10%,
953
+ transparent
954
+ );
955
+ --wi-button-hover-fg: var(--wi-button-border);
956
+ --wi-button-hover-border: var(--wi-button-border);
957
+ --wi-button-active-bg: color-mix(
958
+ in srgb,
959
+ var(--wi-button-border) 16%,
960
+ transparent
961
+ );
962
+ }
963
+
964
+ .wi-button--secondary.wi-button--outlined {
965
+ --wi-button-border: var(--wi-color-border);
966
+ --wi-button-fg: var(--wi-color-text);
967
+ --wi-button-hover-fg: var(--wi-color-text);
968
+ }
969
+
970
+ .wi-button--text,
971
+ .wi-button--link {
972
+ --wi-button-bg: transparent;
973
+ --wi-button-border: transparent;
974
+ --wi-button-fg: var(--wi-color-primary);
975
+ --wi-button-hover-bg: color-mix(
976
+ in srgb,
977
+ var(--wi-color-primary) 10%,
978
+ transparent
979
+ );
980
+ --wi-button-hover-fg: var(--wi-color-primary);
981
+ --wi-button-hover-border: transparent;
982
+ --wi-button-active-bg: color-mix(
983
+ in srgb,
984
+ var(--wi-color-primary) 16%,
985
+ transparent
986
+ );
987
+ }
988
+
989
+ .wi-button--secondary.wi-button--text,
990
+ .wi-button--secondary.wi-button--link {
991
+ --wi-button-fg: var(--wi-color-text-muted);
992
+ --wi-button-hover-bg: color-mix(
993
+ in srgb,
994
+ var(--wi-color-text-muted) 12%,
995
+ transparent
996
+ );
997
+ --wi-button-hover-fg: var(--wi-color-text);
998
+ }
999
+
1000
+ .wi-button--success.wi-button--text,
1001
+ .wi-button--success.wi-button--link,
1002
+ .wi-button--success.wi-button--outlined {
1003
+ --wi-button-fg: var(--wi-color-success);
1004
+ --wi-button-border: var(--wi-color-success);
1005
+ --wi-button-hover-bg: color-mix(
1006
+ in srgb,
1007
+ var(--wi-color-success) 10%,
1008
+ transparent
1009
+ );
1010
+ --wi-button-hover-fg: var(--wi-color-success);
1011
+ --wi-button-hover-border: var(--wi-color-success);
1012
+ }
1013
+
1014
+ .wi-button--info.wi-button--text,
1015
+ .wi-button--info.wi-button--link,
1016
+ .wi-button--info.wi-button--outlined {
1017
+ --wi-button-fg: var(--wi-color-info);
1018
+ --wi-button-border: var(--wi-color-info);
1019
+ --wi-button-hover-bg: color-mix(
1020
+ in srgb,
1021
+ var(--wi-color-info) 10%,
1022
+ transparent
1023
+ );
1024
+ --wi-button-hover-fg: var(--wi-color-info);
1025
+ --wi-button-hover-border: var(--wi-color-info);
1026
+ }
1027
+
1028
+ .wi-button--warn.wi-button--text,
1029
+ .wi-button--warn.wi-button--link,
1030
+ .wi-button--warn.wi-button--outlined {
1031
+ --wi-button-fg: var(--wi-color-warn);
1032
+ --wi-button-border: var(--wi-color-warn);
1033
+ --wi-button-hover-bg: color-mix(
1034
+ in srgb,
1035
+ var(--wi-color-warn) 10%,
1036
+ transparent
1037
+ );
1038
+ --wi-button-hover-fg: var(--wi-color-warn);
1039
+ --wi-button-hover-border: var(--wi-color-warn);
1040
+ }
1041
+
1042
+ .wi-button--help.wi-button--text,
1043
+ .wi-button--help.wi-button--link,
1044
+ .wi-button--help.wi-button--outlined {
1045
+ --wi-button-fg: var(--wi-color-help);
1046
+ --wi-button-border: var(--wi-color-help);
1047
+ --wi-button-hover-bg: color-mix(
1048
+ in srgb,
1049
+ var(--wi-color-help) 10%,
1050
+ transparent
1051
+ );
1052
+ --wi-button-hover-fg: var(--wi-color-help);
1053
+ --wi-button-hover-border: var(--wi-color-help);
1054
+ }
1055
+
1056
+ .wi-button--danger.wi-button--text,
1057
+ .wi-button--danger.wi-button--link,
1058
+ .wi-button--danger.wi-button--outlined {
1059
+ --wi-button-fg: var(--wi-color-danger);
1060
+ --wi-button-border: var(--wi-color-danger);
1061
+ --wi-button-hover-bg: color-mix(
1062
+ in srgb,
1063
+ var(--wi-color-danger) 10%,
1064
+ transparent
1065
+ );
1066
+ --wi-button-hover-fg: var(--wi-color-danger);
1067
+ --wi-button-hover-border: var(--wi-color-danger);
1068
+ }
1069
+
1070
+ .wi-button--contrast.wi-button--text,
1071
+ .wi-button--contrast.wi-button--link,
1072
+ .wi-button--contrast.wi-button--outlined {
1073
+ --wi-button-fg: var(--wi-color-contrast);
1074
+ --wi-button-border: var(--wi-color-contrast);
1075
+ --wi-button-hover-bg: color-mix(
1076
+ in srgb,
1077
+ var(--wi-color-contrast) 10%,
1078
+ transparent
1079
+ );
1080
+ --wi-button-hover-fg: var(--wi-color-contrast);
1081
+ --wi-button-hover-border: var(--wi-color-contrast);
1082
+ }
1083
+
1084
+ .wi-button--plain.wi-button--text,
1085
+ .wi-button--plain.wi-button--outlined,
1086
+ .wi-button--plain.wi-button--link {
1087
+ --wi-button-fg: var(--wi-color-text-muted);
1088
+ --wi-button-border: var(--wi-color-border);
1089
+ --wi-button-hover-bg: color-mix(
1090
+ in srgb,
1091
+ var(--wi-color-text-muted) 12%,
1092
+ transparent
1093
+ );
1094
+ --wi-button-hover-fg: var(--wi-color-text);
1095
+ --wi-button-hover-border: var(--wi-color-border);
1096
+ }
1097
+
1098
+ .wi-button--link {
1099
+ height: auto;
1100
+ min-height: 0;
1101
+ padding: 0;
1102
+ }
1103
+
1104
+ .wi-button--link:hover:not(:disabled) {
1105
+ text-decoration: underline;
1106
+ }
1107
+
1108
+ .wi-button--ghost {
1109
+ --wi-button-bg: transparent;
1110
+ --wi-button-fg: var(--wi-button-border);
1111
+ --wi-button-hover-bg: color-mix(
1112
+ in srgb,
1113
+ var(--wi-button-border) 12%,
1114
+ transparent
1115
+ );
1116
+ --wi-button-hover-fg: var(--wi-button-border);
1117
+ --wi-button-hover-border: var(--wi-button-border);
1118
+ --wi-button-active-bg: color-mix(
1119
+ in srgb,
1120
+ var(--wi-button-border) 18%,
1121
+ transparent
1122
+ );
1123
+ }
1124
+
1125
+ .wi-button--secondary.wi-button--ghost {
1126
+ --wi-button-border: var(--wi-color-border);
1127
+ --wi-button-fg: var(--wi-color-text);
1128
+ --wi-button-hover-fg: var(--wi-color-text);
1129
+ }
1130
+
1131
+ .wi-button--success.wi-button--ghost {
1132
+ --wi-button-fg: var(--wi-color-success);
1133
+ --wi-button-border: var(--wi-color-success);
1134
+ }
1135
+
1136
+ .wi-button--info.wi-button--ghost {
1137
+ --wi-button-fg: var(--wi-color-info);
1138
+ --wi-button-border: var(--wi-color-info);
1139
+ }
1140
+
1141
+ .wi-button--warn.wi-button--ghost {
1142
+ --wi-button-fg: var(--wi-color-warn);
1143
+ --wi-button-border: var(--wi-color-warn);
1144
+ }
1145
+
1146
+ .wi-button--help.wi-button--ghost {
1147
+ --wi-button-fg: var(--wi-color-help);
1148
+ --wi-button-border: var(--wi-color-help);
1149
+ }
1150
+
1151
+ .wi-button--danger.wi-button--ghost {
1152
+ --wi-button-fg: var(--wi-color-danger);
1153
+ --wi-button-border: var(--wi-color-danger);
1154
+ }
1155
+
1156
+ .wi-button--contrast.wi-button--ghost {
1157
+ --wi-button-fg: var(--wi-color-contrast);
1158
+ --wi-button-border: var(--wi-color-contrast);
769
1159
  }
770
1160
 
771
- .wi-button:hover:not(:disabled) {
772
- background: var(--wi-button-hover-bg);
773
- border-color: var(--wi-button-hover-border);
774
- color: var(--wi-button-hover-fg);
1161
+ .wi-button--quaternary {
1162
+ --wi-button-bg: transparent;
1163
+ --wi-button-border: transparent;
1164
+ --wi-button-fg: var(--wi-color-text);
1165
+ --wi-button-hover-bg: color-mix(
1166
+ in srgb,
1167
+ var(--wi-color-text-muted) 10%,
1168
+ transparent
1169
+ );
1170
+ --wi-button-hover-fg: var(--wi-color-text);
1171
+ --wi-button-hover-border: transparent;
1172
+ --wi-button-active-bg: color-mix(
1173
+ in srgb,
1174
+ var(--wi-color-text-muted) 16%,
1175
+ transparent
1176
+ );
775
1177
  }
776
1178
 
777
- .wi-button:active:not(:disabled) {
778
- background: var(--wi-button-active-bg);
1179
+ .wi-button--custom {
1180
+ --wi-button-bg: var(--wi-button-color);
1181
+ --wi-button-fg: var(--wi-color-on-emphasis);
1182
+ --wi-button-border: var(--wi-button-color);
1183
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
1184
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
1185
+ --wi-button-hover-border: color-mix(
1186
+ in srgb,
1187
+ var(--wi-button-color) 85%,
1188
+ black
1189
+ );
1190
+ --wi-button-active-bg: color-mix(
1191
+ in srgb,
1192
+ var(--wi-button-color) 75%,
1193
+ black
1194
+ );
779
1195
  }
780
1196
 
781
- /* Naive-style focus: soft glow, not outline-offset ring */
782
- .wi-button:focus {
783
- outline: none;
1197
+ .wi-button--custom.wi-button--outlined,
1198
+ .wi-button--custom.wi-button--ghost,
1199
+ .wi-button--custom.wi-button--text,
1200
+ .wi-button--custom.wi-button--quaternary,
1201
+ .wi-button--custom.wi-button--link {
1202
+ --wi-button-bg: transparent;
1203
+ --wi-button-fg: var(--wi-button-color);
1204
+ --wi-button-border: var(--wi-button-color);
1205
+ --wi-button-hover-bg: color-mix(
1206
+ in srgb,
1207
+ var(--wi-button-color) 12%,
1208
+ transparent
1209
+ );
1210
+ --wi-button-hover-fg: var(--wi-button-color);
1211
+ --wi-button-hover-border: var(--wi-button-color);
784
1212
  }
785
1213
 
786
- .wi-button:focus-visible {
787
- box-shadow: var(--wi-focus-shadow);
788
- outline: none;
1214
+ .wi-button--custom.wi-button--text,
1215
+ .wi-button--custom.wi-button--quaternary,
1216
+ .wi-button--custom.wi-button--link {
1217
+ --wi-button-border: transparent;
1218
+ --wi-button-hover-border: transparent;
789
1219
  }
790
1220
 
791
- .wi-button--primary {
792
- --wi-button-bg: var(--wi-color-primary);
793
- --wi-button-fg: var(--wi-color-on-emphasis);
794
- --wi-button-border: var(--wi-color-primary);
795
- --wi-button-hover-bg: var(--wi-color-primary-hover);
796
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
797
- --wi-button-hover-border: var(--wi-color-primary-hover);
798
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
799
- }
800
-
801
- .wi-button--secondary {
802
- --wi-button-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, var(--wi-color-surface));
803
- --wi-button-fg: var(--wi-color-text);
804
- --wi-button-border: transparent;
805
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 24%, var(--wi-color-surface));
806
- --wi-button-hover-fg: var(--wi-color-text);
807
- --wi-button-hover-border: transparent;
808
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 32%, var(--wi-color-surface));
809
- }
810
-
811
- .wi-button--success {
812
- --wi-button-bg: var(--wi-color-success);
813
- --wi-button-fg: var(--wi-color-on-emphasis);
814
- --wi-button-border: var(--wi-color-success);
815
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 85%, black);
816
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
817
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-success) 85%, black);
818
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-success) 75%, black);
819
- }
820
-
821
- .wi-button--info {
822
- --wi-button-bg: var(--wi-color-info);
823
- --wi-button-fg: var(--wi-color-on-emphasis);
824
- --wi-button-border: var(--wi-color-info);
825
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
826
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
827
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-info) 85%, black);
828
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
829
- }
830
-
831
- .wi-button--warn {
832
- --wi-button-bg: var(--wi-color-warn);
833
- --wi-button-fg: var(--wi-color-on-emphasis);
834
- --wi-button-border: var(--wi-color-warn);
835
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
836
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
837
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-warn) 85%, black);
838
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
839
- }
840
-
841
- .wi-button--help {
842
- --wi-button-bg: var(--wi-color-help);
843
- --wi-button-fg: var(--wi-color-on-emphasis);
844
- --wi-button-border: var(--wi-color-help);
845
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
846
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
847
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-help) 85%, black);
848
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
849
- }
850
-
851
- .wi-button--danger {
852
- --wi-button-bg: var(--wi-color-danger);
853
- --wi-button-fg: var(--wi-color-on-emphasis);
854
- --wi-button-border: var(--wi-color-danger);
855
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
856
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
857
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-danger) 85%, black);
858
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-danger) 75%, black);
859
- }
860
-
861
- .wi-button--contrast {
862
- --wi-button-bg: var(--wi-color-contrast);
863
- --wi-button-fg: var(--wi-color-contrast-fg);
864
- --wi-button-border: var(--wi-color-contrast);
865
- --wi-button-hover-bg: var(--wi-color-contrast-hover);
866
- --wi-button-hover-fg: var(--wi-color-contrast-fg);
867
- --wi-button-hover-border: var(--wi-color-contrast-hover);
868
- --wi-button-active-bg: var(--wi-color-contrast-active);
869
- }
870
-
871
- .wi-button--outlined {
872
- --wi-button-bg: transparent;
873
- --wi-button-fg: var(--wi-button-border);
874
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 10%, transparent);
875
- --wi-button-hover-fg: var(--wi-button-border);
876
- --wi-button-hover-border: var(--wi-button-border);
877
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 16%, transparent);
878
- }
879
-
880
- .wi-button--secondary.wi-button--outlined {
881
- --wi-button-border: var(--wi-color-border);
882
- --wi-button-fg: var(--wi-color-text);
883
- --wi-button-hover-fg: var(--wi-color-text);
884
- }
885
-
886
- .wi-button--text,
887
- .wi-button--link {
888
- --wi-button-bg: transparent;
889
- --wi-button-border: transparent;
890
- --wi-button-fg: var(--wi-color-primary);
891
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
892
- --wi-button-hover-fg: var(--wi-color-primary);
893
- --wi-button-hover-border: transparent;
894
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 16%, transparent);
895
- }
896
-
897
- .wi-button--secondary.wi-button--text,
898
- .wi-button--secondary.wi-button--link {
899
- --wi-button-fg: var(--wi-color-text-muted);
900
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
901
- --wi-button-hover-fg: var(--wi-color-text);
902
- }
903
-
904
- .wi-button--success.wi-button--text,
905
- .wi-button--success.wi-button--link,
906
- .wi-button--success.wi-button--outlined {
907
- --wi-button-fg: var(--wi-color-success);
908
- --wi-button-border: var(--wi-color-success);
909
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 10%, transparent);
910
- --wi-button-hover-fg: var(--wi-color-success);
911
- --wi-button-hover-border: var(--wi-color-success);
912
- }
913
-
914
- .wi-button--info.wi-button--text,
915
- .wi-button--info.wi-button--link,
916
- .wi-button--info.wi-button--outlined {
917
- --wi-button-fg: var(--wi-color-info);
918
- --wi-button-border: var(--wi-color-info);
919
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 10%, transparent);
920
- --wi-button-hover-fg: var(--wi-color-info);
921
- --wi-button-hover-border: var(--wi-color-info);
922
- }
1221
+ .wi-button-group {
1222
+ display: inline-flex;
1223
+ vertical-align: middle;
1224
+ }
923
1225
 
924
- .wi-button--warn.wi-button--text,
925
- .wi-button--warn.wi-button--link,
926
- .wi-button--warn.wi-button--outlined {
927
- --wi-button-fg: var(--wi-color-warn);
928
- --wi-button-border: var(--wi-color-warn);
929
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 10%, transparent);
930
- --wi-button-hover-fg: var(--wi-color-warn);
931
- --wi-button-hover-border: var(--wi-color-warn);
1226
+ .wi-button-group--fluid {
1227
+ display: flex;
1228
+ width: 100%;
932
1229
  }
933
1230
 
934
- .wi-button--help.wi-button--text,
935
- .wi-button--help.wi-button--link,
936
- .wi-button--help.wi-button--outlined {
937
- --wi-button-fg: var(--wi-color-help);
938
- --wi-button-border: var(--wi-color-help);
939
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 10%, transparent);
940
- --wi-button-hover-fg: var(--wi-color-help);
941
- --wi-button-hover-border: var(--wi-color-help);
1231
+ .wi-button-group--fluid > .wi-button {
1232
+ flex: 1;
942
1233
  }
943
1234
 
944
- .wi-button--danger.wi-button--text,
945
- .wi-button--danger.wi-button--link,
946
- .wi-button--danger.wi-button--outlined {
947
- --wi-button-fg: var(--wi-color-danger);
948
- --wi-button-border: var(--wi-color-danger);
949
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 10%, transparent);
950
- --wi-button-hover-fg: var(--wi-color-danger);
951
- --wi-button-hover-border: var(--wi-color-danger);
1235
+ .wi-button-group > .wi-button {
1236
+ border-radius: 0;
1237
+ margin: 0;
952
1238
  }
953
1239
 
954
- .wi-button--contrast.wi-button--text,
955
- .wi-button--contrast.wi-button--link,
956
- .wi-button--contrast.wi-button--outlined {
957
- --wi-button-fg: var(--wi-color-contrast);
958
- --wi-button-border: var(--wi-color-contrast);
959
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-contrast) 10%, transparent);
960
- --wi-button-hover-fg: var(--wi-color-contrast);
961
- --wi-button-hover-border: var(--wi-color-contrast);
1240
+ .wi-button-group > .wi-button + .wi-button {
1241
+ margin-left: -1px;
962
1242
  }
963
1243
 
964
- .wi-button--plain.wi-button--text,
965
- .wi-button--plain.wi-button--outlined,
966
- .wi-button--plain.wi-button--link {
967
- --wi-button-fg: var(--wi-color-text-muted);
968
- --wi-button-border: var(--wi-color-border);
969
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
970
- --wi-button-hover-fg: var(--wi-color-text);
971
- --wi-button-hover-border: var(--wi-color-border);
1244
+ .wi-button-group > .wi-button:first-child {
1245
+ border-top-left-radius: var(--wi-radius-md);
1246
+ border-bottom-left-radius: var(--wi-radius-md);
972
1247
  }
973
1248
 
974
- .wi-button--link {
975
- height: auto;
976
- min-height: 0;
977
- padding: 0;
1249
+ .wi-button-group > .wi-button:last-child {
1250
+ border-top-right-radius: var(--wi-radius-md);
1251
+ border-bottom-right-radius: var(--wi-radius-md);
978
1252
  }
979
1253
 
980
- .wi-button--link:hover:not(:disabled) {
981
- text-decoration: underline;
1254
+ .wi-button--raised {
1255
+ box-shadow: 0 0.25rem 0.75rem
1256
+ color-mix(in srgb, var(--wi-color-text) 14%, transparent);
982
1257
  }
983
1258
 
984
- .wi-button--ghost {
985
- --wi-button-bg: transparent;
986
- --wi-button-fg: var(--wi-button-border);
987
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 12%, transparent);
988
- --wi-button-hover-fg: var(--wi-button-border);
989
- --wi-button-hover-border: var(--wi-button-border);
990
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 18%, transparent);
1259
+ .wi-button--rounded {
1260
+ border-radius: var(--wi-radius-full);
991
1261
  }
992
1262
 
993
- .wi-button--secondary.wi-button--ghost {
994
- --wi-button-border: var(--wi-color-border);
995
- --wi-button-fg: var(--wi-color-text);
996
- --wi-button-hover-fg: var(--wi-color-text);
1263
+ .wi-button--icon-only {
1264
+ gap: 0;
1265
+ min-width: var(--wi-control-height-medium);
1266
+ padding: 0;
1267
+ width: var(--wi-control-height-medium);
997
1268
  }
998
1269
 
999
- .wi-button--success.wi-button--ghost {
1000
- --wi-button-fg: var(--wi-color-success);
1001
- --wi-button-border: var(--wi-color-success);
1270
+ .wi-button--icon-only.wi-button--small {
1271
+ min-width: var(--wi-control-height-small);
1272
+ width: var(--wi-control-height-small);
1002
1273
  }
1003
1274
 
1004
- .wi-button--info.wi-button--ghost {
1005
- --wi-button-fg: var(--wi-color-info);
1006
- --wi-button-border: var(--wi-color-info);
1275
+ .wi-button--icon-only.wi-button--large {
1276
+ min-width: var(--wi-control-height-large);
1277
+ width: var(--wi-control-height-large);
1007
1278
  }
1008
1279
 
1009
- .wi-button--warn.wi-button--ghost {
1010
- --wi-button-fg: var(--wi-color-warn);
1011
- --wi-button-border: var(--wi-color-warn);
1280
+ .wi-button--icon-right {
1281
+ flex-direction: row-reverse;
1012
1282
  }
1013
1283
 
1014
- .wi-button--help.wi-button--ghost {
1015
- --wi-button-fg: var(--wi-color-help);
1016
- --wi-button-border: var(--wi-color-help);
1284
+ .wi-button--icon-top {
1285
+ flex-direction: column;
1286
+ min-height: var(--wi-button-icon-stack-min-height);
1287
+ padding-block: var(--wi-space-2);
1017
1288
  }
1018
1289
 
1019
- .wi-button--danger.wi-button--ghost {
1020
- --wi-button-fg: var(--wi-color-danger);
1021
- --wi-button-border: var(--wi-color-danger);
1290
+ .wi-button--icon-bottom {
1291
+ flex-direction: column-reverse;
1292
+ min-height: var(--wi-button-icon-stack-min-height);
1293
+ padding-block: var(--wi-space-2);
1022
1294
  }
1023
1295
 
1024
- .wi-button--contrast.wi-button--ghost {
1025
- --wi-button-fg: var(--wi-color-contrast);
1026
- --wi-button-border: var(--wi-color-contrast);
1296
+ .wi-button--fluid {
1297
+ display: flex;
1298
+ width: 100%;
1027
1299
  }
1028
1300
 
1029
- .wi-button--quaternary {
1030
- --wi-button-bg: transparent;
1031
- --wi-button-border: transparent;
1032
- --wi-button-fg: var(--wi-color-text);
1033
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 10%, transparent);
1034
- --wi-button-hover-fg: var(--wi-color-text);
1035
- --wi-button-hover-border: transparent;
1036
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, transparent);
1301
+ .wi-button--small {
1302
+ font-size: var(--wi-control-font-small);
1303
+ min-height: var(--wi-control-height-small);
1304
+ padding: 0 var(--wi-button-padding-x-small);
1037
1305
  }
1038
1306
 
1039
- .wi-button--custom {
1040
- --wi-button-bg: var(--wi-button-color);
1041
- --wi-button-fg: var(--wi-color-on-emphasis);
1042
- --wi-button-border: var(--wi-button-color);
1043
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
1044
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
1045
- --wi-button-hover-border: color-mix(in srgb, var(--wi-button-color) 85%, black);
1046
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-color) 75%, black);
1307
+ .wi-button--large {
1308
+ font-size: var(--wi-control-font-large);
1309
+ min-height: var(--wi-control-height-large);
1310
+ padding: 0 var(--wi-button-padding-x-large);
1047
1311
  }
1048
1312
 
1049
- .wi-button--custom.wi-button--outlined,
1050
- .wi-button--custom.wi-button--ghost,
1051
- .wi-button--custom.wi-button--text,
1052
- .wi-button--custom.wi-button--quaternary,
1053
- .wi-button--custom.wi-button--link {
1054
- --wi-button-bg: transparent;
1055
- --wi-button-fg: var(--wi-button-color);
1056
- --wi-button-border: var(--wi-button-color);
1057
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 12%, transparent);
1058
- --wi-button-hover-fg: var(--wi-button-color);
1059
- --wi-button-hover-border: var(--wi-button-color);
1313
+ .wi-button__icon,
1314
+ .wi-button__label {
1315
+ align-items: center;
1316
+ display: inline-flex;
1317
+ justify-content: center;
1060
1318
  }
1061
1319
 
1062
- .wi-button--custom.wi-button--text,
1063
- .wi-button--custom.wi-button--quaternary,
1064
- .wi-button--custom.wi-button--link {
1065
- --wi-button-border: transparent;
1066
- --wi-button-hover-border: transparent;
1320
+ .wi-button__icon {
1321
+ flex: 0 0 auto;
1067
1322
  }
1068
1323
 
1069
- .wi-button-group {
1070
- display: inline-flex;
1071
- vertical-align: middle;
1324
+ .wi-button__badge {
1325
+ align-items: center;
1326
+ background: var(--wi-color-contrast);
1327
+ border-radius: var(--wi-radius-full);
1328
+ color: var(--wi-color-contrast-fg);
1329
+ display: inline-flex;
1330
+ font-size: var(--wi-font-size-xs);
1331
+ font-weight: 700;
1332
+ justify-content: center;
1333
+ line-height: 1;
1334
+ margin-inline-start: var(--wi-space-1);
1335
+ min-width: var(--wi-button-badge-min-width);
1336
+ padding: var(--wi-space-1) var(--wi-space-2);
1072
1337
  }
1073
1338
 
1074
- .wi-button-group--fluid {
1075
- display: flex;
1076
- width: 100%;
1339
+ .wi-button__badge--secondary {
1340
+ background: color-mix(
1341
+ in srgb,
1342
+ var(--wi-color-text-muted) 25%,
1343
+ var(--wi-color-surface)
1344
+ );
1345
+ color: var(--wi-color-text);
1077
1346
  }
1078
1347
 
1079
- .wi-button-group--fluid > .wi-button {
1080
- flex: 1;
1348
+ .wi-button__badge--success {
1349
+ background: var(--wi-color-success);
1350
+ color: var(--wi-color-on-emphasis);
1081
1351
  }
1082
1352
 
1083
- .wi-button-group > .wi-button {
1084
- border-radius: 0;
1085
- margin: 0;
1353
+ .wi-button__badge--info {
1354
+ background: var(--wi-color-info);
1355
+ color: var(--wi-color-on-emphasis);
1086
1356
  }
1087
1357
 
1088
- .wi-button-group > .wi-button + .wi-button {
1089
- margin-left: -1px;
1358
+ .wi-button__badge--warn {
1359
+ background: var(--wi-color-warn);
1360
+ color: var(--wi-color-on-emphasis);
1090
1361
  }
1091
1362
 
1092
- .wi-button-group > .wi-button:first-child {
1093
- border-top-left-radius: var(--wi-radius-md);
1094
- border-bottom-left-radius: var(--wi-radius-md);
1363
+ .wi-button__badge--danger {
1364
+ background: var(--wi-color-danger);
1365
+ color: var(--wi-color-on-emphasis);
1095
1366
  }
1096
1367
 
1097
- .wi-button-group > .wi-button:last-child {
1098
- border-top-right-radius: var(--wi-radius-md);
1099
- border-bottom-right-radius: var(--wi-radius-md);
1368
+ .wi-button__badge--contrast {
1369
+ background: var(--wi-color-contrast);
1370
+ color: var(--wi-color-contrast-fg);
1100
1371
  }
1101
1372
 
1102
- .wi-button--raised {
1103
- box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--wi-color-text) 14%, transparent);
1373
+ .wi-button__spinner {
1374
+ animation: wi-button-spin 700ms linear infinite;
1375
+ border: 2px solid currentColor;
1376
+ border-right-color: transparent;
1377
+ border-radius: var(--wi-radius-full);
1378
+ height: var(--wi-button-spinner-size);
1379
+ width: var(--wi-button-spinner-size);
1104
1380
  }
1105
1381
 
1106
- .wi-button--rounded {
1107
- border-radius: var(--wi-radius-full);
1382
+ @keyframes wi-button-spin {
1383
+ to {
1384
+ transform: rotate(360deg);
1385
+ }
1108
1386
  }
1109
1387
 
1110
- .wi-button--icon-only {
1111
- gap: 0;
1112
- min-width: var(--wi-control-height-medium);
1113
- padding: 0;
1114
- width: var(--wi-control-height-medium);
1388
+ .wi-input:focus {
1389
+ outline: none;
1115
1390
  }
1116
1391
 
1117
- .wi-button--icon-only.wi-button--small {
1118
- min-width: var(--wi-control-height-small);
1119
- width: var(--wi-control-height-small);
1392
+ .wi-input:hover:not(:disabled):not(:focus) {
1393
+ border-color: var(--wi-color-primary-hover);
1120
1394
  }
1121
1395
 
1122
- .wi-button--icon-only.wi-button--large {
1123
- min-width: var(--wi-control-height-large);
1124
- width: var(--wi-control-height-large);
1396
+ .wi-input:focus-visible {
1397
+ border-color: var(--wi-color-primary-hover);
1398
+ box-shadow: var(--wi-focus-shadow);
1399
+ outline: none;
1125
1400
  }
1126
1401
 
1127
- .wi-button--icon-right {
1128
- flex-direction: row-reverse;
1402
+ .wi-input--invalid:focus-visible {
1403
+ border-color: var(--wi-color-danger);
1404
+ box-shadow: var(--wi-focus-shadow-danger);
1129
1405
  }
1130
1406
 
1131
- .wi-button--icon-top {
1132
- flex-direction: column;
1133
- min-height: 3.25rem;
1134
- padding-block: var(--wi-space-2);
1407
+ .wi-input-field {
1408
+ display: grid;
1409
+ gap: var(--wi-space-2);
1135
1410
  }
1136
1411
 
1137
- .wi-button--icon-bottom {
1138
- flex-direction: column-reverse;
1139
- min-height: 3.25rem;
1140
- padding-block: var(--wi-space-2);
1412
+ .wi-input-field--fluid {
1413
+ width: 100%;
1141
1414
  }
1142
1415
 
1143
- .wi-button--fluid {
1144
- display: flex;
1145
- width: 100%;
1416
+ .wi-input-field__label {
1417
+ color: var(--wi-color-text);
1418
+ font-size: var(--wi-font-size-md);
1419
+ font-weight: 600;
1146
1420
  }
1147
1421
 
1148
- .wi-button--small {
1149
- font-size: var(--wi-control-font-small);
1150
- min-height: var(--wi-control-height-small);
1151
- padding: 0 var(--wi-button-padding-x-small);
1422
+ .wi-input-field__help {
1423
+ color: var(--wi-color-text-muted);
1424
+ font-size: var(--wi-font-size-xs);
1152
1425
  }
1153
1426
 
1154
- .wi-button--large {
1155
- font-size: var(--wi-control-font-large);
1156
- min-height: var(--wi-control-height-large);
1157
- padding: 0 var(--wi-button-padding-x-large);
1427
+ .wi-input-field__help--invalid {
1428
+ color: var(--wi-color-danger);
1158
1429
  }
1159
1430
 
1160
- .wi-button__icon,
1161
- .wi-button__label {
1162
- align-items: center;
1163
- display: inline-flex;
1164
- justify-content: center;
1431
+ .wi-input-field__control {
1432
+ position: relative;
1165
1433
  }
1166
1434
 
1167
- .wi-button__icon {
1168
- flex: 0 0 auto;
1435
+ .wi-input-field__control--prefixed,
1436
+ .wi-input-field__control--suffixed {
1437
+ align-items: center;
1438
+ display: flex;
1169
1439
  }
1170
1440
 
1171
- .wi-button__badge {
1172
- align-items: center;
1173
- background: var(--wi-color-contrast);
1174
- border-radius: var(--wi-radius-full);
1175
- color: var(--wi-color-contrast-fg);
1176
- display: inline-flex;
1177
- font-size: 0.65rem;
1178
- font-weight: 700;
1179
- justify-content: center;
1180
- line-height: 1;
1181
- margin-inline-start: var(--wi-space-1);
1182
- min-width: 1.15rem;
1183
- padding: 0.2rem 0.35rem;
1441
+ .wi-input-field__control--prefixed .wi-input,
1442
+ .wi-input-field__control--suffixed .wi-input {
1443
+ flex: 1 1 auto;
1444
+ min-width: 0;
1184
1445
  }
1185
1446
 
1186
- .wi-button__badge--secondary {
1187
- background: color-mix(in srgb, var(--wi-color-text-muted) 25%, var(--wi-color-surface));
1188
- color: var(--wi-color-text);
1447
+ .wi-input__prefix,
1448
+ .wi-input__suffix {
1449
+ align-items: center;
1450
+ color: var(--wi-color-text-muted);
1451
+ display: inline-flex;
1452
+ flex: 0 0 auto;
1453
+ font-size: var(--wi-font-size-md);
1454
+ gap: var(--wi-space-1);
1455
+ line-height: 1;
1456
+ pointer-events: none;
1457
+ position: absolute;
1458
+ top: 50%;
1459
+ transform: translateY(-50%);
1460
+ z-index: 1;
1189
1461
  }
1190
1462
 
1191
- .wi-button__badge--success {
1192
- background: var(--wi-color-success);
1193
- color: var(--wi-color-on-emphasis);
1463
+ .wi-input__prefix {
1464
+ left: var(--wi-control-padding-x-medium);
1194
1465
  }
1195
1466
 
1196
- .wi-button__badge--info {
1197
- background: var(--wi-color-info);
1198
- color: var(--wi-color-on-emphasis);
1467
+ .wi-input__suffix {
1468
+ right: var(--wi-control-padding-x-medium);
1199
1469
  }
1200
1470
 
1201
- .wi-button__badge--warn {
1202
- background: var(--wi-color-warn);
1203
- color: var(--wi-color-on-emphasis);
1471
+ .wi-input-field__control--clearable .wi-input__suffix {
1472
+ right: var(--wi-control-affix-gap);
1204
1473
  }
1205
1474
 
1206
- .wi-button__badge--danger {
1207
- background: var(--wi-color-danger);
1208
- color: var(--wi-color-on-emphasis);
1475
+ .wi-input--has-prefix {
1476
+ padding-left: var(--wi-control-affix-gap);
1209
1477
  }
1210
1478
 
1211
- .wi-button__badge--contrast {
1212
- background: var(--wi-color-contrast);
1213
- color: var(--wi-color-contrast-fg);
1479
+ .wi-input--has-suffix {
1480
+ padding-right: var(--wi-control-affix-gap);
1214
1481
  }
1215
1482
 
1216
- .wi-button__spinner {
1217
- animation: wi-button-spin 700ms linear infinite;
1218
- border: 2px solid currentColor;
1219
- border-right-color: transparent;
1220
- border-radius: var(--wi-radius-full);
1221
- height: 0.875rem;
1222
- width: 0.875rem;
1483
+ .wi-input-field__control--clearable.wi-input-field__control--suffixed
1484
+ .wi-input--has-suffix {
1485
+ padding-right: calc(
1486
+ var(--wi-control-affix-padding) + var(--wi-control-affix-gap)
1487
+ );
1223
1488
  }
1224
1489
 
1225
- @keyframes wi-button-spin {
1226
- to {
1227
- transform: rotate(360deg);
1228
- }
1490
+ .wi-input__prefix button,
1491
+ .wi-input__suffix button,
1492
+ .wi-input__prefix a,
1493
+ .wi-input__suffix a {
1494
+ pointer-events: auto;
1229
1495
  }
1230
1496
 
1231
- .wi-input:focus {
1232
- outline: none;
1233
- }
1234
-
1235
- .wi-input:hover:not(:disabled):not(:focus) {
1236
- border-color: var(--wi-color-primary-hover);
1237
- }
1238
-
1239
- .wi-input:focus-visible {
1240
- border-color: var(--wi-color-primary-hover);
1241
- box-shadow: var(--wi-focus-shadow);
1242
- outline: none;
1243
- }
1244
-
1245
- .wi-input--invalid:focus-visible,
1246
- .wi-input--error:focus-visible {
1247
- border-color: var(--wi-color-danger);
1248
- box-shadow: var(--wi-focus-shadow-danger);
1249
- }
1250
-
1251
- .wi-input-field {
1252
- display: grid;
1253
- gap: var(--wi-space-2);
1254
- }
1255
-
1256
- .wi-input-field--fluid {
1257
- width: 100%;
1258
- }
1259
-
1260
- .wi-input-field__label {
1261
- color: var(--wi-color-text);
1262
- font-size: var(--wi-font-size-md);
1263
- font-weight: 600;
1264
- }
1265
-
1266
- .wi-input-field__help {
1267
- color: var(--wi-color-text-muted);
1268
- font-size: var(--wi-font-size-xs);
1269
- }
1270
-
1271
- .wi-input-field__help--error {
1272
- color: var(--wi-color-danger);
1273
- }
1274
-
1275
- .wi-input-field__control {
1276
- position: relative;
1277
- }
1278
-
1279
- .wi-input-field__control--prefixed,
1280
- .wi-input-field__control--suffixed {
1281
- align-items: center;
1282
- display: flex;
1283
- }
1284
-
1285
- .wi-input-field__control--prefixed .wi-input,
1286
- .wi-input-field__control--suffixed .wi-input {
1287
- flex: 1 1 auto;
1288
- min-width: 0;
1289
- }
1290
-
1291
- .wi-input__prefix,
1292
- .wi-input__suffix {
1293
- align-items: center;
1294
- color: var(--wi-color-text-muted);
1295
- display: inline-flex;
1296
- flex: 0 0 auto;
1297
- font-size: var(--wi-font-size-md);
1298
- gap: var(--wi-space-1);
1299
- line-height: 1;
1300
- pointer-events: none;
1301
- position: absolute;
1302
- top: 50%;
1303
- transform: translateY(-50%);
1304
- z-index: 1;
1305
- }
1306
-
1307
- .wi-input__prefix {
1308
- left: var(--wi-control-padding-x-medium);
1309
- }
1310
-
1311
- .wi-input__suffix {
1312
- right: var(--wi-control-padding-x-medium);
1313
- }
1314
-
1315
- .wi-input-field__control--clearable .wi-input__suffix {
1316
- right: var(--wi-control-affix-gap);
1317
- }
1318
-
1319
- .wi-input--has-prefix {
1320
- padding-left: var(--wi-control-affix-gap);
1321
- }
1322
-
1323
- .wi-input--has-suffix {
1324
- padding-right: var(--wi-control-affix-gap);
1325
- }
1326
-
1327
- .wi-input-field__control--clearable.wi-input-field__control--suffixed .wi-input--has-suffix {
1328
- padding-right: 4.25rem;
1329
- }
1330
-
1331
- .wi-input__prefix button,
1332
- .wi-input__suffix button,
1333
- .wi-input__prefix a,
1334
- .wi-input__suffix a {
1335
- pointer-events: auto;
1336
- }
1337
-
1338
- .wi-input {
1339
- background: var(--wi-color-surface);
1340
- border: 1px solid var(--wi-color-border);
1341
- border-radius: var(--wi-radius-control);
1342
- color: var(--wi-color-text);
1343
- font-size: var(--wi-control-font-medium);
1344
- min-height: var(--wi-control-height-medium);
1345
- padding: 0 var(--wi-control-padding-x-medium);
1346
- transition:
1347
- border-color var(--wi-motion-fast) var(--wi-motion-ease),
1348
- box-shadow var(--wi-motion-fast) var(--wi-motion-ease),
1349
- background-color var(--wi-motion-fast) var(--wi-motion-ease);
1350
- }
1351
-
1352
- .wi-input--filled {
1353
- background: color-mix(in srgb, var(--wi-color-text-muted) 12%, var(--wi-color-surface));
1354
- border-color: transparent;
1355
- }
1356
-
1357
- .wi-input--fluid {
1358
- width: 100%;
1359
- }
1360
-
1361
- .wi-input--invalid,
1362
- .wi-input--error {
1363
- border-color: var(--wi-color-danger);
1364
- }
1365
-
1366
- .wi-input--small,
1367
- .wi-input--sm {
1368
- font-size: var(--wi-control-font-small);
1369
- min-height: var(--wi-control-height-small);
1370
- padding: 0 var(--wi-control-padding-x-small);
1371
- }
1372
-
1373
- .wi-input--normal {
1374
- font-size: var(--wi-control-font-medium);
1375
- min-height: var(--wi-control-height-medium);
1376
- padding: 0 var(--wi-control-padding-x-medium);
1377
- }
1378
-
1379
- .wi-input--large,
1380
- .wi-input--lg {
1381
- font-size: var(--wi-control-font-large);
1382
- min-height: var(--wi-control-height-large);
1383
- padding: 0 var(--wi-control-padding-x-large);
1384
- }
1385
-
1386
- .wi-input-field__control .wi-input {
1387
- width: 100%;
1388
- }
1389
-
1390
- .wi-input-field__control:has(.wi-input__clear) .wi-input {
1391
- padding-right: var(--wi-control-affix-padding);
1392
- }
1393
-
1394
- .wi-input__clear {
1395
- align-items: center;
1396
- background: transparent;
1397
- border: 0;
1398
- border-radius: var(--wi-radius-sm);
1399
- color: var(--wi-color-text-muted);
1400
- cursor: pointer;
1401
- display: flex;
1402
- font-size: var(--wi-font-size-lg);
1403
- height: var(--wi-control-affix-size);
1404
- justify-content: center;
1405
- padding: 0;
1406
- position: absolute;
1407
- right: var(--wi-space-1);
1408
- top: 50%;
1409
- transform: translateY(-50%);
1410
- width: var(--wi-control-affix-size);
1411
- }
1412
-
1413
- .wi-input__clear:focus-visible {
1414
- box-shadow: var(--wi-focus-shadow);
1415
- outline: none;
1416
- }
1417
-
1418
- .wi-input__clear:disabled {
1419
- cursor: not-allowed;
1420
- opacity: var(--wi-opacity-disabled);
1421
- }
1497
+ .wi-input {
1498
+ background: var(--wi-color-surface);
1499
+ border: 1px solid var(--wi-color-border);
1500
+ border-radius: var(--wi-radius-control);
1501
+ color: var(--wi-color-text);
1502
+ font-size: var(--wi-control-font-medium);
1503
+ min-height: var(--wi-control-height-medium);
1504
+ padding: 0 var(--wi-control-padding-x-medium);
1505
+ transition:
1506
+ border-color var(--wi-motion-fast) var(--wi-motion-ease),
1507
+ box-shadow var(--wi-motion-fast) var(--wi-motion-ease),
1508
+ background-color var(--wi-motion-fast) var(--wi-motion-ease);
1509
+ }
1510
+
1511
+ .wi-input--filled {
1512
+ background: color-mix(
1513
+ in srgb,
1514
+ var(--wi-color-text-muted) 12%,
1515
+ var(--wi-color-surface)
1516
+ );
1517
+ border-color: transparent;
1518
+ }
1519
+
1520
+ .wi-input--fluid {
1521
+ width: 100%;
1522
+ }
1523
+
1524
+ .wi-input--invalid {
1525
+ border-color: var(--wi-color-danger);
1526
+ }
1527
+
1528
+ .wi-input--small,
1529
+ .wi-input--sm {
1530
+ font-size: var(--wi-control-font-small);
1531
+ min-height: var(--wi-control-height-small);
1532
+ padding: 0 var(--wi-control-padding-x-small);
1533
+ }
1534
+
1535
+ .wi-input--normal {
1536
+ font-size: var(--wi-control-font-medium);
1537
+ min-height: var(--wi-control-height-medium);
1538
+ padding: 0 var(--wi-control-padding-x-medium);
1539
+ }
1540
+
1541
+ .wi-input--large,
1542
+ .wi-input--lg {
1543
+ font-size: var(--wi-control-font-large);
1544
+ min-height: var(--wi-control-height-large);
1545
+ padding: 0 var(--wi-control-padding-x-large);
1546
+ }
1547
+
1548
+ .wi-input-field__control .wi-input {
1549
+ width: 100%;
1550
+ }
1551
+
1552
+ .wi-input-field__control:has(.wi-input__clear) .wi-input {
1553
+ padding-right: var(--wi-control-affix-padding);
1554
+ }
1555
+
1556
+ .wi-input__clear {
1557
+ align-items: center;
1558
+ background: transparent;
1559
+ border: 0;
1560
+ border-radius: var(--wi-radius-sm);
1561
+ color: var(--wi-color-text-muted);
1562
+ cursor: pointer;
1563
+ display: flex;
1564
+ font-size: var(--wi-font-size-lg);
1565
+ height: var(--wi-control-affix-size);
1566
+ justify-content: center;
1567
+ padding: 0;
1568
+ position: absolute;
1569
+ right: var(--wi-space-1);
1570
+ top: 50%;
1571
+ transform: translateY(-50%);
1572
+ width: var(--wi-control-affix-size);
1573
+ }
1574
+
1575
+ .wi-input__clear:focus-visible {
1576
+ box-shadow: var(--wi-focus-shadow);
1577
+ outline: none;
1578
+ }
1579
+
1580
+ .wi-input__clear:disabled {
1581
+ cursor: not-allowed;
1582
+ opacity: var(--wi-opacity-disabled);
1583
+ }
1422
1584
 
1423
1585
  /* —— Panel: Space —— */
1424
1586
  .wi-space {