@manohub/ui 0.7.0 → 0.7.1

package/README.md

@@ -59,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" | "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";
+    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" | "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";
+    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" | "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";
+        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" | "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";
+        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" | "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";
+        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" | "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";
+        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" | "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";
+    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" | "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";
+    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

@@ -256,8 +256,8 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
     onCancel: () => void;
     onClose: () => void;
     width: number | DialogWidth;
-    tone: DialogTone;
     closable: boolean;
+    tone: DialogTone;
     closeOnBackdrop: boolean;
     maskClosable: boolean;
     keyboard: boolean;

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

@@ -4,6 +4,33 @@ import { type Padding } from '../part-padding';
 export type FormPadding = Padding;
 /** label 列的水平对齐：`right`（默认，与 farris / 主流水平表单一致）或 `left` */
 export type FormLabelAlign = 'left' | 'right';
+/**
+ * 字段行的排布档：
+ *
+ * - `1`（默认）：逐行；
+ * - `2 ~ 6`：**列数上限** —— 容器放得下 N 列就并排，放不下**少排一列**（不会把控件压成窄条）。
+ *   高列数（5 / 6）在默认最小宽 320 下要容器 1632 / 1960px 才排得出来，普通表单页用不到 ——
+ *   留着它是给「宽屏展示页 / 大屏看板」这类场景，配 `columnMinWidth` 才好落地；
+ * - `'auto'`：**列数随容器宽度动态变化** —— 能排几列排几列，每列宽由 `columnMinWidth` 决定。
+ *
+ * 两类的差别是**可预期性**（不是能力高低）：
+ *
+ * - 数字档承诺「最多 N 列」，所以「哪几个字段同排」在够宽的容器里是确定的；
+ * - 动态档会一路排下去（默认参数下 1320px 就够 4 列），窄了就减 ——
+ *   同一个表单在不同容器里列数不同 ⇒ **字段的相对位置会变**。要「两个字段必须并肩」就别用它。
+ */
+export type FormColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+/**
+ * 行内**垂直**对齐（label 与控件在控件行内怎么对齐）：
+ *
+ * - `center`（默认）：label 文字与控件**中线**对齐 —— 单行控件（输入框 / 选择器 / 开关）用它；
+ * - `start`：label 与控件**首行文字**对齐 —— 多行控件（文本域）与整块内容用它，
+ *   否则 label 会落到整块高度的中间。
+ *
+ * 不传即**自动判定**（样式按控件类型切档：文本域行零配置就是顶对齐）；
+ * 显式传入优先于自动判定，用于自绘内容（卡片组 / 表格 / 富文本这类样式认不出来的块）。
+ */
+export type FormItemAlign = 'center' | 'start';
 /** 表单值：**字段名 → 值**（键就是 `Form.Item` 的 `name`） */
 export type FormValues = Record<string, unknown>;
 /**
@@ -31,16 +58,27 @@ export interface FormProps {
      *
      * 宽表单（>600px）里让输入框一路拉到右边缘很难看，两种收法二选一：
      * ① 收宽度 —— 传 `controlWidth={360}`，控件列封顶、右侧留白；
-     * ② 分两列 —— 传 `columns={2}`，把行并排起来（更充分地用宽度，见下）。
+     * ② 分列 —— 传 `columns`（`2 | 3 | 4` 上限档，或 `'auto'` 动态），把行并排起来（见下）。
      */
     controlWidth?: number;
     /**
-     * 列数：`1`（默认，逐行）或 `2`（**容器够宽才并排**，窄了按列最小宽度自动回落一列）。
+     * 列数：`1`（默认，逐行）/ `2 ~ 6`（**容器够宽才并排**，窄了按列最小宽度自动回落一列）/
+     * `'auto'`（列数随容器宽度动态变化，取舍见 `FormColumns`）。
      *
-     * 两列下每一行都要能独立成格，所以「整行内容」（说明行、卡片组、表格、文本域）记得
-     * 在对应 `Form.Item` 上给 `fullWidth`，否则会被压成半宽。
+     * 多列下每一行都要能独立成格，所以「整行内容」（说明行、卡片组、表格、文本域）记得
+     * 在对应 `Form.Item` 上给 `fullWidth`，否则会被压成一格。
      */
