@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/breadcrumb/meta.ts

@@ -1,128 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Breadcrumb',
-  category: 'navigation',
-  description:
-    '面包屑导航，展示当前页面在层级结构中的位置。支持数据驱动 routes 与声明式 Item 两种用法。',
-  props: [
-    {
-      name: 'routes',
-      type: 'BreadcrumbRoute[]',
-      default: '[]',
-      desc: '数据驱动的路由项，最后一项为当前页（aria-current=page）',
-    },
-    { name: 'separator', type: 'string', default: "'/'", desc: '分隔符文本' },
-    { name: 'maxItemCount', type: 'number', default: '0', desc: '超出时中间折叠（0=不折叠）' },
-    {
-      name: 'showTooltip',
-      type: 'boolean',
-      default: 'false',
-      desc: '项文本超出 --cd-breadcrumb-item-max-width 被截断时，hover 用 Tooltip 展示完整 label',
-    },
-    {
-      name: 'moreType',
-      type: "'tooltip'|'popover'",
-      default: 'undefined',
-      desc: '折叠 … 的浮层类型：tooltip 悬浮列出被折叠项文本；popover 点击展开可点击跳转的折叠项列表。不设时点击 … 直接展开全部（向后兼容）',
-    },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    {
-      name: 'compact',
-      type: 'boolean',
-      default: 'true',
-      desc: '紧凑模式；false 时根元素附加 cd-breadcrumb--loose 类（更大字号/间距）',
-    },
-    {
-      name: 'autoCollapse',
-      type: 'boolean',
-      default: 'true',
-      desc: '超出 maxItemCount 时是否自动折叠；false 时始终展示全部项',
-    },
-    {
-      name: 'activeIndex',
-      type: 'number',
-      default: 'undefined',
-      desc: '受控选中项索引（配合 onClick 使用，令对应项高亮）',
-    },
-    {
-      name: 'renderItem',
-      type: '(route: BreadcrumbRoute, index: number, isLast: boolean) => Snippet',
-      default: 'undefined',
-      desc: '自定义路由项渲染（routes 模式）；传入时替换默认的链接/文本/当前页渲染逻辑',
-    },
-    {
-      name: 'renderMore',
-      type: '(restItems: CollapsedRoute[]) => Snippet',
-      default: 'undefined',
-      desc: '自定义折叠 … 区域渲染；传入时接管折叠展示（替代 moreType 内置浮层），参数为被折叠路由列表',
-    },
-    { name: 'class', type: 'string', default: "''" },
-    {
-      name: 'children',
-      type: 'Snippet',
-      default: 'undefined',
-      desc: '声明式 <Breadcrumb.Item> 列表；项间分隔符按 separator 纯 CSS 自动插入，最后一项后无分隔符',
-    },
-    {
-      name: 'onClick',
-      type: '(route: BreadcrumbRoute, index: number) => void',
-      default: 'undefined',
-    },
-  ],
-  subComponents: [
-    {
-      name: 'BreadcrumbItem',
-      usage: '<Breadcrumb.Item> 或 <BreadcrumbItem>，置于 <Breadcrumb> 的 children 内',
-      desc: '声明式面包屑项；项间分隔符由父级纯 CSS 自动插入，最后一项自动渲染为当前页（不可点 + aria-current=page）',
-      props: [
-        { name: 'href', type: 'string', default: 'undefined', desc: '链接地址；最后一项忽略 href' },
-        {
-          name: 'separator',
-          type: 'string',
-          default: 'undefined',
-          desc: '覆盖父级 separator，仅对本项末尾分隔符生效（通过内联 CSS 变量实现）',
-        },
-        {
-          name: 'noLink',
-          type: 'boolean',
-          default: 'false',
-          desc: '禁止链接/按钮行为，渲染为普通 span（不可点击）；忽略 href 和 onClick；末项始终无链接',
-        },
-        {
-          name: 'icon',
-          type: 'Snippet',
-          default: 'undefined',
-          desc: '项前置图标 snippet，渲染在 children 之前',
-        },
-        { name: 'class', type: 'string', default: "''" },
-        { name: 'children', type: 'Snippet', default: 'undefined' },
-        {
-          name: 'onClick',
-          type: '(e: MouseEvent) => void',
-          default: 'undefined',
-          desc: '点击/键盘激活回调；最后一项及 noLink=true 时不触发',
-        },
-      ],
-    },
-  ],
-  a11y: {
-    role: 'navigation',
-    keyboard: ['Enter', 'Space'],
-    notes: [
-      'nav[aria-label] 包裹 ol 有序列表',
-      '最后一项 aria-current=page，不可点击',
-      '无 href 的中间项用 role=link + tabindex=0 + 键盘可激活',
-      '分隔符 aria-hidden=true',
-    ],
-  },
-  tokens: [
-    '--cd-breadcrumb-*',
-    '--cd-breadcrumb-item-max-width',
-    '--cd-focus-ring',
-    '--cd-font-size-*',
-    '--cd-radius-1',
-  ],
-} as const;

