@manohub/ui 0.10.2 → 0.10.3

package/README.md

@@ -62,7 +62,7 @@ import { Card, Form, Tree, Checkbox } from '@manohub/ui'
 | 分组 | 组件 |
 |---|---|
 | 容器与分区 | `Page`（页面级骨架：`.Header` / `.Body` / `.Footer` / `.Filter` / `.Toolbar` / `.Split`）、`Panel`（+ `.Header` / `.Body` / `.Footer`）、`Card`（+ 三件）、`Nav`、`Layout`（`Layout.Row` 排「行」/ `Layout.Column` 排「列」：轴向 × 间距档 × 对齐） |
-| 数据展示 | `Tree`、`ListView`（+ `.CardItem`）、`Badge`、`Tag`（常规 / 状态 / 可选 / 新增 / 筛选片） |
+| 数据展示 | `Tree`、`ListView`（+ `.CardItem`）、`Badge`、`Tag`（`Badge` 的可关闭 / 可新增封装） |
 | 展示 | `Avatar`（+ `.Group`）、`Skeleton`（行 / 列表 / 块状） |
 | 表单基础（**自绘**） | `Button`（+ `.Group` / `.Divider`；五型 / 小号 / 加载 / 菜单按钮 / 连体切换）、`Input`（+ `.Group` / `.Chip` / `.Display` / `.Textarea`；清除 / 可见性切换 / 校验）、`Search`（搜索框：值 / 搜索 / 清空三条回调）、`Select`（单选 / 多选 / 搜索 / 加载；面板用原生 popover）、`SelectTree`（树形态：仅叶子可选 + 本地过滤 + 命中高亮；与 `Select` 平级导出、共用触发器与面板）、`Switch`（表格档 / 表单档） |
 | 表单与选择 | `Form`（+ `.Header` / `.Item`；标签体系、成员归位、`v-model` 值收集与命令式 `clear()`）、`Filter`（+ `.Item`；`Form` 的壳：条件字段写成子件、控件自放、查询/重置与快照归一）、`Checkbox`、`Radio`（+ `.Group` / `.Card`；卡片式单选）、`Capsule`（胶囊选择器；胶囊 / 方形两档外形，与 `Tabs` 组合即页签） |

package/dist/components/badge/index.d.ts

@@ -19,6 +19,13 @@ export type BadgeStatus = 'success' | 'processing' | 'default' | 'warning' | 'er
  * - `outline`：浅底 + 同色描边；`tone="default"` 时退化为白底 + 中性描边 + 正文色（状态胶囊）
  * - `plain`：无底无框，靠圆点表达状态
  *
+ * **本件是「只读标记」的唯一样式源**：`Tag`（可关闭 / 可新增）只是在本件之上加交互位，
+ * 几何与色彩一行都不重写 —— 改本件的档位，两件一起走（见 `components/tag/index.tsx`）。
+ *
+ * **属性落点**：`class` / `style` 有专口（并入档位类、随档位内联），**其余 attrs 一律透传到根元素**
+ * （`id` / `aria-*` / `data-*` / `title` / 原生事件）—— 停在组件上等于丢掉（`Tag` 的「新增」
+ * 就靠这条把 `onClick` 落到那颗按钮上），见 `forwardAttrs`。
+ *
  * @example 内容徽标
  * <Badge tone="success" shape="outline" size="md" dot="filled">运行中</Badge>
  *
@@ -28,6 +35,9 @@ export type BadgeStatus = 'success' | 'processing' | 'default' | 'warning' | 'er
  *
  * @example 状态点
  * <Badge status="processing" text="运行中" />
