@icen.ai/ui 0.10.0 → 0.11.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 (362) hide show
  1. package/AGENTS.md +79 -309
  2. package/LICENSE +21 -0
  3. package/README.md +43 -54
  4. package/dist/base.css +68 -22
  5. package/dist/behaviors/accordion.mjs +1 -1
  6. package/dist/behaviors/ai-branch.mjs +14 -0
  7. package/dist/behaviors/ai-chat.d.mts +2 -2
  8. package/dist/behaviors/ai-chat.mjs +66 -10
  9. package/dist/behaviors/ai-composer.d.mts +5 -5
  10. package/dist/behaviors/ai-composer.mjs +34 -10
  11. package/dist/behaviors/ai-core.mjs +14 -0
  12. package/dist/behaviors/ai-diff.mjs +14 -0
  13. package/dist/behaviors/ai-feedback.mjs +14 -0
  14. package/dist/behaviors/ai-panel.d.mts +2 -2
  15. package/dist/behaviors/ai-panel.mjs +14 -0
  16. package/dist/behaviors/ai-provider.d.mts +1 -1
  17. package/dist/behaviors/ai-provider.mjs +14 -0
  18. package/dist/behaviors/ai-threads.mjs +14 -0
  19. package/dist/behaviors/ai-tool.d.mts +1 -1
  20. package/dist/behaviors/ai-tool.mjs +299 -24
  21. package/dist/behaviors/ai-tools.mjs +1179 -28
  22. package/dist/behaviors/autocomplete.d.mts +1 -1
  23. package/dist/behaviors/autocomplete.mjs +14 -0
  24. package/dist/behaviors/back-top.mjs +14 -0
  25. package/dist/behaviors/carousel.mjs +21 -1
  26. package/dist/behaviors/cascader.mjs +27 -0
  27. package/dist/behaviors/charts.d.mts +12 -1
  28. package/dist/behaviors/charts.mjs +298 -20
  29. package/dist/behaviors/code-block.mjs +22 -1
  30. package/dist/behaviors/command-palette.mjs +3 -3
  31. package/dist/behaviors/context-menu.d.mts +2 -2
  32. package/dist/behaviors/context-menu.mjs +14 -0
  33. package/dist/behaviors/controls.d.mts +8 -8
  34. package/dist/behaviors/controls.mjs +50 -6
  35. package/dist/behaviors/copy.mjs +14 -0
  36. package/dist/behaviors/datatable.d.mts +3 -3
  37. package/dist/behaviors/datatable.mjs +89 -11
  38. package/dist/behaviors/date-picker.mjs +14 -0
  39. package/dist/behaviors/events.d.mts +10 -10
  40. package/dist/behaviors/events.mjs +11 -1
  41. package/dist/behaviors/form-validate.d.mts +10 -1
  42. package/dist/behaviors/form-validate.mjs +279 -4611
  43. package/dist/behaviors/i18n.d.mts +14 -0
  44. package/dist/behaviors/i18n.mjs +28 -0
  45. package/dist/behaviors/input.mjs +16 -0
  46. package/dist/behaviors/kb-access.d.mts +2 -2
  47. package/dist/behaviors/kb-access.mjs +21 -2
  48. package/dist/behaviors/kb-acl.d.mts +2 -2
  49. package/dist/behaviors/kb-acl.mjs +14 -0
  50. package/dist/behaviors/kb-answer.d.mts +2 -2
  51. package/dist/behaviors/kb-answer.mjs +298 -23
  52. package/dist/behaviors/kb-audit.d.mts +2 -2
  53. package/dist/behaviors/kb-audit.mjs +14 -0
  54. package/dist/behaviors/kb-canvas.d.mts +3 -3
  55. package/dist/behaviors/kb-canvas.mjs +14 -0
  56. package/dist/behaviors/kb-chain.d.mts +2 -2
  57. package/dist/behaviors/kb-chain.mjs +14 -0
  58. package/dist/behaviors/kb-checkpoint.d.mts +2 -2
  59. package/dist/behaviors/kb-checkpoint.mjs +14 -0
  60. package/dist/behaviors/kb-chunks.d.mts +2 -2
  61. package/dist/behaviors/kb-chunks.mjs +14 -0
  62. package/dist/behaviors/kb-citation.d.mts +2 -2
  63. package/dist/behaviors/kb-citation.mjs +33 -6
  64. package/dist/behaviors/kb-clarify.d.mts +2 -2
  65. package/dist/behaviors/kb-clarify.mjs +14 -0
  66. package/dist/behaviors/kb-conflict.d.mts +2 -2
  67. package/dist/behaviors/kb-conflict.mjs +14 -0
  68. package/dist/behaviors/kb-connector.d.mts +2 -2
  69. package/dist/behaviors/kb-connector.mjs +14 -0
  70. package/dist/behaviors/kb-core.d.mts +1 -1
  71. package/dist/behaviors/kb-core.mjs +14 -0
  72. package/dist/behaviors/kb-eval.d.mts +2 -2
  73. package/dist/behaviors/kb-eval.mjs +21 -2
  74. package/dist/behaviors/kb-explain.d.mts +2 -2
  75. package/dist/behaviors/kb-explain.mjs +26 -2
  76. package/dist/behaviors/kb-filter.d.mts +2 -2
  77. package/dist/behaviors/kb-filter.mjs +21 -2
  78. package/dist/behaviors/kb-gap.d.mts +2 -2
  79. package/dist/behaviors/kb-gap.mjs +14 -0
  80. package/dist/behaviors/kb-hittest.d.mts +2 -2
  81. package/dist/behaviors/kb-hittest.mjs +15 -1
  82. package/dist/behaviors/kb-metadata.mjs +19 -0
  83. package/dist/behaviors/kb-passage.d.mts +2 -2
  84. package/dist/behaviors/kb-passage.mjs +14 -0
  85. package/dist/behaviors/kb-pipeline.d.mts +2 -2
  86. package/dist/behaviors/kb-pipeline.mjs +14 -0
  87. package/dist/behaviors/kb-qa.mjs +14 -0
  88. package/dist/behaviors/kb-rerank.d.mts +2 -2
  89. package/dist/behaviors/kb-rerank.mjs +14 -0
  90. package/dist/behaviors/kb-retrieval.d.mts +2 -2
  91. package/dist/behaviors/kb-retrieval.mjs +31 -4
  92. package/dist/behaviors/kb-review.d.mts +2 -2
  93. package/dist/behaviors/kb-review.mjs +21 -2
  94. package/dist/behaviors/kb-sandbox.d.mts +2 -2
  95. package/dist/behaviors/kb-sandbox.mjs +20 -1
  96. package/dist/behaviors/kb-segment.d.mts +2 -2
  97. package/dist/behaviors/kb-segment.mjs +15 -1
  98. package/dist/behaviors/kb-select.mjs +21 -2
  99. package/dist/behaviors/kb-sources.d.mts +2 -2
  100. package/dist/behaviors/kb-sources.mjs +14 -0
  101. package/dist/behaviors/kb-sql.d.mts +2 -2
  102. package/dist/behaviors/kb-sql.mjs +14 -0
  103. package/dist/behaviors/kb-trace.d.mts +2 -2
  104. package/dist/behaviors/kb-trace.mjs +22 -3
  105. package/dist/behaviors/kb-visibility.d.mts +2 -2
  106. package/dist/behaviors/kb-visibility.mjs +14 -0
  107. package/dist/behaviors/kb-who-can.d.mts +2 -2
  108. package/dist/behaviors/kb-who-can.mjs +21 -2
  109. package/dist/behaviors/mentions.d.mts +1 -1
  110. package/dist/behaviors/mentions.mjs +14 -0
  111. package/dist/behaviors/modal.d.mts +1 -1
  112. package/dist/behaviors/modal.mjs +14 -0
  113. package/dist/behaviors/motion.d.mts +16 -0
  114. package/dist/behaviors/motion.mjs +39 -0
  115. package/dist/behaviors/notification.d.mts +2 -2
  116. package/dist/behaviors/notification.mjs +27 -3
  117. package/dist/behaviors/panel.mjs +14 -0
  118. package/dist/behaviors/scroll-area.d.mts +17 -0
  119. package/dist/behaviors/scroll-area.mjs +59 -0
  120. package/dist/behaviors/select.mjs +21 -2
  121. package/dist/behaviors/slider.mjs +3 -3
  122. package/dist/behaviors/split-pane.mjs +2 -0
  123. package/dist/behaviors/suggestions.mjs +14 -0
  124. package/dist/behaviors/tabs.mjs +10 -0
  125. package/dist/behaviors/tag-input.mjs +14 -0
  126. package/dist/behaviors/theme-switcher.d.mts +2 -2
  127. package/dist/behaviors/theme-switcher.mjs +30 -2
  128. package/dist/behaviors/theme.mjs +16 -2
  129. package/dist/behaviors/toast.d.mts +2 -2
  130. package/dist/behaviors/toast.mjs +14 -0
  131. package/dist/behaviors/tree-select.mjs +27 -0
  132. package/dist/behaviors/tree.mjs +4 -4
  133. package/dist/behaviors/upload.mjs +14 -0
  134. package/dist/behaviors/url-safety.d.mts +8 -0
  135. package/dist/behaviors/url-safety.mjs +11 -0
  136. package/dist/components/accordion.d.mts +2 -0
  137. package/dist/components/ai-branch.d.mts +2 -0
  138. package/dist/components/ai-chat.css +40 -33
  139. package/dist/components/ai-chat.d.mts +2 -0
  140. package/dist/components/ai-composer.d.mts +2 -0
  141. package/dist/components/ai-context.d.mts +2 -0
  142. package/dist/components/ai-context.mjs +1 -0
  143. package/dist/components/ai-diff.css +6 -6
  144. package/dist/components/ai-diff.d.mts +2 -0
  145. package/dist/components/ai-feedback.d.mts +2 -0
  146. package/dist/components/ai-files.d.mts +2 -0
  147. package/dist/components/ai-message.d.mts +2 -0
  148. package/dist/components/ai-panel.css +12 -10
  149. package/dist/components/ai-reasoning.d.mts +2 -0
  150. package/dist/components/ai-subagent.d.mts +2 -0
  151. package/dist/components/ai-subagent.mjs +1 -0
  152. package/dist/components/ai-threads.d.mts +2 -0
  153. package/dist/components/ai-todo.d.mts +2 -0
  154. package/dist/components/ai-todo.mjs +1 -0
  155. package/dist/components/ai-tool-call.d.mts +2 -0
  156. package/dist/components/ai-tool-call.mjs +1 -0
  157. package/dist/components/ai-tool.css +16 -16
  158. package/dist/components/ai-usage.d.mts +2 -0
  159. package/dist/components/alert.d.mts +2 -0
  160. package/dist/components/autocomplete.css +12 -12
  161. package/dist/components/autocomplete.d.mts +2 -0
  162. package/dist/components/avatar.d.mts +2 -0
  163. package/dist/components/back-top.css +47 -16
  164. package/dist/components/back-top.d.mts +2 -0
  165. package/dist/components/badge.css +1 -1
  166. package/dist/components/badge.d.mts +2 -0
  167. package/dist/components/breadcrumb.css +26 -8
  168. package/dist/components/breadcrumb.d.mts +2 -0
  169. package/dist/components/btn.css +67 -62
  170. package/dist/components/btn.d.mts +2 -0
  171. package/dist/components/card.css +22 -22
  172. package/dist/components/card.d.mts +2 -0
  173. package/dist/components/carousel.d.mts +2 -0
  174. package/dist/components/cascader.css +56 -35
  175. package/dist/components/cascader.d.mts +2 -0
  176. package/dist/components/chart-area.css +46 -0
  177. package/dist/components/chart-area.d.mts +2 -0
  178. package/dist/components/chart-bar.css +66 -19
  179. package/dist/components/chart-bar.d.mts +2 -0
  180. package/dist/components/chart-calendar.d.mts +2 -0
  181. package/dist/components/chart-gauge.css +23 -3
  182. package/dist/components/chart-gauge.d.mts +2 -0
  183. package/dist/components/chart-graph.css +15 -3
  184. package/dist/components/chart-graph.d.mts +2 -0
  185. package/dist/components/chart-heatmap.css +117 -95
  186. package/dist/components/chart-heatmap.d.mts +2 -0
  187. package/dist/components/chart-line.css +54 -0
  188. package/dist/components/chart-line.d.mts +2 -0
  189. package/dist/components/chart-map.d.mts +2 -0
  190. package/dist/components/chart-pie.css +29 -0
  191. package/dist/components/chart-pie.d.mts +2 -0
  192. package/dist/components/chart-radar.css +50 -1
  193. package/dist/components/chart-radar.d.mts +2 -0
  194. package/dist/components/chart-scatter.css +39 -2
  195. package/dist/components/chart-scatter.d.mts +2 -0
  196. package/dist/components/chart-sparkline.css +20 -0
  197. package/dist/components/chart-sparkline.d.mts +2 -0
  198. package/dist/components/chart-stack.css +16 -5
  199. package/dist/components/chart-stack.d.mts +2 -0
  200. package/dist/components/charts.css +109 -35
  201. package/dist/components/charts.d.mts +2 -0
  202. package/dist/components/code-block.css +10 -8
  203. package/dist/components/code-block.d.mts +2 -0
  204. package/dist/components/command-palette.css +45 -38
  205. package/dist/components/command-palette.d.mts +2 -0
  206. package/dist/components/content.css +62 -57
  207. package/dist/components/context-menu.d.mts +2 -0
  208. package/dist/components/copy.css +10 -10
  209. package/dist/components/copy.d.mts +2 -0
  210. package/dist/components/datatable.css +72 -59
  211. package/dist/components/datatable.d.mts +2 -0
  212. package/dist/components/date-picker.css +26 -26
  213. package/dist/components/date-picker.d.mts +2 -0
  214. package/dist/components/desc.d.mts +2 -0
  215. package/dist/components/dropdown.d.mts +2 -0
  216. package/dist/components/empty.css +16 -16
  217. package/dist/components/empty.d.mts +2 -0
  218. package/dist/components/feedback.css +31 -29
  219. package/dist/components/form-validate.css +20 -6
  220. package/dist/components/form-validate.d.mts +2 -0
  221. package/dist/components/form.css +17 -14
  222. package/dist/components/form.d.mts +2 -0
  223. package/dist/components/icon.css +21 -10
  224. package/dist/components/icon.d.mts +2 -0
  225. package/dist/components/input.css +22 -22
  226. package/dist/components/input.d.mts +2 -0
  227. package/dist/components/kb-access.d.mts +2 -0
  228. package/dist/components/kb-acl.d.mts +2 -0
  229. package/dist/components/kb-agent.css +134 -55
  230. package/dist/components/kb-answer.d.mts +2 -0
  231. package/dist/components/kb-audit.d.mts +2 -0
  232. package/dist/components/kb-canvas.d.mts +2 -0
  233. package/dist/components/kb-chain.d.mts +2 -0
  234. package/dist/components/kb-checkpoint.d.mts +2 -0
  235. package/dist/components/kb-chunks.d.mts +2 -0
  236. package/dist/components/kb-citation.d.mts +2 -0
  237. package/dist/components/kb-clarify.d.mts +2 -0
  238. package/dist/components/kb-conflict.d.mts +2 -0
  239. package/dist/components/kb-connector.d.mts +2 -0
  240. package/dist/components/kb-data.css +192 -80
  241. package/dist/components/kb-eval.d.mts +2 -0
  242. package/dist/components/kb-explain.d.mts +2 -0
  243. package/dist/components/kb-filter.d.mts +2 -0
  244. package/dist/components/kb-gap.d.mts +2 -0
  245. package/dist/components/kb-ground.css +165 -73
  246. package/dist/components/kb-hittest.d.mts +2 -0
  247. package/dist/components/kb-ingest.css +308 -113
  248. package/dist/components/kb-metadata.d.mts +2 -0
  249. package/dist/components/kb-ops.css +189 -75
  250. package/dist/components/kb-passage.d.mts +2 -0
  251. package/dist/components/kb-perm.css +158 -87
  252. package/dist/components/kb-pipeline.d.mts +2 -0
  253. package/dist/components/kb-qa.d.mts +2 -0
  254. package/dist/components/kb-rerank.d.mts +2 -0
  255. package/dist/components/kb-retrieval.d.mts +2 -0
  256. package/dist/components/kb-review.d.mts +2 -0
  257. package/dist/components/kb-sandbox.d.mts +2 -0
  258. package/dist/components/kb-search.css +353 -116
  259. package/dist/components/kb-segment.d.mts +2 -0
  260. package/dist/components/kb-sources.d.mts +2 -0
  261. package/dist/components/kb-sql.d.mts +2 -0
  262. package/dist/components/kb-trace.d.mts +2 -0
  263. package/dist/components/kb-visibility.d.mts +2 -0
  264. package/dist/components/kb-who-can.d.mts +2 -0
  265. package/dist/components/kb.css +60 -36
  266. package/dist/components/kb.d.mts +2 -0
  267. package/dist/components/kbd.d.mts +2 -0
  268. package/dist/components/layout.css +10 -10
  269. package/dist/components/layout.d.mts +2 -0
  270. package/dist/components/list.d.mts +2 -0
  271. package/dist/components/material-chinese.css +10 -0
  272. package/dist/components/material-soviet.css +10 -0
  273. package/dist/components/material.css +61 -18
  274. package/dist/components/media-card.d.mts +2 -0
  275. package/dist/components/media.css +22 -27
  276. package/dist/components/mentions.css +18 -17
  277. package/dist/components/mentions.d.mts +2 -0
  278. package/dist/components/menu.css +32 -28
  279. package/dist/components/modal.css +30 -27
  280. package/dist/components/modal.d.mts +2 -0
  281. package/dist/components/nav.css +48 -44
  282. package/dist/components/nav.d.mts +2 -0
  283. package/dist/components/notification.css +31 -25
  284. package/dist/components/notification.d.mts +2 -0
  285. package/dist/components/pagination.css +15 -13
  286. package/dist/components/pagination.d.mts +2 -0
  287. package/dist/components/panel.css +19 -20
  288. package/dist/components/panel.d.mts +2 -0
  289. package/dist/components/pill.css +8 -7
  290. package/dist/components/pill.d.mts +2 -0
  291. package/dist/components/popover.css +32 -23
  292. package/dist/components/popover.d.mts +2 -0
  293. package/dist/components/progress.d.mts +2 -0
  294. package/dist/components/rating.d.mts +2 -0
  295. package/dist/components/result.d.mts +2 -0
  296. package/dist/components/scroll-area.css +84 -112
  297. package/dist/components/scroll-area.d.mts +2 -0
  298. package/dist/components/scroll-area.mjs +1 -0
  299. package/dist/components/segmented.css +47 -29
  300. package/dist/components/segmented.d.mts +2 -0
  301. package/dist/components/select.css +80 -41
  302. package/dist/components/select.d.mts +2 -0
  303. package/dist/components/sidebar.css +42 -38
  304. package/dist/components/sidebar.d.mts +2 -0
  305. package/dist/components/skeleton.d.mts +2 -0
  306. package/dist/components/slider.css +26 -22
  307. package/dist/components/slider.d.mts +2 -0
  308. package/dist/components/spinner.d.mts +2 -0
  309. package/dist/components/split-pane.css +16 -7
  310. package/dist/components/split-pane.d.mts +2 -0
  311. package/dist/components/stat.css +17 -16
  312. package/dist/components/stat.d.mts +2 -0
  313. package/dist/components/steps.css +26 -26
  314. package/dist/components/steps.d.mts +2 -0
  315. package/dist/components/switch.css +78 -39
  316. package/dist/components/switch.d.mts +2 -0
  317. package/dist/components/table.css +54 -32
  318. package/dist/components/table.d.mts +2 -0
  319. package/dist/components/tabs.css +53 -32
  320. package/dist/components/tabs.d.mts +2 -0
  321. package/dist/components/tag-input.css +12 -8
  322. package/dist/components/tag-input.d.mts +2 -0
  323. package/dist/components/tag.css +20 -12
  324. package/dist/components/tag.d.mts +2 -0
  325. package/dist/components/theme-switcher.css +7 -7
  326. package/dist/components/theme-switcher.d.mts +2 -0
  327. package/dist/components/timeline.d.mts +2 -0
  328. package/dist/components/toast.css +34 -30
  329. package/dist/components/toast.d.mts +2 -0
  330. package/dist/components/toolbar.css +19 -18
  331. package/dist/components/toolbar.d.mts +2 -0
  332. package/dist/components/tooltip.css +9 -8
  333. package/dist/components/tooltip.d.mts +2 -0
  334. package/dist/components/tree-select.css +63 -40
  335. package/dist/components/tree-select.d.mts +2 -0
  336. package/dist/components/tree.d.mts +2 -0
  337. package/dist/components/upload.css +9 -11
  338. package/dist/components/upload.d.mts +2 -0
  339. package/dist/index.d.mts +85 -84
  340. package/dist/index.mjs +14644 -13935
  341. package/dist/react.d.mts +18 -18
  342. package/dist/react.mjs +377 -36
  343. package/dist/registry.json +797 -64
  344. package/dist/tokens/colors.css +6 -0
  345. package/dist/tokens/design.css +137 -31
  346. package/dist/tokens/dtcg.json +9592 -2008
  347. package/dist/tokens/figma.variables.json +7451 -2141
  348. package/dist/tokens/motion.css +51 -0
  349. package/dist/tokens/pixel.css +10 -0
  350. package/dist/tokens/scrollbars.css +40 -0
  351. package/dist/tokens/tokens-studio.json +8390 -1142
  352. package/dist/tokens/typography.css +33 -0
  353. package/dist/tokens.css +402 -82
  354. package/dist/ui.css +4196 -2163
  355. package/dist/vue.d.mts +17 -17
  356. package/dist/vue.mjs +371 -34
  357. package/docs/spec/charts-scale-a11y.md +115 -0
  358. package/docs/spec/design-philosophy.md +5 -5
  359. package/docs/spec/design-primitives.md +10 -10
  360. package/docs/spec/motion-typography.md +105 -0
  361. package/docs/spec/scrollbars.md +46 -0
  362. package/package.json +17 -3
