@manohub/ui 0.6.1 → 0.7.1

package/README.md

@@ -7,7 +7,7 @@ AIHub **自绘组件层**：不依赖 farris 的手写 Vue TSX 组件 + 自带
 | 层 | 入口 | 内容 |
 |---|---|---|
 | ① 主题 | `@manohub/theme/default.css`（兜底）/ `@manohub/theme/farris.css`（Farris 规范） | **全局**令牌（值）—— 随主题包独立发布，换主题只换这一行 |
-| ② 组件面 | `@manohub/ui/styles.css` | 类与状态协议 + 组件令牌基础值，**无需 JS** 即可使用 |
+| ② 组件面 | `@manohub/ui/styles.css` | **元素级 reset**（盒模型 / 按钮外观 / 列表序号 / 链接下划线 / 标题字阶归零）+ 类与状态协议 + 组件令牌基础值，**无需 JS** 即可使用 |
 | ③ Vue 层 | `@manohub/ui` | Vue 组件：渲染 ② 的类 + 行为增强 |
 | ④ 服务层 | `@manohub/ui` | 命令式反馈：`toast()` / `confirm()` / `alert()` / `showLoading()`（宿主 + 队列 + 生命周期，共用 ③ 的组件） |
 
@@ -37,6 +37,14 @@ pnpm add @manohub/ui @manohub/theme
 
 只写静态页（不装 Vue）时引这两行即可 —— 类名与 `data-*` 状态协议直接可用。
 
