@keyfunc/keybricks-ds 1.0.3 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (358) hide show
  1. package/DEPLOY.md +4 -4
  2. package/DESIGN.md +154 -53
  3. package/INTEGRATION.md +176 -36
  4. package/SKILL.md +6 -4
  5. package/_adherence.oxlintrc.json +183 -72
  6. package/_scripts/build-index.mjs +9 -0
  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 +8 -3
  12. package/components/_cards/activity.card.html +2 -2
  13. package/components/_cards/alert.card.html +2 -2
  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 +2 -2
  17. package/components/_cards/button-1-base.card.html +2 -2
  18. package/components/_cards/button-2-states.card.html +14 -14
  19. package/components/_cards/button-3-sizes-icons.card.html +1 -1
  20. package/components/_cards/button-4-group.card.html +5 -5
  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 +2 -2
  24. package/components/_cards/charts-10-gauge.card.html +4 -4
  25. package/components/_cards/charts-11-funnel.card.html +2 -2
  26. package/components/_cards/charts-12-treemap.card.html +2 -2
  27. package/components/_cards/charts-14-radar.card.html +1 -1
  28. package/components/_cards/charts-15-distribution.card.html +1 -1
  29. package/components/_cards/charts-16-pareto.card.html +2 -2
  30. package/components/_cards/charts-17-candlestick.card.html +2 -2
  31. package/components/_cards/charts-18-sankey.card.html +2 -2
  32. package/components/_cards/charts-19-chord.card.html +2 -2
  33. package/components/_cards/charts-2-line.card.html +2 -2
  34. package/components/_cards/charts-20-sunburst.card.html +2 -2
  35. package/components/_cards/charts-21-worldmap.card.html +2 -2
  36. package/components/_cards/charts-22-gantt.card.html +2 -2
  37. package/components/_cards/charts-23-bar3d.card.html +2 -2
  38. package/components/_cards/charts-24-pie3d.card.html +2 -2
  39. package/components/_cards/charts-25-surface3d.card.html +2 -2
  40. package/components/_cards/charts-26-scatter3d.card.html +2 -2
  41. package/components/_cards/charts-27-ribbon3d.card.html +2 -2
  42. package/components/_cards/charts-3-bar.card.html +2 -2
  43. package/components/_cards/charts-4-barlist.card.html +2 -2
  44. package/components/_cards/charts-5-donut.card.html +3 -3
  45. package/components/_cards/charts-6-scatter.card.html +2 -2
  46. package/components/_cards/charts-7-heatmap.card.html +2 -2
  47. package/components/_cards/charts-8-waterfall.card.html +2 -2
  48. package/components/_cards/charts-9-bullet.card.html +2 -2
  49. package/components/_cards/charts-99-fullpage.card.html +5 -5
  50. package/components/_cards/checkbox.card.html +4 -4
  51. package/components/_cards/codeblock.card.html +1 -1
  52. package/components/_cards/combobox.card.html +3 -2
  53. package/components/_cards/context-menu.card.html +3 -2
  54. package/components/_cards/date-picker.card.html +5 -2
  55. package/components/_cards/diffvalue.card.html +2 -2
  56. package/components/_cards/divider.card.html +3 -3
  57. package/components/_cards/drawer.card.html +2 -2
  58. package/components/_cards/dropdown-menu.card.html +6 -6
  59. package/components/_cards/dropzone.card.html +1 -1
  60. package/components/_cards/empty-state.card.html +5 -5
  61. package/components/_cards/filter-bar.card.html +5 -5
  62. package/components/_cards/icon-button.card.html +2 -2
  63. package/components/_cards/icons-1-core.card.html +2 -2
  64. package/components/_cards/icons-2-feather.card.html +3 -3
  65. package/components/_cards/icons-3-unicons.card.html +3 -3
  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 +2 -2
  71. package/components/_cards/log-viewer.card.html +2 -2
  72. package/components/_cards/modal.card.html +9 -9
  73. package/components/_cards/multi-select.card.html +3 -2
  74. package/components/_cards/number-stepper.card.html +3 -2
  75. package/components/_cards/pagination.card.html +3 -2
  76. package/components/_cards/people.card.html +3 -3
  77. package/components/_cards/pipeline-node.card.html +2 -2
  78. package/components/_cards/pipeline-palette.card.html +4 -4
  79. package/components/_cards/radio.card.html +46 -0
  80. package/components/_cards/search.card.html +5 -2
  81. package/components/_cards/segmented-control.card.html +39 -0
  82. package/components/_cards/select.card.html +4 -4
  83. package/components/_cards/slider.card.html +1 -1
  84. package/components/_cards/smart-table.card.html +1 -1
  85. package/components/_cards/spreadsheet.card.html +2 -2
  86. package/components/_cards/stepper.card.html +2 -2
  87. package/components/_cards/table.card.html +103 -0
  88. package/components/_cards/tabs.card.html +3 -2
  89. package/components/_cards/tag.card.html +5 -2
  90. package/components/_cards/textarea.card.html +2 -2
  91. package/components/_cards/timeline.card.html +1 -1
  92. package/components/_cards/toast.card.html +4 -4
  93. package/components/_cards/toggles.card.html +45 -56
  94. package/components/_cards/tooltip.card.html +5 -5
  95. package/components/_cards/tree.card.html +2 -2
  96. package/components/_shared/src-buttons.js +1 -1
  97. package/components/_shared/src-charts.js +1 -1
  98. package/components/_shared/src-data.js +1 -1
  99. package/components/_shared/src-display.js +1 -1
  100. package/components/_shared/src-feedback.js +1 -1
  101. package/components/_shared/src-forms.js +1 -1
  102. package/components/_shared/src-navigation.js +1 -1
  103. package/components/_shared/src-pipeline.js +1 -1
  104. package/components/_shared/src-tabs.js +1 -1
  105. package/components/_shared/view-source.js +9 -4
  106. package/components/_vue/index.mjs +9 -5
  107. package/components/buttons/ActionChip.d.ts +3 -1
  108. package/components/buttons/ActionChip.jsx +4 -4
  109. package/components/buttons/ActionChip.vue +4 -4
  110. package/components/buttons/Button.d.ts +5 -2
  111. package/components/buttons/Button.jsx +15 -18
  112. package/components/buttons/Button.vue +17 -18
  113. package/components/buttons/ButtonGroup.vue +1 -1
  114. package/components/buttons/IconButton.d.ts +2 -1
  115. package/components/buttons/IconButton.jsx +9 -7
  116. package/components/buttons/IconButton.vue +10 -8
  117. package/components/buttons/buttons.prompt.md +6 -5
  118. package/components/charts/Bar3D.jsx +2 -2
  119. package/components/charts/Bar3D.vue +2 -2
  120. package/components/charts/BarChart.jsx +4 -4
  121. package/components/charts/BarChart.vue +4 -4
  122. package/components/charts/BarList.jsx +1 -1
  123. package/components/charts/BarList.vue +1 -1
  124. package/components/charts/BoxPlot.jsx +1 -1
  125. package/components/charts/BoxPlot.vue +2 -2
  126. package/components/charts/BulletChart.jsx +1 -1
  127. package/components/charts/BulletChart.vue +1 -1
  128. package/components/charts/CandlestickChart.jsx +2 -2
  129. package/components/charts/CandlestickChart.vue +3 -3
  130. package/components/charts/ChartKit.jsx +5 -5
  131. package/components/charts/ChartLegend.vue +16 -0
  132. package/components/charts/ChartTooltip.vue +16 -0
  133. package/components/charts/ChordChart.jsx +2 -2
  134. package/components/charts/ChordChart.vue +2 -2
  135. package/components/charts/GanttChart.jsx +2 -2
  136. package/components/charts/GanttChart.vue +2 -2
  137. package/components/charts/GaugeChart.jsx +2 -2
  138. package/components/charts/GaugeChart.vue +2 -2
  139. package/components/charts/HeatmapChart.jsx +2 -2
  140. package/components/charts/HeatmapChart.vue +2 -2
  141. package/components/charts/Histogram.jsx +2 -2
  142. package/components/charts/Histogram.vue +3 -3
  143. package/components/charts/LineChart.jsx +1 -1
  144. package/components/charts/LineChart.vue +3 -3
  145. package/components/charts/ParetoChart.jsx +3 -3
  146. package/components/charts/ParetoChart.vue +4 -4
  147. package/components/charts/PlotGrid.vue +18 -0
  148. package/components/charts/RadarChart.jsx +1 -1
  149. package/components/charts/RadarChart.vue +1 -1
  150. package/components/charts/Ribbon3D.jsx +2 -2
  151. package/components/charts/Ribbon3D.vue +2 -2
  152. package/components/charts/SankeyChart.jsx +2 -2
  153. package/components/charts/SankeyChart.vue +2 -2
  154. package/components/charts/Scatter3D.jsx +1 -1
  155. package/components/charts/Scatter3D.vue +1 -1
  156. package/components/charts/ScatterChart.jsx +3 -3
  157. package/components/charts/ScatterChart.vue +4 -4
  158. package/components/charts/Sparkline.jsx +1 -1
  159. package/components/charts/Sparkline.vue +1 -1
  160. package/components/charts/SunburstChart.jsx +1 -1
  161. package/components/charts/SunburstChart.vue +1 -1
  162. package/components/charts/Surface3D.jsx +2 -2
  163. package/components/charts/Surface3D.vue +2 -2
  164. package/components/charts/TreemapChart.jsx +2 -2
  165. package/components/charts/TreemapChart.vue +2 -2
  166. package/components/charts/WaterfallChart.jsx +2 -2
  167. package/components/charts/WaterfallChart.vue +3 -3
  168. package/components/charts/WorldMap.jsx +2 -2
  169. package/components/charts/WorldMap.vue +2 -2
  170. package/components/charts/XLabels.vue +11 -0
  171. package/components/data/CodeBlock.jsx +1 -1
  172. package/components/data/CodeBlock.vue +1 -1
  173. package/components/data/DiffValue.jsx +1 -1
  174. package/components/data/DiffValue.vue +1 -1
  175. package/components/data/FilterBar.d.ts +2 -0
  176. package/components/data/FilterBar.jsx +10 -9
  177. package/components/data/FilterBar.vue +9 -8
  178. package/components/data/KeyValue.jsx +3 -3
  179. package/components/data/KeyValue.vue +3 -3
  180. package/components/data/ListRow.jsx +2 -2
  181. package/components/data/ListRow.vue +2 -2
  182. package/components/data/Pagination.d.ts +5 -1
  183. package/components/data/Pagination.jsx +16 -12
  184. package/components/data/Pagination.vue +14 -9
  185. package/components/data/SmartTable.d.ts +4 -1
  186. package/components/data/SmartTable.jsx +16 -14
  187. package/components/data/SmartTable.vue +25 -22
  188. package/components/data/Spreadsheet.d.ts +2 -0
  189. package/components/data/Spreadsheet.jsx +12 -11
  190. package/components/data/Spreadsheet.vue +14 -13
  191. package/components/data/Table.d.ts +47 -0
  192. package/components/data/Table.jsx +85 -0
  193. package/components/data/Table.vue +63 -0
  194. package/components/data/data.prompt.md +3 -3
  195. package/components/display/Avatar.vue +3 -2
  196. package/components/display/AvatarGroup.vue +3 -2
  197. package/components/display/Badge.vue +1 -1
  198. package/components/display/Divider.vue +3 -3
  199. package/components/display/Donut.vue +3 -2
  200. package/components/display/IconTile.vue +2 -1
  201. package/components/display/Kbd.vue +1 -1
  202. package/components/display/ProgressBar.jsx +1 -1
  203. package/components/display/ProgressBar.vue +1 -1
  204. package/components/display/StatCard.vue +1 -1
  205. package/components/display/Tag.d.ts +3 -1
  206. package/components/display/Tag.jsx +4 -4
  207. package/components/display/Tag.vue +4 -4
  208. package/components/feedback/Accordion.jsx +2 -2
  209. package/components/feedback/Accordion.vue +2 -2
  210. package/components/feedback/ActivityItem.d.ts +3 -1
  211. package/components/feedback/ActivityItem.jsx +5 -5
  212. package/components/feedback/ActivityItem.vue +5 -4
  213. package/components/feedback/Alert.jsx +4 -4
  214. package/components/feedback/Alert.vue +3 -3
  215. package/components/feedback/Banner.jsx +5 -5
  216. package/components/feedback/Banner.vue +5 -5
  217. package/components/feedback/ContextMenu.d.ts +3 -1
  218. package/components/feedback/ContextMenu.jsx +5 -5
  219. package/components/feedback/ContextMenu.vue +5 -5
  220. package/components/feedback/DotActivity.vue +3 -3
  221. package/components/feedback/Drawer.d.ts +2 -0
  222. package/components/feedback/Drawer.jsx +6 -6
  223. package/components/feedback/Drawer.vue +22 -15
  224. package/components/feedback/EmptyState.vue +2 -2
  225. package/components/feedback/LogViewer.vue +1 -1
  226. package/components/feedback/Modal.d.ts +2 -0
  227. package/components/feedback/Modal.jsx +12 -11
  228. package/components/feedback/Modal.vue +10 -8
  229. package/components/feedback/Skeleton.vue +2 -1
  230. package/components/feedback/Spinner.vue +2 -1
  231. package/components/feedback/Stepper.vue +1 -1
  232. package/components/feedback/Timeline.jsx +1 -1
  233. package/components/feedback/Timeline.vue +1 -1
  234. package/components/feedback/Toast.vue +4 -4
  235. package/components/feedback/ToastStack.vue +11 -0
  236. package/components/feedback/Tooltip.vue +19 -0
  237. package/components/feedback/feedback.prompt.md +4 -4
  238. package/components/forms/Checkbox.d.ts +3 -2
  239. package/components/forms/Checkbox.jsx +7 -7
  240. package/components/forms/Checkbox.vue +8 -8
  241. package/components/forms/Combobox.d.ts +2 -0
  242. package/components/forms/Combobox.jsx +12 -10
  243. package/components/forms/Combobox.vue +11 -10
  244. package/components/forms/DatePicker.d.ts +4 -0
  245. package/components/forms/DatePicker.jsx +16 -12
  246. package/components/forms/DatePicker.vue +15 -11
  247. package/components/forms/Dropzone.jsx +2 -2
  248. package/components/forms/Dropzone.vue +5 -5
  249. package/components/forms/Field.d.ts +5 -1
  250. package/components/forms/Field.jsx +4 -4
  251. package/components/forms/Field.vue +4 -4
  252. package/components/forms/Input.d.ts +5 -1
  253. package/components/forms/Input.jsx +7 -7
  254. package/components/forms/Input.vue +3 -3
  255. package/components/forms/MultiSelect.d.ts +2 -0
  256. package/components/forms/MultiSelect.jsx +13 -11
  257. package/components/forms/MultiSelect.vue +12 -11
  258. package/components/forms/NumberStepper.d.ts +3 -1
  259. package/components/forms/NumberStepper.jsx +7 -7
  260. package/components/forms/NumberStepper.vue +8 -7
  261. package/components/forms/Radio.d.ts +30 -0
  262. package/components/forms/Radio.jsx +65 -0
  263. package/components/forms/Radio.vue +17 -9
  264. package/components/forms/RadioGroup.vue +22 -4
  265. package/components/forms/SearchInput.d.ts +3 -1
  266. package/components/forms/SearchInput.jsx +6 -6
  267. package/components/forms/SearchInput.vue +7 -6
  268. package/components/forms/Select.d.ts +3 -2
  269. package/components/forms/Select.jsx +6 -7
  270. package/components/forms/Select.vue +6 -6
  271. package/components/forms/Slider.jsx +3 -3
  272. package/components/forms/Slider.vue +3 -3
  273. package/components/forms/Switch.d.ts +32 -24
  274. package/components/forms/Switch.jsx +85 -35
  275. package/components/forms/Switch.vue +57 -11
  276. package/components/forms/Textarea.vue +4 -4
  277. package/components/forms/forms.prompt.md +4 -1
  278. package/components/forms/input-base.js +2 -1
  279. package/components/index.d.ts +2 -2
  280. package/components/index.js +5 -5
  281. package/components/navigation/Breadcrumb.jsx +3 -3
  282. package/components/navigation/Breadcrumb.vue +4 -4
  283. package/components/navigation/DocTree.jsx +3 -3
  284. package/components/navigation/DocTree.vue +3 -3
  285. package/components/navigation/PageHeading.vue +1 -1
  286. package/components/navigation/PageToolbar.vue +7 -6
  287. package/components/navigation/Sidebar.jsx +1 -1
  288. package/components/navigation/Sidebar.vue +3 -3
  289. package/components/navigation/ThemeToggle.vue +2 -1
  290. package/components/navigation/TopBar.d.ts +3 -1
  291. package/components/navigation/TopBar.jsx +6 -6
  292. package/components/navigation/Tree.jsx +5 -5
  293. package/components/navigation/Tree.vue +5 -5
  294. package/components/pipeline/ConfigPanel.d.ts +2 -0
  295. package/components/pipeline/ConfigPanel.jsx +9 -9
  296. package/components/pipeline/ConfigPanel.vue +9 -9
  297. package/components/pipeline/DataPreview.d.ts +3 -1
  298. package/components/pipeline/DataPreview.jsx +7 -7
  299. package/components/pipeline/DataPreview.vue +7 -7
  300. package/components/pipeline/NodeCard.jsx +3 -3
  301. package/components/pipeline/NodeCard.vue +3 -3
  302. package/components/pipeline/PaletteItem.vue +2 -2
  303. package/components/pipeline/PaletteListItem.vue +1 -1
  304. package/components/pipeline/PalettePanel.jsx +2 -2
  305. package/components/pipeline/PalettePanel.vue +1 -1
  306. package/components/pipeline/Port.vue +15 -0
  307. package/components/pipeline/PortLabel.vue +15 -0
  308. package/components/pipeline/ZoomControls.vue +1 -1
  309. package/components/pipeline/port-skin.js +13 -0
  310. package/components/px.js +4 -0
  311. package/components/tabs/PanelTabs.vue +5 -4
  312. package/components/tabs/PillTabs.vue +5 -4
  313. package/components/tabs/SegmentedControl.d.ts +11 -4
  314. package/components/tabs/SegmentedControl.jsx +25 -10
  315. package/components/tabs/SegmentedControl.vue +19 -7
  316. package/components/tabs/Tabs.d.ts +5 -3
  317. package/components/tabs/Tabs.jsx +15 -15
  318. package/components/tabs/Tabs.vue +5 -5
  319. package/components/tabs/ViewToggle.d.ts +3 -1
  320. package/components/tabs/ViewToggle.jsx +5 -5
  321. package/components/tabs/ViewToggle.vue +5 -5
  322. package/components/tabs/tabs.prompt.md +4 -2
  323. package/keybricks.css +4 -0
  324. package/package.json +6 -3
  325. package/readme.md +90 -123
  326. package/readme.zh-CN.md +120 -0
  327. package/tokens/charts.css +20 -17
  328. package/tokens/colors.css +2 -2
  329. package/tokens/dark.css +2 -2
  330. package/tokens/hover.css +32 -0
  331. package/tokens/interaction.css +3 -1
  332. package/tokens/layout.css +29 -7
  333. package/tokens/tokens.d.ts +36 -0
  334. package/tokens/tokens.js +143 -89
  335. package/tokens/tokens.json +240 -106
  336. package/tokens/typography.css +27 -14
  337. package/components/_cards/brand-visual.card.html +0 -43
  338. package/components/_cards/datatable.card.html +0 -48
  339. package/components/_shared/src-brand.js +0 -1
  340. package/components/brand/BrandVisual.d.ts +0 -17
  341. package/components/brand/BrandVisual.jsx +0 -29
  342. package/components/brand/BrandVisual.vue +0 -34
  343. package/components/brand/_dir.card.html +0 -13
  344. package/components/brand/brandMotifs.js +0 -210
  345. package/components/buttons/_dir.card.html +0 -13
  346. package/components/charts/ChartKit.vue +0 -47
  347. package/components/charts/_dir.card.html +0 -7
  348. package/components/data/DataTable.d.ts +0 -28
  349. package/components/data/DataTable.jsx +0 -32
  350. package/components/data/DataTable.vue +0 -25
  351. package/components/data/_dir.card.html +0 -13
  352. package/components/display/_dir.card.html +0 -13
  353. package/components/feedback/_dir.card.html +0 -13
  354. package/components/forms/_dir.card.html +0 -13
  355. package/components/icons/_dir.card.html +0 -13
  356. package/components/navigation/_dir.card.html +0 -13
  357. package/components/pipeline/_dir.card.html +0 -13
  358. package/components/tabs/_dir.card.html +0 -13
