@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/steps/Steps.svelte.d.ts

@@ -1,32 +1,24 @@
-import type { Snippet } from 'svelte';
-import type { StepItem } from './types.js';
-type StepDirection = 'horizontal' | 'vertical';
-type StepType = 'fill' | 'nav' | 'basic';
-type StepStatus = 'process' | 'finish' | 'error' | 'warning';
-type StepSize = 'small' | 'default' | 'large';
-type DerivedStatus = 'wait' | 'process' | 'finish' | 'error' | 'warning';
+import { type Snippet } from 'svelte';
+import { type StepsType, type StepsSize, type StepsDirection } from './context.js';
+import type { StepStatus } from './types.js';
 interface Props {
     current?: number;
     defaultCurrent?: number;
-    steps?: StepItem[];
-    direction?: StepDirection;
-    type?: StepType;
+    direction?: StepsDirection;
+    type?: StepsType;
     status?: StepStatus;
-    size?: StepSize;
+    size?: StepsSize;
     initial?: number;
-    clickable?: boolean;
-    /** 点状步骤：图标渲染为小圆点，不显数字/✓ */
-    dot?: boolean;
-    /** 自定义图标渲染器，提供时替代默认序号/✓/✕（dot 模式不渲染图标） */
-    icon?: Snippet<[{
-        step: StepItem;
-        index: number;
-        status: DerivedStatus;
-    }]>;
+    /** basic 型是否显示连接线（对齐 Semi hasLine，默认 true）。 */
+    hasLine?: boolean;
     onChange?: (current: number) => void;
-    onClick?: (e: MouseEvent) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
     class?: string;
+    /** 容器内联样式（对齐 Semi Steps 的 style，字符串形式）。 */
+    style?: string;
+    /** 容器 aria-label（对齐 Semi Steps 的 aria-label）。 */
+    ariaLabel?: string;
+    /** 内嵌 <Steps.Step> 列表。 */
+    children?: Snippet;
 }
 declare const Steps: import("svelte").Component<Props, {}, "">;
 type Steps = ReturnType<typeof Steps>;

package/dist/steps/Steps.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.svelte.d.ts","sourceRoot":"","sources":["../../src/steps/Steps.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGzC,KAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/C,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AACzC,KAAK,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC7D,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEzE,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0MH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Steps.svelte.d.ts","sourceRoot":"","sources":["../../src/steps/Steps.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACpG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG3C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6JH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/steps/context.d.ts

@@ -0,0 +1,41 @@
+import type { StepStatus } from './types.js';
+export type StepsType = 'fill' | 'basic' | 'nav';
+export type StepsSize = 'small' | 'default';
+export type StepsDirection = 'horizontal' | 'vertical';
+/**
+ * Steps 父组件通过 context 向声明式 <Steps.Step> 子项下发的共享状态与登记接口。
+ * 全部以 getter 暴露以保持响应性（对齐本库 Timeline/Tabs context 范式）。
+ */
+export interface StepsContext {
+    getType: () => StepsType;
+    getSize: () => StepsSize;
+    getDirection: () => StepsDirection;
+    /** 当前步（受控 current 或非受控 inner，绝对值，未加 initial）。 */
+    getCurrent: () => number;
+    getInitial: () => number;
+    /** Steps 顶层 status（仅作用于 current 所在步）。 */
+    getStatus: () => StepStatus;
+    /** 是否可点击（fill/basic 且传入 onChange）。 */
+    getClickable: () => boolean;
+    /** 顶层 onChange（参数为 initial + index）；无则不可交互。 */
+    getOnChange: () => ((current: number) => void) | undefined;
+    /**
+     * 声明式子项挂载登记：返回本项在兄弟中的顺序索引 getter、总数 getter 与注销。
+     * 索引用于按 current 推断 finish/process/wait 状态、序号显示与 last 判定。
+     */
+    registerStep: () => {
+        getIndex: () => number;
+        getTotal: () => number;
+        unregister: () => void;
+    };
+    /** roving tabindex：当前拥有 Tab 停靠点的步索引（-1 = 回退到 current/首步）。 */
+    getFocusedIndex: () => number;
+    setFocusedIndex: (index: number) => void;
+    /** 命令式聚焦某步（方向键漫游用）。 */
+    focusStep: (index: number) => void;
+    /** 视觉隐藏状态文本（WCAG 1.4.1），供子项朗读「步骤 N，共 M 步，<状态>」。 */
+    srLabel: (index: number, total: number, status: StepStatus) => string;
+}
+export declare function setStepsContext(ctx: StepsContext): void;
+export declare function getStepsContext(): StepsContext | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/steps/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/steps/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC5C,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,SAAS,CAAC;IACzB,OAAO,EAAE,MAAM,SAAS,CAAC;IACzB,YAAY,EAAE,MAAM,cAAc,CAAC;IACnC,iDAAiD;IACjD,UAAU,EAAE,MAAM,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,MAAM,CAAC;IACzB,yCAAyC;IACzC,SAAS,EAAE,MAAM,UAAU,CAAC;IAC5B,sCAAsC;IACtC,YAAY,EAAE,MAAM,OAAO,CAAC;IAC5B,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,YAAY,EAAE,MAAM;QAClB,QAAQ,EAAE,MAAM,MAAM,CAAC;QACvB,QAAQ,EAAE,MAAM,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,6DAA6D;IAC7D,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,uBAAuB;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,KAAK,MAAM,CAAC;CACvE;AAID,wBAAgB,eAAe,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CAEvD;AAED,wBAAgB,eAAe,IAAI,YAAY,GAAG,SAAS,CAE1D"}

