@cedar-design/ui-vue 1.1.0 → 1.1.1

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 (298) hide show
  1. package/es/_components/field-presentation/EditorPanel.vue.mjs +1 -1
  2. package/es/_components/field-presentation/editor-pending.mjs +4 -0
  3. package/es/_components/field-presentation/with-field-presentation.mjs +33 -7
  4. package/es/_components/picker-field/PickerField.vue.mjs +6 -12
  5. package/es/_components/picker-field/range-labels.mjs +16 -0
  6. package/es/_components/selected-options/style/index.css +33 -15
  7. package/es/_components/selection-field/use-selection-session.mjs +1 -0
  8. package/es/_components/virtual-list-v2/VirtualList2.vue.mjs +21 -3
  9. package/es/_utils/modal-focus.mjs +9 -2
  10. package/es/_utils/modal-surface.mjs +9 -3
  11. package/es/anchor/style/index.css +1 -1
  12. package/es/auto-complete/auto-complete.mjs +2 -2
  13. package/es/auto-complete/presentation.mjs +1 -0
  14. package/es/auto-complete/props.mjs +2 -0
  15. package/es/auto-complete/style/index.css +7 -2
  16. package/es/back-top/style/index.css +1 -1
  17. package/es/button/base.mjs +6 -0
  18. package/es/button/index.mjs +8 -8
  19. package/es/button/style/index.css +1 -1
  20. package/es/card/Card.vue.mjs +46 -12
  21. package/es/carousel/style/index.css +1 -1
  22. package/es/cascader/CascaderMenu.vue.mjs +2 -2
  23. package/es/cascader/cascader-option.mjs +11 -6
  24. package/es/cascader/field-adapter.mjs +1 -0
  25. package/es/cascader/props.mjs +2 -0
  26. package/es/cascader/style/index.css +36 -9
  27. package/es/cascader/use-cascader-focus.mjs +9 -6
  28. package/es/cedar.css +187 -79
  29. package/es/cedar.esm.js +21694 -21413
  30. package/es/checkbox/base.mjs +6 -0
  31. package/es/checkbox/checkbox-group.vue.mjs +2 -2
  32. package/es/checkbox/index.mjs +1 -1
  33. package/es/checkbox/presentation.mjs +2 -2
  34. package/es/checkbox/style/index.css +1 -1
  35. package/es/countdown/use-countdown.mjs +7 -2
  36. package/es/date/DatePanelActions.vue.mjs +1 -1
  37. package/es/date/DateShortcuts.vue.mjs +1 -1
  38. package/es/date/picker/panels/Footer2.vue.mjs +1 -1
  39. package/es/date/picker/panels/Shortcuts2.vue.mjs +1 -1
  40. package/es/date/picker/style/index.css +1 -1
  41. package/es/dialog/Dialog.vue.mjs +1 -1
  42. package/es/ellipsis/style/index.css +1 -1
  43. package/es/form/FormItem2.vue.mjs +35 -7
  44. package/es/form/FormItemLabel.vue.mjs +4 -3
  45. package/es/form/focus-explicit-label.mjs +28 -0
  46. package/es/form/style/index.css +1 -1
  47. package/es/input/base.mjs +7 -0
  48. package/es/input/index.mjs +16 -16
  49. package/es/layout/style/index.css +1 -1
  50. package/es/nav-menu/style/index.css +1 -1
  51. package/es/pagination/PageInput.vue.mjs +2 -2
  52. package/es/pagination/style/index.css +2 -2
  53. package/es/people-select/PeopleSelect.mjs +23 -50
  54. package/es/people-select/Person.vue.mjs +1 -1
  55. package/es/people-select/emits.mjs +1 -1
  56. package/es/people-select/people-select.mjs +6 -8
  57. package/es/people-select/presentation.mjs +3 -1
  58. package/es/people-select/props.mjs +9 -3
  59. package/es/people-select/selection.mjs +43 -0
  60. package/es/people-select/style/index.css +6 -0
  61. package/es/progress/style/index.css +2 -2
  62. package/es/radio/style/index.css +1 -1
  63. package/es/rate/style/index.css +1 -1
  64. package/es/ripple/index.mjs +57 -1
  65. package/es/scheduler/style/index.css +1 -1
  66. package/es/search/HistoryContent.vue.mjs +3 -3
  67. package/es/search/props.mjs +0 -1
  68. package/es/search/search.vue.mjs +1 -1
  69. package/es/select/props.mjs +2 -0
  70. package/es/select/select.mjs +10 -4
  71. package/es/select/style/index.css +22 -12
  72. package/es/select/use-select-controller.mjs +14 -2
  73. package/es/slider/Slider.vue.mjs +39 -21
  74. package/es/slider/SliderInput.vue.mjs +4 -2
  75. package/es/slider/style/index.css +2 -2
  76. package/es/steps/style/index.css +10 -10
  77. package/es/switch/Switch.vue.mjs +6 -1
  78. package/es/switch/style/index.css +1 -1
  79. package/es/table/structural-slot.mjs +17 -0
  80. package/es/table/style/index.css +2 -2
  81. package/es/table/table-tbody.mjs +2 -1
  82. package/es/table/table-td.mjs +3 -2
  83. package/es/table/table-th.mjs +3 -2
  84. package/es/table/table-thead.mjs +2 -1
  85. package/es/table/table-tr.mjs +3 -2
  86. package/es/table/table.mjs +22 -5
  87. package/es/tabs/style/index.css +1 -1
  88. package/es/time/picker/Panel2.vue.mjs +1 -1
  89. package/es/time/picker/RangePanel2.vue.mjs +1 -1
  90. package/es/tree/style/index.css +1 -1
  91. package/es/tree-select/panel.mjs +3 -1
  92. package/es/tree-select/presentation.mjs +1 -0
  93. package/es/tree-select/props.mjs +2 -0
  94. package/es/tree-select/style/index.css +49 -7
  95. package/es/trigger/interaction.mjs +1 -1
  96. package/es/trigger/popup-move-focus.mjs +6 -6
  97. package/es/trigger/position.mjs +41 -3
  98. package/es/trigger/positioner.mjs +28 -5
  99. package/es/trigger/trigger.mjs +1 -1
  100. package/es/upload/composables/use-upload-queue.mjs +9 -1
  101. package/es/upload/composables/use-uploader.mjs +31 -11
  102. package/es/upload/upload.vue.mjs +10 -2
  103. package/lib/_components/field-presentation/EditorPanel.vue.js +3 -3
  104. package/lib/_components/field-presentation/editor-pending.js +4 -0
  105. package/lib/_components/field-presentation/with-field-presentation.js +32 -6
  106. package/lib/_components/picker-field/PickerField.vue.js +6 -12
  107. package/lib/_components/picker-field/range-labels.js +16 -0
  108. package/lib/_components/selected-options/style/index.css +33 -15
  109. package/lib/_components/selection-field/use-selection-session.js +1 -0
  110. package/lib/_components/virtual-list-v2/VirtualList2.vue.js +20 -2
  111. package/lib/_utils/modal-focus.js +9 -2
  112. package/lib/_utils/modal-surface.js +9 -3
  113. package/lib/anchor/style/index.css +1 -1
  114. package/lib/auto-complete/auto-complete.js +2 -2
  115. package/lib/auto-complete/presentation.js +1 -0
  116. package/lib/auto-complete/props.js +2 -0
  117. package/lib/auto-complete/style/index.css +7 -2
  118. package/lib/back-top/style/index.css +1 -1
  119. package/lib/button/base.js +6 -0
  120. package/lib/button/index.js +4 -4
  121. package/lib/button/style/index.css +1 -1
  122. package/lib/card/Card.vue.js +47 -13
  123. package/lib/carousel/style/index.css +1 -1
  124. package/lib/cascader/CascaderMenu.vue.js +2 -2
  125. package/lib/cascader/cascader-option.js +11 -6
  126. package/lib/cascader/field-adapter.js +1 -0
  127. package/lib/cascader/props.js +2 -0
  128. package/lib/cascader/style/index.css +36 -9
  129. package/lib/cascader/use-cascader-focus.js +9 -6
  130. package/lib/cedar.cjs.js +1149 -738
  131. package/lib/cedar.css +187 -79
  132. package/lib/checkbox/base.js +6 -0
  133. package/lib/checkbox/index.js +4 -4
  134. package/lib/checkbox/presentation.js +2 -2
  135. package/lib/checkbox/style/index.css +1 -1
  136. package/lib/countdown/use-countdown.js +7 -2
  137. package/lib/date/DatePanelActions.vue.js +3 -3
  138. package/lib/date/DateShortcuts.vue.js +2 -2
  139. package/lib/date/picker/panels/Footer2.vue.js +2 -2
  140. package/lib/date/picker/panels/Shortcuts2.vue.js +2 -2
  141. package/lib/date/picker/style/index.css +1 -1
  142. package/lib/dialog/Dialog.vue.js +3 -3
  143. package/lib/ellipsis/style/index.css +1 -1
  144. package/lib/form/FormItem2.vue.js +35 -7
  145. package/lib/form/FormItemLabel.vue.js +3 -2
  146. package/lib/form/focus-explicit-label.js +28 -0
  147. package/lib/form/style/index.css +1 -1
  148. package/lib/input/base.js +7 -0
  149. package/lib/input/index.js +4 -4
  150. package/lib/layout/style/index.css +1 -1
  151. package/lib/nav-menu/style/index.css +1 -1
  152. package/lib/pagination/PageInput.vue.js +2 -2
  153. package/lib/pagination/style/index.css +2 -2
  154. package/lib/people-select/PeopleSelect.js +22 -49
  155. package/lib/people-select/Person.vue.js +3 -3
  156. package/lib/people-select/emits.js +1 -1
  157. package/lib/people-select/people-select.js +6 -8
  158. package/lib/people-select/presentation.js +3 -1
  159. package/lib/people-select/props.js +9 -3
  160. package/lib/people-select/selection.js +43 -0
  161. package/lib/people-select/style/index.css +6 -0
  162. package/lib/progress/style/index.css +2 -2
  163. package/lib/radio/style/index.css +1 -1
  164. package/lib/rate/style/index.css +1 -1
  165. package/lib/ripple/index.js +57 -1
  166. package/lib/scheduler/style/index.css +1 -1
  167. package/lib/search/HistoryContent.vue.js +4 -4
  168. package/lib/search/props.js +0 -1
  169. package/lib/search/search.vue.js +2 -2
  170. package/lib/select/props.js +2 -0
  171. package/lib/select/select.js +10 -4
  172. package/lib/select/style/index.css +22 -12
  173. package/lib/select/use-select-controller.js +14 -2
  174. package/lib/slider/Slider.vue.js +38 -20
  175. package/lib/slider/SliderInput.vue.js +4 -2
  176. package/lib/slider/style/index.css +2 -2
  177. package/lib/steps/style/index.css +10 -10
  178. package/lib/switch/Switch.vue.js +5 -0
  179. package/lib/switch/style/index.css +1 -1
  180. package/lib/table/structural-slot.js +17 -0
  181. package/lib/table/style/index.css +2 -2
  182. package/lib/table/table-tbody.js +2 -1
  183. package/lib/table/table-td.js +3 -2
  184. package/lib/table/table-th.js +3 -2
  185. package/lib/table/table-thead.js +2 -1
  186. package/lib/table/table-tr.js +3 -2
  187. package/lib/table/table.js +21 -4
  188. package/lib/tabs/style/index.css +1 -1
  189. package/lib/time/picker/Panel2.vue.js +2 -2
  190. package/lib/time/picker/RangePanel2.vue.js +2 -2
  191. package/lib/tree/style/index.css +1 -1
  192. package/lib/tree-select/panel.js +3 -1
  193. package/lib/tree-select/presentation.js +1 -0
  194. package/lib/tree-select/props.js +2 -0
  195. package/lib/tree-select/style/index.css +49 -7
  196. package/lib/trigger/popup-move-focus.js +6 -6
  197. package/lib/trigger/position.js +40 -2
  198. package/lib/trigger/positioner.js +27 -4
  199. package/lib/trigger/trigger.js +1 -1
  200. package/lib/upload/composables/use-upload-queue.js +9 -1
  201. package/lib/upload/composables/use-uploader.js +31 -11
  202. package/lib/upload/upload.vue.js +9 -1
  203. package/package.json +6 -6
  204. package/types/_components/field-presentation/editor-pending.d.ts +3 -0
  205. package/types/_components/field-presentation/with-field-presentation.d.ts +2 -0
  206. package/types/_components/picker-field/range-labels.d.ts +1 -0
  207. package/types/_utils/modal-focus.d.ts +1 -0
  208. package/types/auto-complete/auto-complete.d.ts +9 -0
  209. package/types/auto-complete/index.d.ts +30 -0
  210. package/types/auto-complete/presentation.d.ts +9 -0
  211. package/types/auto-complete/props.d.ts +5 -0
  212. package/types/button/base.d.ts +266 -0
  213. package/types/button/index.d.ts +5 -1
  214. package/types/cascader/Cascader.vue.d.ts +9 -0
  215. package/types/cascader/index.d.ts +30 -0
  216. package/types/cascader/presentation.d.ts +15 -0
  217. package/types/cascader/props.d.ts +5 -0
  218. package/types/cascader/use-cascader-controller.d.ts +4 -0
  219. package/types/checkbox/base.d.ts +361 -0
  220. package/types/checkbox/index.d.ts +5 -1
  221. package/types/date/picker/DateRangePicker.vue.d.ts +12 -496
  222. package/types/date/picker/DateRangePickerPanel.vue.d.ts +12 -496
  223. package/types/date/picker/Picker.vue.d.ts +12 -496
  224. package/types/date/picker/PickerPanel.vue.d.ts +12 -496
  225. package/types/date/picker/panels/Footer.vue.d.ts +3 -124
  226. package/types/date/picker/panels/Shortcuts.vue.d.ts +3 -124
  227. package/types/date/picker/panels/date/Index.vue.d.ts +3 -124
  228. package/types/date/picker/panels/week/Index.vue.d.ts +3 -124
  229. package/types/form/FormItemLabel.vue.d.ts +2 -2
  230. package/types/form/context.d.ts +1 -1
  231. package/types/form/focus-explicit-label.d.ts +2 -0
  232. package/types/input/base.d.ts +481 -0
  233. package/types/input/index.d.ts +5 -1
  234. package/types/people-select/PeopleSelect.d.ts +38 -16
  235. package/types/people-select/emits.d.ts +3 -2
  236. package/types/people-select/index.d.ts +135 -63
  237. package/types/people-select/people-select.d.ts +47 -16
  238. package/types/people-select/presentation.d.ts +46 -16
  239. package/types/people-select/props.d.ts +17 -6
  240. package/types/people-select/selection.d.ts +11 -0
  241. package/types/people-select/types.d.ts +5 -1
  242. package/types/popconfirm/Popconfirm.vue.d.ts +2 -0
  243. package/types/popconfirm/index.d.ts +8 -0
  244. package/types/select/index.d.ts +30 -0
  245. package/types/select/native-editor-owner.d.ts +1 -0
  246. package/types/select/props.d.ts +5 -0
  247. package/types/select/select.d.ts +9 -0
  248. package/types/select/use-select-controller.d.ts +5 -0
  249. package/types/slider/SliderInput.vue.d.ts +4 -0
  250. package/types/table/structural-slot.d.ts +3 -0
  251. package/types/table/table-operation-td.d.ts +2 -0
  252. package/types/time/picker/Panel.vue.d.ts +3 -124
  253. package/types/time/picker/RangePanel.vue.d.ts +6 -248
  254. package/types/time/presentation/TimePanelContent.vue.d.ts +9 -372
  255. package/types/transfer/Transfer.vue.d.ts +4 -0
  256. package/types/transfer/TransferView.vue.d.ts +2 -0
  257. package/types/transfer/index.d.ts +16 -0
  258. package/types/transfer/presentation.d.ts +4 -0
  259. package/types/tree/BaseNode.vue.d.ts +2 -0
  260. package/types/tree/TransitionNodeList.vue.d.ts +2 -0
  261. package/types/tree-select/TreeSelect.vue.d.ts +13 -0
  262. package/types/tree-select/index.d.ts +50 -0
  263. package/types/tree-select/presentation.d.ts +13 -0
  264. package/types/tree-select/props.d.ts +5 -0
  265. package/types/trigger/position.d.ts +1 -0
  266. package/types/typography/EditContent.vue.d.ts +6 -0
  267. package/types/upload/composables/use-upload-queue.d.ts +1 -0
  268. package/types/upload/composables/use-uploader.d.ts +2 -0
  269. package/types/upload/upload.vue.d.ts +3 -3
  270. package/umd/_components/selected-options/style/index.css +33 -15
  271. package/umd/anchor/style/index.css +1 -1
  272. package/umd/auto-complete/style/index.css +7 -2
  273. package/umd/back-top/style/index.css +1 -1
  274. package/umd/button/style/index.css +1 -1
  275. package/umd/carousel/style/index.css +1 -1
  276. package/umd/cascader/style/index.css +36 -9
  277. package/umd/cedar.css +187 -79
  278. package/umd/cedar.js +6 -6
  279. package/umd/checkbox/style/index.css +1 -1
  280. package/umd/date/picker/style/index.css +1 -1
  281. package/umd/ellipsis/style/index.css +1 -1
  282. package/umd/form/style/index.css +1 -1
  283. package/umd/layout/style/index.css +1 -1
  284. package/umd/nav-menu/style/index.css +1 -1
  285. package/umd/pagination/style/index.css +2 -2
  286. package/umd/people-select/style/index.css +6 -0
  287. package/umd/progress/style/index.css +2 -2
  288. package/umd/radio/style/index.css +1 -1
  289. package/umd/rate/style/index.css +1 -1
  290. package/umd/scheduler/style/index.css +1 -1
  291. package/umd/select/style/index.css +22 -12
  292. package/umd/slider/style/index.css +2 -2
  293. package/umd/steps/style/index.css +10 -10
  294. package/umd/switch/style/index.css +1 -1
  295. package/umd/table/style/index.css +2 -2
  296. package/umd/tabs/style/index.css +1 -1
  297. package/umd/tree/style/index.css +1 -1
  298. package/umd/tree-select/style/index.css +49 -7
