@keyfunc/keybricks-ds 2.5.0 → 2.6.0

package/changelog.js

@@ -3,6 +3,18 @@
    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.6.0", date: "2026-11-02", status: "unreleased", items: [
+  { tag: "improved", t: ["Vue Button now forwards native click events and supports component / VNode icons, icon / loading / trailing slots, trailing icons, native button types and aria-busy.", "Vue Button 补充原生点击事件、组件 / VNode 图标、icon / loading / trailing 插槽、独立尾部图标、原生按钮类型及 aria-busy。", "Vue Button がネイティブ click イベント、コンポーネント / VNode アイコン、icon / loading / trailing スロット、末尾アイコン、ボタン種別と aria-busy に対応。"] },
+  { tag: "new", t: ["Vue Message service: timed and grouped Toast notifications, stacking, close handles, VNode content and app context.", "Vue 新增 Message 服务：支持自动关闭、消息分组与堆叠、关闭句柄、VNode 内容及应用上下文。", "Vue Message サービスを追加：自動終了、グループ化、スタック、終了ハンドル、VNode とアプリコンテキストに対応。"] },
+  { tag: "new", t: ["Vue MessageBox service: alert / confirm / prompt, queued dialogs, validation, beforeClose, focus management and configurable labels. See the migration guide for compatibility limits.", "Vue 新增 MessageBox 服务：支持 alert / confirm / prompt、弹窗队列、输入校验、beforeClose、焦点管理及可配置文案；兼容边界见迁移说明。", "Vue MessageBox サービスを追加：alert / confirm / prompt、キュー、入力検証、beforeClose、フォーカス管理とラベル設定。互換性の制限は移行ガイドを参照。"] },
+] },
+{ v: "2.5.1", date: "2026-10-30", items: [
+  { tag: "fixed", t: ["Keyboard support: Checkbox, DatePicker, MultiSelect, Accordion, Dropzone, pipeline nodes and palette, selectable bar lists, and the Sunburst / World map charts can all be used without a mouse.", "键盘支持：复选框、日期选择、多选、折叠面板、上传区、管道节点与节点面板、可点选的条形列表，以及旭日图 / 世界地图，都可以不用鼠标操作。", "キーボード対応：チェックボックス、日付選択、マルチセレクト、アコーディオン、ドロップゾーン、パイプラインのノードとパレット、選択可能なバーリスト、サンバースト / 世界地図をマウスなしで操作可能に。"] },
+  { tag: "fixed", t: ["Long text no longer spills: field values, menu items, segments, tree rows and navigation names truncate; drawer titles wrap.", "长文字不再溢出：输入框的值、菜单项、分段选择、树形列表和导航名称会截断；侧滑面板标题会换行。", "長いテキストがはみ出さないように：入力値、メニュー項目、セグメント、ツリー行、ナビゲーション名は省略表示、ドロワーのタイトルは折り返し。"] },
+  { tag: "fixed", t: ["Vue: Tree right-click menu event and BarList row selection, matching React.", "Vue：树形列表支持右键菜单事件，条形列表支持点选，与 React 一致。", "Vue：Tree の右クリックメニューイベントと BarList の行選択を React と同様に追加。"] },
+  { tag: "fixed", t: ["The documentation pages inside the npm package now open locally — before, every component box stayed empty.", "npm 包里的文档网页现在可以在本地直接打开（之前每个组件框都是空白的）。", "npm パッケージ内のドキュメントページをローカルで開けるように（以前は各コンポーネント枠が空白だった）。"] },
+  { tag: "improved", t: ["Animations and shadows use the system tokens throughout; shadows deepen in dark mode.", "动画和阴影统一使用系统规范值，深色模式下阴影自动加深。", "アニメーションと影をシステムのトークンに統一。ダークモードでは影が自動で濃くなる。"] },
+] },
 { v: "2.5.0", date: "2026-10-30", items: [
   { tag: "new", t: ["Every example on this site has a <b>Show code</b> bar: the React and Vue 3 code that builds it, ready to paste.", "网站上每个例子下都有<b>显示代码</b>：给出做出该例子的 React 和 Vue 3 代码，可直接复制使用。", "サイトの各例の下に<b>コードを表示</b>を追加：その例を作る React / Vue 3 のコードをそのまま貼り付けて使える。"] },
   { tag: "improved", t: ["Vue imports in one line: <code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>.", "Vue 一行引入：<code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>。", "Vue は 1 行でインポート：<code>import { Button } from '@keyfunc/keybricks-ds/vue'</code>。"] },

package/components/buttons/BUTTON_MIGRATION.md

@@ -0,0 +1,111 @@
+# Vue Button 与旧按钮适配
+
+2.6.0（未发布）为 Vue Button 补充适配旧按钮所需的通用能力。
+原有图标名、variant、默认插槽用法继续支持；本次没有修改 React Button。
+本次只修改源码与文档，没有执行测试、类型检查、构建或浏览器验证，不能据此宣称已完美替换业务组件。
+
+## 新增接口
+
+| 接口 | 行为 |
+| --- | --- |
+| `@click` | 传递原生 MouseEvent；disabled 或 loading 时不发出事件 |
+| `nativeType` | `button / submit / reset`，默认仍为 button |
+| `text` | 默认插槽的后备文本，已有插槽优先 |
+| `icon` | 原 DS 图标名之外，额外接受 Vue 组件或 VNode |
+| `trailingIcon` | 独立右侧图标；loading 时继续显示，适合 popup 下拉箭头 |
+| `#icon` | 覆盖主图标，可放旧 svgicon、字体图标或自定义 SVG；随 loading 隐藏 |
+| `#loading` | 覆盖加载图标；默认继续使用 DS spinner |
+| `#trailing` | 覆盖独立尾部内容，不随 loading 隐藏 |
+| `aria-busy` | 与 loading 同步；原生 disabled 仍由 disabled 或 loading 控制 |
+
+icon / loading 插槽接收 `{ size, style }`，trailing 额外接收 loading。
+默认继承当前尺寸区；显式 iconSize 优先于尺寸区。自定义插槽中的图标由调用方应用传入的尺寸。
+class、id、title、style、原生表单属性以及其他未声明属性继续透传到同一个原生 button 根节点。
+Vue 专用类型文件为 `Button.vue.d.ts`，`Button.d.ts` 仍是 React 类型。
+
+```vue
+<template>
+  <KbButton
+    :loading="saving"
+    :icon="SaveIcon"
+    trailing-icon="chevron-down"
+    @click="save($event)"
+  >
+    保存
+  </KbButton>
+</template>
+```
+
+## actnplanBtn 的适配边界
+
+建议保留 `actnplanBtn.vue` 的路径、props、事件和兼容 class，内部改为 KbButton。
+DS 接收通用接口；`regular / negative / warning / inbody / popup` 以及旧图标名由应用转换。
+
+| 原配置 | 应用层转换 |
+| --- | --- |
+| regular | variant=primary |
+| regular + inbody | variant=outline |
+| negative | variant=outline；它通常表示取消，不是危险操作 |
+| warning | variant=danger |
+| disabled / loading | 同名属性，loading 时主图标替换为 spinner，文字保留 |
+| popup | trailingIcon=chevron-down，loading 时仍显示箭头 |
+| text | 保留 `<span class="text">` 默认插槽，兼容已有选择器 |
+| click | 继续传出原生事件，不吞掉 `$event`、冒泡或表单默认行为 |
+| class / id / style | 透传；保留 btn、actnplanButton、原 type class 和 inbody class |
+
+旧 actnplanBtn 没有指定原生 button type，在表单里通常默认提交；严格兼容时适配层应设置 nativeType=submit，并核对各表单的实际使用。
+不能把旧业务 type 直接绑定到原生 type。外部已经通过原生属性控制 form、name、value 的场景也应保留。
+
+## 图标映射
+
+映射应独立放在应用的 `actnplanButtonIcons.ts`，不要塞进 DS 的通用图标字典。
+应用先从空格分隔的 class 中提取 glyphicon-*，因此 `glyphicon glyphicon-refresh` 与 `glyphicon-refresh` 进入相同映射。
+
+| 旧图标 | 建议的 DS 图标 |
+| --- | --- |
+| 1em-ok / glyphicon-ok | check |
+| 1em-cancel / glyphicon-remove | x |
+| 1em-add / glyphicon-plus | plus |
+| glyphicon-floppy-disk | save |
+| 1em-delete / glyphicon-trash | trash-2 |
+| 1em-refresh / glyphicon-refresh | refresh-cw |
+| 1em-clone | copy |
+| glyphicon-search | search |
+| glyphicon-menu-down | chevron-down |
+
+已经确认对应关系的图标转换为 DS 名称。业务专用 SVG 或无可靠对应的 Glyphicon 通过 icon 插槽保留；不要把未知旧名称直接传入 DS Icon，否则会显示空图标。
+动态 icon 使用 computed 解析；旧 SVG 使用 watch 加载并忽略过期请求，避免切换按钮状态后显示旧图标。
+旧 fill 样式仅作用于旧 SVG，DS 图标保留 fill=none、stroke=currentColor。
+
+```vue
+<template>
+  <KbButton
+    class="btn actnplanButton"
+    :class="[type, { inbody }]"
+    :variant="variant"
+    :disabled="disabled"
+    :loading="loading"
+    :trailing-icon="popup ? 'chevron-down' : undefined"
+    native-type="submit"
+    @click="emit('click', $event)"
+  >
+    <template v-if="icon" #icon="{ size, style }">
+      <AppIcon v-if="mappedIcon" :name="mappedIcon" :size="size" :style="style" />
+      <span v-else-if="isGlyph" class="glyphicon" :class="glyphClass" aria-hidden="true" />
+      <svgicon v-else-if="svgData" :data="svgData" :fill="false" :style="style" />
+    </template>
+    <span class="text">{{ text }}</span>
+  </KbButton>
+</template>
+```
+
+以上为应用适配层的模板示意，其中 variant、mappedIcon 等由应用解析。
+图标放在按钮内部即可，不需要 svgContainer，避免把一个按钮拆成多个点击区域。
+
+## 接入顺序
+
+先发布包含本次改动的 DS，再升级应用安装版本，最后修改 actnplanBtn 适配层并移除旧的按钮视觉样式。
+应用所有版本都需要加载 DS 样式，不能只依赖 V2 的适配器注册入口。
+同时清理 runtime/modal.vue 中临时添加的默认按钮视觉覆盖，让按钮外观由 DS 统一管理；默认按钮位置可继续由 modal 决定。
+客户主题 mixin 和外部 `.actnplanButton` 规则需要逐项处理，不能继续用旧的 disabled / fill / hover 规则覆盖新按钮。
+源码修改不会自动影响应用已安装的旧版本；本轮未切换 actnplanBtn，也未修改应用依赖、lock 文件或生成产物。

package/components/buttons/Button.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { px } from '../px.js'
-import { computed, ref } from 'vue'
+import { cloneVNode, computed, h, isVNode, ref } from 'vue'
 import Icon from '../icons/Icon.vue'
 
 // Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
@@ -25,11 +25,13 @@ const colorHoverVariants = { text: 'var(--text-heading)' }
 // Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
 const props = defineProps({
   variant: { type: String, default: 'primary' }, size: String,
-  icon: String, iconSize: Number, iconPosition: { type: String, default: 'left' },
+  icon: [String, Object, Function], trailingIcon: [String, Object, Function],
+  iconSize: Number, iconPosition: { type: String, default: 'left' },
   medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
-  label: String, pressed: Boolean, focused: Boolean, style: Object,
+  label: String, text: String, pressed: Boolean, focused: Boolean, style: Object,
+  nativeType: { type: String, default: 'button', validator: value => ['button', 'submit', 'reset'].includes(value) },
 })
-defineEmits(['click'])
+const emit = defineEmits(['click'])
 const hover = ref(false), press = ref(false), focus = ref(false)
 const busy = computed(() => props.disabled || props.loading)
 const isPressed = computed(() => press.value || props.pressed)
@@ -52,15 +54,60 @@ const s = computed(() => {
 })
 const iSize = computed(() => props.iconSize || 16)
 const iconStyle = computed(() => props.iconSize ? null : tierIcon)
+
+// 旧 SVG、组件和 VNode 都可以由适配层传入，业务图标名称不进入 DS。
+function glyph(value) {
+  if (!value) return null
+  const attrs = {
+    size: iSize.value, width: iSize.value, height: iSize.value, 'aria-hidden': true, focusable: false,
+    style: { display: 'block', flexShrink: 0, width: px(iSize.value), height: px(iSize.value), ...iconStyle.value },
+  }
+  if (typeof value === 'string') return h(Icon, { ...attrs, name: value, size: iSize.value })
+  return isVNode(value) ? cloneVNode(value, attrs) : h(value, attrs)
+}
+const LeadingIcon = () => glyph(props.icon)
+const TrailingIcon = () => glyph(props.trailingIcon)
+
+function onClick(event) {
+  if (busy.value) return
+  emit('click', event)
+}
 </script>
 <template>
-  <button type="button" data-press="own" :data-size="size" :style="s" :disabled="busy" :aria-label="iconOnly ? label : undefined"
-    @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
-    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
-    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
-    <span v-if="loading" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" />
-    <Icon v-else-if="icon && iconPosition === 'left'" :name="icon" :size="iSize" :style="iconStyle" />
-    <slot v-if="!iconOnly" />
-    <Icon v-if="!loading && icon && iconPosition === 'right'" :name="icon" :size="iSize" :style="iconStyle" />
+  <button
+    :type="nativeType"
+    data-press="own"
+    :data-size="size"
+    :style="s"
+    :disabled="busy"
+    :aria-busy="loading"
+    :aria-label="iconOnly ? label : undefined"
+    @click="onClick"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false; press = false"
+    @mousedown="press = true"
+    @mouseup="press = false"
+    @keydown.enter="press = true"
+    @keydown.space="press = true"
+    @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')"
+    @blur="focus = false"
+  >
+    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle">
+      <span
+        aria-hidden="true"
+        :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }"
+      />
+    </slot>
+    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle">
+      <LeadingIcon v-if="icon" />
+    </slot>
+    <slot v-if="!iconOnly">{{ text }}</slot>
+    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle">
+      <LeadingIcon v-if="icon" />
+    </slot>
+    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading">
+      <TrailingIcon v-if="trailingIcon" />
+    </slot>
   </button>
 </template>

package/components/buttons/Button.vue.d.ts

@@ -0,0 +1,44 @@
+import type { Component, ComponentOptionsMixin, CSSProperties, DefineComponent, PublicProps, SlotsType, VNode } from 'vue';
+
+/** Vue 专用声明；同目录 Button.d.ts 继续描述 React 接口。 */
+export interface VueButtonProps {
+  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: string | Component | VNode;
+  /** 不随 loading 隐藏，适用于下拉箭头等独立的尾部标记。 */
+  trailingIcon?: string | Component | VNode;
+  iconSize?: number;
+  iconPosition?: 'left' | 'right';
+  medium?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+  label?: string;
+  /** 默认插槽的后备文本。 */
+  text?: string;
+  pressed?: boolean;
+  focused?: boolean;
+  style?: CSSProperties;
+  /** 原生按钮类型，默认 button；旧表单适配时可明确传入 submit。 */
+  nativeType?: 'button' | 'submit' | 'reset';
+  onClick?: (event: MouseEvent) => void;
+}
+
+export interface VueButtonIconSlotProps {
+  size: number;
+  style: CSSProperties | null;
+}
+export interface VueButtonSlots {
+  default?: () => VNode[];
+  icon?: (props: VueButtonIconSlotProps) => VNode[];
+  loading?: (props: VueButtonIconSlotProps) => VNode[];
+  trailing?: (props: VueButtonIconSlotProps & { loading: boolean }) => VNode[];
+}
+
+declare const Button: DefineComponent<
+  VueButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin,
+  { click: (event: MouseEvent) => void }, string, PublicProps,
+  Readonly<VueButtonProps>, {}, SlotsType<VueButtonSlots>
+>;
+export default Button;

package/components/charts/BarList.jsx

@@ -13,7 +13,7 @@ export function BarList({ rows = [], max, width = 360, valueFormat = fmtNum, sho
     <div style={{ display: "flex", flexDirection: "column", gap: 10, width, ...style }}>
       {rows.map((r) => (
         <div key={r.label} onMouseEnter={interactive ? () => setHover(r.label) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
-          onClick={onSelect ? () => onSelect(r) : undefined}
+          onClick={onSelect ? () => onSelect(r) : undefined} role={onSelect ? "button" : undefined} tabIndex={onSelect ? 0 : undefined} onKeyDown={onSelect ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSelect(r); } } : undefined}
           style={{ opacity: hover == null || hover === r.label ? 1 : 0.5, cursor: onSelect ? "pointer" : "default", transition: "var(--t-hover)" }}>
           <div style={{ display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 4 }}>
             <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.label}</span>

package/components/charts/BarList.vue

@@ -1,16 +1,21 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, getCurrentInstance } from 'vue'
 import { fmtNum } from './chart-geometry.js'
 // Horizontal labeled bars — top-N rankings, budget consumption.
 const props = defineProps({ rows:{type:Array,default:()=>[]}, max:Number, width:{type:Number,default:360}, barHeight:{type:Number,default:8}, showTrack:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
 const top = computed(() => props.max!=null ? props.max : Math.max(1,...props.rows.map(r=>r.value)))
 const total = computed(() => props.rows.reduce((s,r)=>s+r.value,0)||1)
 const hover = ref(null)
+// @select(row) — like React's onSelect: a listener makes each row a button (click, Enter / Space).
+const emit = defineEmits(['select'])
+const inst = getCurrentInstance()
+const selectable = computed(() => !!(inst && inst.vnode.props && inst.vnode.props.onSelect))
+function pick(r) { if (selectable.value) emit('select', r) }
 </script>
 <template>
   <div :style="{display:'flex',flexDirection:'column',gap:'10px',width:width+'px',...style}">
-    <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)"
-      :style="{opacity:hover==null||hover===r.label?1:0.5,transition:'var(--t-hover)'}">
+    <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)" :role="selectable ? 'button' : undefined" :tabindex="selectable ? 0 : undefined" @click="pick(r)" @keydown.enter.prevent="pick(r)" @keydown.space.prevent="pick(r)"
+      :style="{opacity:hover==null||hover===r.label?1:0.5,transition:'var(--t-hover)',cursor:selectable?'pointer':'default'}">
       <div style="display:flex;align-items:baseline;gap:8px;padding-bottom:4px">
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ r.label }}</span>
         <span style="margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>

package/components/charts/Ribbon3D.d.ts

@@ -8,6 +8,8 @@ export interface Ribbon3DProps {
   yaw?: number; pitch?: number;
   /** Band thickness as a fraction of its row, 0–1 */ ribbon?: number;
   interactive?: boolean;
+  /** Formats values in the tooltip and axis (default: grouped number). */
+  valueFormat?: (v: number) => string;
   style?: React.CSSProperties;
 }
 export declare function Ribbon3D(props: Ribbon3DProps): JSX.Element;

package/components/charts/Scatter3D.d.ts

@@ -7,6 +7,10 @@ export interface Scatter3DProps {
   yaw?: number; pitch?: number;
   /** Base dot radius */ r?: number;
   legend?: boolean; interactive?: boolean;
+  /** Axis titles (default "x" / "y" / "z"). */
+  xLabel?: string; yLabel?: string; zLabel?: string;
+  /** Formats values in the tooltip (default: grouped number). */
+  valueFormat?: (v: number) => string;
   style?: React.CSSProperties;
 }
 export declare function Scatter3D(props: Scatter3DProps): JSX.Element;

package/components/charts/SunburstChart.jsx

@@ -33,7 +33,12 @@ export function SunburstChart({ data, size = 320, ringWidth, valueFormat = fmtNu
   return (
     <div style={{ ...wrapStyle, ...style }}>
       <div style={{ position: "relative", width: size, height: size }}>
-        <svg width={size} height={size} role="img">
+        <svg width={size} height={size} role="img" aria-label={interactive ? "Sunburst chart — arrow keys move between segments, Enter zooms in, Escape zooms out" : undefined} tabIndex={interactive ? 0 : undefined} onBlur={() => setHover(null)}
+          onKeyDown={interactive ? (e) => { const n = segs.length; if (!n) return; const h = hover;
+            if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); setHover(h == null ? 0 : (h + 1) % n); }
+            else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); setHover(h == null ? n - 1 : (h - 1 + n) % n); }
+            else if ((e.key === "Enter" || e.key === " ") && h != null && segs[h] && segs[h].node.children) { e.preventDefault(); setZoom([...zoom, ...segs[h].path]); setHover(null); }
+            else if (e.key === "Escape") { if (zoom.length) setZoom(zoom.slice(0, -1)); setHover(null); } } : undefined}>
           {segs.map((s, i) => (
             <path key={i} d={arcPath(size / 2, size / 2, rInner + rw * (s.depth + 1) - 1.5, rInner + rw * s.depth, s.a0 + 0.35, Math.max(s.a0 + 0.5, s.a1 - 0.35))}
               fill={seriesColor(s.colorIdx)} opacity={hover == null ? 0.92 - s.depth * 0.16 : hover === i ? 1 : 0.28}

package/components/charts/SunburstChart.vue

@@ -33,11 +33,17 @@ const tip = computed(()=>{
   const p = polar(props.size/2, props.size/2, g.value.rInner+g.value.rw*(s.depth+0.5), (s.a0+s.a1)/2)
   return { x:p[0], y:p[1], title:s.node.label, value: props.valueFormat(s.node.value)+' · '+((s.node.value/(g.value.focus.value||1))*100).toFixed(1)+'%' }
 })
+// One Tab stop for the whole chart: arrows walk the segments (same highlight + tooltip as hover), Enter zooms in, Escape zooms out.
+function onKey(e) { if (!props.interactive) return; const segs = g.value.segs, n = segs.length; if (!n) return; const h = hover.value
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); hover.value = h == null ? 0 : (h + 1) % n }
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); hover.value = h == null ? n - 1 : (h - 1 + n) % n }
+  else if ((e.key === 'Enter' || e.key === ' ') && h != null && segs[h] && segs[h].node.children) { e.preventDefault(); zoom.value = [...zoom.value, ...segs[h].path]; hover.value = null }
+  else if (e.key === 'Escape') { if (zoom.value.length) zoom.value = zoom.value.slice(0, -1); hover.value = null } }
 </script>
 <template>
   <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
     <div :style="{position:'relative',width:size+'px',height:size+'px'}">
