@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/drawer/meta.ts

@@ -1,127 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Drawer — see specs/components/feedback/Drawer.spec.md
- */
-export const meta = {
-  name: 'Drawer',
-  category: 'feedback',
-  description:
-    '抽屉浮层：四方向（left/right/top/bottom）贴边滑入面板，复用 Modal 浮层基建——portal 到 body（或 getContainer）脱离父层叠上下文，role=dialog aria-modal；useFocusTrap 焦点捕获与归还、useDismiss Esc 关闭（closeOnEsc）、mask 时 useScrollLock 锁背景滚动；mask/maskClosable 遮罩点击关闭、closable 右上角关闭按钮；size(small/default/large) 预设宽高，width/height 优先覆盖；头/体/尾结构。滑入过渡为 CSS transform/opacity（token 时长缓动，reduced-motion 退化）；destroyOnClose 关闭即卸载内容（重开重建），出场过渡结束后 onAfterClose。堆叠 z-index 与 Modal 共享 modal/z-stack 模块级计数器，多层叠放后开者在上。有 title 用 aria-labelledby，否则 aria-label。别名 SideSheet（行为一致）。受控 open 不回写，仅 onOpenChange/onClose 通知。',
-  exports: ['Drawer', 'SideSheet'],
-  props: [
-    { name: 'open', type: 'boolean', default: 'undefined', desc: '受控显隐；受控时不回写' },
-    {
-      name: 'placement',
-      type: "'left'|'right'|'top'|'bottom'",
-      default: "'right'",
-      desc: '贴边方向',
-    },
-    {
-      name: 'size',
-      type: "'small'|'default'|'large'",
-      default: "'default'",
-      desc: '预设宽（横向）/高（纵向）',
-    },
-    {
-      name: 'width',
-      type: 'number|string',
-      default: 'undefined',
-      desc: 'left/right 宽度，优先于 size',
-    },
-    {
-      name: 'height',
-      type: 'number|string',
-      default: 'undefined',
-      desc: 'top/bottom 高度，优先于 size',
-    },
-    { name: 'title', type: 'string', default: 'undefined', desc: '标题文案' },
-    {
-      name: 'titleSnippet',
-      type: 'Snippet',
-      default: 'undefined',
-      desc: '自定义标题，覆盖 title',
-    },
-    { name: 'mask', type: 'boolean', default: 'true', desc: '显示遮罩；false 不锁滚动且容器不拦截' },
-    { name: 'maskClosable', type: 'boolean', default: 'true', desc: '点遮罩关闭' },
-    { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: 'Esc 关闭' },
-    { name: 'keyboard', type: 'boolean', default: 'true', desc: '键盘交互总开关；false 停用 Esc 关闭与 Tab/Shift+Tab 焦点循环（覆盖 closeOnEsc，仍保留进场/归还焦点）' },
-    { name: 'closable', type: 'boolean', default: 'true', desc: '右上角关闭按钮' },
-    {
-      name: 'destroyOnClose',
-      type: 'boolean',
-      default: 'false',
-      desc: '关闭即卸载内部内容并重置状态；默认 false 保留 DOM 仅隐藏',
-    },
-    {
-      name: 'getContainer',
-      type: '() => HTMLElement | null',
-      default: 'undefined',
-      desc: 'Portal 容器，缺省 document.body；脱离父层叠上下文',
-    },
-    {
-      name: 'footer',
-      type: 'Snippet|null',
-      default: 'undefined',
-      desc: '吸底操作区；未提供不渲染',
-    },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '主体内容' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无 title 时的 aria-label' },
-    { name: 'onOpenChange', type: '(open: boolean) => void', default: 'undefined' },
-    { name: 'onClose', type: '() => void', default: 'undefined' },
-    { name: 'onAfterClose', type: '() => void', default: 'undefined', desc: '出场过渡结束（DOM 卸载后）触发' },
-  ],
-  events: [
-    { name: 'onOpenChange', desc: '显隐变化通知' },
-    { name: 'onClose', desc: '关闭按钮/遮罩/Esc 关闭' },
-    { name: 'onAfterClose', desc: '出场过渡结束后触发，配合 destroyOnClose 清理' },
-  ],
-  slots: [
-    { name: 'children', desc: '主体内容' },
-    { name: 'titleSnippet', desc: '自定义标题' },
-    { name: 'footer', desc: '吸底操作区' },
-  ],
-  a11y: {
-    hasRole: true,
-    focusable: true,
-    note: 'role=dialog + aria-modal（随 mask）；有 title 用 aria-labelledby，无则 aria-label；useFocusTrap 捕获 Tab 焦点并在关闭时归还触发元素；closeOnEsc 控制 Esc 关闭；keyboard=false 为键盘交互总开关，停用 Esc/Tab/Shift+Tab（覆盖 closeOnEsc，仍保留进场与归还焦点）；mask 时 useScrollLock 锁背景滚动；关闭按钮 aria-label「关闭」。',
-  },
-  tokens: [
-    '--cd-drawer-bg',
-    '--cd-drawer-color-text',
-    '--cd-drawer-color-title',
-    '--cd-drawer-border',
-    '--cd-drawer-mask-bg',
-    '--cd-drawer-shadow',
-    '--cd-drawer-width',
-    '--cd-drawer-width-small',
-    '--cd-drawer-width-large',
-    '--cd-drawer-height',
-    '--cd-drawer-height-small',
-    '--cd-drawer-height-large',
-    '--cd-drawer-header-padding',
-    '--cd-drawer-body-padding',
-    '--cd-drawer-footer-padding',
-    '--cd-drawer-title-color',
-    '--cd-drawer-title-size',
-    '--cd-drawer-close-color',
-    '--cd-drawer-close-color-hover',
-    '--cd-drawer-close-hover-bg',
-    '--cd-drawer-z',
-    '--cd-drawer-motion-duration',
-  ],
-  responsive: false,
-  examples: [
-    {
-      title: '右侧抽屉',
-      code: '<Drawer open={visible} title="详情" onClose={() => (visible = false)}>内容</Drawer>',
-    },
-    {
-      title: '左侧抽屉',
-      code: '<Drawer open={visible} placement="left" title="菜单" onClose={() => (visible = false)}>导航</Drawer>',
-    },
-    {
-      title: '底部抽屉',
-      code: '<Drawer open={visible} placement="bottom" size="large" onClose={() => (visible = false)}>面板内容</Drawer>',
-    },
-  ],
-} as const;

