@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/spin/meta.ts

@@ -1,72 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Spin — see specs/components/feedback/Spin.spec.md
- */
-export const meta = {
-  name: 'Spin',
-  category: 'feedback',
-  description:
-    '加载指示器：inline / wrapper / fullscreen 三形态；delay 去抖 + minShowTime 最短显示（复用 @chenzy-design/core createSpinController）；role=status + aria-live=polite 公布加载，wrapper 内容 aria-busy；reduced-motion 下旋转退化为呼吸。spinning 受控不回写，显隐变化仅触发 onShow/onHide。',
-  exports: ['Spin'],
-  props: [
-    { name: 'spinning', type: 'boolean', default: 'true', desc: '是否加载态；受控不回写' },
-    { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
-    { name: 'tip', type: 'string', default: "''", desc: '指示器下方文案，空则不渲染' },
-    { name: 'delay', type: 'number', default: '0', desc: '延迟显示 ms（去抖）' },
-    { name: 'minShowTime', type: 'number', default: '0', desc: '最短显示 ms' },
-    { name: 'fullscreen', type: 'boolean', default: 'false', desc: '全屏固定覆盖' },
-    { name: 'wrapperClassName', type: 'string', default: "''", desc: 'wrapper 外层自定义类' },
-    { name: 'ariaLabel', type: 'string', default: "'加载中'", desc: '无 tip 时的可访问名' },
-    {
-      name: 'indicator',
-      type: 'Snippet<[{ size }]>',
-      default: 'undefined',
-      desc: '自定义指示器',
-    },
-    {
-      name: 'children',
-      type: 'Snippet',
-      default: 'undefined',
-      desc: '提供则进入 wrapper 模式包裹内容',
-    },
-    { name: 'onShow', type: '() => void', default: 'undefined', desc: 'effective false→true' },
-    { name: 'onHide', type: '() => void', default: 'undefined', desc: 'effective true→false' },
-  ],
-  events: [
-    { name: 'onShow', desc: '有效显示态由 false 变 true（delay 后真正显示时触发）' },
-    { name: 'onHide', desc: '有效显示态由 true 变 false（满足 minShowTime 后隐藏时触发）' },
-  ],
-  slots: [
-    { name: 'children', desc: 'wrapper 模式下被遮罩包裹的内容' },
-    { name: 'indicator', desc: '自定义指示器（接收 { size }）' },
-  ],
-  a11y: {
-    hasRole: true,
-    focusable: false,
-    note: 'role=status + aria-live=polite（隐式 aria-atomic）公布加载；无 tip 时 aria-label，有 tip 时 tip 文本即可访问名；wrapper 内容 effectiveSpinning 时 aria-busy=true 并 inert 阻断交互；内置 SVG aria-hidden；不捕获焦点；reduced-motion 旋转退化为 opacity 呼吸。',
-  },
-  tokens: [
-    '--cd-spin-color',
-    '--cd-spin-track-color',
-    '--cd-spin-size-small',
-    '--cd-spin-size-default',
-    '--cd-spin-size-large',
-    '--cd-spin-duration',
-    '--cd-spin-duration-reduced',
-    '--cd-spin-tip-gap',
-    '--cd-spin-tip-color',
-    '--cd-spin-mask-bg',
-    '--cd-spin-z',
-    '--cd-spin-z-fullscreen',
-    '--cd-spin-fade-duration',
-  ],
-  responsive: false,
-  examples: [
-    { title: 'inline', code: '<Spin spinning />' },
-    {
-      title: 'wrapper 包裹卡片',
-      code: '<Spin spinning={loading}>\n  <Card>内容</Card>\n</Spin>',
-    },
-    { title: '带 tip', code: '<Spin spinning tip="加载中…" />' },
-  ],
-} as const;

package/src/steps/Steps.a11y.test.ts

@@ -1,39 +0,0 @@
-// Steps a11y：<ol> 步骤列表；当前步 aria-current=step；nav 型外包 nav[aria-label]。
-//  - 视觉隐藏的状态文本（.cd-sr-only）令颜色非唯一信息载体（WCAG 1.4.1）。
-// jsdom 只断言静态 ARIA + axe（roving 键盘留给真实浏览器）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Steps from './Steps.svelte';
-import type { StepItem } from './types.js';
-
-const steps: StepItem[] = [
-  { title: 'Start' },
-  { title: 'Verify' },
-  { title: 'Done' },
-];
-
-describe('Steps a11y', () => {
-  it('默认渲染：ol 列表 + 当前步 aria-current=step，无 axe violations', async () => {
-    const { container } = renderWithLocale(Steps, {
-      props: { steps, current: 1 },
-    });
-    expect(container.querySelector('ol.cd-steps')).not.toBeNull();
-    expect(container.querySelectorAll('li.cd-steps__item')).toHaveLength(3);
-    const current = container.querySelector('[aria-current="step"]');
-    expect(current).not.toBeNull();
-    // 每步含视觉隐藏状态文本（颜色非唯一信息载体）。
-    expect(container.querySelectorAll('.cd-sr-only').length).toBeGreaterThan(0);
-    await expectNoAxeViolations(container);
-  });
-
-  it('nav 型：外包 nav[aria-label]，步骤为可点 button，无 axe violations', async () => {
-    const { container } = renderWithLocale(Steps, {
-      props: { steps, type: 'nav', current: 0 },
-    });
-    const nav = container.querySelector('nav');
-    expect(nav).not.toBeNull();
-    expect(nav?.getAttribute('aria-label')).toBeTruthy();
-    expect(container.querySelectorAll('button.cd-steps__head')).toHaveLength(3);
-    await expectNoAxeViolations(container);
-  });
-});

package/src/steps/Steps.kbd.test.ts

@@ -1,73 +0,0 @@
-// Steps 键盘 e2e（browser project / 真实 chromium）。
-// type="nav"（→ clickable）启用 roving，可点击步骤组为单一 Tab 停靠点。
-// 测真实焦点移动——jsdom 测不了（命令式 focus() 不可靠）：
-//   1. roving 单停靠点：Tab 进入只停在一个 step button（其余 tabindex=-1）。
-//   2. ↑↓/←→ 真实移动焦点到相邻步骤（无 wrap：clamp 在两端，源码 nextRovingIndex(...,false)）。
-//   3. Home/End 跳首/末步。
-//
-// 真实焦点断言用 page locator 的 .toHaveFocus()。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import StepsKbdFixture from './StepsKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Steps 键盘 e2e（nav/clickable roving，真实焦点）', () => {
-  it('Tab 单停靠点 + 方向键移动焦点（clamp）+ Home/End 跳首末', async () => {
-    const { baseElement } = renderKbdFixture(StepsKbdFixture);
-
-    const buttons = Array.from(
-      baseElement.querySelectorAll<HTMLElement>('button[data-step-index]'),
-    );
-    expect(buttons.length).toBe(3);
-    const [first, second, third] = buttons as [HTMLElement, HTMLElement, HTMLElement];
-
-    // 1. roving 单停靠点：恰一个 tabindex=0（默认收敛到 activeIndex=0 首步）。
-    expect(buttons.filter((el) => el.tabIndex === 0).length).toBe(1);
-    expect(first.tabIndex).toBe(0);
-
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(first)).toHaveFocus();
-
-    // 2. → / ↓ 移动焦点到下一步（真实焦点 + 停靠点同步）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(second)).toHaveFocus();
-    expect(second.tabIndex).toBe(0);
-    expect(first.tabIndex).toBe(-1);
-
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(third)).toHaveFocus();
-
-    // 无 wrap：末步再 → 停在末步（clamp）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(third)).toHaveFocus();
-
-    // ← / ↑ 回退。
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(second)).toHaveFocus();
-
-    // 首步再 ← 停在首步（clamp）。
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(first)).toHaveFocus();
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(first)).toHaveFocus();
-
-    // 3. Home/End 跳首/末。
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(third)).toHaveFocus();
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(first)).toHaveFocus();
-
-    // Tab 离开步骤组 → after 按钮（单停靠点，不困在组内）。
-    const after = baseElement.querySelector('[data-testid="after"]') as HTMLElement;
-    await userEvent.keyboard('{End}');
-    await userEvent.tab();
-    await expect.element(loc(after)).toHaveFocus();
-  });
-});