-      <svg :width="size" :height="size" role="img">
+      <svg :width="size" :height="size" role="img" :aria-label="interactive ? 'Sunburst chart — arrow keys move between segments, Enter zooms in, Escape zooms out' : undefined" :tabindex="interactive ? 0 : undefined" @keydown="onKey" @blur="hover = null">
         <path v-for="(s,i) in g.segs" :key="i" :d="s.d" :fill="s.color"
           :opacity="hover==null ? 0.92-s.depth*0.16 : (hover===i?1:0.28)"
           @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)"

package/components/charts/Surface3D.d.ts

@@ -8,6 +8,8 @@ export interface Surface3DProps {
   /** Cell outlines */ wire?: boolean;
   /** Drag-to-orbit */ interactive?: boolean;
   valueFormat?: (v: number) => string;
+  /** Axis titles (default "x" / "y"). */
+  xLabel?: string; yLabel?: string;
   style?: React.CSSProperties;
 }
 export declare function Surface3D(props: Surface3DProps): JSX.Element;

package/components/charts/WorldMap.jsx

@@ -80,7 +80,12 @@ export function WorldMap({ values = {}, width = 660, height = 340, projection =
   const h = hover != null ? paths[hover] : null;
   return (
     <div style={{ ...wrapStyle, ...style }}>
-      <svg width={width} height={height - (legend ? 22 : 0)} role="img">
+      <svg width={width} height={height - (legend ? 22 : 0)} role="img" aria-label={interactive ? "Map — arrow keys move between regions" + (onSelect ? ", Enter selects" : "") : undefined} tabIndex={interactive ? 0 : undefined} onBlur={() => setHover(null)}
+        onKeyDown={interactive ? (e) => { const n = paths.length; if (!n) return; const h = hover;
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); setHover(h == null ? 0 : (h + 1) % n); }
+          else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); setHover(h == null ? n - 1 : (h - 1 + n) % n); }
+          else if ((e.key === "Enter" || e.key === " ") && h != null && onSelect) { e.preventDefault(); onSelect(paths[h].name, resolved[paths[h].name]); }
+          else if (e.key === "Escape") setHover(null); } : undefined}>
         {paths.map((p, i) => (
           <path key={p.name + i} d={p.d} fill={fillOf(p.name)} stroke="var(--bg-surface)" strokeWidth="0.5"
             onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}

package/components/charts/WorldMap.vue

@@ -49,12 +49,18 @@ function fill(name){
 const swatches = computed(() => props.scale==='diverging'
   ? ['var(--chart-neg)','color-mix(in srgb, var(--chart-neg) 40%, var(--bg-surface))','var(--chart-track)','color-mix(in srgb, var(--chart-pos) 40%, var(--bg-surface))','var(--chart-pos)']
   : HEAT)
+// One Tab stop for the whole map: arrows walk the regions (same highlight + tooltip as hover), Enter emits select, Escape clears.
+function onKey(e) { if (!props.interactive) return; const ps = paths.value, n = ps.length; if (!n) return; const h = hover.value
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); hover.value = h == null ? 0 : (h + 1) % n }
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); hover.value = h == null ? n - 1 : (h - 1 + n) % n }
+  else if ((e.key === 'Enter' || e.key === ' ') && h != null) { e.preventDefault(); emit('select', ps[h].name, resolved.value[ps[h].name]) }
+  else if (e.key === 'Escape') hover.value = null }
 </script>
 <template>
   <div v-if="err" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-xs)',color:'var(--text-muted)',background:'var(--bg-inset)',borderRadius:'var(--radius-lg)',...style}">{{ err }}</div>
   <div v-else-if="!paths" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-xs)',color:'var(--text-muted)',...style}">loading map…</div>
   <div v-else :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
