@keyfunc/keybricks-ds 1.0.4 → 2.3.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 (381) hide show
  1. package/DEPLOY.md +14 -5
  2. package/DESIGN.md +245 -59
  3. package/INTEGRATION.md +243 -49
  4. package/SKILL.md +13 -11
  5. package/_adherence.oxlintrc.json +183 -70
  6. package/_scripts/build-index.mjs +24 -4
  7. package/_scripts/build-tokens.mjs +5 -2
  8. package/assets/icons/icon-index.js +1 -1
  9. package/assets/icons/icon-index.json +1 -1
  10. package/components/_cards/accordion.card.html +2 -2
  11. package/components/_cards/action-chip.card.html +11 -9
  12. package/components/_cards/activity.card.html +3 -3
  13. package/components/_cards/alert.card.html +3 -3
  14. package/components/_cards/app-chrome.card.html +4 -4
  15. package/components/_cards/banner.card.html +1 -1
  16. package/components/_cards/breadcrumb.card.html +5 -5
  17. package/components/_cards/button-1-base.card.html +23 -26
  18. package/components/_cards/button-2-states.card.html +27 -25
  19. package/components/_cards/button-3-sizes-icons.card.html +20 -19
  20. package/components/_cards/button-4-group.card.html +14 -31
  21. package/components/_cards/canvas-zoom-controls.card.html +1 -1
  22. package/components/_cards/cards-indicators.card.html +2 -2
  23. package/components/_cards/charts-1-sparkline.card.html +5 -5
  24. package/components/_cards/charts-10-gauge.card.html +5 -5
  25. package/components/_cards/charts-11-funnel.card.html +3 -3
  26. package/components/_cards/charts-12-treemap.card.html +3 -3
  27. package/components/_cards/charts-14-radar.card.html +3 -3
  28. package/components/_cards/charts-15-distribution.card.html +2 -2
  29. package/components/_cards/charts-16-pareto.card.html +3 -3
  30. package/components/_cards/charts-17-candlestick.card.html +3 -3
  31. package/components/_cards/charts-18-sankey.card.html +3 -3
  32. package/components/_cards/charts-19-chord.card.html +3 -3
  33. package/components/_cards/charts-2-line.card.html +4 -4
  34. package/components/_cards/charts-20-sunburst.card.html +3 -3
  35. package/components/_cards/charts-21-worldmap.card.html +4 -4
  36. package/components/_cards/charts-22-gantt.card.html +3 -3
  37. package/components/_cards/charts-23-bar3d.card.html +3 -3
  38. package/components/_cards/charts-24-pie3d.card.html +3 -3
  39. package/components/_cards/charts-25-surface3d.card.html +3 -3
  40. package/components/_cards/charts-26-scatter3d.card.html +3 -3
  41. package/components/_cards/charts-27-ribbon3d.card.html +3 -3
  42. package/components/_cards/charts-3-bar.card.html +7 -7
  43. package/components/_cards/charts-4-barlist.card.html +3 -3
  44. package/components/_cards/charts-5-donut.card.html +4 -4
  45. package/components/_cards/charts-6-scatter.card.html +3 -3
  46. package/components/_cards/charts-7-heatmap.card.html +3 -3
  47. package/components/_cards/charts-8-waterfall.card.html +3 -3
  48. package/components/_cards/charts-9-bullet.card.html +3 -3
  49. package/components/_cards/charts-99-fullpage.card.html +5 -5
  50. package/components/_cards/checkbox.card.html +9 -6
  51. package/components/_cards/codeblock.card.html +2 -2
  52. package/components/_cards/combobox.card.html +6 -3
  53. package/components/_cards/context-menu.card.html +6 -3
  54. package/components/_cards/date-picker.card.html +10 -4
  55. package/components/_cards/diffvalue.card.html +3 -3
  56. package/components/_cards/divider.card.html +4 -4
  57. package/components/_cards/drawer.card.html +4 -4
  58. package/components/_cards/dropdown-menu.card.html +7 -7
  59. package/components/_cards/dropzone.card.html +5 -3
  60. package/components/_cards/empty-state.card.html +6 -6
  61. package/components/_cards/filter-bar.card.html +5 -5
  62. package/components/_cards/icon-button.card.html +14 -14
  63. package/components/_cards/icons-1-core.card.html +4 -4
  64. package/components/_cards/icons-2-feather.card.html +4 -4
  65. package/components/_cards/icons-3-unicons.card.html +4 -4
  66. package/components/_cards/input.card.html +5 -2
  67. package/components/_cards/kbd.card.html +2 -2
  68. package/components/_cards/keyvalue.card.html +2 -2
  69. package/components/_cards/listrow.card.html +2 -2
  70. package/components/_cards/loading.card.html +3 -3
  71. package/components/_cards/log-viewer.card.html +3 -3
  72. package/components/_cards/modal.card.html +9 -9
  73. package/components/_cards/multi-select.card.html +6 -3
  74. package/components/_cards/number-stepper.card.html +9 -5
  75. package/components/_cards/pagination.card.html +6 -3
  76. package/components/_cards/people.card.html +4 -4
  77. package/components/_cards/pipeline-node.card.html +8 -8
  78. package/components/_cards/pipeline-palette.card.html +5 -5
  79. package/components/_cards/radio.card.html +12 -7
  80. package/components/_cards/search.card.html +6 -3
  81. package/components/_cards/segmented-control.card.html +11 -10
  82. package/components/_cards/select.card.html +8 -4
  83. package/components/_cards/slider.card.html +2 -2
  84. package/components/_cards/smart-table.card.html +3 -3
  85. package/components/_cards/spreadsheet.card.html +3 -3
  86. package/components/_cards/stepper.card.html +3 -3
  87. package/components/_cards/table.card.html +165 -0
  88. package/components/_cards/tabs.card.html +6 -3
  89. package/components/_cards/tag.card.html +6 -3
  90. package/components/_cards/textarea.card.html +2 -2
  91. package/components/_cards/timeline.card.html +3 -3
  92. package/components/_cards/toast.card.html +10 -8
  93. package/components/_cards/toggles.card.html +15 -10
  94. package/components/_cards/tooltip.card.html +7 -7
  95. package/components/_cards/tree.card.html +3 -3
  96. package/components/_shared/card-kit.css +25 -0
  97. package/components/_shared/card-kit.js +50 -0
  98. package/components/_shared/src-buttons.js +1 -1
  99. package/components/_shared/src-charts.js +1 -1
  100. package/components/_shared/src-data.js +1 -1
  101. package/components/_shared/src-display.js +1 -1
  102. package/components/_shared/src-feedback.js +1 -1
  103. package/components/_shared/src-forms.js +1 -1
  104. package/components/_shared/src-icons.js +1 -1
  105. package/components/_shared/src-navigation.js +1 -1
  106. package/components/_shared/src-pipeline.js +1 -1
  107. package/components/_shared/src-tabs.js +1 -1
  108. package/components/_shared/view-source.js +3 -3
  109. package/components/_vue/index.mjs +16 -5
  110. package/components/buttons/ActionChip.d.ts +3 -1
  111. package/components/buttons/ActionChip.jsx +4 -4
  112. package/components/buttons/ActionChip.vue +4 -4
  113. package/components/buttons/Button.d.ts +5 -2
  114. package/components/buttons/Button.jsx +15 -18
  115. package/components/buttons/Button.vue +17 -18
  116. package/components/buttons/ButtonGroup.vue +1 -1
  117. package/components/buttons/IconButton.d.ts +2 -1
  118. package/components/buttons/IconButton.jsx +13 -9
  119. package/components/buttons/IconButton.vue +12 -9
  120. package/components/buttons/buttons.prompt.md +6 -5
  121. package/components/charts/Bar3D.jsx +2 -2
  122. package/components/charts/Bar3D.vue +3 -3
  123. package/components/charts/BarChart.jsx +4 -4
  124. package/components/charts/BarChart.vue +6 -6
  125. package/components/charts/BarList.jsx +4 -4
  126. package/components/charts/BarList.vue +4 -4
  127. package/components/charts/BoxPlot.jsx +1 -1
  128. package/components/charts/BoxPlot.vue +3 -3
  129. package/components/charts/BulletChart.jsx +6 -6
  130. package/components/charts/BulletChart.vue +6 -6
  131. package/components/charts/CandlestickChart.jsx +2 -2
  132. package/components/charts/CandlestickChart.vue +5 -5
  133. package/components/charts/ChartKit.jsx +8 -7
  134. package/components/charts/ChartLegend.vue +16 -0
  135. package/components/charts/ChartTooltip.vue +16 -0
  136. package/components/charts/ChordChart.jsx +2 -2
  137. package/components/charts/ChordChart.vue +3 -3
  138. package/components/charts/DonutChart.jsx +1 -1
  139. package/components/charts/DonutChart.vue +2 -2
  140. package/components/charts/FunnelChart.jsx +3 -3
  141. package/components/charts/FunnelChart.vue +4 -4
  142. package/components/charts/GanttChart.jsx +2 -2
  143. package/components/charts/GanttChart.vue +3 -3
  144. package/components/charts/GaugeChart.jsx +2 -2
  145. package/components/charts/GaugeChart.vue +2 -2
  146. package/components/charts/HeatmapChart.jsx +2 -2
  147. package/components/charts/HeatmapChart.vue +2 -2
  148. package/components/charts/Histogram.jsx +2 -2
  149. package/components/charts/Histogram.vue +4 -4
  150. package/components/charts/LineChart.jsx +1 -1
  151. package/components/charts/LineChart.vue +4 -4
  152. package/components/charts/ParetoChart.jsx +3 -3
  153. package/components/charts/ParetoChart.vue +5 -5
  154. package/components/charts/Pie3D.jsx +1 -1
  155. package/components/charts/Pie3D.vue +2 -2
  156. package/components/charts/PlotGrid.vue +18 -0
  157. package/components/charts/RadarChart.jsx +1 -1
  158. package/components/charts/RadarChart.vue +2 -2
  159. package/components/charts/Ribbon3D.jsx +2 -2
  160. package/components/charts/Ribbon3D.vue +3 -3
  161. package/components/charts/SankeyChart.jsx +2 -2
  162. package/components/charts/SankeyChart.vue +3 -3
  163. package/components/charts/Scatter3D.jsx +1 -1
  164. package/components/charts/Scatter3D.vue +2 -2
  165. package/components/charts/ScatterChart.jsx +3 -3
  166. package/components/charts/ScatterChart.vue +5 -5
  167. package/components/charts/Sparkline.jsx +1 -1
  168. package/components/charts/Sparkline.vue +1 -1
  169. package/components/charts/SunburstChart.jsx +1 -1
  170. package/components/charts/SunburstChart.vue +2 -2
  171. package/components/charts/Surface3D.jsx +2 -2
  172. package/components/charts/Surface3D.vue +3 -3
  173. package/components/charts/TreemapChart.jsx +2 -2
  174. package/components/charts/TreemapChart.vue +3 -3
  175. package/components/charts/WaterfallChart.jsx +2 -2
  176. package/components/charts/WaterfallChart.vue +6 -5
  177. package/components/charts/WorldMap.jsx +4 -4
  178. package/components/charts/WorldMap.vue +5 -5
  179. package/components/charts/XLabels.vue +11 -0
  180. package/components/data/CodeBlock.jsx +1 -1
  181. package/components/data/CodeBlock.vue +1 -1
  182. package/components/data/DiffValue.d.ts +1 -0
  183. package/components/data/DiffValue.jsx +1 -1
  184. package/components/data/DiffValue.vue +1 -1
  185. package/components/data/FilterBar.d.ts +2 -0
  186. package/components/data/FilterBar.jsx +10 -9
  187. package/components/data/FilterBar.vue +9 -8
  188. package/components/data/KeyValue.d.ts +1 -1
  189. package/components/data/KeyValue.jsx +4 -4
  190. package/components/data/KeyValue.vue +4 -4
  191. package/components/data/ListRow.jsx +2 -2
  192. package/components/data/ListRow.vue +2 -2
  193. package/components/data/Pagination.d.ts +5 -1
  194. package/components/data/Pagination.jsx +16 -12
  195. package/components/data/Pagination.vue +14 -9
  196. package/components/data/SmartTable.d.ts +4 -1
  197. package/components/data/SmartTable.jsx +16 -14
  198. package/components/data/SmartTable.vue +26 -23
  199. package/components/data/Spreadsheet.d.ts +2 -0
  200. package/components/data/Spreadsheet.jsx +16 -15
  201. package/components/data/Spreadsheet.vue +19 -18
  202. package/components/data/Table.d.ts +101 -0
  203. package/components/data/Table.jsx +223 -0
  204. package/components/data/Table.vue +153 -0
  205. package/components/data/data.prompt.md +3 -3
  206. package/components/display/Avatar.jsx +2 -2
  207. package/components/display/Avatar.vue +3 -2
  208. package/components/display/AvatarGroup.vue +3 -2
  209. package/components/display/Badge.d.ts +4 -1
  210. package/components/display/Badge.jsx +10 -5
  211. package/components/display/Badge.vue +1 -1
  212. package/components/display/Divider.vue +3 -3
  213. package/components/display/Donut.vue +3 -2
  214. package/components/display/IconTile.vue +10 -4
  215. package/components/display/Kbd.d.ts +1 -1
  216. package/components/display/Kbd.jsx +1 -1
  217. package/components/display/Kbd.vue +2 -2
  218. package/components/display/ProgressBar.jsx +1 -1
  219. package/components/display/ProgressBar.vue +1 -1
  220. package/components/display/StatCard.vue +1 -1
  221. package/components/display/Tag.d.ts +3 -1
  222. package/components/display/Tag.jsx +4 -4
  223. package/components/display/Tag.vue +4 -4
  224. package/components/feedback/Accordion.jsx +2 -2
  225. package/components/feedback/Accordion.vue +2 -2
  226. package/components/feedback/ActivityItem.d.ts +3 -1
  227. package/components/feedback/ActivityItem.jsx +6 -6
  228. package/components/feedback/ActivityItem.vue +5 -4
  229. package/components/feedback/Alert.jsx +4 -4
  230. package/components/feedback/Alert.vue +3 -3
  231. package/components/feedback/Banner.jsx +5 -5
  232. package/components/feedback/Banner.vue +5 -5
  233. package/components/feedback/ContextMenu.d.ts +3 -1
  234. package/components/feedback/ContextMenu.jsx +5 -5
  235. package/components/feedback/ContextMenu.vue +5 -5
  236. package/components/feedback/DotActivity.vue +3 -3
  237. package/components/feedback/Drawer.d.ts +2 -0
  238. package/components/feedback/Drawer.jsx +6 -6
  239. package/components/feedback/Drawer.vue +22 -15
  240. package/components/feedback/EmptyState.vue +2 -2
  241. package/components/feedback/LogViewer.vue +1 -1
  242. package/components/feedback/Modal.d.ts +2 -0
  243. package/components/feedback/Modal.jsx +12 -11
  244. package/components/feedback/Modal.vue +10 -8
  245. package/components/feedback/Skeleton.vue +2 -1
  246. package/components/feedback/Spinner.vue +2 -1
  247. package/components/feedback/Stepper.vue +1 -1
  248. package/components/feedback/Timeline.jsx +1 -1
  249. package/components/feedback/Timeline.vue +3 -3
  250. package/components/feedback/Toast.vue +4 -4
  251. package/components/feedback/ToastStack.vue +11 -0
  252. package/components/feedback/Tooltip.vue +19 -0
  253. package/components/feedback/feedback.prompt.md +4 -4
  254. package/components/forms/Checkbox.d.ts +3 -2
  255. package/components/forms/Checkbox.jsx +7 -7
  256. package/components/forms/Checkbox.vue +8 -8
  257. package/components/forms/Combobox.d.ts +2 -0
  258. package/components/forms/Combobox.jsx +12 -10
  259. package/components/forms/Combobox.vue +11 -10
  260. package/components/forms/DatePicker.d.ts +4 -0
  261. package/components/forms/DatePicker.jsx +16 -12
  262. package/components/forms/DatePicker.vue +15 -11
  263. package/components/forms/Dropzone.jsx +2 -2
  264. package/components/forms/Dropzone.vue +5 -5
  265. package/components/forms/Field.d.ts +5 -1
  266. package/components/forms/Field.jsx +4 -4
  267. package/components/forms/Field.vue +4 -4
  268. package/components/forms/Input.d.ts +5 -1
  269. package/components/forms/Input.jsx +8 -8
  270. package/components/forms/Input.vue +3 -3
  271. package/components/forms/MultiSelect.d.ts +2 -0
  272. package/components/forms/MultiSelect.jsx +13 -11
  273. package/components/forms/MultiSelect.vue +12 -11
  274. package/components/forms/NumberStepper.d.ts +3 -1
  275. package/components/forms/NumberStepper.jsx +7 -7
  276. package/components/forms/NumberStepper.vue +8 -7
  277. package/components/forms/Radio.d.ts +5 -3
  278. package/components/forms/Radio.jsx +13 -15
  279. package/components/forms/Radio.vue +9 -10
  280. package/components/forms/RadioGroup.vue +5 -5
  281. package/components/forms/SearchInput.d.ts +3 -1
  282. package/components/forms/SearchInput.jsx +6 -6
  283. package/components/forms/SearchInput.vue +7 -6
  284. package/components/forms/Select.d.ts +3 -2
  285. package/components/forms/Select.jsx +6 -7
  286. package/components/forms/Select.vue +6 -6
  287. package/components/forms/Slider.jsx +3 -3
  288. package/components/forms/Slider.vue +3 -3
  289. package/components/forms/Switch.d.ts +2 -2
  290. package/components/forms/Switch.jsx +20 -22
  291. package/components/forms/Switch.vue +22 -18
  292. package/components/forms/Textarea.vue +5 -5
  293. package/components/forms/forms.prompt.md +1 -1
  294. package/components/forms/input-base.js +2 -1
  295. package/components/icons/Icon.jsx +17 -1
  296. package/components/icons/Icon.prompt.md +2 -0
  297. package/components/icons/Icon.vue +1 -1
  298. package/components/icons/icon-paths.js +15 -0
  299. package/components/index.d.ts +1 -2
  300. package/components/index.js +4 -5
  301. package/components/navigation/Breadcrumb.jsx +6 -10
  302. package/components/navigation/Breadcrumb.vue +6 -12
  303. package/components/navigation/DocTree.jsx +3 -3
  304. package/components/navigation/DocTree.vue +3 -3
  305. package/components/navigation/PageHeading.vue +1 -1
  306. package/components/navigation/PageToolbar.vue +7 -6
  307. package/components/navigation/Sidebar.jsx +4 -23
  308. package/components/navigation/Sidebar.vue +5 -10
  309. package/components/navigation/ThemeToggle.vue +2 -1
  310. package/components/navigation/TopBar.d.ts +3 -1
  311. package/components/navigation/TopBar.jsx +6 -6
  312. package/components/navigation/Tree.jsx +5 -5
  313. package/components/navigation/Tree.vue +13 -8
  314. package/components/navigation/nav-model.js +23 -0
  315. package/components/navigation/theme-store.js +9 -0
  316. package/components/pipeline/ConfigPanel.d.ts +2 -0
  317. package/components/pipeline/ConfigPanel.jsx +9 -9
  318. package/components/pipeline/ConfigPanel.vue +9 -9
  319. package/components/pipeline/DataPreview.d.ts +3 -1
  320. package/components/pipeline/DataPreview.jsx +7 -7
  321. package/components/pipeline/DataPreview.vue +7 -7
  322. package/components/pipeline/NodeCard.jsx +3 -3
  323. package/components/pipeline/NodeCard.vue +3 -3
  324. package/components/pipeline/PaletteItem.vue +2 -2
  325. package/components/pipeline/PaletteListItem.vue +1 -1
  326. package/components/pipeline/PalettePanel.jsx +2 -2
  327. package/components/pipeline/PalettePanel.vue +1 -1
  328. package/components/pipeline/Port.vue +15 -0
  329. package/components/pipeline/PortLabel.vue +15 -0
  330. package/components/pipeline/ZoomControls.vue +1 -1
  331. package/components/pipeline/port-skin.js +13 -0
  332. package/components/px.js +4 -0
  333. package/components/tabs/PanelTabs.vue +5 -4
  334. package/components/tabs/PillTabs.vue +5 -4
  335. package/components/tabs/SegmentedControl.d.ts +2 -2
  336. package/components/tabs/SegmentedControl.jsx +7 -7
  337. package/components/tabs/SegmentedControl.vue +7 -7
  338. package/components/tabs/Tabs.d.ts +5 -3
  339. package/components/tabs/Tabs.jsx +15 -15
  340. package/components/tabs/Tabs.vue +5 -5
  341. package/components/tabs/ViewToggle.d.ts +3 -1
  342. package/components/tabs/ViewToggle.jsx +5 -5
  343. package/components/tabs/ViewToggle.vue +5 -5
  344. package/components/tabs/tabs.prompt.md +1 -1
  345. package/keybricks.css +4 -0
  346. package/package.json +6 -3
  347. package/readme.md +91 -122
  348. package/readme.zh-CN.md +121 -0
  349. package/tokens/alpha.css +3 -1
  350. package/tokens/charts.css +20 -17
  351. package/tokens/colors.css +3 -3
  352. package/tokens/dark.css +3 -3
  353. package/tokens/hover.css +32 -0
  354. package/tokens/interaction.css +3 -1
  355. package/tokens/layout.css +31 -7
  356. package/tokens/tokens.d.ts +58 -0
  357. package/tokens/tokens.js +179 -92
  358. package/tokens/tokens.json +327 -114
  359. package/tokens/typography.css +45 -15
  360. package/components/_cards/brand-visual.card.html +0 -43
  361. package/components/_cards/datatable.card.html +0 -48
  362. package/components/_shared/src-brand.js +0 -1
  363. package/components/brand/BrandVisual.d.ts +0 -17
  364. package/components/brand/BrandVisual.jsx +0 -29
  365. package/components/brand/BrandVisual.vue +0 -34
  366. package/components/brand/_dir.card.html +0 -13
  367. package/components/brand/brandMotifs.js +0 -210
  368. package/components/buttons/_dir.card.html +0 -13
  369. package/components/charts/ChartKit.vue +0 -47
  370. package/components/charts/_dir.card.html +0 -7
  371. package/components/data/DataTable.d.ts +0 -28
  372. package/components/data/DataTable.jsx +0 -32
  373. package/components/data/DataTable.vue +0 -25
  374. package/components/data/_dir.card.html +0 -13
  375. package/components/display/_dir.card.html +0 -13
  376. package/components/feedback/_dir.card.html +0 -13
  377. package/components/forms/_dir.card.html +0 -13
  378. package/components/icons/_dir.card.html +0 -13
  379. package/components/navigation/_dir.card.html +0 -13
  380. package/components/pipeline/_dir.card.html +0 -13
  381. package/components/tabs/_dir.card.html +0 -13