package/dist/steps/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('cd-steps');
+export function setStepsContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getStepsContext() {
+    return getContext(KEY);
+}

package/dist/steps/index.d.ts

@@ -1,4 +1,10 @@
-export { default as Steps } from './Steps.svelte';
+import Steps_ from './Steps.svelte';
+import Step from './Step.svelte';
+export declare const Steps: typeof Steps_ & {
+    Step: typeof Step;
+};
+export { Step };
 export { meta as stepsMeta } from './meta.js';
-export type { StepItem } from './types.js';
+export type { StepProps, StepStatus } from './types.js';
+export { getStepsContext, setStepsContext, type StepsContext, type StepsType, type StepsSize, type StepsDirection, } from './context.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,IAAI,MAAM,eAAe,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,OAAO,MAAM,GAAG;IAClC,IAAI,EAAE,OAAO,IAAI,CAAC;CACe,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EACL,eAAe,EACf,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,cAAc,GACpB,MAAM,cAAc,CAAC"}

package/dist/steps/index.js

@@ -1,2 +1,6 @@
-export { default as Steps } from './Steps.svelte';
+import Steps_ from './Steps.svelte';
+import Step from './Step.svelte';
+export const Steps = Object.assign(Steps_, { Step });
+export { Step };
 export { meta as stepsMeta } from './meta.js';
+export { getStepsContext, setStepsContext, } from './context.js';

package/dist/steps/meta.d.ts

