@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/popconfirm/PopconfirmA11yFixture.svelte

@@ -1,34 +0,0 @@
-<!--
-  Popconfirm a11y 测试夹具：在 LocaleProvider 内渲染 Popconfirm。
-  trigger snippet 仅为非交互触发文案——触发包裹 div 自身承载 role=button + tabindex，
-  故 trigger 内不嵌套原生交互元素（否则 axe nested-interactive）。
-  仅供 Popconfirm.a11y.test.ts 使用，不对外导出。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Popconfirm from './Popconfirm.svelte';
-
-  interface Props {
-    open?: boolean;
-    title?: string;
-    content?: string;
-    type?: 'default' | 'danger' | 'warning';
-    locale?: string;
-  }
-
-  let {
-    open = false,
-    title = 'Delete this item?',
-    content = 'This action cannot be undone.',
-    type = 'default',
-    locale = 'en_US',
-  }: Props = $props();
-</script>
-
-<LocaleProvider {locale}>
-  <Popconfirm {open} {title} {content} {type}>
-    {#snippet trigger()}
-      Delete
-    {/snippet}
-  </Popconfirm>
-</LocaleProvider>

package/src/popconfirm/PopconfirmKbdFixture.svelte

@@ -1,17 +0,0 @@
-<!--
-  仅供 Popconfirm.kbd.test.ts（browser project）使用的浮层焦点 + Esc 归还 e2e 夹具。
-  triggerType='click'（默认）：触发器 div 承载 role=button + tabindex=0，点击/Enter 打开浮层
-  （dialog，焦点陷阱移入），Esc 关闭并归还焦点到触发器。浮层默认含取消/确认两个按钮。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Popconfirm from './Popconfirm.svelte';
-</script>
-
-<LocaleProvider locale="en_US">
-  <Popconfirm title="Delete this item?" content="This cannot be undone.">
-    {#snippet trigger()}
-      Delete
-    {/snippet}
-  </Popconfirm>
-</LocaleProvider>

package/src/popconfirm/index.ts

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

package/src/popconfirm/meta.ts

@@ -1,200 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Popconfirm',
-  category: 'feedback',
-  description:
-    '气泡确认：锚定触发元素的就地二次确认。支持 title/content、危险分级 type（default/warning/danger）、确认/取消双按钮、placement 4 向；triggerType=click/hover、onConfirm 返回 Promise 时确认按钮 loading（resolve 关闭 / reject 保持）、getPopupContainer 自定义浮层容器；destroyOnClose 关闭卸载浮层、arrowPointAtCenter 箭头指向中心、okButtonProps/cancelButtonProps 透传按钮属性、motion 入场动效（reduced-motion 退化）；role=dialog non-modal，复用 useDismiss/useFocusTrap/useFloating。',
-  exports: ['Popconfirm'],
-  props: [
-    { name: 'open', type: 'boolean', default: 'undefined', desc: '受控显隐；受控时不回写，仅 onOpenChange' },
-    { name: 'visible', type: 'boolean', default: 'undefined', desc: 'open 别名（Semi 原始拼写）；open 优先' },
-    { name: 'defaultOpen', type: 'boolean', default: 'false', desc: '非受控初始显隐' },
-    { name: 'defaultVisible', type: 'boolean', default: 'undefined', desc: 'defaultOpen 别名（优先于 defaultOpen）' },
-    { name: 'title', type: 'string', default: 'undefined', desc: '确认标题' },
-    { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '覆盖 title' },
-    { name: 'content', type: 'string', default: 'undefined', desc: '补充说明' },
-    { name: 'contentSnippet', type: 'Snippet', default: 'undefined', desc: '覆盖 content' },
-    {
-      name: 'type',
-      type: "'default'|'danger'|'warning'",
-      default: "'default'",
-      desc: '影响图标色与默认确认按钮类型',
-    },
-    {
-      name: 'icon',
-      type: 'Snippet | false',
-      default: 'undefined',
-      desc: '自定义图标；false 隐藏；缺省按 type 默认图标',
-    },
-    { name: 'okText', type: 'string', default: "'确定'" },
-    { name: 'cancelText', type: 'string', default: "'取消'" },
-    {
-      name: 'okType',
-      type: "'primary'|'danger'",
-      default: 'undefined',
-      desc: '覆盖确认按钮类型；缺省 type=danger→danger 否则 primary',
-    },
-    {
-      name: 'cancelType',
-      type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'",
-      default: "'secondary'",
-      desc: '取消按钮 type；优先级高于 cancelButtonProps.type',
-    },
-    {
-      name: 'okButtonProps',
-      type: 'Partial<ButtonProps>',
-      default: 'undefined',
-      desc: '透传确认按钮额外属性（type/theme/size 等；onclick/loading 由组件托管，不被覆盖）',
-    },
-    {
-      name: 'cancelButtonProps',
-      type: 'Partial<ButtonProps>',
-      default: 'undefined',
-      desc: '透传取消按钮额外属性（type/theme/size 等；onclick/disabled 由组件托管，不被覆盖）',
-    },
-    { name: 'showCancel', type: 'boolean', default: 'true', desc: '是否显示取消按钮' },
-    {
-      name: 'placement',
-      type: "'top'|'bottom'|'left'|'right'",
-      default: "'top'",
-      desc: '浮层方向',
-    },
-    {
-      name: 'position',
-      type: "'top'|'bottom'|'left'|'right'",
-      default: 'undefined',
-      desc: 'placement 别名（Semi 原始拼写）；placement 优先',
-    },
-    { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用触发' },
-    { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: 'Esc 是否关闭' },
-    {
-      name: 'closeOnOutsideClick',
-      type: 'boolean',
-      default: 'true',
-      desc: '外部点击是否关闭',
-    },
-    {
-      name: 'destroyOnClose',
-      type: 'boolean',
-      default: 'true',
-      desc: '关闭时销毁浮层 DOM（卸载释放内存）；false 时首开后保留，仅 --hidden 隐藏',
-    },
-    {
-      name: 'arrowPointAtCenter',
-      type: 'boolean',
-      default: 'false',
-      desc: 'start/end 对齐时箭头指向触发元素中心',
-    },
-    {
-      name: 'motion',
-      type: 'boolean | { duration?: number }',
-      default: 'true',
-      desc: '入场动效开关/配置（淡入+轻缩放）；传 number duration 覆盖时长，false 关闭；受 prefers-reduced-motion 覆盖',
-    },
-    {
-      name: 'triggerType',
-      type: "'click'|'hover'",
-      default: "'click'",
-      desc: "触发方式：click 点击 toggle；hover 悬停开关（enter/leave 延迟），指针移入浮层维持打开",
-    },
-    {
-      name: 'mouseEnterDelay',
-      type: 'number',
-      default: '150',
-      desc: 'hover 触发：指针进入到打开的延迟（ms）',
-    },
-    {
-      name: 'mouseLeaveDelay',
-      type: 'number',
-      default: '150',
-      desc: 'hover 触发：指针离开到关闭的延迟（ms）',
-    },
-    {
-      name: 'getPopupContainer',
-      type: '() => HTMLElement | null',
-      default: 'undefined',
-      desc: '浮层 portal 容器，缺省 document.body；脱离 overflow 裁剪与父层叠上下文',
-    },
-    { name: 'zIndex', type: 'number', default: '1030', desc: '浮层 z-index，覆盖 --cd-popconfirm-z token' },
-    { name: 'guardFocus', type: 'boolean', default: 'true', desc: 'Tab 键是否在浮层内循环（焦点陷阱）' },
-    { name: 'returnFocusOnClose', type: 'boolean', default: 'true', desc: 'Esc/外部点击关闭时是否将焦点归还给触发元素' },
-    { name: 'showArrow', type: 'boolean', default: 'false', desc: '是否显示箭头三角' },
-    { name: 'stopPropagation', type: 'boolean', default: 'true', desc: '点击浮层内容是否阻止事件冒泡到文档' },
-    { name: 'trigger', type: 'Snippet', default: 'undefined', desc: '触发元素（被包裹）' },
-    {
-      name: 'onOpenChange',
-      type: "(info: { open: boolean; reason: 'trigger'|'confirm'|'cancel'|'esc'|'outsideClick' }) => void",
-      default: 'undefined',
-    },
-    {
-      name: 'onConfirm',
-      type: '() => void | Promise<unknown>',
-      default: 'undefined',
-      desc: '点击确认回调；返回 Promise 时确认按钮进入 loading，resolve 后关闭、reject 保持打开',
-    },
-    { name: 'onCancel', type: '() => void', default: 'undefined', desc: '点击取消/外部关闭回调' },
-    { name: 'onClickOutside', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击浮层外部时触发（关闭前，可 preventDefault 阻止关闭）' },
-    { name: 'onClickOutSide', type: '(e: MouseEvent) => void', default: 'undefined', desc: 'onClickOutside 别名（Semi 大写 S 拼写）' },
-    { name: 'onEscKeyDown', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: 'Esc 键按下时触发（在 closeOnEsc 关闭之前）' },
-    { name: 'class', type: 'string', default: 'undefined', desc: '附加到浮层的类名' },
-  ],
-  events: [
-    { name: 'onOpenChange', desc: '显隐变化，附带 reason 来源' },
-    { name: 'onConfirm', desc: '确认按钮点击' },
-    { name: 'onCancel', desc: '取消按钮点击或外部关闭' },
-    { name: 'onClickOutside', desc: '点击浮层外部（关闭前触发，可 preventDefault 阻止默认关闭）' },
-    { name: 'onClickOutSide', desc: 'onClickOutside 别名（Semi 原始大写 S 拼写）' },
-    { name: 'onEscKeyDown', desc: 'Esc 键按下时触发（在 closeOnEsc 关闭之前）' },
-    { name: 'onAfterOpen', desc: '入场动效结束、浮层完全可见' },
-    { name: 'onAfterClose', desc: '出场动效结束、DOM 卸载后' },
-  ],
-  slots: [
-    { name: 'trigger', desc: '触发元素（被包裹）' },
-    { name: 'titleSnippet', desc: '覆盖 title 的富内容标题' },
-    { name: 'contentSnippet', desc: '覆盖 content 的富内容说明' },
-    { name: 'icon', desc: '自定义图标（Snippet 或 false 隐藏）' },
-  ],
-  a11y: {
-    hasRole: true,
-    note: '触发器 aria-haspopup=dialog + aria-expanded + aria-controls；浮层 role=dialog（non-modal，不设 aria-modal）+ aria-labelledby(title) + aria-describedby(content)；Esc 关闭，Tab 在浮层内循环（useFocusTrap），关闭归还焦点；危险/警示图标 aria-hidden（语义靠文案）。',
-  },
-  tokens: [
-    '--cd-popconfirm-bg',
-    '--cd-popconfirm-color-text',
-    '--cd-popconfirm-color-text-secondary',
-    '--cd-popconfirm-border',
-    '--cd-popconfirm-shadow',
-    '--cd-popconfirm-radius',
-    '--cd-popconfirm-padding',
-    '--cd-popconfirm-icon-color-danger',
-    '--cd-popconfirm-icon-color-warning',
-    '--cd-popconfirm-icon-color-info',
-    '--cd-popconfirm-title-color',
-    '--cd-popconfirm-title-size',
-    '--cd-popconfirm-content-size',
-    '--cd-popconfirm-max-width',
-    '--cd-popconfirm-z',
-    '--cd-popconfirm-gap-footer',
-    '--cd-popconfirm-arrow-size',
-    '--cd-popconfirm-motion-duration',
-    '--cd-popconfirm-motion-easing',
-  ],
-  responsive: false,
-  examples: [
-    {
-      title: '删除确认（danger）',
-      code: '<Popconfirm type="danger" title="确定删除该项？" content="删除后不可恢复" onConfirm={() => remove()}>\n  {#snippet trigger()}<Button type="danger">删除</Button>{/snippet}\n</Popconfirm>',
-    },
-    {
-      title: '普通确认',
-      code: '<Popconfirm title="确认提交？" onConfirm={() => submit()}>\n  {#snippet trigger()}<Button>提交</Button>{/snippet}\n</Popconfirm>',
-    },
-    {
-      title: '自定义图标',
-      code: '<Popconfirm title="保存更改？" placement="bottom">\n  {#snippet icon()}<SaveIcon />{/snippet}\n  {#snippet trigger()}<Button>保存</Button>{/snippet}\n</Popconfirm>',
-    },
-  ],
-} as const;

package/src/popover/Popover.a11y.test.ts

@@ -1,58 +0,0 @@
-// Popover a11y：
-//  - hover/focus 触发 → 浮层 role=tooltip，触发器 aria-describedby 关联浮层（span 上合法）。
-//  - click/custom 触发 → 浮层 role=dialog，触发器 <span> 承载 role=button + aria-haspopup/expanded/controls。
-// 浮层经 use:floating portal 到 document.body —— 参照 Modal.a11y.test.ts 全局查询。
-// jsdom 触发不了真实 hover/click，故用受控 open 强制打开再断言静态 ARIA。
-// PopoverA11yFixture 提供非交互触发文案 children（自带 LocaleProvider，故直接 render）。
-//
-// a11y 修复（原 axe [aria-allowed-attr] 已消除）：dialog 模式触发包裹 span 现承载
-//   role=button + tabindex=0 + Enter/Space 激活（对齐 Dropdown），aria-haspopup/expanded/
-//   controls 挂在合法 button 宿主上。tooltip 模式仍为纯 span + aria-describedby（合法）。
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { expectNoAxeViolations } from '../test-utils/a11y.js';
-import Fixture from './PopoverA11yFixture.svelte';
-
-describe('Popover a11y', () => {
-  it('hover 触发 + open：浮层 role=tooltip + 触发器 aria-describedby 指向浮层，无 axe violations', async () => {
-    render(Fixture, { props: { open: true, content: 'Quick hint', trigger: 'hover' } });
-
-    const pop = document.querySelector('.cd-popover__pop') as HTMLElement | null;
-    expect(pop?.getAttribute('role')).toBe('tooltip');
-
-    const trigger = document.querySelector('.cd-popover__trigger') as HTMLElement | null;
-    const describedby = trigger?.getAttribute('aria-describedby');
-    expect(describedby).toBeTruthy();
-    expect(describedby).toBe(pop?.id);
-
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('hover 触发 + 收起：无浮层，无 axe violations', async () => {
-    const { container } = render(Fixture, { props: { open: false, trigger: 'hover' } });
-    expect(document.querySelector('.cd-popover__pop[role="tooltip"]')).toBeNull();
-    await expectNoAxeViolations(container);
-  });
-
-  it('open + title：role=dialog / aria-modal=false / aria-labelledby（触发器 role=button 修复后）', async () => {
-    render(Fixture, { props: { open: true, title: 'Confirm', content: 'Are you sure?', trigger: 'click' } });
-
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog?.getAttribute('aria-modal')).toBe('false');
-    const labelledby = dialog?.getAttribute('aria-labelledby');
-    expect(labelledby).toBeTruthy();
-    expect(labelledby ? document.getElementById(labelledby)?.textContent : '').toContain('Confirm');
-
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('open 无 title：role=dialog 用 aria-label 兜底（触发器 role=button 修复后）', async () => {
-    render(Fixture, { props: { open: true, content: 'No title here', trigger: 'click' } });
-
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog?.getAttribute('aria-labelledby')).toBeNull();
-    expect(dialog?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/popover/Popover.kbd.test.ts

@@ -1,42 +0,0 @@
-// Popover 键盘 e2e（browser project / 真实 chromium），dialog（click）模式。
-// click 触发：触发器 span 承载 role=button + tabindex=0，trapFocus 默认随 click。
-// 打开后焦点进入浮层（useFocusTrap），Esc（useDismiss escape）关闭并把焦点归还触发器。
-// jsdom 测不了真实焦点进入/归还，故这里在真浏览器断 .toHaveFocus()。
-//   1. 聚焦触发器并 Enter 打开 → 焦点进入浮层（dialog）。
-//   2. Esc 关闭 → 焦点归还触发器。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import PopoverKbdFixture from './PopoverKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Popover 键盘 e2e（dialog Esc 关闭 + 焦点归还）', () => {
-  it('Enter 打开焦点进浮层；Esc 关闭归还触发器', async () => {
-    const { baseElement } = renderKbdFixture(PopoverKbdFixture);
-
-    // dialog 模式触发器 = role=button + tabindex=0 的 span。
-    const trigger = baseElement.querySelector('.cd-popover__trigger') as HTMLElement;
-    expect(trigger).not.toBeNull();
-    expect(trigger.getAttribute('role')).toBe('button');
-
-    // 1. 聚焦触发器，Enter 打开（onTriggerKeydown）。
-    trigger.focus();
-    await expect.element(loc(trigger)).toHaveFocus();
-    await userEvent.keyboard('{Enter}');
-
-    // 浮层 portal 到 body：查 role=dialog。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
-    expect(dialog).not.toBeNull();
-    await expect.element(loc(dialog)).toBeInTheDocument();
-    // 焦点进入浮层（focus trap activate）。
-    await expect.poll(() => dialog.contains(document.activeElement)).toBe(true);
-
-    // 2. Esc 关闭，焦点归还触发器（focus trap returnFocus + useDismiss escape）。
-    await userEvent.keyboard('{Escape}');
-    await expect.element(loc(trigger)).toHaveFocus();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-});