@keyfunc/keybricks-ds 2.4.13 → 2.5.1

package/changelog.js

@@ -3,6 +3,23 @@
    Each item: tag (new | improved | fixed | breaking | removed) and the text as [en, zh, ja].
    INTEGRATION.md keeps the full migration notes; this list is the short, reader-facing summary. */
 window.KB_CHANGELOG = [
+{ v: "2.5.1", date: "2026-10-30", items: [
+  { tag: "fixed", t: ["Keyboard support: Checkbox, DatePicker, MultiSelect, Accordion, Dropzone, pipeline nodes and palette, selectable bar lists, and the Sunburst / World map charts can all be used without a mouse.", "键盘支持：复选框、日期选择、多选、折叠面板、上传区、管道节点与节点面板、可点选的条形列表，以及旭日图 / 世界地图，都可以不用鼠标操作。", "キーボード対応：チェックボックス、日付選択、マルチセレクト、アコーディオン、ドロップゾーン、パイプラインのノードとパレット、選択可能なバーリスト、サンバースト / 世界地図をマウスなしで操作可能に。"] },
+  { tag: "fixed", t: ["Long text no longer spills: field values, menu items, segments, tree rows and navigation names truncate; drawer titles wrap.", "长文字不再溢出：输入框的值、菜单项、分段选择、树形列表和导航名称会截断；侧滑面板标题会换行。", "長いテキストがはみ出さないように：入力値、メニュー項目、セグメント、ツリー行、ナビゲーション名は省略表示、ドロワーのタイトルは折り返し。"] },
+  { tag: "fixed", t: ["Vue: Tree right-click menu event and BarList row selection, matching React.", "Vue：树形列表支持右键菜单事件，条形列表支持点选，与 React 一致。", "Vue：Tree の右クリックメニューイベントと BarList の行選択を React と同様に追加。"] },
+  { tag: "fixed", t: ["The documentation pages inside the npm package now open locally — before, every component box stayed empty.", "npm 包里的文档网页现在可以在本地直接打开（之前每个组件框都是空白的）。", "npm パッケージ内のドキュメントページをローカルで開けるように（以前は各コンポーネント枠が空白だった）。"] },
+  { tag: "improved", t: ["Animations and shadows use the system tokens throughout; shadows deepen in dark mode.", "动画和阴影统一使用系统规范值，深色模式下阴影自动加深。", "アニメーションと影をシステムのトークンに統一。ダークモードでは影が自動で濃くなる。"] },
+] },
+{ v: "2.5.0", date: "2026-10-30", items: [
+  { tag: "new", t: ["Every example on this site has a <b>Show code</b> bar: the React and Vue 3 code that builds it, ready to paste.", "网站上每个例子下都有<b>显示代码</b>：给出做出该例子的 React 和 Vue 3 代码，可直接复制使用。", "サイトの各例の下に<b>コードを表示</b>を追加：その例を作る React / Vue 3 のコードをそのまま貼り付けて使える。"] },
+  { tag: "improved", t: ["Vue imports in one line: <code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>.", "Vue 一行引入：<code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>。", "Vue は 1 行でインポート：<code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>。"] },
+  { tag: "fixed", t: ["Vue <code>Table</code> cells can hold components (<code>#cell-&lt;key&gt;</code> slots or a VNode from <code>render</code>); Vue <code>Tree</code> shows row actions; Vue <code>Timeline</code> item bodies can hold components.", "Vue <code>Table</code> 单元格可放组件（<code>#cell-&lt;key&gt;</code> 插槽，或 <code>render</code> 返回 VNode）；Vue <code>Tree</code> 显示行操作；Vue <code>Timeline</code> 条目内容可放组件。", "Vue <code>Table</code> のセルにコンポーネントを配置可能（<code>#cell-&lt;key&gt;</code> スロット、または <code>render</code> の VNode）。Vue <code>Tree</code> に行アクションを表示。Vue <code>Timeline</code> の本文にコンポーネントを配置可能。"] },
+  { tag: "fixed", t: ["<code>ListRow</code>: keyboard support, a chevron only on rows that expand, expanded content aligned under the title, long titles truncate.", "<code>ListRow</code>：支持键盘操作；只有可展开的行显示箭头；展开内容与标题对齐；长标题截断。", "<code>ListRow</code>：キーボード操作に対応。展開できる行だけに矢印。展開内容をタイトルに揃え、長いタイトルは省略。"] },
+  { tag: "removed", t: ["The site no longer shows each component's own source — it ships in the npm package.", "网站不再展示组件源码，源码随 npm 包提供。", "サイトでのコンポーネント自体のソース表示を廃止（npm パッケージに同梱）。"] },
+] },
+{ v: "2.4.14", date: "2026-10-29", items: [
+  { tag: "fixed", t: ["CJK typography now applies its font at explicit language boundaries, preserving descendant icon and code fonts, including AG Grid selection icons.", "中日韩字体规则改为仅在显式语言区域设置字体，保留后代图标和代码的专用字体，修复 AG Grid 选择图标显示异常。", "CJK フォントの適用先を言語が明示された領域に限定し、AG Grid の選択アイコンなど、子要素のアイコン用・コード用フォントを維持。"] },
+] },
 { v: "2.4.13", date: "2026-10-29", items: [
   { tag: "new", t: ["Menu items can show a description: hover or focus an item and a panel beside the menu explains it. It opens on the side away from the trigger and flips when there is no room.", "菜单项可以显示说明：悬停或用键盘选中某项时，菜单旁边会出现说明面板。面板出现在远离按钮的一侧，空间不够时自动换到另一侧。", "メニュー項目に説明を表示可能に。項目にホバーまたはフォーカスすると、メニューの横に説明パネルが開く。トリガーと反対側に開き、余白がなければ反対側へ切り替わる。"] },
   { tag: "new", t: ["Menu item icons can be coloured with <code>iconColor</code>; without it they stay single-colour.", "菜单项图标可用 <code>iconColor</code> 设为彩色；不设置则保持单色。", "メニュー項目のアイコンを <code>iconColor</code> で色付け可能に。指定しなければ単色のまま。"] },

package/components/_cards/accordion.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x320" name="Accordion" subtitle="Generic collapsible section — settings/FAQ style" -->
+<!-- @dsCard group="Components" viewport="700x340" name="Accordion" subtitle="Generic collapsible section — settings/FAQ style" -->
 <!DOCTYPE html>
 <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">
 <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/action-chip.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x370" name="Action Chip" subtitle="Tinted bulk-action chips · five tones · size tiers, Latin and CJK" -->
+<!-- @dsCard group="Components" viewport="700x470" name="Action Chip" subtitle="Tinted bulk-action chips · five tones · size tiers, Latin and CJK" -->
 <!DOCTYPE html>
 <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">
 <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/activity.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x300" name="Activity" subtitle="ActivityItem rows · DotActivity feed" -->
+<!-- @dsCard group="Components" viewport="700x480" name="Activity" subtitle="ActivityItem rows · DotActivity feed" -->
 <!DOCTYPE html>
 <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">
 <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/alert.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x350" name="Alert" subtitle="In-card message — 4 tones, with and without body" -->
+<!-- @dsCard group="Components" viewport="700x510" name="Alert" subtitle="In-card message — 4 tones, with and without body" -->
 <!DOCTYPE html>
 <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">
 <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/app-chrome.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x1490" name="App Chrome" subtitle="Sidebar tones · SidePanel · TopBar · UserMenu · PageToolbar" -->
+<!-- @dsCard group="Components" viewport="700x1580" name="App Chrome" subtitle="Sidebar tones · SidePanel · TopBar · UserMenu · PageToolbar" -->
 <!DOCTYPE html>
 <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">
 <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/banner.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x300" name="Banner" subtitle="Page-level notification — 4 tones · action link · dismissible" -->
+<!-- @dsCard group="Components" viewport="700x500" name="Banner" subtitle="Page-level notification — 4 tones · action link · dismissible" -->
 <!DOCTYPE html>
 <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">
 <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/breadcrumb.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x468" name="Breadcrumb" subtitle="Path trail — hover darkens · long trails collapse to an ellipsis dropdown" -->
+<!-- @dsCard group="Components" viewport="700x750" name="Breadcrumb" subtitle="Path trail — hover darkens · long trails collapse to an ellipsis dropdown" -->
 <!DOCTYPE html>
 <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">
 <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/button-1-base.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x690" name="Button" subtitle="Solid · soft/outline · ghost · text-only · disabled · loading" -->
+<!-- @dsCard group="Components" viewport="700x920" name="Button" subtitle="Solid · soft/outline · ghost · text-only · disabled · loading" -->
 <!DOCTYPE html>
 <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">
 <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/button-2-states.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="1000x810" name="Button Interaction States" subtitle="Rest · hover · press · focus · loading · disabled — every variant, live and forced" -->
+<!-- @dsCard group="Components" viewport="1000x920" name="Button Interaction States" subtitle="Rest · hover · press · focus · loading · disabled — every variant, live and forced" -->
 <!DOCTYPE html>
 <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">
 <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/button-3-sizes-icons.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x720" name="Button Sizes & Icons" subtitle="sm 28 · md 32 · lg 40, Latin and CJK · icon placement · full width" -->
+<!-- @dsCard group="Components" viewport="700x940" name="Button Sizes & Icons" subtitle="sm 28 · md 32 · lg 40, Latin and CJK · icon placement · full width" -->
 <!DOCTYPE html>
 <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">
 <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/button-4-group.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x490" name="Button Group" subtitle="Segmented group · split button · shortcut hint · badge" -->
+<!-- @dsCard group="Components" viewport="700x590" name="Button Group" subtitle="Segmented group · split button · shortcut hint · badge" -->
 <!DOCTYPE html>
 <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">
 <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/cards-indicators.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x450" name="Cards & Indicators" subtitle="Work in progress · Card · StatCard · Badge · IconTile · charts" -->
+<!-- @dsCard group="Components" viewport="700x540" name="Cards & Indicators" subtitle="Work in progress · Card · StatCard · Badge · IconTile · charts" -->
 <!DOCTYPE html>
 <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">
 <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-1-sparkline.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x830" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
+<!-- @dsCard group="Charts" viewport="700x960" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x310" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
+<!-- @dsCard group="Charts" viewport="700x360" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x620" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
+<!-- @dsCard group="Charts" viewport="700x670" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x450" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
+<!-- @dsCard group="Charts" viewport="700x480" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x490" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
+<!-- @dsCard group="Charts" viewport="700x550" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x760" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
+<!-- @dsCard group="Charts" viewport="700x820" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x460" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
+<!-- @dsCard group="Charts" viewport="700x490" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x730" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
+<!-- @dsCard group="Charts" viewport="700x830" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x550" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
+<!-- @dsCard group="Charts" viewport="700x570" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x910" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
+<!-- @dsCard group="Charts" viewport="700x960" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x1370" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
+<!-- @dsCard group="Charts" viewport="700x1550" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x540" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
+<!-- @dsCard group="Charts" viewport="700x590" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x870" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
+<!-- @dsCard group="Charts" viewport="700x940" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x590" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
+<!-- @dsCard group="Charts" viewport="700x660" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x790" name="3D Bars" subtitle="Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read" -->
+<!-- @dsCard group="Charts" viewport="700x840" name="3D Bars" subtitle="Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x1270" name="3D Pie & Donut" subtitle="Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice" -->
+<!-- @dsCard group="Charts" viewport="700x1400" name="3D Pie & Donut" subtitle="Extruded and stepped-stairs slices — drag spins in place, hover lifts a slice" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x480" name="3D Surface" subtitle="z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell" -->
+<!-- @dsCard group="Charts" viewport="700x510" name="3D Surface" subtitle="z = f(x,y) heat-shaded grid — drag to orbit, hover reads a cell" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x520" name="3D Scatter" subtitle="Points in an orientation cube — drag to orbit, hover pins x·y·z" -->
+<!-- @dsCard group="Charts" viewport="700x550" name="3D Scatter" subtitle="Points in an orientation cube — drag to orbit, hover pins x·y·z" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x510" name="3D Ribbon" subtitle="Series as extruded depth bands — the classic 3D area · drag to orbit" -->
+<!-- @dsCard group="Charts" viewport="700x540" name="3D Ribbon" subtitle="Series as extruded depth bands — the classic 3D area · drag to orbit" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x2040" name="Bar Chart" subtitle="Vertical &amp; horizontal — grouped · stacked · 100% stacked · diverging · combo line" -->
+<!-- @dsCard group="Charts" viewport="700x2240" name="Bar Chart" subtitle="Vertical &amp; horizontal — grouped · stacked · 100% stacked · diverging · combo line" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x540" name="Bar List" subtitle="Horizontal labeled bars — top-N rankings, budget consumption" -->
+<!-- @dsCard group="Charts" viewport="700x580" name="Bar List" subtitle="Horizontal labeled bars — top-N rankings, budget consumption" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x570" name="Donut & Pie" subtitle="Composition with a KPI center — hover lifts a segment" -->
+<!-- @dsCard group="Charts" viewport="700x620" name="Donut & Pie" subtitle="Composition with a KPI center — hover lifts a segment" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x480" name="Scatter & Bubble" subtitle="x/y correlation, bubble = third dimension — nearest-point tooltip" -->
+<!-- @dsCard group="Charts" viewport="700x510" name="Scatter & Bubble" subtitle="x/y correlation, bubble = third dimension — nearest-point tooltip" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x480" name="Heatmap" subtitle="Matrix density — sequential blue ramp · diverging red/green variance" -->
+<!-- @dsCard group="Charts" viewport="700x550" name="Heatmap" subtitle="Matrix density — sequential blue ramp · diverging red/green variance" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x470" name="Waterfall" subtitle="Finance bridge — signed deltas, re-baselining totals, running-sum connectors" -->
+<!-- @dsCard group="Charts" viewport="700x500" name="Waterfall" subtitle="Finance bridge — signed deltas, re-baselining totals, running-sum connectors" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Charts" viewport="700x470" name="Bullet" subtitle="Actual vs. target rows with a target tick — misses in red" -->
+<!-- @dsCard group="Charts" viewport="700x530" name="Bullet" subtitle="Actual vs. target rows with a target tick — misses in red" -->
 <!DOCTYPE html>
 <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">
 <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/checkbox.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x370" name="Checkbox" subtitle="Checked · unchecked · indeterminate · disabled · sizes" -->
+<!-- @dsCard group="Components" viewport="700x560" name="Checkbox" subtitle="Checked · unchecked · indeterminate · disabled · sizes" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x260" name="Code Block" subtitle="SQL Preview / JSON export — mono with copy button" -->
+<!-- @dsCard group="Components" viewport="700x300" name="Code Block" subtitle="SQL Preview / JSON export — mono with copy button" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x430" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
+<!-- @dsCard group="Components" viewport="700x570" name="Combobox" subtitle="Typeahead single-select — type to filter · keyboard nav · no-results" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x920" name="Context Menu" subtitle="Action vs single-choice spacing · selected state · icons · plain text · danger item · long list" -->
+<!-- @dsCard group="Components" viewport="700x1380" name="Context Menu" subtitle="Action vs single-choice spacing · selected state · icons · plain text · danger item · long list" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x520" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
+<!-- @dsCard group="Components" viewport="700x710" name="Date Picker" subtitle="Input + month-grid popover — today outlined · selected filled" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x220" name="Diff Value" subtitle="Before → after change display (config migration)" -->
+<!-- @dsCard group="Components" viewport="700x400" name="Diff Value" subtitle="Before → after change display (config migration)" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x220" name="Divider" subtitle="Plain · labeled · vertical" -->
+<!-- @dsCard group="Components" viewport="700x350" name="Divider" subtitle="Plain · labeled · vertical" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x540" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
+<!-- @dsCard group="Components" viewport="700x570" name="Drawer" subtitle="Slide-out detail panel — header · scrollable body · footer actions" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x980" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items · coloured icons · item descriptions" -->
+<!-- @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" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="924x588" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
+<!-- @dsCard group="Components" viewport="924x730" name="Dropzone" subtitle="Empty · drag-over · uploaded · error · disabled" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="924x580" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
+<!-- @dsCard group="Components" viewport="924x660" name="Empty State" subtitle="First-run · no results · error — with and without action" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x400" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
+<!-- @dsCard group="Components" viewport="700x510" name="Icon Button" subtitle="Square ghost icon button · sm 28 · md 32 · lg 40 · active / muted / danger / loading / disabled" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x720" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
+<!-- @dsCard group="Components" viewport="700x830" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x180" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
+<!-- @dsCard group="Components" viewport="700x290" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x250" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
+<!-- @dsCard group="Components" viewport="700x270" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x420" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
+<!-- @dsCard group="Components" viewport="700x440" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x310" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
+<!-- @dsCard group="Components" viewport="700x400" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x370" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
+<!-- @dsCard group="Components" viewport="700x450" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x400" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
+<!-- @dsCard group="Components" viewport="700x540" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x240" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
+<!-- @dsCard group="Components" viewport="700x340" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x520" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
+<!-- @dsCard group="Components" viewport="700x770" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x300" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
+<!-- @dsCard group="Components" viewport="700x340" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
 <!DOCTYPE html>
 <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">
 <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

@@ -1,4 +1,4 @@
-<!-- @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" -->
+<!-- @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" -->
 <!DOCTYPE html>
 <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">
 <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>