@@ -0,0 +1,2 @@
1
+ // kit: tag-input 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/tag-input.mjs';
@@ -25,13 +25,13 @@
25
25
  gap: 4px;
26
26
  padding: 0 var(--icen-density-space-sm);
27
27
  height: 24px;
28
- background: var(--icen-token-fill-1);
28
+ background: var(--icen-token-fill-hover);
29
29
  color: var(--icen-token-text-muted);
30
- border: 1px solid var(--icen-token-line-soft);
31
- border-radius: var(--icen-radius-sm);
30
+ border: 1px solid var(--icen-token-control-border);
31
+ border-radius: var(--icen-control-radius-sm);
32
32
  font: inherit;
33
- font-size: var(--icen-density-font-size-sm);
34
- letter-spacing: 0.01em;
33
+ font-size: var(--icen-font-size-caption);
34
+ letter-spacing: .01em;
35
35
  white-space: nowrap;
36
36
  vertical-align: middle;
37
37
  transition:
@@ -40,7 +40,7 @@
40
40
  color var(--icen-tx-fast);
41
41
  }
42
42
  .icen-tag:hover {
43
- background: var(--icen-token-fill-2);
43
+ background: var(--icen-token-surface-pressed);
44
44
  color: var(--icen-token-text);
45
45
  }
