@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/diffvalue.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x220" name="Diff Value" subtitle="Before → after change display (config migration)" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.code{font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.code{font-family:var(--font-mono);font-size:var(--text-code);line-height:var(--leading-code);color:var(--text-primary);background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { DiffValue } = window.KeybricksDesignSystem_71231a;
package/components/_cards/divider.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x220" name="Divider" subtitle="Plain · labeled · vertical" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><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 { Divider, Button } = window.KeybricksDesignSystem_71231a;
package/components/_cards/drawer.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x540" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><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-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Drawer, Button, Field, Input, Select, KeyValueList, Divider } = window.KeybricksDesignSystem_71231a;
@@ -17,7 +17,7 @@ function Sheet(){
17
17
  <Drawer inline title="Reconciliation Rule" subtitle="RULE-2041 · Modified 2 hours ago" height={440}
18
18
  footer={<React.Fragment><Button variant="outline">Cancel</Button><Button>Save Rule</Button></React.Fragment>}>
19
19
  <div style={{display:"flex",flexDirection:"column",gap:14}}>
20
- <Field label="Rule name" required><Input value="Intercompany balance match" onChange={()=>{}}/></Field>
20
+ <Field label="Rule name" required><Input defaultValue="Intercompany balance match"/></Field>
21
21
  <Field label="Base currency"><Select options={["EUR – Euro","USD – US Dollar","GBP – Pound Sterling"]} value={v} onChange={setV}/></Field>
22
22
  <Divider label="Match summary"/>
23
23
  <KeyValueList rows={[{label:"Tolerance",value:"±0.5%",mono:true},{label:"Matched pairs",value:"1,204",mono:true},{label:"Open items",value:"37",mono:true},{label:"Last run",value:"Today 09:41"}]}/>
package/components/_cards/dropdown-menu.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x420" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Menu, Button, IconButton, Avatar } = window.KeybricksDesignSystem_71231a;
package/components/_cards/dropzone.card.html CHANGED
@@ -1,19 +1,21 @@
1
1
  <!-- @dsCard group="Components" viewport="924x588" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Dropzone } = window.KeybricksDesignSystem_71231a;
14
+ const { KBLive: Live } = window;
13
15
  function Sheet(){return <div className="g">
14
16
  <div><span className="lbl">Empty</span><Dropzone height={140}/></div>
15
17
  <div><span className="lbl">Drag over (drop a file to try)</span><Dropzone height={140} dragOver/></div>
16
- <div><span className="lbl">Uploaded</span><Dropzone height={140} file="migration-config.json" onRemove={()=>{}}/></div>
18
+ <div><span className="lbl">Uploaded</span><Live init="migration-config.json">{(v,set)=><Dropzone height={140} file={v || undefined} onRemove={()=>set(null)}/>}</Live></div>
17
19
  <div><span className="lbl">Error</span><Dropzone height={140} error="File must be under 5MB"/></div>
18
20
  <div><span className="lbl">Disabled</span><Dropzone height={140} disabled title="Upload unavailable" hint="Complete the previous step first"/></div>
19
21
  </div>;}