package/umd/checkbox/style/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  :root,
5
5
  :where([data-c-theme]) {
6
6
  --c-checkbox-control-color: var(--c-sys-color-content-secondary);
7
- --c-checkbox-control-color-checked: var(--c-sys-color-content-brand);
7
+ --c-checkbox-control-color-checked: var(--c-sys-color-action-primary);
8
8
  --c-checkbox-control-color-disabled: var(--c-sys-color-content-disabled);
9
9
  --c-checkbox-control-color-error: var(--c-sys-color-content-danger);
10
10
  --c-checkbox-control-size: 14px;
package/umd/date/picker/style/index.css CHANGED
@@ -99,7 +99,7 @@
99
99
  --c-date-picker-shortcuts-placement-item-margin-vertical: 5px;
100
100
  --c-date-picker-shortcuts-inline-item-margin-vertical: 5px;
101
101
  --c-date-picker-shortcuts-inline-item-margin-right: var(--c-spacing-5);
102
- --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-content-brand);
102
+ --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-action-primary);
103
103
  --c-date-picker-transition-duration-1: var(--c-transition-duration-1);
104
104
  --c-date-picker-transition-timing-function-linear: var(--c-transition-timing-function-linear);
105
105
  }
package/umd/ellipsis/style/index.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
  :root,