-    <svg :width="width" :height="plotH" role="img">
+    <svg :width="width" :height="plotH" role="img" :aria-label="interactive ? 'Map — arrow keys move between regions, Enter selects' : undefined" :tabindex="interactive ? 0 : undefined" @keydown="onKey" @blur="hover = null">
       <path v-for="(p,i) in paths" :key="p.name+i" :d="p.d" :fill="fill(p.name)" stroke="var(--bg-surface)" stroke-width="0.5"
         @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)" @click="emit('select', p.name, resolved[p.name])"
         :style="{opacity:hover==null||hover===i?1:0.75,transition:'opacity var(--dur-fast) var(--ease-out)'}"/>

package/components/data/Table.jsx

@@ -89,7 +89,7 @@ function TreeToggle({ open, label, onClick }) {
   return (
     <button type="button" aria-expanded={open} aria-label={label} title={label} onClick={(e) => { e.stopPropagation(); onClick(); }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{ width: TREE_TOGGLE, height: TREE_TOGGLE, padding: 0, border: "none", borderRadius: "var(--radius-sm)", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", background: hover ? "var(--overlay-hover)" : "transparent", color: hover ? "var(--text-body)" : "var(--text-muted)", transition: "var(--t-hover)" }}>
-      <Icon name="chevron-right" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)", transform: open ? "rotate(90deg)" : "none", transition: "transform .15s ease" }} />
+      <Icon name="chevron-right" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)", transform: open ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }} />
     </button>
   );
 }