-    columns?: 1 | 2;
+    columns?: FormColumns;
+    /**
+     * 一列的**最小宽度**（px）；缺省取令牌 `--ui-form-column-min`（320 = 「label 120 + 一个还能用的
+     * 输入框」的下限）。
+     *
+     * 它同时是**回落阈值**与**动态列数的除数**：数字档下容器窄于
+     * `N × 最小宽 + (N − 1) × 行距` 就少排一列；动态档下列数 =
+     * `floor((容器宽 + 行距) / (最小宽 + 行距))`。抽屉 / 弹窗里嫌字段太窄就调小（如 280），
+     * 宽页面里嫌列太多就调大（如 380）。
+     */
+    columnMinWidth?: number;
     /**
      * 表单内距（**px 数字**，与 `Panel` 同一口径）：`number` = 四边同值；`{ y, x }` = 上下 / 左右分别给。
      *
@@ -112,6 +150,11 @@ export interface FormItemProps {
      * 两个都给时 `text` 优先（`readonly` 只是把 label 的弱化带过去）。
      */
     readonly?: boolean;
+    /**
+     * 行内**垂直**对齐：`center`（默认，label 与控件中线对齐）/ `start`（label 与控件首行文字对齐，
+     * 用于多行与整块内容）。不传即按控件类型自动判定（文本域自动顶对齐），显式传入优先。
+     */
+    align?: FormItemAlign;
 }
 /**
  * 表单行（**自建**）：`label + 控件 + 错误 + 说明` 四件。
@@ -128,13 +171,28 @@ export interface FormItemProps {
  * ## 宽表单怎么处理（两条杠杆，可叠加）
  *
  * - **限宽**：`controlWidth` 封顶控件列（表单级给默认、逐行可覆盖）—— 单列表单不至于把输入框拉成长条；
- * - **分两列**：`columns={2}` 让行并排，宽度用得更充分；列最小宽度取令牌
- *   `--ui-form-column-min`（默认 320），所以窄容器会**自动回落成一列**，不需要消费方写媒体查询。
- *   两列下「整块内容」记得 `fullWidth`。
+ * - **分列**：`columns` 让行并排，宽度用得更充分。档位见 `FormColumns`：
+ *   `2 ~ 6` 是**列数上限**（宽够就并排、窄了自动少排一列）；`'auto'` 是**列数随宽度动态变化**。
+ *   回落阈值与动态列数都由 `columnMinWidth`（缺省令牌 `--ui-form-column-min` = 320）决定，
+ *   **不需要消费方写媒体查询**；多列下「整块内容」记得 `fullWidth`。
  *
  * `Form.Item` 是唯一入口（`Form` 只承载表单级设置、行间距/列数与容器内距），
  * 控件从默认插槽进，因此输入框 / 下拉 / 文本域 / 自绘分组卡片共用同一个容器。
  *
+ * ## 行内垂直对齐（label 与控件怎么对齐）
+ *
+ * 对齐参照是**控件那一行**，不是整行：控件列与 label 同处第 1 行，错误 / 说明自然落第 2 行起 ——
+ * 所以提示文案的有无与长短都不会带动 label 的位置。规则按控件形态自动切档，消费方零配置：
+ *
+ * - **单行控件**（输入框 / 选择器 / 开关 / 自绘单行内容）：label 与控件**中线**对齐，**与控件高度无关**
+ *   —— 档位切 sm/md/lg、换主题、放自绘控件都自动成立；
+ * - **多行与整块内容**（文本域这类样式认得出形态的）：label 与控件**首行文字**对齐，不会落到整块中间；
+ * - 样式认不出形态的自绘块（卡片组 / 表格 / 富文本）用 `align="start"` 显式声明；要强制居中用 `align="center"`。
+ *
+ * **本件不再依赖任何「控件高度」常量**：从前用一个外部注入的高度变量把 label 撑到控件高，
+ * 而那个变量在骨架层没有任何出处（回退成 `auto`），于是 label 盒退化成一行文字并贴行顶 ——
+ * 输入框中线偏高 6px、大号档偏高 10px、文本域偏高 9px，档位越高错得越多。
+ *
  * ## 容器内距（`padding`）
  *
  * 与 `Panel` **同一口径同一实现**（`src/components/part-padding.ts`）：`number` 四边同值、
@@ -211,6 +269,11 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+        type: PropType<FormItemAlign>;
+        default: undefined;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** 字段名（绑定的键）；不传即纯布局行（值由消费方自己在控件上绑定） */
     name: {
@@ -259,12 +322,18 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+        type: PropType<FormItemAlign>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     text: string;
     name: string;
     label: string;
     error: string;
     required: boolean;
+    align: FormItemAlign;
     readonly: boolean;
     hint: string;
     labelWidth: number;
@@ -345,11 +414,16 @@ export declare const Form: {
             type: NumberConstructor;
             default: undefined;
         };
-        /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+        /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
         columns: {
-            type: PropType<1 | 2>;
+            type: PropType<FormColumns>;
             default: number;
         };
+        /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+        columnMinWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
         /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
         padding: {
             type: PropType<FormPadding>;
@@ -398,11 +472,12 @@ export declare const Form: {
         onChange: (values: FormValues) => void;
         defaultValue: FormValues;
         gap: number;
-        columns: 1 | 2;
+        columns: FormColumns;
         modelValue: FormValues;
         labelWidth: number;
         labelAlign: FormLabelAlign;
         controlWidth: number;
+        columnMinWidth: number;
     }, true, {}, SlotsType<{
         default?: () => VNodeChild;
     }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -428,11 +503,16 @@ export declare const Form: {
             type: NumberConstructor;
             default: undefined;
         };
-        /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+        /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
         columns: {
-            type: PropType<1 | 2>;
+            type: PropType<FormColumns>;
             default: number;
         };
+        /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+        columnMinWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
         /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
         padding: {
             type: PropType<FormPadding>;
@@ -479,11 +559,12 @@ export declare const Form: {
         onChange: (values: FormValues) => void;
         defaultValue: FormValues;
         gap: number;
-        columns: 1 | 2;
+        columns: FormColumns;
         modelValue: FormValues;
         labelWidth: number;
         labelAlign: FormLabelAlign;
         controlWidth: number;
+        columnMinWidth: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -504,11 +585,16 @@ export declare const Form: {
         type: NumberConstructor;
         default: undefined;
     };
-    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
     columns: {
-        type: PropType<1 | 2>;
+        type: PropType<FormColumns>;
         default: number;
     };
+    /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+    columnMinWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
     padding: {
         type: PropType<FormPadding>;
@@ -557,11 +643,12 @@ export declare const Form: {
     onChange: (values: FormValues) => void;
     defaultValue: FormValues;
     gap: number;
-    columns: 1 | 2;
+    columns: FormColumns;
     modelValue: FormValues;
     labelWidth: number;
     labelAlign: FormLabelAlign;
     controlWidth: number;
+    columnMinWidth: number;
 }, {}, string, SlotsType<{
     default?: () => VNodeChild;
 }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
@@ -637,6 +724,11 @@ export declare const Form: {
             type: BooleanConstructor;
             default: boolean;
         };
+        /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+        align: {
+            type: PropType<FormItemAlign>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 字段名（绑定的键）；不传即纯布局行（值由消费方自己在控件上绑定） */
         name: {
@@ -685,12 +777,18 @@ export declare const Form: {
             type: BooleanConstructor;
             default: boolean;
         };
+        /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+        align: {
+            type: PropType<FormItemAlign>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
         text: string;
         name: string;
         label: string;
         error: string;
         required: boolean;
+        align: FormItemAlign;
         readonly: boolean;
         hint: string;
         labelWidth: number;

package/dist/components/form/index.js

@@ -55,6 +55,11 @@ const FormItem = /* @__PURE__ */ defineComponent({
     readonly: {
       type: Boolean,
       default: false
+    },
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+      type: String,
+      default: void 0
     }
   },
   slots: Object,
@@ -95,6 +100,10 @@ const FormItem = /* @__PURE__ */ defineComponent({
           "mh-form-item",
           props.error ? "is-invalid" : "",
           props.fullWidth ? "mh-form-item--full" : "",
+          // 无 label 列：控件位与提示横跨整行（两列 grid 下第一列不能留空位）
+          showLabel ? "" : "mh-form-item--no-label",
+          // 行内垂直对齐：**只在显式传入时**挂类；不传即由样式按控件类型自动判定（见 form.css 的顶对齐档）
+          props.align ? `mh-form-item--align-${props.align}` : "",
           // 右对齐是基类默认值，只有左对齐需要额外的修饰类（两处都挂会让「谁胜出」依赖源码顺序）
           labelAlign === "left" ? "mh-form-item--label-left" : "",
           // 只读展示行：label 降一档为次要色，与值拉开层级（样式见 `.mh-form-item--readonly .mh-form-item__label`）
@@ -123,11 +132,11 @@ const FormItem = /* @__PURE__ */ defineComponent({
           "class": "mh-form-item__text",
           "data-empty": textIsEmpty ? "true" : "false"
         }, [textIsEmpty ? FORM_TEXT_EMPTY : props.text])
-      ) : slots.default?.(scope()), props.error ? createVNode("div", {
+      ) : slots.default?.(scope())]), props.error ? createVNode("div", {
         "class": "mh-form-item__error"
       }, [props.error]) : null, props.hint ? createVNode("div", {
         "class": "mh-form-item__hint"
-      }, [props.hint]) : null])]);
+      }, [props.hint]) : null]);
     };
   }
 });
