@keyfunc/keybricks-ds 2.4.12 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/DEPLOY.md +4 -4
  2. package/INTEGRATION.md +23 -6
  3. package/_adherence.oxlintrc.json +12 -4
  4. package/changelog.js +14 -0
  5. package/components/_cards/accordion.card.html +1 -1
  6. package/components/_cards/action-chip.card.html +1 -1
  7. package/components/_cards/activity.card.html +1 -1
  8. package/components/_cards/alert.card.html +1 -1
  9. package/components/_cards/app-chrome.card.html +1 -1
  10. package/components/_cards/banner.card.html +1 -1
  11. package/components/_cards/breadcrumb.card.html +1 -1
  12. package/components/_cards/button-1-base.card.html +1 -1
  13. package/components/_cards/button-2-states.card.html +1 -1
  14. package/components/_cards/button-3-sizes-icons.card.html +1 -1
  15. package/components/_cards/button-4-group.card.html +1 -1
  16. package/components/_cards/cards-indicators.card.html +1 -1
  17. package/components/_cards/charts-1-sparkline.card.html +1 -1
  18. package/components/_cards/charts-10-gauge.card.html +1 -1
  19. package/components/_cards/charts-11-funnel.card.html +1 -1
  20. package/components/_cards/charts-12-treemap.card.html +1 -1
  21. package/components/_cards/charts-14-radar.card.html +1 -1
  22. package/components/_cards/charts-15-distribution.card.html +1 -1
  23. package/components/_cards/charts-16-pareto.card.html +1 -1
  24. package/components/_cards/charts-17-candlestick.card.html +1 -1
  25. package/components/_cards/charts-18-sankey.card.html +1 -1
  26. package/components/_cards/charts-19-chord.card.html +1 -1
  27. package/components/_cards/charts-2-line.card.html +1 -1
  28. package/components/_cards/charts-20-sunburst.card.html +1 -1
  29. package/components/_cards/charts-21-worldmap.card.html +1 -1
  30. package/components/_cards/charts-22-gantt.card.html +1 -1
  31. package/components/_cards/charts-23-bar3d.card.html +1 -1
  32. package/components/_cards/charts-24-pie3d.card.html +1 -1
  33. package/components/_cards/charts-25-surface3d.card.html +1 -1
  34. package/components/_cards/charts-26-scatter3d.card.html +1 -1
  35. package/components/_cards/charts-27-ribbon3d.card.html +1 -1
  36. package/components/_cards/charts-3-bar.card.html +1 -1
  37. package/components/_cards/charts-4-barlist.card.html +1 -1
  38. package/components/_cards/charts-5-donut.card.html +1 -1
  39. package/components/_cards/charts-6-scatter.card.html +1 -1
  40. package/components/_cards/charts-7-heatmap.card.html +1 -1
  41. package/components/_cards/charts-8-waterfall.card.html +1 -1
  42. package/components/_cards/charts-9-bullet.card.html +1 -1
  43. package/components/_cards/checkbox.card.html +1 -1
  44. package/components/_cards/codeblock.card.html +1 -1
  45. package/components/_cards/combobox.card.html +1 -1
  46. package/components/_cards/context-menu.card.html +1 -1
  47. package/components/_cards/date-picker.card.html +1 -1
  48. package/components/_cards/diffvalue.card.html +1 -1
  49. package/components/_cards/divider.card.html +1 -1
  50. package/components/_cards/drawer.card.html +1 -1
  51. package/components/_cards/dropdown-menu.card.html +28 -5
  52. package/components/_cards/dropzone.card.html +1 -1
  53. package/components/_cards/empty-state.card.html +1 -1
  54. package/components/_cards/icon-button.card.html +1 -1
  55. package/components/_cards/input.card.html +1 -1
  56. package/components/_cards/kbd.card.html +1 -1
  57. package/components/_cards/keyvalue.card.html +1 -1
  58. package/components/_cards/listrow.card.html +1 -1
  59. package/components/_cards/loading.card.html +1 -1
  60. package/components/_cards/log-viewer.card.html +1 -1
  61. package/components/_cards/multi-select.card.html +1 -1
  62. package/components/_cards/number-stepper.card.html +1 -1
  63. package/components/_cards/pagination.card.html +1 -1
  64. package/components/_cards/people.card.html +1 -1
  65. package/components/_cards/pipeline-node.card.html +1 -1
  66. package/components/_cards/pipeline-palette.card.html +1 -1
  67. package/components/_cards/radio.card.html +1 -1
  68. package/components/_cards/relative-time-picker.card.html +1 -1
  69. package/components/_cards/search.card.html +1 -1
  70. package/components/_cards/segmented-control.card.html +1 -1
  71. package/components/_cards/select.card.html +1 -1
  72. package/components/_cards/smart-table.card.html +1 -1
  73. package/components/_cards/spreadsheet.card.html +1 -1
  74. package/components/_cards/stepper.card.html +1 -1
  75. package/components/_cards/table.card.html +7 -2
  76. package/components/_cards/tabs.card.html +1 -1
  77. package/components/_cards/tag.card.html +1 -1
  78. package/components/_cards/textarea.card.html +1 -1
  79. package/components/_cards/timeline.card.html +1 -1
  80. package/components/_cards/toast.card.html +1 -1
  81. package/components/_cards/toggles.card.html +1 -1
  82. package/components/_cards/tooltip.card.html +1 -1
  83. package/components/_cards/tree.card.html +1 -1
  84. package/components/_shared/view-source.js +15 -185
  85. package/components/data/ListRow.d.ts +6 -3
  86. package/components/data/ListRow.jsx +21 -13
  87. package/components/data/ListRow.vue +25 -15
  88. package/components/data/Table.vue +6 -2
  89. package/components/feedback/ContextMenu.d.ts +3 -1
  90. package/components/feedback/ContextMenu.jsx +46 -8
  91. package/components/feedback/ContextMenu.vue +47 -7
  92. package/components/feedback/Menu.d.ts +5 -1
  93. package/components/feedback/Menu.jsx +6 -4
  94. package/components/feedback/Menu.vue +5 -3
  95. package/components/feedback/Timeline.vue +4 -1
  96. package/components/navigation/Tree.vue +6 -0
  97. package/index.html +6 -56
  98. package/package.json +1 -1
  99. package/tokens/typography.css +2 -1