46
46
 
@@ -102,22 +102,30 @@
102
102
  outline: none;
103
103
  box-shadow: var(--icen-ring);
104
104
  }
105
+ /* 触屏抬触达面(镜像 pill.css 的 .icen-pill-close 口径;桌面保持 16px 紧凑视觉) */
106
+ @media (pointer: coarse) {
107
+ .icen-tag-close {
108
+ min-inline-size: 28px;
109
+ min-block-size: 28px;
110
+ opacity: 1;
111
+ }
112
+ }
105
113
  .icen-tag-close svg { width: 10px; height: 10px; }
106
114
  .icen-tag--sm .icen-tag-close { width: 14px; height: 14px; margin-inline-end: -2px; }
107
115
  .icen-tag--lg .icen-tag-close { width: 18px; height: 18px; margin-inline-end: -6px; }
108
116
 
109
117
  /* ── 选中态(用于筛选条件等)── */
110
118
  .icen-tag.is-selected {
111
- background: var(--icen-token-accent-subtle);
112
- color: var(--icen-token-accent-deep, var(--icen-token-accent));
113
- border-color: color-mix(in srgb, var(--icen-token-accent) 40%, transparent);
119
+ background: var(--icen-token-fill-selected);
120
+ color: var(--icen-token-text);
121
+ border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
114
122
  }