5
5
  :where([data-c-theme]) {
6
- --c-ellipsis-focus-color: var(--c-sys-color-content-brand);
6
+ --c-ellipsis-focus-color: var(--c-sys-color-action-primary);
7
7
  --c-ellipsis-focus-width: 2px;
8
8
  --c-ellipsis-focus-offset: 2px;
9
9
  }
package/umd/form/style/index.css CHANGED
@@ -76,7 +76,7 @@
76
76
  --c-form-status-validating-focus-bg: var(--c-color-bg-2);
77
77
  --c-form-status-validating-border-color: transparent;
78
78
  --c-form-status-validating-hover-border-color: transparent;
79
- --c-form-status-validating-focus-border-color: var(--c-sys-color-content-brand);
79
+ --c-form-status-validating-focus-border-color: var(--c-sys-color-action-primary);
80
80
  --c-form-status-validating-focus-shadow-size: var(--c-shadow-distance-none);
81
81
  --c-form-status-validating-focus-shadow-color: var(--c-color-primary-light-2);
82
82
  --c-form-status-validating-tip-text-color: var(--c-sys-color-content-brand);
package/umd/layout/style/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  :root,
5
5
  :where([data-c-theme]) {
6
6
  --c-layout-border-color: var(--c-color-border-2);
7
- --c-layout-focus-color: var(--c-sys-color-content-brand);
7
+ --c-layout-focus-color: var(--c-sys-color-action-primary);
8
8
  --c-layout-trigger-height: var(--c-size-12);
9
9
  --c-layout-font-color: var(--c-color-text-1);
10
10
  --c-layout-sider-background-light: var(--c-color-bg-2);
package/umd/nav-menu/style/index.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --c-nav-menu-light-item-bg-hover: var(--c-color-fill-2);
10
10
  --c-nav-menu-light-item-bg-selected: var(--c-color-fill-2);
11
11
  --c-nav-menu-light-item-text-color: var(--c-color-text-2);
12
- --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-content-brand);
12
+ --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-action-primary);
13
13
  --c-nav-menu-light-item-text-color-disabled: var(--c-color-text-4);