package/components/_cards/combobox.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x330" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
1
+ <!-- @dsCard group="Components" viewport="700x430" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Combobox, Field } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  const SYSTEMS = ["SAP S/4HANA","Oracle NetSuite","Microsoft Dynamics 365","Workday Financials","Sage Intacct","QuickBooks Enterprise","Xero","Odoo ERP"];
14
16
  function Sheet(){
15
17
  const [a,setA]=React.useState(""); const [b,setB]=React.useState("SAP S/4HANA");
@@ -18,6 +20,7 @@ function Sheet(){
18
20
  <div><span className="lbl">With value</span><Combobox options={SYSTEMS} value={b} onChange={setB}/></div>
19
21
  <div><span className="lbl">In a Field</span><Field label="Target system" required><Combobox options={SYSTEMS} value={a} onChange={setA} placeholder="Select..."/></Field></div>
20
22
  <div><span className="lbl">Disabled</span><Combobox options={SYSTEMS} value="Oracle NetSuite" disabled/></div>
23
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack init={(l)=>l==="en"?SYSTEMS[0]:"金蝶云星空"} render={(t,l,v,set)=><div style={{width:180}}><Combobox options={l==="en"?SYSTEMS:["用友 U8","金蝶云星空","SAP S/4HANA","Oracle NetSuite"]} value={v} onChange={set}/></div>}/></div>
21
24
  </div>;
22
25
  }
23
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/context-menu.card.html CHANGED
@@ -1,19 +1,22 @@
1
- <!-- @dsCard group="Components" viewport="700x260" name="Context Menu" subtitle="Icons · plain text · danger item · long list" -->
1
+ <!-- @dsCard group="Components" viewport="700x920" name="Context Menu" subtitle="Icons · plain text · danger item · long list" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}.lbl{font-size:var(--text-xs);color:var(--text-muted)}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { ContextMenu } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  function Sheet(){return <div className="grid">
14
16
  <div className="col"><span className="lbl">With icons</span><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}]}/></div>
