@keyfunc/keybricks-ds 2.4.13 → 2.5.1

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.1 && 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.1"
 ```
 
 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), `keyboard.html` (keyboard reach: Checkbox, MultiSelect, DatePicker, Accordion, Tree checkboxes, Dropzone, NodeCard, PalettePanel, BarList — React and Vue), `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.1"
 ```
 
 **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,27 @@ 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.1
+
+Fixes only — no API removed.
+
+- **Keyboard:** `Checkbox` (Space; `role="checkbox"`, `aria-checked` incl. "mixed"; new `tabIndex` — pass -1 inside a row that owns focus), `DatePicker` / `MultiSelect` (field is a combobox: Enter / Space / ArrowDown open, Escape closes; options toggle with Enter / Space), `Accordion`, `Dropzone`, `NodeCard`, `PalettePanel`, `BarList` rows with `onSelect`. `SunburstChart` and `WorldMap` are one Tab stop: arrow keys walk segments / regions, Enter acts, Escape clears.
+- **Vue parity:** `Tree` emits `context-menu(key, event)`; `BarList` emits `select(row)`.
+- **Long text:** field boxes (Select, Combobox, DatePicker, MultiSelect) keep one line and truncate; menus cap at 320px and truncate items; `SegmentedControl` truncates a squeezed segment; `Tree`, Sidebar brand and TopBar user name truncate; `Drawer` titles wrap.
+- **Tokens:** motion uses `--dur-*` / `--ease-out` everywhere; new shadows `--shadow-raised`, `--shadow-thumb`, `--shadow-drawer` (deeper in dark mode).
+- Docs: `Ribbon3D`, `Scatter3D`, `Surface3D` props completed.
+- **The documentation pages now open from the package.** `_ds_bundle.js` (the compiled copy the pages run on) and `_src/` (the Show code generator, icon search indexes) ship too, so `node_modules/@keyfunc/keybricks-ds/index.html` works offline. Apps still import from `@keyfunc/keybricks-ds` / `/vue` — nothing imports the bundle.
+
+### 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 +748,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/_adherence.oxlintrc.json

@@ -153,8 +153,8 @@
         "message": "<LegendItem> doesn't accept that prop. Declared props: label, color."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|indeterminate|onChange|label|size|disabled|style|key|ref|className|style|children)$/]",
-        "message": "<Checkbox> doesn't accept that prop. Declared props: checked, indeterminate, onChange, label, size, disabled, style."
+        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|indeterminate|onChange|label|size|disabled|tabIndex|style|key|ref|className|style|children)$/]",
+        "message": "<Checkbox> doesn't accept that prop. Declared props: checked, indeterminate, onChange, label, size, disabled, tabIndex, style."
       },
       {
         "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
@@ -521,8 +521,8 @@
         "message": "<SunburstNode> doesn't accept that prop. Declared props: label, value, children."
       },
       {
-        "selector": "JSXOpeningElement[name.name='Surface3D'] > JSXAttribute > JSXIdentifier[name!=/^(?:values|width|height|yaw|pitch|zScale|wire|interactive|valueFormat|style|key|ref|className|style|children)$/]",
-        "message": "<Surface3D> doesn't accept that prop. Declared props: values, width, height, yaw, pitch, zScale, wire, interactive, valueFormat, style."
+        "selector": "JSXOpeningElement[name.name='Surface3D'] > JSXAttribute > JSXIdentifier[name!=/^(?:values|width|height|yaw|pitch|zScale|wire|interactive|valueFormat|xLabel|yLabel|style|key|ref|className|style|children)$/]",
+        "message": "<Surface3D> doesn't accept that prop. Declared props: values, width, height, yaw, pitch, zScale, wire, interactive, valueFormat, xLabel, yLabel, style."
       },
       {
         "selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|disabled|size|tone|onColor|offColor|knobIcon|knobText|insideOn|insideOff|inlinePrompt|label|labelOn|labelOff|loading|beforeChange|style|key|ref|className|style|children)$/]",
@@ -1172,10 +1172,13 @@
       "--series-7",
       "--series-8",
       "--series-9",
+      "--shadow-drawer",
       "--shadow-menu",
       "--shadow-modal",
       "--shadow-node",
+      "--shadow-raised",
       "--shadow-selected",
+      "--shadow-thumb",
       "--sidebar-w",
       "--skeleton",
       "--soft-active",
@@ -1543,6 +1546,9 @@
       "--shadow-selected": "shadow",
       "--shadow-menu": "shadow",
       "--shadow-modal": "shadow",
+      "--shadow-raised": "shadow",
+      "--shadow-thumb": "shadow",
+      "--shadow-drawer": "shadow",
       "--ring-surface": "color",
       "--ring-focus": "color",
       "--sidebar-w": "spacing",