115
- .icen-tag.is-selected .icen-tag-icon { color: var(--icen-token-accent); }
123
+ .icen-tag.is-selected .icen-tag-icon { color: var(--icen-token-accent-strong); }
116
124
 
117
125
  /* ── 语义色变体(与 pill 对齐,但底色更淡,作分类着色用)── */
118
126
  .icen-tag--accent {
119
- background: color-mix(in srgb, var(--icen-token-accent) 10%, transparent);
120
- color: var(--icen-token-accent-deep, var(--icen-token-accent));
127
+ background: var(--icen-token-accent-subtle);
128
+ color: var(--icen-token-accent-text);
121
129
  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
122
130
  }
123
131
  .icen-tag--success {
@@ -0,0 +1,2 @@
1
+ // kit: tag 类型面(构建产物,勿手改)
2
+ export {};
@@ -35,7 +35,7 @@
35
35
  .icen-theme-switcher-trigger:hover,
36
36
  .icen-theme-switcher-option:hover { background: var(--icen-token-surface-hover); border-color: var(--icen-token-line); }
37
37
  .icen-theme-switcher-trigger:focus-visible,
38
- .icen-theme-switcher-option:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 3px; }
38
+ .icen-theme-switcher-option:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; /* 与全局 a:focus-visible / material 系 2px 口径对齐 */ }
39
39
  .icen-theme-switcher-trigger[aria-expanded="true"] { border-color: var(--icen-token-accent); }
40
40
  .icen-theme-switcher-sample { display: inline-flex; flex: 0 0 auto; inline-size: 40px; block-size: 20px; overflow: hidden; border: 1px solid var(--icen-token-line); border-radius: var(--icen-radius-sm); }
41
41
  .icen-theme-switcher-sample i { display: block; flex: 1; }
@@ -55,21 +55,21 @@
55
55
  box-sizing: border-box;
56
56
  padding: var(--icen-density-space-md);
57
57
  overflow: auto;
58
- border: 1px solid var(--icen-token-line-soft);
58
+ border: 1px solid var(--icen-token-material-edge);
59
59
  border-radius: var(--icen-radius-lg);
60
60
  background: var(--icen-token-surface);
61
61
  color: var(--icen-token-text);
62
- box-shadow: var(--icen-token-shadow-overlay);
62
+ box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
63
63
  font: var(--icen-density-font-size-sm)/1.5 var(--icen-font-body);
64
64
  }
65
65
  .icen-theme-switcher-panel[hidden] { display: none; }
66
- .icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-md); padding-block-start: var(--icen-density-space-md); border-block-start: 1px solid var(--icen-token-line-soft); }
67
- .icen-theme-switcher-heading { margin: 0 0 var(--icen-density-space-sm); font-size: var(--icen-density-font-size-sm); font-weight: 500; color: var(--icen-token-text-muted); }
66
+ .icen-theme-switcher-section + .icen-theme-switcher-section { margin-block-start: var(--icen-density-space-md); padding-block-start: var(--icen-density-space-md); border-block-start: 1px solid var(--icen-token-separator-soft); }
67
+ .icen-theme-switcher-heading { margin: 0 0 var(--icen-density-space-sm); font-size: var(--icen-font-size-caption); font-weight: 600; letter-spacing: var(--icen-letter-spacing-caption); color: var(--icen-token-text-muted); }
68
68
  .icen-theme-switcher-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--icen-density-space-sm); }