14
14
  --c-nav-menu-row-height: 40px;
15
15
  --c-nav-menu-row-height-xs: 28px;
package/umd/pagination/style/index.css CHANGED
@@ -21,11 +21,11 @@
21
21
  --c-pagination-touch-size: 44px;
22
22
  --c-pagination-focus-width: 2px;
23
23
  --c-pagination-focus-offset: 1px;
24
- --c-pagination-focus-color: var(--c-sys-color-content-brand);
24
+ --c-pagination-focus-color: var(--c-sys-color-action-primary);
25
25
  --c-pagination-item-background: transparent;
26
26
  --c-pagination-hover-background: var(--c-color-fill-1);
27
27
  --c-pagination-active-background: var(--c-color-primary-light-1);
28
- --c-pagination-active-color: var(--c-sys-color-content-brand);
28
+ --c-pagination-active-color: var(--c-sys-color-action-primary);
29
29
  --c-pagination-disabled-color: var(--c-color-text-4);
30
30
  --c-pagination-disabled-background: var(--c-color-fill-1);
31
31
  }
package/umd/people-select/style/index.css CHANGED
@@ -30,3 +30,9 @@
30
30
  align-items: center;
31
31
  justify-content: center;
32
32
  }
33
+ .c-people-select-people {
34
+ display: inline-flex;
35
+ flex-wrap: wrap;
36
+ align-items: center;
37
+ gap: var(--c-people-select-content-gap);
38
+ }
package/umd/progress/style/index.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --c-progress-font-size: var(--c-sys-font-size-sm);
7
7
  --c-progress-text-color: var(--c-sys-color-content-secondary);