+**② 的第一条 import 就是元素级 reset**（随包内置，不需要第三行）：盒模型、按钮外观、
+`ul` / `ol` 的序号与缩进、`a` 的下划线、标题的默认字阶一并归零。作用域锚 `[data-manohub-ui]`
+且特异性为 0 —— 应用侧写任何元素选择器都能盖过它，所以**不必再自己写一份全局 reset**。
+
+唯一需要留意的是**富文本**：reset 之后 `ul` / `li` 没有圆点、`a` 没有下划线也没有链接色，
+需要富文本排版的页面请给自己的富文本容器类补回 `list-style` 与链接样式
+（富文本排版暂无合规归属，见 `@manohub/kit/CONTRACT.md` §10）。
+
 本包**可独立发布**：组件与类型一律从 `@manohub/ui` 直接引；下游（如 `@manohub/kit`）若转出口，是下游自己的选择。
 
 ```tsx
@@ -51,13 +59,13 @@ import { Card, Form, Tree, Checkbox } from '@manohub/ui'
 | 数据展示 | `Tree`、`ListView`（+ `.CardItem`）、`Badge`、`Tag`（常规 / 状态 / 可选 / 新增 / 筛选片） |
 | 展示 | `Avatar`（+ `.Group`）、`Skeleton`（行 / 列表 / 块状） |
 | 表单基础（**自绘**） | `Button`（+ `.Group` / `.Divider`；五型 / 小号 / 加载 / 菜单按钮 / 连体切换）、`Input`（+ `.Group` / `.Chip` / `.Display` / `.Textarea`；清除 / 可见性切换 / 校验）、`Search`（搜索框：值 / 搜索 / 清空三条回调）、`Select`（单选 / 多选 / 搜索 / 加载；面板用原生 popover）、`Switch`（表格档 / 表单档） |
-| 表单与选择 | `Form`（+ `.Header` / `.Item`；标签体系、成员归位、`v-model` 值收集与命令式 `clear()`）、`Filter`（+ `.Item`；`Form` 的壳：条件字段写成子件、控件自放、查询/重置与快照归一）、`Checkbox`、`Radio`（+ `.Group` / `.Card`；卡片式单选）、`Capsule`（胶囊选择器；胶囊 / 方形两档外形，与 `Tabset` 组合即页签） |
+| 表单与选择 | `Form`（+ `.Header` / `.Item`；标签体系、成员归位、`v-model` 值收集与命令式 `clear()`）、`Filter`（+ `.Item`；`Form` 的壳：条件字段写成子件、控件自放、查询/重置与快照归一）、`Checkbox`、`Radio`（+ `.Group` / `.Card`；卡片式单选）、`Capsule`（胶囊选择器；胶囊 / 方形两档外形，与 `Tabs` 组合即页签） |
 | 反馈与三态 | `Notice`（条状提示）、`Notification`（通知卡：标题 + 头像 / 标签 / 操作 / 关闭位）、`QueryState`（三态容器；内建空 / 错误插画取自设计交付的四张 SVG，原样内联在 `src/utils/state-illustration.ts`）、`Loading`（转圈 + 遮罩：行内 / 区域 / 全屏三形态） |
 | 反馈与引导（**自绘**） | `Toast`（消息提示：语义四档 / loading + 可选动作 + 自动消失计时 + `.Stack` 堆叠）、`Steps`（步骤条：节点式 / 燕尾段式 / `.Progress` 进度条） |
-| 数据展示（**自绘**） | `Table`（列 × 数据 + 选择列 + 排序事件 + 固定表头 / 固定列 + 批量栏 / 合计行；排序与列宽拖拽算法归调用方）、`Pagination`（总数 / 每页条数 / 页码窗口 / 简单档 / 外框档）、`Tabs`（下划线页签 + 「更多」收纳） |
+| 数据展示（**自绘**） | `Table`（列 × 数据 + 选择列 + 排序事件 + 固定表头 / 固定列 + 批量栏 / 合计行；排序与列宽拖拽算法归调用方）、`Pagination`（总数 / 每页条数 / 页码窗口 / 简单档 / 外框档）、`TabBar`（下划线页签 + 「更多」收纳） |
 | 内容与文件 | `Code`（行内 chip / 代码块 + 语言角标 + 图标复制位，**只读展示**）、`CodeEditor`（等宽多行可编辑代码区：按行自适应 / 限高内滚 / 只读、禁用）、`Upload`（+ `.Thumbs`；拖拽 / 点击上传区 + 已传文件列表） |
 | 浮层（**自绘**） | `Dialog`（原生 `<dialog>` + 模态皮肤；关闭受控）、`Tooltip`（**零 JS**：显隐与定位全走操作层 hover 档） |
-| 操作层（零 JS 原语） | `Collapse`（+ `.Stack`）、`Tabset`；浮层只提供样式层（`styles/operations/popup.css`，零 JS 可直接用），Vue 浮层仍用 farris 适配件 |
+| 操作层（跨件原语） | `Collapse`（+ `.Stack`）、`Tabs`（+ `TabPanel`，面板切换骨架 —— 显隐归组件层，非零 JS 原语）；浮层只提供样式层（`styles/operations/popup.css`，零 JS 可直接用），Vue 浮层仍用 farris 适配件 |
 
 ## 三态的操作按钮
 

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

@@ -212,7 +212,7 @@ export declare const Button: import("vue").DefineComponent<import("vue").Extract
 }>> & Readonly<{}>, {
     block: boolean;
     size: ControlSize;
-    icon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     menu: boolean;
     caret: boolean;
     disabled: boolean;
@@ -223,7 +223,7 @@ export declare const Button: import("vue").DefineComponent<import("vue").Extract
     variant: ButtonVariant;
     danger: boolean;
     shape: ButtonShape;
-    trailingIcon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     href: string;
     target: string;
     popoverTarget: string;
@@ -319,7 +319,7 @@ export declare const ButtonCompound: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         block: boolean;
         size: ControlSize;
-        icon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         menu: boolean;
         caret: boolean;
         disabled: boolean;
@@ -330,7 +330,7 @@ export declare const ButtonCompound: {
         variant: ButtonVariant;
         danger: boolean;
         shape: ButtonShape;
-        trailingIcon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         href: string;
         target: string;
         popoverTarget: string;
@@ -431,7 +431,7 @@ export declare const ButtonCompound: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         block: boolean;
         size: ControlSize;
-        icon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+        icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         menu: boolean;
         caret: boolean;
         disabled: boolean;
@@ -442,7 +442,7 @@ export declare const ButtonCompound: {
         variant: ButtonVariant;
         danger: boolean;
         shape: ButtonShape;
-        trailingIcon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+        trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         href: string;
         target: string;
         popoverTarget: string;
@@ -537,7 +537,7 @@ export declare const ButtonCompound: {
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     block: boolean;
     size: ControlSize;
-    icon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+    icon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     menu: boolean;
     caret: boolean;
     disabled: boolean;
@@ -548,7 +548,7 @@ export declare const ButtonCompound: {
     variant: ButtonVariant;
     danger: boolean;
     shape: ButtonShape;
-    trailingIcon: "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+    trailingIcon: "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     href: string;
     target: string;
     popoverTarget: string;

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

@@ -25,15 +25,16 @@ export type CapsuleShape = 'pill' | 'square';
  *
  * ## 与面板组合（页签用法）
  *
- * 外面套 `styles/operations/tabset.css` 的 `.mh-tabset`：**同一组 `name` 的 radio** 既是本件的选项、
- * 也是操作层的档位开关（第 n 项 ↔ 第 n 块面板）。本件不认识 tabset，tabset 也不认识本件（两层零互指）。
+ * 塞进 `Tabs` 的 `selector` 插槽即可：本件的 `onChange` 把选中值递给 `Tabs` 的 `select`，
+ * 面板显隐由 `Tabs` 按受控值下发 `hidden`。本件不认识 tabs，tabs 也不认识本件（两层零互指）。
+ * 故**不必**为了组合而给它 `name`（组名不传即按实例自动生成）。
  *
  * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active'|'inactive']` / 静态档 `.is-selected`。
  *
  * ## 必须有值
  *
  * 单选语义就是必选其一：受控传 `modelValue`，非受控由 `defaultValue` 起，**两者都没给时缺省选中第一个