69
- .icen-theme-switcher-option { position: relative; min-block-size: var(--icen-density-input-height-md); padding: var(--icen-density-space-sm); }
69
+ .icen-theme-switcher-option { position: relative; min-block-size: var(--icen-control-height-sm); padding: var(--icen-density-space-sm); }
70
70
  .icen-theme-switcher-options--theme .icen-theme-switcher-option { flex-direction: column; align-items: stretch; gap: var(--icen-density-space-sm); text-align: start; }
71
71
  .icen-theme-switcher-options--theme .icen-theme-switcher-sample { inline-size: 100%; block-size: 28px; }
72
- .icen-theme-switcher-option[aria-pressed="true"] { border-color: var(--icen-token-accent); background: var(--icen-token-accent-subtle); }
72
+ .icen-theme-switcher-option[aria-pressed="true"] { border-color: color-mix(in srgb, var(--icen-token-accent) 32%, var(--icen-token-separator)); background: var(--icen-token-fill-selected); color: var(--icen-token-text); }
73
73
  .icen-theme-switcher[data-icen-layout="inline"] { display: block; inline-size: 100%; container: icen-appearance / inline-size; }
74
74
  .icen-theme-switcher[data-icen-layout="inline"] > .icen-theme-switcher-panel { position: static; inline-size: 100%; box-shadow: none; background: var(--icen-token-surface); }
75
75
  /* Six built-ins form complete rows. Query the host, so sidebars and embedded
@@ -0,0 +1,2 @@
1
+ // kit: theme-switcher 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/theme-switcher.mjs';
@@ -0,0 +1,2 @@
1
+ // kit: timeline 类型面(构建产物,勿手改)
2
+ export {};
@@ -33,18 +33,20 @@
33
33
  overflow: hidden;
34
34
  display: inline-flex;
35
35
  align-items: center;
36
- gap: var(--icen-density-space-sm);
37
- background: var(--icen-token-surface);
36
+ gap: var(--icen-control-gap);
37
+ background: color-mix(in srgb, var(--icen-token-surface) 96%, transparent);
38
+ backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
39
+ -webkit-backdrop-filter: blur(var(--icen-material-blur-chrome)) saturate(var(--icen-material-saturate));
38
40
  color: var(--icen-token-text);
39
- border: 1px solid var(--icen-token-line-soft);
40
- border-inline-start: 3px solid var(--icen-token-line-strong);
41
- border-radius: var(--icen-radius-sm);
42
- box-shadow: var(--icen-token-shadow-overlay);
43
- padding: var(--icen-density-space-sm) var(--icen-density-space-md);
44
- font-size: var(--icen-density-font-size-md);
41
+ border: 1px solid var(--icen-token-material-edge);
42
+ border-inline-start: 2px solid var(--icen-token-separator-strong);
43
+ border-radius: var(--icen-radius-lg);
44
+ box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
45
+ padding: 8px 10px;
46
+ font-size: var(--icen-font-size-control);
45
47
  line-height: 1.4;
46
- max-inline-size: 380px;
47
- animation: icen-toast-in var(--icen-tx-slow);
48
+ max-inline-size: 400px;
49
+ animation: icen-toast-in var(--icen-duration-normal) var(--icen-ease-enter);
48
50
  }
49
51
 
50
52
  /* 语义色:起始缘 3px 强调 */
@@ -61,20 +63,21 @@
61
63
 
62
64
  .icen-toast-action {
63
65
  flex-shrink: 0;
64
- padding: 0;
65
- background: none;
66
+ min-block-size: 24px;
67
+ padding-inline: 8px;
68
+ background: var(--icen-token-fill-hover);
66
69
  border: 0;
70
+ border-radius: var(--icen-radius-xs);
67
71
  cursor: pointer;
68
- color: var(--icen-token-accent);
72
+ color: var(--icen-token-text);
69
73
  font: inherit;
70
74
  font-size: var(--icen-density-font-size-sm);
71
75
  font-weight: 500;
72
- text-decoration: underline;
73
- text-underline-offset: 3px;
76
+ text-decoration: none;
74
77
  -webkit-tap-highlight-color: transparent;
75
- transition: color var(--icen-tx-fast);
78
+ transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
76
79
  }
77
- .icen-toast-action:hover { color: var(--icen-token-accent-deep, var(--icen-token-accent)); }
80
+ .icen-toast-action:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); }
78
81
  .icen-toast-action:focus-visible {
79
82
  outline: none;
80
83
  border-radius: var(--icen-radius-xs);
@@ -89,9 +92,9 @@
89
92
  display: inline-flex;
90
93
  align-items: center;
91
94
  justify-content: center;
92
- color: var(--icen-token-text-faint);
95
+ color: var(--icen-token-text-muted);
93
96
  }
94
- .icen-toast-icon svg { width: 16px; height: 16px; }
97
+ .icen-toast-icon svg { width: 15px; height: 15px; }
95
98
  .icen-toast--success .icen-toast-icon { color: var(--icen-token-success); }
96
99
  .icen-toast--error .icen-toast-icon { color: var(--icen-token-error); }
97
100
  .icen-toast--warning .icen-toast-icon { color: var(--icen-token-warning); }
@@ -103,19 +106,19 @@
103
106
  display: inline-flex;
104
107
  align-items: center;
105
108
  justify-content: center;
106
- width: 20px;
107
- height: 20px;
109
+ width: 24px;
110
+ height: 24px;
108
111
  padding: 0;
109
112
  border: 0;
110
113
  border-radius: var(--icen-radius-xs);
111
114
  background: transparent;
112
- color: var(--icen-token-text-faint);
115
+ color: var(--icen-token-text-muted);
113
116
  cursor: pointer;
114
117
  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
115
118
  }
116
119
  .icen-toast-close:hover {
117
120
  color: var(--icen-token-text);
118
- background: var(--icen-token-fill-1);
121
+ background: var(--icen-token-fill-hover);
119
122
  }
120
123
  .icen-toast-close svg { width: 12px; height: 12px; }
121
124
 
@@ -125,8 +128,8 @@
125
128
  min-width: 0;
126
129
  }
127
130
  .icen-toast-title {
128
- font-size: var(--icen-density-font-size-md);
129
- font-weight: 500;
131
+ font-size: var(--icen-font-size-control);
132
+ font-weight: 600;
130
133
  color: var(--icen-token-text);
131
134
  line-height: 1.4;
132
135
  }
@@ -203,8 +206,8 @@
203
206
  }
204
207
 
205
208
  @keyframes icen-toast-in {
206
- from { opacity: 0; transform: translateY(8px); }
207
- to { opacity: 1; transform: translateY(0); }
209
+ from { opacity: 0; transform: translateY(6px) scale(.99); }
210
+ to { opacity: 1; transform: translateY(0) scale(1); }
208
211
  }