8
8
  --c-progress-track-color: var(--c-sys-color-state-hover);
9
- --c-progress-default-color: var(--c-sys-color-content-brand);
10
- --c-progress-primary-color: var(--c-sys-color-content-brand);
9
+ --c-progress-default-color: var(--c-sys-color-action-primary);
10
+ --c-progress-primary-color: var(--c-sys-color-action-primary);
11
11
  --c-progress-secondary-color: var(--c-sys-color-content-secondary);
12
12
  --c-progress-tertiary-color: var(--c-sys-color-content-tertiary);
13
13
  --c-progress-info-color: var(--c-sys-color-content-info);
package/umd/radio/style/index.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --c-radio-control-size: 14px;
8
8
  --c-radio-control-color-disabled: var(--c-sys-color-content-disabled);
9
9
  --c-radio-control-color-error: var(--c-sys-color-content-danger);
10
- --c-radio-control-color-checked: var(--c-sys-color-content-brand);
10
+ --c-radio-control-color-checked: var(--c-sys-color-action-primary);
11
11
  --c-radio-action-padding: calc((var(--c-internal-radio-mask-height) / 2) - (var(--c-radio-control-size) / 2));
12
12
  --c-radio-label-text-color: var(--c-sys-color-content-primary);
13
13
  --c-radio-label-text-color-disabled: var(--c-sys-color-content-disabled);
package/umd/rate/style/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --c-rate-disabled-color: var(--c-sys-color-content-disabled);
7
7
  --c-rate-error-color: var(--c-sys-color-content-danger);
8
8
  --c-rate-active-scale: 1.2;
9
- --c-rate-focus-color: var(--c-sys-color-content-brand);
9
+ --c-rate-focus-color: var(--c-sys-color-action-primary);
10
10
  --c-rate-focus-width: 2px;
11
11
  --c-rate-focus-offset: 2px;
12
12
  --c-rate-size: var(--c-font-size-title-3);
package/umd/scheduler/style/index.css CHANGED
@@ -57,7 +57,7 @@
57
57
  --c-scheduler-lane-height: 38px;
58
58
  --c-scheduler-font-size: 14px;
59
59
  --c-scheduler-line-height: 1.5;
60
- --c-scheduler-focus-color: var(--c-sys-color-content-brand);
60
+ --c-scheduler-focus-color: var(--c-sys-color-action-primary);
61
61
  --c-scheduler-now-color: var(--c-sys-color-content-danger);
62
62
  --c-scheduler-now-width: 2px;
63
63
  --c-scheduler-now-z-index: 3;
package/umd/select/style/index.css CHANGED
@@ -7,28 +7,31 @@
7
7
  * Popup Box
8
8
  **********************************************/
9
9
  --c-select-popup-max-height: 200px;
10
- --c-select-popup-border-radius: var(--c-sys-radius-md);
10
+ --c-select-popup-border-radius: var(--c-sys-radius-lg);
11
11
  --c-select-popup-padding-vertical: var(--c-sys-space-2);
12
12
  --c-select-popup-font-size: var(--c-sys-font-size-md);
13
13
  --c-select-popup-bg: var(--c-sys-color-surface-overlay);
14
- --c-select-popup-border-color: var(--c-sys-color-border-default);
15
- --c-select-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
14
+ --c-select-popup-border-color: var(--c-sys-color-border-subtle);
15
+ --c-select-popup-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
16
16
  /**********************************************
17
17
  * Popup Options
18
18
  * status: default / disabled / selected / hover
19
19
  **********************************************/
20
20
  --c-select-popup-option-height: 36px;
21
21
  --c-select-popup-option-font-weight-selected: var(--c-sys-font-weight-medium);
22
- --c-select-popup-option-padding-horizontal: var(--c-sys-space-5);
23
- --c-select-popup-option-bg: var(--c-sys-color-surface-overlay);
22
+ --c-select-popup-option-padding-horizontal: var(--c-sys-space-4);
23
+ --c-select-popup-padding-horizontal: var(--c-sys-space-3);
24
+ --c-select-popup-option-border-radius: var(--c-sys-radius-lg);
25
+ --c-select-popup-option-bg: transparent;
24
26
  --c-select-popup-option-bg-hover: var(--c-sys-color-state-hover);
