@keyfunc/keybricks-ds 2.6.0 → 2.7.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 (155) hide show
  1. package/DEPLOY.md +3 -3
  2. package/DESIGN.md +13 -4
  3. package/INTEGRATION.md +18 -3
  4. package/_adherence.oxlintrc.json +57 -11
  5. package/_ds_bundle.js +2137 -186
  6. package/_scripts/build-index.mjs +1 -1
  7. package/_src/icon-index.js +1 -1
  8. package/assets/icons/icon-index.json +1 -1
  9. package/changelog.js +11 -1
  10. package/components/_cards/accordion.card.html +1 -1
  11. package/components/_cards/action-chip.card.html +1 -1
  12. package/components/_cards/activity.card.html +1 -1
  13. package/components/_cards/alert.card.html +1 -1
  14. package/components/_cards/app-chrome.card.html +1 -1
  15. package/components/_cards/banner.card.html +1 -1
  16. package/components/_cards/breadcrumb.card.html +1 -1
  17. package/components/_cards/button-1-base.card.html +5 -2
  18. package/components/_cards/button-2-states.card.html +5 -5
  19. package/components/_cards/button-3-sizes-icons.card.html +2 -2
  20. package/components/_cards/button-4-group.card.html +2 -2
  21. package/components/_cards/button-5-ai.card.html +34 -0
  22. package/components/_cards/canvas-zoom-controls.card.html +1 -1
  23. package/components/_cards/cards-indicators.card.html +1 -1
  24. package/components/_cards/charts-1-sparkline.card.html +1 -1
  25. package/components/_cards/charts-10-gauge.card.html +1 -1
  26. package/components/_cards/charts-11-funnel.card.html +1 -1
  27. package/components/_cards/charts-12-treemap.card.html +1 -1
  28. package/components/_cards/charts-14-radar.card.html +1 -1
  29. package/components/_cards/charts-15-distribution.card.html +1 -1
  30. package/components/_cards/charts-16-pareto.card.html +1 -1
  31. package/components/_cards/charts-17-candlestick.card.html +1 -1
  32. package/components/_cards/charts-18-sankey.card.html +1 -1
  33. package/components/_cards/charts-19-chord.card.html +1 -1
  34. package/components/_cards/charts-2-line.card.html +1 -1
  35. package/components/_cards/charts-20-sunburst.card.html +1 -1
  36. package/components/_cards/charts-21-worldmap.card.html +1 -1
  37. package/components/_cards/charts-22-gantt.card.html +1 -1
  38. package/components/_cards/charts-23-bar3d.card.html +1 -1
  39. package/components/_cards/charts-24-pie3d.card.html +1 -1
  40. package/components/_cards/charts-25-surface3d.card.html +1 -1
  41. package/components/_cards/charts-26-scatter3d.card.html +1 -1
  42. package/components/_cards/charts-27-ribbon3d.card.html +1 -1
  43. package/components/_cards/charts-3-bar.card.html +1 -1
  44. package/components/_cards/charts-4-barlist.card.html +1 -1
  45. package/components/_cards/charts-5-donut.card.html +1 -1
  46. package/components/_cards/charts-6-scatter.card.html +1 -1
  47. package/components/_cards/charts-7-heatmap.card.html +1 -1
  48. package/components/_cards/charts-8-waterfall.card.html +1 -1
  49. package/components/_cards/charts-9-bullet.card.html +1 -1
  50. package/components/_cards/charts-99-fullpage.card.html +1 -1
  51. package/components/_cards/checkbox.card.html +1 -1
  52. package/components/_cards/codeblock.card.html +1 -1
  53. package/components/_cards/combobox.card.html +1 -1
  54. package/components/_cards/context-menu.card.html +1 -1
  55. package/components/_cards/date-picker.card.html +1 -1
  56. package/components/_cards/diffvalue.card.html +1 -1
  57. package/components/_cards/divider.card.html +1 -1
  58. package/components/_cards/drawer.card.html +1 -1
  59. package/components/_cards/dropdown-menu.card.html +1 -1
  60. package/components/_cards/dropzone.card.html +1 -1
  61. package/components/_cards/empty-state.card.html +1 -1
  62. package/components/_cards/filter-bar.card.html +1 -1
  63. package/components/_cards/icon-button.card.html +1 -1
  64. package/components/_cards/icons-0-usage.card.html +2 -2
  65. package/components/_cards/icons-1-core.card.html +1 -1
  66. package/components/_cards/icons-2-feather.card.html +1 -1
  67. package/components/_cards/icons-2b-lucide.card.html +1 -1
  68. package/components/_cards/icons-3-unicons.card.html +1 -1
  69. package/components/_cards/icons-4-datasource.card.html +1 -1
  70. package/components/_cards/input.card.html +1 -1
  71. package/components/_cards/kbd.card.html +5 -7
  72. package/components/_cards/keyvalue.card.html +1 -1
  73. package/components/_cards/listrow.card.html +1 -1
  74. package/components/_cards/loading.card.html +1 -1
  75. package/components/_cards/log-viewer.card.html +1 -1
  76. package/components/_cards/multi-select.card.html +1 -1
  77. package/components/_cards/number-stepper.card.html +1 -1
  78. package/components/_cards/pagination.card.html +1 -1
  79. package/components/_cards/people.card.html +1 -1
  80. package/components/_cards/pipeline-node.card.html +1 -1
  81. package/components/_cards/pipeline-palette.card.html +1 -1
  82. package/components/_cards/radio.card.html +1 -1
  83. package/components/_cards/relative-time-picker.card.html +1 -1
  84. package/components/_cards/search-global.card.html +72 -0
  85. package/components/_cards/search.card.html +1 -1
  86. package/components/_cards/segmented-control.card.html +1 -1
  87. package/components/_cards/select.card.html +1 -1
  88. package/components/_cards/slider.card.html +1 -1
  89. package/components/_cards/smart-table.card.html +1 -1
  90. package/components/_cards/spreadsheet.card.html +1 -1
  91. package/components/_cards/stepper.card.html +1 -1
  92. package/components/_cards/table.card.html +1 -1
  93. package/components/_cards/tabs.card.html +1 -1
  94. package/components/_cards/tag.card.html +1 -1
  95. package/components/_cards/textarea.card.html +1 -1
  96. package/components/_cards/timeline.card.html +1 -1
  97. package/components/_cards/toast.card.html +1 -1
  98. package/components/_cards/toggles.card.html +1 -1
  99. package/components/_cards/tooltip.card.html +1 -1
  100. package/components/_cards/tree.card.html +1 -1
  101. package/components/_vue/index.mjs +2 -0
  102. package/components/buttons/Button.d.ts +14 -5
  103. package/components/buttons/Button.jsx +45 -8
  104. package/components/buttons/Button.vue +40 -38
  105. package/components/buttons/Button.vue.d.ts +4 -1
  106. package/components/buttons/ai-button.js +54 -0
  107. package/components/buttons/buttons.prompt.md +7 -2
  108. package/components/display/Kbd.d.ts +3 -1
  109. package/components/display/Kbd.jsx +8 -3
  110. package/components/display/Kbd.vue +7 -3
  111. package/components/display/display.prompt.md +3 -1
  112. package/components/feedback/Modal.d.ts +7 -0
  113. package/components/feedback/Modal.jsx +9 -9
  114. package/components/feedback/Toast.vue +6 -6
  115. package/components/feedback/feedback.prompt.md +2 -0
  116. package/components/forms/GlobalSearch.d.ts +83 -0
  117. package/components/forms/GlobalSearch.jsx +172 -0
  118. package/components/forms/GlobalSearch.vue +161 -0
  119. package/components/forms/forms.prompt.md +7 -0
  120. package/components/forms/global-search.js +161 -0
  121. package/components/icons/Icon.d.ts +2 -0
  122. package/components/icons/Icon.jsx +14 -6
  123. package/components/icons/Icon.vue +11 -4
  124. package/components/icons/icon-paths.js +4 -2
  125. package/components/index.d.ts +1 -0
  126. package/components/index.js +1 -0
  127. package/components/navigation/TopBar.d.ts +9 -3
  128. package/components/navigation/TopBar.jsx +5 -7
  129. package/components/navigation/TopBar.vue +5 -6
  130. package/covers.js +4 -2
  131. package/gallery.html +1 -1
  132. package/guidelines/brand-logo.html +1 -1
  133. package/guidelines/colors-schemes.html +1 -1
  134. package/guidelines/colors-transparency.html +1 -1
  135. package/guidelines/foundations-borders.html +1 -1
  136. package/guidelines/foundations-chrome.html +1 -1
  137. package/guidelines/foundations-motion.html +1 -1
  138. package/guidelines/foundations-size-tiers.html +1 -1
  139. package/guidelines/foundations-spacing.html +1 -1
  140. package/guidelines/interaction-states.html +1 -1
  141. package/guidelines/type-extended.html +1 -1
  142. package/guidelines/type-mono.html +1 -1
  143. package/guidelines/type-scale.html +1 -1
  144. package/guidelines/type-weights.html +1 -1
  145. package/index.html +8 -8
  146. package/package.json +2 -2
  147. package/readme.md +4 -4
  148. package/readme.zh-CN.md +4 -4
  149. package/site-nav.js +1 -1
  150. package/styles.css +1 -0
  151. package/tokens/ai.css +17 -0
  152. package/tokens/colors.css +1 -1
  153. package/tokens/tokens.d.ts +28 -0
  154. package/tokens/tokens.js +47 -5
  155. package/tokens/tokens.json +123 -5
