@manohub/ui 0.7.0 → 0.7.1

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

@@ -1,4 +1,5 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type Padding } from '../part-padding';
 /**
  * 布局间距档：**只开放令牌档位，不开放任意 px**（`none/sm/md/lg/xl` → `0 / --ui-space-1/2/3/4`）。
  *
@@ -32,7 +33,8 @@ export type LayoutSpan = 1 | 2 | 3 | 4;
  *
  * ## 与其它件的边界
  *
- * - 表单里并排字段用 `Form columns={2}`（它管 label 列与行距），不要用本族拼表单；
+ * - 表单里并排字段用 `Form` 的 `columns`（它管 label 列、行距与**回落**），不要用本族拼表单
+ *   —— 本族的列数是**恒定**的，窄了只等分收窄，表单会被压出不可用的窄控件；
  * - 页面级两栏（各自滚动）用 `Page.Split`；
  * - 只有「块与块怎么摆」这一件事归本族，滚动 / 工具位 / 卡片外观都不归它。
  */
@@ -63,6 +65,20 @@ export declare const Layout: {
             type: NumberConstructor;
             default: undefined;
         };
+        /**
+         * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+         * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+         * 口径与理由见 `part-padding.ts`。
+         *
+         * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+         * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+         * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+         * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+         */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
         gap: {
@@ -89,7 +105,22 @@ export declare const Layout: {
             type: NumberConstructor;
             default: undefined;
         };
+        /**
+         * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+         * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+         * 口径与理由见 `part-padding.ts`。
+         *
+         * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+         * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+         * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+         * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+         */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
+        padding: Padding;
         justify: LayoutJustify;
         gap: LayoutGap;
         align: LayoutAlign;
@@ -124,6 +155,11 @@ export declare const Layout: {
             type: PropType<LayoutSpan>;
             default: number;
         };
+        /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
         gap: {
@@ -150,7 +186,13 @@ export declare const Layout: {
             type: PropType<LayoutSpan>;
             default: number;
         };
+        /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
+        padding: Padding;
         wrap: boolean;
         justify: LayoutJustify;
         span: LayoutSpan;

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { defineComponent, createVNode } from "vue";
+import { mergePartStyle } from "../part-padding.js";
 function modifier(base, name, value) {
   return value === void 0 || value === "" ? "" : `${base}--${name}-${value}`;
 }
@@ -30,6 +31,11 @@ const LayoutColumn = /* @__PURE__ */ defineComponent({
     span: {
       type: Number,
       default: 1
+    },
+    /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+    padding: {
+      type: [Number, Object, String],
+      default: void 0
     }
   },
   slots: Object,
@@ -39,7 +45,7 @@ const LayoutColumn = /* @__PURE__ */ defineComponent({
   }) {
     return () => createVNode("div", {
       "class": ["mh-layout-column", modifier("mh-layout-column", "gap", props.gap), modifier("mh-layout-column", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-column", "justify", props.justify) : "", props.wrap ? "mh-layout-column--wrap" : "", props.span > 1 ? `mh-layout-column--span-${props.span}` : "", attrs.class].filter(Boolean).join(" "),
-      "style": attrs.style
+      "style": mergePartStyle(attrs.style, props.padding)
     }, [slots.default?.()]);
   }
 });
@@ -71,6 +77,20 @@ const LayoutRow = /* @__PURE__ */ defineComponent({
     minColumnWidth: {
       type: Number,
       default: void 0
+    },
+    /**
+     * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+     * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+     * 口径与理由见 `part-padding.ts`。
+     *
+     * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+     * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+     * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+     * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+     */
+    padding: {
+      type: [Number, Object, String],
+      default: void 0
     }
   },
   slots: Object,
@@ -86,7 +106,7 @@ const LayoutRow = /* @__PURE__ */ defineComponent({
       if (props.minColumnWidth) style["--mh-layout-row-min"] = `${props.minColumnWidth}px`;
       return createVNode("div", {
         "class": ["mh-layout-row", modifier("mh-layout-row", "gap", props.gap), modifier("mh-layout-row", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-row", "justify", props.justify) : "", isGrid ? "mh-layout-row--grid" : "", isGrid ? modifier("mh-layout-row", "columns", props.columns) : "", attrs.class].filter(Boolean).join(" "),
-        "style": style
+        "style": mergePartStyle(style, props.padding)
       }, [slots.default?.()]);
     };
   }

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

@@ -136,11 +136,11 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    icon: boolean | "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: 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" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     onClose: () => void;
     message: string;
-    tone: NoticeTone;
     closable: boolean;
+    tone: NoticeTone;
     description: string;
     action: string;
     closeText: string;

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

@@ -102,11 +102,11 @@ export declare const Notification: import("vue").DefineComponent<import("vue").E
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    icon: boolean | "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: 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" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     title: string;
     onClose: () => void;
-    tone: NotificationTone;
     closable: boolean;
+    tone: NotificationTone;
     avatar: string;
     duration: number;
 }, SlotsType<{

package/dist/components/page/index.js

@@ -12,7 +12,7 @@ const PageFilter = /* @__PURE__ */ defineComponent({
   props: {
     /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 0`） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -49,7 +49,7 @@ const PageHeader = /* @__PURE__ */ defineComponent({
     },
     /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 13px`） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -107,7 +107,7 @@ const PageBody = /* @__PURE__ */ defineComponent({
       default: "plain"
     },
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -128,7 +128,7 @@ const PageFooter = /* @__PURE__ */ defineComponent({
   props: {
     /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`12px 20px`） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },

package/dist/components/panel/index.js

@@ -24,7 +24,7 @@ const PanelHeader = /* @__PURE__ */ defineComponent({
     },
     /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -70,7 +70,7 @@ const PanelBody = /* @__PURE__ */ defineComponent({
   props: {
     /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -91,7 +91,7 @@ const PanelFooter = /* @__PURE__ */ defineComponent({
   props: {
     /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },
@@ -145,7 +145,7 @@ const PanelRoot = /* @__PURE__ */ defineComponent({
     },
     /** 面板内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边 */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     }
   },

package/dist/components/part-padding.d.ts

@@ -1,20 +1,23 @@
 import type { StyleValue } from 'vue';
 /**
- * 骨架件的**内距**口径（`Panel` 及其三件、`Form` 共用同一套）。
+ * 骨架件的**内距**口径（`Card` / `Form` / `Page` / `Panel` / `Layout` 共用同一套）。
  *
  * - `number` → 四边同值（`padding={16}`）；
  * - `{ y, x }` → 上下 / 左右分别给（`{ y: 12, x: 20 }`，弹窗里的容器常用 —— 与 `Page` 的页面左右内距同档），
- *   **缺哪边就不落哪边的声明**（只给 `y` 时不覆盖消费方在 `style` 里写的左右内距）。
+ *   **缺哪边就不落哪边的声明**（只给 `y` 时不覆盖消费方在 `style` 里写的左右内距）；
+ * - `string` → **原样下发**（CSS 简写，可非对称，如 `'40px 0 0 140px'`）—— **逃生舱**。
  *
- * 为什么是 px 数字而不是 CSS 字符串：几何值在本仓是**设计基准**，不跟根字号
- * （与 `Form.labelWidth` / `表格.rowHeight` 同口径）；要写自适应内距的场合请走 `class`。
+ * 常规用 `number` / `{ y, x }`：几何值在本仓是**设计基准**，不跟根字号
+ * （与 `Form.labelWidth` / `表格.rowHeight` 同口径）。
+ * `string` 只为「令牌梯度与 `{ y, x }` 都表达不了的设计要求」留口（典型：**只给一侧**的非对称坐标）——
+ * 写它等于自己写 CSS，所以**优先级最低**，能不用就不用。
  */
 export type Padding = number | {
     y?: number;
     x?: number;
-};
+} | string;
 /**
- * 内距 → 行内样式。缺省（`undefined`）时返回 `undefined`：**不额外产生 style 属性**，
+ * 内距 → 行内样式。缺省（`undefined` / 空串）时返回 `undefined`：**不额外产生 style 属性**，
  * DOM 与「没有这个维度」时完全一致。
  */
 export declare function partPaddingStyle(padding: Padding | undefined): StyleValue | undefined;

package/dist/components/part-padding.js

@@ -1,6 +1,7 @@
 function partPaddingStyle(padding) {
-  if (padding === void 0) return void 0;
+  if (padding === void 0 || padding === "") return void 0;
   if (typeof padding === "number") return { padding: `${padding}px` };
+  if (typeof padding === "string") return { padding };
   const style = {};
   if (padding.y !== void 0) {
     style.paddingTop = `${padding.y}px`;

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

@@ -15,7 +15,7 @@ import type { ControlSize } from '../control-size';
  * `Checkbox.Group` 同一份口径，故 `v-model` 是本族的推荐写法。
  *
  * **单选组必须有值**：`modelValue` 与非受控初值都没给时，落到**第一个可选项**（跳过禁用项）——
- * 单选语义就是必选其一，与 `Tabset` 的「缺省第一项」同口径；没有可选项（表为空或全禁用）才是空值。
+ * 单选语义就是必选其一，与 `Tabs` 的「缺省第一项」同口径；没有可选项（表为空或全禁用）才是空值。
  * 自排插槽（`Radio.Group` 不给 `options`）时组件无从推断有哪些值，缺省值由消费方自定。
  *
  * 状态表达不统一是**有意的**（各自贴着自己的面）：`Radio` 走原生 `input:checked + .mh-radio__box`

package/dist/components/radio/index.js

@@ -44,6 +44,7 @@ const Radio = /* @__PURE__ */ defineComponent({
   }) {
     return () => createVNode("label", {
       "class": ["mh-radio", props.size === "md" ? "" : `mh-radio--${props.size}`, props.disabled ? "is-disabled" : void 0, attrs.class].filter(Boolean).join(" "),
+      "data-inline-control": "true",
       "style": attrs.style
     }, [createVNode("input", {
       "class": "mh-radio__input",

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

@@ -8,6 +8,12 @@ export interface StepsItem {
     icon?: IconName;
 }
 export type StepsVariant = 'node' | 'bar';
+/**
+ * 跳转验证：**能不能跳到第 `index` 步**（`current` 是当前步）。
+ *
+ * 不传即「全可跳」—— 件不猜业务规则，限制由调用方注入（如「只允许回退」= `i <= current`）。
+ */
+export type CanJump = (index: number, current: number) => boolean;
 /**
  * 步骤条（**自绘**；节点式 + 燕尾段式 + 进度条）。
  *
@@ -23,7 +29,28 @@ export type StepsVariant = 'node' | 'bar';
  * - `variant="node"`（缺省）：节点 + 同行标题 + 点线折角箭头，段长弹性 —— 步骤数少、要给每步留标题时用；
  * - `variant="bar"`：燕尾段条（定宽 140、相邻重叠 10），只有当前段是主色 —— 段数固定、像进度分段时用。
  *
- * 步骤条**不可点**（规范未演示跳步）：要跳转请在步骤旁自己放操作，或改用别的件。
+ * ## 可点档（`clickable`）
+ *
+ * 规范未演示跳步 ⇒ **缺省不可点**（连手型都不给；步的标签与类名也与老版本一致，只多一个
+ * `aria-current="step"` —— 那是当前步的语义标注，与可不可点无关）。要跳转就显式开
+ * `clickable`：步渲染成**原生 `<button>`**（键盘 / 焦点 / 禁用都交浏览器）。
+ *
+ * ### 「哪几步能跳」由调用方给（`canJump`）
+ *
+ * 本件**不猜业务规则**：`canJump` 缺省 `true`（每一不都可跳），要限制就注入一条判定：
+ *
+ * ```tsx
+ * <Steps clickable :can-jump="(index, current) => index <= current" … />
+ * ```
+ *
+ * 为什么不给内置的「前进最多一步 / 只允许后退」默认：向导的「往前走」几乎总带着前置校验
+ * （扫过了吗 / 风险确认了吗），而**步骤条上的点击不会跑那些校验** —— 件若自己放开一步，
+ * 就等于给了一条绕开门禁的旁路；可若定成「一律不许前进」，那又是替业务做了决定。
+ * 通用件该回答的是「能不能跳」，答案让调用方给。
+ *
+ * 本件**不给 `beforeChange` / `onBeforeChange` 一类的钩子**：它认 `current`（受控件），件本就不自己
+ * 换步，「跳转前验证」的落点是**渲染期的 `disabled`** —— 在事件里再判一次只会得到
+ * 「看着可点、点了没反应」这个更差的状态。
  *
  * 进度条（`Steps.Progress`）单列，用于"跑到百分之几"这类无步骤语义的场景。
  *
@@ -53,7 +80,43 @@ export declare const Steps: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<ControlSize>;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+     *
+     * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+     * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+     *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+     * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+     * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+     *
+     * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+     */
+    clickable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+     *
+     * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+     * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+     * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+     *
+     * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+     * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+     */
+    canJump: {
+        type: PropType<(index: number, current: number) => boolean>;
+        default: undefined;
+    };
+    /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+    onChange: {
+        type: PropType<(index: number, prevIndex: number) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:current': (index: number) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** 步骤表（标题 + 可选节点图标） */
     steps: {
         type: PropType<StepsItem[]>;
@@ -73,15 +136,55 @@ export declare const Steps: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<ControlSize>;
         default: string;
     };
-}>> & Readonly<{}>, {
+    /**
+     * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+     *
+     * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+     * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+     *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+     * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+     * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+     *
+     * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+     */
+    clickable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+     *
+     * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+     * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+     * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+     *
+     * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+     * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+     */
+    canJump: {
+        type: PropType<(index: number, current: number) => boolean>;
+        default: undefined;
+    };
+    /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+    onChange: {
+        type: PropType<(index: number, prevIndex: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:current"?: ((index: number) => any) | undefined;
+}>, {
     size: ControlSize;
+    onChange: (index: number, prevIndex: number) => void;
     variant: StepsVariant;
     current: number;
     steps: StepsItem[];
+    clickable: boolean;
+    canJump: (index: number, current: number) => boolean;
 }, SlotsType<{
     title?: (context: {
         item: StepsItem;
         index: number;
+        disabled: boolean;
     }) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const StepsCompound: {
@@ -105,15 +208,57 @@ export declare const StepsCompound: {
             type: PropType<ControlSize>;
             default: string;
         };
-    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        /**
+         * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+         *
+         * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+         * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+         *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+         * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+         * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+         *
+         * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+         */
+        clickable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /**
+         * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+         *
+         * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+         * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+         * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+         *
+         * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+         * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+         */
+        canJump: {
+            type: PropType<(index: number, current: number) => boolean>;
+            default: undefined;
+        };
+        /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+        onChange: {
+            type: PropType<(index: number, prevIndex: number) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        "onUpdate:current"?: ((index: number) => any) | undefined;
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        'update:current': (index: number) => true;
+    }, import("vue").PublicProps, {
         size: ControlSize;
+        onChange: (index: number, prevIndex: number) => void;
         variant: StepsVariant;
         current: number;
         steps: StepsItem[];
+        clickable: boolean;
+        canJump: (index: number, current: number) => boolean;
     }, true, {}, SlotsType<{
         title?: (context: {
             item: StepsItem;
             index: number;
+            disabled: boolean;
         }) => VNodeChild;
     }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -142,11 +287,50 @@ export declare const StepsCompound: {
             type: PropType<ControlSize>;
             default: string;
         };
-    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        /**
+         * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+         *
+         * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+         * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+         *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+         * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+         * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+         *
+         * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+         */
+        clickable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /**
+         * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+         *
+         * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+         * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+         * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+         *
+         * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+         * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+         */
+        canJump: {
+            type: PropType<(index: number, current: number) => boolean>;
+            default: undefined;
+        };
+        /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+        onChange: {
+            type: PropType<(index: number, prevIndex: number) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        "onUpdate:current"?: ((index: number) => any) | undefined;
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         size: ControlSize;
+        onChange: (index: number, prevIndex: number) => void;
         variant: StepsVariant;
         current: number;
         steps: StepsItem[];
+        clickable: boolean;
+        canJump: (index: number, current: number) => boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -171,15 +355,57 @@ export declare const StepsCompound: {
         type: PropType<ControlSize>;
         default: string;
     };
-}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    /**
+     * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+     *
+     * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+     * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+     *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+     * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+     * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+     *
+     * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+     */
+    clickable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+     *
+     * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+     * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+     * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+     *
+     * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+     * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+     */
+    canJump: {
+        type: PropType<(index: number, current: number) => boolean>;
+        default: undefined;
+    };
+    /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+    onChange: {
+        type: PropType<(index: number, prevIndex: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:current"?: ((index: number) => any) | undefined;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:current': (index: number) => true;
+}, string, {
     size: ControlSize;
+    onChange: (index: number, prevIndex: number) => void;
     variant: StepsVariant;
     current: number;
     steps: StepsItem[];
+    clickable: boolean;
+    canJump: (index: number, current: number) => boolean;
 }, {}, string, SlotsType<{
     title?: (context: {
         item: StepsItem;
         index: number;
+        disabled: boolean;
     }) => VNodeChild;
 }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     Progress: import("vue").DefineComponent<import("vue").ExtractPropTypes<{