@keyfunc/keybricks-ds 2.4.13 → 2.5.0

package/DEPLOY.md

@@ -55,7 +55,7 @@ deploys the documentation site. Watch it under *Build → Pipelines*.
 **5. Cut the first release.**
 
 ```bash
-git tag v2.4.13 && git push --tags
+git tag v2.5.0 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
@@ -187,7 +187,7 @@ GitLab injects `CI_JOB_TOKEN` — use that instead and no secret is stored anywh
 **Install — straight from git** (no registry, no publish; works today)
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.13"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.5.0"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm
@@ -216,7 +216,7 @@ The `pages` job copies the static tree into `public/` on every default-branch co
 Your Pages URL (shown under *Deploy → Pages* after the first run) then serves:
 
 - `index.html` — the browsable system: every card live in an iframe, EN / 中文 / 日本語,
-  light and dark, View Code on each component.
+  light and dark, a "Show code" bar (React / Vue 3 usage) under each example.
 - `gallery.html` — filterable thumbnail grid.
 - `DESIGN.md` — the rules file to hand to an AI coding agent or a new hire.
 
@@ -237,7 +237,7 @@ semantic layer. That is what makes dark mode cost nothing.
 ## Runtime checks
 
 `_tests/` holds browser pages that exercise the real components: `react-runtime.html` (the compiled
-bundle), `table-selection.html` (Table loaded from source: checkbox spacing at every width, code chips, two-line rows, sorting), `menu-react.html` / `menu-vue.html` (Menu / ContextMenu coloured icons, item descriptions, side by alignment and flip), `addrow-react.html` / `addrow-vue.html` (the SmartTable add row in both frameworks, from source: colour, weight, hover hooks, keyboard, `stickyAddRow`), `smart-table-density.html` (SmartTable from source: default / compact rows, the Row height menu, controlled density), `relative-time-picker.html` (RelativeTimePicker from source: helpers, tiers, dialog, keyboard), `tree-reorder.html` (Tree from source: insert-between on leaves and folder edges, self/subtree rejection), `vue-runtime.html` (the `.vue` files, loaded with vue3-sfc-loader), `cards-interaction*.html`
+bundle), `table-selection.html` (Table loaded from source: checkbox spacing at every width, code chips, two-line rows, sorting), `listrow.html` (ListRow static vs clickable rows, keyboard, alignment — React and Vue), `vue-table-cells.html` (Vue Table #cell-<key> slots and VNode renders), `menu-react.html` / `menu-vue.html` (Menu / ContextMenu coloured icons, item descriptions, side by alignment and flip), `addrow-react.html` / `addrow-vue.html` (the SmartTable add row in both frameworks, from source: colour, weight, hover hooks, keyboard, `stickyAddRow`), `smart-table-density.html` (SmartTable from source: default / compact rows, the Row height menu, controlled density), `relative-time-picker.html` (RelativeTimePicker from source: helpers, tiers, dialog, keyboard), `tree-reorder.html` (Tree from source: insert-between on leaves and folder edges, self/subtree rejection), `vue-runtime.html` (the `.vue` files, loaded with vue3-sfc-loader), `cards-interaction*.html`
 (clicks through the documentation demos) and `icon-rules.html` (the Keybricks glyphs against the drawing rules). Serve the repo root (`npx serve .`), open a page and read the
 console — every line starts with PASS or FAIL. Run them after changing a component in either framework.
 `measure-cards.html` is a tool, not a test: it measures each documentation page at its card width so the

package/INTEGRATION.md

@@ -31,7 +31,7 @@ Not using a registry yet? A git dependency works with no publishing at all — t
 has no build step, so npm can use the checkout as-is:
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.13"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.5.0"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -81,10 +81,7 @@ export function LoginForm() {
 
 ```vue
 <script setup>
-import Button from '@keyfunc/keybricks-ds/components/buttons/Button.vue'
-import Field from '@keyfunc/keybricks-ds/components/forms/Field.vue'
-import Input from '@keyfunc/keybricks-ds/components/forms/Input.vue'
-import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
+import { Button, Field, Input, Textarea } from '@keyfunc/keybricks-ds/vue'
 </script>
 
 <template>
@@ -97,6 +94,10 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 </template>
 ```
 
+Vue components come from `@keyfunc/keybricks-ds/vue` — the same names as React, one import line. (React and Vue each have a `Button`, so the two frameworks use two entry points.) Deep paths such as `@keyfunc/keybricks-ds/components/buttons/Button.vue` still work.
+
+Every example on the documentation site has a **Show code** bar: the React and Vue code that builds that example, ready to paste.
+
 That is the whole integration. The `data-size="lg"` on the form is the size tier — every control
 inside it is 40px tall; leave it off and they are the app default, 32px (see *Size tiers* below).
 Everything below is reference material.
@@ -521,6 +522,16 @@ Pin a minor range and update deliberately:
 - **Tokens outside CSS.** `tokens.json` / `tokens.js` / `tokens.d.ts` gained the tier tokens
   (`--control-*`, `--bar-h`, `--group-gap`, …) — 352 light tokens in all (2.0.2 adds `--danger-soft-hover`).
 
+### 2.5.0
+
+- **Show code under every example.** Each example on the documentation site has a Show code bar with the React and Vue 3 code that builds it — imports from `@keyfunc/keybricks-ds` / `@keyfunc/keybricks-ds/vue`, ready to paste. The label follows the site language. The site no longer shows components' own source (it ships in the package).
+- **Vue imports in one line:** `import { Button, Table } from '@keyfunc/keybricks-ds/vue'` (the entry already existed; the docs now use it).
+- **Vue `Table` custom cells** — `<template #cell-<key>="{ value, row, index }">` slots, or `render` returning a VNode (`h()`). Before, a render result was printed as text.
+- **Vue `Tree` row actions** — `#row-actions="{ node }"` slot or `rowActions(node)` returning a VNode, shown on hover / focus. Before, `rowActions` was accepted but never drawn.
+- **Vue `Timeline`** — an item's `body` may be a VNode; `#body="{ item, index }"` slot.
+- **`ListRow`** — the chevron shows only when the row has content to expand; the row is a button only with `onClick` (Vue: `@click`): focusable, Enter / Space, `aria-expanded`. Static rows get no pointer or hover. Expanded content aligns under the title, title and meta truncate, a trailing `0` shows, side padding is `--edge-pad`.
+- Includes 2.4.14 (CJK font set only at declared-language boundaries, so icon and code fonts inside keep their family).
+
 ### 2.4.13
 
 - **`Menu` / `ContextMenu` items take `iconColor` and `description`.** `iconColor` is any CSS colour for that item's icon (e.g. `var(--cat-join)`); omit it and the icon keeps the row's text colour. `description` shows a 300px panel beside the menu while the item is hovered or focused — its icon and label, then the text — linked with `aria-describedby`.
@@ -726,7 +737,7 @@ Release mechanics, the CI pipeline and the Pages site are documented in `DEPLOY.
 ## Getting help
 
 - **Documentation site** — the GitLab Pages build: `index.html` for the browsable system
-  (every card live, EN / 中文 / 日本語, light and dark, View Code per component) and
+  (every card live, EN / 中文 / 日本語, light and dark, a "Show code" bar with React / Vue 3 usage under each example) and
   `gallery.html` for the filterable thumbnail grid.
 - **Props contract** — the `.d.ts` next to each component.
 - **Usage notes** — the `.prompt.md` in each component group.

package/changelog.js

@@ -3,6 +3,16 @@
    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.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>