@chenzy-design/svelte 0.1.0

package/dist/divider/Divider.svelte

@@ -0,0 +1,154 @@
+<!--
+  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/dist/divider/Divider.svelte.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;
+//# sourceMappingURL=Divider.svelte.d.ts.map

package/dist/divider/Divider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../src/divider/Divider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/C,KAAK,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhD,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8DH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/divider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Divider } from './Divider.svelte';
+export { meta as dividerMeta } from './meta.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/divider/index.js

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

package/dist/divider/meta.d.ts

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

package/dist/divider/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/divider/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBP,CAAC"}

package/dist/divider/meta.js

@@ -0,0 +1,23 @@
+/**
+ * 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>' }],
+};

package/dist/drawer/Drawer.a11y.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Drawer.a11y.test.d.ts.map

package/dist/drawer/Drawer.a11y.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.a11y.test.d.ts","sourceRoot":"","sources":["../../src/drawer/Drawer.a11y.test.ts"],"names":[],"mappings":""}

package/dist/drawer/Drawer.a11y.test.js

@@ -0,0 +1,33 @@
+// 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"]');
+        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');
+        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"]');
+        expect(dialog?.getAttribute('aria-label')).toBe('Side sheet');
+        expect(dialog?.getAttribute('aria-labelledby')).toBeNull();
+        await expectNoAxeViolations(document.body);
+    });
+});

package/dist/drawer/Drawer.kbd.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Drawer.kbd.test.d.ts.map

package/dist/drawer/Drawer.kbd.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.kbd.test.d.ts","sourceRoot":"","sources":["../../src/drawer/Drawer.kbd.test.ts"],"names":[],"mappings":""}

package/dist/drawer/Drawer.kbd.test.js

@@ -0,0 +1,53 @@
+// 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) {
+    return page.elementLocator(el);
+}
+// 收集对话框内所有可聚焦元素（按 DOM 顺序，焦点陷阱用同一选择器循环）。
+function focusablesIn(dialog) {
+    return Array.from(dialog.querySelectorAll('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"]');
+        expect(trigger).not.toBeNull();
+        await userEvent.click(trigger);
+        // Drawer portal 到 body —— 在 document 范围查询对话框。
+        const dialog = document.querySelector('[role="dialog"]');
+        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();
+    });
+});