209
212
 
210
213
  @media (max-width: 480px) {
@@ -217,15 +220,16 @@
217
220
  }
218
221
 
219
222
  /* Quiet close shares the same fixed action slot as other interface controls. */
220
- .icen-toast-close.icen-icon-action { inline-size: var(--icen-density-input-height-sm); block-size: var(--icen-density-input-height-sm); }
223
+ .icen-toast-close.icen-icon-action { inline-size: 28px; block-size: 28px; }
221
224
  .icen-toast-close.icen-icon-action > svg { inline-size: 14px; block-size: 14px; }
222
225
  .icen-toast-close:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
223
226
  @media (pointer: coarse) { .icen-toast-close.icen-icon-action { min-inline-size: 44px; min-block-size: 44px; } }
224
227
 
225
228
  .icen-toast-content { min-inline-size: 0; }
226
- .icen-toast { max-inline-size: min(380px, calc(100vw - 2 * var(--icen-density-space-md))); }
227
- .icen-toast-action { min-block-size: var(--icen-density-input-height-sm); padding-inline: var(--icen-density-space-sm); border-radius: var(--icen-radius-sm); text-decoration: none; background: var(--icen-token-fill-1); }
229
+ .icen-toast { max-inline-size: min(400px, calc(100vw - 2 * var(--icen-density-space-md))); }
230
+ .icen-toast-action { min-block-size: 24px; background: var(--icen-token-fill-hover); }
228
231
  .icen-toast-action:hover { background: var(--icen-token-fill-2); }
229
232
  @media (pointer: coarse) { .icen-toast-action { min-inline-size: 44px; min-block-size: 44px; } }
230
233
 
234
+
231
235
  }
@@ -0,0 +1,2 @@
1
+ // kit: toast 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/toast.mjs';
@@ -30,10 +30,11 @@
30
30
  align-items: center;
31
31
  gap: var(--icen-density-space-sm);
32
32
  flex-wrap: nowrap;
33
- padding: var(--icen-density-space-sm);
34
- background: var(--icen-token-bg-soft);
35
- border: 1px solid var(--icen-token-line-soft);
36
- border-radius: var(--icen-radius-md);
33
+ min-block-size: 44px;
34
+ padding: 6px 8px;
35
+ background: var(--icen-token-surface-chrome);
36
+ border: 1px solid var(--icen-token-separator-soft);
37
+ border-radius: var(--icen-control-radius-lg);
37
38
  }
38
39
  .icen-toolbar--wrap { flex-wrap: wrap; }
39
40
  .icen-toolbar--borderless {
@@ -42,14 +43,14 @@
42
43
  padding: 0;
43
44
  }
44
45
  .icen-toolbar--elevated {
45
- background: var(--icen-token-card-strong);
46
- border-color: var(--icen-token-outline-soft);
47
- box-shadow: var(--icen-token-shadow-elevated);
46
+ background: var(--icen-token-surface);
47
+ border-color: var(--icen-token-material-edge);
48
+ box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
48
49
  }
49
50
 
50
51
  /* ── 尺寸 ── */
51
- .icen-toolbar--sm { padding: 4px var(--icen-density-space-xs); gap: var(--icen-density-space-xs); }
52
- .icen-toolbar--lg { padding: var(--icen-density-space-md); gap: var(--icen-density-space-md); }
52
+ .icen-toolbar--sm { min-block-size: 36px; padding: 4px 6px; gap: var(--icen-density-space-xs); }
53
+ .icen-toolbar--lg { min-block-size: 52px; padding: 8px 12px; gap: var(--icen-density-space-md); }
53
54
 
54
55
  /* ── 分组(紧贴一组按钮) ── */
55
56
  .icen-toolbar-group {
@@ -57,21 +58,21 @@
57
58
  align-items: center;
58
59
  gap: 2px;
59
60
  padding: 2px;
60
- background: var(--icen-token-fill-1);
61
- border-radius: var(--icen-radius-sm);
61
+ background: var(--icen-token-fill-hover);
62
+ border-radius: var(--icen-radius-xs);
62
63
  }
63
- .icen-toolbar-group > .icen-btn { border-color: transparent; background: transparent; }
64
- .icen-toolbar-group > .icen-btn:hover { background: var(--icen-token-fill-2); }
64
+ .icen-toolbar-group > .icen-btn { border-color: transparent; background: transparent; box-shadow: none; }
65
+ .icen-toolbar-group > .icen-btn:hover { background: var(--icen-token-fill-hover); }
65
66
 
66
67
  /* ── 分隔符 ── */
67
68
  .icen-toolbar-separator {
68
69
  width: 1px;
69
- height: 20px;
70
- background: var(--icen-token-line-soft);
70
+ height: 18px;
71
+ background: var(--icen-token-separator);
71
72
  flex-shrink: 0;
72
73
  }
73
- .icen-toolbar--sm .icen-toolbar-separator { height: 16px; }
74
- .icen-toolbar--lg .icen-toolbar-separator { height: 24px; }
74
+ .icen-toolbar--sm .icen-toolbar-separator { height: 14px; }
75
+ .icen-toolbar--lg .icen-toolbar-separator { height: 22px; }
75
76
 
76
77
  /* 水平工具条里的垂直分隔(用于纵向 toolbar) */
77
78
  .icen-toolbar--vertical { flex-direction: column; align-items: stretch; }
@@ -91,7 +92,7 @@
91
92
  font-variant-numeric: tabular-nums;
92
93
  white-space: nowrap;
93
94
  }
94
- .icen-toolbar-label.icen-accent { color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent))); }
95
+ .icen-toolbar-label.icen-accent { color: var(--icen-token-accent-text); }
95
96
 