package/components/_cards/context-menu.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x260" name="Context Menu" subtitle="Icons · plain text · danger item · long list" -->
1
+ <!-- @dsCard group="Components" viewport="700x640" 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">
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>
@@ -14,6 +14,7 @@ function Sheet(){return <div className="grid">
14
14
  <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
15
  <div className="col"><span className="lbl">Plain text, no icons</span><ContextMenu items={[{label:"Rename"},{label:"Move to..."},{label:"Archive"}]}/></div>
16
16
  <div className="col"><span className="lbl">Danger only</span><ContextMenu items={[{label:"Remove from workflow",icon:"x",danger:true}]}/></div>
17
+ <div className="col"><span className="lbl">Size tiers — data-size on the region, the control inherits · rows 24 · 32 · 36</span><div style={{display:"flex",gap:16,alignItems:"flex-start"}}><div data-size="sm"><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Delete",icon:"trash-2",danger:true}]}/></div><div data-size="md"><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Delete",icon:"trash-2",danger:true}]}/></div><div data-size="lg"><ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Delete",icon:"trash-2",danger:true}]}/></div></div></div>
17
18
  <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
19
  </div>;}
19
20
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/date-picker.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x430" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
1
+ <!-- @dsCard group="Components" viewport="700x510" 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">
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>
@@ -23,6 +23,9 @@ function Sheet(){
23
23
  <Field label="Period start" required><DatePicker value={d} onChange={setD}/></Field>
24
24
  <Field label="Period end" hint="Defaults to fiscal year end"><DatePicker value={e} onChange={setE}/></Field>
25
25
  </div>
26
+ <div className="row" style={{paddingTop:16}}>
27
+ <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",gap:16,alignItems:"center",flexWrap:"wrap"}}><div data-size="sm"><DatePicker value={d} onChange={setD}/></div><div data-size="md"><DatePicker value={d} onChange={setD}/></div><div data-size="lg"><DatePicker value={d} onChange={setD}/></div></div></div>
28
+ </div>
26
29
  <div className="hint">Month-grid popover: chevron month nav, Monday-first week, today outlined in blue, selected day filled.</div>
27
30
  </div>;
28
31
  }