package/components/_cards/charts-1-sparkline.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x960" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
1
+ <!-- @dsCard group="Charts" viewport="700x945" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
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/charts-10-gauge.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x360" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
1
+ <!-- @dsCard group="Charts" viewport="700x320" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
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/charts-11-funnel.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x670" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
1
+ <!-- @dsCard group="Charts" viewport="700x631" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
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/charts-12-treemap.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x480" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
1
+ <!-- @dsCard group="Charts" viewport="700x463" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
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/charts-14-radar.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x550" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
1
+ <!-- @dsCard group="Charts" viewport="700x514" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
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/charts-15-distribution.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x820" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
1
+ <!-- @dsCard group="Charts" viewport="700x809" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
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/charts-16-pareto.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x490" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
1
+ <!-- @dsCard group="Charts" viewport="700x473" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
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/charts-17-candlestick.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x830" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
1
+ <!-- @dsCard group="Charts" viewport="700x789" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
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/charts-18-sankey.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x570" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
1
+ <!-- @dsCard group="Charts" viewport="700x561" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
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/charts-19-chord.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x960" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
1
+ <!-- @dsCard group="Charts" viewport="700x924" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
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/charts-2-line.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x1550" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
1
+ <!-- @dsCard group="Charts" viewport="700x1538" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
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/charts-20-sunburst.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x590" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
1
+ <!-- @dsCard group="Charts" viewport="700x551" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
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/charts-21-worldmap.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x940" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
1
+ <!-- @dsCard group="Charts" viewport="700x924" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
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/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
package/components/_cards/charts-22-gantt.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x660" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
1
+ <!-- @dsCard group="Charts" viewport="700x648" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
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/charts-23-bar3d.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x840" name="3D Bars" subtitle="Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read" -->
1
+ <!-- @dsCard group="Charts" viewport="700x802" name="3D Bars" subtitle="Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read" -->
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/charts-24-pie3d.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x1400" name="3D Pie & Donut" subtitle="Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice" -->
1
+ <!-- @dsCard group="Charts" viewport="700x1336" name="3D Pie & Donut" subtitle="Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice" -->
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/charts-25-surface3d.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x510" name="3D Surface" subtitle="z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell" -->
1
+ <!-- @dsCard group="Charts" viewport="700x493" name="3D Surface" subtitle="z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell" -->
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/charts-26-scatter3d.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x550" name="3D Scatter" subtitle="Points in an orientation cube — drag to orbit, hover pins x·y·z" -->
1
+ <!-- @dsCard group="Charts" viewport="700x534" name="3D Scatter" subtitle="Points in an orientation cube — drag to orbit, hover pins x·y·z" -->
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/charts-27-ribbon3d.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x540" name="3D Ribbon" subtitle="Series as extruded depth bands — the classic 3D area · drag to orbit" -->
1
+ <!-- @dsCard group="Charts" viewport="700x524" name="3D Ribbon" subtitle="Series as extruded depth bands — the classic 3D area · drag to orbit" -->
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/charts-3-bar.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x2240" name="Bar Chart" subtitle="Vertical &amp; horizontal — grouped · stacked · 100% stacked · diverging · combo line" -->
1
+ <!-- @dsCard group="Charts" viewport="700x2203" name="Bar Chart" subtitle="Vertical &amp; horizontal — grouped · stacked · 100% stacked · diverging · combo line" -->
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/charts-4-barlist.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x580" name="Bar List" subtitle="Horizontal labeled bars — top-N rankings, budget consumption" -->
1
+ <!-- @dsCard group="Charts" viewport="700x545" name="Bar List" subtitle="Horizontal labeled bars — top-N rankings, budget consumption" -->
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/charts-5-donut.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x620" name="Donut & Pie" subtitle="Composition with a KPI center — hover lifts a segment" -->
1
+ <!-- @dsCard group="Charts" viewport="700x583" name="Donut & Pie" subtitle="Composition with a KPI center — hover lifts a segment" -->
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/charts-6-scatter.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x510" name="Scatter & Bubble" subtitle="x/y correlation, bubble = third dimension — nearest-point tooltip" -->
1
+ <!-- @dsCard group="Charts" viewport="700x496" name="Scatter & Bubble" subtitle="x/y correlation, bubble = third dimension — nearest-point tooltip" -->
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/charts-7-heatmap.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x550" name="Heatmap" subtitle="Matrix density — sequential blue ramp · diverging red/green variance" -->
1
+ <!-- @dsCard group="Charts" viewport="700x537" name="Heatmap" subtitle="Matrix density — sequential blue ramp · diverging red/green variance" -->
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/charts-8-waterfall.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x500" name="Waterfall" subtitle="Finance bridge — signed deltas, re-baselining totals, running-sum connectors" -->
1
+ <!-- @dsCard group="Charts" viewport="700x483" name="Waterfall" subtitle="Finance bridge — signed deltas, re-baselining totals, running-sum connectors" -->
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/charts-9-bullet.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="700x530" name="Bullet" subtitle="Actual vs. target rows with a target tick — misses in red" -->
1
+ <!-- @dsCard group="Charts" viewport="700x500" name="Bullet" subtitle="Actual vs. target rows with a target tick — misses in red" -->
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/charts-99-fullpage.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" viewport="1512x2210" name="Full-Page Analytics" subtitle="Reference layout only — every chart type composed into one screen" -->
1
+ <!-- @dsCard group="Charts" viewport="1512x2200" name="Full-Page Analytics" subtitle="Reference layout only — every chart type composed into one screen" -->
2
2
  <!DOCTYPE html>
