@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/carousel/CarouselA11yFixture.svelte

@@ -1,25 +0,0 @@
-<!--
-  仅供 Carousel.a11y.test.ts 使用的测试夹具：传入真实 slides Snippet[]。
-  count(3) > perView(1) 时渲染箭头/指示器；autoplay 时渲染播放/暂停按钮（WCAG 2.2.2）。
--->
-<script lang="ts">
-  import { Carousel } from './index.js';
-
-  interface Props {
-    autoplay?: boolean;
-    ariaLabel?: string;
-  }
-  let { autoplay = false, ariaLabel = undefined }: Props = $props();
-</script>
-
-{#snippet s1()}
-  <div>Slide one</div>
-{/snippet}
-{#snippet s2()}
-  <div>Slide two</div>
-{/snippet}
-{#snippet s3()}
-  <div>Slide three</div>
-{/snippet}
-
-<Carousel slides={[s1, s2, s3]} {autoplay} {...ariaLabel !== undefined ? { ariaLabel } : {}} />

package/src/carousel/CarouselKbdFixture.svelte

@@ -1,24 +0,0 @@
-<!--
-  仅供 Carousel.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  viewport（role=group, aria-roledescription=slides）count>perView 时 tabindex=0 可聚焦，
-  承接 ←/→/Home/End 切换 active slide。非 active slide 设 inert + aria-hidden。
-  autoplay 关闭、loop 关闭，使 active slide 变化可确定断言（首/末有界）。
-  每张 slide 含 data-slide 标记便于定位。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Carousel from './Carousel.svelte';
-</script>
-
-{#snippet s0()}<div data-slide="0">Slide 0</div>{/snippet}
-{#snippet s1()}<div data-slide="1">Slide 1</div>{/snippet}
-{#snippet s2()}<div data-slide="2">Slide 2</div>{/snippet}
-
-<LocaleProvider locale="en_US">
-  <Carousel
-    slides={[s0, s1, s2]}
-    autoplay={false}
-    loop={false}
-    ariaLabel="Demo carousel"
-  />
-</LocaleProvider>

package/src/carousel/index.ts

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

package/src/carousel/meta.ts

@@ -1,74 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Carousel — see specs/components/show/Carousel.spec.md
- */
-export const meta = {
-  name: 'Carousel',
-  category: 'show',
-  description:
-    '走马灯：单/多 slide 同屏展示（slidesToShow/slidesToScroll），支持 slide/fade 动画、autoplay（含 hoverToPause）、loop 循环、dot/line/columnar 指示器、prev/next 箭头、vertical 纵向方向、pointer 拖拽手势与受控 value。slide 通过 Snippet[] 传入。',
-  exports: ['Carousel'],
-  props: [
-    { name: 'slides', type: 'Snippet[]', default: '[]', desc: '每项一张幻灯片的 Snippet 数组' },
-    { name: 'value', type: 'number', default: 'undefined', desc: '受控当前索引（不回写）' },
-    { name: 'defaultActiveIndex', type: 'number', default: '0', desc: '非受控初始索引' },
-    { name: 'autoplay', type: 'boolean', default: 'false', desc: '自动播放' },
-    { name: 'interval', type: 'number', default: '3000', desc: '自动播放间隔（ms）' },
-    { name: 'loop', type: 'boolean', default: 'true', desc: '循环（取模）；false 时 clamp 边界' },
-    { name: 'animation', type: "'slide'|'fade'", default: "'slide'", desc: '切换动画' },
-    { name: 'speed', type: 'number', default: '300', desc: '切换动画时长（ms）' },
-    { name: 'slidesToShow', type: 'number', default: '1', desc: '一屏同时展示的 slide 数（>1 强制 slide 轨道）' },
-    { name: 'slidesToScroll', type: 'number', default: '1', desc: '每次切换滚动的 slide 数（步长）' },
-    { name: 'vertical', type: 'boolean', default: 'false', desc: '纵向滚动方向（指示器移至右侧、箭头改上/下）' },
-    { name: 'draggable', type: 'boolean', default: 'true', desc: 'pointer 拖拽/滑动切换（拖过半张进位，否则回弹）' },
-    { name: 'showIndicator', type: 'boolean', default: 'true', desc: '显示底部指示器（按页数渲染）' },
-    { name: 'indicatorType', type: "'dot'|'line'|'columnar'", default: "'dot'", desc: '指示器样式：dot 圆点 / line 横线条 / columnar 竖栏（激活态加长高亮，纯 CSS，与 vertical 协调）' },
-    { name: 'showArrow', type: 'boolean', default: 'true', desc: '显示左右箭头' },
-    { name: 'hoverToPause', type: 'boolean', default: 'true', desc: '悬停暂停自动播放' },
-    { name: 'height', type: 'number|string', default: '240', desc: '容器高度（数字按 px）' },
-    { name: 'ariaLabel', type: 'string', default: 'i18n Carousel.ariaLabel', desc: '走马灯整体可访问名（root role=region）' },
-    { name: 'onChange', type: '(index: number) => void', default: 'undefined', desc: '索引变更回调' },
-    { name: 'onPlayStateChange', type: '(playing: boolean) => void', default: 'undefined', desc: '播放/暂停按钮切换回调' },
-    { name: 'class', type: 'string', default: "''", desc: '根类名透传' },
-  ],
-  events: [
-    { name: 'onChange', desc: '当前索引变更（index）' },
-    { name: 'onPlayStateChange', desc: 'autoplay 播放/暂停切换（playing）' },
-  ],
-  slots: [{ name: 'slides', desc: '幻灯片 Snippet 数组，每项一张' }],
-  a11y: {
-    role: 'region',
-    focusable: true,
-    notes: [
-      '根 role=region aria-roledescription="carousel" aria-label（i18n / ariaLabel）',
-      'slide 区 aria-live=polite；autoplay 实际播放中降级为 off',
-      '视口 role=group aria-roledescription="slides"，tabindex=0 承接键盘导航与拖拽手势',
-      '键盘：←/→ 切换、Home/End 跳首末（vertical 增 ↑/↓）；RTL 下 ←/→ 镜像',
-      '每张 role=group aria-roledescription="slide" aria-label「第 N 张」，非可见窗口内的张 aria-hidden + inert（不可 Tab 进入）',
-      'autoplay 提供可见播放/暂停按钮（WCAG 2.2.2，aria-pressed），hover/键盘 focus 进入容器自动暂停',
-      '指示器按钮 aria-label「第 N 张」；箭头按钮 aria-label 上一张/下一张',
-      'reduced-motion 下切换过渡时长归零且 autoplay 不自启',
-    ],
-  },
-  tokens: [
-    '--cd-carousel-radius',
-    '--cd-carousel-indicator-color',
-    '--cd-carousel-indicator-color-active',
-    '--cd-carousel-indicator-gap',
-    '--cd-carousel-arrow-bg',
-    '--cd-carousel-arrow-color',
-    '--cd-carousel-arrow-size',
-    '--cd-radius-full',
-    '--cd-focus-ring',
-    '--cd-motion-duration-fast',
-    '--cd-motion-ease-standard',
-    '--cd-spacing-2',
-  ],
-  examples: [
-    {
-      title: '基础',
-      code:
-        '{#snippet s1()}<img src="/1.jpg" alt="" />{/snippet}\n{#snippet s2()}<img src="/2.jpg" alt="" />{/snippet}\n<Carousel slides={[s1, s2]} autoplay />',
-    },
-  ],
-} as const;

package/src/cascader/Cascader.a11y.test.ts

@@ -1,59 +0,0 @@
-// Cascader a11y：combobox 触发器 + 每列 listbox/option 浮层（use:floating portal 到 body）。
-// 只断言静态 ARIA + axe 0 violations，不测真实键盘/焦点（jsdom 限制）。
-// 打开态面板 portal 到 document.body，故扫描 document.body。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Cascader from './Cascader.svelte';
-
-const treeData = [
-  {
-    label: 'Zhejiang',
-    value: 'zj',
-    children: [
-      { label: 'Hangzhou', value: 'hz', children: [{ label: 'West Lake', value: 'xh' }] },
-    ],
-  },
-  {
-    label: 'Jiangsu',
-    value: 'js',
-    children: [{ label: 'Nanjing', value: 'nj' }],
-  },
-];
-
-describe('Cascader a11y', () => {
-  it('关闭态：触发器 role=combobox / aria-expanded=false，无 axe violations', async () => {
-    const { container } = renderWithLocale(Cascader, {
-      props: { treeData, ariaLabel: 'Region', placeholder: 'Select region' },
-    });
-    const combobox = container.querySelector('[role="combobox"]');
-    expect(combobox).not.toBeNull();
-    expect(combobox?.getAttribute('aria-expanded')).toBe('false');
-    expect(combobox?.getAttribute('aria-haspopup')).toBe('listbox');
-    expect(combobox?.getAttribute('aria-label')).toBe('Region');
-    await expectNoAxeViolations(container);
-  });
-
-  // 每列 listbox 经 locale Cascader.columnLabel 获可访问名（「第 N 级选项」）。
-  it('打开态：面板列 listbox + option 渲染（portal 到 body），无 axe violations', async () => {
-    renderWithLocale(Cascader, {
-      props: { treeData, defaultOpen: true, ariaLabel: 'Region' },
-    });
-    const listbox = document.querySelector('[role="listbox"]');
-    expect(listbox).not.toBeNull();
-    expect(listbox?.getAttribute('aria-label')).toBeTruthy();
-    const optionEls = document.querySelectorAll('[role="option"]');
-    expect(optionEls.length).toBeGreaterThan(0);
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('已选路径：触发器 aria-expanded 切换，选中 option 标记 aria-selected', async () => {
-    renderWithLocale(Cascader, {
-      props: { treeData, defaultOpen: true, defaultValue: ['zj', 'hz', 'xh'], ariaLabel: 'Region' },
-    });
-    const combobox = document.querySelector('[role="combobox"]');
-    expect(combobox?.getAttribute('aria-expanded')).toBe('true');
-    const selected = document.querySelector('[role="option"][aria-selected="true"]');
-    expect(selected).not.toBeNull();
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/cascader/Cascader.kbd.test.ts

@@ -1,56 +0,0 @@
-// Cascader 键盘 e2e（browser project / 真实 chromium），浮层列内方向键 roving。
-// Cascader 高亮走 aria-activedescendant 模型：焦点留在 role=combobox 触发器上
-// （options tabindex=-1，从不真实聚焦），列内高亮由触发器 aria-activedescendant
-// 指向的 option id 表达。故断言 activedescendant 指向的 option 文本变化，而非 toHaveFocus。
-// 浮层经 use:floating portal 到 document.body —— 在 document 范围查列 listbox。
-//   1. 打开后首次 ↓ 进首列首项；再 ↓ 移列内下一项；↑ 回上一项。
-//   2. Home/End 跳列内首/末项。
-import { describe, it, expect } from 'vitest';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import CascaderKbdFixture from './CascaderKbdFixture.svelte';
-
-// 读触发器 aria-activedescendant 指向的 option，断言其 label（剥离展开箭头 ›）。
-function activeOptionText(combobox: HTMLElement): string | null {
-  const id = combobox.getAttribute('aria-activedescendant');
-  if (!id) return null;
-  const el = document.getElementById(id);
-  const label = el?.querySelector('.cd-cascader__option-label');
-  return label?.textContent?.trim() ?? null;
-}
-
-describe('Cascader 键盘 e2e（aria-activedescendant 列内 roving）', () => {
-  it('打开后 ↑↓ 列内移高亮 + Home/End 列内首末', async () => {
-    renderKbdFixture(CascaderKbdFixture);
-
-    const combobox = document.querySelector('[role="combobox"]') as HTMLElement;
-    expect(combobox).not.toBeNull();
-
-    // 点击触发器打开浮层（焦点留在 combobox）。
-    await userEvent.click(combobox);
-    const listbox = document.querySelector('.cd-cascader__column[role="listbox"]') as HTMLElement;
-    expect(listbox).not.toBeNull();
-    const options = Array.from(
-      listbox.querySelectorAll<HTMLElement>('[role="option"]'),
-    );
-    expect(options.length).toBe(3);
-    expect(options.every((o) => o.tabIndex === -1)).toBe(true);
-
-    // 1. 首次 ↓ 进首列首项（Zhejiang）。
-    await userEvent.keyboard('{ArrowDown}');
-    expect(activeOptionText(combobox)).toBe('Zhejiang');
-
-    // 再 ↓ 列内移到第二项（Jiangsu）。
-    await userEvent.keyboard('{ArrowDown}');
-    expect(activeOptionText(combobox)).toBe('Jiangsu');
-
-    // ↑ 回到第一项（Zhejiang）。
-    await userEvent.keyboard('{ArrowUp}');
-    expect(activeOptionText(combobox)).toBe('Zhejiang');
-
-    // 2. End 跳列内末项（Fujian）；Home 回列内首项（Zhejiang）。
-    await userEvent.keyboard('{End}');
-    expect(activeOptionText(combobox)).toBe('Fujian');
-    await userEvent.keyboard('{Home}');
-    expect(activeOptionText(combobox)).toBe('Zhejiang');
-  });
-});