package/components/_cards/diffvalue.card.html CHANGED
@@ -1,6 +1,6 @@
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">
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/divider.card.html CHANGED
@@ -1,6 +1,6 @@
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">
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>
@@ -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,6 +1,6 @@
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">
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/dropdown-menu.card.html CHANGED
@@ -1,6 +1,6 @@
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">
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>
@@ -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,6 +1,6 @@
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">
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/empty-state.card.html CHANGED
@@ -1,6 +1,6 @@
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">
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>
@@ -12,16 +12,16 @@
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">
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,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x220" name="Icon Button" subtitle="Sizes · 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">
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>
@@ -12,7 +12,7 @@
12
12
  const { IconButton } = window.KeybricksDesignSystem_71231a;
13
13
  function Sheet(){return <div>
14
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"/>
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
16
  </div>
17
17
  <div className="row"><span className="lbl">States</span>
18
18
  <IconButton icon="layout-grid" size="md" active label="Active"/>
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="700x590" name="Core Set" subtitle="The 70 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">
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/icons-2-feather.card.html CHANGED
@@ -1,6 +1,6 @@
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="700x2390" name="Feather Library" subtitle="317 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">
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>
@@ -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 317 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,6 +1,6 @@
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="700x660" 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">
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>
@@ -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,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x480" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
1
+ <!-- @dsCard group="Components" viewport="700x570" 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">
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>
@@ -19,6 +19,9 @@ function Sheet(){return <div className="g">
19
19
  <Field label="Error — invalid value" error="Only letters, numbers and underscores are allowed"><Input defaultValue="Sales Orders!!" error/></Field>
20
20
  <Field label="With hint text" hint="Shown in Data Integration node lists"><Input placeholder="e.g. Sales Orders"/></Field>
21
21
  <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>
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">
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">
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">
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,6 +1,6 @@
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">
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/log-viewer.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x320" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
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">
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">
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/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">
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">
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>
@@ -14,20 +14,20 @@ function Sheet(){
14
14
  const [which,setWhich]=React.useState(null);
15
15
  return <div>
16
16
  <div className="row">
17
- <Button variant="outline" size="sm" onClick={()=>setWhich("confirm")}>Open confirm</Button>
18
- <Button variant="outline" size="sm" onClick={()=>setWhich("destructive")}>Open destructive</Button>
19
- <Button variant="outline" size="sm" onClick={()=>setWhich("form")}>Open with form</Button>
20
- <Button variant="outline" size="sm" onClick={()=>setWhich("plain")}>Open, no subtitle</Button>
17
+ <Button variant="outline" onClick={()=>setWhich("confirm")}>Open confirm</Button>
18
+ <Button variant="outline" onClick={()=>setWhich("destructive")}>Open destructive</Button>
19
+ <Button variant="outline" onClick={()=>setWhich("form")}>Open with form</Button>
20
+ <Button variant="outline" onClick={()=>setWhich("plain")}>Open, no subtitle</Button>
21
21
  </div>
22
22
  <Modal open={which==="confirm"} title="Discard changes?" subtitle="Your edits to this node haven't been saved." onClose={()=>setWhich(null)}
23
- footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Keep Editing</Button><Button size="sm" onClick={()=>setWhich(null)}>Discard</Button></React.Fragment>}/>
23
+ footer={<React.Fragment><Button variant="outline" onClick={()=>setWhich(null)}>Keep Editing</Button><Button onClick={()=>setWhich(null)}>Discard</Button></React.Fragment>}/>
24
24
  <Modal open={which==="destructive"} title="Delete node?" subtitle="“Sales × Product Join” and its 2 edges will be removed." onClose={()=>setWhich(null)}
25
- footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Cancel</Button><Button variant="danger" size="sm" onClick={()=>setWhich(null)}>Delete Node</Button></React.Fragment>}/>
25
+ footer={<React.Fragment><Button variant="outline" onClick={()=>setWhich(null)}>Cancel</Button><Button variant="danger" onClick={()=>setWhich(null)}>Delete Node</Button></React.Fragment>}/>
26
26
  <Modal open={which==="form"} title="Rename Node" subtitle="This name is shown on the canvas and in logs." onClose={()=>setWhich(null)}
27
- footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Cancel</Button><Button size="sm" onClick={()=>setWhich(null)}>Save</Button></React.Fragment>}>
27
+ footer={<React.Fragment><Button variant="outline" onClick={()=>setWhich(null)}>Cancel</Button><Button onClick={()=>setWhich(null)}>Save</Button></React.Fragment>}>
28
28
  <Field label="Node Name" required><Input defaultValue="Sales × Product Join"/></Field>