@@ -198,14 +207,19 @@ const FormRoot = /* @__PURE__ */ defineComponent({
       type: Number,
       default: void 0
     },
-    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
     columns: {
-      type: Number,
+      type: [Number, String],
       default: 1
     },
+    /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+    columnMinWidth: {
+      type: Number,
+      default: void 0
+    },
     /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     },
     /**
@@ -302,6 +316,12 @@ const FormRoot = /* @__PURE__ */ defineComponent({
         return cleared;
       }
     });
+    const columnsClass = () => {
+      const value = props.columns;
+      if (value === "auto") return "mh-form--columns-auto";
+      if (typeof value !== "number" || value <= 1) return "";
+      return value === 2 ? "mh-form--two-column" : `mh-form--columns-${value}`;
+    };
     return () => {
       const raw = slots.default?.();
       const list = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
@@ -310,10 +330,20 @@ const FormRoot = /* @__PURE__ */ defineComponent({
         rest
       } = splitFormHeader(list);
       return createVNode("div", {
-        "class": ["mh-form", props.columns === 2 ? "mh-form--two-column" : "", props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
-        "style": [mergePartStyle(attrs.style, props.padding), props.gap !== void 0 ? {
-          gap: `${props.gap}px`
-        } : null]
+        "class": ["mh-form", columnsClass(), props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
+        "style": [
+          mergePartStyle(attrs.style, props.padding),
+          /* 行距同时下发实体 `gap` 与变量：多列的轨道下限公式要用**同一个**行距值算 ——
+             从前公式里硬编码 8px，`gap={16}` 时列宽会算偏（临界宽度上还会误判回落）。 */
+          props.gap !== void 0 ? {
+            gap: `${props.gap}px`,
+            "--mh-form-gap": `${props.gap}px`
+          } : null,
+          /* 一列最小宽度：动态档列数的除数、数字档的回落阈值 */
+          props.columnMinWidth !== void 0 ? {
+            "--mh-form-column-min": `${props.columnMinWidth}px`
+          } : null
+        ]
       }, [header, rest]);
     };
   }