@keyfunc/keybricks-ds 2.4.11 → 2.4.13

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.11 && git push --tags
+git tag v2.4.13 && 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.11"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.13"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm
@@ -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), `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), `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.11"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.13"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -521,6 +521,17 @@ 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.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`.
+- **Panel side:** `Menu` opens it away from the trigger's edge — `align="end"` → left, `align="start"` → right; `ContextMenu` defaults to right. Both flip when the viewport has no room; `descriptionSide` overrides.
+- `Menu` gains `defaultOpen` (docs and demos). Menus without descriptions render exactly as before.
+
+### 2.4.12
+
+- **Documentation site only — no component or token changes.** The View Code source text and the icon search indexes moved to `_src/` at the repo root, out of the compiled bundle the docs pages load (1.9 MB → 0.8 MB). `assets/icons/icon-index.json` and `unicons-index.json` stay for apps; the `.js` copies of those indexes are gone from `assets/icons/`.
+- The home page loads the cards you jump to from the sidebar right away (they used to wait for a scroll), and the Pages job publishes gzip copies of text files.
+
 ### 2.4.11
 
 - **`SmartTable` add row** — the "+ New" row at the end of the grid is the system's add-row: `--action-primary` text and 13px plus at `--weight-medium`; hover `--bg-inset` with `--action-primary-hover` (`[data-addrow]` in `tokens/hover.css` — load `keybricks.css`, or add `tokens/hover.css` if you import `styles.css` alone). It is a focusable `role="button"` (Enter / Space add a row) with the global focus ring drawn inset.

package/_adherence.oxlintrc.json

@@ -16,7 +16,6 @@
         "patterns": [
           {
             "group": [
-              "assets/icons/**",
               "changelog.js",
               "components/**",
               "components/_shared/**",
@@ -186,8 +185,12 @@
         "message": "<ConfigPanel> size must be one of 'sm' | 'md' | 'lg'."
       },
       {
-        "selector": "JSXOpeningElement[name.name='ContextMenu'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|onSelect|size|style|key|ref|className|style|children)$/]",
-        "message": "<ContextMenu> doesn't accept that prop. Declared props: items, onSelect, size, style."
+        "selector": "JSXOpeningElement[name.name='ContextMenu'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|onSelect|descriptionSide|size|style|key|ref|className|style|children)$/]",
+        "message": "<ContextMenu> doesn't accept that prop. Declared props: items, onSelect, descriptionSide, size, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ContextMenu'] > JSXAttribute[name.name='descriptionSide'] > Literal[value!=/^(?:left|right)$/]",
+        "message": "<ContextMenu> descriptionSide must be one of 'left' | 'right'."
       },
       {
         "selector": "JSXOpeningElement[name.name='ContextMenu'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
@@ -326,13 +329,17 @@
         "message": "<Lucide> doesn't accept that prop. Declared props: name, size, strokeWidth, color, className, style."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Menu'] > JSXAttribute > JSXIdentifier[name!=/^(?:trigger|items|onSelect|align|style|key|ref|className|style|children)$/]",
-        "message": "<Menu> doesn't accept that prop. Declared props: trigger, items, onSelect, align, style."
+        "selector": "JSXOpeningElement[name.name='Menu'] > JSXAttribute > JSXIdentifier[name!=/^(?:trigger|items|onSelect|align|descriptionSide|defaultOpen|style|key|ref|className|style|children)$/]",
+        "message": "<Menu> doesn't accept that prop. Declared props: trigger, items, onSelect, align, descriptionSide, defaultOpen, style."
       },
       {
         "selector": "JSXOpeningElement[name.name='Menu'] > JSXAttribute[name.name='align'] > Literal[value!=/^(?:start|end)$/]",
         "message": "<Menu> align must be one of 'start' | 'end'."
       },
+      {
+        "selector": "JSXOpeningElement[name.name='Menu'] > JSXAttribute[name.name='descriptionSide'] > Literal[value!=/^(?:left|right)$/]",
+        "message": "<Menu> descriptionSide must be one of 'left' | 'right'."
+      },
       {
         "selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|placement|children|style|key|ref|className|style|children)$/]",
         "message": "<Tooltip> doesn't accept that prop. Declared props: label, placement, children, style."

package/changelog.js

@@ -3,6 +3,14 @@
    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.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> で色付け可能に。指定しなければ単色のまま。"] },
+] },
+{ v: "2.4.12", date: "2026-10-28", items: [
+  { tag: "fixed", t: ["Home page: cards you jump to from the sidebar load right away instead of staying on “loading…” until you scroll.", "首页：从侧边栏跳转到的组件卡片会立即加载，不再一直显示“加载中…”直到滚动页面。", "ホーム：サイドバーからジャンプしたカードがすぐ読み込まれるように。スクロールするまで「読み込み中…」のままだった問題を修正。"] },
+  { tag: "improved", t: ["The documentation site loads faster: its component bundle is less than half the size (1.9 MB → 0.8 MB), and files are served compressed.", "文档站加载更快：组件包体积减少一半以上（1.9 MB → 0.8 MB），文件改为压缩传输。", "ドキュメントサイトの読み込みを高速化：コンポーネントバンドルを半分以下に（1.9 MB → 0.8 MB）、ファイルを圧縮配信。"] },
+] },
 { v: "2.4.11", date: "2026-10-28", items: [
   { tag: "improved", t: ["<code>SmartTable</code> “+ New” row: blue text and plus at medium weight, a grey hover, and keyboard support (Tab, then Enter or Space).", "<code>SmartTable</code> 的 “+ New” 行改为蓝色文字和加号、中等字重，悬停显示灰底，并支持键盘操作（Tab 选中后按 Enter 或空格）。", "<code>SmartTable</code> の「+ New」行を青い文字とプラス、ミディアムの太さに。ホバーでグレーの背景、キーボード操作（Tab のあと Enter / Space）に対応。"] },
   { tag: "new", t: ["<code>SmartTable</code> <code>stickyAddRow</code> keeps the add row at the bottom while the table scrolls; <code>labels.newRow</code> sets its text.", "<code>SmartTable</code> 新增 <code>stickyAddRow</code>：表格滚动时新增行固定在底部；<code>labels.newRow</code> 可设置文字。", "<code>SmartTable</code> に <code>stickyAddRow</code> を追加：スクロール中も追加行を下端に固定。<code>labels.newRow</code> で文字を設定。"] },

package/components/_cards/dropdown-menu.card.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" viewport="700x420" name="Dropdown Menu" subtitle="Button · icon-only · ghost text · avatar triggers — icon items & plain-text items" -->
+<!-- @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" -->
 <!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>
@@ -6,10 +6,18 @@
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 <script src="../_shared/view-source.js"></script>
-<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
+<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}.lbl{font-size:var(--text-xs);color:var(--text-muted);display:block;padding-bottom:10px}.sec{margin-top:36px;padding-top:16px;border-top:1px solid var(--border-subtle)}.note{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);margin:0 0 12px;text-wrap:pretty}.bar{display:flex;align-items:center;gap:8px;height:250px;align-items:flex-start}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">
-const { Menu, Button, IconButton, Avatar } = window.KeybricksDesignSystem_71231a;
+const { Menu, Button, IconButton, Avatar, SearchInput } = window.KeybricksDesignSystem_71231a;
+const MODEL_TYPES = [
+  { label: "Consolidation Model", icon: "consolidation", iconColor: "var(--cat-transform)", description: "For statutory or management consolidation. Consolidation needs consolidation groups, so attach an Ownership Model. If the data spans several currencies, also attach a Rate Model to convert it." },
+  { label: "Planning/Forecasting Model", icon: "trending-up", iconColor: "var(--cat-join)", description: "For budgeting or forecasting. If the data spans several currencies, attach a Rate Model to convert it." },
+  { label: "Rate Model", icon: "dimension-currency", iconColor: "var(--cat-source)", description: "Stores the exchange rates used to convert between currencies." },
+  { label: "Ownership Model", icon: "ownership", iconColor: "var(--cat-merge)", description: "Stores the consolidation group structure: the entities in each group, direct and indirect holdings, control and consolidation percentages." },
+];
+/* Demo only: hover the second item of each open menu so the description panel shows without a pointer. */
+const preHover = () => document.querySelectorAll(".pre [role=menu]").forEach(m => { const b = m.querySelectorAll("[role=menuitem]")[1]; if (b) b.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); });
 const withIcons = [{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{divider:true},{label:"Delete",icon:"trash-2",danger:true}];
 const plainText = [{label:"Name"},{label:"Date modified"},{label:"Size"},{divider:true},{label:"Custom order"}];
 function Sheet(){return <div className="g">
@@ -33,6 +41,21 @@ function Sheet(){return <div className="g">
     <Menu trigger={<Button variant="outline" icon="filter" iconPosition="right">Filter</Button>} items={[{label:"All"},{label:"Active only"},{label:"Archived only"}]}/>
   </div>
 </div>;}
-ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
-if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Menu.jsx","path":"../feedback/Menu.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Avatar.jsx","path":"../display/Avatar.jsx"}]); }, 0);
+function Described(){return <div>
+  <div className="sec"><span className="lbl">Coloured icons + descriptions — trigger at the right: <code>align="end"</code>, the description opens on the left</span>
+    <p className="note">Each item takes <code>iconColor</code> (any colour token; omit it for a single-colour icon) and <code>description</code>. Hovering or focusing an item shows its icon, label and description in a 300px panel beside the menu. The panel opens on the side away from the trigger's edge and flips if the window has no room there.</p>
+    <div className="bar pre" style={{justifyContent:"flex-end"}}>
+      <SearchInput placeholder="Search models" style={{width:200}}/>
+      <Menu align="end" defaultOpen trigger={<Button variant="primary" icon="plus">New Model</Button>} items={MODEL_TYPES}/>
+    </div>
+  </div>
+  <div className="sec"><span className="lbl">Trigger at the far left: <code>align="start"</code>, the description opens on the right · single-colour icons</span>
+    <div className="bar pre">
+      <Menu defaultOpen trigger={<Button variant="outline" icon="plus">New Model</Button>} items={MODEL_TYPES.map(({ iconColor, ...it }) => it)}/>
+    </div>
+  </div>
+</div>;}
+ReactDOM.createRoot(document.getElementById("root")).render(<><Sheet/><Described/></>);
+setTimeout(preHover, 300);
+if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Menu.jsx","path":"../feedback/Menu.jsx"},{"name":"ContextMenu.jsx","path":"../feedback/ContextMenu.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Avatar.jsx","path":"../display/Avatar.jsx"}]); }, 0);
 </script></body></html>

package/components/_cards/icons-1-core.card.html

@@ -6,7 +6,7 @@
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 <script src="../_shared/svg-download.js"></script>
-<script src="../../assets/icons/icon-index.js"></script>
+<script src="../../_src/icon-index.js"></script>
 <style>body{margin:0;background:var(--bg-surface);padding:14px 16px;box-sizing:border-box}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">

package/components/_cards/icons-2-feather.card.html

@@ -6,7 +6,7 @@
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 <script src="../_shared/svg-download.js"></script>
-<script src="../../assets/icons/icon-index.js"></script>
+<script src="../../_src/icon-index.js"></script>
 <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">

package/components/_cards/icons-3-unicons.card.html

@@ -6,7 +6,7 @@
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 <script src="../_shared/svg-download.js"></script>
-<script src="../../assets/icons/unicons-index.js"></script>
+<script src="../../_src/unicons-index.js"></script>
 <style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:var(--text-xs);color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">

package/components/_shared/view-source.js

@@ -1,13 +1,17 @@
 (function(){
 var bundles = {};
-/* Component source is loaded on demand, one script per folder (components/_shared/src-<dir>.js).
+/* Component source is loaded on demand, one script per folder (_src/src-<dir>.js at the project root).
+   It lives outside components/ so the design-system compiler keeps it out of _ds_bundle.js — ~870 KB of
+   source text every card and the home page would otherwise download and parse just to show View Code.
+   _src/ also holds the icon search indexes (icon-index.js, unicons-index.js) that only the icon gallery cards load;
+   assets/icons/*.json keep the same data for apps.
    A <script> tag works from file:// and from any host; fetch() of a sibling source file does not. */
 function loadBundle(dir, done){
   if (!dir || bundles[dir] === 'done') return done();
   if (bundles[dir]) { bundles[dir].push(done); return; }
   bundles[dir] = [done];
   var s = document.createElement('script');
-  s.src = '../_shared/src-' + dir + '.js';
+  s.src = '../../_src/src-' + dir + '.js';
   s.onload = s.onerror = function(){
     var q = bundles[dir]; bundles[dir] = 'done';
     q.forEach(function(fn){ fn(); });

package/components/feedback/ContextMenu.d.ts

@@ -2,8 +2,10 @@ import * as React from "react";
 /** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row.
  *  Action menus keep rows flush; a single-choice menu (any item `selected`) spaces rows 2px apart. Dividers keep 4px above and below. */
 export interface ContextMenuProps {
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
+  items?: { label?: string; icon?: string; /** Colour for this item's icon — any CSS colour, e.g. "var(--cat-join)". Omit for a single-colour icon in the row's text colour. */ iconColor?: string; /** Shown in a 300px panel beside the menu while the item is hovered or focused: the item's icon and label, then this text. */ description?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
+  /** Side the description panel opens on (default "right"); it flips to the other side when the viewport has no room. */
+  descriptionSide?: "left" | "right";
   /** Size tier of the rows. Omit to inherit the tier of the control that opened the menu (the default). */
   size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;

package/components/feedback/ContextMenu.jsx

@@ -1,22 +1,60 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+const HINT_W = 300, HINT_GAP = 8;
+
+/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, iconColor, description, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
  *  selected: true marks the current choice of a single-choice menu (section switcher, language picker): --bg-hover fill, --weight-medium
  *  --text-heading, no checkmark. A menu with any selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree) so a hovered
- *  fill never touches the selected one; an action menu (nothing selected) keeps its rows flush. Dividers keep 4px above and below. */
-export function ContextMenu({ items = [], onSelect, size, style }) {
+ *  fill never touches the selected one; an action menu (nothing selected) keeps its rows flush. Dividers keep 4px above and below.
+ *  iconColor: any CSS colour for that item's icon (e.g. "var(--cat-join)"); without it the icon takes the row's text colour.
+ *  description: hovering or focusing the item shows a 300px panel beside the menu — the item's icon and label, then the description.
+ *  It opens on descriptionSide ("right" by default) and flips to the other side when the viewport has no room. */
+export function ContextMenu({ items = [], onSelect, size, descriptionSide = "right", style }) {
   const [hover, setHover] = React.useState(-1);
+  const [hint, setHint] = React.useState(-1);
+  const [side, setSide] = React.useState(descriptionSide);
+  const wrap = React.useRef(null);
+  const hintId = React.useId();
   const choice = items.some((it) => it && it.selected);
-  return (
-    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", gap: choice ? 2 : 0, ...style }}>
+  const hasHint = items.some((it) => it && it.description);
+  const show = (i) => {
+    setHover(i);
+    if (!hasHint) return;
+    const it = items[i];
+    if (!it || !it.description) { setHint(-1); return; }
+    const r = wrap.current && wrap.current.getBoundingClientRect();
+    let s = descriptionSide;
+    if (r) { if (s === "right" && r.right + HINT_GAP + HINT_W > window.innerWidth && r.left - HINT_GAP - HINT_W >= 0) s = "left"; else if (s === "left" && r.left - HINT_GAP - HINT_W < 0 && r.right + HINT_GAP + HINT_W <= window.innerWidth) s = "right"; }
+    setSide(s); setHint(i);
+  };
+  const onBlur = (e) => { setHover(-1); if (hasHint && !(wrap.current && wrap.current.contains(e.relatedTarget))) setHint(-1); };
+  const menu = (
+    <div role="menu" data-size={hasHint ? undefined : size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", gap: choice ? 2 : 0, ...style }}>
       {items.map((it, i) => it.divider ? <div key={i} role="separator" style={{ height: 1, flexShrink: 0, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
         <button key={i} type="button" onClick={() => onSelect && onSelect(it.label)}
-          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
-          role={choice ? "menuitemradio" : "menuitem"} aria-checked={choice ? !!it.selected : undefined} style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", flexShrink: 0, padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: it.selected || hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontWeight: it.selected ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
-          {it.icon ? <Icon name={it.icon} size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /> : null}{it.label}
+          onMouseEnter={() => show(i)} onMouseLeave={() => setHover(-1)} onFocus={() => show(i)} onBlur={onBlur}
+          aria-describedby={hint === i ? hintId : undefined}
+          role={choice ? "menuitemradio" : "menuitem"} aria-checked={choice ? !!it.selected : undefined} style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", flexShrink: 0, padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: it.selected || hover === i || hint === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontWeight: it.selected ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
+          {it.icon ? <Icon name={it.icon} size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)", flexShrink: 0, ...(it.iconColor ? { color: it.iconColor } : null) }} /> : null}{it.label}
         </button>
       ))}
     </div>
   );
+  if (!hasHint) return menu;
+  const h = items[hint];
+  return (
+    <div ref={wrap} data-size={size} onMouseLeave={() => setHint(-1)} style={{ position: "relative", display: "inline-flex" }}>
+      {menu}
+      {h && h.description ? (
+        <div id={hintId} role="tooltip" style={{ position: "absolute", top: 0, [side === "left" ? "right" : "left"]: `calc(100% + ${HINT_GAP}px)`, width: HINT_W, boxSizing: "border-box", padding: "12px 14px", display: "flex", flexDirection: "column", gap: 6, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", fontFamily: "var(--font-sans)", animation: "kb-fade-in var(--dur) var(--ease-out)" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {h.icon ? <Icon name={h.icon} size={16} style={{ flexShrink: 0, color: h.iconColor || (h.danger ? "var(--danger)" : "var(--text-heading)") }} /> : null}
+            <span style={{ fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontWeight: "var(--weight-medium)", color: "var(--text-heading)" }}>{h.label}</span>
+          </div>
+          <span style={{ fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", textWrap: "pretty" }}>{h.description}</span>
+        </div>
+      ) : null}
+    </div>
+  );
 }

package/components/feedback/ContextMenu.vue

@@ -1,21 +1,61 @@
 <script setup>
 import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, iconColor, description, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
 // selected: true marks the current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. A menu with any
 // selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree); an action menu keeps its rows flush. Dividers keep 4px above and below.
-const props = defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
+// iconColor: any CSS colour for that item's icon; without it the icon takes the row's text colour.
+// description: hovering or focusing the item shows a 300px panel beside the menu (icon + label, then the description), on descriptionSide
+// ("right" by default), flipping to the other side when the viewport has no room.
+const props = defineProps({ items: { type: Array, default: () => [] }, size: String, descriptionSide: { type: String, default: 'right' }, style: Object })
 const choice = computed(() => props.items.some(it => it && it.selected))
+const hasHint = computed(() => props.items.some(it => it && it.description))
 const emit = defineEmits(['select'])
-const hover = ref(-1)
+const hover = ref(-1), hint = ref(-1), side = ref(props.descriptionSide), wrap = ref(null)
+const HINT_W = 300, HINT_GAP = 8
+const hintId = 'kb-cm-hint-' + Math.random().toString(36).slice(2, 8)
+function show(i) {
+  hover.value = i
+  if (!hasHint.value) return
+  const it = props.items[i]
+  if (!it || !it.description) { hint.value = -1; return }
+  const r = wrap.value && wrap.value.getBoundingClientRect()
+  let s = props.descriptionSide
+  if (r) { if (s === 'right' && r.right + HINT_GAP + HINT_W > window.innerWidth && r.left - HINT_GAP - HINT_W >= 0) s = 'left'; else if (s === 'left' && r.left - HINT_GAP - HINT_W < 0 && r.right + HINT_GAP + HINT_W <= window.innerWidth) s = 'right' }
+  side.value = s; hint.value = i
+}
+function onBlur(e) { hover.value = -1; if (hasHint.value && !(wrap.value && wrap.value.contains(e.relatedTarget))) hint.value = -1 }
+const cur = computed(() => props.items[hint.value])
+const menuStyle = computed(() => ({ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', gap: choice.value ? '2px' : 0, ...props.style }))
+const rowStyle = (it, i) => ({ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', flexShrink: 0, padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: it.selected || hover.value === i || hint.value === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontWeight: it.selected ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' })
+const iconStyle = (it) => ({ width: 'var(--control-icon)', height: 'var(--control-icon)', flexShrink: 0, ...(it.iconColor ? { color: it.iconColor } : null) })
+const hintStyle = computed(() => ({ position: 'absolute', top: 0, [side.value === 'left' ? 'right' : 'left']: `calc(100% + ${HINT_GAP}px)`, width: HINT_W + 'px', boxSizing: 'border-box', padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: '6px', background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', fontFamily: 'var(--font-sans)', animation: 'kb-fade-in var(--dur) var(--ease-out)' }))
 </script>
 <template>
-  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', gap: choice ? '2px' : 0, ...style }">
+  <div v-if="hasHint" ref="wrap" :data-size="size" @mouseleave="hint = -1" :style="{ position: 'relative', display: 'inline-flex' }">
+    <div role="menu" :style="menuStyle">
+      <template v-for="(it, i) in items" :key="i">
+        <div v-if="it.divider" role="separator" :style="{ height: '1px', flexShrink: 0, background: 'var(--border-subtle)', margin: '4px 0' }" />
+        <button v-else type="button" @click="emit('select', it.label)" @mouseenter="show(i)" @mouseleave="hover = -1" @focus="show(i)" @blur="onBlur"
+          :aria-describedby="hint === i ? hintId : undefined" :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="rowStyle(it, i)">
+          <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" />{{ it.label }}
+        </button>
+      </template>
+    </div>
+    <div v-if="cur && cur.description" :id="hintId" role="tooltip" :style="hintStyle">
+      <div :style="{ display: 'flex', alignItems: 'center', gap: '8px' }">
+        <Icon v-if="cur.icon" :name="cur.icon" :size="16" :style="{ flexShrink: 0, color: cur.iconColor || (cur.danger ? 'var(--danger)' : 'var(--text-heading)') }" />
+        <span :style="{ fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-heading)' }">{{ cur.label }}</span>
+      </div>
+      <span :style="{ fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-secondary)', textWrap: 'pretty' }">{{ cur.description }}</span>
+    </div>
+  </div>
+  <div v-else role="menu" :data-size="size" :style="menuStyle">
     <template v-for="(it, i) in items" :key="i">
       <div v-if="it.divider" role="separator" :style="{ height: '1px', flexShrink: 0, background: 'var(--border-subtle)', margin: '4px 0' }" />
-      <button v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1"
-        :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', flexShrink: 0, padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: it.selected || hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontWeight: it.selected ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
-        <Icon v-if="it.icon" :name="it.icon" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" />{{ it.label }}
+      <button v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1" @focus="hover = i" @blur="hover = -1"
+        :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="rowStyle(it, i)">
+        <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" />{{ it.label }}
       </button>
     </template>
   </div>

package/components/feedback/Menu.d.ts

@@ -2,9 +2,13 @@ import * as React from "react";
 /** Trigger-anchored dropdown menu (reuses ContextMenu's look). Addition — for "Show ⌄"-style buttons and user menus. */
 export interface MenuProps {
   trigger: React.ReactNode;
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
+  items?: { label?: string; icon?: string; /** Colour for this item's icon — any CSS colour, e.g. "var(--cat-join)". Omit for a single-colour icon in the row's text colour. */ iconColor?: string; /** Shown in a 300px panel beside the menu while the item is hovered or focused: the item's icon and label, then this text. */ description?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
   align?: "start" | "end";
+  /** Side for item descriptions. Default: away from the trigger's edge — "left" when align="end", "right" when align="start". Flips if the viewport has no room. */
+  descriptionSide?: "left" | "right";
+  /** Start open (docs and demos). */
+  defaultOpen?: boolean;
   style?: React.CSSProperties;
 }
 export declare function Menu(props: MenuProps): JSX.Element;

package/components/feedback/Menu.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { ContextMenu } from "./ContextMenu.jsx";
 
-/** Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click. */
-export function Menu({ trigger, items = [], onSelect, align = "start", style }) {
-  const [open, setOpen] = React.useState(false);
+/** Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click.
+ *  Items take ContextMenu's fields (icon, iconColor, description, …). Item descriptions open on the side away from the trigger's edge:
+ *  align="end" (trigger at the right) → left, align="start" (trigger at the left) → right; descriptionSide overrides. */
+export function Menu({ trigger, items = [], onSelect, align = "start", descriptionSide, defaultOpen = false, style }) {
+  const [open, setOpen] = React.useState(defaultOpen);
   const ref = React.useRef(null);
   React.useEffect(() => {
     if (!open) return;
@@ -16,7 +18,7 @@ export function Menu({ trigger, items = [], onSelect, align = "start", style })
       <span onClick={() => setOpen((o) => !o)}>{trigger}</span>
       {open ? (
         <div style={{ position: "absolute", top: "calc(100% + 6px)", [align === "end" ? "right" : "left"]: 0, zIndex: "var(--z-menu)" }}>
-          <ContextMenu items={items} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />
+          <ContextMenu items={items} descriptionSide={descriptionSide || (align === "end" ? "left" : "right")} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />
         </div>
       ) : null}
     </div>

package/components/feedback/Menu.vue

@@ -2,9 +2,11 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import ContextMenu from './ContextMenu.vue'
 // Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click.
-const props = defineProps({ items: { type: Array, default: () => [] }, align: { type: String, default: 'start' }, style: Object })
+// Items take ContextMenu's fields (icon, iconColor, description, …). Descriptions open on the side away from the trigger's edge:
+// align="end" → left, align="start" → right; descriptionSide overrides.
+const props = defineProps({ items: { type: Array, default: () => [] }, align: { type: String, default: 'start' }, descriptionSide: String, defaultOpen: Boolean, style: Object })
 const emit = defineEmits(['select'])
-const open = ref(false)
+const open = ref(props.defaultOpen)
 const root = ref(null)
 function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
 onMounted(() => document.addEventListener('mousedown', onDoc))
@@ -15,7 +17,7 @@ function select(l) { open.value = false; emit('select', l) }
   <div ref="root" :style="{ position: 'relative', display: 'inline-flex', ...style }">
     <span @click="open = !open"><slot name="trigger" /></span>
     <div v-if="open" :style="{ position: 'absolute', top: 'calc(100% + 6px)', [align === 'end' ? 'right' : 'left']: 0, zIndex: 'var(--z-menu)' }">
-      <ContextMenu :items="items" @select="select" />
+      <ContextMenu :items="items" :description-side="descriptionSide || (align === 'end' ? 'left' : 'right')" @select="select" />
     </div>
   </div>
 </template>

package/index.html

@@ -192,7 +192,7 @@ section{margin-bottom:52px;scroll-margin-top:78px}
 const GROUPS=[["Brand","品牌","ブランド"],["Colors","颜色","カラー"],["Type","字体排印","タイポグラフィ"],["Foundations","基础规范","基盤仕様"],["Components","组件","コンポーネント"],["Charts","图表","チャート"],["Icons","图标库","アイコン"]];
 
 const S={
-brandsub:["Design System · v2.4.11","设计系统 · v2.4.11","デザインシステム · v2.4.11"],
+brandsub:["Design System · v2.4.13","设计系统 · v2.4.13","デザインシステム · v2.4.13"],
 doc_readme:["Readme","说明文档","ドキュメント"],
 doc_design:["DESIGN.md","下载 DESIGN.md","DESIGN.md"],
 doc_integration:["Integration","接入指南","導入ガイド"],
@@ -355,7 +355,7 @@ function settleOn(target){
   const pin=()=>{const d=target.getBoundingClientRect().top-72;if(Math.abs(d)>1)window.scrollTo({top:sc.scrollTop+d,behavior:"instant"});markNav();};
   const ro=new ResizeObserver(pin);ro.observe(lib);document.querySelectorAll("#view-library .frame-wrap").forEach(w=>ro.observe(w));
   const evs=["wheel","touchmove","keydown","mousedown"];
-  const off=()=>{ro.disconnect();markNav();clearTimeout(t);evs.forEach(e=>window.removeEventListener(e,off,true));if(settleOff===off)settleOff=null;};
+  const off=()=>{ro.disconnect();markNav();clearTimeout(t);evs.forEach(e=>window.removeEventListener(e,off,true));if(settleOff===off)settleOff=null;loadNearFrames();};
   evs.forEach(e=>window.addEventListener(e,off,{capture:true,passive:true}));
   const t=setTimeout(off,10000);settleOff=off;
   pin();requestAnimationFrame(pin);
@@ -527,21 +527,29 @@ function fit(f){
   f.style.transform=scale<1?"scale("+scale+")":"none";
   wrap.style.height=Math.round(h*scale)+"px";
 }
+/* A card loads when it comes within 500px of the viewport — also while a jump is being pinned (settleOn): the pin
+   exists to absorb exactly those cards growing. (An early return here once left the jumped-to cards on "loading…" until
+   the reader scrolled, since an observer reports an element only when its intersection changes.) */
+let frameIO=null;
+function loadFrame(f){
+  if(!f.dataset.src)return;
+  if(frameIO)frameIO.unobserve(f);
+  f.addEventListener("load",()=>{
+    if(f.__ph)f.__ph.remove();
+    pushTheme(f);fit(f);
+    [120,400,1000,2000].forEach(d=>setTimeout(()=>{pushTheme(f);fit(f);},d));
+    try{new f.contentWindow.ResizeObserver(()=>fit(f)).observe(f.contentDocument.documentElement);}catch(err){}
+  });
+  f.src=f.dataset.src;f.removeAttribute("data-src");
+}
+/* Safety net after a pinned jump ends: load whatever pending card is now near the viewport. */
+function loadNearFrames(){
+  document.querySelectorAll("iframe[data-src]").forEach(f=>{const r=f.__wrap?f.__wrap.getBoundingClientRect():f.getBoundingClientRect();if(r.bottom>-500&&r.top<innerHeight+500)loadFrame(f);});
+}
 function watchFrames(){
   const frames=[...document.querySelectorAll("iframe[data-src]")];
-  const io=new IntersectionObserver(es=>{
-    if(settleOff)return;
-    es.forEach(e=>{
-      if(!e.isIntersecting)return;
-      const f=e.target;io.unobserve(f);
-      f.addEventListener("load",()=>{
-        if(f.__ph)f.__ph.remove();
-        pushTheme(f);fit(f);
-        [120,400,1000,2000].forEach(d=>setTimeout(()=>{pushTheme(f);fit(f);},d));
-        try{new f.contentWindow.ResizeObserver(()=>fit(f)).observe(f.contentDocument.documentElement);}catch(err){}
-      });
-      f.src=f.dataset.src;f.removeAttribute("data-src");
-    });
+  const io=frameIO=new IntersectionObserver(es=>{
+    es.forEach(e=>{if(e.isIntersecting)loadFrame(e.target);});
   },{rootMargin:"500px 0px"});
   frames.forEach(f=>io.observe(f));
   addEventListener("resize",()=>document.querySelectorAll("iframe").forEach(f=>{if(f.__wrap&&!f.dataset.src)fit(f);}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.11",
+  "version": "2.4.13",
   "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",