29
29
  </Modal>
30
- <Modal open={which==="plain"} title="Export complete" onClose={()=>setWhich(null)} footer={<Button size="sm" onClick={()=>setWhich(null)}>Done</Button>}/>
30
+ <Modal open={which==="plain"} title="Export complete" onClose={()=>setWhich(null)} footer={<Button onClick={()=>setWhich(null)}>Done</Button>}/>
31
31
  </div>;
32
32
  }
33
33
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/multi-select.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x330" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
1
+ <!-- @dsCard group="Components" viewport="700x410" 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">
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">
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>
@@ -19,6 +19,7 @@ function Sheet(){
19
19
  <div><span className="lbl">Two selected</span><MultiSelect options={DEPTS} value={b} onChange={setB}/></div>
20
20
  <div><span className="lbl">Overflow → +n</span><MultiSelect options={DEPTS} value={c} onChange={setC}/></div>
21
21
  <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>
22
23
  </div>;
23
24
  }
24
25
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/number-stepper.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x160" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x250" 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">
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">
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>
@@ -17,6 +17,7 @@ function Sheet(){
17
17
  <div><span className="lbl">At minimum (− disabled)</span><NumberStepper value={0} min={0}/></div>
18
18
  <div><span className="lbl">At maximum (+ disabled)</span><NumberStepper value={500} max={500}/></div>
19
19
  <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>
20
21
  </div>;
21
22
  }
