@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/radio/RadioGroup.svelte

@@ -1,199 +0,0 @@
-<!--
-  RadioGroup — see specs/components/input/Radio.spec.md
-  WAI-ARIA radiogroup pattern: roving tabindex + arrow-key navigation.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useId } from '@chenzy-design/core';
-  import Radio from './Radio.svelte';
-  import {
-    setRadioGroupContext,
-    type RadioValue,
-    type RadioSize,
-    type RadioStatus,
-    type RadioType,
-    type RadioRegistration,
-  } from './context.js';
-
-  type OptionObject = { label: string; value: RadioValue; disabled?: boolean; extra?: string };
-
-  interface Props {
-    value?: RadioValue;
-    defaultValue?: RadioValue;
-    name?: string;
-    options?: OptionObject[];
-    disabled?: boolean;
-    size?: RadioSize;
-    status?: RadioStatus;
-    type?: RadioType;
-    direction?: 'horizontal' | 'vertical';
-    onChange?: (v: RadioValue) => void;
-    children?: Snippet;
-    ariaLabel?: string;
-    /** 关联组的可见标题元素 id（无内置标题时用，优先于 ariaLabel 体现可访问名）。 */
-    ariaLabelledby?: string;
-  }
-
-  let {
-    value = $bindable(),
-    defaultValue,
-    name,
-    options,
-    disabled = false,
-    size = 'default',
-    status = 'default',
-    type = 'default',
-    direction = 'horizontal',
-    onChange,
-    children,
-    ariaLabel,
-    ariaLabelledby,
-  }: Props = $props();
-
-  let rootEl = $state<HTMLDivElement | null>(null);
-
-  const groupName = resolveName();
-
-  function resolveName(): string {
-    return name ?? useId('cd-radio');
-  }
-
-  const isControlled = $derived(value !== undefined);
-  let inner = $state<RadioValue | undefined>(getInitialValue());
-
-  function getInitialValue(): RadioValue | undefined {
-    return defaultValue;
-  }
-
-  const selected = $derived(isControlled ? value : inner);
-
-  // Insertion-ordered registry of radios (matches DOM order). PLAIN (non-reactive)
-  // on purpose: radios push to it while mounting. It is read ONLY inside keyboard
-  // event handlers (moveTo) — never during render — so registration never feeds
-  // back into a render-read. This is what keeps the component loop-free
-  // (effect_update_depth_exceeded comes from render reading state that mount writes).
-  const registry: RadioRegistration[] = [];
-
-  function select(v: RadioValue) {
-    if (disabled) return;
-    // 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 = v;
-    onChange?.(v);
-  }
-
-  function register(reg: RadioRegistration): () => void {
-    registry.push(reg);
-    return () => {
-      const i = registry.indexOf(reg);
-      if (i !== -1) registry.splice(i, 1);
-    };
-  }
-
-  // Roving tabindex tab stop, computed from `selected` ALONE (no registry read
-  // during render → no loop). Per WAI-ARIA APG: when a radio is selected it owns
-  // the tab stop; when nothing is selected every radio is reachable by Tab
-  // (tabindex=0) and Arrow keys then select one. `selected` is the only reactive
-  // input, so this is render-safe.
-  function isTabStop(v: RadioValue, radioDisabled: boolean): boolean {
-    if (radioDisabled || disabled) return false;
-    if (selected === undefined) return true; // none selected → all are tab stops
-    return v === selected;
-  }
-
-  function moveTo(index: number) {
-    const enabled = registry.filter((r) => !r.disabled);
-    if (enabled.length === 0) return;
-    const target = enabled[(index + enabled.length) % enabled.length];
-    if (!target) return;
-    select(target.value);
-    target.el.focus();
-  }
-
-  function onKeydown(e: KeyboardEvent, current: RadioValue) {
-    if (disabled) return;
-    const enabled = registry.filter((r) => !r.disabled);
-    const idx = enabled.findIndex((r) => r.value === current);
-    if (idx === -1) return;
-    // RTL：水平方向键语义翻转（左右镜像）。读 getComputedStyle 仅在事件里，render 不依赖。
-    const rtl =
-      rootEl != null && getComputedStyle(rootEl).direction === 'rtl';
-    let key = e.key;
-    if (rtl && key === 'ArrowRight') key = 'ArrowLeft';
-    else if (rtl && key === 'ArrowLeft') key = 'ArrowRight';
-    switch (key) {
-      case 'ArrowDown':
-      case 'ArrowRight':
-        e.preventDefault();
-        moveTo(idx + 1);
-        break;
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        e.preventDefault();
-        moveTo(idx - 1);
-        break;
-      case 'Home':
-        e.preventDefault();
-        moveTo(0);
-        break;
-      case 'End':
-        e.preventDefault();
-        moveTo(enabled.length - 1);
-        break;
-      default:
-        break;
-    }
-  }
-
-  setRadioGroupContext({
-    name: groupName,
-    getSelected: () => selected,
-    getDisabled: () => disabled,
-    getSize: () => size,
-    getStatus: () => status,
-    getType: () => type,
-    select,
-    register,
-    onKeydown,
-    isTabStop,
-  });
-
-  const cls = $derived(
-    `cd-radio-group cd-radio-group--${direction} cd-radio-group--${type}`,
-  );
-</script>
-
-<div
-  class={cls}
-  bind:this={rootEl}
-  role="radiogroup"
-  aria-labelledby={ariaLabelledby}
-  aria-label={ariaLabelledby ? undefined : ariaLabel}
-  aria-invalid={status === 'error' ? 'true' : undefined}
->
-  {#if options}
-    {#each options as opt (opt.value)}
-      <Radio value={opt.value} disabled={opt.disabled ?? false} extra={opt.extra}>{opt.label}</Radio
-      >
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</div>
-
-<style>
-  .cd-radio-group {
-    display: inline-flex;
-    gap: var(--cd-spacing-4);
-  }
-  .cd-radio-group--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  .cd-radio-group--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-</style>

package/src/radio/RadioGroupKbdFixture.svelte

@@ -1,21 +0,0 @@
-<!--
-  仅供 RadioGroup.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  WAI-ARIA radiogroup：roving tabindex + 方向键导航即选中（真实焦点）。
-  defaultValue 选中一项，使其为单一 Tab 停靠点。前后各放按钮验证 Tab 进/出。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import RadioGroup from './RadioGroup.svelte';
-
-  const options = [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
-    { label: 'Cherry', value: 'cherry' },
-  ];
-</script>
-
-<LocaleProvider locale="en_US">
-  <button type="button" data-testid="before">before</button>
-  <RadioGroup {options} defaultValue="apple" ariaLabel="Fruit" />
-  <button type="button" data-testid="after">after</button>
-</LocaleProvider>

package/src/radio/context.ts

@@ -1,42 +0,0 @@
-import { getContext, setContext } from 'svelte';
-
-export type RadioValue = string | number | boolean;
-export type RadioSize = 'small' | 'default' | 'large';
-export type RadioStatus = 'default' | 'warning' | 'error';
-export type RadioType = 'default' | 'button' | 'card' | 'pureCard';
-
-export interface RadioRegistration {
-  value: RadioValue;
-  disabled: boolean;
-  /** focusable element to receive roving focus: native input (default) or role=radio container (button/card) */
-  el: HTMLElement;
-}
-
-export interface RadioGroupContext {
-  /** group name shared by all radios */
-  name: string;
-  getSelected: () => RadioValue | undefined;
-  getDisabled: () => boolean;
-  getSize: () => RadioSize;
-  /** group-level validation status; per-item non-default status overrides it */
-  getStatus: () => RadioStatus;
-  /** group-level render form (default/button/card/pureCard) */
-  getType: () => RadioType;
-  select: (v: RadioValue) => void;
-  /** register a radio's input element + meta for roving focus management */
-  register: (reg: RadioRegistration) => () => void;
-  /** keydown handler implementing roving tabindex / arrow navigation */
-  onKeydown: (e: KeyboardEvent, current: RadioValue) => void;
-  /** whether this radio should be the roving tab stop (tabindex=0) */
-  isTabStop: (v: RadioValue, disabled: boolean) => boolean;
-}
-
-const KEY = Symbol('cd-radio-group');
-
-export function setRadioGroupContext(ctx: RadioGroupContext): void {
-  setContext(KEY, ctx);
-}
-
-export function getRadioGroupContext(): RadioGroupContext | undefined {
-  return getContext<RadioGroupContext | undefined>(KEY);
-}

package/src/radio/index.ts

@@ -1,4 +0,0 @@
-export { default as Radio } from './Radio.svelte';
-export { default as RadioGroup } from './RadioGroup.svelte';
-export { meta as radioMeta } from './meta.js';
-export type { RadioValue, RadioSize, RadioGroupContext } from './context.js';

package/src/radio/meta.ts

@@ -1,68 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Radio',
-  category: 'input',
-  description: '单选框，通常置于 RadioGroup 中，遵循 WAI-ARIA radiogroup 模式（roving tabindex + 方向键）。',
-  props: [
-    { name: 'value', type: 'string | number | boolean', default: '—', desc: '选项值（必填）' },
-    { name: 'checked', type: 'boolean', default: 'undefined', desc: '独立使用时受控选中' },
-    { name: 'defaultChecked', type: 'boolean', default: 'false' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    {
-      name: 'status',
-      type: "'default'|'warning'|'error'",
-      default: 'default',
-      desc: '校验态，影响边框色；继承 Group，非 default 单项可覆盖',
-    },
-    { name: 'type', type: "'default'|'button'|'card'|'pureCard'", default: '继承 Group 或 default', desc: 'button/card/pureCard 用 role=radio 容器 + aria-checked' },
-    { name: 'name', type: 'string', default: 'undefined' },
-    { name: 'extra', type: 'string', default: 'undefined', desc: '辅助说明，aria-describedby 关联' },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
-    { name: 'onChange', type: '(checked: boolean) => void', default: 'undefined' },
-  ],
-  group: {
-    name: 'RadioGroup',
-    props: [
-      { name: 'value', type: 'string | number | boolean', default: 'undefined', desc: '受控选中值' },
-      { name: 'defaultValue', type: 'string | number | boolean', default: 'undefined' },
-      { name: 'name', type: 'string', default: 'useId()' },
-      {
-        name: 'options',
-        type: 'Array<{label,value,disabled?,extra?}>',
-        default: 'undefined',
-      },
-      { name: 'disabled', type: 'boolean', default: 'false' },
-      { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-      {
-        name: 'status',
-        type: "'default'|'warning'|'error'",
-        default: 'default',
-        desc: '整组校验态，经 context 透传给组内 Radio；error 时根元素 aria-invalid',
-      },
-      { name: 'type', type: "'default'|'button'|'card'|'pureCard'", default: 'default', desc: '整组形态，透传子项；非 default 用 role=radio + aria-checked' },
-      { name: 'direction', type: "'horizontal'|'vertical'", default: 'horizontal' },
-      { name: 'onChange', type: '(v: string|number|boolean) => void', default: 'undefined' },
-      { name: 'children', type: 'Snippet', default: 'undefined' },
-      { name: 'ariaLabel', type: 'string', default: 'undefined' },
-      { name: 'ariaLabelledby', type: 'string', default: 'undefined', desc: '关联组可见标题 id（优先于 ariaLabel）' },
-    ],
-  },
-  a11y: {
-    role: 'radiogroup / radio',
-    keyboard: ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Space'],
-    notes: [
-      'div role=radiogroup 包裹',
-      'roving tabindex：仅选中项（或首个可用项）tabindex=0',
-      '方向键在可用项间循环移动并选中、聚焦，跳过 disabled',
-      'Home/End 跳首/末可用项',
-      'RTL（dir=rtl）下 ArrowLeft/ArrowRight 语义镜像翻转',
-      'button/card/pureCard 型用容器 role=radio + aria-checked（非原生 input），Space/Enter 选中',
-      'extra 经 aria-describedby 关联',
-    ],
-  },
-  tokens: ['--cd-radio-*', '--cd-focus-ring', '--cd-motion-*', '--cd-spacing-*', '--cd-radius-full'],
-} as const;

package/src/rating/Rating.a11y.test.ts

@@ -1,41 +0,0 @@
-// Rating a11y：APG slider 模式（role=slider + aria-valuenow/min/max/valuetext）。
-// 可访问名走 i18n（Rating.ariaLabel）；error 态 aria-invalid。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Rating from './Rating.svelte';
-
-describe('Rating a11y', () => {
-  it('默认渲染：role=slider + aria-valuenow/min/max，locale 可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(Rating, { props: { defaultValue: 3 } });
-    const slider = container.querySelector('[role="slider"]');
-    expect(slider).not.toBeNull();
-    expect(slider?.getAttribute('aria-valuenow')).toBe('3');
-    expect(slider?.getAttribute('aria-valuemin')).toBe('0');
-    expect(slider?.getAttribute('aria-valuemax')).toBe('5');
-    // 可访问名来自 en_US locale（Rating.ariaLabel），非 key 原样。
-    const label = slider?.getAttribute('aria-label');
-    expect(label).toBeTruthy();
-    expect(label).not.toBe('Rating.ariaLabel');
-    expect(slider?.getAttribute('aria-valuetext')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-
-  it('自定义 ariaLabel + error：aria-label / aria-invalid', async () => {
-    const { container } = renderWithLocale(Rating, {
-      props: { defaultValue: 2, ariaLabel: 'Difficulty', status: 'error' },
-    });
-    const slider = container.querySelector('[role="slider"]');
-    expect(slider?.getAttribute('aria-label')).toBe('Difficulty');
-    expect(slider?.getAttribute('aria-invalid')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-
-  it('readonly：aria-readonly=true，无 axe violations', async () => {
-    const { container } = renderWithLocale(Rating, {
-      props: { defaultValue: 4, readonly: true },
-    });
-    const slider = container.querySelector('[role="slider"]');
-    expect(slider?.getAttribute('aria-readonly')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/rating/Rating.kbd.test.ts

@@ -1,48 +0,0 @@
-// Rating 键盘 e2e（browser project / 真实 chromium）。
-// Rating 根元素是 role=slider（APG slider 模式，tabindex=0），焦点落在根本身：
-// ←↓ 减、→↑ 增（minStep=1），数字键 1–9 直接定位，Home→0 / End→count，
-// aria-valuenow 真实变化。jsdom 焦点/数字键合成不可靠，故在真浏览器里测。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import RatingKbdFixture from './RatingKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Rating 键盘 e2e（role=slider 方向键 + 数字键）', () => {
-  it('Tab 聚焦 + 方向键调分 + 数字键定位 + Home/End', async () => {
-    const { baseElement } = renderKbdFixture(RatingKbdFixture);
-
-    const rating = baseElement.querySelector('[role="slider"]') as HTMLElement;
-    expect(rating).not.toBeNull();
-    expect(rating.getAttribute('aria-valuenow')).toBe('3');
-
-    // Tab 从 before 进入，焦点落在 slider 根。
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(rating)).toHaveFocus();
-
-    // → 增（4），← 减（3）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '4');
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '3');
-
-    // 数字键 5 直接定位到 5 分。
-    await userEvent.keyboard('5');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '5');
-    // 数字键 2 定位到 2 分。
-    await userEvent.keyboard('2');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '2');
-
-    // Home → 0，End → count(5)。
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '0');
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(rating)).toHaveAttribute('aria-valuenow', '5');
-  });
-});