@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/divider/Divider.svelte

@@ -1,154 +0,0 @@
-<!--
-  Divider — see specs/components/basic/Divider.spec.md
-  Pure presentational separator. Token-driven, a11y role="separator".
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type DividerLayout = 'horizontal' | 'vertical';
-  type DividerAlign = 'left' | 'center' | 'right';
-
-  interface Props {
-    layout?: DividerLayout;
-    dashed?: boolean;
-    align?: DividerAlign;
-    margin?: string | number;
-    thickness?: number;
-    plain?: boolean;
-    class?: string;
-    children?: Snippet;
-  }
-
-  let {
-    layout = 'horizontal',
-    dashed = false,
-    align = 'center',
-    margin,
-    thickness = 1,
-    plain = true,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const hasContent = $derived(layout === 'horizontal' && !!children);
-
-  const marginCss = $derived(typeof margin === 'number' ? `${margin}px` : margin);
-
-  const inlineStyle = $derived(
-    [
-      `--cd-divider-thickness:${thickness}px`,
-      layout === 'horizontal' && marginCss && `margin-block:${marginCss}`,
-      layout === 'vertical' && marginCss && `margin-inline:${marginCss}`,
-    ]
-      .filter(Boolean)
-      .join(';'),
-  );
-</script>
-
-{#if layout === 'vertical'}
-  <span
-    class={['cd-divider', 'cd-divider--vertical', dashed && 'cd-divider--dashed', className]
-      .filter(Boolean)
-      .join(' ')}
-    role="separator"
-    aria-orientation="vertical"
-    style={inlineStyle}
-  ></span>
-{:else if hasContent}
-  <div
-    class={[
-      'cd-divider',
-      'cd-divider--horizontal',
-      'cd-divider--with-text',
-      `cd-divider--align-${align}`,
-      dashed && 'cd-divider--dashed',
-      !plain && 'cd-divider--bold',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ')}
-    role="separator"
-    style={inlineStyle}
-  >
-    <span class="cd-divider__text">{@render children?.()}</span>
-  </div>
-{:else}
-  <div
-    class={['cd-divider', 'cd-divider--horizontal', dashed && 'cd-divider--dashed', className]
-      .filter(Boolean)
-      .join(' ')}
-    role="separator"
-    style={inlineStyle}
-  ></div>
-{/if}
-
-<style>
-  .cd-divider {
-    --cd-divider-thickness: 1px;
-    box-sizing: border-box;
-    border-color: var(--cd-divider-color);
-    border-style: solid;
-  }
-  .cd-divider--dashed {
-    border-style: dashed;
-  }
-
-  /* horizontal plain line */
-  .cd-divider--horizontal {
-    display: block;
-    width: 100%;
-    border: 0;
-    border-block-start: var(--cd-divider-thickness) solid var(--cd-divider-color);
-    margin-block: var(--cd-divider-spacing);
-  }
-  .cd-divider--horizontal.cd-divider--dashed {
-    border-block-start-style: dashed;
-  }
-
-  /* horizontal with text */
-  .cd-divider--with-text {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    border: 0;
-    margin-block: var(--cd-divider-spacing);
-    color: var(--cd-divider-text-color);
-    font-size: var(--cd-divider-text-font-size);
-  }
-  .cd-divider--with-text::before,
-  .cd-divider--with-text::after {
-    content: '';
-    flex: 1 1 auto;
-    border-block-start: var(--cd-divider-thickness) solid var(--cd-divider-color);
-  }
-  .cd-divider--with-text.cd-divider--dashed::before,
-  .cd-divider--with-text.cd-divider--dashed::after {
-    border-block-start-style: dashed;
-  }
-  .cd-divider__text {
-    flex: 0 0 auto;
-    padding-inline: var(--cd-divider-text-gap);
-  }
-  .cd-divider--bold .cd-divider__text {
-    font-weight: var(--cd-font-weight-semibold);
-  }
-  .cd-divider--align-left::before {
-    flex: 0 0 5%;
-  }
-  .cd-divider--align-right::after {
-    flex: 0 0 5%;
-  }
-
-  /* vertical */
-  .cd-divider--vertical {
-    display: inline-block;
-    height: 0.9em;
-    border: 0;
-    border-inline-start: var(--cd-divider-thickness) solid var(--cd-divider-color);
-    margin-inline: var(--cd-divider-spacing);
-    vertical-align: middle;
-  }
-  .cd-divider--vertical.cd-divider--dashed {
-    border-inline-start-style: dashed;
-  }
-</style>

package/src/divider/index.ts

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

package/src/divider/meta.ts

@@ -1,23 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/components/basic/Divider.spec.md.
- */
-export const meta = {
-  name: 'Divider',
-  category: 'basic',
-  description: '分隔线，用于在视觉上分割内容区块，纯展示。',
-  props: [
-    { name: 'layout', type: "'horizontal'|'vertical'", default: "'horizontal'" },
-    { name: 'dashed', type: 'boolean', default: 'false' },
-    { name: 'align', type: "'left'|'center'|'right'", default: "'center'", desc: '横向带文字时的文字位置' },
-    { name: 'margin', type: 'string|number', default: 'undefined', desc: '覆盖主轴外边距，number→px' },
-    { name: 'thickness', type: 'number', default: '1', desc: '线宽（px）' },
-    { name: 'plain', type: 'boolean', default: 'true', desc: 'false 时文字加粗' },
-    { name: 'class', type: 'string', default: "''" },
-  ],
-  events: [],
-  slots: [{ name: 'children', desc: '横向分隔线中间/侧边文字（vertical 忽略）' }],
-  a11y: { role: 'separator', orientation: 'aria-orientation for vertical' },
-  tokens: ['--cd-divider-color', '--cd-divider-thickness', '--cd-divider-spacing', '--cd-divider-text-*'],
-  examples: [{ title: '带文字', code: '<Divider>章节</Divider>' }],
-} as const;

package/src/drawer/Drawer.a11y.test.ts

@@ -1,41 +0,0 @@
-// Drawer a11y：浮层 portal 到 document.body（复用 Modal 基建），role=dialog / aria-modal。
-// 参照 Modal.a11y.test.ts：扫描 document.body，不测真实焦点陷阱/键盘（jsdom 限制）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Drawer from './Drawer.svelte';
-
-describe('Drawer a11y', () => {
-  it('open + title：role=dialog / aria-modal / aria-labelledby，无 axe violations', async () => {
-    renderWithLocale(Drawer, {
-      props: { open: true, title: 'Filters' },
-    });
-
-    // use:portal 命令式挂到 document.body —— 全局查询。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog).not.toBeNull();
-    expect(dialog?.getAttribute('aria-modal')).toBe('true');
-
-    const labelledby = dialog?.getAttribute('aria-labelledby');
-    expect(labelledby).toBeTruthy();
-    const titleEl = labelledby ? document.getElementById(labelledby) : null;
-    expect(titleEl?.textContent).toContain('Filters');
-
-    // close 按钮可访问名来自 en_US locale（验证 LocaleProvider 管线）。
-    const closeBtn = document.querySelector('.cd-drawer__close') as HTMLElement | null;
-    expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('无 title + ariaLabel：role=dialog 用 aria-label 提供可访问名', async () => {
-    renderWithLocale(Drawer, {
-      props: { open: true, ariaLabel: 'Side sheet', closable: false, footer: null },
-    });
-
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement | null;
-    expect(dialog?.getAttribute('aria-label')).toBe('Side sheet');
-    expect(dialog?.getAttribute('aria-labelledby')).toBeNull();
-
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/drawer/Drawer.kbd.test.ts

@@ -1,67 +0,0 @@
-// Drawer 键盘 e2e（browser project / 真实 chromium）。
-// 测 focus-trap 的真实焦点行为——jsdom 完全测不了（焦点模型不完整）：
-//   1. 打开 Drawer 后焦点进入对话框内（首个可聚焦元素）。
-//   2. Tab 循环被困在 Drawer 内：Tab 到最后一个可聚焦元素后再 Tab 回到第一个；
-//      Shift+Tab 从第一个回到最后一个。
-//   3. Esc 关闭后焦点归还触发元素（trigger 按钮）。
-//
-// Drawer portal 到 body（与 Modal 同构），故在 document 范围查 [role=dialog]。
-// 真实焦点断言用 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 DrawerKbdFixture from './DrawerKbdFixture.svelte';
-
-// 把任意 DOM 元素包成可断言焦点的 locator。
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-// 收集对话框内所有可聚焦元素（按 DOM 顺序，焦点陷阱用同一选择器循环）。
-function focusablesIn(dialog: HTMLElement) {
-  return Array.from(
-    dialog.querySelectorAll<HTMLElement>(
-      'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])',
-    ),
-  ).filter((el) => el.offsetParent !== null);
-}
-
-describe('Drawer 键盘 e2e（focus trap）', () => {
-  it('打开后焦点进入对话框；Tab 循环困在 Drawer 内；Esc 关闭后焦点归还 trigger', async () => {
-    const { baseElement } = renderKbdFixture(DrawerKbdFixture);
-
-    // 先点击 trigger 打开（点击会先聚焦该按钮，作为归还焦点的锚点）。
-    const trigger = baseElement.querySelector('[data-testid="trigger"]') as HTMLButtonElement;
-    expect(trigger).not.toBeNull();
-    await userEvent.click(trigger);
-
-    // Drawer portal 到 body —— 在 document 范围查询对话框。
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
-    expect(dialog).not.toBeNull();
-    await expect.element(loc(dialog)).toBeInTheDocument();
-
-    // 1. 焦点进入对话框内（焦点陷阱 activate 时聚焦首个可聚焦元素）。
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    const focusables = focusablesIn(dialog);
-    expect(focusables.length).toBeGreaterThan(1);
-    const first = focusables[0]!;
-    const last = focusables[focusables.length - 1]!;
-
-    // 2a. 焦点移到最后一个，再 Tab → 循环回第一个（被困住，不逃出 Drawer）。
-    last.focus();
-    await expect.element(loc(last)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(first)).toHaveFocus();
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    // 2b. Shift+Tab 从第一个 → 循环回最后一个。
-    await userEvent.tab({ shift: true });
-    await expect.element(loc(last)).toHaveFocus();
-    expect(dialog.contains(document.activeElement)).toBe(true);
-
-    // 3. Esc 关闭（closeOnEsc 默认 true）—— focus-trap deactivate 把焦点归还 trigger。
-    await userEvent.keyboard('{Escape}');
-    await expect.element(loc(trigger)).toHaveFocus();
-  });
-});