@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/button-2-states.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="900x780" name="Button Interaction States" subtitle="Rest · hover · press · focus · loading · disabled — every variant, live and forced" -->
1
+ <!-- @dsCard group="Components" viewport="1000x810" name="Button Interaction States" subtitle="Rest · hover · press · focus · loading · disabled — every variant, live and forced" -->
2
2
  <!DOCTYPE html>
3
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>
@@ -6,19 +6,20 @@
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:104px repeat(6,1fr);gap:8px 10px;align-items:center}.ch{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding-bottom:2px}.rh{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono)}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding:18px 0 10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.note{font-size:11px;color:var(--text-secondary);padding-top:14px;line-height:1.6}.note code{font-family:var(--font-mono);font-size:10.5px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <link rel="stylesheet" href="../_shared/card-kit.css"><style>.st{grid-template-columns:120px repeat(6,max-content)}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Button, IconButton } = window.KeybricksDesignSystem_71231a;
13
14
  const VARIANTS=[["primary","Submit"],["dark","AI Assistant"],["outline","Cancel"],["primary-soft","Data Preview"],["danger","Delete"],["danger-soft","Remove"],["ghost","Details"],["text","View all"]];
14
15
  const HOVER={primary:"var(--action-primary-hover)",dark:"var(--action-dark-hover)",outline:"var(--bg-hover)",ghost:"var(--bg-hover)","primary-soft":"var(--soft-hover)",danger:"var(--danger-text)","danger-soft":"var(--danger-bg)"};
15
16
  const hoverStyle=(v)=>v==="text"?{color:"var(--text-heading)",textDecoration:"underline"}:{background:HOVER[v]};