package/components/data/Table.vue

@@ -188,7 +188,7 @@ function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 're
         <tr v-else-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pos === pinInfo.unStart"><td :colspan="columns.length || 1" :style="GROUP_CELL">{{ L.unavailable }} · {{ pinInfo.un }}</td></tr>
         <tr data-row="" :aria-level="tree ? item.level + 1 : undefined" :aria-expanded="item.kids ? item.open : undefined" :style="{ ...(isDis(item.r, item.ri) ? { '--row-wash': 'initial' } : null), height: 'var(--bar-h)', background: pinInfo && pinInfo.sel.has(item.ri) ? 'var(--row-wash, var(--bg-inset))' : 'var(--row-wash, transparent)', transition: 'var(--t-hover)', borderBottom: pinInfo && ((pinInfo.rest > 0 && pos === pinInfo.rest - 1) || (pinInfo.unStart > 0 && pos === pinInfo.unStart - 1)) ? '1px solid var(--border-control)' : bordered && pos === view.length - 1 ? 'none' : '1px solid var(--border-subtle)' }">
           <template v-for="{ r, ri } in [item]" :key="'r'">
-          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), ...(c.twoLine ? { paddingTop: 'var(--title-cell-py)', paddingBottom: 'var(--title-cell-py)', maxWidth: 0 } : null), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }"><span v-if="selectable && i === 0" :style="checkSlot" :title="isDis(r, ri) && disabledReason ? disabledReason(r, ri) : undefined"><Checkbox :checked="selected.includes(ri)" :disabled="isDis(r, ri)" @change="v => emit('toggle', ri, v)" /></span><div v-if="c.twoLine" :style="{ display: 'flex', alignItems: 'center', minWidth: px(c.minWidth ?? 180), ...(treeCol === c ? { paddingLeft: (item.level * TREE_INDENT) + 'px' } : null) }"><span v-if="treeCol === c" :style="{ width: TREE_TOGGLE + 'px', flexShrink: 0, marginRight: (TREE_INDENT - TREE_TOGGLE) + 'px', display: 'inline-flex' }"><button v-if="item.kids" type="button" :aria-expanded="item.open" :aria-label="item.open ? L.collapse : L.expand" :title="item.open ? L.collapse : L.expand" @click.stop="toggleRow(item)" @mouseenter="hotToggle = item.key" @mouseleave="hotToggle = null" :style="{ width: TREE_TOGGLE + 'px', height: TREE_TOGGLE + 'px', padding: 0, border: 'none', borderRadius: 'var(--radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: hotToggle === item.key ? 'var(--overlay-hover)' : 'transparent', color: hotToggle === item.key ? 'var(--text-body)' : 'var(--text-muted)', transition: 'var(--t-hover)' }"><Icon name="chevron-right" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)', transform: item.open ? 'rotate(90deg)' : 'none', transition: 'transform .15s ease' }" /></button></span><div style="display:flex;align-items:center;gap:var(--title-cell-tile-gap);flex:1;min-width:0"><template v-for="t in [tl(c, r, ri)]" :key="0"><span v-if="t.icon" :style="{ display: 'inline-flex', flexShrink: 0, cursor: canOpen ? 'pointer' : undefined }" @click="e => canOpen && openRow(r, ri, e)"><IconTile :icon="t.icon" :hue="t.hue || 'neutral'" kind="row" :style="T_TILE" :icon-style="T_ICON" /></span><div style="display:flex;flex-direction:column;gap:var(--title-cell-gap);flex:1;min-width:0"><div style="display:flex;align-items:center;gap:4px;min-width:0"><span v-if="canOpen" role="button" tabindex="0" :style="{ ...T_TITLE, cursor: 'pointer' }" @click="e => openRow(r, ri, e)" @keydown="e => openKey(r, ri, e)"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><span v-else :style="T_TITLE"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><svg v-if="t.mark === 'favorite'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linejoin="round" role="img" aria-label="Favorite" style="display:block;flex-shrink:0;color:var(--warning)"><path :d="STAR_FILLED" /></svg><span v-else-if="t.mark" role="img" :aria-label="t.mark.label" :style="{ display: 'inline-flex', flexShrink: 0, color: t.mark.color || 'var(--text-muted)' }"><Icon :name="t.mark.icon" :size="14" /></span></div><span v-if="t.desc" :style="T_DESC">{{ t.desc }}</span></div><IconButton v-if="t.more" icon="ellipsis" size="sm" muted :label="L.more" :title="L.more" @click="e => more(r, ri, e)" /></template></div></div><code v-else-if="c.code && (typeof r[c.key] === 'string' || typeof r[c.key] === 'number') && r[c.key] !== ''" :style="codeChip"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></code><template v-else><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></template></td>
+          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), ...(c.twoLine ? { paddingTop: 'var(--title-cell-py)', paddingBottom: 'var(--title-cell-py)', maxWidth: 0 } : null), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }"><span v-if="selectable && i === 0" :style="checkSlot" :title="isDis(r, ri) && disabledReason ? disabledReason(r, ri) : undefined"><Checkbox :checked="selected.includes(ri)" :disabled="isDis(r, ri)" @change="v => emit('toggle', ri, v)" /></span><div v-if="c.twoLine" :style="{ display: 'flex', alignItems: 'center', minWidth: px(c.minWidth ?? 180), ...(treeCol === c ? { paddingLeft: (item.level * TREE_INDENT) + 'px' } : null) }"><span v-if="treeCol === c" :style="{ width: TREE_TOGGLE + 'px', flexShrink: 0, marginRight: (TREE_INDENT - TREE_TOGGLE) + 'px', display: 'inline-flex' }"><button v-if="item.kids" type="button" :aria-expanded="item.open" :aria-label="item.open ? L.collapse : L.expand" :title="item.open ? L.collapse : L.expand" @click.stop="toggleRow(item)" @mouseenter="hotToggle = item.key" @mouseleave="hotToggle = null" :style="{ width: TREE_TOGGLE + 'px', height: TREE_TOGGLE + 'px', padding: 0, border: 'none', borderRadius: 'var(--radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: hotToggle === item.key ? 'var(--overlay-hover)' : 'transparent', color: hotToggle === item.key ? 'var(--text-body)' : 'var(--text-muted)', transition: 'var(--t-hover)' }"><Icon name="chevron-right" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)', transform: item.open ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }" /></button></span><div style="display:flex;align-items:center;gap:var(--title-cell-tile-gap);flex:1;min-width:0"><template v-for="t in [tl(c, r, ri)]" :key="0"><span v-if="t.icon" :style="{ display: 'inline-flex', flexShrink: 0, cursor: canOpen ? 'pointer' : undefined }" @click="e => canOpen && openRow(r, ri, e)"><IconTile :icon="t.icon" :hue="t.hue || 'neutral'" kind="row" :style="T_TILE" :icon-style="T_ICON" /></span><div style="display:flex;flex-direction:column;gap:var(--title-cell-gap);flex:1;min-width:0"><div style="display:flex;align-items:center;gap:4px;min-width:0"><span v-if="canOpen" role="button" tabindex="0" :style="{ ...T_TITLE, cursor: 'pointer' }" @click="e => openRow(r, ri, e)" @keydown="e => openKey(r, ri, e)"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><span v-else :style="T_TITLE"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></span><svg v-if="t.mark === 'favorite'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linejoin="round" role="img" aria-label="Favorite" style="display:block;flex-shrink:0;color:var(--warning)"><path :d="STAR_FILLED" /></svg><span v-else-if="t.mark" role="img" :aria-label="t.mark.label" :style="{ display: 'inline-flex', flexShrink: 0, color: t.mark.color || 'var(--text-muted)' }"><Icon :name="t.mark.icon" :size="14" /></span></div><span v-if="t.desc" :style="T_DESC">{{ t.desc }}</span></div><IconButton v-if="t.more" icon="ellipsis" size="sm" muted :label="L.more" :title="L.more" @click="e => more(r, ri, e)" /></template></div></div><code v-else-if="c.code && (typeof r[c.key] === 'string' || typeof r[c.key] === 'number') && r[c.key] !== ''" :style="codeChip"><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></code><template v-else><slot :name="'cell-' + c.key" :value="r[c.key]" :row="r" :index="ri"><Cell :v="c.render ? c.render(r[c.key], r, ri) : r[c.key]" /></slot></template></td>
           </template>
         </tr>
         </template>