package/src/breadcrumb/types.ts

@@ -1,4 +0,0 @@
-export interface BreadcrumbRoute {
-  label: string;
-  href?: string;
-}

package/src/button/Button.a11y.test.ts

@@ -1,54 +0,0 @@
-// Button a11y 试点：纯展示组件（无 useLocale）。验证 axe 0 violations + 基础 role/aria。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Button from './Button.svelte';
-
-describe('Button a11y', () => {
-  it('按钮：原生 <button>，type=button，无 axe violations', async () => {
-    // 无默认插槽文字时用 ariaLabel 提供可访问名（否则 axe button-name 报错）。
-    const { container } = renderWithLocale(Button, {
-      props: { type: 'primary', ariaLabel: 'Confirm' },
-    });
-    const btn = container.querySelector('button');
-    expect(btn).not.toBeNull();
-    expect(btn?.getAttribute('type')).toBe('button');
-    await expectNoAxeViolations(container);
-  });
-
-  it('icon-only 按钮：用 ariaLabel 提供可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(Button, {
-      props: { ariaLabel: 'Close panel' },
-    });
-    const btn = container.querySelector('button');
-    expect(btn?.getAttribute('aria-label')).toBe('Close panel');
-    await expectNoAxeViolations(container);
-  });
-
-  it('disabled 按钮：原生 disabled 属性', async () => {
-    const { container } = renderWithLocale(Button, {
-      props: { ariaLabel: 'Submit', disabled: true },
-    });
-    const btn = container.querySelector('button');
-    expect(btn?.hasAttribute('disabled')).toBe(true);
-    await expectNoAxeViolations(container);
-  });
-
-  it('loading 按钮：aria-busy=true', async () => {
-    const { container } = renderWithLocale(Button, {
-      props: { ariaLabel: 'Saving', loading: true },
-    });
-    const btn = container.querySelector('button');
-    expect(btn?.getAttribute('aria-busy')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-
-  it('链接按钮（href）：role=button 的 <a>，无 axe violations', async () => {
-    const { container } = renderWithLocale(Button, {
-      props: { href: 'https://example.com', ariaLabel: 'Open docs' },
-    });
-    const link = container.querySelector('a');
-    expect(link?.getAttribute('role')).toBe('button');
-    expect(link?.getAttribute('href')).toBe('https://example.com');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/button/Button.svelte

@@ -1,176 +0,0 @@
-<!--
-  Button — see specs/components/basic/Button.spec.md
-  Token-driven, a11y-correct (native <button>/<a>), no hardcoded values.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-  type ButtonTheme = 'solid' | 'borderless' | 'light' | 'outline';
-  type ButtonSize = 'small' | 'default' | 'large';
-
-  interface Props {
-    type?: ButtonType;
-    theme?: ButtonTheme;
-    size?: ButtonSize;
-    block?: boolean;
-    disabled?: boolean;
-    loading?: boolean;
-    htmlType?: 'button' | 'submit' | 'reset';
-    href?: string;
-    /** required for icon-only buttons */
-    ariaLabel?: string;
-    icon?: Snippet;
-    /** 图标相对文字位置。spec §4 L27 */
-    iconPosition?: 'left' | 'right';
-    children?: Snippet;
-    onclick?: (e: MouseEvent) => void;
-  }
-
-  let {
-    type = 'secondary',
-    theme = 'light',
-    size = 'default',
-    block = false,
-    disabled = false,
-    loading = false,
-    htmlType = 'button',
-    href,
-    ariaLabel,
-    icon,
-    iconPosition = 'left',
-    children,
-    onclick,
-  }: Props = $props();
-
-  const cls = $derived(
-    [
-      'cd-button',
-      `cd-button--${type}`,
-      `cd-button--${theme}`,
-      `cd-button--${size}`,
-      block && 'cd-button--block',
-      loading && 'cd-button--loading',
-      icon && iconPosition === 'right' && 'cd-button--icon-right',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  function handleClick(e: MouseEvent) {
-    if (disabled || loading) {
-      e.preventDefault();
-      return;
-    }
-    onclick?.(e);
-  }
-</script>
-
-{#if href}
-  <a
-    class={cls}
-    href={disabled ? undefined : href}
-    role="button"
-    aria-disabled={disabled || undefined}
-    aria-busy={loading || undefined}
-    aria-label={ariaLabel}
-    onclick={handleClick}
-  >
-    {#if icon}<span class="cd-button__icon">{@render icon()}</span>{/if}
-    {@render children?.()}
-  </a>
-{:else}
-  <button
-    class={cls}
-    type={htmlType}
-    {disabled}
-    aria-busy={loading || undefined}
-    aria-label={ariaLabel}
-    onclick={handleClick}
-  >
-    {#if icon}<span class="cd-button__icon">{@render icon()}</span>{/if}
-    {@render children?.()}
-  </button>
-{/if}
-
-<style>
-  .cd-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cd-spacing-2);
-    height: var(--cd-button-height-default);
-    padding-inline: var(--cd-button-padding-x);
-    border: 1px solid transparent;
-    border-radius: var(--cd-button-radius);
-    font-size: var(--cd-button-font-size);
-    font-weight: var(--cd-font-weight-medium);
-    line-height: 1;
-    cursor: pointer;
-    transition:
-      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-button:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-button--small {
-    height: var(--cd-button-height-small);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-button--large {
-    height: var(--cd-button-height-large);
-    font-size: var(--cd-font-size-3);
-  }
-  .cd-button--block {
-    width: 100%;
-  }
-  .cd-button--loading {
-    cursor: default;
-    opacity: 0.75;
-  }
-  .cd-button:disabled,
-  .cd-button[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  /* primary / solid */
-  .cd-button--primary {
-    background: var(--cd-button-color-bg-primary);
-    color: var(--cd-button-color-text-primary);
-  }
-  .cd-button--secondary {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-0);
-  }
-  .cd-button--tertiary {
-    background: transparent;
-    color: var(--cd-color-text-1);
-  }
-  .cd-button--warning {
-    background: var(--cd-color-warning);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-button--danger {
-    background: var(--cd-color-danger);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-button--outline {
-    background: transparent;
-    border-color: var(--cd-color-border);
-    color: var(--cd-color-text-0);
-  }
-  .cd-button__icon {
-    display: inline-flex;
-  }
-  /* iconPosition=right: 纯 CSS flex order, DOM 顺序不变 (spec §4 L27) */
-  .cd-button--icon-right .cd-button__icon {
-    order: 1;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-button {
-      transition: none;
-    }
-  }
-</style>

package/src/button/index.ts

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

package/src/button/meta.ts

@@ -1,28 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Button',
-  category: 'basic',
-  description: '触发即时操作的按钮，最基础的交互原子。',
-  props: [
-    { name: 'type', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: 'secondary' },
-    { name: 'theme', type: "'solid'|'borderless'|'light'|'outline'", default: 'light' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'block', type: 'boolean', default: 'false' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'loading', type: 'boolean', default: 'false' },
-    { name: 'iconPosition', type: "'left'|'right'", default: 'left', desc: '图标相对文字位置' },
-    { name: 'href', type: 'string', default: 'undefined', desc: '提供则渲染为链接' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '仅图标按钮必填' },
-  ],
-  events: [{ name: 'onclick', payload: 'MouseEvent', desc: 'disabled/loading 时不触发' }],
-  slots: [
-    { name: 'children', desc: '按钮文本' },
-    { name: 'icon', desc: '图标' },
-  ],
-  a11y: { role: 'button', keyboard: ['Enter', 'Space'] },
-  tokens: ['--cd-button-*'],
-  examples: [{ title: '基础', code: '<Button type="primary">确定</Button>' }],
-} as const;

package/src/calendar/Calendar.a11y.test.ts

@@ -1,51 +0,0 @@
-// Calendar a11y：month 模式渲染 role=grid + role=row + columnheader + gridcell；
-// 工具栏 prev/next 按钮 locale 可访问名；popup 模式 trigger aria-haspopup/aria-expanded。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Calendar from './Calendar.svelte';
-
-const FIXED = new Date(2024, 5, 15); // 固定锚点，避免随当天漂移。
-
-describe('Calendar a11y', () => {
-  it('month 模式：role=grid + columnheader + gridcell，prev/next locale 可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(Calendar, {
-      props: { mode: 'month', defaultValue: FIXED, ariaLabel: 'Event calendar' },
-    });
-    const grid = container.querySelector('[role="grid"]');
-    expect(grid).not.toBeNull();
-    expect(grid?.getAttribute('aria-label')).toBeTruthy();
-    expect(container.querySelectorAll('[role="row"]').length).toBeGreaterThan(0);
-    expect(container.querySelectorAll('[role="columnheader"]').length).toBe(7);
-    expect(container.querySelectorAll('[role="gridcell"]').length).toBeGreaterThan(0);
-
-    // 工具栏 prev/next 按钮可访问名来自 en_US locale（两按钮共用 .cd-calendar__nav）。
-    const navs = container.querySelectorAll('.cd-calendar__nav');
-    expect(navs.length).toBe(2);
-    const prevLabel = navs[0]?.getAttribute('aria-label');
-    const nextLabel = navs[1]?.getAttribute('aria-label');
-    expect(prevLabel).toBeTruthy();
-    expect(prevLabel).not.toBe('Calendar.prev');
-    expect(nextLabel).toBeTruthy();
-    expect(nextLabel).not.toBe('Calendar.next');
-    await expectNoAxeViolations(container);
-  });
-
-  it('选中态：gridcell aria-selected，无 axe violations', async () => {
-    const { container } = renderWithLocale(Calendar, {
-      props: { mode: 'month', defaultValue: FIXED, defaultSelectedDate: FIXED, ariaLabel: 'Calendar' },
-    });
-    const selected = container.querySelector('[role="gridcell"][aria-selected="true"]');
-    expect(selected).not.toBeNull();
-    await expectNoAxeViolations(container);
-  });
-
-  it('popup 模式：trigger 按钮 aria-haspopup=dialog / aria-expanded=false，无 axe violations', async () => {
-    const { container } = renderWithLocale(Calendar, {
-      props: { mode: 'month', defaultValue: FIXED, popup: true, ariaLabel: 'Date picker calendar' },
-    });
-    const trigger = container.querySelector('[aria-haspopup="dialog"]');
-    expect(trigger).not.toBeNull();
-    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/calendar/Calendar.kbd.test.ts

@@ -1,59 +0,0 @@
-// Calendar 键盘 e2e（browser project / 真实 chromium）。
-// Calendar 月视图网格用真实 roving 焦点（≠ DatePicker 的 aria-activedescendant）：
-// 活动格 tabindex=0、其余 -1，方向键命令式把 DOM 焦点移到目标格（跨月翻页落焦）。
-// 故断言真实 .toHaveFocus() + 活动格日号变化（先读源码 focusActiveCell/onGridKeydown 确认）。
-//   1. 聚焦活动格（初始 = defaultSelectedDate 2024-03-15）。
-//   2. ArrowRight/ArrowDown/Home 真实移动焦点到相邻格，活动格日号随之变化。
-//   3. PageDown 切到下一月（标题变化），焦点落到新网格的活动格。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import CalendarKbdFixture from './CalendarKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-// 当前活动格（tabindex=0 + --active）的日号文本。
-function activeDay(grid: HTMLElement): string {
-  const cell = grid.querySelector<HTMLElement>('.cd-calendar__cell--active');
-  return cell?.querySelector('.cd-calendar__date')?.textContent?.trim() ?? '';
-}
-
-describe('Calendar 键盘 e2e（月网格 roving 真实焦点）', () => {
-  it('方向键真实移动焦点到日期格 + Home + PageDown 切月', async () => {
-    const { baseElement } = renderKbdFixture(CalendarKbdFixture);
-
-    const grid = baseElement.querySelector('[role="grid"]') as HTMLElement;
-    expect(grid).not.toBeNull();
-    const title = baseElement.querySelector('.cd-calendar__title') as HTMLElement;
-    expect(title.textContent).toContain('March');
-
-    // 初始活动格 = 选中日 2024-03-15。
-    expect(activeDay(grid)).toBe('15');
-    const activeCell = grid.querySelector('.cd-calendar__cell--active') as HTMLElement;
-    activeCell.focus();
-    await expect.element(loc(activeCell)).toHaveFocus();
-
-    // 1. ArrowRight → 16，真实焦点跟随到该格（roving）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.poll(() => activeDay(grid)).toBe('16');
-    expect(grid.querySelector('.cd-calendar__cell--active')).toBe(document.activeElement);
-
-    // 2. ArrowDown → +7（23）。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.poll(() => activeDay(grid)).toBe('23');
-    expect(grid.querySelector('.cd-calendar__cell--active')).toBe(document.activeElement);
-
-    // 3. Home → 本周首日（3/23 是周六，周日起 → 3/17）。
-    await userEvent.keyboard('{Home}');
-    await expect.poll(() => activeDay(grid)).toBe('17');
-
-    // 4. PageDown → 切到下一月（4 月），标题变化，焦点落到新网格活动格。
-    await userEvent.keyboard('{PageDown}');
-    await expect.poll(() => title.textContent).toContain('April');
-    // 切月后 DOM 焦点仍落在活动格（4/17）。
-    await expect.poll(() => activeDay(grid)).toBe('17');
-    expect(grid.querySelector('.cd-calendar__cell--active')).toBe(document.activeElement);
-  });
-});