@keyfunc/keybricks-ds 2.1.1 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (240) hide show
  1. package/DEPLOY.md +13 -4
  2. package/DESIGN.md +104 -19
  3. package/INTEGRATION.md +75 -20
  4. package/SKILL.md +11 -11
  5. package/_adherence.oxlintrc.json +28 -11
  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/components/_cards/accordion.card.html +1 -1
  10. package/components/_cards/action-chip.card.html +11 -14
  11. package/components/_cards/activity.card.html +2 -2
  12. package/components/_cards/alert.card.html +2 -2
  13. package/components/_cards/app-chrome.card.html +1 -1
  14. package/components/_cards/banner.card.html +1 -1
  15. package/components/_cards/breadcrumb.card.html +4 -4
  16. package/components/_cards/button-1-base.card.html +23 -26
  17. package/components/_cards/button-2-states.card.html +14 -12
  18. package/components/_cards/button-3-sizes-icons.card.html +20 -19
  19. package/components/_cards/button-4-group.card.html +14 -31
  20. package/components/_cards/canvas-zoom-controls.card.html +1 -1
  21. package/components/_cards/cards-indicators.card.html +1 -1
  22. package/components/_cards/charts-1-sparkline.card.html +4 -4
  23. package/components/_cards/charts-10-gauge.card.html +2 -2
  24. package/components/_cards/charts-11-funnel.card.html +2 -2
  25. package/components/_cards/charts-12-treemap.card.html +2 -2
  26. package/components/_cards/charts-14-radar.card.html +3 -3
  27. package/components/_cards/charts-15-distribution.card.html +2 -2
  28. package/components/_cards/charts-16-pareto.card.html +2 -2
  29. package/components/_cards/charts-17-candlestick.card.html +2 -2
  30. package/components/_cards/charts-18-sankey.card.html +2 -2
  31. package/components/_cards/charts-19-chord.card.html +2 -2
  32. package/components/_cards/charts-2-line.card.html +3 -3
  33. package/components/_cards/charts-20-sunburst.card.html +2 -2
  34. package/components/_cards/charts-21-worldmap.card.html +3 -3
  35. package/components/_cards/charts-22-gantt.card.html +2 -2
  36. package/components/_cards/charts-23-bar3d.card.html +2 -2
  37. package/components/_cards/charts-24-pie3d.card.html +2 -2
  38. package/components/_cards/charts-25-surface3d.card.html +2 -2
  39. package/components/_cards/charts-26-scatter3d.card.html +2 -2
  40. package/components/_cards/charts-27-ribbon3d.card.html +2 -2
  41. package/components/_cards/charts-3-bar.card.html +6 -6
  42. package/components/_cards/charts-4-barlist.card.html +2 -2
  43. package/components/_cards/charts-5-donut.card.html +2 -2
  44. package/components/_cards/charts-6-scatter.card.html +2 -2
  45. package/components/_cards/charts-7-heatmap.card.html +2 -2
  46. package/components/_cards/charts-8-waterfall.card.html +2 -2
  47. package/components/_cards/charts-9-bullet.card.html +3 -3
  48. package/components/_cards/charts-99-fullpage.card.html +1 -1
  49. package/components/_cards/checkbox.card.html +6 -3
  50. package/components/_cards/codeblock.card.html +2 -2
  51. package/components/_cards/combobox.card.html +6 -4
  52. package/components/_cards/context-menu.card.html +6 -4
  53. package/components/_cards/date-picker.card.html +8 -5
  54. package/components/_cards/diffvalue.card.html +2 -2
  55. package/components/_cards/divider.card.html +2 -2
  56. package/components/_cards/drawer.card.html +3 -3
  57. package/components/_cards/dropdown-menu.card.html +2 -2
  58. package/components/_cards/dropzone.card.html +5 -3
  59. package/components/_cards/empty-state.card.html +2 -2
  60. package/components/_cards/filter-bar.card.html +1 -1
  61. package/components/_cards/icon-button.card.html +14 -14
  62. package/components/_cards/icons-1-core.card.html +4 -4
  63. package/components/_cards/icons-2-feather.card.html +4 -4
  64. package/components/_cards/icons-3-unicons.card.html +3 -3
  65. package/components/_cards/input.card.html +5 -5
  66. package/components/_cards/kbd.card.html +1 -1
  67. package/components/_cards/keyvalue.card.html +1 -1
  68. package/components/_cards/listrow.card.html +1 -1
  69. package/components/_cards/loading.card.html +2 -2
  70. package/components/_cards/log-viewer.card.html +2 -2
  71. package/components/_cards/modal.card.html +1 -1
  72. package/components/_cards/multi-select.card.html +6 -4
  73. package/components/_cards/number-stepper.card.html +9 -6
  74. package/components/_cards/pagination.card.html +6 -4
  75. package/components/_cards/people.card.html +2 -2
  76. package/components/_cards/pipeline-node.card.html +8 -8
  77. package/components/_cards/pipeline-palette.card.html +2 -2
  78. package/components/_cards/radio.card.html +12 -7
  79. package/components/_cards/search.card.html +6 -6
  80. package/components/_cards/segmented-control.card.html +11 -10
  81. package/components/_cards/select.card.html +7 -3
  82. package/components/_cards/slider.card.html +2 -2
  83. package/components/_cards/smart-table.card.html +3 -3
  84. package/components/_cards/spreadsheet.card.html +2 -2
  85. package/components/_cards/stepper.card.html +2 -2
  86. package/components/_cards/table.card.html +79 -17
  87. package/components/_cards/tabs.card.html +6 -4
  88. package/components/_cards/tag.card.html +6 -6
  89. package/components/_cards/textarea.card.html +1 -1
  90. package/components/_cards/timeline.card.html +3 -3
  91. package/components/_cards/toast.card.html +7 -5
  92. package/components/_cards/toggles.card.html +14 -9
  93. package/components/_cards/tooltip.card.html +3 -3
  94. package/components/_cards/tree.card.html +2 -2
  95. package/components/_shared/card-kit.css +25 -0
  96. package/components/_shared/card-kit.js +50 -0
  97. package/components/_shared/src-buttons.js +1 -1
  98. package/components/_shared/src-charts.js +1 -1
  99. package/components/_shared/src-data.js +1 -1
  100. package/components/_shared/src-display.js +1 -1
  101. package/components/_shared/src-feedback.js +1 -1
  102. package/components/_shared/src-forms.js +1 -1
  103. package/components/_shared/src-icons.js +1 -1
  104. package/components/_shared/src-navigation.js +1 -1
  105. package/components/_shared/src-tabs.js +1 -1
  106. package/components/_shared/view-source.js +3 -3
  107. package/components/_vue/index.mjs +7 -0
  108. package/components/buttons/ActionChip.d.ts +1 -1
  109. package/components/buttons/Button.d.ts +1 -1
  110. package/components/buttons/Button.jsx +1 -1
  111. package/components/buttons/Button.vue +1 -1
  112. package/components/buttons/IconButton.d.ts +1 -1
  113. package/components/buttons/IconButton.jsx +5 -3
  114. package/components/buttons/IconButton.vue +3 -2
  115. package/components/charts/Bar3D.jsx +1 -1
  116. package/components/charts/Bar3D.vue +2 -2
  117. package/components/charts/BarChart.jsx +3 -3
  118. package/components/charts/BarChart.vue +6 -6
  119. package/components/charts/BarList.jsx +3 -3
  120. package/components/charts/BarList.vue +3 -3
  121. package/components/charts/BoxPlot.vue +2 -2
  122. package/components/charts/BulletChart.jsx +5 -5
  123. package/components/charts/BulletChart.vue +5 -5
  124. package/components/charts/CandlestickChart.vue +3 -3
  125. package/components/charts/ChartKit.jsx +4 -3
  126. package/components/charts/ChartTooltip.vue +1 -1
  127. package/components/charts/ChordChart.jsx +1 -1
  128. package/components/charts/ChordChart.vue +2 -2
  129. package/components/charts/DonutChart.jsx +1 -1
  130. package/components/charts/DonutChart.vue +2 -2
  131. package/components/charts/FunnelChart.jsx +3 -3
  132. package/components/charts/FunnelChart.vue +4 -4
  133. package/components/charts/GanttChart.vue +1 -1
  134. package/components/charts/GaugeChart.jsx +2 -2
  135. package/components/charts/GaugeChart.vue +2 -2
  136. package/components/charts/HeatmapChart.jsx +1 -1
  137. package/components/charts/HeatmapChart.vue +1 -1
  138. package/components/charts/Histogram.jsx +2 -2
  139. package/components/charts/Histogram.vue +4 -4
  140. package/components/charts/LineChart.vue +2 -2
  141. package/components/charts/ParetoChart.jsx +1 -1
  142. package/components/charts/ParetoChart.vue +3 -3
  143. package/components/charts/Pie3D.jsx +1 -1
  144. package/components/charts/Pie3D.vue +2 -2
  145. package/components/charts/PlotGrid.vue +1 -1
  146. package/components/charts/RadarChart.vue +1 -1
  147. package/components/charts/Ribbon3D.jsx +1 -1
  148. package/components/charts/Ribbon3D.vue +2 -2
  149. package/components/charts/SankeyChart.jsx +1 -1
  150. package/components/charts/SankeyChart.vue +2 -2
  151. package/components/charts/Scatter3D.vue +1 -1
  152. package/components/charts/ScatterChart.jsx +1 -1
  153. package/components/charts/ScatterChart.vue +3 -3
  154. package/components/charts/Sparkline.jsx +1 -1
  155. package/components/charts/Sparkline.vue +1 -1
  156. package/components/charts/SunburstChart.vue +1 -1
  157. package/components/charts/Surface3D.jsx +1 -1
  158. package/components/charts/Surface3D.vue +2 -2
  159. package/components/charts/TreemapChart.jsx +1 -1
  160. package/components/charts/TreemapChart.vue +2 -2
  161. package/components/charts/WaterfallChart.jsx +1 -1
  162. package/components/charts/WaterfallChart.vue +5 -4
  163. package/components/charts/WorldMap.jsx +4 -4
  164. package/components/charts/WorldMap.vue +5 -5
  165. package/components/data/DiffValue.d.ts +1 -0
  166. package/components/data/DiffValue.jsx +1 -1
  167. package/components/data/DiffValue.vue +1 -1
  168. package/components/data/KeyValue.d.ts +1 -1
  169. package/components/data/KeyValue.jsx +2 -2
  170. package/components/data/KeyValue.vue +2 -2
  171. package/components/data/Pagination.jsx +2 -2
  172. package/components/data/Pagination.vue +1 -1
  173. package/components/data/SmartTable.jsx +5 -5
  174. package/components/data/SmartTable.vue +6 -6
  175. package/components/data/Spreadsheet.jsx +5 -5
  176. package/components/data/Spreadsheet.vue +6 -6
  177. package/components/data/Table.d.ts +58 -4
  178. package/components/data/Table.jsx +153 -15
  179. package/components/data/Table.vue +105 -15
  180. package/components/data/data.prompt.md +1 -1
  181. package/components/display/Avatar.jsx +2 -2
  182. package/components/display/Avatar.vue +1 -1
  183. package/components/display/AvatarGroup.vue +1 -1
  184. package/components/display/Badge.d.ts +4 -1
  185. package/components/display/Badge.jsx +10 -5
  186. package/components/display/IconTile.vue +9 -4
  187. package/components/display/Kbd.d.ts +1 -1
  188. package/components/display/Kbd.jsx +1 -1
  189. package/components/display/Kbd.vue +1 -1
  190. package/components/feedback/ActivityItem.jsx +1 -1
  191. package/components/feedback/Modal.jsx +1 -1
  192. package/components/feedback/Modal.vue +1 -1
  193. package/components/feedback/Timeline.vue +2 -2
  194. package/components/forms/Combobox.d.ts +1 -1
  195. package/components/forms/DatePicker.d.ts +1 -1
  196. package/components/forms/Input.d.ts +1 -1
  197. package/components/forms/Input.jsx +2 -2
  198. package/components/forms/Input.vue +1 -1
  199. package/components/forms/MultiSelect.d.ts +1 -1
  200. package/components/forms/NumberStepper.d.ts +1 -1
  201. package/components/forms/SearchInput.d.ts +1 -1
  202. package/components/forms/Select.d.ts +1 -1
  203. package/components/forms/Select.jsx +1 -1
  204. package/components/forms/Select.vue +1 -1
  205. package/components/forms/Slider.jsx +1 -1
  206. package/components/forms/Slider.vue +1 -1
  207. package/components/forms/Switch.jsx +3 -3
  208. package/components/forms/Switch.vue +11 -8
  209. package/components/forms/Textarea.vue +1 -1
  210. package/components/forms/input-base.js +1 -1
  211. package/components/icons/Icon.jsx +17 -1
  212. package/components/icons/Icon.prompt.md +2 -0
  213. package/components/icons/Icon.vue +1 -1
  214. package/components/icons/icon-paths.js +15 -0
  215. package/components/index.js +1 -1
  216. package/components/navigation/Breadcrumb.jsx +3 -7
  217. package/components/navigation/Breadcrumb.vue +2 -8
  218. package/components/navigation/Sidebar.jsx +3 -22
  219. package/components/navigation/Sidebar.vue +2 -7
  220. package/components/navigation/Tree.jsx +1 -1
  221. package/components/navigation/Tree.vue +9 -4
  222. package/components/navigation/nav-model.js +23 -0
  223. package/components/navigation/theme-store.js +9 -0
  224. package/components/tabs/PillTabs.vue +1 -1
  225. package/components/tabs/SegmentedControl.d.ts +1 -1
  226. package/components/tabs/SegmentedControl.jsx +1 -1
  227. package/components/tabs/SegmentedControl.vue +1 -1
  228. package/components/tabs/Tabs.jsx +1 -1
  229. package/components/tabs/ViewToggle.d.ts +1 -1
  230. package/package.json +2 -2
  231. package/readme.md +6 -5
  232. package/readme.zh-CN.md +6 -5
  233. package/tokens/alpha.css +3 -1
  234. package/tokens/colors.css +1 -1
  235. package/tokens/dark.css +1 -1
  236. package/tokens/layout.css +7 -5
  237. package/tokens/tokens.d.ts +22 -0
  238. package/tokens/tokens.js +39 -6
  239. package/tokens/tokens.json +90 -11
  240. package/tokens/typography.css +26 -9