@@ -5,85 +5,80 @@
 export declare const meta: {
     readonly name: "Steps";
     readonly category: "navigation";
-    readonly description: "步骤条，引导用户按流程完成任务。支持横向/纵向、fill/nav/basic 类型、自定义图标、可点击与状态展示。";
+    readonly description: "步骤条，引导用户按流程完成任务。组合式 API（<Steps><Steps.Step/></Steps>），严格对齐 Semi Design：支持横向/纵向、fill/basic/nav 三型、迷你尺寸、每步独立图标/状态、连接线开关（hasLine）与 onChange 切换。";
     readonly props: readonly [{
         readonly name: "current";
         readonly type: "number";
         readonly default: "undefined";
-        readonly desc: "受控当前步";
+        readonly desc: "受控当前步（从 0 计数）";
     }, {
         readonly name: "defaultCurrent";
         readonly type: "number";
         readonly default: "0";
-    }, {
-        readonly name: "steps";
-        readonly type: "StepItem[]";
-        readonly default: "[]";
-        readonly desc: "步骤数据";
+        readonly desc: "非受控初始当前步";
     }, {
         readonly name: "direction";
         readonly type: "'horizontal'|'vertical'";
         readonly default: "horizontal";
+        readonly desc: "步骤条方向";
     }, {
         readonly name: "type";
-        readonly type: "'fill'|'nav'|'basic'";
+        readonly type: "'fill'|'basic'|'nav'";
         readonly default: "fill";
-        readonly desc: "basic 为线框/描边型";
+        readonly desc: "fill 为块状（旧版默认）、basic 为简洁型、nav 为导航型（不可交互）";
     }, {
         readonly name: "status";
-        readonly type: "'process'|'finish'|'error'|'warning'";
+        readonly type: "'wait'|'process'|'finish'|'error'|'warning'";
         readonly default: "process";
         readonly desc: "当前步状态";
     }, {
         readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
+        readonly type: "'small'|'default'";
         readonly default: "default";
+        readonly desc: "尺寸（basic/nav 型生效）";
     }, {
         readonly name: "initial";
         readonly type: "number";
         readonly default: "0";
         readonly desc: "起始序号偏移";
     }, {
-        readonly name: "clickable";
-        readonly type: "boolean";
-        readonly default: "type==='nav'";
-    }, {
-        readonly name: "dot";
+        readonly name: "hasLine";
         readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "点状步骤，图标渲染为小圆点";
-    }, {
-        readonly name: "icon";
-        readonly type: "Snippet<[{ step: StepItem; index: number; status: DerivedStatus }]>";
-        readonly default: "undefined";
-        readonly desc: "自定义图标渲染器，提供时替代默认序号/✓/✕";
+        readonly default: "true";
+        readonly desc: "basic 型是否显示连接线（对齐 Semi hasLine）";
     }, {
         readonly name: "onChange";
         readonly type: "(current: number) => void";
         readonly default: "undefined";
+        readonly desc: "切换步骤回调（参数为 initial + index）；传入时 fill/basic 型步骤可点击";
     }, {
-        readonly name: "onClick";
-        readonly type: "(e: MouseEvent) => void";
-        readonly default: "undefined";
-        readonly desc: "步骤 button 点击事件（仅 clickable 模式下渲染 button 时触发）";
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
     }, {
-        readonly name: "onKeyDown";
-        readonly type: "(e: KeyboardEvent) => void";
+        readonly name: "style";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "步骤 button 键盘按下事件（仅 clickable 模式下渲染 button 时触发）";
+        readonly desc: "容器内联样式（对齐 Semi style）";
     }, {
-        readonly name: "class";
+        readonly name: "ariaLabel";
         readonly type: "string";
-        readonly default: "''";
+        readonly default: "undefined";
+        readonly desc: "容器 aria-label（对齐 Semi aria-label）";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "内嵌 <Steps.Step> 列表";
     }];
-    readonly stepItemProps: readonly [{
+    readonly stepProps: readonly [{
         readonly name: "title";
-        readonly type: "string";
+        readonly type: "string | Snippet";
         readonly default: "undefined";
         readonly desc: "步骤标题";
     }, {
         readonly name: "description";
-        readonly type: "string";
+        readonly type: "string | Snippet";
         readonly default: "undefined";
         readonly desc: "步骤描述（次要信息）";
     }, {
@@ -92,16 +87,46 @@ export declare const meta: {
         readonly default: "undefined";
         readonly desc: "显式覆盖该步状态；不传时由 current 推断";
     }, {
-        readonly name: "disabled";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "禁用该步：不可点击、不可聚焦、置灰";
+        readonly name: "icon";
+        readonly type: "string | Snippet";
+        readonly default: "undefined";
+        readonly desc: "该步自定义图标（字符串或 Snippet），替代默认序号/✓/✕/⚠（对齐 Semi Steps.Step.icon）";
+    }, {
+        readonly name: "ariaLabel";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "该步 aria-label（对齐 Semi Steps.Step.aria-label）";
+    }, {
+        readonly name: "role";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "该步 role（对齐 Semi Steps.Step.role）";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "该步根节点类名（对齐 Semi Steps.Step.className）";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "该步根节点内联样式（对齐 Semi Steps.Step.style）";
+    }, {
+        readonly name: "onClick";
+        readonly type: "(e: MouseEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "该步点击回调（对齐 Semi Steps.Step.onClick）";
+    }, {
+        readonly name: "onKeyDown";
+        readonly type: "(e: KeyboardEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "该步键盘按下回调（对齐 Semi Steps.Step.onKeyDown）";
     }];
     readonly a11y: {
         readonly role: "list";
-        readonly keyboard: readonly ["Tab", "Enter", "Space"];
-        readonly notes: readonly ["ol/li 结构", "clickable 时每步为原生 button，当前步 aria-current=step", "图标对勾/✕ 用 aria-hidden，状态靠文本与 aria-current 表达", "连接线 aria-hidden=true"];
+        readonly keyboard: readonly ["Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Enter", "Space"];
+        readonly notes: readonly ["ol/li 结构", "可点击（fill/basic + onChange）时每步为原生 button，roving tabindex 单 Tab 停靠点", "当前步 aria-current=step", "图标 ✓/✕/⚠ 用 aria-hidden；状态靠视觉隐藏文本（.cd-sr-only）与 aria-current 表达（WCAG 1.4.1）", "连接线 aria-hidden=true；nav 型外包 nav[aria-label]"];
     };
-    readonly tokens: readonly ["--cd-steps-*", "--cd-focus-ring", "--cd-border-radius-full", "--cd-spacing-*", "--cd-font-size-small"];
+    readonly tokens: readonly ["--cd-color-steps-bg-active", "--cd-color-steps-bg-default", "--cd-color-steps-bg-hover", "--cd-color-steps-border-default", "--cd-color-steps-danger-text-active", "--cd-color-steps-danger-text-default", "--cd-color-steps-danger-text-hover", "--cd-color-steps-icon-after-bg", "--cd-color-steps-icon-default", "--cd-color-steps-item-description-text-hover", "--cd-color-steps-item-done-after-bg", "--cd-color-steps-item-done-icon-after-bg", "--cd-color-steps-item-error-left-icon", "--cd-color-steps-item-error-left-number-icon", "--cd-color-steps-item-finish-icon", "--cd-color-steps-item-finish-number-icon", "--cd-color-steps-item-left-number-icon-bg", "--cd-color-steps-item-left-number-icon-icon", "--cd-color-steps-item-process-left-icon", "--cd-color-steps-item-process-left-number-icon", "--cd-color-steps-item-title-text-hover", "--cd-color-steps-item-wait-left-icon-icon", "--cd-color-steps-item-wait-left-number-icon-bg", "--cd-color-steps-item-wait-left-number-icon-bg-hover", "--cd-color-steps-item-wait-left-number-icon-icon", "--cd-color-steps-item-wait-left-number-icon-icon-hover", "--cd-color-steps-item-wait-title-text", "--cd-color-steps-item-warning-left-icon", "--cd-color-steps-item-warning-left-number-icon", "--cd-color-steps-main-text-default", "--cd-color-steps-minor-text-default", "--cd-color-steps-nav-item-container-text", "--cd-color-steps-nav-item-icon", "--cd-color-steps-nav-item-title-text-active", "--cd-color-steps-primary-bg-default", "--cd-color-steps-primary-icon-default", "--cd-color-steps-process-bg-default", "--cd-color-steps-success-text-active", "--cd-color-steps-success-text-default", "--cd-color-steps-success-text-hover", "--cd-color-steps-text-default", "--cd-color-steps-title-after-bg", "--cd-color-steps-warning-text-active", "--cd-color-steps-warning-text-default", "--cd-color-steps-warning-text-hover", "--cd-width-steps-basic-item-description", "--cd-width-steps-basic-item-description-maxwidth", "--cd-width-steps-basic-item-left-number-icon", "--cd-width-steps-basic-item-title-maxwidth", "--cd-width-steps-basic-small-item-left-number-icon", "--cd-width-steps-basic-vertical-item-description", "--cd-width-steps-basic-vertical-item-title-maxwidth", "--cd-width-steps-item-border", "--cd-width-steps-item-description", "--cd-width-steps-item-left", "--cd-width-steps-item-left-icon", "--cd-width-steps-item-title", "--cd-width-steps-nav-item-icon-minwidth", "--cd-width-steps-nav-item-title-maxwidth", "--cd-width-steps-title-after", "--cd-width-steps-vertical-icon-after", "--cd-height-steps-basic-item", "--cd-height-steps-basic-item-left-icon", "--cd-height-steps-basic-item-left-number-icon", "--cd-height-steps-basic-small-item-left-icon", "--cd-height-steps-basic-vertical-icon-content-minheight", "--cd-height-steps-basic-vertical-small-item-content-minheight", "--cd-height-steps-item", "--cd-height-steps-item-left", "--cd-height-steps-title-after", "--cd-height-steps-vertical-icon-after", "--cd-spacing-steps-basic-item-left-marginright", "--cd-spacing-steps-basic-item-marginright", "--cd-spacing-steps-basic-item-paddingleft", "--cd-spacing-steps-basic-item-title-paddingbottom", "--cd-spacing-steps-basic-item-title-paddingright", "--cd-spacing-steps-basic-vertical-item-content-paddingbottom", "--cd-spacing-steps-basic-vertical-item-icon-paddingbottom", "--cd-spacing-steps-basic-vertical-item-paddingtop", "--cd-spacing-steps-item-content-marginleft", "--cd-spacing-steps-item-marginright", "--cd-spacing-steps-item-paddingx", "--cd-spacing-steps-item-paddingy", "--cd-radius-steps-basic-item-left-number-icon", "--cd-radius-steps-item", "--cd-radius-steps-item-left", "--cd-font-steps-basic-item-left-number-icon-fontweight", "--cd-font-steps-basic-item-title-fontweight", "--cd-font-steps-basic-item-title-lineheight", "--cd-font-steps-item-left-fontweight", "--cd-font-steps-item-left-lineheight", "--cd-font-steps-item-title-fontweight", "--cd-font-steps-nav-item-title-active-fontweight", "--cd-font-steps-nav-item-title-fontweight", "--cd-focus-ring", "--cd-border-radius-small", "--cd-spacing-base", "--cd-font-size-small"];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/steps/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/steps/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/steps/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsMP,CAAC"}

package/dist/steps/meta.js

@@ -5,54 +5,198 @@
 export const meta = {
     name: 'Steps',
     category: 'navigation',
-    description: '步骤条，引导用户按流程完成任务。支持横向/纵向、fill/nav/basic 类型、自定义图标、可点击与状态展示。',
+    description: '步骤条，引导用户按流程完成任务。组合式 API（<Steps><Steps.Step/></Steps>），严格对齐 Semi Design：支持横向/纵向、fill/basic/nav 三型、迷你尺寸、每步独立图标/状态、连接线开关（hasLine）与 onChange 切换。',
     props: [
-        { name: 'current', type: 'number', default: 'undefined', desc: '受控当前步' },
-        { name: 'defaultCurrent', type: 'number', default: '0' },
-        { name: 'steps', type: 'StepItem[]', default: '[]', desc: '步骤数据' },
-        { name: 'direction', type: "'horizontal'|'vertical'", default: 'horizontal' },
-        { name: 'type', type: "'fill'|'nav'|'basic'", default: 'fill', desc: 'basic 为线框/描边型' },
+        { name: 'current', type: 'number', default: 'undefined', desc: '受控当前步（从 0 计数）' },
+        { name: 'defaultCurrent', type: 'number', default: '0', desc: '非受控初始当前步' },
+        {
+            name: 'direction',
+            type: "'horizontal'|'vertical'",
+            default: 'horizontal',
+            desc: '步骤条方向',
+        },
+        {
+            name: 'type',
+            type: "'fill'|'basic'|'nav'",
+            default: 'fill',
+            desc: 'fill 为块状（旧版默认）、basic 为简洁型、nav 为导航型（不可交互）',
+        },
         {
             name: 'status',
-            type: "'process'|'finish'|'error'|'warning'",
+            type: "'wait'|'process'|'finish'|'error'|'warning'",
             default: 'process',
             desc: '当前步状态',
         },
-        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
+        { name: 'size', type: "'small'|'default'", default: 'default', desc: '尺寸（basic/nav 型生效）' },
         { name: 'initial', type: 'number', default: '0', desc: '起始序号偏移' },
-        { name: 'clickable', type: 'boolean', default: "type==='nav'" },
-        { name: 'dot', type: 'boolean', default: 'false', desc: '点状步骤，图标渲染为小圆点' },
         {
-            name: 'icon',
-            type: 'Snippet<[{ step: StepItem; index: number; status: DerivedStatus }]>',
+            name: 'hasLine',
+            type: 'boolean',
+            default: 'true',
+            desc: 'basic 型是否显示连接线（对齐 Semi hasLine）',
+        },
+        {
+            name: 'onChange',
+            type: '(current: number) => void',
             default: 'undefined',
-            desc: '自定义图标渲染器，提供时替代默认序号/✓/✕',
+            desc: '切换步骤回调（参数为 initial + index）；传入时 fill/basic 型步骤可点击',
         },
-        { name: 'onChange', type: '(current: number) => void', default: 'undefined' },
-        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '步骤 button 点击事件（仅 clickable 模式下渲染 button 时触发）' },
-        { name: 'onKeyDown', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: '步骤 button 键盘按下事件（仅 clickable 模式下渲染 button 时触发）' },
         { name: 'class', type: 'string', default: "''" },
+        { name: 'style', type: 'string', default: 'undefined', desc: '容器内联样式（对齐 Semi style）' },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '容器 aria-label（对齐 Semi aria-label）' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '内嵌 <Steps.Step> 列表' },
     ],
-    stepItemProps: [
-        { name: 'title', type: 'string', default: 'undefined', desc: '步骤标题' },
-        { name: 'description', type: 'string', default: 'undefined', desc: '步骤描述（次要信息）' },
+    // <Steps.Step> 子组件 props（对齐 Semi Steps.Step）。
+    stepProps: [
+        { name: 'title', type: 'string | Snippet', default: 'undefined', desc: '步骤标题' },
+        { name: 'description', type: 'string | Snippet', default: 'undefined', desc: '步骤描述（次要信息）' },
         {
             name: 'status',
             type: "'wait'|'process'|'finish'|'error'|'warning'",
             default: 'undefined',
             desc: '显式覆盖该步状态；不传时由 current 推断',
         },
-        { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用该步：不可点击、不可聚焦、置灰' },
+        {
+            name: 'icon',
+            type: 'string | Snippet',
+            default: 'undefined',
+            desc: '该步自定义图标（字符串或 Snippet），替代默认序号/✓/✕/⚠（对齐 Semi Steps.Step.icon）',
+        },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '该步 aria-label（对齐 Semi Steps.Step.aria-label）' },
+        { name: 'role', type: 'string', default: 'undefined', desc: '该步 role（对齐 Semi Steps.Step.role）' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '该步根节点类名（对齐 Semi Steps.Step.className）' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '该步根节点内联样式（对齐 Semi Steps.Step.style）' },
+        {
+            name: 'onClick',
+            type: '(e: MouseEvent) => void',
+            default: 'undefined',
+            desc: '该步点击回调（对齐 Semi Steps.Step.onClick）',
+        },
+        {
+            name: 'onKeyDown',
+            type: '(e: KeyboardEvent) => void',
+            default: 'undefined',
+            desc: '该步键盘按下回调（对齐 Semi Steps.Step.onKeyDown）',
+        },
     ],
     a11y: {
         role: 'list',
-        keyboard: ['Tab', 'Enter', 'Space'],
+        keyboard: ['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Space'],
         notes: [
             'ol/li 结构',
-            'clickable 时每步为原生 button，当前步 aria-current=step',
-            '图标对勾/✕ 用 aria-hidden，状态靠文本与 aria-current 表达',
-            '连接线 aria-hidden=true',
+            '可点击（fill/basic + onChange）时每步为原生 button，roving tabindex 单 Tab 停靠点',
+            '当前步 aria-current=step',
+            '图标 ✓/✕/⚠ 用 aria-hidden；状态靠视觉隐藏文本（.cd-sr-only）与 aria-current 表达（WCAG 1.4.1）',
+            '连接线 aria-hidden=true；nav 型外包 nav[aria-label]',
         ],
     },
-    tokens: ['--cd-steps-*', '--cd-focus-ring', '--cd-border-radius-full', '--cd-spacing-*', '--cd-font-size-small'],
+    // Component token 全量对齐 Semi steps/variables.scss（Color/Width/Height/Spacing/Radius/Font
+    // 六族，共 84 个）。组件直接消费这些 --cd-*-steps-*，无中间语义变量。
+    // 见 packages/tokens/src/components/steps.ts。
+    tokens: [
+        // —— Color ——
+        '--cd-color-steps-bg-active',
+        '--cd-color-steps-bg-default',
+        '--cd-color-steps-bg-hover',
+        '--cd-color-steps-border-default',
+        '--cd-color-steps-danger-text-active',
+        '--cd-color-steps-danger-text-default',
+        '--cd-color-steps-danger-text-hover',
+        '--cd-color-steps-icon-after-bg',
+        '--cd-color-steps-icon-default',
+        '--cd-color-steps-item-description-text-hover',
+        '--cd-color-steps-item-done-after-bg',
+        '--cd-color-steps-item-done-icon-after-bg',
+        '--cd-color-steps-item-error-left-icon',
+        '--cd-color-steps-item-error-left-number-icon',
+        '--cd-color-steps-item-finish-icon',
+        '--cd-color-steps-item-finish-number-icon',
+        '--cd-color-steps-item-left-number-icon-bg',
+        '--cd-color-steps-item-left-number-icon-icon',
+        '--cd-color-steps-item-process-left-icon',
+        '--cd-color-steps-item-process-left-number-icon',
+        '--cd-color-steps-item-title-text-hover',
+        '--cd-color-steps-item-wait-left-icon-icon',
+        '--cd-color-steps-item-wait-left-number-icon-bg',
+        '--cd-color-steps-item-wait-left-number-icon-bg-hover',
+        '--cd-color-steps-item-wait-left-number-icon-icon',
+        '--cd-color-steps-item-wait-left-number-icon-icon-hover',
+        '--cd-color-steps-item-wait-title-text',
+        '--cd-color-steps-item-warning-left-icon',
+        '--cd-color-steps-item-warning-left-number-icon',
+        '--cd-color-steps-main-text-default',
+        '--cd-color-steps-minor-text-default',
+        '--cd-color-steps-nav-item-container-text',
+        '--cd-color-steps-nav-item-icon',
+        '--cd-color-steps-nav-item-title-text-active',
+        '--cd-color-steps-primary-bg-default',
+        '--cd-color-steps-primary-icon-default',
+        '--cd-color-steps-process-bg-default',
+        '--cd-color-steps-success-text-active',
+        '--cd-color-steps-success-text-default',
+        '--cd-color-steps-success-text-hover',
+        '--cd-color-steps-text-default',
+        '--cd-color-steps-title-after-bg',
+        '--cd-color-steps-warning-text-active',
+        '--cd-color-steps-warning-text-default',
+        '--cd-color-steps-warning-text-hover',
+        // —— Width / Height ——
+        '--cd-width-steps-basic-item-description',
+        '--cd-width-steps-basic-item-description-maxwidth',
+        '--cd-width-steps-basic-item-left-number-icon',
+        '--cd-width-steps-basic-item-title-maxwidth',
+        '--cd-width-steps-basic-small-item-left-number-icon',
+        '--cd-width-steps-basic-vertical-item-description',
+        '--cd-width-steps-basic-vertical-item-title-maxwidth',
+        '--cd-width-steps-item-border',
+        '--cd-width-steps-item-description',
+        '--cd-width-steps-item-left',
+        '--cd-width-steps-item-left-icon',
+        '--cd-width-steps-item-title',
+        '--cd-width-steps-nav-item-icon-minwidth',
+        '--cd-width-steps-nav-item-title-maxwidth',
+        '--cd-width-steps-title-after',
+        '--cd-width-steps-vertical-icon-after',
+        '--cd-height-steps-basic-item',
+        '--cd-height-steps-basic-item-left-icon',
+        '--cd-height-steps-basic-item-left-number-icon',
+        '--cd-height-steps-basic-small-item-left-icon',
+        '--cd-height-steps-basic-vertical-icon-content-minheight',
+        '--cd-height-steps-basic-vertical-small-item-content-minheight',
+        '--cd-height-steps-item',
+        '--cd-height-steps-item-left',
+        '--cd-height-steps-title-after',
+        '--cd-height-steps-vertical-icon-after',
+        // —— Spacing ——
+        '--cd-spacing-steps-basic-item-left-marginright',
+        '--cd-spacing-steps-basic-item-marginright',
+        '--cd-spacing-steps-basic-item-paddingleft',
+        '--cd-spacing-steps-basic-item-title-paddingbottom',
+        '--cd-spacing-steps-basic-item-title-paddingright',
+        '--cd-spacing-steps-basic-vertical-item-content-paddingbottom',
+        '--cd-spacing-steps-basic-vertical-item-icon-paddingbottom',
+        '--cd-spacing-steps-basic-vertical-item-paddingtop',
+        '--cd-spacing-steps-item-content-marginleft',
+        '--cd-spacing-steps-item-marginright',
+        '--cd-spacing-steps-item-paddingx',
+        '--cd-spacing-steps-item-paddingy',
+        // —— Radius ——
+        '--cd-radius-steps-basic-item-left-number-icon',
+        '--cd-radius-steps-item',
+        '--cd-radius-steps-item-left',
+        // —— Font ——
+        '--cd-font-steps-basic-item-left-number-icon-fontweight',
+        '--cd-font-steps-basic-item-title-fontweight',
+        '--cd-font-steps-basic-item-title-lineheight',
+        '--cd-font-steps-item-left-fontweight',
+        '--cd-font-steps-item-left-lineheight',
+        '--cd-font-steps-item-title-fontweight',
+        '--cd-font-steps-nav-item-title-active-fontweight',
+        '--cd-font-steps-nav-item-title-fontweight',
+        // —— 全局/别名（结构性消费）——
+        '--cd-focus-ring',
+        '--cd-border-radius-small',
+        '--cd-spacing-base',
+        '--cd-font-size-small',
+    ],
 };

package/dist/steps/types.d.ts

@@ -1,9 +1,32 @@
-export interface StepItem {
-    title: string;
-    description?: string;
-    /** 显式覆盖该步状态；不传时由 current 推断 */
-    status?: 'wait' | 'process' | 'finish' | 'error' | 'warning';
-    /** 禁用该步：不可点击、不可聚焦、置灰 */
-    disabled?: boolean;
+import type { Snippet } from 'svelte';
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'warning';
+/**
+ * <Steps.Step> 子项 props，对齐 Semi Steps.Step（step.tsx）。
+ * title/description/icon 支持 string 或 Snippet（对齐 Semi ReactNode）。
+ */
+export interface StepProps {
+    /** 标题（对齐 Semi title）。 */
+    title?: string | Snippet;
+    /** 步骤描述，可选（对齐 Semi description）。 */
+    description?: string | Snippet;
+    /**
+     * 自定义该步图标：字符串（emoji/文本）或 Snippet。提供时替代默认序号/✓/✕/⚠。
+     * 对齐 Semi Steps.Step 的 icon（每步独立）。
+     */
+    icon?: string | Snippet;
+    /** 显式覆盖该步状态；不传时由 Steps 的 current 推断（对齐 Semi status）。 */
+    status?: StepStatus;
+    /** 该步根节点类名（对齐 Semi Steps.Step 的 className）。 */
+    class?: string;
+    /** 该步根节点内联样式（对齐 Semi Steps.Step 的 style，字符串形式）。 */
+    style?: string;
+    /** 该步 role（对齐 Semi Steps.Step 的 role）。 */
+    role?: string;
+    /** 该步 aria-label（对齐 Semi Steps.Step 的 aria-label）。 */
+    ariaLabel?: string;
+    /** 该步点击回调（对齐 Semi Steps.Step 的 onClick）。 */
+    onClick?: (e: MouseEvent) => void;
+    /** 该步键盘按下回调（对齐 Semi Steps.Step 的 onKeyDown）。 */
+    onKeyDown?: (e: KeyboardEvent) => void;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/steps/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC7D,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,gDAAgD;IAChD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC"}