- * 可选项**（跳过禁用项；没有可选项才是空值）—— 与 `Radio.Group` / `Radio.Card` / `Tabset` 同一条口径。
+ * 可选项**（跳过禁用项；没有可选项才是空值）—— 与 `Radio.Group` / `Radio.Card` / `Tabs` 同一条口径。
  *
  * @example 选项表
  * <Capsule :options="[{label:'全部',value:'all'}]" v-model="v" />
@@ -42,10 +43,13 @@ export type CapsuleShape = 'pill' | 'square';
  * <Capsule shape="square" :options="[{label:'全部',value:'all'}]" v-model="v" />
  *
  * @example 与面板组合（页签）
- * <div class="mh-tabset">
- *   <Capsule name="t1" :options="tabs" v-model="v" />
- *   <div class="mh-tabset-panels">…第 n 块面板…</div>
- * </div>
+ * <Tabs v-model:value="v">
+ *   {{
+ *     selector: ({ value, options, select }) =>
+ *       <Capsule :options="options" modelValue={value} onChange={select} />,
+ *     default: () => [<TabPanel name="全部">…</TabPanel>, <TabPanel name="进行中">…</TabPanel>],
+ *   }}
+ * </Tabs>
  */
 export declare const Capsule: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** 选项表（也可用默认插槽自排） */
@@ -63,7 +67,7 @@ export declare const Capsule: import("vue").DefineComponent<import("vue").Extrac
         type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    /** 原生分组名（同名才互斥；不传即按实例自动生成） */
     name: {
         type: StringConstructor;
         default: undefined;
@@ -111,7 +115,7 @@ export declare const Capsule: import("vue").DefineComponent<import("vue").Extrac
         type: PropType<string | number | undefined>;
         default: undefined;
     };