22
23
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/pagination.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x240" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
1
+ <!-- @dsCard group="Components" viewport="700x490" 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">
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">
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>
@@ -18,6 +18,7 @@ function Sheet(){
18
18
  <div><span className="lbl">Small set — no range label</span><Pagination page={p2} pageCount={3} onChange={setP2}/></div>
19
19
  <div><span className="lbl">First page — Prev disabled</span><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
20
20
  <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>
21
22
  </div>;
22
23
  }
23
24
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/people.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x210" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
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">
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">
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>
@@ -19,7 +19,7 @@ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1fr
19
19
  </div>
20
20
  <div className="row"><span className="lbl">Initials from name</span>
21
21
  <div style={{display:"flex",gap:8}}>
22
- <Avatar name="Felix Chen" size={32}/><Avatar name="Mia Park" size={32}/><Avatar name="财务分析" size={32}/><Avatar name="Ana Diaz" size={32}/>
22
+ <Avatar name="Felix Chen" size={32}/><Avatar name="Mia Park" size={32}/><Avatar name="Omar Haddad" size={32}/><Avatar name="Ana Diaz" size={32}/>
23
23
  </div>
24
24
  </div>
25
25
  <div className="row"><span className="lbl">With real image (src)</span>
package/components/_cards/pipeline-node.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x1200" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states" -->
1
+ <!-- @dsCard group="Components" viewport="700x1550" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop 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">
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">
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/pipeline-palette.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Components" viewport="700x580" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
1
+ <!-- @dsCard group="Components" viewport="700x690" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
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">
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>
@@ -28,7 +28,7 @@ function Sheet(){
28
28
  <PaletteItem icon="split" hue="transform" label="Field Split"/>
29
29
  <PaletteItem icon="merge" hue="merge" label="Concat Merge"/>
30
30
  </div>
31
- <div className="hint">Grid tile: 67.7px column, 40px tinted <code>IconTile</code>, two-line 10px label, <code>cursor: grab</code>.</div>
31
+ <div className="hint">Grid tile: 67.7px column, 40px tinted <code>IconTile</code>, two-line 12px label, <code>cursor: grab</code>.</div>
32
32
  <span className="lbl" style={{paddingTop:22}}>List rows</span>
33
33
  <div style={{maxWidth:230}}>
34
34
  <PaletteListItem icon="text-search" hue="join" label="Lookup Data"/>
@@ -36,7 +36,7 @@ function Sheet(){
36
36
  <PaletteListItem icon="code" hue="transform" label="JS Enhanced Processing"/>
37
37
  <PaletteListItem icon="database" hue="merge" label="Group Calculation"/>
38
38
  </div>
39
- <div className="hint">List row: 14px hued glyph + 13px label, indented 20px under its category header.</div>
39
+ <div className="hint">List row: 14px hued glyph + 14px label, indented 20px under its category header.</div>
40
40
  <span className="lbl" style={{paddingTop:22}}>Catalog</span>
41
41
  <div className="hint" style={{paddingTop:0}}>
42
42
  <code>PIPELINE_CATALOG</code> ships the real inventory — {PIPELINE_CATALOG.length} categories, {PIPELINE_CATALOG.reduce((n,c)=>n+c.items.length,0)} node types. Pass your own <code>catalog</code> to scope the panel to one workspace.