25
- --c-select-popup-option-bg-selected: var(--c-sys-color-surface-overlay);
26
- --c-select-popup-option-bg-disabled: var(--c-sys-color-surface-overlay);
27
+ --c-select-popup-option-bg-selected: transparent;
28
+ --c-select-popup-option-bg-selected-hover: var(--c-select-popup-option-bg-hover);
29
+ --c-select-popup-option-bg-disabled: transparent;
27
30
  --c-select-popup-option-text-color: var(--c-sys-color-content-primary);
28
31
  --c-select-popup-option-text-color-hover: var(--c-sys-color-content-primary);
29
- --c-select-popup-option-text-color-selected: var(--c-sys-color-content-primary);
32
+ --c-select-popup-option-text-color-selected: var(--c-sys-color-action-primary);
30
33
  --c-select-popup-option-text-color-disabled: var(--c-sys-color-content-disabled);
31
- --c-select-popup-option-check-color: var(--c-sys-color-content-primary);
34
+ --c-select-popup-option-check-color: var(--c-sys-color-action-primary);
32
35
  --c-select-popup-option-check-size: var(--c-sys-font-size-md);
33
36
  --c-select-popup-option-check-gap: var(--c-sys-space-4);
34
37
  --c-select-popup-group-title-height: 20px;
@@ -69,6 +72,8 @@
69
72
  list-style: none;
70
73
  }
71
74
  .c-select-dropdown-list-wrapper {
75
+ box-sizing: border-box;
76
+ padding-inline: var(--c-select-popup-padding-horizontal);
72
77
  max-height: var(--c-select-popup-max-height);
73
78
  overflow-y: auto;
74
79
  }
@@ -80,6 +85,8 @@
80
85
  box-sizing: border-box;
81
86
  width: 100%;
82
87
  padding: 0 var(--c-select-popup-option-padding-horizontal);
88
+ border-radius: var(--c-select-popup-option-border-radius);
89
+ transition: background-color var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard), color var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard);
83
90
  color: var(--c-select-popup-option-text-color);
84
91
  font-size: var(--c-select-popup-font-size);
85
92
  line-height: var(--c-select-popup-option-height);
@@ -119,11 +126,14 @@
119
126
  font-weight: var(--c-select-popup-option-font-weight-selected);
120
127
  background-color: var(--c-select-popup-option-bg-selected);
121
128
  }
122
- .c-select-dropdown .c-select-option-active,
123
- .c-select-dropdown .c-select-option:not(.c-select-dropdown .c-select-option-disabled):hover {
129
+ .c-select-dropdown .c-select-option-active:not(.c-select-option-selected):not(.c-select-option-disabled),
130
+ .c-select-dropdown .c-select-option:not(.c-select-option-selected):not(.c-select-option-disabled):hover {
124
131
  color: var(--c-select-popup-option-text-color-hover);
125
132
  background-color: var(--c-select-popup-option-bg-hover);
126
- transition: all var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard);
133
+ }
134
+ .c-select-dropdown .c-select-option-selected:not(.c-select-option-disabled):hover,
135
+ .c-select-dropdown .c-select-option-selected.c-select-option-active:not(.c-select-option-disabled) {
136
+ background-color: var(--c-select-popup-option-bg-selected-hover);
127
137
  }
128
138
  .c-select-dropdown .c-select-option-disabled {
129
139
  color: var(--c-select-popup-option-text-color-disabled);
package/umd/slider/style/index.css CHANGED
@@ -3,10 +3,10 @@
3
3
  }
4
4
  :root,
5
5
  :where([data-c-theme]) {
6
- --c-slider-active-color: var(--c-sys-color-content-brand);
6
+ --c-slider-active-color: var(--c-sys-color-action-primary);
7
7
  --c-slider-track-color: var(--c-sys-color-state-hover);
8
8
  --c-slider-thumb-color: var(--c-sys-color-surface-default);
9
- --c-slider-thumb-border-color: var(--c-sys-color-content-brand);
9
+ --c-slider-thumb-border-color: var(--c-sys-color-action-primary);
10
10
  --c-slider-text-color: var(--c-sys-color-content-secondary);
11
11
  --c-slider-tooltip-background: var(--c-sys-color-surface-tooltip);
12
12
  --c-slider-tooltip-color: var(--c-sys-color-content-on-dark);
package/umd/steps/style/index.css CHANGED
@@ -27,15 +27,15 @@
27
27
  --c-steps-circle-item-tail-color-wait: var(--c-sys-color-border-default);
28
28
  --c-steps-circle-item-title-color-wait: var(--c-sys-color-content-secondary);
29
29
  --c-steps-circle-item-description-color-wait: var(--c-sys-color-content-secondary);
30
- --c-steps-circle-item-bg-process: var(--c-sys-color-content-brand);
30
+ --c-steps-circle-item-bg-process: var(--c-sys-color-action-primary);
31
31
  --c-steps-circle-item-border-color-process: transparent;
32
32
  --c-steps-circle-item-icon-text-color-process: var(--c-sys-color-surface-default);
33
- --c-steps-circle-item-tail-color-process: var(--c-sys-color-content-brand);
33
+ --c-steps-circle-item-tail-color-process: var(--c-sys-color-action-primary);
34
34
  --c-steps-circle-item-title-color-process: var(--c-sys-color-content-primary);
35
35
  --c-steps-circle-item-description-color-process: var(--c-sys-color-content-secondary);
36
36
  --c-steps-circle-item-bg-finish: var(--c-sys-color-state-selected);
37
37
  --c-steps-circle-item-border-color-finish: transparent;
38
- --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-content-brand);
38
+ --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-action-primary);
39
39
  --c-steps-circle-item-title-color-finish: var(--c-sys-color-content-primary);