15
17
  <div className="col"><span className="lbl">Plain text, no icons</span><ContextMenu items={[{label:"Rename"},{label:"Move to..."},{label:"Archive"}]}/></div>
16
18
  <div className="col"><span className="lbl">Danger only</span><ContextMenu items={[{label:"Remove from workflow",icon:"x",danger:true}]}/></div>
19
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack align="flex-start" render={(t,l)=><ContextMenu items={l==="en"?[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Delete",icon:"trash-2",danger:true}]:[{label:"预览",icon:"eye"},{label:"复制",icon:"copy"},{label:"删除",icon:"trash-2",danger:true}]}/>}/></div>
17
20
  <div className="col"><span className="lbl">Longer list</span><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Export",icon:"download"},{label:"Run Test",icon:"play"},{divider:true},{label:"Move to Folder",icon:"folder"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}]}/></div>
18
21
  </div>;}
19
22
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/date-picker.card.html CHANGED
@@ -1,28 +1,34 @@
1
- <!-- @dsCard group="Components" viewport="700x430" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
1
+ <!-- @dsCard group="Components" viewport="700x520" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}.hint{font-size:11px;color:var(--text-secondary);padding-top:12px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:6px}.hint{font-size:var(--text-xs);color:var(--text-secondary);padding-top:12px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { DatePicker, Field } = window.KeybricksDesignSystem_71231a;
14
+ const { KBLive: Live } = window;
15
+ const { KBTiers: Tiers } = window;
13
16
  function Sheet(){
14
17
  const [d,setD]=React.useState("2026-08-14"); const [e,setE]=React.useState("");
15
18
  return <div>
16
19
  <div className="row">
17
20
  <div><span className="lbl">With value — click to open</span><DatePicker value={d} onChange={setD}/></div>
18
21
  <div><span className="lbl">Empty</span><DatePicker value={e} onChange={setE}/></div>
19
- <div><span className="lbl">Error</span><DatePicker value="" error/></div>
22
+ <div><span className="lbl">Error</span><Live init="">{(v,set)=><DatePicker value={v} onChange={set} error/>}</Live></div>
20
23
  <div><span className="lbl">Disabled</span><DatePicker value="2026-08-01" disabled/></div>
21
24
  </div>
22
25
  <div className="row" style={{paddingTop:16}}>
23
26
  <Field label="Period start" required><DatePicker value={d} onChange={setD}/></Field>
24
27
  <Field label="Period end" hint="Defaults to fiscal year end"><DatePicker value={e} onChange={setE}/></Field>
25
28
  </div>
29
+ <div className="row" style={{paddingTop:16}}>
30
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack init="2026-08-14" render={(t,l,v,set)=><DatePicker value={v} onChange={set} locale={l==="en"?"en-US":"zh-CN"}/>}/></div>
31
+ </div>
26
32
  <div className="hint">Month-grid popover: chevron month nav, Monday-first week, today outlined in blue, selected day filled.</div>
27
33
  </div>;
28
34
  }
package/components/_cards/diffvalue.card.html CHANGED
@@ -1,12 +1,12 @@
1
- <!-- @dsCard group="Components" viewport="700x180" name="Diff Value" subtitle="Before → after change display (config migration)" -->
1
+ <!-- @dsCard group="Components" viewport="700x220" name="Diff Value" subtitle="Before → after change display (config migration)" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.code{font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.code{font-family:var(--font-mono);font-size:var(--text-code);line-height:var(--leading-code);color:var(--text-primary);background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { DiffValue } = window.KeybricksDesignSystem_71231a;
package/components/_cards/divider.card.html CHANGED
@@ -1,12 +1,12 @@
1
- <!-- @dsCard group="Components" viewport="700x180" name="Divider" subtitle="Plain · labeled · vertical" -->
1
+ <!-- @dsCard group="Components" viewport="700x220" name="Divider" subtitle="Plain · labeled · vertical" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Divider, Button } = window.KeybricksDesignSystem_71231a;
@@ -15,7 +15,7 @@ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:1
15
15
  <div><span className="lbl">Labeled</span><Divider label="OR"/></div>
16
16
  <div><span className="lbl">Vertical, between actions</span>
17
17
  <div style={{display:"flex",alignItems:"center",gap:10,height:32}}>
18
- <Button variant="ghost" size="sm">Cancel</Button><Divider vertical/><Button size="sm">Save Settings</Button>
18
+ <Button variant="ghost">Cancel</Button><Divider vertical/><Button>Save Settings</Button>
19
19
  </div>
20
20
  </div>
21
21
  </div>;}
package/components/_cards/drawer.card.html CHANGED
@@ -1,12 +1,12 @@
1
- <!-- @dsCard group="Components" viewport="700x520" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
1
+ <!-- @dsCard group="Components" viewport="700x540" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Drawer, Button, Field, Input, Select, KeyValueList, Divider } = window.KeybricksDesignSystem_71231a;
@@ -17,7 +17,7 @@ function Sheet(){
17
17
  <Drawer inline title="Reconciliation Rule" subtitle="RULE-2041 · Modified 2 hours ago" height={440}
18
18
  footer={<React.Fragment><Button variant="outline">Cancel</Button><Button>Save Rule</Button></React.Fragment>}>
19
19
  <div style={{display:"flex",flexDirection:"column",gap:14}}>
20
- <Field label="Rule name" required><Input value="Intercompany balance match" onChange={()=>{}}/></Field>
20
+ <Field label="Rule name" required><Input defaultValue="Intercompany balance match"/></Field>
21
21
  <Field label="Base currency"><Select options={["EUR – Euro","USD – US Dollar","GBP – Pound Sterling"]} value={v} onChange={setV}/></Field>
22
22
  <Divider label="Match summary"/>
23
23
  <KeyValueList rows={[{label:"Tolerance",value:"±0.5%",mono:true},{label:"Matched pairs",value:"1,204",mono:true},{label:"Open items",value:"37",mono:true},{label:"Last run",value:"Today 09:41"}]}/>
package/components/_cards/dropdown-menu.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x420" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Menu, Button, IconButton, Avatar } = window.KeybricksDesignSystem_71231a;
@@ -14,23 +14,23 @@ const withIcons = [{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},
14
14
  const plainText = [{label:"Name"},{label:"Date modified"},{label:"Size"},{divider:true},{label:"Custom order"}];
15
15
  function Sheet(){return <div className="g">
16
16
  <div><span className="lbl">Dark button trigger</span>
17
- <Menu trigger={<Button variant="dark" icon="chevron-down" medium size="sm">Show</Button>} items={withIcons}/>
17
+ <Menu trigger={<Button variant="dark" icon="chevron-down" medium>Show</Button>} items={withIcons}/>
18
18
  </div>
19
19
  <div><span className="lbl">Outline button trigger</span>
20
- <Menu trigger={<Button variant="outline" icon="chevron-down" iconPosition="right" size="sm">Sort by</Button>} items={plainText}/>
20
+ <Menu trigger={<Button variant="outline" icon="chevron-down" iconPosition="right">Sort by</Button>} items={plainText}/>
21
21
  </div>
22
22
  <div><span className="lbl">Ghost text trigger</span>
23
- <Menu trigger={<Button variant="ghost" icon="chevron-down" iconPosition="right" size="sm" style={{padding:"0 4px",color:"var(--text-secondary)"}}>More options</Button>} items={withIcons}/>
23
+ <Menu trigger={<Button variant="ghost" icon="chevron-down" iconPosition="right" style={{padding:"0 4px",color:"var(--text-secondary)"}}>More options</Button>} items={withIcons}/>
24
24
  </div>
25
25
  <div><span className="lbl">Icon-only (kebab) trigger</span>
26
- <Menu trigger={<IconButton icon="ellipsis" size="md" label="More"/>} items={withIcons}/>
26
+ <Menu trigger={<IconButton icon="ellipsis" label="More"/>} items={withIcons}/>
27
27
  </div>
28
28
  <div><span className="lbl">Avatar trigger, right-aligned</span>
29
29
  <Menu align="end" trigger={<Avatar name="Felix Chen" size={32}/>}
30
30
  items={[{label:"Profile",icon:"circle-help"},{label:"Settings",icon:"settings"},{divider:true},{label:"Sign out",icon:"x",danger:true}]}/>
31
31
  </div>
32
32
  <div><span className="lbl">Plain-text items, no icons</span>
33
- <Menu trigger={<Button variant="outline" icon="filter" iconPosition="right" size="sm">Filter</Button>} items={[{label:"All"},{label:"Active only"},{label:"Archived only"}]}/>
33
+ <Menu trigger={<Button variant="outline" icon="filter" iconPosition="right">Filter</Button>} items={[{label:"All"},{label:"Active only"},{label:"Archived only"}]}/>
34
34
  </div>
35
35
  </div>;}
36
36
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/dropzone.card.html CHANGED
@@ -1,19 +1,21 @@
1
1
  <!-- @dsCard group="Components" viewport="924x588" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Dropzone } = window.KeybricksDesignSystem_71231a;
14
+ const { KBLive: Live } = window;
13
15
  function Sheet(){return <div className="g">
14
16
  <div><span className="lbl">Empty</span><Dropzone height={140}/></div>
15
17
  <div><span className="lbl">Drag over (drop a file to try)</span><Dropzone height={140} dragOver/></div>
16
- <div><span className="lbl">Uploaded</span><Dropzone height={140} file="migration-config.json" onRemove={()=>{}}/></div>
18
+ <div><span className="lbl">Uploaded</span><Live init="migration-config.json">{(v,set)=><Dropzone height={140} file={v || undefined} onRemove={()=>set(null)}/>}</Live></div>
17
19
  <div><span className="lbl">Error</span><Dropzone height={140} error="File must be under 5MB"/></div>
18
20
  <div><span className="lbl">Disabled</span><Dropzone height={140} disabled title="Upload unavailable" hint="Complete the previous step first"/></div>
19
21
  </div>;}
package/components/_cards/empty-state.card.html CHANGED
@@ -1,27 +1,27 @@
1
- <!-- @dsCard group="Components" viewport="924x547" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
1
+ <!-- @dsCard group="Components" viewport="924x580" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { EmptyState, Button, Card } = window.KeybricksDesignSystem_71231a;
13
13
  function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,alignItems:"start"}}>