96
97
  @media (max-width: 480px) {
97
98
  .icen-toolbar { flex-wrap: wrap; }
@@ -0,0 +1,2 @@
1
+ // kit: toolbar 类型面(构建产物,勿手改)
2
+ export {};
@@ -27,8 +27,8 @@
27
27
  z-index: var(--icen-z-tooltip);
28
28
  width: max-content;
29
29
  max-width: min(260px, calc(100vw - 32px));
30
- padding: 4px var(--icen-density-space-xs);
31
- font-size: var(--icen-density-font-size-xs);
30
+ padding: 4px 7px;
31
+ font-size: var(--icen-font-size-caption);
32
32
  font-weight: 400;
33
33
  line-height: 1.4;
34
34
  white-space: nowrap;
@@ -36,9 +36,9 @@
36
36
  overflow: hidden;
37
37
  background: color-mix(in srgb, var(--icen-token-text) 92%, var(--icen-token-bg));
38
38
  color: var(--icen-token-bg);
39
- border: 1px solid var(--icen-token-line);
39
+ border: 1px solid color-mix(in srgb, var(--icen-token-bg) 12%, transparent);
40
40
  box-shadow: var(--icen-token-shadow-elevated);
41
- border-radius: var(--icen-radius-sm);
41
+ border-radius: var(--icen-radius-xs);
42
42
  opacity: 0;
43
43
  pointer-events: none;
44
44
  transition:
@@ -136,8 +136,8 @@
136
136
  z-index: var(--icen-z-tooltip);
137
137
  box-sizing: border-box;
138
138
  max-inline-size: min(260px, calc(100vw - 32px));
139
- padding: 4px var(--icen-density-space-xs);
140
- font-size: var(--icen-density-font-size-xs);
139
+ padding: 4px 7px;
140
+ font-size: var(--icen-font-size-caption);
141
141
  font-weight: 400;
142
142
  line-height: 1.4;
143
143
  white-space: nowrap;
@@ -145,9 +145,9 @@
145
145
  text-overflow: ellipsis;
146
146
  background: color-mix(in srgb, var(--icen-token-text) 92%, var(--icen-token-bg));
147
147
  color: var(--icen-token-bg);
148
- border: 1px solid var(--icen-token-line);
148
+ border: 1px solid color-mix(in srgb, var(--icen-token-bg) 12%, transparent);
149
149
  box-shadow: var(--icen-token-shadow-elevated);
150
- border-radius: var(--icen-radius-sm);
150
+ border-radius: var(--icen-radius-xs);
151
151
  pointer-events: none;
152
152
  opacity: 0;
153
153
  translate: 0 4px;
@@ -172,4 +172,5 @@
172
172
  .icen-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
173
173
  }
174
174
 
175
+
175
176
  }
@@ -0,0 +1,2 @@
1
+ // kit: tooltip 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/tooltip.mjs';
@@ -50,7 +50,7 @@
50
50
  */
51
51
 
52
52
  .icen-tree-select {
53
- --tree-select-height: var(--icen-density-input-height-md);
53
+ --tree-select-height: var(--icen-control-height-md);
54
54
  position: relative;
55
55
  inline-size: 100%;
56
56
  }
@@ -59,27 +59,29 @@
59
59
  position: relative;
60
60
  display: flex;
61
61
  align-items: center;
62
- gap: var(--icen-density-space-xs);
62
+ gap: var(--icen-control-gap-sm);
63
63
  inline-size: 100%;
64
64
  min-height: var(--tree-select-height);
65
65
  height: auto;
66
- padding: 4px var(--icen-density-space-sm);
67
- font-size: var(--icen-density-font-size-md);
66
+ padding: 4px var(--icen-field-padding-inline);
67
+ font-family: var(--icen-font-body);
68
+ font-size: var(--icen-font-size-control);
69
+ line-height: 1.4;
68
70
  text-align: start;
69
71
  flex-wrap: wrap;
70
72
  background: var(--icen-token-control);
71
73
  color: var(--icen-token-text);
72
- border: 1px solid var(--icen-token-outline-soft);
73
- border-radius: var(--icen-radius-md);
74
- box-shadow: var(--icen-token-shadow-inset);
74
+ border: var(--icen-control-border-width) solid var(--icen-token-control-border);
75
+ border-radius: var(--icen-control-radius);
76
+ box-shadow: var(--icen-token-shadow-field);
75
77
  cursor: pointer;
76
78
  transition:
77
79
  border-color var(--icen-tx-fast),
78
80
  box-shadow var(--icen-tx-fast);
79
- padding-inline-end: var(--icen-density-space-sm);
81
+ padding-inline-end: calc(var(--icen-field-padding-inline) + 18px);
80
82
  }
81
83
  .icen-tree-select-trigger:hover:not(:disabled) {
82
- border-color: var(--icen-hover-border);
84
+ border-color: var(--icen-token-control-border-hover);
83
85
  }
84
86
  .icen-tree-select-trigger:focus-visible {
85
87
  outline: none;
@@ -107,15 +109,16 @@
107
109
 
108
110
  .icen-tree-select-chevron {
109
111
  position: absolute;
110
- inset-inline-end: var(--icen-density-space-sm);
112
+ inset-inline-end: var(--icen-field-padding-inline);
111
113
  inset-block-start: 50%;
112
114
  translate: 0 -50%;
113
- inline-size: 16px;
114
- block-size: 16px;
115
+ inline-size: 12px;
116
+ block-size: 12px;
115
117
  flex: none;
116
118
  color: var(--icen-token-text-muted);
119
+ opacity: .82;
117
120
  pointer-events: none;
118
- transition: transform var(--icen-tx-fast);
121
+ transition: transform var(--icen-tx-fast), opacity var(--icen-tx-fast);
119
122
  }
120
123
  .icen-tree-select.is-open .icen-tree-select-chevron { transform: rotate(180deg); }
121
124
 
@@ -170,8 +173,8 @@
170
173
  align-items: center;
171
174
  justify-content: center;
172
175
  flex: none;
173
- inline-size: 16px;
174
- block-size: 20px;
176
+ inline-size: 24px; /* 与 .icen-select-chip-x 同口径(WCAG 2.5.8 下限) */
177
+ block-size: 24px;
175
178
  margin-inline-start: var(--icen-density-space-xs);
176
179
  padding: 0;
177
180
  border: 0;
@@ -192,11 +195,11 @@
192
195
  z-index: var(--icen-z-popover);
193
196
  overflow-y: auto;
194
197
  overscroll-behavior: contain;
195
- padding: var(--icen-density-space-sm);
196
- background: var(--icen-token-card-strong);
197
- border: 1px solid var(--icen-token-outline);
198
+ padding: var(--icen-density-space-xs);
199
+ background: var(--icen-token-surface);
200
+ border: 1px solid var(--icen-token-material-edge);
198
201
  border-radius: var(--icen-radius-lg);
199
- box-shadow: var(--icen-token-shadow-overlay);
202
+ box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
200
203
  transform-origin: top center;
201
204
  animation: icen-pop-in var(--icen-tx-fast);
202
205
  }
@@ -222,25 +225,26 @@
222
225
  .icen-tree-select-row {
223
226
  display: flex;
224
227
  align-items: center;
225
- gap: var(--icen-density-space-xs);
226
- padding-block: var(--icen-density-space-xs);
228
+ gap: var(--icen-control-gap-sm);
229
+ min-block-size: var(--icen-control-height-sm);
230
+ padding-block: 3px;
227
231
  padding-inline: calc(4px + var(--depth, 0) * 18px) var(--icen-density-space-sm);
228
- border-radius: var(--icen-radius-sm);
229
- font-size: var(--icen-density-font-size-md);
232
+ border-radius: var(--icen-radius-xs);
233
+ font-size: var(--icen-font-size-control);
230
234
  color: var(--icen-token-text);
231
235
  cursor: pointer;
232
236
  transition: background-color var(--icen-tx-fast);
233
237
  }
234
- .icen-tree-select-row:hover:not(.is-disabled) { background: var(--icen-token-control-hover); }
238
+ .icen-tree-select-row:hover:not(.is-disabled) { background: var(--icen-token-fill-hover); }
235
239
  .icen-tree-select-row:focus-visible,
236
240
  .icen-tree-select-row.is-focused {
237
241
  outline: none;
238
- box-shadow: var(--icen-ring);
242
+ box-shadow: var(--icen-ring-inset);
239
243
  }