+ *
+ * @example 可点形态（复合件用；`Tag` 的「新增」即此形 + 本件自己的遮罩）
+ * <Badge as="button" tone="warning" onClick={() => add()}>新增</Badge>
  */
 export declare const Badge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tone: {
@@ -73,6 +83,23 @@ export declare const Badge: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 根元素形态：`span`（缺省，纯展示）/ `button`（可点形态，给**复合件**用）。
+     *
+     * `Tag` 就是靠它拿到「可点」的：徽标是**只读标记**的唯一样式源，`Tag` 只往上加
+     * 关闭位与新增位，不再自己画一遍框（见 `components/tag/index.tsx`）。
+     * `as="button"` 会渲染真实 `<button type="button">`（`type` 不能省：缺省是 `submit`，
+     * 放进表单会提交），并保留本件全部档位类与几何 —— 按钮的外观缺三项由本件面自带
+     * （`border` / `background` / `padding`，见 `contract-reset.spec.ts` 的第三组），
+     * `font-family: inherit` 在 `badge.css` 的基块补（UA 会把按钮字形换成 Arial）。
+     *
+     * **只对「内容徽标」形态生效**：`count` / `status` 两种形态是装饰（角标、状态点 + 文字），
+     * 传了它们就忽略本 prop（那时走各自的分支，根仍是 `<span>`）。
+     */
+    as: {
+        type: PropType<"span" | "button">;
+        default: string;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tone: {
         type: PropType<BadgeTone>;
@@ -117,16 +144,34 @@ export declare const Badge: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 根元素形态：`span`（缺省，纯展示）/ `button`（可点形态，给**复合件**用）。
+     *
+     * `Tag` 就是靠它拿到「可点」的：徽标是**只读标记**的唯一样式源，`Tag` 只往上加
+     * 关闭位与新增位，不再自己画一遍框（见 `components/tag/index.tsx`）。
+     * `as="button"` 会渲染真实 `<button type="button">`（`type` 不能省：缺省是 `submit`，
+     * 放进表单会提交），并保留本件全部档位类与几何 —— 按钮的外观缺三项由本件面自带
+     * （`border` / `background` / `padding`，见 `contract-reset.spec.ts` 的第三组），
+     * `font-family: inherit` 在 `badge.css` 的基块补（UA 会把按钮字形换成 Arial）。
+     *
+     * **只对「内容徽标」形态生效**：`count` / `status` 两种形态是装饰（角标、状态点 + 文字），
+     * 传了它们就忽略本 prop（那时走各自的分支，根仍是 `<span>`）。
+     */
+    as: {
+        type: PropType<"span" | "button">;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     text: string;
     size: BadgeSize;
     dot: boolean | BadgeDot;
     shape: BadgeShape;
     count: number;
-    status: BadgeStatus;
     tone: BadgeTone;
     overflowCount: number;
     showZero: boolean;
+    status: BadgeStatus;
+    as: "button" | "span";
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/badge/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createVNode } from "vue";
+import { defineComponent, computed, createVNode, mergeProps, Fragment } from "vue";
 const STATUS_TONE = {
   success: "success",
   processing: "primary",
@@ -52,6 +52,23 @@ const Badge = /* @__PURE__ */ defineComponent({
     text: {
       type: String,
       default: void 0
+    },
+    /**
+     * 根元素形态：`span`（缺省，纯展示）/ `button`（可点形态，给**复合件**用）。
+     *
+     * `Tag` 就是靠它拿到「可点」的：徽标是**只读标记**的唯一样式源，`Tag` 只往上加
+     * 关闭位与新增位，不再自己画一遍框（见 `components/tag/index.tsx`）。
+     * `as="button"` 会渲染真实 `<button type="button">`（`type` 不能省：缺省是 `submit`，
+     * 放进表单会提交），并保留本件全部档位类与几何 —— 按钮的外观缺三项由本件面自带
+     * （`border` / `background` / `padding`，见 `contract-reset.spec.ts` 的第三组），
+     * `font-family: inherit` 在 `badge.css` 的基块补（UA 会把按钮字形换成 Arial）。
+     *
+     * **只对「内容徽标」形态生效**：`count` / `status` 两种形态是装饰（角标、状态点 + 文字），
+     * 传了它们就忽略本 prop（那时走各自的分支，根仍是 `<span>`）。
+     */
+    as: {
+      type: String,
+      default: "span"
     }
   },
   slots: Object,
@@ -59,6 +76,13 @@ const Badge = /* @__PURE__ */ defineComponent({
     slots,
     attrs
   }) {
+    const forwardAttrs = computed(() => {
+      const rest = {};
+      for (const [key, value] of Object.entries(attrs)) {
+        if (key !== "class" && key !== "style") rest[key] = value;
+      }
+      return rest;
+    });
     const countText = computed(() => {
       if (props.count === void 0) return null;
       if (props.count === 0 && !props.showZero) return null;
@@ -69,28 +93,37 @@ const Badge = /* @__PURE__ */ defineComponent({
       const style = attrs.style;
       const extra = attrs.class;
       if (props.status) {
-        return createVNode("span", {
+        return createVNode("span", mergeProps(forwardAttrs.value, {
           "class": ["mh-badge--status", `mh-badge--${STATUS_TONE[props.status]}`, extra].filter(Boolean).join(" "),
           "style": style
-        }, [createVNode("span", {
+        }), [createVNode("span", {
           "class": "mh-badge__status-dot"
         }, null), props.text ?? slots.default?.()]);
       }
       if (props.count !== void 0) {
         if (countText.value === null && !slots.default) return null;
-        return createVNode("span", {
+        return createVNode("span", mergeProps(forwardAttrs.value, {
           "class": ["mh-badge--count", extra].filter(Boolean).join(" "),
           "style": style
-        }, [slots.default?.(), countText.value !== null ? createVNode("sup", {
+        }), [slots.default?.(), countText.value !== null ? createVNode("sup", {
           "class": ["mh-badge__count", `mh-badge--${props.tone}`].join(" ")
         }, [countText.value]) : null]);
       }
-      return createVNode("span", {
-        "class": ["mh-badge", `mh-badge--${props.tone}`, `mh-badge--${props.shape}`, `mh-badge--${props.size}`, dotKind.value ? `mh-badge--dot-${dotKind.value}` : "", extra].filter(Boolean).join(" "),
-        "style": style
-      }, [dotKind.value ? createVNode("span", {
+      const classes = ["mh-badge", `mh-badge--${props.tone}`, `mh-badge--${props.shape}`, `mh-badge--${props.size}`, dotKind.value ? `mh-badge--dot-${dotKind.value}` : "", extra].filter(Boolean).join(" ");
+      const content = createVNode(Fragment, null, [dotKind.value ? createVNode("span", {
         "class": "mh-badge__dot"
       }, null) : null, slots.default?.()]);
+      if (props.as === "button") {
+        return createVNode("button", mergeProps(forwardAttrs.value, {
+          "type": "button",
+          "class": classes,
+          "style": style
+        }), [content]);
+      }
+      return createVNode("span", mergeProps(forwardAttrs.value, {
+        "class": classes,
+        "style": style
+      }), [content]);
     };
   }
 });

package/dist/components/card/index.d.ts

@@ -76,7 +76,7 @@ export type CardHeaderIcon = string | (() => VNodeChild);
  * @example 技能卡（图标 + 标题/副标题 + 右端状态 + 正文 + 操作行）
  * <Card>
  *   <Card.Header icon={skill.icon} title={skill.name} subtitle={`V${skill.version}`}>
- *     <template #extra><Tag shape="status" tone="success">已发布</Tag></template>
+ *     <template #extra><Badge shape="soft" tone="success">已发布</Badge></template>
  *   </Card.Header>
  *   <Card.Body>{skill.description}</Card.Body>
  *   <template #actions><Button size="sm">编辑</Button></template>

package/dist/components/drawer/index.d.ts

@@ -221,6 +221,7 @@ export declare const Drawer: import("vue").DefineComponent<import("vue").Extract
     onClose: () => void;
     width: string | number;
     closable: boolean;
+    side: DrawerSide;
     closeOnBackdrop: boolean;
     maskClosable: boolean;
     keyboard: boolean;
@@ -230,7 +231,6 @@ export declare const Drawer: import("vue").DefineComponent<import("vue").Extract
     confirmLoading: boolean;
     showFooter: boolean | undefined;
     onOk: () => unknown;
-    side: DrawerSide;
 }, SlotsType<{
     default?: () => VNodeChild;
     title?: () => VNodeChild;

package/dist/components/form/index.d.ts

@@ -133,6 +133,21 @@ export interface FormItemProps {
     error?: string;
     /** 字段说明文案（常驻，排在错误之后） */
     hint?: string;
+    /**
+     * **label 旁的提示**（问号图标 + 悬停气泡，仅文本）。
+     *
+     * 与 `hint` 分工不同：`hint` 是**常驻**在控件下方的说明文案，`tip` 是**按需展开**的补充解释 ——
+     * 不占版面，只在悬停（或键盘聚焦）问号图标时出现，两者可以同时给。
+     *
+     * 图标排在 label 文本与必填星号**之后**（`服务名称*ⓘ`）；只给 `tip` 而不给 `label` 时同样保留
+     * label 列（与「只给 required」同一判据）—— 否则图标没有列可落、静默消失。
+     *
+     * 用的是 `Tooltip` 的 **hover 档**（零 JS）：显隐与定位全在 CSS，移入 / 聚焦即显、移开即隐，
+     * 因此**不吃点击、不抢焦点**。代价一条：hover 档不进浏览器顶层浮层，会被祖先 `overflow` 裁切
+     * —— 弹窗 / 抽屉里贴着裁剪边的字段可能看不全（要顶层浮层就得换 `Tooltip trigger="click"`，
+     * 本件有意不暴露该维度，见文件头「label 提示」）。
+     */
+    tip?: string;
     /** 本行 label 列宽（px）；覆盖 `Form` 的表单级设置 */
     labelWidth?: number;
     /** 本行 label 对齐；覆盖 `Form` 的表单级设置 */
@@ -205,6 +220,18 @@ export interface FormItemProps {
  * `{ y, x }` 上下 / 左右分别给，缺省 0（贴容器边）。页面里的表单在 `Panel.Body` 里、内距由那块给；
  * **弹窗 / 抽屉里没有别的容器**给内距，就用表单自带的 `padding={{ y: 16, x: 20 }}`。
  *
+ * ## label 提示（`tip`）
+ *
+ * 字段名（与必填星号）之后挂一枚问号图标，悬停 / 键盘聚焦弹出说明气泡。它是**按需展开**的补充
+ * 解释，不占版面；常驻说明仍归 `hint`（排在控件下方）。两者分工不同，也**不互相替代**。
+ *
+ * - 图标取 `@manohub/icon` 的 `help`（带圈问号），尺寸随主题图标档（`--ui-font-icon`）；
+ * - 图标**排在星号之后**（`服务名称*ⓘ`）—— 与「星号跟着字段名走」同一口径；
+ * - 只给 `tip`（无 `label`、非必填）时**同样保留 label 列**（与「只给 required」同一判据），
+ *   否则图标没有列可落、静默消失；
+ * - 气泡用 `Tooltip` 的 **hover 档**（零 JS）：不吃点击、不抢焦点；代价是 hover 档不进浏览器
+ *   顶层浮层，会被祖先 `overflow` 裁切（弹窗 / 抽屉里贴着裁剪边的字段可能看不全）。
+ *
  * ## 键盘事件（`onKeydown` 转发到根节点）
  *
  * `onKeydown` 是本件的**声明式入口**（缺省不绑）：传进来的处理器绑在根节点上 ——
@@ -238,7 +265,7 @@ export interface FormItemProps {
  *   <Form.Item label="编码" required error={errors.code} hint="保存后不可修改">
  *     <Input modelValue={form.code} onChange={(v) => (form.code = v)} />
  *   </Form.Item>
- *   <Form.Item label="缓存策略" controlWidth={360}>
+ *   <Form.Item label="缓存策略" controlWidth={360} tip="命中即不请求后端">
  *     <Select options={cacheOptions} modelValue={form.cache} onChange={…} />
  *   </Form.Item>
  *   <Form.Item label="过滤条件" fullWidth>
@@ -268,6 +295,11 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    /** label 旁的提示文案（问号图标 + 悬停气泡）；口径见 `FormItemProps.tip` */
+    tip: {
+        type: StringConstructor;
+        default: string;
+    };
     labelWidth: {
         type: NumberConstructor;
         default: undefined;
@@ -316,6 +348,11 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    /** label 旁的提示文案（问号图标 + 悬停气泡）；口径见 `FormItemProps.tip` */
+    tip: {
+        type: StringConstructor;
+        default: string;
+    };
     labelWidth: {
         type: NumberConstructor;
         default: undefined;
@@ -350,6 +387,7 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
     align: FormItemAlign;
     readonly: boolean;
     hint: string;
+    tip: string;
     labelWidth: number;
     labelAlign: FormLabelAlign;
     controlWidth: number;
@@ -730,6 +768,11 @@ export declare const Form: {
             type: StringConstructor;
             default: string;
         };
+        /** label 旁的提示文案（问号图标 + 悬停气泡）；口径见 `FormItemProps.tip` */
+        tip: {
+            type: StringConstructor;
+            default: string;
+        };
         labelWidth: {
             type: NumberConstructor;
             default: undefined;
@@ -778,6 +821,11 @@ export declare const Form: {
             type: StringConstructor;
             default: string;
         };
+        /** label 旁的提示文案（问号图标 + 悬停气泡）；口径见 `FormItemProps.tip` */
+        tip: {
+            type: StringConstructor;
+            default: string;
+        };
         labelWidth: {
             type: NumberConstructor;
             default: undefined;
@@ -812,6 +860,7 @@ export declare const Form: {
         align: FormItemAlign;
         readonly: boolean;
         hint: string;
+        tip: string;
         labelWidth: number;
         labelAlign: FormLabelAlign;
         controlWidth: number;

package/dist/components/form/index.js

@@ -1,5 +1,7 @@
 import { defineComponent, inject, watch, createVNode, createTextVNode, provide, toRef, ref, computed, isVNode } from "vue";
+import { Icon } from "@manohub/icon";
 import { mergePartStyle } from "../part-padding.js";
+import { Tooltip } from "../tooltip/index.js";
 const FORM_LABEL_WIDTH = /* @__PURE__ */ Symbol("mh-form-label-width");
 const FORM_CONTROL_WIDTH = /* @__PURE__ */ Symbol("mh-form-control-width");
 const FORM_LABEL_ALIGN = /* @__PURE__ */ Symbol("mh-form-label-align");
@@ -29,6 +31,11 @@ const FormItem = /* @__PURE__ */ defineComponent({
       type: String,
       default: ""
     },
+    /** label 旁的提示文案（问号图标 + 悬停气泡）；口径见 `FormItemProps.tip` */
+    tip: {
+      type: String,
+      default: ""
+    },
     labelWidth: {
       type: Number,
       default: void 0
@@ -85,7 +92,7 @@ const FormItem = /* @__PURE__ */ defineComponent({
       const styles = [attrs.style, labelWidth ? {
         "--mh-form-label-width": `${labelWidth}px`
       } : null].filter(Boolean);
-      const showLabel = !!props.label || props.required;
+      const showLabel = !!props.label || props.required || !!props.tip;
       return createVNode("div", {
         "class": [
           "mh-form-item",
@@ -109,7 +116,18 @@ const FormItem = /* @__PURE__ */ defineComponent({
         "class": "mh-form-item__label-text"
       }, [props.label]), props.required ? createVNode("span", {
         "class": "mh-form-item__required"
-      }, [createTextVNode("*")]) : null]) : null, createVNode("div", {
+      }, [createTextVNode("*")]) : null, props.tip ? createVNode(Tooltip, {
+        "class": "mh-form-item__tip",
+        "content": props.tip
+      }, {
+        default: () => [createVNode("button", {
+          "type": "button",
+          "class": "mh-form-item__tip-btn",
+          "aria-label": props.tip
+        }, [createVNode(Icon, {
+          "name": "help"
+        }, null)])]
+      }) : null]) : null, createVNode("div", {
         "class": "mh-form-item__control",
         "style": controlWidth ? {
           maxWidth: `${controlWidth}px`

package/dist/components/input/index.js

@@ -168,6 +168,7 @@ const Input = /* @__PURE__ */ defineComponent({
       if (props.modelValue !== void 0 && props.modelValue !== el.value) el.value = props.modelValue;
     };
     const onKeydown = (event) => {
+      if (event.isComposing) return;
       if (event.key === "Enter") props.onEnter?.(current.value ?? "");
       if (event.key === "Delete" && props.clearable) commit("");
     };

package/dist/components/nav/index.d.ts

@@ -27,6 +27,11 @@ export type NavVariant = 'tree' | 'list';
  * `renderActions` 直接透传给 `Tree`：默认隐藏、行悬浮或行内获得焦点时显形、点击不冒泡（§4.16）。
  * 应用侧只给节点，不要自己写显隐 CSS，也不要把它塞进 `renderNode`（那是常驻附加内容）。
  *
+ * ## 图标
+ *
+ * 导航项图标走 `renderIcon`（标签前的一位图标，口径同 `Tree.renderIcon`）—— **不要**用
+ * `renderLabel` 拼「图标 + 文字」：标签槽承担省略号与行内对齐，图标进去会被裁掉，也不成列。
+ *
  * @example 分类导航树（选中驱动右侧 + 行尾管理操作）
  * <Nav variant="tree" nodes={categoryNodes.value} rowKey="id" labelKey="name" width={220}
  *   selected={categoryId.value} onSelect={(node) => (categoryId.value = node.id)}
@@ -89,6 +94,16 @@ export declare const Nav: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /** 导航项图标（标签前的一位图标）：见 `Tree.renderIcon`（侧栏图标走这一位，不要塞进 `renderLabel`） */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 展开 / 收起箭头字形：见 `Tree.renderCaret`（`list` 态箭头位被隐藏，传了也不显形） */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
     /** 侧栏标题（可选；不传则只有导航体） */
     title: {
         type: StringConstructor;
@@ -206,6 +221,16 @@ export declare const Nav: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<(node: TreeNode) => unknown>;
         default: undefined;
     };
+    /** 导航项图标（标签前的一位图标）：见 `Tree.renderIcon`（侧栏图标走这一位，不要塞进 `renderLabel`） */
+    renderIcon: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 展开 / 收起箭头字形：见 `Tree.renderCaret`（`list` 态箭头位被隐藏，传了也不显形） */
+    renderCaret: {
+        type: PropType<(node: TreeNode, expanded: boolean) => unknown>;
+        default: undefined;
+    };
     /** 侧栏标题（可选；不传则只有导航体） */
     title: {
         type: StringConstructor;
@@ -285,6 +310,8 @@ export declare const Nav: import("vue").DefineComponent<import("vue").ExtractPro
     onErrorAction: () => void;
     labelKey: string;
     childrenKey: string;
+    renderCaret: (node: TreeNode, expanded: boolean) => unknown;
+    renderIcon: (node: TreeNode) => unknown;
     renderActions: (node: TreeNode) => unknown;
     expandedKeys: string[];
     defaultExpandedKeys: string[];

package/dist/components/nav/index.js

@@ -58,6 +58,16 @@ const Nav = /* @__PURE__ */ defineComponent({
       type: Function,
       default: void 0
     },
+    /** 导航项图标（标签前的一位图标）：见 `Tree.renderIcon`（侧栏图标走这一位，不要塞进 `renderLabel`） */
+    renderIcon: {
+      type: Function,
+      default: void 0
+    },
+    /** 展开 / 收起箭头字形：见 `Tree.renderCaret`（`list` 态箭头位被隐藏，传了也不显形） */
+    renderCaret: {
+      type: Function,
+      default: void 0
+    },
     /** 侧栏标题（可选；不传则只有导航体） */
     title: {
       type: String,
@@ -146,6 +156,8 @@ const Nav = /* @__PURE__ */ defineComponent({
         "defaultExpandedKeys": props.defaultExpandedKeys,
         "onExpandChange": props.onExpandChange,
         "renderActions": props.renderActions,
+        "renderIcon": props.renderIcon,
+        "renderCaret": props.renderCaret,
         "size": props.size,
         "loading": props.loading,
         "empty": props.empty,

package/dist/components/notice/index.d.ts

@@ -143,8 +143,8 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
     tone: NoticeTone;
     description: string;
     action: string;
-    closeText: string;
     onAction: () => void;
+    closeText: string;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/notification/index.d.ts

@@ -16,7 +16,7 @@ export type NotificationTone = 'info' | 'success' | 'warning' | 'error' | 'submi
  *
  * - 图标：`icon` 布尔（按 `tone` 映射）或直接给图标名；
  * - 头像：给 `avatar` 插槽 → 原样渲染（推荐塞 `<Avatar>`）；给 `avatar` 字符串 → 渲染字标兜底盒；
- * - 标签：`tags` 插槽里放标签族的 `<Tag shape="status" tone="error">`；
+ * - 标签：`tags` 插槽里放标记族（只读 `<Badge shape="soft" tone="error">`，要可关闭用 `<Tag>`）；
  * - 操作：`actions` 插槽里放按钮族的 `<Button size="sm" variant="primary">`。
  *
  * 关闭是**受控**的：本件只回调 `onClose`，不自己隐藏（可见性归消费方，避免「点了没反应」与
@@ -27,7 +27,7 @@ export type NotificationTone = 'info' | 'success' | 'warning' | 'error' | 'submi
  *
  * @example 图标 + 自动消失 + 头像 + 标签
  * <Notification icon duration={4000} tone="info" title="审批通知" avatar="张" @close="dismiss">
- *   <Tag shape="status" tone="error">逾期</Tag>
+ *   <Badge shape="soft" tone="error">逾期</Badge>
  *   {{ actions: () => <Button size="sm" variant="primary">去处理</Button> }}
  * </Notification>
  */

package/dist/components/select/index.d.ts

@@ -35,6 +35,15 @@
  * **面板有高度上限**：`--ui-select-panel-max-height`（默认 320px，钉在 `select.css` 的面板根上）——
  * 超出即面板内容区（`.mh-select__body`）滚动、搜索行常驻；列表与 `SelectTree` 两形态共用这一份。
  *
+ * ## 键盘与高亮（焦点**留在触发器上**）
+ *
+ * 面板里的选项是 `div[role='option']`、**不是 button**、也不可聚焦：高亮位由本件持有
+ * （可激活项里的格号），列表体据此下发 `data-active`，触发器上的 `aria-activedescendant`
+ * 指到那一行的 id —— 原生 popover 下的「虚拟焦点」标准表达。两条入口共用同一份模型：
+ * 触发器（`↑` / `↓` 开面板并平移、`Enter` / `Space` 提交高亮项）与面板内的搜索行
+ * （`↑` / `↓` / `Enter` 冒泡到面板）。可激活项 = 摊平 + 跳过禁用项 + （可创建时）末尾那一格
+ * 「创建 xxx」行，顺序由 `activatableOptions()` 一处给。
+ *
  * ## 状态三源等价
  *
  * 选中行 = `[data-state='selected']`（组件下发）/ 原生 `input:checked`（静态页零 JS 路径）/

package/dist/components/select/index.js

@@ -1,8 +1,8 @@
-import { defineComponent, ref, computed, createVNode, Fragment } from "vue";
+import { defineComponent, ref, computed, watch, createVNode, Fragment } from "vue";
 import { SelectList } from "./select-list.js";
 import { SelectPanel } from "./select-panel.js";
 import { SelectTrigger } from "./select-trigger.js";
-import { createSelectPanelId, isGroup, createTriggerKeydown, showPanel, hidePanel } from "./select-shared.js";
+import { createSelectPanelId, isGroup, activatableOptions, activatableCount, createTriggerKeydown, optionDomId, showPanel, hidePanel } from "./select-shared.js";
 const Select = /* @__PURE__ */ defineComponent({
   name: "Select",
   inheritAttrs: false,
@@ -167,27 +167,68 @@ const Select = /* @__PURE__ */ defineComponent({
       keyword.value = "";
     };
     const clear = () => commit(props.multiple ? [] : "");
-    const optionEls = () => panelRef.value ? [...panelRef.value.querySelectorAll(".mh-select__option")].filter((el) => !el.disabled) : [];
-    const moveFocus = (step) => {
-      const items = optionEls();
-      if (!items.length) return;
-      const at = items.indexOf(document.activeElement);
-      const next = at < 0 ? step > 0 ? 0 : items.length - 1 : (at + step + items.length) % items.length;
-      items[next].focus();
+    const activatable = computed(() => activatableOptions(visibleOptions.value));
+    const slotCount = computed(() => activatableCount(visibleOptions.value, creatable.value));
+    const activeIndex = ref(void 0);
+    const activeEl = () => panelRef.value?.querySelector('[data-active="true"]') ?? null;
+    const scrollActiveIntoView = () => {
+      requestAnimationFrame(() => activeEl()?.scrollIntoView?.({
+        block: "nearest"
+      }));
+    };
+    const moveActive = (direction) => {
+      const count = slotCount.value;
+      if (!count) return;
+      const at = activeIndex.value ?? -1;
+      activeIndex.value = at < 0 ? direction > 0 ? 0 : count - 1 : (at + direction + count) % count;
+      scrollActiveIntoView();
+    };
+    const commitActive = () => {
+      const slot = activeIndex.value;
+      if (slot === void 0) return false;
+      if (creatable.value && slot === activatable.value.length) {
+        createFromKeyword();
+        return true;
+      }
+      const option = activatable.value[slot];
+      if (!option) return false;
+      pick(option);
+      if (!props.multiple) activeIndex.value = void 0;
+      return true;
+    };
+    watch(keyword, () => {
+      activeIndex.value = void 0;
+    });
+    const panelOpen = ref(false);
+    const isPanelOpen = () => panelOpen.value;
+    const openPanel = () => {
+      if (!panelOpen.value) activeIndex.value = void 0;
+      panelOpen.value = true;
+      showPanel(panelRef.value);
+    };
+    const onPanelToggle = (event) => {
+      if (event.newState === "open") return;
+      panelOpen.value = false;
+      activeIndex.value = void 0;
     };
     const onTriggerKeydown = createTriggerKeydown({
       clearable: props.clearable,
       disabled: props.disabled,
       clear,
-      openPanel: () => showPanel(panelRef.value),
-      focusFirst: (direction) => moveFocus(direction)
+      openPanel,
+      isPanelOpen,
+      moveActive,
+      commitActive
     });
     const onPanelKeydown = (event) => {
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
-        moveFocus(event.key === "ArrowDown" ? 1 : -1);
+        moveActive(event.key === "ArrowDown" ? 1 : -1);
+        return;
       }
+      if (event.key === "Enter" && commitActive()) event.preventDefault();
     };
+    const activeDescendant = computed(() => activeIndex.value === void 0 ? void 0 : optionDomId(panelId, activeIndex.value));
     return () => {
       const hasValue = selectedValues.value.length > 0;
       return createVNode("div", {
@@ -203,6 +244,7 @@ const Select = /* @__PURE__ */ defineComponent({
         "multiple": props.multiple,
         "placeholder": props.placeholder,
         "label": selectedOptions.value[0]?.label,
+        "activeDescendant": activeDescendant.value,
         "onKeydown": onTriggerKeydown,
         "onClear": clear,
         "renderValue": props.multiple ? () => createVNode(Fragment, null, [visibleTags.value.map((option) => createVNode("span", {
@@ -215,6 +257,7 @@ const Select = /* @__PURE__ */ defineComponent({
         "id": panelId,
         "elementRef": panelRef,
         "searchable": props.searchable,
+        "onToggle": onPanelToggle,
         "keyword": keyword.value,
         "onKeyword": (value) => {
           keyword.value = value;
@@ -225,6 +268,8 @@ const Select = /* @__PURE__ */ defineComponent({
         default: () => createVNode(SelectList, {
           "options": visibleOptions.value,
           "selectedValues": selectedValues.value,
+          "activeIndex": activeIndex.value,
+          "idBase": panelId,
           "loading": props.loading,
           "emptyText": props.emptyText,
           "creatable": creatable.value,