3
3
  <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css">
4
4
  <script src="https://unpkg.com/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
package/components/_cards/checkbox.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x560" name="Checkbox" subtitle="Checked · unchecked · indeterminate · disabled · sizes" -->
1
+ <!-- @dsCard group="Components" viewport="700x606" name="Checkbox" subtitle="Checked · unchecked · indeterminate · disabled · sizes" -->
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/codeblock.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x300" name="Code Block" subtitle="SQL Preview / JSON export — mono with copy button" -->
1
+ <!-- @dsCard group="Components" viewport="700x286" name="Code Block" subtitle="SQL Preview / JSON export — mono with copy button" -->
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/combobox.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x570" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
1
+ <!-- @dsCard group="Components" viewport="700x558" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
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/context-menu.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x1380" name="Context Menu" subtitle="Action vs single-choice spacing · selected state · icons · plain text · danger item · long list" -->
1
+ <!-- @dsCard group="Components" viewport="700x1310" name="Context Menu" subtitle="Action vs single-choice spacing · selected state · icons · plain text · danger item · long list" -->
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/date-picker.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x710" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
1
+ <!-- @dsCard group="Components" viewport="700x649" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
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/diffvalue.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x400" name="Diff Value" subtitle="Before → after change display (config migration)" -->
1
+ <!-- @dsCard group="Components" viewport="700x387" name="Diff Value" subtitle="Before → after change display (config migration)" -->
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/divider.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x350" name="Divider" subtitle="Plain · labeled · vertical" -->
1
+ <!-- @dsCard group="Components" viewport="700x338" name="Divider" subtitle="Plain · labeled · vertical" -->
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/drawer.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x570" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
1
+ <!-- @dsCard group="Components" viewport="700x558" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
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/dropdown-menu.card.html CHANGED
@@ -1,4 +1,4 @@
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" -->
1
+ <!-- @dsCard group="Components" viewport="700x1152" 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>
package/components/_cards/dropzone.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="924x730" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="924x718" 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="924x660" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
1
+ <!-- @dsCard group="Components" viewport="924x644" 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/filter-bar.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="1000x620" name="Filter Bar (List Report)" subtitle="Fiori-style filter bar composed with a table — Adapt Filters · Go" -->
1
+ <!-- @dsCard group="Components" viewport="1000x566" name="Filter Bar (List Report)" subtitle="Fiori-style filter bar composed with a table — Adapt Filters · Go" -->
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="700x510" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x498" 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/icons-0-usage.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Icons" viewport="700x2250" name="Icon Usage" subtitle="Monochrome glyphs · category tiles · document hues · status · marks · icons inside components — when an icon gets colour" -->
1
+ <!-- @dsCard group="Icons" viewport="700x2221" name="Icon Usage" subtitle="Monochrome glyphs · category tiles · document hues · status · marks · icons inside components — when an icon gets colour" -->
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>
@@ -25,7 +25,7 @@ function Sheet() {
25
25
  <Glyph name="file-text" color="var(--text-muted)" label="muted / disabled" />
26
26
  <Glyph name="file-text" color="var(--action-primary)" label="action" />
27
27
  </KBRow>
28
- <KBRow k="on a fill"><Button icon="download">Export</Button><Button variant="dark" icon="ai-sparkles">AI Assistant</Button><Button variant="danger" icon="trash-2">Delete</Button><IconButton icon="ellipsis" label="More" /></KBRow>
28
+ <KBRow k="on a fill"><Button icon="download">Export</Button><Button variant="dark" icon="upload-cloud">Publish</Button><Button variant="danger" icon="trash-2">Delete</Button><IconButton icon="ellipsis" label="More" /></KBRow>
29
29
  </KBSec>
30
30
  <KBSec title="2 · Category tile — IconTile" note="The coloured square is a category, not decoration: each hue is one node type (--cat-*-bg behind --cat-* glyph). Dark mode swaps both for a low-alpha wash automatically.">
31
31
  <KBRow k="palette · 40 r14">{HUES.map(([h, i]) => <Cap key={h} label={h}><IconTile icon={i} hue={h} /></Cap>)}</KBRow>
package/components/_cards/icons-1-core.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Icons" viewport="700x1900" name="Core Set" subtitle="The 157 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x1764" name="Core Set" subtitle="The 157 stroke glyphs the product itself uses — keyword search · click to download the SVG" -->
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/icons-2-feather.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Icons" viewport="700x4400" name="Feather Library" subtitle="404 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x4551" name="Feather Library" subtitle="404 stroke icons (core + all of Feather) · keyword search · click to download the SVG" -->
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/icons-2b-lucide.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Icons" viewport="700x1370" name="Lucide Library" subtitle="Full Lucide set (1,700+ stroke glyphs, core style) via pinned CDN · keyword search · click to download the SVG" -->
1
+ <!-- @dsCard group="Icons" viewport="700x1396" name="Lucide Library" subtitle="Full Lucide set (1,700+ stroke glyphs, core style) via pinned CDN · keyword search · click to download the SVG" -->
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/icons-3-unicons.card.html CHANGED
@@ -1,4 +1,4 @@
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" -->
1
+ <!-- @dsCard group="Icons" viewport="700x1348" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
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/icons-4-datasource.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Icons" viewport="700x660" name="Data Source Logos" subtitle="17 data-source logo images in assets/logos/datasource/" -->
1
+ <!-- @dsCard group="Icons" viewport="700x636" name="Data Source Logos" subtitle="17 data-source logo images in assets/logos/datasource/" -->
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">
4
4
  <style>body{margin:0;background:var(--bg-surface);padding:24px;box-sizing:border-box;font-family:var(--font-sans)}.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}.t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--border-card);border-radius:var(--radius-lg)}.t img{width:64px;height:64px;border-radius:var(--radius-lg);display:block}.n{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-heading);text-align:center}.f{font-size:11px;line-height:16px;color:var(--text-secondary)}</style></head>