package/src/dropdown/Dropdown.a11y.test.ts

@@ -1,46 +0,0 @@
-// Dropdown a11y：触发器 role=button（aria-haspopup=menu/expanded/controls），
-// 浮层菜单 portal 到 document.body（use:floating），role=menu + role=menuitem。
-// 参照 Modal.a11y.test.ts：浮层在 document.body 全局查询并扫描。
-// 不测真实键盘 roving/hover（jsdom 限制，受控 open 强制打开再断言静态 ARIA）。
-// 经 DropdownA11yFixture 渲染（不经 LocaleHarness：harness 注入的 children 会命中
-// Dropdown 的 {#if children} 分支而跳过 items 渲染）。
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { expectNoAxeViolations } from '../test-utils/a11y.js';
-import Fixture from './DropdownA11yFixture.svelte';
-
-const ITEMS = [
-  { key: 'edit', label: 'Edit' },
-  { key: 'dup', label: 'Duplicate' },
-  { type: 'divider' as const },
-  { key: 'del', label: 'Delete', disabled: true },
-];
-
-describe('Dropdown a11y', () => {
-  it('默认（收起）：触发器 role=button + aria-haspopup=menu，无 axe violations', async () => {
-    const { container } = render(Fixture, { props: { items: ITEMS } });
-    const trigger = container.querySelector('.cd-dropdown__trigger');
-    expect(trigger?.getAttribute('role')).toBe('button');
-    expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
-    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    await expectNoAxeViolations(container);
-  });
-
-  it('open=true：菜单 role=menu（aria-labelledby 指向触发器）+ role=menuitem，无 axe violations', async () => {
-    render(Fixture, { props: { items: ITEMS, open: true, trigger: 'click' } });
-
-    // 菜单 portal 到 body —— 全局查询。
-    const menu = document.querySelector('[role="menu"]') as HTMLElement | null;
-    expect(menu).not.toBeNull();
-
-    // aria-labelledby 指向触发器 id，且该元素存在。
-    const labelledby = menu?.getAttribute('aria-labelledby');
-    expect(labelledby).toBeTruthy();
-    expect(labelledby ? document.getElementById(labelledby) : null).not.toBeNull();
-
-    const items = document.querySelectorAll('[role="menuitem"]');
-    expect(items.length).toBe(3);
-
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/dropdown/Dropdown.kbd.test.ts

@@ -1,56 +0,0 @@
-// Dropdown 键盘 e2e（browser project / 真实 chromium）。
-// 测真实焦点 roving + Esc 关闭——浮层菜单 portal 到 body，role=menu/menuitem：
-//   1. 触发器（role=button）按 ArrowDown 打开菜单并把真实焦点送到首个 menuitem。
-//   2. ↑↓ 真实移动焦点到相邻 menuitem（环绕）。
-//   3. Esc 关闭菜单（destroyOnClose → 浮层从 document 移除），aria-expanded 复位。
-//
-// 真实焦点断言用 page locator 的 .toHaveFocus()（对真实 document.activeElement 重试断言）。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import DropdownKbdFixture from './DropdownKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Dropdown 键盘 e2e（菜单 roving + Esc）', () => {
-  it('ArrowDown 打开并聚焦首项；↑↓ 移动焦点；Esc 关闭复位 aria-expanded', async () => {
-    const { baseElement } = renderKbdFixture(DropdownKbdFixture);
-
-    const trigger = baseElement.querySelector('[role="button"]') as HTMLElement;
-    expect(trigger).not.toBeNull();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-
-    // 1. 聚焦触发器并按 ArrowDown：打开菜单 + 把真实焦点送到首个 menuitem（rAF 后就绪）。
-    trigger.focus();
-    await expect.element(loc(trigger)).toHaveFocus();
-    await userEvent.keyboard('{ArrowDown}');
-
-    // 菜单 portal 到 body —— 在 document 范围查询。
-    await expect.element(page.getByRole('menu')).toBeInTheDocument();
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-
-    const items = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'));
-    expect(items.length).toBe(3);
-    const [edit, dup, del] = items as [HTMLElement, HTMLElement, HTMLElement];
-
-    // 真实焦点已落到首个 menuitem。
-    await expect.element(loc(edit)).toHaveFocus();
-
-    // 2. ↓ 移动到下一项；↑ 回上一项；末项 ↓ 环绕回首项。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(dup)).toHaveFocus();
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(del)).toHaveFocus();
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(edit)).toHaveFocus();
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(del)).toHaveFocus();
-
-    // 3. Esc 关闭：destroyOnClose → 菜单从 document 移除；trigger aria-expanded 复位。
-    await userEvent.keyboard('{Escape}');
-    await expect.element(page.getByRole('menu')).not.toBeInTheDocument();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-});