@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/progress/meta.ts

@@ -1,132 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Progress — see specs/components/feedback/Progress.spec.md
- */
-export const meta = {
-  name: 'Progress',
-  category: 'feedback',
-  description:
-    '进度条：line/circle/dashboard 三形态，normal/success/error/warning 四态；percent 钳制到 0..100，showInfo/format 控制信息区，success 环形显示对勾（非颜色冗余信号），indeterminate 不确定进度循环动画；role=progressbar，受控 percent 不回写，仅 onComplete/onChange 通知。',
-  exports: ['Progress'],
-  props: [
-    { name: 'percent', type: 'number', default: '0', desc: '受控进度，钳制到 0..100' },
-    {
-      name: 'type',
-      type: "'line'|'circle'|'dashboard'",
-      default: "'line'",
-      desc: '形态',
-    },
-    {
-      name: 'status',
-      type: "'normal'|'success'|'error'|'warning'",
-      default: "'normal'",
-      desc: '语义状态',
-    },
-    { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
-    {
-      name: 'width',
-      type: 'number',
-      default: 'undefined',
-      desc: 'circle/dashboard 直径 px，覆写 size',
-    },
-    { name: 'strokeWidth', type: 'number', default: 'undefined', desc: '笔触/条高 px 覆写' },
-    {
-      name: 'strokeLinecap',
-      type: "'round'|'butt'|'square'",
-      default: "'round'",
-      desc: 'circle 端点形状',
-    },
-    { name: 'showInfo', type: 'boolean', default: 'true', desc: '是否显示信息区' },
-    {
-      name: 'format',
-      type: '(percent: number, status: ProgressStatus) => string | null',
-      default: 'undefined',
-      desc: '自定义信息文本；返回 null 隐藏',
-    },
-    {
-      name: 'indeterminate',
-      type: 'boolean',
-      default: 'false',
-      desc: '不确定进度循环动画（纯 CSS）',
-    },
-    {
-      name: 'gapDegree',
-      type: 'number',
-      default: 'dashboard 时 75，否则 0',
-      desc: 'dashboard 开口角度',
-    },
-    {
-      name: 'gapPosition',
-      type: "'top'|'bottom'|'left'|'right'",
-      default: "'bottom'",
-      desc: '开口位置',
-    },
-    {
-      name: 'successWhenFull',
-      type: 'boolean',
-      default: 'false',
-      desc: '满 100 且 status=normal 时转 success',
-    },
-    {
-      name: 'motion',
-      type: 'boolean',
-      default: 'true',
-      desc: '过渡/循环动画，被 reduced-motion 覆盖',
-    },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无障碍标签' },
-    {
-      name: 'formatSnippet',
-      type: 'Snippet<[{ percent: number; status: ProgressStatus }]>',
-      default: 'undefined',
-      desc: '信息区 snippet，优先于 format prop',
-    },
-    {
-      name: 'onComplete',
-      type: '(info: { percent: number }) => void',
-      default: 'undefined',
-      desc: 'percent 首达 100 触发一次',
-    },
-    {
-      name: 'onChange',
-      type: '(info: { percent: number }) => void',
-      default: 'undefined',
-      desc: 'percent 变更回调',
-    },
-  ],
-  events: [
-    { name: 'onComplete', desc: 'percent 首次到达 100' },
-    { name: 'onChange', desc: 'percent 变化' },
-  ],
-  slots: [{ name: 'formatSnippet', desc: '自定义信息区内容（优先于 format prop）' }],
-  a11y: {
-    hasRole: true,
-    focusable: false,
-    note: 'role=progressbar + aria-valuemin/max=0/100 与 aria-valuenow/aria-valuetext；indeterminate 时省略 aria-valuenow 并设 aria-busy；circle success 显示对勾图标作为非颜色冗余信号（aria-hidden）；不可聚焦不设 tabindex；reduced-motion 禁用过渡与循环动画。',
-  },
-  tokens: [
-    '--cd-progress-track-color',
-    '--cd-progress-stroke-normal',
-    '--cd-progress-stroke-success',
-    '--cd-progress-stroke-error',
-    '--cd-progress-stroke-warning',
-    '--cd-progress-info-color',
-    '--cd-progress-info-success-color',
-    '--cd-progress-height-small',
-    '--cd-progress-height-default',
-    '--cd-progress-height-large',
-    '--cd-progress-circle-size-small',
-    '--cd-progress-circle-size-default',
-    '--cd-progress-circle-size-large',
-    '--cd-progress-transition',
-  ],
-  responsive: false,
-  examples: [
-    { title: 'line 受控', code: '<Progress percent={percent} />' },
-    { title: 'circle 带百分比', code: '<Progress type="circle" percent={75} />' },
-    {
-      title: 'dashboard',
-      code: '<Progress type="dashboard" percent={60} status="warning" />',
-    },
-    { title: 'indeterminate', code: '<Progress indeterminate ariaLabel="加载中" />' },
-  ],
-} as const;

package/src/radio/Radio.svelte

@@ -1,330 +0,0 @@
-<!--
-  Radio — see specs/components/input/Radio.spec.md
-  Inside RadioGroup: role=radio via native input, roving tabindex.
-  Standalone: self controlled / uncontrolled.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useId } from '@chenzy-design/core';
-  import {
-    getRadioGroupContext,
-    type RadioValue,
-    type RadioSize,
-    type RadioStatus,
-    type RadioType,
-  } from './context.js';
-
-  interface Props {
-    value: RadioValue;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    size?: RadioSize;
-    status?: RadioStatus;
-    type?: RadioType;
-    name?: string;
-    extra?: string | undefined;
-    children?: Snippet;
-    onChange?: (checked: boolean) => void;
-  }
-
-  let {
-    value,
-    checked = $bindable(),
-    defaultChecked = false,
-    disabled = false,
-    size = 'default',
-    status = 'default',
-    type,
-    name,
-    extra,
-    children,
-    onChange,
-  }: Props = $props();
-
-  const group = getRadioGroupContext();
-
-  const fieldId = useId('cd-radio-item');
-  const extraId = $derived(extra ? `${fieldId}-extra` : undefined);
-
-  const isControlled = $derived(checked !== undefined);
-  let inner = $state(getInitialChecked());
-
-  function getInitialChecked(): boolean {
-    return defaultChecked;
-  }
-
-  const resolvedDisabled = $derived(disabled || (group ? group.getDisabled() : false));
-  const resolvedSize = $derived(group ? group.getSize() : size);
-  // Group transparently provides `status`; a per-item non-default `status` overrides it.
-  const resolvedStatus = $derived(status !== 'default' ? status : (group?.getStatus() ?? 'default'));
-  const resolvedName = $derived(group ? group.name : name);
-  // type 优先取本项显式值，否则继承 Group，再退 default。
-  const resolvedType = $derived<RadioType>(type ?? group?.getType() ?? 'default');
-  // button/card/pureCard 用 role=radio 容器（非原生 input），其余用隐藏 input。
-  const isFancy = $derived(resolvedType !== 'default');
-
-  const isChecked = $derived(
-    group ? group.getSelected() === value : isControlled ? !!checked : inner,
-  );
-
-  // roving tabindex: in a group only the tab stop is 0, else -1; standalone always 0
-  const tabindex = $derived(group ? (group.isTabStop(value, resolvedDisabled) ? 0 : -1) : 0);
-
-  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
-    const next = e.currentTarget.checked;
-    if (group) {
-      group.select(value);
-      onChange?.(true);
-      return;
-    }
-    // Controlled (`checked=` / `bind:checked`): parent owns `checked`; propagate
-    // only via `onChange`. Writing the prop AND firing `onChange` loops.
-    // Uncontrolled: keep our own state in sync.
-    if (!isControlled) inner = next;
-    onChange?.(next);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    group?.onKeydown(e, value);
-  }
-
-  // role=radio 容器（button/card 型）：方向键交给 group，Space/Enter 选中本项。
-  function handleFancyKeydown(e: KeyboardEvent) {
-    if (resolvedDisabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      activate();
-      return;
-    }
-    group?.onKeydown(e, value);
-  }
-
-  function handleFancyClick() {
-    if (resolvedDisabled) return;
-    activate();
-  }
-
-  // 选中本项（用于 role=radio 容器的点击/键盘），同 handleChange 的提交逻辑。
-  function activate() {
-    if (group) {
-      group.select(value);
-      onChange?.(true);
-      return;
-    }
-    if (!isControlled) inner = true;
-    onChange?.(true);
-  }
-
-  /** Register this radio's focusable element with the group for roving focus management. */
-  function registerAttach(node: HTMLElement) {
-    if (!group) return;
-    // read deps so registration metadata stays current
-    return group.register({ value, disabled: resolvedDisabled, el: node });
-  }
-
-  const cls = $derived(
-    [
-      'cd-radio',
-      `cd-radio--${resolvedSize}`,
-      `cd-radio--${resolvedType}`,
-      resolvedStatus !== 'default' && `cd-radio--${resolvedStatus}`,
-      isChecked && 'cd-radio--checked',
-      resolvedDisabled && 'cd-radio--disabled',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-{#if isFancy}
-  <!-- button/card/pureCard 型：role=radio 容器承载 aria-checked，参与 roving。 -->
-  <div
-    {@attach registerAttach}
-    class={cls}
-    role="radio"
-    aria-checked={isChecked}
-    aria-disabled={resolvedDisabled ? 'true' : undefined}
-    aria-describedby={extraId}
-    {tabindex}
-    onclick={handleFancyClick}
-    onkeydown={handleFancyKeydown}
-  >
-    {#if resolvedType !== 'pureCard'}
-      <span class="cd-radio__circle" aria-hidden="true"></span>
-    {/if}
-    {#if children || extra}
-      <span class="cd-radio__content">
-        {#if children}<span class="cd-radio__label">{@render children()}</span>{/if}
-        {#if extra}<span class="cd-radio__extra" id={extraId}>{extra}</span>{/if}
-      </span>
-    {/if}
-  </div>
-{:else}
-  <label class={cls} for={fieldId}>
-    <input
-      {@attach registerAttach}
-      id={fieldId}
-      class="cd-radio__input"
-      type="radio"
-      name={resolvedName}
-      value={String(value)}
-      checked={isChecked}
-      disabled={resolvedDisabled}
-      {tabindex}
-      aria-describedby={extraId}
-      onchange={handleChange}
-      onkeydown={handleKeydown}
-    />
-    <span class="cd-radio__circle" aria-hidden="true"></span>
-    {#if children || extra}
-      <span class="cd-radio__content">
-        {#if children}<span class="cd-radio__label">{@render children()}</span>{/if}
-        {#if extra}<span class="cd-radio__extra" id={extraId}>{extra}</span>{/if}
-      </span>
-    {/if}
-  </label>
-{/if}
-
-<style>
-  .cd-radio {
-    display: inline-flex;
-    align-items: flex-start;
-    gap: var(--cd-radio-label-gap);
-    color: var(--cd-color-text-0);
-    cursor: pointer;
-    line-height: 1.4;
-  }
-  .cd-radio--disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .cd-radio__input {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-  .cd-radio__circle {
-    position: relative;
-    flex: 0 0 auto;
-    inline-size: var(--cd-radio-size-default);
-    block-size: var(--cd-radio-size-default);
-    background: var(--cd-radio-bg);
-    border: 1px solid var(--cd-radio-border);
-    border-radius: var(--cd-radius-full);
-    transition:
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-radio--small .cd-radio__circle {
-    inline-size: var(--cd-radio-size-small);
-    block-size: var(--cd-radio-size-small);
-  }
-  .cd-radio--large .cd-radio__circle {
-    inline-size: var(--cd-radio-size-large);
-    block-size: var(--cd-radio-size-large);
-  }
-  .cd-radio--checked .cd-radio__circle {
-    border-color: var(--cd-radio-color-checked);
-  }
-  .cd-radio--checked .cd-radio__circle::after {
-    content: '';
-    position: absolute;
-    inset: 50%;
-    inline-size: 50%;
-    block-size: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--cd-radio-dot-color);
-    border-radius: var(--cd-radius-full);
-  }
-  /* 校验态：边框改用 warning/error，覆盖默认与 checked 描边（token 驱动） */
-  .cd-radio--warning .cd-radio__circle {
-    border-color: var(--cd-radio-color-warning);
-  }
-  .cd-radio--error .cd-radio__circle {
-    border-color: var(--cd-radio-color-error);
-  }
-  .cd-radio__input:focus-visible + .cd-radio__circle {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-radio__content {
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-1);
-  }
-  .cd-radio__extra {
-    color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-1);
-  }
-  /* ---- button / card / pureCard 型：role=radio 容器 ---- */
-  .cd-radio--button,
-  .cd-radio--card,
-  .cd-radio--pureCard {
-    box-sizing: border-box;
-    outline: none;
-  }
-  .cd-radio--button:focus-visible,
-  .cd-radio--card:focus-visible,
-  .cd-radio--pureCard:focus-visible {
-    box-shadow: var(--cd-focus-ring);
-  }
-  /* button 型：矩形分段按钮，隐藏圆点 indicator */
-  .cd-radio--button {
-    gap: 0;
-    block-size: var(--cd-radio-button-height);
-    padding-inline: var(--cd-spacing-3);
-    align-items: center;
-    justify-content: center;
-    color: var(--cd-color-text-0);
-    background: var(--cd-radio-bg);
-    border: 1px solid var(--cd-radio-border);
-    border-radius: var(--cd-radius-2);
-  }
-  .cd-radio--button.cd-radio--small {
-    block-size: var(--cd-radio-button-height-small);
-  }
-  .cd-radio--button.cd-radio--large {
-    block-size: var(--cd-radio-button-height-large);
-  }
-  .cd-radio--button .cd-radio__circle {
-    display: none;
-  }
-  .cd-radio--button.cd-radio--checked {
-    color: var(--cd-radio-color-checked);
-    border-color: var(--cd-radio-color-checked);
-  }
-  /* card / pureCard 型：带边框卡片，选中高亮边框 */
-  .cd-radio--card,
-  .cd-radio--pureCard {
-    padding: var(--cd-spacing-3);
-    background: var(--cd-radio-bg);
-    border: 1px solid var(--cd-radio-border);
-    border-radius: var(--cd-radio-card-radius);
-  }
-  .cd-radio--card.cd-radio--checked,
-  .cd-radio--pureCard.cd-radio--checked {
-    border-color: var(--cd-radio-card-border-checked);
-  }
-  .cd-radio--card.cd-radio--warning,
-  .cd-radio--pureCard.cd-radio--warning,
-  .cd-radio--button.cd-radio--warning {
-    border-color: var(--cd-radio-color-warning);
-  }
-  .cd-radio--card.cd-radio--error,
-  .cd-radio--pureCard.cd-radio--error,
-  .cd-radio--button.cd-radio--error {
-    border-color: var(--cd-radio-color-error);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-radio__circle {
-      transition: none;
-    }
-  }
-</style>

package/src/radio/RadioGroup.a11y.test.ts

@@ -1,43 +0,0 @@
-// RadioGroup a11y：role="radiogroup" 容器 + 多个 radio 选项（原生 input）。
-// 只断言静态 ARIA + axe 0 violations，不测方向键 roving（jsdom 限制）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import RadioGroup from './RadioGroup.svelte';
-
-const OPTIONS = [
-  { label: 'Apple', value: 'apple' },
-  { label: 'Banana', value: 'banana' },
-  { label: 'Cherry', value: 'cherry', disabled: true },
-];
-
-describe('RadioGroup a11y', () => {
-  it('默认：role=radiogroup + ariaLabel + 多选项渲染，无 axe violations', async () => {
-    const { container } = renderWithLocale(RadioGroup, {
-      props: { ariaLabel: 'Fruit', options: OPTIONS },
-    });
-    const group = container.querySelector('[role="radiogroup"]');
-    expect(group?.getAttribute('aria-label')).toBe('Fruit');
-
-    const radios = container.querySelectorAll('input[type="radio"]');
-    expect(radios.length).toBe(3);
-    await expectNoAxeViolations(container);
-  });
-
-  it('选中态：value 命中的 radio 为 checked', async () => {
-    const { container } = renderWithLocale(RadioGroup, {
-      props: { ariaLabel: 'Fruit', options: OPTIONS, value: 'banana' },
-    });
-    const checked = container.querySelector('input[type="radio"]:checked') as HTMLInputElement | null;
-    expect(checked?.value).toBe('banana');
-    await expectNoAxeViolations(container);
-  });
-
-  it('禁用项：对应 radio 为 disabled', async () => {
-    const { container } = renderWithLocale(RadioGroup, {
-      props: { ariaLabel: 'Fruit', options: OPTIONS },
-    });
-    const disabled = container.querySelectorAll('input[type="radio"]:disabled');
-    expect(disabled.length).toBe(1);
-    await expectNoAxeViolations(container);
-  });
-});

package/src/radio/RadioGroup.kbd.test.ts

@@ -1,75 +0,0 @@
-// RadioGroup 键盘 e2e（browser project / 真实 chromium）。
-// WAI-ARIA radiogroup：roving tabindex + 方向键导航即选中（真实焦点）。
-// 测真实焦点移动 + 焦点即选中——jsdom 测不了（命令式 focus() 不可靠）：
-//   1. roving 单停靠点：选中项 tabindex=0，其余 -1（默认 defaultValue=apple）。
-//   2. ↓→ 真实移动焦点到下一项，同时选中（checked + 停靠点同步）。
-//   3. wrap：末项再 → 回到首项（源码 moveTo 用模运算 wrap）。
-//   4. 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 RadioGroupKbdFixture from './RadioGroupKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('RadioGroup 键盘 e2e（radiogroup roving，焦点即选中）', () => {
-  it('roving 单停靠点 + 方向键移动焦点即选中（wrap）+ Home/End', async () => {
-    const { baseElement } = renderKbdFixture(RadioGroupKbdFixture);
-
-    const radios = Array.from(
-      baseElement.querySelectorAll<HTMLInputElement>('input[type="radio"]'),
-    );
-    expect(radios.length).toBe(3);
-    const [apple, banana, cherry] = radios as [
-      HTMLInputElement,
-      HTMLInputElement,
-      HTMLInputElement,
-    ];
-
-    // 1. roving 单停靠点：选中项（apple）tabindex=0，其余 -1。
-    expect(radios.filter((el) => el.tabIndex === 0).length).toBe(1);
-    expect(apple.tabIndex).toBe(0);
-    expect(apple.checked).toBe(true);
-
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(apple)).toHaveFocus();
-
-    // 2. → 移动焦点到下一项，焦点即选中（checked + 停靠点同步）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(banana)).toHaveFocus();
-    expect(banana.checked).toBe(true);
-    expect(banana.tabIndex).toBe(0);
-    expect(apple.tabIndex).toBe(-1);
-    expect(apple.checked).toBe(false);
-
-    // ↓ 同义于 →（垂直/水平统一）。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(cherry)).toHaveFocus();
-    expect(cherry.checked).toBe(true);
-
-    // 3. wrap：末项再 → 回到首项并选中。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(apple)).toHaveFocus();
-    expect(apple.checked).toBe(true);
-
-    // ← wrap 到末项。
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(cherry)).toHaveFocus();
-    expect(cherry.checked).toBe(true);
-
-    // 4. Home/End 跳首/末并选中。
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(apple)).toHaveFocus();
-    expect(apple.checked).toBe(true);
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(cherry)).toHaveFocus();
-    expect(cherry.checked).toBe(true);
-  });
-});