40
40
  --c-steps-circle-item-description-color-finish: var(--c-sys-color-content-secondary);
41
41
  --c-steps-circle-item-bg-error: var(--c-sys-color-content-danger);
@@ -61,13 +61,13 @@
61
61
  --c-steps-dot-item-tail-color-wait: var(--c-sys-color-border-default);
62
62
  --c-steps-dot-item-title-color-wait: var(--c-sys-color-content-secondary);
63
63
  --c-steps-dot-item-description-color-wait: var(--c-sys-color-content-secondary);
64
- --c-steps-dot-item-bg-process: var(--c-sys-color-content-brand);
65
- --c-steps-dot-item-border-color-process: var(--c-sys-color-content-brand);
66
- --c-steps-dot-item-tail-color-process: var(--c-sys-color-content-brand);
64
+ --c-steps-dot-item-bg-process: var(--c-sys-color-action-primary);
65
+ --c-steps-dot-item-border-color-process: var(--c-sys-color-action-primary);
66
+ --c-steps-dot-item-tail-color-process: var(--c-sys-color-action-primary);
67
67
  --c-steps-dot-item-title-color-process: var(--c-sys-color-content-primary);
68
68
  --c-steps-dot-item-description-color-process: var(--c-sys-color-content-secondary);
69
- --c-steps-dot-item-bg-finish: var(--c-sys-color-content-brand);
70
- --c-steps-dot-item-border-color-finish: var(--c-sys-color-content-brand);
69
+ --c-steps-dot-item-bg-finish: var(--c-sys-color-action-primary);
70
+ --c-steps-dot-item-border-color-finish: var(--c-sys-color-action-primary);
71
71
  --c-steps-dot-item-title-color-finish: var(--c-sys-color-content-primary);
72
72
  --c-steps-dot-item-description-color-finish: var(--c-sys-color-content-secondary);
73
73
  --c-steps-dot-item-bg-error: var(--c-sys-color-content-danger);
@@ -86,7 +86,7 @@
86
86
  --c-steps-arrow-item-bg-wait: var(--c-sys-color-surface-muted);
87
87
  --c-steps-arrow-item-title-color-wait: var(--c-sys-color-content-secondary);
88
88
  --c-steps-arrow-item-description-color-wait: var(--c-sys-color-content-secondary);
89
- --c-steps-arrow-item-bg-process: var(--c-sys-color-content-brand);
89
+ --c-steps-arrow-item-bg-process: var(--c-sys-color-action-primary);
90
90
  --c-steps-arrow-item-title-color-process: var(--c-sys-color-surface-default);
91
91
  --c-steps-arrow-item-description-color-process: var(--c-sys-color-surface-default);
92
92
  --c-steps-arrow-item-bg-finish: var(--c-sys-color-state-selected);
@@ -104,7 +104,7 @@
104
104
  --c-steps-navigation-arrow-spacing-right: var(--c-spacing-5);
105
105
  --c-steps-navigation-ink-spacing-left: var(--c-spacing-none);
106
106
  --c-steps-navigation-ink-spacing-right: 30px;
107
- --c-steps-navigation-ink-bg: var(--c-sys-color-content-brand);
107
+ --c-steps-navigation-ink-bg: var(--c-sys-color-action-primary);
108
108
  --c-steps-changeable-hover-text-color: var(--c-sys-color-content-brand);
109
109
  --c-steps-node-font-weight: var(--c-font-weight-500);
110
110
  --c-steps-transition-duration-1: var(--c-transition-duration-1);
package/umd/switch/style/index.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --c-switch-size-lg-scale: 1.2;
13
13
  --c-switch-hit-area: 0px;
14
14
  --c-switch-track-background: var(--c-sys-color-content-secondary);
15
- --c-switch-track-active-background: var(--c-sys-color-content-brand);
15
+ --c-switch-track-active-background: var(--c-sys-color-action-primary);
16
16
  --c-switch-track-error-background: var(--c-sys-color-content-danger);
17
17
  --c-switch-handle-background: var(--c-sys-color-surface-default);
18
18
  --c-switch-handle-color: var(--c-sys-color-content-brand);
package/umd/table/style/index.css CHANGED
@@ -58,14 +58,14 @@
58
58
  --c-table-header-cell-action-margin-left: 2px;
59
59
  --c-table-th-actions-margin-left: 8px;
60
60
  --c-table-header-filters-icon-color: var(--c-color-text-2);
61
- --c-table-header-filters-icon-active-color: var(--c-sys-color-content-brand);
61
+ --c-table-header-filters-icon-active-color: var(--c-sys-color-action-primary);
62
62
  --c-table-header-filters-icon-hover-bg: var(--c-color-neutral-4);
63
63
  --c-table-filters-icon-font-size: 16px;
64
64
  --c-table-filters-width: 24px;
65
65
  --c-table-filters-icon-hover-bg: var(--c-color-fill-4);
66
66
  --c-table-header-sorter-icon-color: var(--c-color-neutral-5);
67
67
  --c-table-header-sorter-icon-next-color: var(--c-color-neutral-6);
