iter(g165): 步骤条支持竖向排列

packages/skin/ui/src/stepper.ts

@@ -1,7 +1,7 @@
 import { effect, h } from '@ui-arch/frame';
 import type { StepperProps } from './types.js';
 
-/*** 步骤条：done/current/upcoming 三态横向流程指示，clickable 时已完成步骤可点回跳并写回 active 信号 ***/
+/*** 步骤条：done/current/upcoming 三态流程指示（横向 / 竖向），clickable 时已完成步骤可点回跳并写回 active 信号 ***/
 export function stepper(props: StepperProps): HTMLElement {
   const active = props.active;
   const clickStep = (i: number): void => { if (!props.clickable || i >= active()) return; // 卫语句：不可点或未完成不回跳
@@ -20,7 +20,8 @@ export function stepper(props: StepperProps): HTMLElement {
       const li = h('li', { class: `ua-step ua-step-${state}`, 'aria-current': state === 'current' ? 'step' : null }, head, body);
       return li;
     });
-    return h('ol', { class: 'ua-stepper' }, ...items);
+    const cls = props.direction === 'vertical' ? 'ua-stepper is-vertical' : 'ua-stepper'; // 方向只影响布局类，渲染逻辑共用
+    return h('ol', { class: cls }, ...items);
   };
   let el!: HTMLElement; // 当前渲染产物（effect 首跑赋值）
   effect(() => { const next = render(); if (el) el.replaceWith(next); el = next; }); // active 变化整条重渲染（条目少，开销可忽略）