16
- function Sheet(){return <div>
17
- <div className="grid">
17
+ function Sheet(){return <div className="kb-sheet">
18
+ <section className="kb-sec"><h3 className="kb-h">Button — six states per variant</h3><div className="kb-grid st">
18
19
  <span></span>
19
- {["Rest","Hover","Press","Focus","Loading","Disabled"].map(h=><span key={h} className="ch">{h}</span>)}
20
+ {["Rest","Hover","Press","Focus","Loading","Disabled"].map(h=><span key={h} className="kb-th">{h}</span>)}
20
21
  {VARIANTS.map(([v,l])=><React.Fragment key={v}>
21
- <span className="rh">{v}</span>
22
+ <span className="kb-k">{v}</span>
22
23
  <span><Button variant={v}>{l}</Button></span>
23
24
  <span><Button variant={v} style={hoverStyle(v)}>{l}</Button></span>
24
25
  <span><Button variant={v} pressed>{l}</Button></span>
@@ -27,18 +28,18 @@ function Sheet(){return <div>
27
28
  <span><Button variant={v} disabled>{l}</Button></span>
28
29
  </React.Fragment>)}
29
30
  </div>
30
- <div className="sh">Icon button — same six states</div>
31
- <div className="grid">
31
+ </section>
32
+ <section className="kb-sec"><h3 className="kb-h">Icon button — same six states</h3><div className="kb-grid st">
32
33
  <span></span>
33
- {["Rest","Hover","Press","Focus","Active (on)","Disabled"].map(h=><span key={h} className="ch">{h}</span>)}
34
- <span className="rh">default</span>
34
+ {["Rest","Hover","Press","Focus","Active (on)","Disabled"].map(h=><span key={h} className="kb-th">{h}</span>)}
35
+ <span className="kb-k">default</span>
35
36
  <span><IconButton icon="ellipsis" label="More"/></span>
36
37
  <span><IconButton icon="ellipsis" label="More" style={{background:"var(--bg-hover)"}}/></span>
37
38
  <span><IconButton icon="ellipsis" label="More" pressed/></span>
38
39
  <span><IconButton icon="ellipsis" label="More" focused/></span>
39
40
  <span><IconButton icon="ellipsis" label="More" active/></span>
40
41
  <span><IconButton icon="ellipsis" label="More" disabled/></span>
41
- <span className="rh">danger</span>
42
+ <span className="kb-k">danger</span>
42
43
  <span><IconButton icon="trash-2" danger label="Delete"/></span>
43
44
  <span><IconButton icon="trash-2" danger label="Delete" style={{background:"var(--danger-bg)"}}/></span>
44
45
  <span><IconButton icon="trash-2" danger label="Delete" pressed/></span>
@@ -46,7 +47,8 @@ function Sheet(){return <div>
46
47
  <span><IconButton icon="trash-2" danger label="Delete" active/></span>
47
48
  <span><IconButton icon="trash-2" danger label="Delete" disabled/></span>
48
49
  </div>
49
- <div className="note">
50
+ </section>
51
+ <div className="kb-note">
50
52
  <strong>Rules.</strong> Hover moves the fill one step darker (<code>--action-primary-hover</code>, <code>--bg-hover</code>, <code>--soft-hover</code>); press moves it a second step (<code>--action-primary-active</code>, <code>--bg-press</code>, <code>--soft-active</code>, <code>--danger-active</code>) — no scale, no shadow shift. Keyboard focus adds the two-ring halo <code>--ring-focus</code> and appears only on <code>:focus-visible</code>, never on mouse click. <code>text</code> variant has no fill: it underlines and darkens on hover, and drops to 70% opacity on press. Loading keeps the button’s width and swaps the icon for a spinner; disabled is 55% opacity with the default cursor. The <code>pressed</code> / <code>focused</code> props force those states for specimens like this one.
51
53
  <br/><br/><strong>Every other control</strong> — nav rows, tree items, menu items, chips, tabs, list rows, option rows, palette tiles — gets press and keyboard focus from the global layer in <code>tokens/interaction.css</code> (<code>filter:var(--press-filter)</code> on <code>:active</code>, a 2px <code>--focus-border</code> outline on <code>:focus-visible</code>), so no component re-implements them. Button and IconButton carry <code>data-press="own"</code> to opt out, since their press colors are explicit tokens.
52
54
  </div>
package/components/_cards/button-3-sizes-icons.card.html CHANGED
@@ -1,31 +1,32 @@
1
- <!-- @dsCard group="Components" viewport="700x460" name="Button Sizes & Icons" subtitle="sm/md/lg · leading/trailing icon · icon-only · full-width" -->
1
+ <!-- @dsCard group="Components" viewport="700x720" name="Button Sizes & Icons" subtitle="sm 28 · md 32 · lg 40, Latin and CJK · icon placement · full width" -->
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}.section{margin-bottom:22px}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.row:last-child{margin-bottom:0}.lbl{width:76px;flex-shrink:0;font-size:11px;color:var(--text-secondary)}</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 { Button } = window.KeybricksDesignSystem_71231a;
13
- function Sheet(){return <div>
14
- <div className="section">
15
- <div className="sh">Sizes</div>
16
- <div className="row"><span className="lbl">sm / md / lg</span><Button size="sm">Save Settings</Button><Button size="md">Submit</Button><Button size="lg">Continue to Confirmation</Button><Button size="lg" variant="text">Back</Button></div>
17
- <div className="row"><span className="lbl">all sm</span><Button size="sm">Submit</Button><Button size="sm" variant="dark" icon="sparkles">AI Assistant</Button><Button size="sm" variant="outline">Custom Parameters</Button><Button size="sm" variant="ghost" icon="play">Run Test</Button><Button size="sm" variant="danger" icon="trash-2">Delete</Button><Button size="sm" variant="text">Cancel</Button></div>
18
- </div>
19
- <div className="section">
20
- <div className="sh">Icon placement</div>
21
- <div className="row"><span className="lbl">leading</span><Button icon="download" iconPosition="left">Export Log</Button></div>
22
- <div className="row"><span className="lbl">trailing</span><Button icon="chevron-down" iconPosition="right" variant="outline">Show</Button></div>
23
- <div className="row"><span className="lbl">icon-only</span><Button icon="bell" iconOnly label="Notifications" variant="outline"/><Button icon="ellipsis" iconOnly label="More" variant="ghost"/><Button icon="trash-2" iconOnly label="Delete" variant="danger"/></div>
24
- </div>
25
- <div className="section">
26
- <div className="sh">Full width</div>
27
- <div className="row"><div style={{width:280}}><Button fullWidth icon="upload">Upload Configuration File</Button></div></div>
28
- </div>
13
+ const { KBSec: Sec, KBRow: Row, KBTiers: Tiers } = window;
14
+ const ALL = [["primary","Submit","提交"],["dark","AI Assistant","AI 助手","sparkles"],["outline","Custom Parameters","自定义参数"],["ghost","Run Test","运行测试","play"],["danger","Delete","删除","trash-2"],["text","Cancel","取消"]];
15
+ function Sheet(){return <div className="kb-sheet">
16
+ <Sec title="Size tiers — set data-size on the region; controls inherit it" note="CJK text is one step larger than Latin at sm (13px, regular weight) so square glyphs stay legible on 1x screens; md and lg are 14px in every language.">
17
+ <Tiers render={(t,l)=><Button icon="save">{l==="en"?"Save Settings":"保存设置"}</Button>}/>
18
+ </Sec>
19
+ <Sec title="Every variant at sm">
20
+ {[["Latin","en"],["CJK · 中文","zh-CN"]].map(([k,lang])=><Row key={lang} k={k}><div data-size="sm" lang={lang} style={{display:"flex",flexWrap:"wrap",gap:8,alignItems:"center"}}>{ALL.map(([v,en,zh,ic])=><Button key={v} variant={v} icon={ic}>{lang==="en"?en:zh}</Button>)}</div></Row>)}
21
+ </Sec>
22
+ <Sec title="Icon placement">
23
+ <Row k="leading"><Button icon="download" iconPosition="left">Export Log</Button></Row>
24
+ <Row k="trailing"><Button icon="chevron-down" iconPosition="right" variant="outline">Show</Button></Row>
25
+ <Row k="icon-only"><Button icon="bell" iconOnly label="Notifications" variant="outline"/><Button icon="ellipsis" iconOnly label="More" variant="ghost"/><Button icon="trash-2" iconOnly label="Delete" variant="danger"/></Row>
26
+ </Sec>
27
+ <Sec title="Full width">
28
+ <Row k="fullWidth"><div style={{width:280}}><Button fullWidth icon="upload">Upload Configuration File</Button></div></Row>
29
+ </Sec>
29
30
  </div>;}
30
31
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
32
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
package/components/_cards/button-4-group.card.html CHANGED
@@ -1,45 +1,28 @@
1
- <!-- @dsCard group="Components" viewport="700x420" name="Button Group" subtitle="Segmented group · split button · shortcut hint · badge" -->
1
+ <!-- @dsCard group="Components" viewport="700x490" name="Button Group" subtitle="Segmented group · split button · shortcut hint · badge" -->
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}.section{margin-bottom:22px}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.row:last-child{margin-bottom:0}.lbl{width:96px;flex-shrink:0;font-size:11px;color:var(--text-secondary)}</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 { Button, ButtonGroup, IconButton, Kbd, StatusBadge } = window.KeybricksDesignSystem_71231a;
13
+ const { KBSec: Sec, KBRow: Row, KBTiers: Tiers } = window;
13
14
  function Sheet(){
14
15
  const [range,setRange]=React.useState("Week");
15
- return <div>
16
- <div className="section">
17
- <div className="sh">Segmented group</div>
18
- <div className="row"><span className="lbl">Day / Week / Month</span>
19
- <ButtonGroup>
20
- <Button variant="outline" onClick={()=>setRange("Day")} style={range==="Day"?{background:"var(--bg-active)"}:null}>Day</Button>
21
- <Button variant="outline" onClick={()=>setRange("Week")} style={range==="Week"?{background:"var(--bg-active)"}:null}>Week</Button>
22
- <Button variant="outline" onClick={()=>setRange("Month")} style={range==="Month"?{background:"var(--bg-active)"}:null}>Month</Button>
23
- </ButtonGroup>
24
- </div>
25
- </div>
26
- <div className="section">
27
- <div className="sh">Split button</div>
28
- <div className="row"><span className="lbl">main + attached</span>
29
- <ButtonGroup>
30
- <Button icon="download">Export</Button>
31
- <Button iconOnly label="More export options" icon="chevron-down" style={{borderLeft:"1px solid rgba(255,255,255,.3)"}}/>
32
- </ButtonGroup>
33
- </div>
34
- </div>
35
- <div className="section">
36
- <div className="sh">Shortcut hint</div>
37
- <div className="row"><span className="lbl">inline Kbd</span><Button variant="outline">Run Test<Kbd keys={["⌘","⏎"]} style={{marginLeft:8}}/></Button></div>
38
- </div>
39
- <div className="section">
40
- <div className="sh">With badge</div>
41
- <div className="row"><span className="lbl">unread dot</span><span style={{position:"relative",display:"inline-flex"}}><IconButton icon="bell" label="Notifications"/><StatusBadge tone="danger" size={9} style={{position:"absolute",top:2,right:2}}/></span></div>
42
- </div>
16
+ return <div className="kb-sheet">
17
+ <Sec title="Patterns">
18
+ <Row k="segmented"><ButtonGroup>{["Day","Week","Month"].map(r=><Button key={r} variant="outline" onClick={()=>setRange(r)} style={range===r?{background:"var(--bg-active)"}:null}>{r}</Button>)}</ButtonGroup></Row>
19
+ <Row k="split"><ButtonGroup><Button icon="download">Export</Button><Button iconOnly label="More export options" icon="chevron-down" style={{borderLeft:"1px solid rgba(255,255,255,.3)"}}/></ButtonGroup></Row>
20
+ <Row k="shortcut"><Button variant="outline">Run Test<Kbd keys={["⌘","⏎"]} style={{marginLeft:8}}/></Button></Row>
21
+ <Row k="badge"><span style={{position:"relative",display:"inline-flex"}}><IconButton icon="bell" label="Notifications"/><StatusBadge tone="danger" size={9} style={{position:"absolute",top:2,right:2}}/></span></Row>
22
+ </Sec>
23
+ <Sec title="Segmented group — size tiers">
24
+ <Tiers stack init={(l)=>l==="en"?"Week":"周"} render={(t,l,v,set)=><ButtonGroup>{(l==="en"?["Day","Week","Month"]:["日","周","月"]).map((r)=><Button key={r} variant="outline" onClick={()=>set(r)} style={v===r?{background:"var(--bg-active)"}:null}>{r}</Button>)}</ButtonGroup>}/>
25
+ </Sec>
43
26
  </div>;
44
27
  }
45
28
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/canvas-zoom-controls.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x180" name="Canvas Zoom Controls" subtitle="Pipeline canvas − / % / + / fit-to-view" -->
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/cards-indicators.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x450" name="Cards & Indicators" subtitle="Work in progress · Card · StatCard · Badge · IconTile · charts" -->
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/charts-1-sparkline.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x830" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Sparkline, Tag } = window.KeybricksDesignSystem_71231a;
@@ -27,7 +27,7 @@ function Sheet(){
27
27
  <div key={l} style={{display:"flex",alignItems:"center",gap:12,height:36,borderBottom:"1px solid var(--border-subtle)"}}>
28
28
  <span style={{fontSize:"var(--text-sm)",color:"var(--text-body)",width:130}}>{l}</span>
29
29
  <Sparkline values={v} labels={M} tone={t==="muted"?"muted":"auto"} width={130} height={22} strokeWidth={1.2}/>
30
- <span style={{marginLeft:"auto",fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)",color:t==="neg"?"var(--chart-neg)":t==="pos"?"var(--chart-pos)":"var(--text-muted)"}}>{d}</span>
30
+ <span style={{marginLeft:"auto",fontFamily:"var(--font-sans)",fontVariantNumeric:"tabular-nums",fontSize:"var(--text-xs)",color:t==="neg"?"var(--chart-neg)":t==="pos"?"var(--chart-pos)":"var(--text-muted)"}}>{d}</span>
31
31
  </div>))}
32
32
  </div>
33
33
  </div>
@@ -42,7 +42,7 @@ function Sheet(){
42
42
  {["linear","smooth","step"].map(cv=>(
43
43
  <span key={cv} style={{display:"inline-flex",alignItems:"center",gap:9}}>
44
44
  <Sparkline values={up} labels={M} curve={cv} mode="area" width={120} height={34}/>
45
- <code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>{cv}</code>
45
+ <code style={{fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)",color:"var(--text-secondary)"}}>{cv}</code>
46
46
  </span>
47
47
  ))}
48
48
  </div>
package/components/_cards/charts-10-gauge.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x310" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { GaugeChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-11-funnel.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x620" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { FunnelChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-12-treemap.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x450" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { TreemapChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-14-radar.card.html CHANGED
@@ -1,12 +1,12 @@
1
- <!-- @dsCard group="Charts" viewport="700x560" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
1
+ <!-- @dsCard group="Charts" viewport="700x490" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { RadarChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-15-distribution.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x760" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Histogram, BoxPlot } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-16-pareto.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x460" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { ParetoChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-17-candlestick.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x730" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { CandlestickChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-18-sankey.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x550" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { SankeyChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-19-chord.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x910" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { ChordChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-2-line.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x1370" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { LineChart } = window.KeybricksDesignSystem_71231a;
@@ -25,7 +25,7 @@ function Sheet(){
25
25
  <div className="row">
26
26
  {[["linear","Straight"],["smooth","Smooth"],["step","Step"]].map(([cv,label])=>(
27
27
  <div key={cv}>
28
- <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)",paddingBottom:6}}>{label} · <code>curve="{cv}"</code></div>
28
+ <div style={{fontFamily:"var(--font-sans)",fontVariantNumeric:"tabular-nums",fontSize:"var(--text-xs)",color:"var(--text-secondary)",paddingBottom:6}}>{label} · <code>curve="{cv}"</code></div>
29
29
  <LineChart width={200} height={130} area curve={cv} legend={false} xLabels={M.slice(0,8)}
30
30
  series={[{name:"Requests",values:[820,932,901,934,1290,1330,1320,1450]}]}/>
31
31
  </div>
package/components/_cards/charts-20-sunburst.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x540" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { SunburstChart } = window.KeybricksDesignSystem_71231a;
package/components/_cards/charts-21-worldmap.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x870" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
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/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/topojson-client@3.1.0/dist/topojson-client.min.js" integrity="sha384-Ukv1p/xTma6P4/2bY5KzWBw+ydSpXmhCMtyciIQVDJ1RmOxtCYNMF1uXT9T63H67" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -8,7 +8,7 @@
8
8
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
9
9
  <script src="../../_ds_bundle.js"></script>
10
10
  <script src="../_shared/view-source.js"></script>
11
- <style>body{margin:0;background:var(--bg-surface);padding:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
11
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
12
12
  <body><div id="root"></div>
13
13
  <script type="text/babel">
14
14
  const { WorldMap } = window.KeybricksDesignSystem_71231a;
@@ -20,7 +20,7 @@ function Sheet(){
20
20
  return <div>
21
21
  <div className="sec"><span className="lbl">Sequential — revenue by country, click one to select</span>
22
22
  <WorldMap width={650} height={330} unit="$K" values={REV} valueFormat={(v)=>"$"+v+"K"} onSelect={(c,v)=>setPicked(c+(v!=null?" · $"+v+"K":" · no data"))}/>
23
- <div style={{paddingTop:8,fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>{picked||"— click a country —"}</div>
23
+ <div style={{paddingTop:8,fontFamily:"var(--font-sans)",fontVariantNumeric:"tabular-nums",fontSize:"var(--text-xs)",color:"var(--text-secondary)"}}>{picked||"— click a country —"}</div>
24
24
  </div>
25
25
  <div className="sec"><span className="lbl">Diverging — growth vs. plan, red under / green over</span>
26
26
  <WorldMap width={650} height={230} scale="diverging" unit="%" values={VAR} valueFormat={(v)=>(v>=0?"+":"")+v.toFixed(1)+"%"}/>
package/components/_cards/charts-22-gantt.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Charts" viewport="700x590" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
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:18px;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:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { GanttChart } = window.KeybricksDesignSystem_71231a;