package/components/_cards/input.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x830" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
1
+ <!-- @dsCard group="Components" viewport="700x797" 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="700x290" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
1
+ <!-- @dsCard group="Components" viewport="700x267" 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>
@@ -6,15 +6,13 @@
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:6px 0;max-width:280px}.t{font-size:13px;color:var(--text-body)}</style></head>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}.h{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.t{font-size:13px;color:var(--text-body)}</style></head>
10
10
  <body><div id="root"></div>
11
11
  <script type="text/babel">
12
12
  const { Kbd } = window.KeybricksDesignSystem_71231a;
13
- function Sheet(){return <div>
14
- <div className="row"><span className="t">Open command search</span><Kbd keys={["⌘","K"]}/></div>
15
- <div className="row"><span className="t">Run test</span><Kbd keys={["Ctrl","Enter"]}/></div>
16
- <div className="row"><span className="t">Close panel</span><Kbd keys={["Esc"]}/></div>
17
- </div>;}
13
+ const rows=[["Open command search",["mod","K"]],["Run test",["mod","enter"]],["Save as…",["mod","shift","S"]],["Close panel",["esc"]]];
14
+ function Col({platform,label}){return <div><div className="h">{label}</div>{rows.map(([t,k])=><div className="row" key={t}><span className="t">{t}</span><Kbd keys={k} platform={platform}/></div>)}</div>;}
15
+ function Sheet(){return <section className="cols"><Col platform="mac" label="macOS"/><Col platform="win" label="Windows / Linux"/></section>;}
18
16
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
19
17
  if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Kbd.jsx","path":"../display/Kbd.jsx"}]); }, 0);
20
18
  </script></body></html>
package/components/_cards/keyvalue.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x270" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x261" 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="700x440" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
1
+ <!-- @dsCard group="Components" viewport="700x433" 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="700x400" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
1
+ <!-- @dsCard group="Components" viewport="700x459" 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="700x450" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
1
+ <!-- @dsCard group="Components" viewport="700x436" 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="700x540" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
1
+ <!-- @dsCard group="Components" viewport="700x530" 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="700x340" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
1
+ <!-- @dsCard group="Components" viewport="700x344" 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="700x770" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
1
+ <!-- @dsCard group="Components" viewport="700x758" 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="700x340" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
1
+ <!-- @dsCard group="Components" viewport="700x326" 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="700x1800" 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="700x1781" 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="700x920" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
1
+ <!-- @dsCard group="Components" viewport="700x771" 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="700x1750" 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="700x1741" 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="700x880" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
1
+ <!-- @dsCard group="Components" viewport="700x871" 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>