package/components/_cards/dropdown-menu.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x420" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items" -->
1
+ <!-- @dsCard group="Components" viewport="700x1120" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items · coloured icons · item descriptions" -->
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"><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>
@@ -6,10 +6,18 @@
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:var(--text-xs);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}.sec{margin-top:36px;padding-top:16px;border-top:1px solid var(--border-subtle)}.note{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);margin:0 0 12px;text-wrap:pretty}.bar{display:flex;align-items:center;gap:8px;height:250px;align-items:flex-start}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
- const { Menu, Button, IconButton, Avatar } = window.KeybricksDesignSystem_71231a;
12
+ const { Menu, Button, IconButton, Avatar, SearchInput } = window.KeybricksDesignSystem_71231a;
13
+ const MODEL_TYPES = [
14
+ { label: "Consolidation Model", icon: "consolidation", iconColor: "var(--cat-transform)", description: "For statutory or management consolidation. Consolidation needs consolidation groups, so attach an Ownership Model. If the data spans several currencies, also attach a Rate Model to convert it." },
15
+ { label: "Planning/Forecasting Model", icon: "trending-up", iconColor: "var(--cat-join)", description: "For budgeting or forecasting. If the data spans several currencies, attach a Rate Model to convert it." },
16
+ { label: "Rate Model", icon: "dimension-currency", iconColor: "var(--cat-source)", description: "Stores the exchange rates used to convert between currencies." },
17
+ { label: "Ownership Model", icon: "ownership", iconColor: "var(--cat-merge)", description: "Stores the consolidation group structure: the entities in each group, direct and indirect holdings, control and consolidation percentages." },
18
+ ];
19
+ /* Demo only: hover the second item of each open menu so the description panel shows without a pointer. */
20
+ const preHover = () => document.querySelectorAll(".pre [role=menu]").forEach(m => { const b = m.querySelectorAll("[role=menuitem]")[1]; if (b) b.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); });
13
21
  const withIcons = [{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}];