-    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    /** 原生分组名（同名才互斥；不传即按实例自动生成） */
     name: {
         type: StringConstructor;
         default: undefined;

package/dist/components/capsule/index.js

@@ -18,7 +18,7 @@ const Capsule = /* @__PURE__ */ defineComponent({
       type: [String, Number],
       default: void 0
     },
-    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    /** 原生分组名（同名才互斥；不传即按实例自动生成） */
     name: {
       type: String,
       default: void 0

package/dist/components/card/index.js

@@ -36,7 +36,10 @@ function renderHeaderParts(parts) {
   }, [parts.extra])];
 }
 const mergeSegmentStyle = (attrsStyle, padding) => {
-  if (padding === void 0) return attrsStyle;
+  if (padding === void 0 || padding === "") return attrsStyle;
+  if (typeof padding === "string") return [attrsStyle, {
+    padding
+  }];
   const y = typeof padding === "number" ? padding : padding.y;
   const x = typeof padding === "number" ? padding : padding.x;
   const style = {};
@@ -54,7 +57,7 @@ const CardHeader = /* @__PURE__ */ defineComponent({
   props: {
     /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     },
     /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
@@ -96,7 +99,7 @@ const CardBody = /* @__PURE__ */ defineComponent({
   props: {
     /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -117,7 +120,7 @@ const CardFooter = /* @__PURE__ */ defineComponent({
   props: {
     /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },

package/dist/components/checkbox/index.js

@@ -63,6 +63,7 @@ const Checkbox = /* @__PURE__ */ defineComponent({
       const state = props.indeterminate ? "indeterminate" : props.modelValue ? "checked" : "unchecked";
       return createVNode("label", {
         "class": ["mh-checkbox", props.size === "md" ? "" : `mh-checkbox--${props.size}`, props.disabled ? "is-disabled" : "", attrs.class].filter(Boolean).join(" "),
+        "data-inline-control": "true",
         "style": attrs.style
       }, [createVNode("input", mergeProps(inputAttrs.value, {
         "ref": inputRef,

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

@@ -1,5 +1,7 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 export type DialogWidth = 'md' | 'lg';
+/** 语义档：决定标题左侧裸符号的图形与颜色（缺省不渲染图标） */
+export type DialogTone = 'info' | 'success' | 'warning' | 'error';
 /**
  * 对话框（**自绘**；模态语义与遮罩全由原生 `<dialog>` 给）。
  *
@@ -45,6 +47,15 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
+     * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
+     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     */
+    tone: {
+        type: PropType<DialogTone>;
+        default: undefined;
+    };
     /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
     width: {
         type: PropType<DialogWidth | number>;
@@ -55,17 +66,24 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 组件是「受控弹窗」，用户点遮罩想退出是最常见的心智；「防误关」只对**命令式确认框**成立
+     * （那里一条误点就丢一次决策），故服务层的 `confirm()` / `alert()` 会**显式**传 `false` 把它关掉 ——
+     * 与 Ant Design 的分工相同（`<Modal maskClosable>` 默认 `true`，`Modal.confirm` 默认 `false`）。
+     * 表单类弹窗若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致 —— 两者面对同一个「误关」风险，口径不得相反） */
     keyboard: {
         type: BooleanConstructor;
         default: boolean;
@@ -75,6 +93,14 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 固定高度（如 `480px` / `min(560px, 80vh)`）—— 与 `panelWidth` 对称。
+     * 给了之后内容区吃满剩余高度并自行滚动，页头与底栏始终可见（`styles/components/dialog.css` 的三段布局）。
+     */
+    panelHeight: {
+        type: StringConstructor;
+        default: undefined;
+    };
     /** 内建底栏：确定按钮文案 */
     okText: {
         type: StringConstructor;
@@ -128,6 +154,15 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
+     * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
+     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     */
+    tone: {
+        type: PropType<DialogTone>;
+        default: undefined;
+    };
     /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
     width: {
         type: PropType<DialogWidth | number>;
@@ -138,17 +173,24 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 组件是「受控弹窗」，用户点遮罩想退出是最常见的心智；「防误关」只对**命令式确认框**成立
+     * （那里一条误点就丢一次决策），故服务层的 `confirm()` / `alert()` 会**显式**传 `false` 把它关掉 ——
+     * 与 Ant Design 的分工相同（`<Modal maskClosable>` 默认 `true`，`Modal.confirm` 默认 `false`）。
+     * 表单类弹窗若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致 —— 两者面对同一个「误关」风险，口径不得相反） */
     keyboard: {
         type: BooleanConstructor;
         default: boolean;
@@ -158,6 +200,14 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * 固定高度（如 `480px` / `min(560px, 80vh)`）—— 与 `panelWidth` 对称。
+     * 给了之后内容区吃满剩余高度并自行滚动，页头与底栏始终可见（`styles/components/dialog.css` 的三段布局）。
+     */
+    panelHeight: {
+        type: StringConstructor;
+        default: undefined;
+    };
     /** 内建底栏：确定按钮文案 */
     okText: {
         type: StringConstructor;
@@ -207,10 +257,12 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
     onClose: () => void;
     width: number | DialogWidth;
     closable: boolean;
+    tone: DialogTone;
     closeOnBackdrop: boolean;
     maskClosable: boolean;
     keyboard: boolean;
     panelWidth: string;
+    panelHeight: string;
     okText: string;
     cancelText: string;
     okDanger: boolean;

package/dist/components/dialog/index.js

@@ -1,6 +1,12 @@
 import { defineComponent, ref, watch, onMounted, onBeforeUnmount, computed, createVNode } from "vue";
 import { Icon } from "@manohub/icon";
 import { Button } from "../button/index.js";
+const TONE_ICON = {
+  info: "info",
+  success: "check",
+  warning: "alert",
+  error: "close"
+};
 const Dialog = /* @__PURE__ */ defineComponent({
   name: "Dialog",
   inheritAttrs: false,
@@ -15,6 +21,15 @@ const Dialog = /* @__PURE__ */ defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
+     * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
+     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     */
+    tone: {
+      type: String,
+      default: void 0
+    },
     /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
     width: {
       type: [String, Number],
@@ -25,17 +40,24 @@ const Dialog = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
-    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 组件是「受控弹窗」，用户点遮罩想退出是最常见的心智；「防误关」只对**命令式确认框**成立
+     * （那里一条误点就丢一次决策），故服务层的 `confirm()` / `alert()` 会**显式**传 `false` 把它关掉 ——
+     * 与 Ant Design 的分工相同（`<Modal maskClosable>` 默认 `true`，`Modal.confirm` 默认 `false`）。
+     * 表单类弹窗若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
       type: Boolean,
-      default: false
+      default: true
     },
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
       type: Boolean,
-      default: false
+      default: true
     },
-    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致 —— 两者面对同一个「误关」风险，口径不得相反） */
     keyboard: {
       type: Boolean,
       default: true
@@ -45,6 +67,14 @@ const Dialog = /* @__PURE__ */ defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * 固定高度（如 `480px` / `min(560px, 80vh)`）—— 与 `panelWidth` 对称。
+     * 给了之后内容区吃满剩余高度并自行滚动，页头与底栏始终可见（`styles/components/dialog.css` 的三段布局）。
+     */
+    panelHeight: {
+      type: String,
+      default: void 0
+    },
     /** 内建底栏：确定按钮文案 */
     okText: {
       type: String,
@@ -139,11 +169,15 @@ const Dialog = /* @__PURE__ */ defineComponent({
       };
       return void 0;
     });
+    const heightStyle = computed(() => props.panelHeight ? {
+      height: props.panelHeight
+    } : void 0);
     return () => createVNode("dialog", {
       "ref": dialogRef,
-      "class": ["mh-popup", "mh-dialog", props.width === "lg" ? "mh-dialog--lg" : "", attrs.class].filter(Boolean).join(" "),
+      "class": ["mh-popup", "mh-dialog", props.width === "lg" ? "mh-dialog--lg" : "", props.tone ? `mh-dialog--${props.tone}` : "", attrs.class].filter(Boolean).join(" "),
       "style": {
         ...widthStyle.value,
+        ...heightStyle.value,
         ...attrs.style
       },
       "onCancel": (event) => {
@@ -156,9 +190,12 @@ const Dialog = /* @__PURE__ */ defineComponent({
           requestClose("close");
         }
       }
-    }, [props.title || slots.title || props.closable ? createVNode("div", {
+    }, [props.title || slots.title || props.closable || props.tone ? createVNode("div", {
       "class": "mh-dialog__header"
-    }, [createVNode("span", {
+    }, [props.tone ? createVNode(Icon, {
+      "name": TONE_ICON[props.tone],
+      "class": "mh-dialog__tone-icon"
+    }, null) : null, createVNode("span", {
       "class": "mh-dialog__title"
     }, [slots.title ? slots.title() : props.title]), props.closable ? createVNode("button", {
       "type": "button",

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

@@ -62,17 +62,23 @@ export declare const Drawer: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 与 `Dialog` 同一口径：组件形态默认开，「防误关」只对**命令式**形态成立
+     * （服务层的 `confirm()` / `alert()` 显式传 `false`）。
+     * 表单类抽屉若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致） */
     keyboard: {
         type: BooleanConstructor;
         default: boolean;
@@ -145,17 +151,23 @@ export declare const Drawer: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 与 `Dialog` 同一口径：组件形态默认开，「防误关」只对**命令式**形态成立
+     * （服务层的 `confirm()` / `alert()` 显式传 `false`）。
+     * 表单类抽屉若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致） */
     keyboard: {
         type: BooleanConstructor;
         default: boolean;

package/dist/components/drawer/index.js

@@ -30,17 +30,23 @@ const Drawer = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
-    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    /**
+     * 点遮罩是否关闭（**默认开**，与主流组件形态一致）。
+     *
+     * 与 `Dialog` 同一口径：组件形态默认开，「防误关」只对**命令式**形态成立
+     * （服务层的 `confirm()` / `alert()` 显式传 `false`）。
+     * 表单类抽屉若怕手滑丢内容，自己显式传 `:close-on-backdrop="false"`。
+     */
     closeOnBackdrop: {
       type: Boolean,
-      default: false
+      default: true
     },
-    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或；默认同 `true`） */
     maskClosable: {
       type: Boolean,
-      default: false
+      default: true
     },
-    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    /** Esc 是否关闭（缺省开，与 `closeOnBackdrop` 一致） */
     keyboard: {
       type: Boolean,
       default: true