package/src/steps/Steps.svelte

@@ -1,392 +0,0 @@
-<!--
-  Steps — see specs/components/navigation/Steps.spec.md
-  Base subset: horizontal/vertical, fill/nav/basic types, clickable, status, dot mode.
-  dot：图标渲染为小圆点（不显数字/✓），process 态高亮放大。
-  basic：线框/简洁型——节点圆圈描边而非实心填充，process 态高亮描边。
-  icon：自定义图标 snippet，提供时替代默认序号/✓/✕。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { nextRovingIndex, rovingKeyFromEvent, type RovingKey } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-  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';
-
-  interface Props {
-    current?: number;
-    defaultCurrent?: number;
-    steps?: StepItem[];
-    direction?: StepDirection;
-    type?: StepType;
-    status?: StepStatus;
-    size?: StepSize;
-    initial?: number;
-    clickable?: boolean;
-    /** 点状步骤：图标渲染为小圆点，不显数字/✓ */
-    dot?: boolean;
-    /** 自定义图标渲染器，提供时替代默认序号/✓/✕（dot 模式不渲染图标） */
-    icon?: Snippet<[{ step: StepItem; index: number; status: DerivedStatus }]>;
-    onChange?: (current: number) => void;
-    onClick?: (e: MouseEvent) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
-    class?: string;
-  }
-
-  let {
-    current,
-    defaultCurrent = 0,
-    steps = [],
-    direction = 'horizontal',
-    type = 'fill',
-    status = 'process',
-    size = 'default',
-    initial = 0,
-    clickable,
-    dot = false,
-    icon,
-    onChange,
-    onClick,
-    onKeyDown,
-    class: className = '',
-  }: Props = $props();
-
-  // Controlled / uncontrolled (red line #1): never write back the prop.
-  const isControlled = $derived(current !== undefined);
-  let inner = $state(getInitialCurrent());
-  const activeIndex = $derived(isControlled ? (current as number) : inner);
-
-  function getInitialCurrent(): number {
-    return defaultCurrent;
-  }
-
-  const isClickable = $derived(clickable ?? type === 'nav');
-
-  function statusOf(index: number): DerivedStatus {
-    // 显式 step.status 优先于由 current 推断的状态
-    const explicit = steps[index]?.status;
-    if (explicit) return explicit;
-    if (index < activeIndex) return 'finish';
-    if (index === activeIndex) return status;
-    return 'wait';
-  }
-
-  const cls = $derived(
-    [
-      'cd-steps',
-      `cd-steps--${direction}`,
-      `cd-steps--${type}`,
-      `cd-steps--${size}`,
-      dot && 'cd-steps--dot',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  function select(index: number) {
-    if (!isClickable) return;
-    if (steps[index]?.disabled) return; // 禁用步不可激活
-    if (index === activeIndex) return;
-    if (!isControlled) inner = index;
-    onChange?.(index);
-  }
-
-  const loc = useLocale();
-
-  // 视觉隐藏的状态文本（WCAG 1.4.1：颜色非唯一信息载体）。
-  // 组合「步骤 N，共 M 步，<状态>」供屏幕阅读器朗读。
-  function statusText(st: DerivedStatus): string {
-    switch (st) {
-      case 'finish':
-        return loc().t('Steps.statusFinish');
-      case 'process':
-        return loc().t('Steps.statusProcess');
-      case 'error':
-        return loc().t('Steps.statusError');
-      case 'warning':
-        return loc().t('Steps.statusWarning');
-      default:
-        return loc().t('Steps.statusWait');
-    }
-  }
-  function srLabel(index: number, st: DerivedStatus): string {
-    // 分隔符 ofTotal 已带（zh「，共 N 步」/ en「 of N」），状态前再以 locale 分隔符停顿。
-    const sep = loc().t('Steps.statusSeparator');
-    return (
-      loc().t('Steps.stepLabel', { index: index + 1 + initial }) +
-      loc().t('Steps.ofTotal', { total: steps.length }) +
-      sep +
-      statusText(st)
-    );
-  }
-
-  // --- roving tabindex（a11y §6）：可点击步骤组为单一 Tab 停靠点。 ---
-  // rootEl 普通引用（bind:this），命令式 focus() 用，非 render 期读 DOM。
-  let rootEl = $state<HTMLElement | null>(null);
-  // 当前焦点步索引；-1 = 尚无焦点 -> 首个可点击步作为 Tab 停靠点。
-  let focusedIndex = $state(-1);
-
-  // 可点击（且未禁用）的步骤索引序列；roving 在其中漫游，跳过 disabled（红线 #2：纯派生）。
-  const focusableIndices = $derived<number[]>(
-    isClickable
-      ? steps.map((s, i) => (s.disabled ? -1 : i)).filter((i) => i >= 0)
-      : [],
-  );
-
-  // 纯派生 tabindex：当前焦点步（或无焦点时回退到 activeIndex/首个可点击步）为 0，其余 -1。
-  // 不在 render 期写 $state（红线 #2）。
-  function stepTabindex(index: number): 0 | -1 {
-    if (!isClickable || steps[index]?.disabled) return -1;
-    const anchor =
-      focusedIndex >= 0
-        ? focusedIndex
-        : focusableIndices.includes(activeIndex)
-          ? activeIndex
-          : (focusableIndices[0] ?? -1);
-    return index === anchor ? 0 : -1;
-  }
-
-  function focusStep(index: number): void {
-    focusedIndex = index;
-    rootEl
-      ?.querySelector<HTMLElement>(`[data-step-index="${index}"]`)
-      ?.focus();
-  }
-
-  // 步骤 keydown：方向键 roving（纯函数 nextRovingIndex 派生，仅在可点击步间移动）、
-  // Home/End 跳首尾可点击步。Enter/Space 交给原生 <button>（向后兼容）。
-  function onStepKeydown(e: KeyboardEvent, index: number): void {
-    const intent: RovingKey | null = rovingKeyFromEvent(e.key);
-    if (!intent) return;
-    e.preventDefault();
-    const list = focusableIndices;
-    if (list.length === 0) return;
-    const cur = list.indexOf(index);
-    const next = nextRovingIndex(cur, list.length, intent, false);
-    const target = list[next];
-    if (target != null) focusStep(target);
-  }
-</script>
-
-{#snippet head(step: StepItem, index: number, st: DerivedStatus)}
-  <span class="cd-steps__icon" aria-hidden="true">
-    {#if dot}{:else if icon}{@render icon({ step, index, status: st })}{:else if st === 'finish'}✓{:else if st === 'error'}✕{:else}{index + 1 + initial}{/if}
-  </span>
-  <span class="cd-steps__content">
-    <span class="cd-steps__title">{step.title}</span>
-    {#if step.description}
-      <span class="cd-steps__desc">{step.description}</span>
-    {/if}
-  </span>
-  <!-- WCAG 1.4.1：视觉隐藏的「步骤 N，共 M 步，<状态>」供屏幕阅读器朗读，颜色非唯一信息载体。 -->
-  <span class="cd-sr-only">{srLabel(index, st)}</span>
-{/snippet}
-
-{#snippet stepsList()}
-  <ol class={cls} bind:this={rootEl}>
-    {#each steps as step, index (index)}
-      {@const st = statusOf(index)}
-      {@const last = index === steps.length - 1}
-      {@const isDisabled = step.disabled === true}
-      <li class="cd-steps__item cd-steps__item--{st}" class:cd-steps__item--disabled={isDisabled}>
-        {#if isClickable}
-          <button
-            type="button"
-            class="cd-steps__head"
-            data-step-index={index}
-            aria-current={index === activeIndex ? 'step' : undefined}
-            disabled={isDisabled}
-            aria-disabled={isDisabled || undefined}
-            tabindex={stepTabindex(index)}
-            onclick={(e) => { select(index); onClick?.(e); }}
-            onkeydown={(e) => { onStepKeydown(e, index); onKeyDown?.(e); }}
-            onfocus={() => {
-              focusedIndex = index;
-            }}
-          >
-            {@render head(step, index, st)}
-          </button>
-        {:else}
-          <div
-            class="cd-steps__head"
-            aria-current={index === activeIndex ? 'step' : undefined}
-            aria-disabled={isDisabled || undefined}
-          >
-            {@render head(step, index, st)}
-          </div>
-        {/if}
-        {#if !last}
-          <span
-            class="cd-steps__line"
-            class:cd-steps__line--finish={index < activeIndex}
-            aria-hidden="true"
-          ></span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-{/snippet}
-
-{#if type === 'nav'}
-  <nav aria-label={loc().t('Steps.navAriaLabel')}>
-    {@render stepsList()}
-  </nav>
-{:else}
-  {@render stepsList()}
-{/if}
-
-<style>
-  /* 视觉隐藏的状态文本（class="cd-sr-only"）复用 tokens.css 全局工具类，
-     令颜色非唯一信息载体（WCAG 1.4.1）。 */
-  .cd-steps {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .cd-steps--horizontal {
-    flex-direction: row;
-    align-items: flex-start;
-  }
-  .cd-steps--vertical {
-    flex-direction: column;
-  }
-  .cd-steps__item {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-  }
-  .cd-steps--vertical .cd-steps__item {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .cd-steps__head {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    text-align: start;
-  }
-  button.cd-steps__head {
-    cursor: pointer;
-  }
-  /* 禁用步：置灰、不可点击 */
-  .cd-steps__item--disabled .cd-steps__head {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-  button.cd-steps__head:disabled {
-    cursor: not-allowed;
-  }
-  button.cd-steps__head:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-steps__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--cd-steps-icon-size);
-    block-size: var(--cd-steps-icon-size);
-    border-radius: var(--cd-radius-full);
-    background: var(--cd-steps-icon-bg);
-    color: var(--cd-steps-icon-color);
-    flex: 0 0 auto;
-  }
-  .cd-steps__item--process .cd-steps__icon {
-    background: var(--cd-steps-icon-bg-process);
-    color: var(--cd-steps-icon-color-active);
-  }
-  .cd-steps__item--finish .cd-steps__icon {
-    background: var(--cd-steps-icon-bg-finish);
-    color: var(--cd-steps-icon-color-active);
-  }
-  .cd-steps__item--error .cd-steps__icon {
-    background: var(--cd-steps-icon-bg-error);
-    color: var(--cd-steps-icon-color-active);
-  }
-  .cd-steps__content {
-    display: inline-flex;
-    flex-direction: column;
-  }
-  .cd-steps__title {
-    color: var(--cd-steps-title-color);
-  }
-  .cd-steps__desc {
-    color: var(--cd-steps-desc-color);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-steps__line {
-    flex: 1 1 auto;
-    background: var(--cd-steps-line-color);
-  }
-  .cd-steps--horizontal .cd-steps__line {
-    block-size: 1px;
-    min-inline-size: var(--cd-spacing-4);
-  }
-  .cd-steps--vertical .cd-steps__line {
-    inline-size: 1px;
-    min-block-size: var(--cd-spacing-4);
-    margin-inline-start: calc(var(--cd-steps-icon-size) / 2);
-  }
-  .cd-steps__line--finish {
-    background: var(--cd-steps-line-color-finish);
-  }
-
-  /* --- basic 线框型：节点圆圈用描边而非实心填充 --- */
-  .cd-steps--basic .cd-steps__icon {
-    background: transparent;
-    color: var(--cd-steps-basic-color, var(--cd-color-text-2));
-    border: 1px solid var(--cd-steps-basic-border, var(--cd-color-border));
-  }
-  .cd-steps--basic .cd-steps__item--process .cd-steps__icon {
-    background: transparent;
-    color: var(--cd-steps-basic-color-process, var(--cd-color-primary));
-    border-color: var(--cd-steps-basic-border-process, var(--cd-color-primary));
-  }
-  .cd-steps--basic .cd-steps__item--finish .cd-steps__icon {
-    background: transparent;
-    color: var(--cd-steps-basic-color-finish, var(--cd-color-primary));
-    border-color: var(--cd-steps-basic-border-finish, var(--cd-color-primary));
-  }
-  .cd-steps--basic .cd-steps__item--error .cd-steps__icon {
-    background: transparent;
-    color: var(--cd-steps-basic-color-error, var(--cd-color-danger));
-    border-color: var(--cd-steps-basic-border-error, var(--cd-color-danger));
-  }
-
-  /* --- dot 模式：图标缩为小圆点，process 态放大高亮 --- */
-  .cd-steps--dot .cd-steps__icon {
-    inline-size: var(--cd-steps-dot-size, 8px);
-    block-size: var(--cd-steps-dot-size, 8px);
-    background: var(--cd-steps-line-color);
-  }
-  .cd-steps--dot .cd-steps__item--process .cd-steps__icon {
-    inline-size: var(--cd-steps-dot-size-active, 10px);
-    block-size: var(--cd-steps-dot-size-active, 10px);
-    background: var(--cd-steps-icon-bg-process);
-  }
-  .cd-steps--dot .cd-steps__item--finish .cd-steps__icon {
-    background: var(--cd-steps-icon-bg-finish);
-  }
-  .cd-steps--dot .cd-steps__item--error .cd-steps__icon {
-    background: var(--cd-steps-icon-bg-error);
-  }
-  /* dot 模式垂直对齐 line 与圆点中心 */
-  .cd-steps--dot.cd-steps--vertical .cd-steps__line {
-    margin-inline-start: calc(var(--cd-steps-dot-size, 8px) / 2);
-  }
-</style>

package/src/steps/StepsKbdFixture.svelte

@@ -1,21 +0,0 @@
-<!--
-  仅供 Steps.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  type="nav" 启用 clickable，可点击步骤组为单一 Tab 停靠点（roving，真实焦点）。
-  前后各放一个按钮，验证 Tab 从 before 进入只停靠单一步骤、Tab 出去落到 after。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Steps from './Steps.svelte';
-
-  const steps = [
-    { title: 'First' },
-    { title: 'Second' },
-    { title: 'Third' },
-  ];
-</script>
-
-<LocaleProvider locale="en_US">
-  <button type="button" data-testid="before">before</button>
-  <Steps {steps} type="nav" defaultCurrent={0} />
-  <button type="button" data-testid="after">after</button>
-</LocaleProvider>

package/src/steps/index.ts

@@ -1,3 +0,0 @@
-export { default as Steps } from './Steps.svelte';
-export { meta as stepsMeta } from './meta.js';
-export type { StepItem } from './types.js';

package/src/steps/meta.ts

@@ -1,59 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Steps',
-  category: 'navigation',
-  description:
-    '步骤条，引导用户按流程完成任务。支持横向/纵向、fill/nav/basic 类型、自定义图标、可点击与状态展示。',
-  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: 'status',
-      type: "'process'|'finish'|'error'|'warning'",
-      default: 'process',
-      desc: '当前步状态',
-    },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { 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 }]>',
-      default: 'undefined',
-      desc: '自定义图标渲染器，提供时替代默认序号/✓/✕',
-    },
-    { 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: "''" },
-  ],
-  stepItemProps: [
-    { name: 'title', type: 'string', default: 'undefined', desc: '步骤标题' },
-    { name: 'description', type: 'string', default: 'undefined', desc: '步骤描述（次要信息）' },
-    {
-      name: 'status',
-      type: "'wait'|'process'|'finish'|'error'|'warning'",
-      default: 'undefined',
-      desc: '显式覆盖该步状态；不传时由 current 推断',
-    },
-    { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用该步：不可点击、不可聚焦、置灰' },
-  ],
-  a11y: {
-    role: 'list',
-    keyboard: ['Tab', 'Enter', 'Space'],
-    notes: [
-      'ol/li 结构',
-      'clickable 时每步为原生 button，当前步 aria-current=step',
-      '图标对勾/✕ 用 aria-hidden，状态靠文本与 aria-current 表达',
-      '连接线 aria-hidden=true',
-    ],
-  },
-  tokens: ['--cd-steps-*', '--cd-focus-ring', '--cd-radius-full', '--cd-spacing-*', '--cd-font-size-1'],
-} as const;

package/src/steps/types.ts

@@ -1,8 +0,0 @@
-export interface StepItem {
-  title: string;
-  description?: string;
-  /** 显式覆盖该步状态；不传时由 current 推断 */
-  status?: 'wait' | 'process' | 'finish' | 'error' | 'warning';
-  /** 禁用该步：不可点击、不可聚焦、置灰 */
-  disabled?: boolean;
-}