@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/switch/Switch.a11y.test.ts

@@ -1,46 +0,0 @@
-// Switch a11y：原生 role="switch" 按钮，受控/非受控。
-// 只断言静态 ARIA（role/aria-checked/aria-disabled）+ axe 0 violations，
-// 不测真实键盘/焦点（jsdom 限制，见 test-utils/a11y.ts 说明）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Switch from './Switch.svelte';
-
-describe('Switch a11y', () => {
-  it('默认：role=switch / aria-checked=false / ariaLabel 提供可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(Switch, {
-      props: { ariaLabel: 'Dark mode' },
-    });
-    const sw = container.querySelector('[role="switch"]');
-    expect(sw).not.toBeNull();
-    expect(sw?.getAttribute('aria-checked')).toBe('false');
-    expect(sw?.getAttribute('aria-label')).toBe('Dark mode');
-    await expectNoAxeViolations(container);
-  });
-
-  it('选中：value=true → aria-checked=true', async () => {
-    const { container } = renderWithLocale(Switch, {
-      props: { ariaLabel: 'Wifi', value: true },
-    });
-    const sw = container.querySelector('[role="switch"]');
-    expect(sw?.getAttribute('aria-checked')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-
-  it('禁用：disabled，无 axe violations', async () => {
-    const { container } = renderWithLocale(Switch, {
-      props: { ariaLabel: 'Bluetooth', disabled: true },
-    });
-    const sw = container.querySelector('[role="switch"]');
-    expect(sw).not.toBeNull();
-    await expectNoAxeViolations(container);
-  });
-
-  it('loading：aria-busy=true', async () => {
-    const { container } = renderWithLocale(Switch, {
-      props: { ariaLabel: 'Sync', loading: true },
-    });
-    const sw = container.querySelector('[role="switch"]');
-    expect(sw?.getAttribute('aria-busy')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/switch/Switch.kbd.test.ts

@@ -1,40 +0,0 @@
-// Switch 键盘 e2e（browser project / 真实 chromium）。
-// Switch 是原生 <button role="switch">，焦点落在按钮本身：Tab 聚焦、
-// Space/Enter 经原生 click 触发 toggle，aria-checked 翻转。jsdom 下
-// 原生按钮的 Space/Enter→click 合成不可靠，故在真浏览器里验真实键盘。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import SwitchKbdFixture from './SwitchKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Switch 键盘 e2e（role=switch Space/Enter 切换）', () => {
-  it('Tab 聚焦 + Space/Enter 翻转 aria-checked', async () => {
-    const { baseElement } = renderKbdFixture(SwitchKbdFixture);
-
-    const sw = baseElement.querySelector('[role="switch"]') as HTMLElement;
-    expect(sw).not.toBeNull();
-    expect(sw.getAttribute('aria-checked')).toBe('false');
-
-    // Tab 从 before 进入，焦点落在 switch 按钮本身。
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(sw)).toHaveFocus();
-
-    // Space 切到 on（aria-checked=true，onChange 写入 true）。
-    await userEvent.keyboard(' ');
-    await expect.element(loc(sw)).toHaveAttribute('aria-checked', 'true');
-    const out = baseElement.querySelector('[data-testid="value"]') as HTMLElement;
-    expect(out.textContent).toBe(JSON.stringify(true));
-
-    // Enter 切回 off。
-    await userEvent.keyboard('{Enter}');
-    await expect.element(loc(sw)).toHaveAttribute('aria-checked', 'false');
-    expect(out.textContent).toBe(JSON.stringify(false));
-  });
-});

package/src/switch/Switch.svelte

@@ -1,310 +0,0 @@
-<!--
-  Switch — see specs/components/input/Switch.spec.md
-  Native role="switch" button, controlled / uncontrolled.
-
-  ⚠️ 死循环红线：
-    - 受控（value=/bind:value）：父持有 value，仅经 onChange 上抛，绝不回写 prop（红线 #1）。
-    - 派生（on / nativeValue / cls / activeChildren）均为纯函数 $derived（红线 #2）。
-    - autofocus：$effect 内命令式 focus()，无 cleanup 必要（focus 一次性）；
-      announceOnChange 的 live region 写入在事件回调（非 render 期），$effect 仅清空兜底（红线 #3）。
-  - checkedValue/uncheckedValue：开/关态映射到任意业务值，仅用于 onChange.nativeValue 与
-    隐藏 input 提交值；on 仍为 boolean，映射不回写。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type NativeValue = string | number | boolean;
-
-  interface Props {
-    value?: boolean;
-    defaultValue?: boolean;
-    /** 开态对应的实际值（onChange.nativeValue 与表单提交值）。 */
-    checkedValue?: NativeValue;
-    /** 关态对应的实际值。 */
-    uncheckedValue?: NativeValue;
-    size?: Size;
-    status?: Status;
-    disabled?: boolean;
-    loading?: boolean;
-    checkedChildren?: string | Snippet;
-    uncheckedChildren?: string | Snippet;
-    name?: string;
-    /** 表单必填校验（须为开态）。 */
-    required?: boolean;
-    ariaLabel?: string;
-    /** 关联外部可见文本（如 Label 组件）的 id，体现可访问名（优先于 ariaLabel）。 */
-    ariaLabelledby?: string;
-    /** 切换后是否用 live region 播报新状态（文案经 locale）。 */
-    announceOnChange?: boolean;
-    /** 挂载后自动聚焦。 */
-    autofocus?: boolean;
-    onChange?: (
-      v: boolean,
-      detail?: { value: boolean; nativeValue: NativeValue; event: Event },
-    ) => void;
-    /** 获得焦点。 */
-    onFocus?: (event: FocusEvent) => void;
-    /** 失去焦点。 */
-    onBlur?: (event: FocusEvent) => void;
-    /** 键盘按下（可用于自定义快捷键扩展）。 */
-    onKeydown?: (event: KeyboardEvent) => void;
-    /** checked 时显示的文字（checkedChildren 的字符串别名） */
-    checkedText?: string;
-    /** unchecked 时显示的文字 */
-    uncheckedText?: string;
-    /** checked 时的 Snippet（checkedChildren 的 Snippet 别名） */
-    checkedContent?: Snippet;
-    /** unchecked 时的 Snippet */
-    uncheckedContent?: Snippet;
-    /** 鼠标进入 */
-    onMouseEnter?: (e: MouseEvent) => void;
-    /** 鼠标离开 */
-    onMouseLeave?: (e: MouseEvent) => void;
-  }
-
-  let {
-    value = $bindable(),
-    defaultValue = false,
-    checkedValue = true,
-    uncheckedValue = false,
-    size = 'default',
-    status = 'default',
-    disabled = false,
-    loading = false,
-    checkedChildren,
-    uncheckedChildren,
-    name,
-    required = false,
-    ariaLabel,
-    ariaLabelledby,
-    announceOnChange = false,
-    autofocus = false,
-    onChange,
-    onFocus,
-    onBlur,
-    onKeydown,
-    checkedText,
-    uncheckedText,
-    checkedContent,
-    uncheckedContent,
-    onMouseEnter,
-    onMouseLeave,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  const isControlled = $derived(value !== undefined);
-  let inner = $state(getInitialValue());
-  const on = $derived(isControlled ? !!value : inner);
-
-  function getInitialValue(): boolean {
-    return defaultValue;
-  }
-
-  const interactable = $derived(!disabled && !loading);
-
-  // 映射到业务值（红线 #2 纯派生）：仅用于 onChange.nativeValue 与表单提交。
-  const nativeValue = $derived<NativeValue>(on ? checkedValue : uncheckedValue);
-
-  // 切换播报 live region（命令式写入，初始空；render 期只读 $state）。
-  let announceText = $state('');
-
-  let rootEl: HTMLButtonElement | undefined;
-
-  // autofocus：命令式聚焦一次（红线 #3，SSR 安全，$effect 仅 client）。
-  $effect(() => {
-    if (autofocus && rootEl && interactable) rootEl.focus();
-  });
-
-  function announce(next: boolean) {
-    if (!announceOnChange) return;
-    announceText = '';
-    // 微任务后再写入，先清空再赋值，触发 AT 重新播报。
-    queueMicrotask(() => {
-      announceText = loc().t(next ? 'Switch.announceChecked' : 'Switch.announceUnchecked');
-    });
-  }
-
-  function toggle(event: Event) {
-    if (!interactable) return;
-    const next = !on;
-    // Controlled (`value=` / `bind:value`): parent owns `value`; propagate only
-    // via `onChange`. Writing the prop AND firing `onChange` loops.
-    // Uncontrolled: keep our own state in sync.
-    if (!isControlled) inner = next;
-    const nv = next ? checkedValue : uncheckedValue;
-    onChange?.(next, { value: next, nativeValue: nv, event });
-    announce(next);
-  }
-
-  // checkedText / uncheckedText 是 checkedChildren / uncheckedChildren 的字符串别名；
-  // checkedContent / uncheckedContent 是 Snippet 别名。
-  // 优先级：checkedChildren > checkedContent > checkedText（同理 unchecked）。
-  const resolvedChecked = $derived<string | Snippet | undefined>(
-    checkedChildren ?? checkedContent ?? checkedText,
-  );
-  const resolvedUnchecked = $derived<string | Snippet | undefined>(
-    uncheckedChildren ?? uncheckedContent ?? uncheckedText,
-  );
-  const activeChildren = $derived(on ? resolvedChecked : resolvedUnchecked);
-  const isSnippet = (c: string | Snippet | undefined): c is Snippet => typeof c === 'function';
-
-  // 隐藏 input 提交值：boolean → 'true'/'false'，其余按原值字符串化。
-  const submitValue = $derived(
-    typeof nativeValue === 'boolean' ? (nativeValue ? 'true' : 'false') : String(nativeValue),
-  );
-
-  const cls = $derived(
-    ['cd-switch', `cd-switch--${size}`, `cd-switch--${status}`, on && 'cd-switch--on']
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-<button
-  bind:this={rootEl}
-  type="button"
-  role="switch"
-  class={cls}
-  aria-checked={on}
-  aria-labelledby={ariaLabelledby}
-  aria-label={ariaLabelledby ? undefined : ariaLabel}
-  aria-busy={loading || undefined}
-  aria-required={required || undefined}
-  aria-invalid={status === 'error' || undefined}
-  disabled={disabled || loading}
-  onclick={toggle}
-  onfocus={onFocus}
-  onblur={onBlur}
-  onkeydown={onKeydown}
-  onmouseenter={onMouseEnter}
-  onmouseleave={onMouseLeave}
->
-  {#if name}<input type="hidden" {name} value={submitValue} {required} />{/if}
-  {#if activeChildren !== undefined}
-    <span class="cd-switch__label">
-      {#if isSnippet(activeChildren)}{@render activeChildren()}{:else}{activeChildren}{/if}
-    </span>
-  {/if}
-  <span class="cd-switch__knob">
-    {#if loading}<span class="cd-switch__spinner" aria-hidden="true"></span>{/if}
-  </span>
-</button>
-
-{#if announceOnChange}
-  <!-- 切换播报 live region：视觉隐藏，仅供辅助技术读取（render 期只读 $state）。 -->
-  <div class="cd-switch__sr-live" role="status" aria-live="polite" aria-atomic="true">
-    {announceText}
-  </div>
-{/if}
-
-<style>
-  .cd-switch {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    inline-size: var(--cd-switch-width-default);
-    block-size: var(--cd-switch-height-default);
-    padding: 0;
-    border: none;
-    border-radius: var(--cd-switch-radius);
-    background: var(--cd-switch-bg-off);
-    cursor: pointer;
-    transition: background-color var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
-  }
-  .cd-switch--small {
-    inline-size: var(--cd-switch-width-small);
-    block-size: var(--cd-switch-height-small);
-  }
-  .cd-switch--large {
-    inline-size: var(--cd-switch-width-large);
-    block-size: var(--cd-switch-height-large);
-  }
-  .cd-switch--on {
-    background: var(--cd-switch-bg-on);
-    justify-content: flex-end;
-  }
-  .cd-switch--warning.cd-switch--on {
-    background: var(--cd-color-warning);
-  }
-  .cd-switch--warning.cd-switch--on .cd-switch__label {
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-switch--error.cd-switch--on {
-    background: var(--cd-color-danger);
-  }
-  .cd-switch:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-switch:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .cd-switch__knob {
-    position: absolute;
-    inset-block: 2px;
-    inset-inline-start: 2px;
-    aspect-ratio: 1;
-    block-size: calc(100% - 4px);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--cd-radius-full);
-    background: var(--cd-switch-knob-bg);
-    transition: inset-inline-start var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
-  }
-  .cd-switch--on .cd-switch__knob {
-    inset-inline-start: calc(100% - 2px);
-    transform: translateX(-100%);
-  }
-  .cd-switch__label {
-    color: var(--cd-color-text-inverse);
-    font-size: var(--cd-font-size-1);
-    line-height: 1;
-    padding-inline: var(--cd-spacing-2);
-  }
-  .cd-switch--on .cd-switch__label {
-    padding-inline-start: var(--cd-spacing-3);
-    padding-inline-end: var(--cd-spacing-5);
-  }
-  .cd-switch__spinner {
-    inline-size: 60%;
-    aspect-ratio: 1;
-    border: 2px solid var(--cd-color-grey-3);
-    border-block-start-color: var(--cd-color-primary);
-    border-radius: var(--cd-radius-full);
-    animation: cd-switch-spin var(--cd-motion-duration-slow) linear infinite;
-  }
-  @keyframes cd-switch-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  /* 视觉隐藏但对辅助技术可见（不可用 display:none / visibility:hidden）。 */
-  .cd-switch__sr-live {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-switch,
-    .cd-switch__knob {
-      transition: none;
-    }
-    .cd-switch__spinner {
-      animation: none;
-    }
-  }
-</style>

package/src/switch/SwitchKbdFixture.svelte

@@ -1,22 +0,0 @@
-<!--
-  仅供 Switch.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  Switch 是原生 <button role="switch">，焦点落在按钮本身；Space/Enter 经原生
-  click 触发 toggle，aria-checked 翻转。夹具暴露 onChange 写入 lastValue。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Switch from './Switch.svelte';
-
-  let lastValue = $state<unknown>(undefined);
-</script>
-
-<LocaleProvider locale="en_US">
-  <button type="button" data-testid="before">before</button>
-  <Switch
-    ariaLabel="Toggle"
-    onChange={(v) => {
-      lastValue = v;
-    }}
-  />
-  <output data-testid="value">{JSON.stringify(lastValue ?? null)}</output>
-</LocaleProvider>

package/src/switch/index.ts

@@ -1,2 +0,0 @@
-export { default as Switch } from './Switch.svelte';
-export { meta as switchMeta } from './meta.js';

package/src/switch/meta.ts

@@ -1,44 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Switch',
-  category: 'input',
-  description: '开关选择器，表示两种互斥状态的即时切换，支持加载态与自定义文案。',
-  props: [
-    { name: 'value', type: 'boolean', default: 'undefined', desc: '受控值；提供则为受控' },
-    { name: 'defaultValue', type: 'boolean', default: 'false', desc: '非受控初始值' },
-    { name: 'checkedValue', type: 'string | number | boolean', default: 'true', desc: '开态映射的实际值（onChange.nativeValue 与表单提交值）' },
-    { name: 'uncheckedValue', type: 'string | number | boolean', default: 'false', desc: '关态映射的实际值' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'status', type: "'default'|'warning'|'error'", default: 'default' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'loading', type: 'boolean', default: 'false' },
-    { name: 'checkedChildren', type: 'string | Snippet', default: 'undefined' },
-    { name: 'uncheckedChildren', type: 'string | Snippet', default: 'undefined' },
-    { name: 'name', type: 'string', default: 'undefined' },
-    { name: 'required', type: 'boolean', default: 'false', desc: '表单必填校验（须为开态）' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined' },
-    { name: 'ariaLabelledby', type: 'string', default: 'undefined', desc: '关联外部可见文本 id（优先于 ariaLabel）' },
-    { name: 'announceOnChange', type: 'boolean', default: 'false', desc: '切换后用 live region 播报新状态' },
-    { name: 'autofocus', type: 'boolean', default: 'false', desc: '挂载后自动聚焦' },
-    { name: 'onChange', type: '(v: boolean, detail?: { value: boolean; nativeValue: string|number|boolean; event: Event }) => void', default: 'undefined' },
-    { name: 'onFocus', type: '(event: FocusEvent) => void', default: 'undefined', desc: '获得焦点' },
-    { name: 'onBlur', type: '(event: FocusEvent) => void', default: 'undefined', desc: '失去焦点' },
-    { name: 'onKeydown', type: '(event: KeyboardEvent) => void', default: 'undefined', desc: '键盘按下（自定义快捷键扩展）' },
-  ],
-  i18nKeys: [
-    'Switch.on',
-    'Switch.off',
-    'Switch.loading',
-    'Switch.announceChecked',
-    'Switch.announceUnchecked',
-  ],
-  a11y: {
-    role: 'switch',
-    keyboard: ['Enter', 'Space'],
-    notes: ['原生 button role=switch', 'aria-checked 反映状态', 'loading 时 aria-busy'],
-  },
-  tokens: ['--cd-switch-*', '--cd-focus-ring', '--cd-motion-*', '--cd-radius-full'],
-} as const;

package/src/table/Table.a11y.test.ts

@@ -1,70 +0,0 @@
-// Table a11y：数据表格。
-// 纯展示表为原生 <table>（role=table）；交互态（sorter/rowSelection 等）升级为
-// WAI-ARIA Grid Pattern：role=grid + columnheader/row/gridcell。两种都各测一个。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Table from './Table.svelte';
-
-interface Row {
-  key: string;
-  name: string;
-  age: number;
-}
-
-const dataSource: Row[] = [
-  { key: '1', name: 'Alice', age: 30 },
-  { key: '2', name: 'Bob', age: 25 },
-];
-
-const plainColumns = [
-  { key: 'name', dataIndex: 'name', title: 'Name' },
-  { key: 'age', dataIndex: 'age', title: 'Age' },
-];
-
-describe('Table a11y', () => {
-  it('纯展示表：原生 table 语义（无 role=grid），无 axe violations', async () => {
-    const { container } = renderWithLocale(Table, {
-      props: { columns: plainColumns, dataSource, ariaLabel: 'Users' },
-    });
-    const table = container.querySelector('table');
-    expect(table).not.toBeNull();
-    // 纯展示降级：不应有 role=grid
-    expect(table?.getAttribute('role')).toBeNull();
-    expect(container.querySelector('[role="grid"]')).toBeNull();
-    // 列头与数据行
-    expect(container.querySelectorAll('th[scope="col"]').length).toBe(2);
-    await expectNoAxeViolations(container);
-  });
-
-  it('交互态（sortable）：role=grid + columnheader/gridcell + aria-rowcount', async () => {
-    const sortableColumns = [
-      { key: 'name', dataIndex: 'name', title: 'Name', sorter: true },
-      { key: 'age', dataIndex: 'age', title: 'Age', sorter: true },
-    ];
-    const { container } = renderWithLocale(Table, {
-      props: { columns: sortableColumns, dataSource, ariaLabel: 'Users grid' },
-    });
-    const grid = container.querySelector('[role="grid"]');
-    expect(grid).not.toBeNull();
-    expect(grid?.getAttribute('aria-rowcount')).toBeTruthy();
-    expect(container.querySelectorAll('[role="columnheader"]').length).toBeGreaterThanOrEqual(2);
-    expect(container.querySelectorAll('[role="row"]').length).toBeGreaterThanOrEqual(1);
-    expect(container.querySelectorAll('[role="gridcell"]').length).toBeGreaterThanOrEqual(1);
-    await expectNoAxeViolations(container);
-  });
-
-  it('rowSelection：交互态 role=grid + 全选 checkbox 有可访问名', async () => {
-    const { container } = renderWithLocale(Table, {
-      props: {
-        columns: plainColumns,
-        dataSource,
-        ariaLabel: 'Selectable',
-        rowSelection: {},
-      },
-    });
-    expect(container.querySelector('[role="grid"]')).not.toBeNull();
-    const checkbox = container.querySelector('input[type="checkbox"]');
-    expect(checkbox?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-});

package/src/table/Table.bench.ts

@@ -1,51 +0,0 @@
-// Table 渲染基准（最小骨架，趋势参考，不接 CI 门禁）。
-// 在 jsdom 下真实 mount Table，测不同行数的挂载耗时。仅供观察回归趋势，
-// 数字受 jsdom/CI 机器影响，不作为硬门禁（门禁是 size-limit 体积预算）。
-import { bench, describe } from 'vitest';
-import { render, cleanup } from '@testing-library/svelte';
-import Table from './Table.svelte';
-
-interface Row extends Record<string, unknown> {
-  key: string;
-  name: string;
-  age: number;
-  city: string;
-}
-
-const columns = [
-  { key: 'name', dataIndex: 'name', title: 'Name' },
-  { key: 'age', dataIndex: 'age', title: 'Age' },
-  { key: 'city', dataIndex: 'city', title: 'City' },
-];
-
-function makeRows(n: number): Row[] {
-  return Array.from({ length: n }, (_, i) => ({
-    key: String(i),
-    name: `User ${i}`,
-    age: 20 + (i % 50),
-    city: `City ${i % 10}`,
-  }));
-}
-
-describe('Table render', () => {
-  const rows100 = makeRows(100);
-  const rows1000 = makeRows(1000);
-
-  bench(
-    'mount 100 rows',
-    () => {
-      render(Table, { props: { columns, dataSource: rows100 } });
-      cleanup();
-    },
-    { time: 300 },
-  );
-
-  bench(
-    'mount 1000 rows',
-    () => {
-      render(Table, { props: { columns, dataSource: rows1000 } });
-      cleanup();
-    },
-    { time: 500 },
-  );
-});