14
14
  <div><span className="lbl">First run — with action</span>
15
- <Card pad={false}><EmptyState icon="file-text" title="No documents yet" hint="Documents you create or import will appear here." action={<Button icon="plus" size="sm">New Document</Button>}/></Card>
15
+ <Card pad={false}><EmptyState icon="file-text" title="No documents yet" hint="Documents you create or import will appear here." action={<Button icon="plus">New Document</Button>}/></Card>
16
16
  </div>
17
17
  <div><span className="lbl">No search results</span>
18
18
  <Card pad={false}><EmptyState icon="search" title="No matches for “FIN_04”" hint="Try a different keyword or clear the filters."/></Card>
19
19
  </div>
20
20
  <div><span className="lbl">Error — with retry</span>
21
- <Card pad={false}><EmptyState icon="triangle-alert" title="Couldn’t load the run history" hint="The reconciliation service is unreachable." action={<Button variant="outline" size="sm" icon="refresh-cw">Retry</Button>}/></Card>
21
+ <Card pad={false}><EmptyState icon="triangle-alert" title="Couldn’t load the run history" hint="The reconciliation service is unreachable." action={<Button variant="outline" icon="refresh-cw">Retry</Button>}/></Card>
22
22
  </div>
23
23
  <div><span className="lbl">Filtered-out list</span>