14
22
  const plainText = [{label:"Name"},{label:"Date modified"},{label:"Size"},{divider:true},{label:"Custom order"}];
15
23
  function Sheet(){return <div className="g">
@@ -33,6 +41,21 @@ function Sheet(){return <div className="g">
33
41
  <Menu trigger={<Button variant="outline" icon="filter" iconPosition="right">Filter</Button>} items={[{label:"All"},{label:"Active only"},{label:"Archived only"}]}/>
34
42
  </div>
35
43
  </div>;}
36
- ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
37
- if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Menu.jsx","path":"../feedback/Menu.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Avatar.jsx","path":"../display/Avatar.jsx"}]); }, 0);
44
+ function Described(){return <div>
45
+ <div className="sec"><span className="lbl">Coloured icons + descriptions — trigger at the right: <code>align="end"</code>, the description opens on the left</span>
46
+ <p className="note">Each item takes <code>iconColor</code> (any colour token; omit it for a single-colour icon) and <code>description</code>. Hovering or focusing an item shows its icon, label and description in a 300px panel beside the menu. The panel opens on the side away from the trigger's edge and flips if the window has no room there.</p>
47
+ <div className="bar pre" style={{justifyContent:"flex-end"}}>
48
+ <SearchInput placeholder="Search models" style={{width:200}}/>
49
+ <Menu align="end" defaultOpen trigger={<Button variant="primary" icon="plus">New Model</Button>} items={MODEL_TYPES}/>
50
+ </div>
51
+ </div>
52
+ <div className="sec"><span className="lbl">Trigger at the far left: <code>align="start"</code>, the description opens on the right · single-colour icons</span>
53
+ <div className="bar pre">
54
+ <Menu defaultOpen trigger={<Button variant="outline" icon="plus">New Model</Button>} items={MODEL_TYPES.map(({ iconColor, ...it }) => it)}/>
55
+ </div>
56
+ </div>
57
+ </div>;}
58
+ ReactDOM.createRoot(document.getElementById("root")).render(<><Sheet/><Described/></>);
59
+ setTimeout(preHover, 300);
60
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Menu.jsx","path":"../feedback/Menu.jsx"},{"name":"ContextMenu.jsx","path":"../feedback/ContextMenu.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Avatar.jsx","path":"../display/Avatar.jsx"}]); }, 0);
38
61
  </script></body></html>
package/components/_cards/dropzone.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="924x588" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="924x730" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
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"><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>
package/components/_cards/empty-state.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="924x580" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
1
+ <!-- @dsCard group="Components" viewport="924x660" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
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"><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>
package/components/_cards/icon-button.card.html CHANGED
@@ -1,4 +1,4 @@
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" -->
1
+ <!-- @dsCard group="Components" viewport="700x510" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
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"><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>
package/components/_cards/input.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x720" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
1
+ <!-- @dsCard group="Components" viewport="700x830" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
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"><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>
package/components/_cards/kbd.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x180" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
1
+ <!-- @dsCard group="Components" viewport="700x290" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
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"><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>
package/components/_cards/keyvalue.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x250" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x270" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
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"><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>
package/components/_cards/listrow.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x420" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
1
+ <!-- @dsCard group="Components" viewport="700x440" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
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"><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>
package/components/_cards/loading.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x310" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
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"><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>
package/components/_cards/log-viewer.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x370" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
1
+ <!-- @dsCard group="Components" viewport="700x450" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
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"><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>
package/components/_cards/multi-select.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x400" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
1
+ <!-- @dsCard group="Components" viewport="700x540" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
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"><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>
package/components/_cards/number-stepper.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x240" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x340" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
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"><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>
package/components/_cards/pagination.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x520" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
1
+ <!-- @dsCard group="Components" viewport="700x770" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
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"><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>
package/components/_cards/people.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x300" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
1
+ <!-- @dsCard group="Components" viewport="700x340" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
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"><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>
package/components/_cards/pipeline-node.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1620" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states" -->
1
+ <!-- @dsCard group="Components" viewport="700x1800" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states" -->
2
2
  <!DOCTYPE html>
3
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>
package/components/_cards/pipeline-palette.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x690" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
1
+ <!-- @dsCard group="Components" viewport="700x920" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
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"><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>
package/components/_cards/radio.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1120" name="Radio Button" subtitle="Single choice from a small set — md/sm · description · disabled · row · card variant · arrow-key navigation" -->
1
+ <!-- @dsCard group="Components" viewport="700x1750" name="Radio Button" subtitle="Single choice from a small set — md/sm · description · disabled · row · card variant · arrow-key navigation" -->
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"><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>
package/components/_cards/relative-time-picker.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x720" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
1
+ <!-- @dsCard group="Components" viewport="700x880" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
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"><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>
package/components/_cards/search.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x520" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x770" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · disabled" -->
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"><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>
package/components/_cards/segmented-control.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1260" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle" -->
1
+ <!-- @dsCard group="Components" viewport="700x1880" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle" -->
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"><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>
package/components/_cards/select.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x430" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
1
+ <!-- @dsCard group="Components" viewport="700x550" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
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"><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>
package/components/_cards/smart-table.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1360" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New" -->
1
+ <!-- @dsCard group="Components" viewport="700x1470" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · typed fields · hue pills · aggregates · + New" -->
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"><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>
package/components/_cards/spreadsheet.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="924x560" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
1
+ <!-- @dsCard group="Components" viewport="924x600" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
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"><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>
package/components/_cards/stepper.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x450" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
1
+ <!-- @dsCard group="Components" viewport="700x630" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
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"><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>
package/components/_cards/table.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x9720" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
1
+ <!-- @dsCard group="Components" viewport="700x11200" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
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"><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>
@@ -111,6 +111,9 @@ const TIER_COLS = (t) => [
111
111
  { key: "act", label: "On conflict", width: 160, render: v => <Live init={v}>{(x, set) => <Select options={["New", "Overwrite", "Skip"]} value={x} onChange={(e) => set(e && e.target ? e.target.value : e)} style={{ width: "100%", minWidth: 124 }} />}</Live> },
112
112
  { key: "trend", label: "Trend", render: v => <Sparkline values={v} width={FIT[t].sp[0]} height={FIT[t].sp[1]} tone="auto" /> },
113
113
  ];
114
+ const TIER_COLS_SM = TIER_COLS("sm");
115
+ const TIER_COLS_MD = TIER_COLS("md");
116
+ const TIER_COLS_LG = TIER_COLS("lg");
114
117
  const SPEC_COLS = [{ key: "part", label: "In the cell", width: 230 }, { key: "sm", label: "sm", mono: true, width: 100 }, { key: "md", label: "md", mono: true, width: 90 }, { key: "lg", label: "lg", mono: true, width: 90 }, { key: "how", label: "Sized by" }];
115
118
  const SPEC_ROWS = [
116
119
  { part: "Row", sm: "36", md: "40", lg: "48", how: "table size" },
@@ -204,7 +207,9 @@ function Sheet() {
204
207
  <div className="note">Controls fill their column (<code>width: 100%</code>) and sit 4px from the row edges — the row is the tier's bar height, the control the tier's control height. For a grid the user edits cell by cell, use <b>Spreadsheet</b> or <b>Smart Table</b> instead.</div>
205
208
  </Case>
206
209
  <Case k="per tier — the same cells at sm · md · lg">
207
- {["sm", "md", "lg"].map(t => <div key={t} style={{ paddingBottom: 12 }}><span className="k">{t} · {{ sm: "36", md: "40", lg: "48" }[t]}px rows · Avatar {FIT[t].av} · Sparkline {FIT[t].sp.join("×")}</span><Table size={t} bordered columns={TIER_COLS(t)} rows={TIER_ROWS} /></div>)}
210
+ <div style={{ paddingBottom: 12 }}><span className="k">sm · 36px rows · Avatar {FIT.sm.av} · Sparkline {FIT.sm.sp.join("×")}</span><Table size="sm" bordered columns={TIER_COLS_SM} rows={TIER_ROWS} /></div>
211
+ <div style={{ paddingBottom: 12 }}><span className="k">md · 40px rows · Avatar {FIT.md.av} · Sparkline {FIT.md.sp.join("×")}</span><Table size="md" bordered columns={TIER_COLS_MD} rows={TIER_ROWS} /></div>
212
+ <div style={{ paddingBottom: 12 }}><span className="k">lg · 48px rows · Avatar {FIT.lg.av} · Sparkline {FIT.lg.sp.join("×")}</span><Table size="lg" bordered columns={TIER_COLS_LG} rows={TIER_ROWS} /></div>
208
213
  </Case>
209
214
  <Case k="sizes per tier — px">
210
215
  <Table size="sm" bordered columns={SPEC_COLS} rows={SPEC_ROWS} />
package/components/_cards/tabs.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x810" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs · counts on every kind" -->
1
+ <!-- @dsCard group="Components" viewport="700x1130" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs · counts on every kind" -->
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"><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>
package/components/_cards/tag.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x300" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
1
+ <!-- @dsCard group="Components" viewport="700x450" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
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"><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>
package/components/_cards/textarea.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="924x520" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="924x680" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
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"><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>
package/components/_cards/timeline.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x350" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
1
+ <!-- @dsCard group="Components" viewport="700x390" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
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"><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>
package/components/_cards/toast.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x450" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
1
+ <!-- @dsCard group="Components" viewport="700x800" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
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"><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>
package/components/_cards/toggles.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1670" name="Toggle Switch" subtitle="Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading" -->
1
+ <!-- @dsCard group="Components" viewport="700x2780" name="Toggle Switch" subtitle="Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading" -->
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"><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>
package/components/_cards/tooltip.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x360" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
1
+ <!-- @dsCard group="Components" viewport="700x510" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
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"><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>
package/components/_cards/tree.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x2820" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
1
+ <!-- @dsCard group="Components" viewport="700x3170" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
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"><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>
package/components/_shared/view-source.js CHANGED
@@ -1,194 +1,24 @@
1
1
  (function(){
2
- var bundles = {};
3
- /* Component source is loaded on demand, one script per folder (_src/src-<dir>.js at the project root).
4
- It lives outside components/ so the design-system compiler keeps it out of _ds_bundle.js — ~870 KB of
5
- source text every card and the home page would otherwise download and parse just to show View Code.
6
- _src/ also holds the icon search indexes (icon-index.js, unicons-index.js) that only the icon gallery cards load;
7
- assets/icons/*.json keep the same data for apps.
8
- A <script> tag works from file:// and from any host; fetch() of a sibling source file does not. */
9
- function loadBundle(dir, done){
10
- if (!dir || bundles[dir] === 'done') return done();
11
- if (bundles[dir]) { bundles[dir].push(done); return; }
12
- bundles[dir] = [done];
13
- var s = document.createElement('script');
14
- s.src = '../../_src/src-' + dir + '.js';
15
- s.onload = s.onerror = function(){
16
- var q = bundles[dir]; bundles[dir] = 'done';
17
- q.forEach(function(fn){ fn(); });
18
- };
2
+ /* Cards call KBViewSource.mount(selector) once they render. It adds the "Show code" bar under each example —
3
+ the React / Vue 3 code that builds it, generated by _src/usage-code.js (loaded on demand, kept out of _ds_bundle.js).
4
+ The site does not show components' own source: developers use the package, and the source ships in it (and in GitLab).
5
+ Inside the documentation site the card also follows the site's theme (the host posts { kb: 'theme' }). */
6
+ function loadUsage(sel){
7
+ if (window.KBUsage) { window.KBUsage.attach(sel); return; }
8
+ var s = document.createElement('script'); s.src = '../../_src/usage-code.js';
9
+ s.onload = function(){ if (window.KBUsage) window.KBUsage.attach(sel); };
19
10
  document.head.appendChild(s);
20
11
  }
21
- function esc(s){return s;}
22
- function iconSvg(){return '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>';}
23
- function copySvg(){return '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';}
24
- function prettyHtml(html){
25
- var s = html.replace(/></g,'>\n<');
26
- var lines = s.split('\n'), indent=0, out=[];
27
- for (var i=0;i<lines.length;i++){
28
- var line = lines[i].trim(); if(!line) continue;
29
- var closing = /^<\//.test(line);
30
- if (closing) indent = Math.max(0, indent-1);
31
- out.push(' '.repeat(indent) + line);
32
- var selfClosing = /\/>$/.test(line) || /^<(br|img|input|hr)\b/i.test(line);
33
- var isOpen = /^<[a-zA-Z]/.test(line) && !closing && !selfClosing;
34
- if (isOpen) indent++;
35
- }
36
- return out.join('\n');
37
- }
38
- function resolveSrc(path, framework, cb){
39
- var p = framework === 'vue' ? path.replace(/\.jsx$/, '.vue') : path;
40
- if (framework === 'vue' && /\.jsx$/.test(path)) { var src = window.__KB_SRC_MANIFEST__ && window.__KB_SRC_MANIFEST__[path]; if (src && src.vue) p = src.vue; }
41
- var key = p.replace(/^\.\.\//, '');
42
- function hit(){ return window.__KB_SRC__ && window.__KB_SRC__[key] != null ? window.__KB_SRC__[key] : null; }
43
- var t = hit(); if (t != null) return cb(t);
44
- loadBundle(key.split('/')[0], function(){
45
- var t = hit(); if (t != null) return cb(t);
46
- fetch(p).then(function(r){ if (!r.ok) throw 0; return r.text(); }).then(cb)
47
- .catch(function(){ cb('// ' + p + ' has no standalone source file in this export.\n// It is defined inside _ds_bundle.js — the live demo above is the real component.'); });
48
- });
49
- }
50
- function serve(files){
12
+ var listening = false;
13
+ function mount(rootSelector){
14
+ loadUsage(rootSelector);
51
15
  var framed; try { framed = window.parent !== window; } catch(e){ framed = true; }
52
- if (!framed) return false;
53
- var list = files.map(function(f){ var o = { name: f.name, path: f.path }; if (f.vue) o.vue = f.vue; if (f.vueName) o.vueName = f.vueName; if (f.vueOnly) o.vueOnly = true; if (f.reactOnly) o.reactOnly = true; return o; });
54
- window.__KB_SRC_MANIFEST__ = {}; list.forEach(function(o){ window.__KB_SRC_MANIFEST__[o.path] = o; });
16
+ if (!framed || listening) return;
17
+ listening = true;
55
18
  window.addEventListener('message', function(e){
56
- var m = e.data; if (!m) return;
57
- if (m.kb === 'src-get') {
58
- resolveSrc(m.path, m.framework, function(text){
59
- try { window.parent.postMessage({ kb:'src-text', path:m.path, framework:m.framework, text:text }, '*'); } catch(err){}
60
- });
61
- } else if (m.kb === 'theme' && m.theme) {
62
- document.documentElement.setAttribute('data-theme', m.theme);
63
- document.documentElement.style.colorScheme = m.theme;
64
- }
65
- });
66
- function send(){ try { window.parent.postMessage({ kb:'src-manifest', files:list }, '*'); } catch(e){} }
67
- send(); setTimeout(send, 250); setTimeout(send, 900);
68
- return true;
69
- }
70
- function mount(rootSelector, files){
71
- var root = document.querySelector(rootSelector);
72
- if (!root || !root.parentNode) return;
73
- /* Inside the design-system site the host page renders the View Code UI below the
74
- component box, so the card only serves source text over postMessage. This path
75
- also works from file://, where the host cannot touch this document at all. */
76
- if (serve(files)) return;
77
- var wrap = document.createElement('div');
78
- wrap.setAttribute('data-kb-viewsource','1');
79
- wrap.style.cssText = 'margin:16px 0 4px;font-family:var(--font-sans,sans-serif)';
80
- var btn = document.createElement('button');
81
- btn.type = 'button';
82
- btn.innerHTML = iconSvg() + '<span style="margin-left:6px">View Code</span>';
83
- btn.style.cssText = 'display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);border:1px solid var(--border-control,#e5e5e5);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;';
84
- var panel = document.createElement('div');
85
- panel.style.cssText = 'display:none;margin-top:10px;border:1px solid var(--border-control,#e5e5e5);border-radius:8px;overflow:hidden;background:var(--bg-inset,#fafafa);';
86
- var headRow = document.createElement('div');
87
- headRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface,#fff);border-bottom:1px solid var(--border-subtle,#f0f0f0);';
88
- var tabBar = document.createElement('div');
89
- tabBar.style.cssText = 'display:flex;overflow-x:auto;flex:1;';
90
- var fwBar = document.createElement('div');
91
- fwBar.style.cssText = 'display:flex;align-items:center;flex-shrink:0;height:28px;box-sizing:border-box;gap:2px;padding:2px;margin:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-inset,#fafafa);border:1px solid var(--border-control,#e5e5e5);';
92
- var framework = 'react';
93
- ['React','Vue 3'].forEach(function(fw){
94
- var fb = document.createElement('button');
95
- fb.type = 'button'; fb.textContent = fw;
96
- fb.style.cssText = 'display:inline-flex;align-items:center;height:22px;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-weight:var(--weight-medium,500);font-family:var(--font-sans,sans-serif);padding:0 6px;border-radius:var(--radius-sm,4px);border:none;background:transparent;color:var(--text-secondary,#737373);cursor:pointer;white-space:nowrap;';
97
- fb.onclick = function(){
98
- framework = fw === 'Vue 3' ? 'vue' : 'react';
99
- Array.prototype.forEach.call(fwBar.children, function(el){
100
- var on = el.textContent === fw;
101
- el.style.background = on ? 'var(--bg-surface,#fff)' : 'transparent'; el.style.boxShadow = on ? '0 1px 2px rgba(0,0,0,.08)' : 'none';
102
- el.style.color = on ? 'var(--text-heading,#0a0a0a)' : 'var(--text-secondary,#737373)';
103
-
104
- });
105
- Array.prototype.forEach.call(tabBar.children, function(el, i){
106
- if (tabs[i].html) return;
107
- el.textContent = framework === 'vue' ? (tabs[i].vueName || tabs[i].name.replace(/\.jsx$/, '.vue')) : tabs[i].name;
108
- el.style.display = (framework === 'vue' && tabs[i].reactOnly) || (framework === 'react' && tabs[i].vueOnly) ? 'none' : '';
109
- });
110
- if (active !== -1 && tabBar.children[active].style.display === 'none') { for (var k = 0; k < tabs.length; k++) if (tabBar.children[k].style.display !== 'none') { selectTab(k); break; } }
111
- else if (active !== -1) selectTab(active);
112
- };
113
- fwBar.appendChild(fb);
114
- });
115
- fwBar.firstChild.style.background = 'var(--bg-surface,#fff)'; fwBar.firstChild.style.boxShadow = '0 1px 2px rgba(0,0,0,.08)';
116
- fwBar.firstChild.style.color = 'var(--text-heading,#0a0a0a)';
117
-
118
- headRow.appendChild(tabBar); headRow.appendChild(fwBar);
119
- var body = document.createElement('div');
120
- var tabs = files.slice();
121
- var cache = {}, active = -1;
122
- function renderTab(t){
123
- var box = document.createElement('div');
124
- box.style.position = 'relative';
125
- var pre = document.createElement('pre');
126
- pre.style.cssText = 'margin:0;padding:14px 70px 14px 16px;overflow:auto;max-height:380px;font-family:var(--font-mono,monospace);font-size:var(--text-code,12px);line-height:var(--leading-code,18px);color:var(--text-body,#525252);white-space:pre;';
127
- var copyBtn = document.createElement('button');
128
- copyBtn.type = 'button';
129
- copyBtn.innerHTML = copySvg() + '<span style="margin-left:4px">Copy</span>';
130
- copyBtn.style.cssText = 'position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;border:1px solid var(--border-control,#e5e5e5);';
131
- function setText(text){
132
- pre.textContent = text;
133
- copyBtn.onclick = function(){
134
- try { navigator.clipboard.writeText(text); } catch(e){}
135
- var old = copyBtn.innerHTML;
136
- copyBtn.innerHTML = 'Copied';
137
- setTimeout(function(){ copyBtn.innerHTML = old; }, 1200);
138
- };
139
- }
140
- {
141
- var p = framework === 'vue' ? (t.vue || t.path.replace(/\.jsx$/, '.vue')) : t.path;
142
- var key = p.replace(/^\.\.\//, '');
143
- var fromCache = function(){
144
- if (window.__KB_SRC__ && window.__KB_SRC__[key] != null) { setText(window.__KB_SRC__[key]); return true; }
145
- return false;
146
- };
147
- if (!fromCache()) {
148
- pre.textContent = 'Loading…';
149
- // Sources are shipped as one script per folder so this works over file:// too,
150
- // where fetch() to a sibling file is blocked. fetch is only the last resort.
151
- loadBundle(key.split('/')[0], function(){
152
- if (fromCache()) return;
153
- fetch(p).then(function(r){ if (!r.ok) throw 0; return r.text(); })
154
- .then(setText)
155
- .catch(function(){ pre.textContent = '// ' + p + ' has no standalone source file in this export.\n// It is defined inside _ds_bundle.js — the live demo above is the real component.'; });
156
- });
157
- }
158
- }
159
- box.appendChild(pre); box.appendChild(copyBtn);
160
- return box;
161
- }
162
- function selectTab(idx){
163
- active = idx;
164
- Array.prototype.forEach.call(tabBar.children, function(el, i){
165
- el.style.color = i === idx ? 'var(--text-heading,#171717)' : 'var(--text-secondary,#737373)';
166
- el.style.borderBottom = i === idx ? '2px solid var(--action-primary,#155dfc)' : '2px solid transparent';
167
- });
168
- body.innerHTML = '';
169
- body.appendChild(renderTab(tabs[idx]));
170
- }
171
- tabs.forEach(function(t, i){
172
- var tb = document.createElement('button');
173
- tb.type = 'button';
174
- tb.textContent = t.name;
175
- if (t.vueOnly) tb.style.display = 'none';
176
- tb.style.cssText = 'padding:8px 12px;border:none;background:transparent;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;white-space:nowrap;margin-bottom:-1px;border-bottom:2px solid transparent;';
177
- tb.onclick = function(){ selectTab(i); };
178
- tabBar.appendChild(tb);
19
+ var m = e.data;
20
+ if (m && m.kb === 'theme' && m.theme) { document.documentElement.setAttribute('data-theme', m.theme); document.documentElement.style.colorScheme = m.theme; }
179
21
  });
180
- panel.appendChild(headRow);
181
- panel.appendChild(body);
182
- var open = false;
183
- btn.onclick = function(){
184
- open = !open;
185
- panel.style.display = open ? 'block' : 'none';
186
- btn.querySelector('span').textContent = open ? 'Hide Code' : 'View Code';
187
- if (open && active === -1) selectTab(0);
188
- };
189
- wrap.appendChild(btn);
190
- wrap.appendChild(panel);
191
- root.parentNode.appendChild(wrap);
192
22
  }
193
23
  window.KBViewSource = { mount: mount };
194
24
  })();
package/components/data/ListRow.d.ts CHANGED
@@ -1,13 +1,16 @@
1
1
  import * as React from "react";
2
- /** Expandable list row (Workflow groups): chevron, 32px hairline icon tile, 13px/500 title, 12px meta, right count. */
2
+ /** Expandable list row (Workflow groups): chevron, 32px hairline icon tile, 14px/500 title, 12px meta, right count.
3
+ * The chevron shows only when the row has children to expand. The row is a button only with onClick: focusable, Enter / Space, aria-expanded,
4
+ * hover wash from tokens/hover.css. Without onClick the row is static (no pointer, no hover). Title and meta truncate; expanded content aligns under the title. */
3
5
  export interface ListRowProps {
4
6
  icon?: string;
5
7
  title?: string;
6
8
  meta?: string;
7
- /** Right-aligned text ("1 item") */
9
+ /** Right-aligned text ("1 item"); 0 is shown. */
8
10
  trailing?: React.ReactNode;
9
11
  expanded?: boolean;
10
- onClick?: () => void;
12
+ /** Makes the row a button (toggle expanded here). */
13
+ onClick?: (e: React.SyntheticEvent) => void;
11
14
  children?: React.ReactNode;
12
15
  style?: React.CSSProperties;
13
16
  }