240
244
  .icen-tree-select-row.is-selected {
241
- background: var(--icen-token-accent-subtle);
242
- color: var(--icen-token-accent);
243
- font-weight: 500;
245
+ background: var(--icen-token-fill-selected);
246
+ color: var(--icen-token-text);
247
+ font-weight: var(--icen-font-weight-control);
244
248
  }
245
249
  .icen-tree-select-row.is-disabled,
246
250
  .icen-tree-select-row[aria-disabled='true'] {
@@ -282,25 +286,28 @@
282
286
 
283
287
  /* 三态勾选框(checkable 时渲染;.is-checked/.is-mixed 由 behavior 求值挂行) */
284
288
  .icen-tree-select-check {
285
- width: 14px;
286
- height: 14px;
289
+ width: 15px;
290
+ height: 15px;
287
291
  flex-shrink: 0;
288
292
  display: inline-flex;
289
293
  align-items: center;
290
294
  justify-content: center;
291
- border: 1.5px solid var(--icen-token-outline);
295
+ border: 1px solid var(--icen-token-control-border);
292
296
  border-radius: var(--icen-radius-xs);
297
+ background: var(--icen-token-control);
293
298
  transition:
294
299
  background-color var(--icen-tx-fast),
295
300
  border-color var(--icen-tx-fast);
296
301
  }
297
302
  .icen-tree-select-row.is-checked .icen-tree-select-check {
298
- background: var(--icen-token-accent);
299
- border-color: var(--icen-token-accent);
303
+ background: var(--icen-token-accent-strong);
304
+ border-color: var(--icen-token-accent-strong);
305
+ color: var(--icen-token-on-accent);
300
306
  }
301
307
  .icen-tree-select-row.is-mixed .icen-tree-select-check {
302
- background: var(--icen-token-accent);
303
- border-color: var(--icen-token-accent);
308
+ background: var(--icen-token-accent-strong);
309
+ border-color: var(--icen-token-accent-strong);
310
+ color: var(--icen-token-on-accent);
304
311
  }
305
312
 
306
313
  .icen-tree-select-label {
@@ -406,11 +413,27 @@
406
413
 
407
414
  .icen-tree-select-panel:has(> .icen-tree-select-search) { scroll-padding-block-start: calc(var(--icen-density-input-height-sm) + 3 * var(--icen-density-space-xs) + var(--icen-density-space-sm) + 1px); }
408
415
 
409
- .icen-tree-select-row.is-checked .icen-tree-select-check, .icen-tree-select-row.is-mixed .icen-tree-select-check { background: var(--icen-token-surface); }
410
- .icen-tree-select-row:is(.is-checked,.is-mixed) .icen-tree-select-check::after { content: ""; inline-size: 6px; block-size: 6px; border-radius: max(0px, calc(var(--icen-radius-xs) - var(--icen-density-space-xs))); background: var(--icen-token-accent); }
411
- .icen-tree-select-row.is-mixed .icen-tree-select-check::after { inline-size: 8px; block-size: 2px; border-radius: var(--icen-radius-full); }
416
+ .icen-tree-select-row:is(.is-checked,.is-mixed) .icen-tree-select-check {
417
+ background: var(--icen-token-accent-strong);
418
+ border-color: var(--icen-token-accent-strong);
419
+ color: var(--icen-token-on-accent);
420
+ }
421
+ .icen-tree-select-row:is(.is-checked,.is-mixed) .icen-tree-select-check::after {
422
+ content: '';
423
+ inline-size: 10px;
424
+ block-size: 10px;
425
+ background: currentColor;
426
+ mask: var(--icen-token-icon-check) center / contain no-repeat;
427
+ -webkit-mask: var(--icen-token-icon-check) center / contain no-repeat;
428
+ }
429
+ .icen-tree-select-row.is-mixed .icen-tree-select-check::after {
430
+ inline-size: 9px;
431
+ block-size: 9px;
432
+ mask-image: var(--icen-token-icon-minus);
433
+ -webkit-mask-image: var(--icen-token-icon-minus);
434
+ }
412
435
 
413
- /* Popup affordance is carried by the control surface, not a direction glyph. */
414
- .icen-tree-select-chevron { display: none; }
436
+ /* Clear affordance replaces the popup glyph in the trailing slot. */
437
+ .icen-tree-select:has(.icen-tree-select-clear:not([hidden])) .icen-tree-select-chevron { display: none; }
415
438
 
416
439
  }
@@ -0,0 +1,2 @@
1
+ // kit: tree-select 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/tree-select.mjs';
@@ -0,0 +1,2 @@
1
+ // kit: tree 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/tree.mjs';
@@ -42,19 +42,18 @@
42
42
  justify-content: center;
43
43
  text-align: center;
44
44
  padding: var(--icen-density-space-lg) var(--icen-density-space-md);
45
- border: 2px dashed var(--icen-token-outline-soft);
46
- border-radius: var(--icen-radius-lg);
47
- background: var(--icen-token-bg-soft);
45
+ border: 1px dashed var(--icen-token-control-border);
46
+ border-radius: var(--icen-control-radius-lg);
47
+ background: var(--icen-token-surface);
48
48
  cursor: pointer;
49
49
  transition:
50
50
  border-color var(--icen-tx-fast),
51
- background-color var(--icen-tx-fast),
52
- transform var(--icen-tx-fast);
51
+ background-color var(--icen-tx-fast);
53
52
  }
54
53
  .icen-upload:hover:not(.is-disabled):not(:has(.icen-upload-dropzone)),
55
54
  .icen-upload-dropzone:hover:not(.is-disabled) {
56
- border-color: color-mix(in srgb, var(--icen-token-accent) 60%, transparent);
57
- background: var(--icen-token-control-hover);
55
+ border-color: var(--icen-token-control-border-hover);
56
+ background: var(--icen-token-fill-hover);
58
57
  }
59
58
  .icen-upload:focus-visible,
60
59
  .icen-upload-dropzone:focus-visible {
@@ -67,7 +66,6 @@
67
66
  border-color: var(--icen-token-accent);
68
67
  border-style: solid;
69
68
  background: var(--icen-token-accent-subtle);
70
- transform: scale(1.005);
71
69
  }
72
70
  .icen-upload.is-disabled,
73
71
  .icen-upload[aria-disabled='true'],
@@ -91,10 +89,10 @@
91
89
  display: flex;
92
90
  align-items: center;
93
91
  justify-content: center;
94
- width: 40px;
95
- height: 40px;
92
+ width: 38px;
93
+ height: 38px;
96
94
  margin-bottom: var(--icen-density-space-sm);
97
- border-radius: var(--icen-radius-lg);
95
+ border-radius: var(--icen-control-radius-lg);
98
96
  background: var(--icen-token-accent-subtle);
99
97
  color: var(--icen-token-accent);
100
98
  transition: transform var(--icen-tx-fast);
@@ -0,0 +1,2 @@
1
+ // kit: upload 类型面(构建产物,勿手改)
2
+ export * from '../behaviors/upload.mjs';