package/components/display/ProgressBar.jsx

@@ -11,7 +11,7 @@ export function ProgressBar({ label, value = 50, color = "var(--chart-blue)", sh
         </div>
       ) : null}
       <div style={{ height: 6, borderRadius: "var(--radius-full)", background: "var(--track)", overflow: "hidden" }}>
-        <div style={{ width: `${value}%`, height: "100%", borderRadius: "var(--radius-full)", background: color, transition: "width .3s ease" }} />
+        <div style={{ width: `${value}%`, height: "100%", borderRadius: "var(--radius-full)", background: color, transition: "width var(--dur-slow) var(--ease-out)" }} />
       </div>
     </div>
   );

package/components/display/ProgressBar.vue

@@ -9,7 +9,7 @@ defineProps({ label: String, value: { type: Number, default: 50 }, color: { type
       <span v-if="showValue" style="color:var(--text-heading)">{{ value }}%</span>
     </div>
     <div style="height:6px;border-radius:var(--radius-full);background:var(--track);overflow:hidden">
-      <div :style="{ width: value + '%', height: '100%', borderRadius: 'var(--radius-full)', background: color, transition: 'width .3s ease' }" />
+      <div :style="{ width: value + '%', height: '100%', borderRadius: 'var(--radius-full)', background: color, transition: 'width var(--dur-slow) var(--ease-out)' }" />
     </div>
   </div>
 </template>

package/components/feedback/Accordion.jsx

@@ -8,7 +8,7 @@ export function Accordion({ title, subtitle, defaultOpen, open: openProp, onTogg
   const toggle = () => (onToggle ? onToggle(!open) : setOpenState(!open));
   return (
     <div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
-      <div onClick={toggle} data-wash="" style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 8px", margin: "0 -4px", borderRadius: "var(--radius-md)", background: "var(--wash, transparent)", transition: "var(--t-hover)", cursor: "pointer" }}>
+      <div role="button" tabIndex={0} aria-expanded={!!open} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } }} onClick={toggle} data-wash="" style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 8px", margin: "0 -4px", borderRadius: "var(--radius-md)", background: "var(--wash, transparent)", transition: "var(--t-hover)", cursor: "pointer" }}>
         <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-right" size={14} /></span>
         <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
           <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>

package/components/feedback/Accordion.vue

@@ -10,7 +10,7 @@ function toggle() { if (props.open != null) emit('toggle', !open.value); else op
 </script>
 <template>
   <div :style="{ borderBottom: '1px solid var(--border-card)', ...style }">
-    <div @click="toggle" data-wash="" style="display:flex;align-items:center;gap:10px;padding:14px 8px;margin:0 -4px;border-radius:var(--radius-md);background:var(--wash, transparent);transition:var(--t-hover);cursor:pointer">
+    <div role="button" tabindex="0" :aria-expanded="!!open" @keydown.enter.prevent="toggle" @keydown.space.prevent="toggle" @click="toggle" data-wash="" style="display:flex;align-items:center;gap:10px;padding:14px 8px;margin:0 -4px;border-radius:var(--radius-md);background:var(--wash, transparent);transition:var(--t-hover);cursor:pointer">
       <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-right" :size="14" /></span>
       <div style="display:flex;flex-direction:column;flex:1">
         <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>

package/components/feedback/ContextMenu.jsx

@@ -30,13 +30,13 @@ export function ContextMenu({ items = [], onSelect, size, descriptionSide = "rig
   };
   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 }}>
+    <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, maxWidth: 320, 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={() => 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}
+          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", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }} title={it.label}>
+          {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}<span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{it.label}</span>
         </button>
       ))}
     </div>

