@manohub/ui 1.0.0 → 1.0.2

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

@@ -50,6 +50,36 @@ export interface TableRowProps {
     class?: string;
     onClick?: (row: TableRow, index: number, event: MouseEvent) => void;
 }
+/**
+ * `#cell` 插槽的作用域 —— **单元格编辑走这条**。
+ *
+ * 表格**不替调用方渲染控件**：编辑格要摆什么（`Input` / `Select` / `NumberInput`、外层要不要套
+ * `Form.Item` 拿 label 位与错误文案位、只读态摆什么）全由调用方在插槽里决定。口径与 `Form.Item`
+ * 同款 —— 它的默认插槽也是「你自己放控件」；骨架层因此不必猜每种业务格子的排版，
+ * 也不会把「哪一格长什么样」的开关堆成一张越来越长的 prop 表。
+ *
+ * **回写是受控的**：`setValue(next)` 只把「这一格变成了什么」上报出去
+ * （= 发一次 `onCellChange(row, column.key, next, index)`）。本件**从不改 `data`** ——
+ * 新数组与「这次改动该不该被接受」都由调用方决定，与行选中同一套受控口径。
+ *
+ * @example 编辑格：套 `Form.Item` 拿错误位，控件自己绑值、回写走 `setValue`
+ * <Table :columns="columns" :data="rows" row-key="id" layout="fixed" :on-cell-change="write">
+ *   <template #cell="{ row, column, value, index, setValue }">
+ *     <!-- 格子里的框由控件自己带：默认有框 / `:bordered="false"` 无框 / `bordered="focus"` 聚焦才显框 -->
+ *     <Input v-if="column.key === 'name'" :model-value="String(value ?? '')" @change="setValue" />
+ *     <template v-else>{{ value }}</template>
+ *   </template>
+ * </Table>
+ */
+export interface TableCellSlotScope {
+    row: TableRow;
+    column: TableColumn;
+    /** 该格当前值（`row[column.key]` 的原值；表格不改写它，也不做任何格式化） */
+    value: unknown;
+    index: number;
+    /** 上报该格的新值（= 发一次 `onCellChange`）；调用方没接 `onCellChange` 时是空操作 */
+    setValue: (next: unknown) => void;
+}
 /**
  * 行级可勾选判定（`selectable` 的函数形态）：返回 `false` 的行渲染**禁用态**勾选框，
  * 且不进表头全选的增删范围。签名与 `onRow` / `rowClass` 一致（都给 `index`）。
@@ -150,6 +180,17 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
+     *
+     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
+     * 要不要接受、以及新数组怎么产生，都由调用方决定。
+     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     */
+    onCellChange: {
+        type: PropType<(row: TableRow, key: string, value: unknown, index: number) => void>;
+        default: undefined;
+    };
     /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
     size: {
         type: PropType<ControlSize>;
@@ -160,7 +201,18 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    borderless: {
+    /**
+     * 有无外框（缺省**有**框）：去外框写 `:bordered="false"`。
+     *
+     * **极性口径**：本库的「有无外框」一律用**肯定式** `bordered`（`Input` / `Textarea` /
+     * `NumberInput` / `Nav` 同款，见 `docs/guide/naming-and-defaults.md` §2.1）。本件原名
+     * `borderless`（否定式、默认 `false`），2026-10 按同名同义统一改成 `bordered` —— 默认行为不变
+     * （都是「缺省有框」），只是名字的极性换到与其余件一致，调用方不必再记「哪件用否定式」。
+     *
+     * 类名仍是 `.mh-table--borderless`：面层词根**统一为否定式**（输入族关框时也输出它），
+     * 与 prop 的极性相反 —— 两套各自内部一致，`Input` 的文档页记着同一处口径。
+     */
+    bordered: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -297,6 +349,17 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
+     *
+     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
+     * 要不要接受、以及新数组怎么产生，都由调用方决定。
+     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     */
+    onCellChange: {
+        type: PropType<(row: TableRow, key: string, value: unknown, index: number) => void>;
+        default: undefined;
+    };
     /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
     size: {
         type: PropType<ControlSize>;
@@ -307,7 +370,18 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    borderless: {
+    /**
+     * 有无外框（缺省**有**框）：去外框写 `:bordered="false"`。
+     *
+     * **极性口径**：本库的「有无外框」一律用**肯定式** `bordered`（`Input` / `Textarea` /
+     * `NumberInput` / `Nav` 同款，见 `docs/guide/naming-and-defaults.md` §2.1）。本件原名
+     * `borderless`（否定式、默认 `false`），2026-10 按同名同义统一改成 `bordered` —— 默认行为不变
+     * （都是「缺省有框」），只是名字的极性换到与其余件一致，调用方不必再记「哪件用否定式」。
+     *
+     * 类名仍是 `.mh-table--borderless`：面层词根**统一为否定式**（输入族关框时也输出它），
+     * 与 prop 的极性相反 —— 两套各自内部一致，`Input` 的文档页记着同一处口径。
+     */
+    bordered: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -414,11 +488,12 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     expandedKeys: (string | number)[];
     defaultExpandedKeys: (string | number)[];
     onExpandChange: (keys: Array<string | number>) => void;
+    bordered: boolean;
     modelValue: (string | number)[];
     emptyText: string;
     selectable: boolean | TableRowSelectable;
     striped: boolean;
-    borderless: boolean;
+    onCellChange: (row: TableRow, key: string, value: unknown, index: number) => void;
     stickyHead: boolean;
     stickyCol: boolean;
     showHeader: boolean;
@@ -429,13 +504,13 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     expandable: (row: TableRow, index: number) => VNodeChild;
     pagination: false | TablePagination;
 }, SlotsType<{
-    /** 单元格：`{ row, column, value, index }`（不给则直接输出原值） */
-    cell?: (context: {
-        row: TableRow;
-        column: TableColumn;
-        value: unknown;
-        index: number;
-    }) => VNodeChild;
+    /**
+     * 单元格：`{ row, column, value, index, setValue }`（不给则直接输出原值）。
+     *
+     * **编辑格也走这里**（见 `TableCellSlotScope` 的说明）：本件不替调用方渲染控件，
+     * 只给值、给位置、给一个受控的回写口 `setValue`。
+     */
+    cell?: (context: TableCellSlotScope) => VNodeChild;
     /** 行尾操作区：`{ row, index }`（面里用 `align: 'right'` 的列承载） */
     actions?: (context: {
         row: TableRow;

package/dist/components/table/index.js

@@ -43,6 +43,17 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
+     *
+     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
+     * 要不要接受、以及新数组怎么产生，都由调用方决定。
+     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     */
+    onCellChange: {
+      type: Function,
+      default: void 0
+    },
     /** 尺寸档：`sm` 紧凑（表格嵌在卡片里）/ `md` 标准 / `lg` 宽松（详情页） */
     size: {
       type: String,
@@ -53,9 +64,20 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
-    borderless: {
+    /**
+     * 有无外框（缺省**有**框）：去外框写 `:bordered="false"`。
+     *
+     * **极性口径**：本库的「有无外框」一律用**肯定式** `bordered`（`Input` / `Textarea` /
+     * `NumberInput` / `Nav` 同款，见 `docs/guide/naming-and-defaults.md` §2.1）。本件原名
+     * `borderless`（否定式、默认 `false`），2026-10 按同名同义统一改成 `bordered` —— 默认行为不变
+     * （都是「缺省有框」），只是名字的极性换到与其余件一致，调用方不必再记「哪件用否定式」。
+     *
+     * 类名仍是 `.mh-table--borderless`：面层词根**统一为否定式**（输入族关框时也输出它），
+     * 与 prop 的极性相反 —— 两套各自内部一致，`Input` 的文档页记着同一处口径。
+     */
+    bordered: {
       type: Boolean,
-      default: false
+      default: true
     },
     /** 外框交给包裹层（满高表格用） */
     fill: {
@@ -178,6 +200,9 @@ const Table = /* @__PURE__ */ defineComponent({
     const columnCount = computed(() => leadColumns.value + props.columns.length);
     const isEmpty = computed(() => props.data.length === 0);
     const cellClass = (column) => [column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__cell-amount" : "", column.wrap ? "mh-table__cell-wrap" : ""].filter(Boolean);
+    const cellSetValue = (row, column, index) => (next) => {
+      props.onCellChange?.(row, column.key, next, index);
+    };
     const colStyles = computed(() => {
       const weightSum = props.columns.reduce((sum, item) => typeof item.width === "number" ? sum + item.width : sum, 0);
       return props.columns.map((column) => {
@@ -221,7 +246,7 @@ const Table = /* @__PURE__ */ defineComponent({
     };
     const sortGlyph = (key) => props.sortKey === key && props.sortOrder === "asc" ? "chevron-up" : "chevron-down";
     return () => {
-      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.borderless ? "mh-table--borderless" : "", props.fill ? "mh-table--fill" : "", props.layout === "fixed" ? "mh-table--fixed" : "", props.stickyHead ? "mh-table--sticky-head" : "", props.stickyCol ? "mh-table--sticky-col" : "", attrs.class].filter(Boolean).join(" ");
+      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.bordered ? "" : "mh-table--borderless", props.fill ? "mh-table--fill" : "", props.layout === "fixed" ? "mh-table--fixed" : "", props.stickyHead ? "mh-table--sticky-head" : "", props.stickyCol ? "mh-table--sticky-col" : "", attrs.class].filter(Boolean).join(" ");
       const pager = typeof props.pagination === "object" ? props.pagination : null;
       return createVNode("div", {
         "class": "mh-table-wrapper",
@@ -303,12 +328,16 @@ const Table = /* @__PURE__ */ defineComponent({
         ) : null, props.columns.map((column) => createVNode("td", {
           "key": column.key,
           "class": cellClass(column).join(" ")
-        }, [slots.cell ? slots.cell({
-          row,
-          column,
-          value: row[column.key],
-          index
-        }) : slots.actions && column.align === "right" ? slots.actions({
+        }, [slots.cell ? (
+          /* 编辑格与展示格都走这条：值、位置、回写口一并交给调用方 */
+          slots.cell({
+            row,
+            column,
+            value: row[column.key],
+            index,
+            setValue: cellSetValue(row, column, index)
+          })
+        ) : slots.actions && column.align === "right" ? slots.actions({
           row,
           index
         }) : String(row[column.key] ?? "")]))]), isExpanded ? createVNode("tr", {

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

@@ -99,7 +99,7 @@ export declare const Toast: import("vue").DefineComponent<import("vue").ExtractP
     onClose?: (() => any) | undefined;
 }>, {
     text: string;
-    icon: boolean | "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" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "application" | "client" | "service" | "schema" | "compose" | "log" | "mcp" | "agent" | "server" | "exposure" | "openapi" | "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" | "page-title" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
     tone: ToastTone;
     action: string;
@@ -151,7 +151,7 @@ export declare const ToastCompound: {
         close: () => true;
     }, import("vue").PublicProps, {
         text: string;
-        icon: boolean | "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" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "application" | "client" | "service" | "schema" | "compose" | "log" | "mcp" | "agent" | "server" | "exposure" | "openapi" | "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" | "page-title" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
         tone: ToastTone;
         action: string;
@@ -205,7 +205,7 @@ export declare const ToastCompound: {
         onClose?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         text: string;
-        icon: boolean | "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" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+        icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "application" | "client" | "service" | "schema" | "compose" | "log" | "mcp" | "agent" | "server" | "exposure" | "openapi" | "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" | "page-title" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
         closable: boolean;
         tone: ToastTone;
         action: string;
@@ -256,7 +256,7 @@ export declare const ToastCompound: {
     close: () => true;
 }, string, {
     text: string;
-    icon: boolean | "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" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "application" | "client" | "service" | "schema" | "compose" | "log" | "mcp" | "agent" | "server" | "exposure" | "openapi" | "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" | "page-title" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "info-circle" | "check-circle" | "alert-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     closable: boolean;
     tone: ToastTone;
     action: string;

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { Tree, type TreeNode } from './components/tree';
 export { ListView, type ListViewProps, type ListViewStatus, type ListViewStatusTone, type ListViewCardItemProps, type ListViewCompound, } from './components/list-view';
 export { Badge, type BadgeTone, type BadgeShape, type BadgeSize, type BadgeDot, type BadgeStatus, } from './components/badge';
 export { Button, type ButtonVariant, type ButtonCompound, type ButtonCompoundType, } from './components/button';
-export { Input, Textarea, type TextareaProps, type InputCompound, type InputCompoundType, } from './components/input';
+export { Input, Textarea, NumberInput, type TextareaProps, type NumberInputProps, type InputCompound, type InputCompoundType, } from './components/input';
 export { Search, type SearchProps } from './components/search';
 export { Select, SelectTree, type SelectOption, type SelectValue } from './components/select';
 export { Switch } from './components/switch';
@@ -45,7 +45,7 @@ export { Notification, type NotificationTone, } from './components/notification'
 export { Dialog, type DialogWidth } from './components/dialog';
 export { Drawer, type DrawerSide } from './components/drawer';
 export { Tooltip, type TooltipSide, type TooltipAlign, } from './components/tooltip';
-export { Table, type TableColumn, type TableRow, type TableRowSelectable, type TableSortOrder, } from './components/table';
+export { Table, type TableColumn, type TableCellSlotScope, type TableRow, type TableRowSelectable, type TableSortOrder, } from './components/table';
 export { Pagination, type PaginationPageItem } from './components/pagination';
 export { TabBar, type TabBarOption, type TabBarValue } from './components/tabbar';
 export { Steps, type CanJump, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';

package/dist/index.js

@@ -38,6 +38,7 @@ import { Upload, formatFileSize } from "./components/upload/index.js";
 import { QueryState } from "./components/query-state/index.js";
 import { Loading } from "./components/loading/index.js";
 import { mergePartStyle, partPaddingStyle } from "./components/part-padding.js";
+import { NumberInput } from "./components/input/number-input.js";
 import { SelectTree } from "./components/select/select-tree.js";
 import { alert, closeAllDialogs, confirm } from "./services/dialog.js";
 import { clearToasts, toast } from "./services/toast.js";
@@ -66,6 +67,7 @@ export {
   Nav,
   Notice,
   Notification,
+  NumberInput,
   Page,
   Pagination,
   Panel,

package/dist/styles/components/form.css

@@ -415,6 +415,20 @@
   color: var(--ui-base-content);
 }
 
+/* 标题左端的品牌色竖标（主色胶囊，值与文档站示例标题同一套：见 `form.tokens.css`）。
+ * **只在有标题文本时出现**：这一行也会在「只给 `extra`」时渲染（筛选条那种），
+ * 那时凭空多一条竖标就成了坏的排版 —— 用 `:has()` 守住真正有标题的那一种。
+ * `flex: none`：标题换行时竖标不许被挤扁。竖标与文本之间的间距由标题行既有的 `gap` 给，
+ * 本句不另写间距（两处各写一遍必然漂）。 */
+.mh-form__title:has(> .mh-form__title-text)::before {
+  content: '';
+  flex: none;
+  width: var(--ui-form-title-bar-width);
+  height: var(--ui-form-title-bar-height);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+}
+
 /* 标题文本允许被挤窄（右端操作位不参与收缩）；长标题**换行**而不是截断
    —— 截断会让这一块读不出是什么。 */
 

package/dist/styles/components/form.tokens.css

@@ -12,4 +12,8 @@
 [data-manohub-ui] {
   --ui-form-label-width: 120px;
   --ui-form-column-min: 320px;
+  /* 标题行左端的品牌色竖标（3×12 胶囊）。与文档站示例标题（`.mh-demo__title::before`）
+     是同一套值：「页面里的一块标题」这一语言在库内与文档站只留一份规格。 */
+  --ui-form-title-bar-width: 3px;
+  --ui-form-title-bar-height: 12px;
 }

package/dist/styles/components/input.css

@@ -188,34 +188,45 @@
   inset: 0;
 }
 
-/* ===== 无边框档（表格内编辑 / 行内编辑：没有框也没有底，靠悬停给反馈） ===== */
+/* ===== 无边框档（`bordered={false}`：框与底全退，**任何状态都不再出现**） =====
+ * 本档的效果**只有一种**：无框。悬停不亮底、聚焦不显框也不留环 —— 「常态无框、聚焦才显框」
+ * 是**另一档** `bordered="focus"`（见下一节），不要把两种效果叠在同一档上。
+ *
+ * **只读值档**（`readonly` + `bordered={false}`）：几何与可编辑输入框**完全一致**（同高 / 同内距 /
+ * 值文字同左缘），仍可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制），
+ * 但「可编辑」的线索本来就一条都没有 —— 它是摘要 / 详情里值回显的推荐写法，
+ * 也是 `Form.Item` 的 `readonly` 行配的那一档。
+ *
+ * 中和句与通用状态规则**同为 0-2-0**（`.mh-input:hover` / `.mh-input:focus`），靠写在它们之后取胜。 */
 .mh-input--borderless {
   border-color: transparent;
   background: transparent;
   border-radius: 0;
 }
 .mh-input--borderless:hover,
-.mh-input--borderless.is-hover {
-  border-color: transparent;
-  background: var(--ui-base-200);
-}
+.mh-input--borderless.is-hover,
 .mh-input--borderless:focus,
 .mh-input--borderless.is-focus {
-  border-color: var(--ui-input-line-hover);
-  background: var(--ui-base-100);
-  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
 }
-/* **只读值档**（`readonly` + `bordered={false}`）：几何照旧（与可编辑输入框同高、同内距），
-   但把「可编辑」的线索全退掉 —— 只读值不该在滑过时亮起浅底、被点中时亮出边框与主色环。
-   仍然可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制）。
-   它是摘要 / 详情里值回显的推荐写法，也是 `Form.Item` 的 `readonly` 行配的那一档。
-   特异性 0-3-0，压过上面两条（0-2-0）；带壳时框主是壳，同款规则见文件下半部分。 */
-.mh-input--borderless[readonly]:hover,
-.mh-input--borderless[readonly].is-hover,
-.mh-input--borderless[readonly]:focus,
-.mh-input--borderless[readonly].is-focus {
+
+/* ===== 聚焦显框档（`bordered="focus"`：行内编辑那档）=====
+ * 常态无框无底；**悬停与聚焦复用有框档那两条**（`.mh-input:hover` / `.mh-input:focus`：框转 hover
+ * 线色、聚焦再加主色弱底环）—— 本档**不另写任何状态描写**，于是「聚焦 = 有框档的样子」这句话
+ * 在面上只有一份。
+ * 那两条是 0-2-0、本档常态是 0-1-0 ⇒ 悬停 / 聚焦必定压过常态，**与顺序无关**（裸控件这一层）。
+ * 配 `readonly`：把复用的线索中和掉（只读值不许看起来能编辑；推荐写法是 `readonly` + `false`）。 */
+.mh-input--border-on-focus {
   border-color: transparent;
   background: transparent;
+}
+.mh-input--border-on-focus[readonly]:hover,
+.mh-input--border-on-focus[readonly].is-hover,
+.mh-input--border-on-focus[readonly]:focus,
+.mh-input--border-on-focus[readonly].is-focus {
+  border-color: transparent;
   box-shadow: none;
 }
 
@@ -262,13 +273,17 @@
  * **裸 `.mh-input`（不带壳）仍由控件自己画框**（Select 的搜索行就靠它），见上一节。
  */
 .mh-input__wrap {
+  /* 左右内距走**内部变量**再吃令牌：壳是框与内距的主，而档位类挂在控件上（壳是它的父），
+     档位规则要能改到壳的内距 —— 见下面两条 `:has()`。写成 `--mh-*` 是刻意的（内部中转），
+     消费方要改内距请重设 `--ui-input-padding-x*` 那三个令牌。 */
+  --mh-input-padding-x: var(--ui-input-padding-x);
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--ui-input-affix-gap);
   width: 100%;
   height: var(--ui-input-height);
-  padding: 0 var(--ui-input-padding-x);
+  padding: 0 var(--mh-input-padding-x);
   border: 1px solid var(--ui-input-line);
   border-radius: var(--ui-input-radius);
   background: var(--ui-base-100);
@@ -276,16 +291,21 @@
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }
+/* ⚠️ 档位**必须连内距一起换**，不能只换高度：壳内控件的内距被归零（见 `.mh-input__wrap > .mh-input`），
+   壳的 12px 若原样留着，sm（24 高）就成了「矮框里塞着标准档的内距」—— 左右各 12 对 13 号字太挤，
+   看起来像内距坏了。2026-10-08 修：三档的高度与左右内距成对下发。 */
 .mh-input__wrap:has(> .mh-input--sm) {
+  --mh-input-padding-x: var(--ui-input-padding-x-sm);
   height: var(--ui-input-height-sm);
 }
 .mh-input__wrap:has(> .mh-input--lg) {
+  --mh-input-padding-x: var(--ui-input-padding-x-lg);
   height: var(--ui-input-height-lg);
 }
-/* 多行：高归内容（`resize` 要能改高），框仍归壳 */
+/* 多行：高归内容（`resize` 要能改高），框仍归壳；左右内距同样随档（走同一个变量） */
 .mh-input__wrap:has(> .mh-input--textarea) {
   height: auto;
-  padding: var(--ui-space-2) var(--ui-input-padding-x);
+  padding: var(--ui-space-2) var(--mh-input-padding-x);
 }
 /* 壳内控件占满剩余宽度，且允许被压缩（min-width:0）；附加位增减时输入区自动伸缩 */
 .mh-input__wrap > .mh-input {
@@ -309,6 +329,15 @@
 .mh-input__wrap > .mh-input.is-focus {
   box-shadow: none;
 }
+/* **聚焦显框档（`bordered="focus"`）的常态**：框与底全退。
+ * ⚠️ 这个位置是**语义要求**，不是排版偏好：本句与下面「悬停 / 聚焦」两条**同为 0-2-0**
+ * （`:has()` 按参数里最具体的那个算，这里是一个类），同特异性时 CSS 取**后写者** ——
+ * 本句若写在那两条之后，聚焦时框永远显不出来。本档的悬停 / 聚焦表现**完全复用**下面那两条
+ * （框转 hover 线色 + 主色弱底环），故本档在这里只有「常态」这一句，不另写状态描写。 */
+.mh-input__wrap:has(> .mh-input--border-on-focus) {
+  border-color: transparent;
+  background: transparent;
+}
 /* 悬停：反馈画在壳上（壳铺满整件，附加位区域也一起响应） */
 .mh-input__wrap:hover {
   border-color: var(--ui-input-line-hover);
@@ -344,29 +373,23 @@
   background: var(--ui-base-200);
   border-color: var(--ui-base-300);
 }
-/* 无边框档（表格内编辑 / 行内编辑）：框与底全退，悬停给浅底、聚焦才显出框 */
+/* 无边框档（带壳时框主是壳，`bordered={false}`）：框与底全退，**任何状态都不再出现**
+ * —— 口径与裸控件那节完全一致（本档的效果只有一种）。
+ * 中和句 0-3-0 压过通用悬停 / 聚焦（0-2-0），故写在本节（它们之后）也成立；
+ * 配 `readonly` 即**只读值档**，几何照旧、线索全无（说明见裸控件那节）。
+ * 带壳的 `bordered="focus"` 档只有「常态」那一句，在文件上半部分（与通用悬停 / 聚焦同段，位置有讲究）。 */
 .mh-input__wrap:has(> .mh-input--borderless) {
   border-color: transparent;
   border-radius: 0;
   background: transparent;
 }
-.mh-input__wrap:has(> .mh-input--borderless):hover {
-  border-color: transparent;
-  background: var(--ui-base-200);
-}
-.mh-input__wrap:has(> .mh-input--borderless):focus-within {
-  border-color: var(--ui-input-line-hover);
-  background: var(--ui-base-100);
-  box-shadow: 0 0 0 2px var(--ui-primary-weak);
-}
-/* **只读值档**同款（带壳时框主是壳）：退掉悬停底与聚焦的边框 / 底色 / 主色环。
-   特异性 0-4-0，压过上面两条（0-3-0），并且写在它们之后。 */
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):hover,
-.mh-input__wrap:has(> .mh-input--borderless[readonly]).is-hover {
-  border-color: transparent;
-  background: transparent;
-}
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):focus-within {
+.mh-input__wrap:has(> .mh-input--borderless):hover,
+.mh-input__wrap:has(> .mh-input--borderless).is-hover,
+.mh-input__wrap:has(> .mh-input--borderless):focus-within,
+/* 静态档（`.is-hover` / `.is-focus` 挂在**控件**上，与通用的 `:has(> .mh-input.is-focus)` 同源）——
+   漏了这两条，截图 / 单测走静态档时框就冒出来了（`:focus-within` 那条盖不住它，两者都是 0-3-0） */
+.mh-input__wrap:has(> .mh-input--borderless.is-hover),
+.mh-input__wrap:has(> .mh-input--borderless.is-focus) {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -488,6 +511,104 @@
   bottom: var(--ui-space-1);
 }
 
+/* ===== 数字输入（NumberInput；与 Input 同族同面） =====
+ *
+ * 表壳 / 内距 / 状态协议全部复用上面几节 —— 本件只多两样：控件上的 `.mh-input--number`
+ * 与右端的一对步进按钮。故**没有**独立的面文件，也不进 `styles/index.css` 的登记清单
+ * （那是「一组件一面」的清单，本件与 `Input` 共用 `input.css`）。
+ *
+ * 类名**与面文件同根**（`mh-input*`），口径与 `Textarea` 的 `.mh-input--textarea` 一致：
+ * 同族两件共用一份面时，族根就是 `mh-input`，另开 `mh-number-*` 会被
+ * `__tests__/contract-class-surface.spec.ts` 的「与面文件名同根」那条判据拦下 —— 那条判据
+ * 正是为了让「共用一份面」这件事在命名上看得见。
+ *
+ * `.mh-input--number` 只声明 `font-variant-numeric`：数值等宽，编辑时数字不会因字形宽度
+ * 变化而左右跳（比例数字下 `1111` 比 `0000` 窄一截，逐位输入时值区会抖）。它**不承载几何** ——
+ * 框与内距归 `.mh-input__wrap` / `.mh-input`，重复声明就是又开一份会漂的规格。 */
+.mh-input--number {
+  font-variant-numeric: tabular-nums;
+}
+
+/* 步进位：右端的一对上下箭头（列排、整条居中）。
+ * 取值（两条约束一起解出来的）：md 16 / 压 4（32 − 4 = 28 ≤ 30）、lg 16 / 压 0（32 ≤ 38）、
+ * sm 13 / 压 4（26 − 4 = 22 ≤ 22；13 是「放得下 **且** 压不过字形」的最大值 —— 14 的两条约束互相打架）。
+ * 尺寸声明落在**步进位自己**上（基准），两档改写靠表壳的 `:has()` 选到它 —— 档位类挂在控件上
+ * （`.mh-input--sm`），而箭头是控件的**兄弟**：自定义属性只向下继承，把变量声明在控件上，
+ * 箭头取不到值（与 `input.tokens.css` 头注释记的同一个坑）。 */
+.mh-input__step {
+  /* md 基准：箭头盒取**常规图标档 16**（一对 32 比内容高 30 多 2，故两枚之间压 4 → 一对 28 落进 30） */
+  --mh-input-step-icon: 16px;
+  --mh-input-step-overlap: 4px;
+  flex: none;
+  display: inline-flex;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: center;
+  /* **默认隐形且不可点**：步进位是「聚焦后调值」的辅助位，常显会让页面上每个数字框的右端
+     都挂着一对箭头（密集表单里那一列箭头比数字本身还抢眼）。
+     为什么用 `opacity` 而不是 `display`：① 它仍在流中**占位** —— 显隐时值区宽度不变，
+     否则聚焦的一瞬间数字会横向跳一格；② `pointer-events: none` 让隐形时的热区一并失效，
+     避免「点了看不见的箭头、值莫名其妙变了」。读屏仍能读到这两个按钮（不丢可达性）。 */
+  opacity: 0;
+  pointer-events: none;
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+/* 显形：**控件拿到焦点时**（点箭头本身焦点也不会掉出壳 —— 按钮在壳内，`:focus-within` 照旧成立） */
+.mh-input__wrap:focus-within > .mh-input__step {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* sm：控件只 24 高（内容高 22），16 的一对（32）放不下、14 也放不下（压到安全上限 4.67 时还有 23.3 > 22）。
+   13 是**两条约束的唯一交集**：一对 26 − 4 = 22（正好落进），压缩 4 ≤ 13/3（不侵可点区）。 */
+.mh-input__wrap:has(> .mh-input--sm) > .mh-input__step {
+  --mh-input-step-icon: 13px;
+  --mh-input-step-overlap: 4px;
+}
+/* lg：内容高 38 放得下 16 的一对，不必压（上下各留 3，字形离边框 9） */
+.mh-input__wrap:has(> .mh-input--lg) > .mh-input__step {
+  --mh-input-step-icon: 16px;
+  --mh-input-step-overlap: 0px;
+}
+
+/* 步进按钮：**裸按钮必须自带 border / background / padding**（基线 reset 不再代消费方归零，
+   见 `styles/reset.css` 与 `__tests__/contract-reset.spec.ts` 的第三组）。
+   盒宽取附加位档（16）—— 热区比字形大一档；常态同附加位色档，滑过转主色；到界即 `:disabled`（不回绕）。 */
+.mh-input__step-btn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-input-affix-size);
+  min-height: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+.mh-input__step-btn:hover:not(:disabled) {
+  color: var(--ui-primary);
+}
+.mh-input__step-btn:disabled {
+  color: var(--ui-base-content-muted);
+  cursor: not-allowed;
+}
+/* 第二枚往上**压一档**：一对箭头（两个常规图标档的盒）比控件内容高还高，靠负 margin 挤进去
+   （`gap` 不接受负值，故用 `margin-top` 的负值；量由 `--mh-input-step-overlap` 给，改档只动一个数）。
+   ⚠️ 压缩量有上限（**盒 / 3**）：chevron 的笔画含描边占盒高 1/3，压过它，上箭头字形的下半截
+   就落进下箭头的可点区 —— 用户点「增」会被判成「减」。 */
+.mh-input__step-btn + .mh-input__step-btn {
+  margin-top: calc(-1 * var(--mh-input-step-overlap));
+}
+/* 箭头图标：尺寸随档（见上面的 `--mh-input-step-icon`），**不在组件里写死 `size`** */
+.mh-input__step-btn > svg {
+  flex: none;
+  width: var(--mh-input-step-icon);
+  height: var(--mh-input-step-icon);
+}
+
 /* 附加位里下拉件的面板皮肤（与操作层并列组合：`class="mh-popup mh-input__menu"`） */
 .mh-input__menu {
   width: 96px;

package/dist/styles/components/table.css

@@ -313,6 +313,12 @@
   color: var(--ui-error);
 }
 
+/* 单元格里的编辑控件：**表格面不为它写规则**。
+ * 编辑格由调用方在 `#cell` 插槽里自己摆（`Input` / `Select` / `NumberInput`，外层可套 `Form.Item`），
+ * 框、内距、错误档、只读档全部沿用 form / input 两族既有口径 —— 表格侧再写一份就是开第二套会漂的规格。
+ * 唯一要提醒的是**列宽**：`table-layout: auto` 下「输入框的最小内容宽」会把窄列顶开，
+ * 列宽要守得住就开 `layout="fixed"`（列宽由 `<colgroup>` 决定，不再被内容撑破）。 */
+
 /* 状态点（语义四档） */
 .mh-table__status-dot {
   display: inline-block;