package/components/_cards/breadcrumb.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x468" name="Breadcrumb" subtitle="Path trail — hover darkens · long trails collapse to an ellipsis dropdown" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Breadcrumb } = window.KeybricksDesignSystem_71231a;
@@ -14,9 +14,9 @@ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:1
14
14
  <div><span className="lbl">Two levels</span><Breadcrumb items={["Documents","Budget 2026"]}/></div>
15
15
  <div><span className="lbl">Three levels</span><Breadcrumb items={["Management","System Migration","Import"]}/></div>
16
16
  <div><span className="lbl">Four levels — clickable trail (hover any crumb but the last)</span><Breadcrumb items={["Documents","Budget 2026","Monthly Journal","August"]} onSelect={()=>{}}/></div>
17
- <div><span className="lbl">Hover state, forced on the first crumb</span><Breadcrumb items={["Documents","Budget 2026","August"]} hoveredIndex={0} onSelect={()=>{}}/><span style={{fontSize:11,color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Clickable crumbs move from <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>--text-secondary</code> to <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>--text-heading</code>; the last crumb never reacts.</span></div>
17
+ <div><span className="lbl">Hover state, forced on the first crumb</span><Breadcrumb items={["Documents","Budget 2026","August"]} hoveredIndex={0} onSelect={()=>{}}/><span style={{fontSize:"var(--text-xs)",color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Clickable crumbs move from <code style={{fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)"}}>--text-secondary</code> to <code style={{fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)"}}>--text-heading</code>; the last crumb never reacts.</span></div>
18
18
  <div><span className="lbl">Seven levels — collapsed, click the … for the hidden ones</span><Breadcrumb items={["Documents","Finance","Budget 2026","Q3","Monthly Journal","August","Adjustments"]} onSelect={()=>{}}/></div>
19
- <div><span className="lbl">Same trail, collapse disabled (maxItems=0)</span><Breadcrumb items={["Documents","Finance","Budget 2026","Q3","Monthly Journal","August","Adjustments"]} maxItems={0} onSelect={()=>{}}/><span style={{fontSize:11,color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Past <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>maxItems</code> (default 4) the trail keeps the first crumb and the last two, and the levels between them move into a dropdown on the ellipsis — indented there to show their depth.</span></div>
19
+ <div><span className="lbl">Same trail, collapse disabled (maxItems=0)</span><Breadcrumb items={["Documents","Finance","Budget 2026","Q3","Monthly Journal","August","Adjustments"]} maxItems={0} onSelect={()=>{}}/><span style={{fontSize:"var(--text-xs)",color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Past <code style={{fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)"}}>maxItems</code> (default 4) the trail keeps the first crumb and the last two, and the levels between them move into a dropdown on the ellipsis — indented there to show their depth.</span></div>
20
20
  </div>;}
21
21
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
22
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Breadcrumb.jsx","path":"../navigation/Breadcrumb.jsx"}]); }, 0);
package/components/_cards/button-1-base.card.html CHANGED
@@ -1,38 +1,35 @@
1
- <!-- @dsCard group="Components" viewport="1000x700" name="Button" subtitle="Solid · soft/outline · ghost · text-only · disabled · loading" -->
1
+ <!-- @dsCard group="Components" viewport="700x690" name="Button" subtitle="Solid · soft/outline · ghost · text-only · disabled · loading" -->
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">Solid</div>
16
- <div className="row"><span className="lbl">primary</span><Button icon="send">Submit</Button></div>
17
- <div className="row"><span className="lbl">dark</span><Button variant="dark" icon="sparkles">AI Assistant</Button></div>
18
- <div className="row"><span className="lbl">danger</span><Button variant="danger" icon="trash-2">Delete Node</Button></div>
19
- </div>
20
- <div className="section">
21
- <div className="sh">Soft &amp; Outline</div>
22
- <div className="row"><span className="lbl">outline</span><Button variant="outline" icon="settings-2">Custom Parameters</Button></div>
23
- <div className="row"><span className="lbl">primary-soft</span><Button variant="primary-soft" icon="eye">Data Preview</Button></div>
24
- <div className="row"><span className="lbl">danger-soft</span><Button variant="danger-soft" icon="x">Remove</Button></div>
25
- </div>
26
- <div className="section">
27
- <div className="sh">Ghost &amp; Text-only</div>
28
- <div className="row"><span className="lbl">ghost</span><Button variant="ghost" icon="play">Run Test</Button></div>
29
- <div className="row"><span className="lbl">text</span><Button variant="text">Cancel</Button><Button variant="text">View all</Button><Button variant="text" icon="chevron-right" iconPosition="right">Learn more</Button></div>
30
- </div>
31
- <div className="section">
32
- <div className="sh">Disabled &amp; Loading</div>
33
- <div className="row"><span className="lbl">disabled</span><Button disabled>Submit</Button><Button variant="outline" disabled icon="settings-2">Custom Parameters</Button><Button variant="danger" disabled icon="trash-2">Delete Node</Button></div>
34
- <div className="row"><span className="lbl">loading</span><Button loading>Submit</Button><Button variant="outline" loading>Saving…</Button><Button variant="primary">Run Test</Button></div>
35
- </div>
13
+ const { KBSec: Sec, KBRow: Row, KBTiers: Tiers } = window;
14
+ function Sheet(){return <div className="kb-sheet">
15
+ <Sec title="Solid">
16
+ <Row k="primary"><Button icon="send">Submit</Button></Row>
17
+ <Row k="dark"><Button variant="dark" icon="sparkles">AI Assistant</Button></Row>
18
+ <Row k="danger"><Button variant="danger" icon="trash-2">Delete Node</Button></Row>
19
+ </Sec>
20
+ <Sec title="Soft & outline">
21
+ <Row k="outline"><Button variant="outline" icon="settings-2">Custom Parameters</Button></Row>
22
+ <Row k="primary-soft"><Button variant="primary-soft" icon="eye">Data Preview</Button></Row>
23
+ <Row k="danger-soft"><Button variant="danger-soft" icon="x">Remove</Button></Row>
24
+ </Sec>
25
+ <Sec title="Ghost & text-only">
26
+ <Row k="ghost"><Button variant="ghost" icon="play">Run Test</Button></Row>
27
+ <Row k="text"><Button variant="text">Cancel</Button><Button variant="text">View all</Button><Button variant="text" icon="chevron-right" iconPosition="right">Learn more</Button></Row>
28
+ </Sec>
29
+ <Sec title="Disabled & loading">
30
+ <Row k="disabled"><Button disabled>Submit</Button><Button variant="outline" disabled icon="settings-2">Custom Parameters</Button><Button variant="danger" disabled icon="trash-2">Delete Node</Button></Row>
31
+ <Row k="loading"><Button loading>Submit</Button><Button variant="outline" loading>Saving…</Button></Row>
32
+ </Sec>
36
33
  </div>;}
37
34
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
38
35
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
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;