68
- --c-table-header-sorter-icon-active-color: var(--c-sys-color-content-brand);
68
+ --c-table-header-sorter-icon-active-color: var(--c-sys-color-action-primary);
69
69
  --c-table-header-sorter-icon-margin-left: var(--c-spacing-4);
70
70
  --c-table-header-sorter-icon-height: 8px;
71
71
  --c-table-header-sorter-icon-width: 14px;
package/umd/tabs/style/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :where([data-c-theme]) {
6
6
  --c-tabs-background: var(--c-sys-color-surface-default);
7
7
  --c-tabs-title-text-color: var(--c-sys-color-content-secondary);
8
- --c-tabs-title-text-color-active: var(--c-sys-color-content-brand);
8
+ --c-tabs-title-text-color-active: var(--c-sys-color-action-primary);
9
9
  --c-tabs-title-text-color-disabled: var(--c-sys-color-content-disabled);
10
10
  --c-tabs-muted-background: var(--c-sys-color-surface-muted);
11
11
  --c-tabs-border-color: var(--c-sys-color-border-default);
package/umd/tree/style/index.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --c-tree-focus-outline-width: 2px;
7
7
  --c-tree-title-text-color: var(--c-color-text-1);
8
8
  --c-tree-title-text-color-hover: var(--c-color-text-1);
9
- --c-tree-title-text-color-active: var(--c-sys-color-content-brand);
9
+ --c-tree-title-text-color-active: var(--c-sys-color-action-primary);
10
10
  --c-tree-title-text-color-disabled: var(--c-color-text-4);
11
11
  --c-tree-title-text-color-active-disabled: var(--c-color-primary-light-3);
12
12
  --c-tree-title-bg-hover: var(--c-color-fill-2);
package/umd/tree-select/style/index.css CHANGED
@@ -4,13 +4,14 @@
4
4
  :root,
5
5
  :where([data-c-theme]) {
6
6
  --c-tree-select-option-active-background: var(--c-color-fill-2);
7
- --c-tree-select-option-radius: var(--c-sys-radius-sm);
8
- --c-tree-select-popup-padding-left: var(--c-spacing-5);
9
- --c-tree-select-popup-padding-right: var(--c-spacing-2);
10
- --c-tree-select-popup-padding-vertical: var(--c-spacing-2);
7
+ --c-tree-select-option-radius: var(--c-select-popup-option-border-radius);
8
+ --c-tree-select-popup-padding-left: var(--c-select-popup-padding-horizontal);
9
+ --c-tree-select-popup-padding-right: var(--c-select-popup-padding-horizontal);
10
+ --c-tree-select-popup-padding-vertical: var(--c-select-popup-padding-vertical);
11
11
  --c-tree-select-highlight-font-weight: var(--c-font-weight-500);
12
12
  }
13
13
  .c-tree-select-popup {
14
+ --c-tree-title-text-color-active: var(--c-select-popup-option-text-color-selected);
14
15
  box-sizing: border-box;
15
16
  padding: var(--c-tree-select-popup-padding-vertical) 0;
16
17
  background-color: var(--c-color-bg-popup);
@@ -26,7 +27,31 @@
26
27
  overflow: auto;
27
28
  }
28
29
  .c-tree-select-popup .c-tree-node {
29
- padding-inline-start: 0;
30
+ isolation: isolate;
31
+ box-sizing: border-box;
32
+ min-height: var(--c-select-popup-option-height);
33
+ padding-inline: var(--c-select-popup-option-padding-horizontal);
34
+ border-bottom: 0;
35
+ border-radius: var(--c-tree-select-option-radius);
36
+ }
37
+ .c-tree-select-popup .c-tree-node-title,
38
+ .c-tree-select-popup .c-tree-node-selected .c-tree-node-title {
39
+ position: static;
40
+ min-width: 0;
41
+ min-height: inherit;
42
+ margin: 0;
43
+ padding: 0;
44
+ background: transparent;
45
+ }
46
+ .c-tree-select-popup .c-tree-node-title-text {
47
+ flex: 1;
48
+ min-width: 0;
49
+ }
50
+ .c-tree-select-popup .c-tree-node:hover .c-tree-select-option:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
51
+ background: var(--c-tree-select-option-active-background);
52
+ }
53
+ .c-tree-select-popup .c-tree-node:hover .c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
54
+ background: var(--c-select-popup-option-bg-selected-hover);
30
55
  }
31
56
  .c-tree-select-highlight {
32
57
  font-weight: var(--c-tree-select-highlight-font-weight);
@@ -45,8 +70,25 @@
45
70
  }
46
71
  .c-tree-select-option {
47
72
  display: block;
73
+ overflow-wrap: anywhere;
48
74
  }
49
- .c-tree-select-option-active {
50
- background: var(--c-tree-select-option-active-background);
75
+ .c-tree-select-option::before {
76
+ content: '';
77
+ position: absolute;
78
+ inset: 0;
79
+ z-index: -1;
51
80
  border-radius: var(--c-tree-select-option-radius);
81
+ pointer-events: none;
82
+ }
83
+ .c-tree-select-option-active:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
84
+ background: var(--c-tree-select-option-active-background);
85
+ }
86
+ .c-tree-select-option-selected:not(.c-tree-select-option-disabled) {
87
+ color: var(--c-select-popup-option-text-color-selected);
88
+ }
89
+ .c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
90
+ background: var(--c-select-popup-option-bg-selected);
91
+ }
92
+ .c-tree-select-option-active.c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
93
+ background: var(--c-select-popup-option-bg-selected-hover);
52
94
  }