package/components/_cards/empty-state.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="924x580" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { EmptyState, Button, Card } = window.KeybricksDesignSystem_71231a;
package/components/_cards/filter-bar.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="1000x620" name="Filter Bar (List Report)" subtitle="Fiori-style filter bar composed with a table — Adapt Filters · Go" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/icon-button.card.html CHANGED
@@ -1,26 +1,26 @@
1
- <!-- @dsCard group="Components" viewport="700x220" name="Icon Button" subtitle="Sizes · active · muted · danger · loading · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:10px;align-items:center;margin-bottom:14px}.lbl{width:76px;flex-shrink:0;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { IconButton } = window.KeybricksDesignSystem_71231a;
13
- function Sheet(){return <div>
14
- <div className="row"><span className="lbl">Sizes</span>
15
- <IconButton icon="bell" size="lg" label="lg 36"/><IconButton icon="arrow-left" size="md" label="md 32"/><IconButton icon="list" size="sm" label="sm 24"/>
16
- </div>
17
- <div className="row"><span className="lbl">States</span>
18
- <IconButton icon="layout-grid" size="md" active label="Active"/>
19
- <IconButton icon="settings" size="md" muted label="Muted"/>
20
- <IconButton icon="trash-2" size="md" danger label="Delete"/>
21
- <IconButton icon="refresh-cw" size="md" loading label="Loading"/>
22
- <IconButton icon="trash-2" size="md" disabled label="Disabled"/>
23
- </div>
13
+ const { KBSec: Sec, KBRow: Row, KBTiers: Tiers } = window;
14
+ function Sheet(){return <div className="kb-sheet">
15
+ <Sec title="Size tiers — square at the control height, 14 / 16 / 16 icon">
16
+ <Tiers cjk={false} render={(t)=><><IconButton icon="bell" label="Notifications"/><IconButton icon="list" label="List view"/></>}/>
17
+ </Sec>
18
+ <Sec title="States">
19
+ <Row k="active"><IconButton icon="layout-grid" active label="Active"/></Row>
20
+ <Row k="muted"><IconButton icon="settings" muted label="Muted"/></Row>
21
+ <Row k="danger"><IconButton icon="trash-2" danger label="Delete"/></Row>
22
+ <Row k="loading / disabled"><IconButton icon="refresh-cw" loading label="Loading"/><IconButton icon="trash-2" disabled label="Disabled"/></Row>
23
+ </Sec>
24
24
  </div>;}
25
25
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
26
26
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"}]); }, 0);
package/components/_cards/icons-1-core.card.html CHANGED
@@ -1,6 +1,6 @@
1
- <!-- @dsCard group="Icons" viewport="700x590" name="Core Set" subtitle="The 70 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x980" name="Core Set" subtitle="The 83 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
@@ -31,14 +31,14 @@ function Sheet(){
31
31
  <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search the core set — try “delete”, “run”, “export”..." style={{flex:1}}/>
32
32
  <Tag tone="info">{shown.length} / {all.length}</Tag>
33
33
  </div>
34
- <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(74px,1fr))",gap:2,paddingTop:12}}>
34
+ <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(96px,1fr))",gap:2,paddingTop:12}}>
35
35
  {shown.map(function(i){
36
36
  return <button key={i.name} type="button" onClick={()=>grab(i.name)} title={i.name+" — "+i.tags.join(", ")}
37
37
  style={{display:"flex",flexDirection:"column",alignItems:"center",gap:6,padding:"10px 2px 8px",border:"1px solid transparent",borderRadius:8,background:copied===i.name?"var(--soft-bg)":"transparent",cursor:"pointer",color:"var(--text-body)",overflow:"hidden"}}
38
38
  onMouseEnter={(e)=>{e.currentTarget.style.background="var(--bg-hover)";e.currentTarget.style.borderColor="var(--border-subtle)";}}
39
39
  onMouseLeave={(e)=>{e.currentTarget.style.background=copied===i.name?"var(--soft-bg)":"transparent";e.currentTarget.style.borderColor="transparent";}}>
40
40
  <Icon name={i.name} size={18}/>
41
- <span style={{fontFamily:"var(--font-sans)",fontSize:9,lineHeight:1.25,color:copied===i.name?"var(--action-primary)":"var(--text-muted)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{copied===i.name?"saved":i.name}</span>
41
+ <span style={{fontFamily:"var(--font-sans)",fontSize:"var(--text-xs)",lineHeight:"16px",color:copied===i.name?"var(--action-primary)":"var(--text-muted)",textAlign:"center",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{copied===i.name?"saved":i.name}</span>
42
42
  </button>;
43
43
  })}
44
44
  </div>
package/components/_cards/icons-2-feather.card.html CHANGED
@@ -1,13 +1,13 @@
1
- <!-- @dsCard group="Icons" viewport="700x2390" name="Feather Library" subtitle="317 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x3610" name="Feather Library" subtitle="330 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/svg-download.js"></script>
9
9
  <script src="../../assets/icons/icon-index.js"></script>
10
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px}</style></head>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px}</style></head>
11
11
  <body><div id="root"></div>
12
12
  <script type="text/babel">
13
13
  const { Icon, SearchInput, Tag, ICON_PATHS, FEATHER_PATHS } = window.KeybricksDesignSystem_71231a;
@@ -24,7 +24,7 @@ function Gallery(){
24
24
  const grab=(n)=>{ const inner=(ICON_PATHS&&ICON_PATHS[n])||(FEATHER_PATHS&&FEATHER_PATHS[n]); if(inner&&window.KBSaveSVG)KBSaveSVG(n,inner); setCopied(n); setTimeout(()=>setCopied(""),1200); };
25
25
  return <div>
26
26
  <div style={{display:"flex",alignItems:"center",gap:12}}>
27
- <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search 317 icons — try “money”, “arrow”, “video”..." style={{flex:1}}/>
27
+ <SearchInput value={q} onChange={(v)=>setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""))} placeholder="Search 330 icons — try “money”, “arrow”, “video”..." style={{flex:1}}/>
28
28
  <Tag tone="info">{shown.length} / {all.length}</Tag>
29
29
  </div>
30
30
  <div className="grid">
package/components/_cards/icons-3-unicons.card.html CHANGED
@@ -1,13 +1,13 @@
1
- <!-- @dsCard group="Icons" viewport="700x660" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x1370" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/svg-download.js"></script>
9
9
  <script src="../../assets/icons/unicons-index.js"></script>
10
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
11
11
  <body><div id="root"></div>
12
12
  <script type="text/babel">
13
13
  const { Unicon, SearchInput, Tag, Button } = window.KeybricksDesignSystem_71231a;
package/components/_cards/input.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x570" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
1
+ <!-- @dsCard group="Components" viewport="700x720" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
+ <script src="../_shared/card-kit.js"></script>
9
10
  <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:1fr 1fr;gap:16px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Field, Input } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  function Sheet(){return <div className="g">
14
16
  <Field label="Default — empty"><Input placeholder="Sales Orders"/></Field>
15
17
  <Field label="Filled"><Input defaultValue="Sales Orders"/></Field>
@@ -19,9 +21,7 @@ function Sheet(){return <div className="g">
19
21
  <Field label="Error — invalid value" error="Only letters, numbers and underscores are allowed"><Input defaultValue="Sales Orders!!" error/></Field>
20
22
  <Field label="With hint text" hint="Shown in Data Integration node lists"><Input placeholder="e.g. Sales Orders"/></Field>
21
23
  <Field label="Focus (click to try)"><Input placeholder="Click me"/></Field>
22
- <div style={{gridColumn:"1 / -1"}}><span className="lbl" style={{fontSize:10,letterSpacing:".5px",textTransform:"uppercase",color:"var(--text-muted)",display:"block",marginBottom:6}}>Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36 — the Field label follows too</span>
23
- <div style={{display:"flex",gap:16,alignItems:"flex-start",flexWrap:"wrap"}}><div data-size="sm" style={{width:180}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div><div data-size="md" style={{width:200}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div><div data-size="lg" style={{width:220}}><Field label="Node name"><Input placeholder="Sales Orders"/></Field></div></div>
24
- </div>
24
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack align="flex-start" render={(t,l)=><div style={{width:200}}><Field label={l==="en"?"Node name":"节点名称"}><Input placeholder={l==="en"?"Sales Orders":"销售订单"}/></Field></div>}/></div>
25
25
  </div>;}
26
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
27
27
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Field.jsx","path":"../forms/Field.jsx"},{"name":"Input.jsx","path":"../forms/Input.jsx"}]); }, 0);
package/components/_cards/kbd.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x180" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/keyvalue.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x250" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/listrow.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x420" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/loading.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x310" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Spinner, Skeleton, Card } = window.KeybricksDesignSystem_71231a;
package/components/_cards/log-viewer.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x370" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { LogViewer } = window.KeybricksDesignSystem_71231a;
package/components/_cards/modal.card.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- @dsCard group="Components" viewport="700x520" name="Modal" subtitle="Default · destructive footer · with form content · no subtitle" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
package/components/_cards/multi-select.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x410" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { MultiSelect, Field } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  const DEPTS = ["Engineering","Marketing","Operations","Sales","Finance","Legal","HR"];
14
16
  function Sheet(){
15
17
  const [a,setA]=React.useState([]); const [b,setB]=React.useState(["Engineering","Sales"]);
@@ -19,7 +21,7 @@ function Sheet(){
19
21
  <div><span className="lbl">Two selected</span><MultiSelect options={DEPTS} value={b} onChange={setB}/></div>
20
22
  <div><span className="lbl">Overflow → +n</span><MultiSelect options={DEPTS} value={c} onChange={setC}/></div>
21
23
  <div><span className="lbl">Disabled</span><MultiSelect options={DEPTS} value={["Operations"]} disabled/></div>
22
- <div style={{gridColumn:"1 / -1"}}><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",gap:16,alignItems:"center",flexWrap:"wrap"}}><div data-size="sm" style={{width:200}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div><div data-size="md" style={{width:220}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div><div data-size="lg" style={{width:240}}><MultiSelect options={DEPTS} value={b} onChange={setB} maxTags={1}/></div></div></div>
24
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack init={(l)=>l==="en"?["Finance","Operations"]:["财务部","运营部"]} render={(t,l,v,set)=><div style={{width:200}}><MultiSelect options={l==="en"?DEPTS:["财务部","运营部","人力资源部","市场部"]} value={v} onChange={set} maxTags={1}/></div>}/></div>
23
25
  </div>;
24
26
  }
25
27
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/number-stepper.card.html CHANGED
@@ -1,23 +1,26 @@
1
- <!-- @dsCard group="Components" viewport="700x250" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x240" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { NumberStepper } = window.KeybricksDesignSystem_71231a;
14
+ const { KBLive: Live } = window;
15
+ const { KBTiers: Tiers } = window;
13
16
  function Sheet(){
14
17
  const [n,setN]=React.useState(100);
15
18
  return <div className="g">
16
19
  <div><span className="lbl">Default</span><NumberStepper value={n} onChange={setN}/></div>
17
- <div><span className="lbl">At minimum (− disabled)</span><NumberStepper value={0} min={0}/></div>
18
- <div><span className="lbl">At maximum (+ disabled)</span><NumberStepper value={500} max={500}/></div>
20
+ <div><span className="lbl">At minimum (− disabled)</span><Live init={0}>{(v,set)=><NumberStepper value={v} onChange={set} min={0}/>}</Live></div>
21
+ <div><span className="lbl">At maximum (+ disabled)</span><Live init={500}>{(v,set)=><NumberStepper value={v} onChange={set} max={500}/>}</Live></div>
19
22
  <div><span className="lbl">Disabled</span><NumberStepper value={100} disabled/></div>
20
- <div style={{gridColumn:"1 / -1"}}><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",gap:16,alignItems:"center",flexWrap:"wrap"}}><div data-size="sm"><NumberStepper value={n} onChange={setN}/></div><div data-size="md"><NumberStepper value={n} onChange={setN}/></div><div data-size="lg"><NumberStepper value={n} onChange={setN}/></div></div></div>
23
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers cjk={false} init={100} render={(t,l,v,set)=><NumberStepper value={v} onChange={set}/>}/></div>
21
24
  </div>;
22
25
  }
23
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/pagination.card.html CHANGED
@@ -1,15 +1,17 @@
1
- <!-- @dsCard group="Components" viewport="700x490" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
1
+ <!-- @dsCard group="Components" viewport="700x520" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
9
+ <script src="../_shared/card-kit.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:8px}</style></head>
10
11
  <body><div id="root"></div>
11
12
  <script type="text/babel">
12
13
  const { Pagination } = window.KeybricksDesignSystem_71231a;
14
+ const { KBTiers: Tiers } = window;
13
15
  function Sheet(){
14
16
  const [p,setP]=React.useState(2);
15
17
  const [p2,setP2]=React.useState(1);
@@ -18,7 +20,7 @@ function Sheet(){
18
20
  <div><span className="lbl">Small set — no range label</span><Pagination page={p2} pageCount={3} onChange={setP2}/></div>
19
21
  <div><span className="lbl">First page — Prev disabled</span><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
20
22
  <div><span className="lbl">Last page — Next disabled</span><Pagination page={12} pageCount={12} total={224} pageSize={20}/></div>
21
- <div><span className="lbl">Size tiers — data-size on the region, the control inherits · sm 24 · md 32 · lg 36</span><div style={{display:"flex",flexDirection:"column",gap:10}}><div data-size="sm"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div><div data-size="md"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div><div data-size="lg"><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div></div></div>
23
+ <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers stack cjk={false} init={2} render={(t,l,v,set)=><Pagination page={v} pageCount={7} total={128} pageSize={20} onChange={set}/>}/></div>
22
24
  </div>;
23
25
  }
24
26
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/people.card.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!-- @dsCard group="Components" viewport="700x300" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
2
2
  <!DOCTYPE html>
3
- <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
5
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
6
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
7
  <script src="../../_ds_bundle.js"></script>
8
8
  <script src="../_shared/view-source.js"></script>
9
- <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;flex-direction:column;gap:4px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;flex-direction:column;gap:4px}.lbl{font-size:var(--text-xs);color:var(--text-muted)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Avatar, AvatarGroup, Card } = window.KeybricksDesignSystem_71231a;