@keyfunc/keybricks-ds 2.1.1 → 2.4.0

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 (280) hide show
  1. package/DEPLOY.md +20 -5
  2. package/DESIGN.md +148 -20
  3. package/INTEGRATION.md +97 -24
  4. package/SKILL.md +11 -11
  5. package/_adherence.oxlintrc.json +56 -24
  6. package/_scripts/build-index.mjs +15 -4
  7. package/assets/icons/icon-index.js +1 -1
  8. package/assets/icons/icon-index.json +1 -1
  9. package/assets/logos/datasource/dat.png +0 -0
  10. package/assets/logos/datasource/excel.png +0 -0
  11. package/assets/logos/datasource/ftp.png +0 -0
  12. package/assets/logos/datasource/hierarchy.png +0 -0
  13. package/assets/logos/datasource/hive.png +0 -0
  14. package/assets/logos/datasource/json.png +0 -0
  15. package/assets/logos/datasource/mariadb.png +0 -0
  16. package/assets/logos/datasource/mongodb.png +0 -0
  17. package/assets/logos/datasource/mysql.png +0 -0
  18. package/assets/logos/datasource/odbc.png +0 -0
  19. package/assets/logos/datasource/oracle.png +0 -0
  20. package/assets/logos/datasource/postgresql.png +0 -0
  21. package/assets/logos/datasource/rest-api.png +0 -0
  22. package/assets/logos/datasource/sap-alt.png +0 -0
  23. package/assets/logos/datasource/sap.png +0 -0
  24. package/assets/logos/datasource/soap.png +0 -0
  25. package/assets/logos/datasource/sql-server.png +0 -0
  26. package/components/_cards/accordion.card.html +1 -1
  27. package/components/_cards/action-chip.card.html +11 -14
  28. package/components/_cards/activity.card.html +2 -2
  29. package/components/_cards/alert.card.html +2 -2
  30. package/components/_cards/app-chrome.card.html +34 -22
  31. package/components/_cards/banner.card.html +1 -1
  32. package/components/_cards/breadcrumb.card.html +4 -4
  33. package/components/_cards/button-1-base.card.html +23 -26
  34. package/components/_cards/button-2-states.card.html +14 -12
  35. package/components/_cards/button-3-sizes-icons.card.html +20 -19
  36. package/components/_cards/button-4-group.card.html +14 -31
  37. package/components/_cards/canvas-zoom-controls.card.html +1 -1
  38. package/components/_cards/cards-indicators.card.html +1 -1
  39. package/components/_cards/charts-1-sparkline.card.html +4 -4
  40. package/components/_cards/charts-10-gauge.card.html +2 -2
  41. package/components/_cards/charts-11-funnel.card.html +2 -2
  42. package/components/_cards/charts-12-treemap.card.html +2 -2
  43. package/components/_cards/charts-14-radar.card.html +3 -3
  44. package/components/_cards/charts-15-distribution.card.html +2 -2
  45. package/components/_cards/charts-16-pareto.card.html +2 -2
  46. package/components/_cards/charts-17-candlestick.card.html +2 -2
  47. package/components/_cards/charts-18-sankey.card.html +2 -2
  48. package/components/_cards/charts-19-chord.card.html +2 -2
  49. package/components/_cards/charts-2-line.card.html +3 -3
  50. package/components/_cards/charts-20-sunburst.card.html +2 -2
  51. package/components/_cards/charts-21-worldmap.card.html +3 -3
  52. package/components/_cards/charts-22-gantt.card.html +2 -2
  53. package/components/_cards/charts-23-bar3d.card.html +2 -2
  54. package/components/_cards/charts-24-pie3d.card.html +2 -2
  55. package/components/_cards/charts-25-surface3d.card.html +2 -2
  56. package/components/_cards/charts-26-scatter3d.card.html +2 -2
  57. package/components/_cards/charts-27-ribbon3d.card.html +2 -2
  58. package/components/_cards/charts-3-bar.card.html +6 -6
  59. package/components/_cards/charts-4-barlist.card.html +2 -2
  60. package/components/_cards/charts-5-donut.card.html +2 -2
  61. package/components/_cards/charts-6-scatter.card.html +2 -2
  62. package/components/_cards/charts-7-heatmap.card.html +2 -2
  63. package/components/_cards/charts-8-waterfall.card.html +2 -2
  64. package/components/_cards/charts-9-bullet.card.html +3 -3
  65. package/components/_cards/charts-99-fullpage.card.html +1 -1
  66. package/components/_cards/checkbox.card.html +6 -3
  67. package/components/_cards/codeblock.card.html +2 -2
  68. package/components/_cards/combobox.card.html +6 -4
  69. package/components/_cards/context-menu.card.html +12 -5
  70. package/components/_cards/date-picker.card.html +8 -5
  71. package/components/_cards/diffvalue.card.html +2 -2
  72. package/components/_cards/divider.card.html +2 -2
  73. package/components/_cards/drawer.card.html +3 -3
  74. package/components/_cards/dropdown-menu.card.html +2 -2
  75. package/components/_cards/dropzone.card.html +5 -3
  76. package/components/_cards/empty-state.card.html +2 -2
  77. package/components/_cards/filter-bar.card.html +1 -1
  78. package/components/_cards/icon-button.card.html +14 -14
  79. package/components/_cards/icons-0-usage.card.html +88 -0
  80. package/components/_cards/icons-1-core.card.html +4 -4
  81. package/components/_cards/icons-2-feather.card.html +4 -4
  82. package/components/_cards/icons-3-unicons.card.html +3 -3
  83. package/components/_cards/icons-4-datasource.card.html +5 -0
  84. package/components/_cards/input.card.html +5 -5
  85. package/components/_cards/kbd.card.html +1 -1
  86. package/components/_cards/keyvalue.card.html +1 -1
  87. package/components/_cards/listrow.card.html +1 -1
  88. package/components/_cards/loading.card.html +2 -2
  89. package/components/_cards/log-viewer.card.html +2 -2
  90. package/components/_cards/modal.card.html +1 -1
  91. package/components/_cards/multi-select.card.html +6 -4
  92. package/components/_cards/number-stepper.card.html +9 -6
  93. package/components/_cards/pagination.card.html +6 -4
  94. package/components/_cards/people.card.html +2 -2
  95. package/components/_cards/pipeline-node.card.html +8 -8
  96. package/components/_cards/pipeline-palette.card.html +2 -2
  97. package/components/_cards/radio.card.html +12 -7
  98. package/components/_cards/search.card.html +6 -6
  99. package/components/_cards/segmented-control.card.html +19 -12
  100. package/components/_cards/select.card.html +7 -3
  101. package/components/_cards/slider.card.html +2 -2
  102. package/components/_cards/smart-table.card.html +3 -3
  103. package/components/_cards/spreadsheet.card.html +2 -2
  104. package/components/_cards/stepper.card.html +2 -2
  105. package/components/_cards/table.card.html +79 -17
  106. package/components/_cards/tabs.card.html +10 -5
  107. package/components/_cards/tag.card.html +6 -6
  108. package/components/_cards/textarea.card.html +1 -1
  109. package/components/_cards/timeline.card.html +3 -3
  110. package/components/_cards/toast.card.html +7 -5
  111. package/components/_cards/toggles.card.html +14 -9
  112. package/components/_cards/tooltip.card.html +3 -3
  113. package/components/_cards/tree.card.html +2 -2
  114. package/components/_shared/card-kit.css +25 -0
  115. package/components/_shared/card-kit.js +50 -0
  116. package/components/_shared/src-buttons.js +1 -1
  117. package/components/_shared/src-charts.js +1 -1
  118. package/components/_shared/src-data.js +1 -1
  119. package/components/_shared/src-display.js +1 -1
  120. package/components/_shared/src-feedback.js +1 -1
  121. package/components/_shared/src-forms.js +1 -1
  122. package/components/_shared/src-icons.js +1 -1
  123. package/components/_shared/src-navigation.js +1 -1
  124. package/components/_shared/src-tabs.js +1 -1
  125. package/components/_shared/view-source.js +12 -12
  126. package/components/_vue/index.mjs +10 -0
  127. package/components/buttons/ActionChip.d.ts +1 -1
  128. package/components/buttons/Button.d.ts +1 -1
  129. package/components/buttons/Button.jsx +1 -1
  130. package/components/buttons/Button.vue +1 -1
  131. package/components/buttons/IconButton.d.ts +1 -1
  132. package/components/buttons/IconButton.jsx +5 -3
  133. package/components/buttons/IconButton.vue +3 -2
  134. package/components/charts/Bar3D.jsx +1 -1
  135. package/components/charts/Bar3D.vue +2 -2
  136. package/components/charts/BarChart.jsx +3 -3
  137. package/components/charts/BarChart.vue +6 -6
  138. package/components/charts/BarList.jsx +3 -3
  139. package/components/charts/BarList.vue +3 -3
  140. package/components/charts/BoxPlot.vue +2 -2
  141. package/components/charts/BulletChart.jsx +5 -5
  142. package/components/charts/BulletChart.vue +5 -5
  143. package/components/charts/CandlestickChart.vue +3 -3
  144. package/components/charts/ChartKit.jsx +4 -3
  145. package/components/charts/ChartTooltip.vue +1 -1
  146. package/components/charts/ChordChart.jsx +1 -1
  147. package/components/charts/ChordChart.vue +2 -2
  148. package/components/charts/DonutChart.jsx +1 -1
  149. package/components/charts/DonutChart.vue +2 -2
  150. package/components/charts/FunnelChart.jsx +3 -3
  151. package/components/charts/FunnelChart.vue +4 -4
  152. package/components/charts/GanttChart.vue +1 -1
  153. package/components/charts/GaugeChart.jsx +2 -2
  154. package/components/charts/GaugeChart.vue +2 -2
  155. package/components/charts/HeatmapChart.jsx +1 -1
  156. package/components/charts/HeatmapChart.vue +1 -1
  157. package/components/charts/Histogram.jsx +2 -2
  158. package/components/charts/Histogram.vue +4 -4
  159. package/components/charts/LineChart.vue +2 -2
  160. package/components/charts/ParetoChart.jsx +1 -1
  161. package/components/charts/ParetoChart.vue +3 -3
  162. package/components/charts/Pie3D.jsx +1 -1
  163. package/components/charts/Pie3D.vue +2 -2
  164. package/components/charts/PlotGrid.vue +1 -1
  165. package/components/charts/RadarChart.vue +1 -1
  166. package/components/charts/Ribbon3D.jsx +1 -1
  167. package/components/charts/Ribbon3D.vue +2 -2
  168. package/components/charts/SankeyChart.jsx +1 -1
  169. package/components/charts/SankeyChart.vue +2 -2
  170. package/components/charts/Scatter3D.vue +1 -1
  171. package/components/charts/ScatterChart.jsx +1 -1
  172. package/components/charts/ScatterChart.vue +3 -3
  173. package/components/charts/Sparkline.jsx +1 -1
  174. package/components/charts/Sparkline.vue +1 -1
  175. package/components/charts/SunburstChart.vue +1 -1
  176. package/components/charts/Surface3D.jsx +1 -1
  177. package/components/charts/Surface3D.vue +2 -2
  178. package/components/charts/TreemapChart.jsx +1 -1
  179. package/components/charts/TreemapChart.vue +2 -2
  180. package/components/charts/WaterfallChart.jsx +1 -1
  181. package/components/charts/WaterfallChart.vue +5 -4
  182. package/components/charts/WorldMap.jsx +4 -4
  183. package/components/charts/WorldMap.vue +5 -5
  184. package/components/data/DiffValue.d.ts +1 -0
  185. package/components/data/DiffValue.jsx +1 -1
  186. package/components/data/DiffValue.vue +1 -1
  187. package/components/data/KeyValue.d.ts +1 -1
  188. package/components/data/KeyValue.jsx +2 -2
  189. package/components/data/KeyValue.vue +2 -2
  190. package/components/data/Pagination.jsx +2 -2
  191. package/components/data/Pagination.vue +1 -1
  192. package/components/data/SmartTable.jsx +5 -5
  193. package/components/data/SmartTable.vue +6 -6
  194. package/components/data/Spreadsheet.jsx +5 -5
  195. package/components/data/Spreadsheet.vue +6 -6
  196. package/components/data/Table.d.ts +58 -4
  197. package/components/data/Table.jsx +153 -15
  198. package/components/data/Table.vue +105 -15
  199. package/components/data/data.prompt.md +1 -1
  200. package/components/display/Avatar.jsx +2 -2
  201. package/components/display/Avatar.vue +1 -1
  202. package/components/display/AvatarGroup.vue +1 -1
  203. package/components/display/Badge.d.ts +4 -1
  204. package/components/display/Badge.jsx +10 -5
  205. package/components/display/IconTile.vue +9 -4
  206. package/components/display/Kbd.d.ts +1 -1
  207. package/components/display/Kbd.jsx +1 -1
  208. package/components/display/Kbd.vue +1 -1
  209. package/components/feedback/ActivityItem.jsx +1 -1
  210. package/components/feedback/ContextMenu.d.ts +3 -2
  211. package/components/feedback/ContextMenu.jsx +8 -4
  212. package/components/feedback/ContextMenu.vue +9 -6
  213. package/components/feedback/Menu.d.ts +1 -1
  214. package/components/feedback/Modal.jsx +1 -1
  215. package/components/feedback/Modal.vue +1 -1
  216. package/components/feedback/Timeline.vue +2 -2
  217. package/components/feedback/feedback.prompt.md +1 -1
  218. package/components/forms/Combobox.d.ts +1 -1
  219. package/components/forms/DatePicker.d.ts +1 -1
  220. package/components/forms/Input.d.ts +1 -1
  221. package/components/forms/Input.jsx +2 -2
  222. package/components/forms/Input.vue +1 -1
  223. package/components/forms/MultiSelect.d.ts +1 -1
  224. package/components/forms/NumberStepper.d.ts +1 -1
  225. package/components/forms/SearchInput.d.ts +1 -1
  226. package/components/forms/Select.d.ts +1 -1
  227. package/components/forms/Select.jsx +1 -1
  228. package/components/forms/Select.vue +1 -1
  229. package/components/forms/Slider.jsx +1 -1
  230. package/components/forms/Slider.vue +1 -1
  231. package/components/forms/Switch.jsx +3 -3
  232. package/components/forms/Switch.vue +11 -8
  233. package/components/forms/Textarea.vue +1 -1
  234. package/components/forms/input-base.js +1 -1
  235. package/components/icons/Icon.jsx +17 -1
  236. package/components/icons/Icon.prompt.md +2 -0
  237. package/components/icons/Icon.vue +1 -1
  238. package/components/icons/icon-paths.js +15 -0
  239. package/components/index.d.ts +1 -0
  240. package/components/index.js +5 -4
  241. package/components/navigation/Breadcrumb.jsx +3 -7
  242. package/components/navigation/Breadcrumb.vue +2 -8
  243. package/components/navigation/SidePanel.d.ts +22 -0
  244. package/components/navigation/SidePanel.jsx +23 -0
  245. package/components/navigation/SidePanel.vue +21 -0
  246. package/components/navigation/Sidebar.d.ts +23 -7
  247. package/components/navigation/Sidebar.jsx +38 -56
  248. package/components/navigation/Sidebar.vue +40 -44
  249. package/components/navigation/TopBar.d.ts +28 -3
  250. package/components/navigation/TopBar.jsx +54 -7
  251. package/components/navigation/TopBar.vue +26 -8
  252. package/components/navigation/Tree.jsx +1 -1
  253. package/components/navigation/Tree.vue +9 -4
  254. package/components/navigation/UserMenu.vue +27 -0
  255. package/components/navigation/chrome-tones.js +22 -0
  256. package/components/navigation/nav-model.js +26 -0
  257. package/components/navigation/navigation.prompt.md +2 -0
  258. package/components/navigation/theme-store.js +9 -0
  259. package/components/tabs/CountBadge.vue +12 -0
  260. package/components/tabs/PanelTabs.vue +7 -3
  261. package/components/tabs/PillTabs.vue +8 -4
  262. package/components/tabs/SegmentedControl.d.ts +5 -3
  263. package/components/tabs/SegmentedControl.jsx +6 -4
  264. package/components/tabs/SegmentedControl.vue +4 -3
  265. package/components/tabs/Tabs.d.ts +14 -4
  266. package/components/tabs/Tabs.jsx +35 -20
  267. package/components/tabs/Tabs.vue +7 -3
  268. package/components/tabs/ViewToggle.d.ts +1 -1
  269. package/components/tabs/tabs.prompt.md +2 -2
  270. package/package.json +2 -2
  271. package/readme.md +10 -9
  272. package/readme.zh-CN.md +8 -7
  273. package/tokens/alpha.css +3 -1
  274. package/tokens/colors.css +1 -1
  275. package/tokens/dark.css +1 -1
  276. package/tokens/layout.css +8 -5
  277. package/tokens/tokens.d.ts +24 -0
  278. package/tokens/tokens.js +42 -6
  279. package/tokens/tokens.json +97 -11
  280. package/tokens/typography.css +26 -9
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"><link rel="stylesheet" href="../../tokens/hover.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,12 +1,12 @@
1
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"><link rel="stylesheet" href="../../tokens/hover.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;
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"><link rel="stylesheet" href="../../tokens/hover.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/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"><link rel="stylesheet" href="../../tokens/hover.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" label="lg 36"/><IconButton icon="arrow-left" size="md" label="md 32"/><IconButton icon="list" size="sm" label="sm 24"/>
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-0-usage.card.html ADDED
@@ -0,0 +1,88 @@
1
+ <!-- @dsCard group="Icons" viewport="700x2250" name="Icon Usage" subtitle="Monochrome glyphs · category tiles · document hues · status · marks · icons inside components — when an icon gets colour" -->
2
+ <!DOCTYPE html>
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
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/card-kit.js"></script>
9
+ <script src="../_shared/view-source.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface)}.cap{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px}.cap span{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);white-space:nowrap}.rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-body)}.rules code{font-size:12px;white-space:nowrap}</style></head>
11
+ <body><div id="root"></div>
12
+ <script type="text/babel">
13
+ const { Icon, IconTile, StatusBadge, Alert, Button, IconButton, PaletteItem, ListRow, ActivityItem, DocTree } = window.KeybricksDesignSystem_71231a;
14
+ const LEAF = [["orange", "var(--cat-transform)"], ["green", "var(--cat-source)"], ["purple", "var(--cat-merge)"], ["blue", "var(--info-fg)"], ["teal", "var(--cat-output)"], ["gray", "var(--text-muted)"]];
15
+ const HUES = [["source", "table"], ["join", "shuffle"], ["transform", "funnel"], ["merge", "merge"], ["output", "layers"]];
16
+ const Cap = ({ label, children }) => <div className="cap">{children}<span>{label}</span></div>;
17
+ const Glyph = ({ name, color, label }) => <Cap label={label}><span style={{ color, display: "inline-flex" }}><Icon name={name} size={20} /></span></Cap>;
18
+ function Sheet() {
19
+ return <div className="kb-sheet">
20
+ <KBSec title="1 · Monochrome glyph — the default" note="Almost every icon is a single-colour stroke glyph that takes the colour of its text. Colour comes from the text token, never from the icon itself.">
21
+ <KBRow k="text colour">
22
+ <Glyph name="file-text" color="var(--text-heading)" label="heading" />
23
+ <Glyph name="file-text" color="var(--text-body)" label="body" />
24
+ <Glyph name="file-text" color="var(--text-secondary)" label="secondary" />
25
+ <Glyph name="file-text" color="var(--text-muted)" label="muted / disabled" />
26
+ <Glyph name="file-text" color="var(--action-primary)" label="action" />
27
+ </KBRow>
28
+ <KBRow k="on a fill"><Button icon="download">Export</Button><Button variant="dark" icon="ai-sparkles">AI Assistant</Button><Button variant="danger" icon="trash-2">Delete</Button><IconButton icon="ellipsis" label="More" /></KBRow>
29
+ </KBSec>
30
+ <KBSec title="2 · Category tile — IconTile" note="The coloured square is a category, not decoration: each hue is one node type (--cat-*-bg behind --cat-* glyph). Dark mode swaps both for a low-alpha wash automatically.">
31
+ <KBRow k="palette · 40 r14">{HUES.map(([h, i]) => <Cap key={h} label={h}><IconTile icon={i} hue={h} /></Cap>)}</KBRow>
32
+ <KBRow k="node · 48 r16">{HUES.map(([h, i]) => <Cap key={h} label={h}><IconTile icon={i} hue={h} kind="node" /></Cap>)}</KBRow>
33
+ <KBRow k="row · 32 r8">
34
+ <Cap label="hue"><IconTile icon="table" hue="join" kind="row" /></Cap>
35
+ <Cap label="hue"><IconTile icon="box" hue="merge" kind="row" /></Cap>
36
+ <Cap label="neutral"><IconTile icon="folder" hue="neutral" kind="row" /></Cap>
37
+ <Cap label="no hue (hairline)"><IconTile icon="file-text" kind="row" /></Cap>
38
+ </KBRow>
39
+ </KBSec>
40
+ <KBSec title="3 · Document glyph — Tree / DocTree hue" note="The one place a bare glyph is coloured: a document leaf in Tree or DocTree takes a hue that tells the document type apart. Folders stay muted. Pass hue on the item; the component maps it to the token.">
41
+ <KBRow k="leaf hue">{LEAF.map(([h, v]) => <Cap key={h} label={h}><span style={{ color: v, display: "inline-flex" }}><Icon name="file-text" size={16} /></span></Cap>)}</KBRow>
42
+ <KBRow k="DocTree" style={{ display: "block" }}><div style={{ width: 240, border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}><DocTree title="Documents" active="Revenue Analysis" items={[{ label: "Q1 2026", kind: "folder" }, { label: "Revenue Analysis", hue: "green" }, { label: "Cost Allocation", hue: "orange" }, { label: "FX Rates Model", hue: "purple" }, { label: "Cash Flow Forecast", hue: "blue" }, { label: "Notes", hue: "gray" }]} /></div></KBRow>
43
+ </KBSec>
44
+ <KBSec title="4 · Status" note="Status colour is reserved for state: success, warning, danger, info, pending. The glyph sits in a solid circle (StatusBadge) or leads a tinted message (Alert).">
45
+ <KBRow k="StatusBadge">
46
+ <Cap label="success"><StatusBadge tone="success" icon="check" /></Cap>
47
+ <Cap label="danger"><StatusBadge tone="danger" icon="x" /></Cap>
48
+ <Cap label="warning"><StatusBadge tone="warning" icon="bell" /></Cap>
49
+ <Cap label="pending"><StatusBadge tone="pending" icon="clock" /></Cap>
50
+ <Cap label="info"><StatusBadge tone="info" icon="info" /></Cap>
51
+ <Cap label="node dot · 13"><StatusBadge tone="danger" size={13} /></Cap>
52
+ </KBRow>
53
+ <KBRow k="Alert" style={{ flexDirection: "column", alignItems: "stretch", gap: 8 }}>
54
+ <Alert tone="info" title="Import scheduled">Runs daily at 06:00.</Alert>
55
+ <Alert tone="success" title="Sync complete">312 rows updated.</Alert>
56
+ <Alert tone="warning" title="Mapping incomplete">2 accounts have no target.</Alert>
57
+ <Alert tone="danger" title="Connection failed">The Oracle source did not respond.</Alert>
58
+ </KBRow>
59
+ </KBSec>
60
+ <KBSec title="5 · Marks" note="A 14px mark next to a title flags one property of the row. Favourite is the only filled glyph in the system.">
61
+ <KBRow k="favourite">
62
+ <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: "var(--text-base)", color: "var(--text-heading)" }}>FX Rates Model<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" style={{ color: "var(--warning)" }}><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /></svg></span>
63
+ <span style={{ fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>Table <code>mark: "favorite"</code> · --warning</span>
64
+ </KBRow>
65
+ <KBRow k="AI">
66
+ <Glyph name="ai" color="var(--action-primary)" label="ai" />
67
+ <Glyph name="ai-sparkles" color="var(--action-primary)" label="ai-sparkles" />
68
+ </KBRow>
69
+ </KBSec>
70
+ <KBSec title="6 · Inside components" note="These components choose the tile and colour for you — pass an icon and, where it applies, a hue.">
71
+ <KBRow k="PaletteItem"><div style={{ display: "flex", gap: 8 }}><PaletteItem icon="table" hue="source" label="Detail Sheet" /><PaletteItem icon="shuffle" hue="join" label="Association Match" /><PaletteItem icon="funnel" hue="transform" label="Filter" /><PaletteItem icon="layers" hue="output" label="Output" /></div></KBRow>
72
+ <KBRow k="ActivityItem" style={{ display: "block" }}><ActivityItem icon="upload" title="Opening balances imported" meta="Felix Wang · 09:10" action="Open" /></KBRow>
73
+ <KBRow k="ListRow" style={{ display: "block" }}><ListRow icon="workflow" title="Month-end close" meta="6 steps" trailing="6" /></KBRow>
74
+ </KBSec>
75
+ <KBSec title="Rules">
76
+ <ul className="rules">
77
+ <li>Default to a monochrome glyph in the text's own colour. Add colour only when it means something.</li>
78
+ <li>Category hue → <code>IconTile</code> (or a component that uses it). A bare glyph gets a hue only as a document leaf, through the <code>hue</code> of a Tree or DocTree item.</li>
79
+ <li>Status colour only for state, always with a shape (circle, tinted message) — never colour alone.</li>
80
+ <li>Tile and glyph always come as a pair: <code>--cat-x-bg</code> behind <code>--cat-x</code>. Don't mix hues or invent tints.</li>
81
+ <li>Glyphs on a solid fill (buttons, status badges) use <code>--on-accent</code>; components do this for you.</li>
82
+ </ul>
83
+ </KBSec>
84
+ </div>;
85
+ }
86
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet />);
87
+ if (window.KBViewSource) setTimeout(function () { KBViewSource.mount("#root", [{ "name": "Badge.jsx (IconTile · StatusBadge)", "path": "../display/Badge.jsx", "vue": "../display/IconTile.vue", "vueName": "IconTile.vue" }, { "name": "Icon.jsx", "path": "../icons/Icon.jsx" }]); }, 0);
88
+ </script></body></html>
package/components/_cards/icons-1-core.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Icons" viewport="700x590" 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"><link rel="stylesheet" href="../../tokens/hover.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="700x2390" name="Feather Library" subtitle="317 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"><link rel="stylesheet" href="../../tokens/hover.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 317 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="700x660" 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"><link rel="stylesheet" href="../../tokens/hover.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;
package/components/_cards/icons-4-datasource.card.html ADDED
@@ -0,0 +1,5 @@
1
+ <!-- @dsCard group="Icons" viewport="700x660" name="Data Source Logos" subtitle="17 data-source logo images in assets/logos/datasource/" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <style>body{margin:0;background:var(--bg-surface);padding:24px;box-sizing:border-box;font-family:var(--font-sans)}.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}.t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--border-card);border-radius:var(--radius-lg)}.t img{width:64px;height:64px;border-radius:var(--radius-lg);display:block}.n{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-heading);text-align:center}.f{font-size:11px;line-height:16px;color:var(--text-secondary)}</style></head>
5
+ <body><div class="g"><div class="t"><img src="../../assets/logos/datasource/oracle.png" alt="Oracle"><span class="n">Oracle</span><span class="f">oracle.png</span></div><div class="t"><img src="../../assets/logos/datasource/sap.png" alt="SAP"><span class="n">SAP</span><span class="f">sap.png</span></div><div class="t"><img src="../../assets/logos/datasource/sap-alt.png" alt="SAP (alternate)"><span class="n">SAP (alternate)</span><span class="f">sap-alt.png</span></div><div class="t"><img src="../../assets/logos/datasource/sql-server.png" alt="SQL Server"><span class="n">SQL Server</span><span class="f">sql-server.png</span></div><div class="t"><img src="../../assets/logos/datasource/mysql.png" alt="MySQL"><span class="n">MySQL</span><span class="f">mysql.png</span></div><div class="t"><img src="../../assets/logos/datasource/mariadb.png" alt="MariaDB"><span class="n">MariaDB</span><span class="f">mariadb.png</span></div><div class="t"><img src="../../assets/logos/datasource/postgresql.png" alt="PostgreSQL"><span class="n">PostgreSQL</span><span class="f">postgresql.png</span></div><div class="t"><img src="../../assets/logos/datasource/mongodb.png" alt="MongoDB"><span class="n">MongoDB</span><span class="f">mongodb.png</span></div><div class="t"><img src="../../assets/logos/datasource/hive.png" alt="Hive"><span class="n">Hive</span><span class="f">hive.png</span></div><div class="t"><img src="../../assets/logos/datasource/odbc.png" alt="ODBC"><span class="n">ODBC</span><span class="f">odbc.png</span></div><div class="t"><img src="../../assets/logos/datasource/rest-api.png" alt="REST API"><span class="n">REST API</span><span class="f">rest-api.png</span></div><div class="t"><img src="../../assets/logos/datasource/soap.png" alt="SOAP"><span class="n">SOAP</span><span class="f">soap.png</span></div><div class="t"><img src="../../assets/logos/datasource/ftp.png" alt="FTP"><span class="n">FTP</span><span class="f">ftp.png</span></div><div class="t"><img src="../../assets/logos/datasource/excel.png" alt="Excel"><span class="n">Excel</span><span class="f">excel.png</span></div><div class="t"><img src="../../assets/logos/datasource/json.png" alt="JSON"><span class="n">JSON</span><span class="f">json.png</span></div><div class="t"><img src="../../assets/logos/datasource/dat.png" alt="DAT"><span class="n">DAT</span><span class="f">dat.png</span></div><div class="t"><img src="../../assets/logos/datasource/hierarchy.png" alt="Hierarchy"><span class="n">Hierarchy</span><span class="f">hierarchy.png</span></div></div></body></html>
package/components/_cards/input.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x570" 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"><link rel="stylesheet" href="../../tokens/hover.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,9 +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>
22
- <div style={{gridColumn:"1 / -1"}}><span className="lbl" style={{fontSize:10,letterSpacing:".5px",textTransform:"uppercase",color:"var(--text-muted)",display:"block",marginBottom:6}}>Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36 — the Field label follows too</span>
23
- <div style={{display:"flex",gap:16,alignItems:"flex-start",flexWrap:"wrap"}}><div data-size="sm" style={{width:180}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div><div data-size="md" style={{width:200}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div><div data-size="lg" style={{width:220}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div></div>
24
- </div>
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>
25
25
  </div>;}
26
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
27
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
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"><link rel="stylesheet" href="../../tokens/hover.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
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"><link rel="stylesheet" href="../../tokens/hover.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
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"><link rel="stylesheet" href="../../tokens/hover.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
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"><link rel="stylesheet" href="../../tokens/hover.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;
package/components/_cards/log-viewer.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x370" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
2
2
  <!DOCTYPE html>
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">
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 { LogViewer } = window.KeybricksDesignSystem_71231a;
package/components/_cards/modal.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x520" name="Modal" subtitle="Default · destructive footer · with form content · no subtitle" -->
2
2
  <!DOCTYPE html>
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">
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/multi-select.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x410" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
2
2
  <!DOCTYPE html>
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">
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 { MultiSelect, Field } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  const DEPTS = ["Engineering","Marketing","Operations","Sales","Finance","Legal","HR"];
14
16
  function Sheet(){
15
17
  const [a,setA]=React.useState([]); const [b,setB]=React.useState(["Engineering","Sales"]);
@@ -19,7 +21,7 @@ function Sheet(){
19
21
  <div><span className="lbl">Two selected</span><MultiSelect options={DEPTS} value={b} onChange={setB}/></div>
20
22
  <div><span className="lbl">Overflow → +n</span><MultiSelect options={DEPTS} value={c} onChange={setC}/></div>
21
23
  <div><span className="lbl">Disabled</span><MultiSelect options={DEPTS} value={["Operations"]} disabled/></div>
22
- <div style={{gridColumn:"1 / -1"}}><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",gap:16,alignItems:"center",flexWrap:"wrap"}}><div data-size="sm" style={{width:200}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div><div data-size="md" style={{width:220}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div><div data-size="lg" style={{width:240}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div></div></div>
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 init={(l)=>l==="en"?["Finance","Operations"]:["财务部","运营部"]} render={(t,l,v,set)=><div style={{width:200}}><MultiSelect options={l==="en"?DEPTS:["财务部","运营部","人力资源部","市场部"]} value={v} onChange={set} maxTags={1}/></div>}/></div>
23
25
  </div>;
24
26
  }
25
27
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/number-stepper.card.html CHANGED
@@ -1,23 +1,26 @@
1
- <!-- @dsCard group="Components" viewport="700x250" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x240" name="Number Stepper" subtitle="Default · at min · at max · 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"><link rel="stylesheet" href="../../tokens/hover.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(4,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(4,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 { NumberStepper } = window.KeybricksDesignSystem_71231a;
14
+ const { KBLive: Live } = window;
15
+ const { KBTiers: Tiers } = window;
13
16
  function Sheet(){
14
17
  const [n,setN]=React.useState(100);
15
18
  return <div className="g">
16
19
  <div><span className="lbl">Default</span><NumberStepper value={n} onChange={setN}/></div>
17
- <div><span className="lbl">At minimum (− disabled)</span><NumberStepper value={0} min={0}/></div>
18
- <div><span className="lbl">At maximum (+ disabled)</span><NumberStepper value={500} max={500}/></div>
20
+ <div><span className="lbl">At minimum (− disabled)</span><Live init={0}>{(v,set)=><NumberStepper value={v} onChange={set} min={0}/>}</Live></div>
21
+ <div><span className="lbl">At maximum (+ disabled)</span><Live init={500}>{(v,set)=><NumberStepper value={v} onChange={set} max={500}/>}</Live></div>
19
22
  <div><span className="lbl">Disabled</span><NumberStepper value={100} disabled/></div>
20
- <div style={{gridColumn:"1 / -1"}}><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",gap:16,alignItems:"center",flexWrap:"wrap"}}><div data-size="sm"><NumberStepper value={n} onChange={setN}/></div><div data-size="md"><NumberStepper value={n} onChange={setN}/></div><div data-size="lg"><NumberStepper value={n} onChange={setN}/></div></div></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 cjk={false} init={100} render={(t,l,v,set)=><NumberStepper value={v} onChange={set}/>}/></div>
21
24
  </div>;
22
25
  }
23
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/pagination.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x490" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
1
+ <!-- @dsCard group="Components" viewport="700x520" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
2
2
  <!DOCTYPE html>
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">
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
+ <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}.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 { Pagination } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  function Sheet(){
14
16
  const [p,setP]=React.useState(2);
15
17
  const [p2,setP2]=React.useState(1);
@@ -18,7 +20,7 @@ function Sheet(){
18
20
  <div><span className="lbl">Small set — no range label</span><Pagination page={p2} pageCount={3} onChange={setP2}/></div>
19
21
  <div><span className="lbl">First page — Prev disabled</span><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
20
22
  <div><span className="lbl">Last page — Next disabled</span><Pagination page={12} pageCount={12} total={224} pageSize={20}/></div>
21
- <div><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",flexDirection:"column",gap:10}}><div data-size="sm"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div><div data-size="md"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div><div data-size="lg"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div></div></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 cjk={false} init={2} render={(t,l,v,set)=><Pagination page={v} pageCount={7} total={128} pageSize={20} onChange={set}/>}/></div>
22
24
  </div>;
23
25
  }
24
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/people.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x300" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
2
2
  <!DOCTYPE html>
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">
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;flex-direction:column;gap:4px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</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;flex-direction:column;gap:4px}.lbl{font-size:var(--text-xs);color:var(--text-muted)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Avatar, AvatarGroup, Card } = window.KeybricksDesignSystem_71231a;