24
- <Card pad={false}><EmptyState icon="funnel" title="Nothing matches these filters" hint="3 filters active." action={<Button variant="text" size="sm">Clear filters</Button>}/></Card>
24
+ <Card pad={false}><EmptyState icon="funnel" title="Nothing matches these filters" hint="3 filters active." action={<Button variant="text">Clear filters</Button>}/></Card>
25
25
  </div>
26
26
  </div>;}
27
27
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/filter-bar.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="1000x620" name="Filter Bar (List Report)" subtitle="Fiori-style filter bar composed with a table — Adapt Filters · Go" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
@@ -9,7 +9,7 @@
9
9
  <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
- const { FilterBar, Field, Select, MultiSelect, DatePicker, SearchInput, DataTable, Badge, Pagination, Card } = window.KeybricksDesignSystem_71231a;
12
+ const { FilterBar, Field, Select, MultiSelect, DatePicker, SearchInput, Table, Badge, Pagination, Card } = window.KeybricksDesignSystem_71231a;
13
13
  function Sheet(){
14
14
  const [status,setStatus]=React.useState(["Completed","Failed"]);
15
15
  const [type,setType]=React.useState("All Types");
@@ -19,13 +19,13 @@ function Sheet(){
19
19
  return <div style={{display:"flex",flexDirection:"column",gap:12}}>
20
20
  <FilterBar variant="Standard" modified adaptCount={3} onGo={()=>{}}>
21
21
  <Field label="Search"><SearchInput placeholder="Search runs..." style={{width:180}}/></Field>
22
- <Field label="Status"><MultiSelect options={["Completed","Failed","Partial","Queued"]} value={status} onChange={setStatus} width={210}/></Field>
22
+ <Field label="Status"><MultiSelect options={["Completed","Failed","Partial","Queued"]} value={status} onChange={setStatus} width={260}/></Field>
23
23
  <Field label="Document type"><Select options={["All Types","Journal","Master Data","Rates"]} value={type} onChange={setType} style={{width:150}}/></Field>
24
24
  <Field label="From date"><DatePicker value={from} onChange={setFrom} width={160}/></Field>
25
25
  </FilterBar>
26
26
  <Card pad={false}>
27
- <DataTable columns={cols} rows={rows}/>
28
- <div style={{padding:"10px 16px"}}><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
27
+ <Table framed columns={cols} rows={rows}/>
28
+ <div style={{padding:"8px 16px"}}><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
29
29
  </Card>
30
30
  </div>;
31
31
  }
package/components/_cards/icon-button.card.html CHANGED
@@ -1,26 +1,26 @@
1
- <!-- @dsCard group="Components" viewport="700x220" name="Icon Button" subtitle="Sizes · active · muted · danger · loading · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:10px;align-items:center;margin-bottom:14px}.lbl{width:76px;flex-shrink:0;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { IconButton } = window.KeybricksDesignSystem_71231a;
13
- function Sheet(){return <div>
14
- <div className="row"><span className="lbl">Sizes</span>
15
- <IconButton icon="bell" size="lg"/><IconButton icon="arrow-left" size="md"/><IconButton icon="list" size="sm"/><IconButton icon="ellipsis" size="xs"/>
16
- </div>
17
- <div className="row"><span className="lbl">States</span>
18
- <IconButton icon="layout-grid" size="md" active label="Active"/>
19
- <IconButton icon="settings" size="md" muted label="Muted"/>
20
- <IconButton icon="trash-2" size="md" danger label="Delete"/>
21
- <IconButton icon="refresh-cw" size="md" loading label="Loading"/>
22
- <IconButton icon="trash-2" size="md" disabled label="Disabled"/>
23
- </div>
13
+ const { KBSec: Sec, KBRow: Row, KBTiers: Tiers } = window;
14
+ function Sheet(){return <div className="kb-sheet">
15
+ <Sec title="Size tiers — square at the control height, 14 / 16 / 16 icon">
16
+ <Tiers cjk={false} render={(t)=><><IconButton icon="bell" label="Notifications"/><IconButton icon="list" label="List view"/></>}/>
17
+ </Sec>
18
+ <Sec title="States">
19
+ <Row k="active"><IconButton icon="layout-grid" active label="Active"/></Row>
20
+ <Row k="muted"><IconButton icon="settings" muted label="Muted"/></Row>
21
+ <Row k="danger"><IconButton icon="trash-2" danger label="Delete"/></Row>
22
+ <Row k="loading / disabled"><IconButton icon="refresh-cw" loading label="Loading"/><IconButton icon="trash-2" disabled label="Disabled"/></Row>
23
+ </Sec>
24
24
  </div>;}
25
25
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
26
26
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"}]); }, 0);
package/components/_cards/icons-1-core.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Icons" viewport="700x560" name="Core Set" subtitle="The 70 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x980" name="Core Set" subtitle="The 83 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
@@ -31,14 +31,14 @@ function Sheet(){
31
31
  <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search the core set — try “delete”, “run”, “export”..." style={{flex:1}}/>
32
32
  <Tag tone="info">{shown.length} / {all.length}</Tag>
33
33
  </div>
34
- <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(74px,1fr))",gap:2,paddingTop:12}}>
34
+ <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(96px,1fr))",gap:2,paddingTop:12}}>
35
35
  {shown.map(function(i){
36
36
  return <button key={i.name} type="button" onClick={()=>grab(i.name)} title={i.name+" — "+i.tags.join(", ")}
37
37
  style={{display:"flex",flexDirection:"column",alignItems:"center",gap:6,padding:"10px 2px 8px",border:"1px solid transparent",borderRadius:8,background:copied===i.name?"var(--soft-bg)":"transparent",cursor:"pointer",color:"var(--text-body)",overflow:"hidden"}}
38
38
  onMouseEnter={(e)=>{e.currentTarget.style.background="var(--bg-hover)";e.currentTarget.style.borderColor="var(--border-subtle)";}}
39
39
  onMouseLeave={(e)=>{e.currentTarget.style.background=copied===i.name?"var(--soft-bg)":"transparent";e.currentTarget.style.borderColor="transparent";}}>
40
40
  <Icon name={i.name} size={18}/>
41
- <span style={{fontFamily:"var(--font-sans)",fontSize:9,lineHeight:1.25,color:copied===i.name?"var(--action-primary)":"var(--text-muted)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{copied===i.name?"saved":i.name}</span>
41
+ <span style={{fontFamily:"var(--font-sans)",fontSize:"var(--text-xs)",lineHeight:"16px",color:copied===i.name?"var(--action-primary)":"var(--text-muted)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{copied===i.name?"saved":i.name}</span>
42
42
  </button>;
43
43
  })}
44
44
  </div>
package/components/_cards/icons-2-feather.card.html CHANGED
@@ -1,13 +1,13 @@
1
- <!-- @dsCard group="Icons" viewport="700x560" name="Feather Library" subtitle="318 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x3610" name="Feather Library" subtitle="330 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/svg-download.js"></script>
9
9
  <script src="../../assets/icons/icon-index.js"></script>
10
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px}</style></head>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px}</style></head>
11
11
  <body><div id="root"></div>
12
12
  <script type="text/babel">
13
13
  const { Icon, SearchInput, Tag, ICON_PATHS, FEATHER_PATHS } = window.KeybricksDesignSystem_71231a;
@@ -24,7 +24,7 @@ function Gallery(){
24
24
  const grab=(n)=>{ const inner=(ICON_PATHS&&ICON_PATHS[n])||(FEATHER_PATHS&&FEATHER_PATHS[n]); if(inner&&window.KBSaveSVG)KBSaveSVG(n,inner); setCopied(n); setTimeout(()=>setCopied(""),1200); };
25
25
  return <div>
26
26
  <div style={{display:"flex",alignItems:"center",gap:12}}>
27
- <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search 318 icons — try “money”, “arrow”, “video”..." style={{flex:1}}/>
27
+ <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search 330 icons — try “money”, “arrow”, “video”..." style={{flex:1}}/>
28
28
  <Tag tone="info">{shown.length} / {all.length}</Tag>
29
29
  </div>
30
30
  <div className="grid">
package/components/_cards/icons-3-unicons.card.html CHANGED
@@ -1,13 +1,13 @@
1
- <!-- @dsCard group="Icons" viewport="700x560" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x1370" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/svg-download.js"></script>
9
9
  <script src="../../assets/icons/unicons-index.js"></script>
10
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
11
11
  <body><div id="root"></div>
12
12
  <script type="text/babel">
13
13
  const { Unicon, SearchInput, Tag, Button } = window.KeybricksDesignSystem_71231a;
@@ -36,7 +36,7 @@ function Gallery(){
36
36
  <Unicon name={i.name} size={18}/><span>{copied===i.name?"saved":(copied&&copied.indexOf(i.name)===0?"name copied":i.name)}</span>
37
37
  </div>)}
38
38
  </div>
39
- {match.length>cap && <div style={{paddingTop:10,display:"flex",justifyContent:"center"}}><Button variant="outline" size="sm" onClick={()=>setCap(cap+PAGE*2)}>Show more ({match.length-cap} left)</Button></div>}
39
+ {match.length>cap && <div style={{paddingTop:10,display:"flex",justifyContent:"center"}}><Button variant="outline" onClick={()=>setCap(cap+PAGE*2)}>Show more ({match.length-cap} left)</Button></div>}
40
40
  <div className="meta">Unicons line style (Apache 2.0), rendered with <code>&lt;Unicon name="…"/&gt;</code> from the official Unicons CDN webfont — the 1,206-file SVG set is not vendored locally. Click a tile to download that glyph as an SVG from the CDN; keyword index lives in <code>assets/icons/unicons-index.json</code>. Use <code>Icon</code> (stroke SVG) for product chrome; Unicons adds breadth for illustrations, empty states and domain glyphs.</div>
41
41
  </div>;
42
42
  }
package/components/_cards/input.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x480" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
1
+ <!-- @dsCard group="Components" viewport="700x720" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
+ <script src="../_shared/card-kit.js"></script>
9
10
  <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:1fr 1fr;gap:16px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Field, Input } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  function Sheet(){return <div className="g">
14
16
  <Field label="Default — empty"><Input placeholder="Sales Orders"/></Field>
15
17
  <Field label="Filled"><Input defaultValue="Sales Orders"/></Field>
@@ -19,6 +21,7 @@ function Sheet(){return <div className="g">
19
21
  <Field label="Error — invalid value" error="Only letters, numbers and underscores are allowed"><Input defaultValue="Sales Orders!!" error/></Field>
20
22
  <Field label="With hint text" hint="Shown in Data Integration node lists"><Input placeholder="e.g. Sales Orders"/></Field>
21
23
  <Field label="Focus (click to try)"><Input placeholder="Click me"/></Field>
24
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack align="flex-start" render={(t,l)=><div style={{width:200}}><Field label={l==="en"?"Node name":"节点名称"}><Input placeholder={l==="en"?"Sales Orders":"销售订单"}/></Field></div>}/></div>
22
25
  </div>;}
23
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
27
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Field.jsx","path":"../forms/Field.jsx"},{"name":"Input.jsx","path":"../forms/Input.jsx"}]); }, 0);
package/components/_cards/kbd.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x150" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
1
+ <!-- @dsCard group="Components" viewport="700x180" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/keyvalue.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x220" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x250" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/listrow.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x360" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
1
+ <!-- @dsCard group="Components" viewport="700x420" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/loading.card.html CHANGED
@@ -1,12 +1,12 @@
1
- <!-- @dsCard group="Components" viewport="700x280" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x310" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Spinner, Skeleton, Card } = window.KeybricksDesignSystem_71231a;