package/components/feedback/ContextMenu.vue

@@ -26,8 +26,8 @@ function show(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 menuStyle = computed(() => ({ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', maxWidth: '320px', 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', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' })
 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>
@@ -38,7 +38,7 @@ const hintStyle = computed(() => ({ position: 'absolute', top: 0, [side.value ==
         <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 }}
+          <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" /><span style="min-width:0;overflow:hidden;text-overflow:ellipsis">{{ it.label }}</span>
         </button>
       </template>
     </div>
@@ -55,7 +55,7 @@ const hintStyle = computed(() => ({ position: 'absolute', top: 0, [side.value ==
       <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" @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 }}
+        <Icon v-if="it.icon" :name="it.icon" :size="16" :style="iconStyle(it)" /><span style="min-width:0;overflow:hidden;text-overflow:ellipsis">{{ it.label }}</span>
       </button>
     </template>
   </div>

package/components/feedback/Drawer.jsx

@@ -5,10 +5,10 @@ import { IconButton } from "../buttons/IconButton.jsx";
 export function Drawer({ open = true, title, subtitle, width = 400, inline, height, size, footer, onClose, children, style }) {
   if (!open) return null;
   const panel = (
-    <div role="dialog" aria-label={title} data-size={size} style={{ width, maxWidth: "100%", height: inline ? (height || 420) : "100%", background: "var(--bg-raised)", borderLeft: "1px solid var(--border-card)", boxShadow: inline ? "var(--shadow-menu)" : "-8px 0 24px rgba(0,0,0,.12)", display: "flex", flexDirection: "column", boxSizing: "border-box", ...(inline ? { border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)" } : null), ...style }}>
+    <div role="dialog" aria-label={title} data-size={size} style={{ width, maxWidth: "100%", height: inline ? (height || 420) : "100%", background: "var(--bg-raised)", borderLeft: "1px solid var(--border-card)", boxShadow: inline ? "var(--shadow-menu)" : "var(--shadow-drawer)", display: "flex", flexDirection: "column", boxSizing: "border-box", ...(inline ? { border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)" } : null), ...style }}>
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "16px 16px 12px", borderBottom: "1px solid var(--border-card)", flexShrink: 0 }}>
-        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
-          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
+        <div style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}>
+          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)", minWidth: 0, overflowWrap: "anywhere" }}>{title}</span>
           {subtitle && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{subtitle}</span>}
         </div>
         <IconButton icon="x" label="Close" onClick={onClose} style={{ margin: "calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0" }} />