@chenzy-design/svelte 0.1.0

package/dist/toast/meta.js

@@ -0,0 +1,94 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Toast — see specs/components/feedback/Toast.spec.md
+ */
+export const meta = {
+    name: 'Toast',
+    category: 'feedback',
+    description: '轻提示：命令式全局反馈 API（Toast.info/success/warning/error/loading/open/promise/close/update/destroyAll）。单例容器惰性挂载到 body；类型预设图标 + 自动消失 + 悬停暂停 + 按方位 maxCount FIFO 淘汰 + 同 id 去重更新；6 方位独立堆叠（topLeft/top/topRight/bottomLeft/bottom/bottomRight，对齐 Notification）多条同方位纵向堆叠不重叠；theme(light/dark) 卡片主题；Toast.promise(promise, { loading, success, error }) 传入 Promise 自动 pending→resolve/reject 切文案（success/error 可为函数接收值，默认文案经 @chenzy-design/locale）；a11y 播报走单例 ARIA live region（error->assertive、其余->polite），卡片本身纯视觉无 role/aria-live。',
+    exports: ['Toast', 'ToastPromiseMessages'],
+    imperative: true,
+    props: [
+        { name: 'content', type: 'string', default: '—', desc: '提示文本（必填）' },
+        { name: 'id', type: 'string', default: 'undefined', desc: '指定 id；已存在则原地更新并重启定时器' },
+        {
+            name: 'type',
+            type: "'info'|'success'|'warning'|'error'|'loading'",
+            default: "'info'",
+            desc: '语义类型，决定图标与色',
+        },
+        {
+            name: 'duration',
+            type: 'number',
+            default: '3',
+            desc: '自动消失秒数；0 持久。loading 默认 0',
+        },
+        {
+            name: 'position',
+            type: "'topLeft'|'top'|'topRight'|'bottomLeft'|'bottom'|'bottomRight'",
+            default: "'top'",
+            desc: '出现方位，每方位独立纵向堆叠',
+        },
+        { name: 'closable', type: 'boolean', default: 'true', desc: '是否显示关闭按钮' },
+        { name: 'pauseOnHover', type: 'boolean', default: 'true', desc: '悬停/聚焦时暂停定时器' },
+        {
+            name: 'theme',
+            type: "'light'|'dark'",
+            default: "'light'",
+            desc: '卡片主题；dark 为深色卡片',
+        },
+        {
+            name: 'onClose',
+            type: "(id: string, reason: 'timeout'|'manual'|'replace'|'destroyAll') => void",
+            default: 'undefined',
+            desc: '关闭回调，附关闭原因',
+        },
+        { name: 'icon', type: 'Snippet | false', default: 'undefined', desc: '自定义图标 snippet；false 隐藏图标' },
+        { name: 'showClose', type: 'boolean', default: 'true', desc: '是否显示关闭按钮（closable 别名）' },
+        { name: 'textMaxWidth', type: 'number | string', default: '450', desc: '内容区最大宽度（px 数字或 CSS 字符串）' },
+        { name: 'stack', type: 'boolean', default: 'false', desc: '堆叠显示：容器附加 cd-toast-wrapper--stacked class' },
+    ],
+    events: [{ name: 'onClose', desc: '单条关闭（超时/手动/被替换/清空）时触发，带 id 与 reason' }],
+    slots: [],
+    a11y: {
+        hasRole: true,
+        focusable: false,
+        note: '所有文案播报走 body 上单例 ARIA live region（全局唯一一对：role=status/aria-live=polite + role=alert/aria-live=assertive）；error 走 assertive 立即打断，其余走 polite。store 在新增/更新 toast 时命令式写入 region 文案，卡片本身纯视觉、不带 role/aria-live，避免多 region 重复/竞争播报。关闭按钮 button + aria-label「关闭」。不抢焦点、不锁滚动。',
+    },
+    tokens: [
+        '--cd-toast-bg',
+        '--cd-toast-color-text',
+        '--cd-toast-color-icon-info',
+        '--cd-toast-color-icon-success',
+        '--cd-toast-color-icon-warning',
+        '--cd-toast-color-icon-error',
+        '--cd-toast-color-close',
+        '--cd-toast-color-close-hover',
+        '--cd-toast-radius',
+        '--cd-toast-shadow',
+        '--cd-toast-padding',
+        '--cd-toast-gap',
+        '--cd-toast-font-size',
+        '--cd-toast-max-width',
+        '--cd-toast-min-width',
+        '--cd-toast-stack-gap',
+        '--cd-toast-z',
+        '--cd-toast-motion-duration',
+        '--cd-toast-bg-dark',
+        '--cd-toast-color-text-dark',
+        '--cd-toast-color-close-dark',
+        '--cd-toast-color-close-hover-dark',
+    ],
+    responsive: false,
+    examples: [
+        { title: '成功', code: "Toast.success('已保存')" },
+        { title: '错误', code: "Toast.error('保存失败')" },
+        { title: '加载（持久）', code: "Toast.loading('上传中', { duration: 0 })" },
+        { title: '右下角', code: "Toast.info('已同步', { position: 'bottomRight' })" },
+        { title: '深色主题', code: "Toast.success('已保存', { theme: 'dark' })" },
+        {
+            title: 'promise',
+            code: "Toast.promise(save(), { loading: '保存中…', success: '已保存', error: (e) => `失败：${e.message}` })",
+        },
+    ],
+};

package/dist/toast/store.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Toast — 命令式全局轻提示入口。
+ * 模块级单例 store + 惰性挂载的单例 ToastContainer（首次调用时 mount 到 body）。
+ * 复用 @chenzy-design/core 的 createToastStore（无框架依赖的队列 + 定时器）。
+ * See specs/components/feedback/Toast.spec.md
+ */
+import { type ToastOptions } from '@chenzy-design/core';
+/** Toast.config() 全局配置。 */
+export interface ToastConfig {
+    /** 卡片主题（全局默认值）。 */
+    theme?: 'light' | 'dark';
+    /** 容器层级。 */
+    zIndex?: number;
+    /** 容器距顶部偏移（px 数字或 CSS 字符串）。 */
+    top?: number | string;
+    /** 容器距底部偏移（px 数字或 CSS 字符串）。 */
+    bottom?: number | string;
+    /** 容器距左侧偏移（px 数字或 CSS 字符串）。 */
+    left?: number | string;
+    /** 容器距右侧偏移（px 数字或 CSS 字符串）。 */
+    right?: number | string;
+}
+/** 读取当前全局配置（供 ToastContainer 消费）。 */
+export declare function getToastConfig(): ToastConfig;
+/**
+ * Toast.promise 文案：可为静态字符串，或接收 resolve 值 / reject 原因的函数（对齐 sonner / AntD）。
+ */
+type PromiseMessage<T> = string | ((value: T) => string);
+export interface ToastPromiseMessages<T> {
+    /** pending 阶段文案；省略走 locale 默认 promiseLoading */
+    loading?: string;
+    /** resolve 文案；省略走 locale 默认 promiseSuccess */
+    success?: PromiseMessage<T>;
+    /** reject 文案；省略走 locale 默认 promiseError */
+    error?: PromiseMessage<unknown>;
+}
+/** 透传给底层 toast 的额外选项（position/theme/duration 等），content/type 由 promise 阶段接管。 */
+type PromiseToastOptions = Partial<Omit<ToastOptions, 'content' | 'type' | 'id'>>;
+export declare const Toast: {
+    info: (content: string, opts?: Partial<Omit<ToastOptions, "content">>) => string;
+    success: (content: string, opts?: Partial<Omit<ToastOptions, "content">>) => string;
+    warning: (content: string, opts?: Partial<Omit<ToastOptions, "content">>) => string;
+    error: (content: string, opts?: Partial<Omit<ToastOptions, "content">>) => string;
+    loading: (content: string, opts?: Partial<Omit<ToastOptions, "content">>) => string;
+    /** 完整选项打开一条 toast，返回其 id。 */
+    open: (opts: ToastOptions) => string;
+    /**
+     * promise API：传入 Promise，pending 显示 loading toast，resolve→success、reject→error 切文案。
+     * 返回原 Promise 以便继续链式/await（对齐 sonner / AntD message.promise）。
+     *
+     * 红线 #3：单条 toast 经同 id update 命令式切换状态（loading→success/error），
+     * 计时由底层 store 接管（loading 持久 duration:0，success/error 用默认 3s 自动关闭）；
+     * .then/.catch 是 Promise 自身的生命周期回调，无需额外手动 cleanup（toast 自身定时器在 store 内 cleanup）。
+     * 默认文案经 @chenzy-design/locale（回退 en_US，无 Provider context）；调用方可经 messages 覆盖。
+     */
+    promise: <T>(promise: Promise<T>, messages?: ToastPromiseMessages<T>, opts?: PromiseToastOptions) => Promise<T>;
+    /** 手动关闭指定 toast。 */
+    close: (id: string) => void;
+    /** 按同 id 更新一条 toast（store.add 对已存在 id 走原地更新 + 重启定时器）。 */
+    update: (id: string, opts: Partial<ToastOptions>) => string;
+    /** 清空全部 toast。 */
+    destroyAll: () => void;
+    /** 设置全局配置（theme/zIndex/top/bottom/left/right 位置偏移）。 */
+    config: (cfg: ToastConfig) => void;
+};
+export {};
+//# sourceMappingURL=store.d.ts.map

package/dist/toast/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/toast/store.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,qBAAqB,CAAC;AAO7B,2BAA2B;AAC3B,MAAM,WAAW,WAAW;IAC1B,mBAAmB;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,YAAY;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAID,qCAAqC;AACrC,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AA6CD;;GAEG;AACH,KAAK,cAAc,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC;AAED,gFAAgF;AAChF,KAAK,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;AAOlF,eAAO,MAAM,KAAK;oBACA,MAAM,SAAS,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;uBAElD,MAAM,SAAS,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;uBAErD,MAAM,SAAS,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;qBAEvD,MAAM,SAAS,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;uBAEnD,MAAM,SAAS,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAExE,6BAA6B;iBAChB,YAAY,KAAG,MAAM;IAMlC;;;;;;;;OAQG;cACO,CAAC,WACA,OAAO,CAAC,CAAC,CAAC,aACT,oBAAoB,CAAC,CAAC,CAAC,SAC3B,mBAAmB,KACxB,OAAO,CAAC,CAAC,CAAC;IAgCb,oBAAoB;gBACR,MAAM,KAAG,IAAI;IACzB,yDAAyD;iBAC5C,MAAM,QAAQ,OAAO,CAAC,YAAY,CAAC,KAAG,MAAM;IAQzD,kBAAkB;sBACF,IAAI;IACpB,uDAAuD;kBACzC,WAAW,KAAG,IAAI;CAGjC,CAAC"}

package/dist/toast/store.js

@@ -0,0 +1,127 @@
+/**
+ * Toast — 命令式全局轻提示入口。
+ * 模块级单例 store + 惰性挂载的单例 ToastContainer（首次调用时 mount 到 body）。
+ * 复用 @chenzy-design/core 的 createToastStore（无框架依赖的队列 + 定时器）。
+ * See specs/components/feedback/Toast.spec.md
+ */
+import { createToastStore, } from '@chenzy-design/core';
+import { createLocale, en_US } from '@chenzy-design/locale';
+import { announce } from './live-region.js';
+let store = null;
+let containerMounted = false;
+let globalConfig = {};
+/** 读取当前全局配置（供 ToastContainer 消费）。 */
+export function getToastConfig() {
+    return globalConfig;
+}
+// promise 默认文案的回退 locale（与 useLocale 一致用 en_US 构造，模块级单例）。
+// 命令式入口在组件树之外，拿不到 LocaleProvider context，故默认文案走此回退实例；
+// 调用方可经 messages 显式覆盖任一文案。
+let fallbackLocale;
+function getFallbackLocale() {
+    if (!fallbackLocale)
+        fallbackLocale = createLocale({ locale: en_US });
+    return fallbackLocale;
+}
+function ensureStore() {
+    if (!store)
+        store = createToastStore({ maxCount: 5, defaultDuration: 3 });
+    return store;
+}
+/**
+ * 惰性挂载容器：首次调用时动态 import + mount ToastContainer 到 body。
+ * mount 是 async（动态 import），但调用方的 s.add 已同步把数据写进 store；
+ * 容器在 mount 时立即同步读一次 store.getToasts()，不会丢首条 toast。
+ */
+async function ensureContainer() {
+    if (containerMounted || typeof document === 'undefined')
+        return;
+    containerMounted = true;
+    const { mount } = await import('svelte');
+    const { default: ToastContainer } = await import('./ToastContainer.svelte');
+    const host = document.createElement('div');
+    host.className = 'cd-toast-host';
+    document.body.appendChild(host);
+    mount(ToastContainer, { target: host, props: { store: ensureStore() } });
+}
+function show(type, content, opts = {}) {
+    const s = ensureStore();
+    void ensureContainer();
+    const id = s.add({ content, type, ...opts });
+    // a11y：把文案写入单例 live region 供屏幕阅读器播报（卡片本身不再带 role/aria-live）。
+    announce(content, type);
+    return id;
+}
+function resolveMessage(msg, value, fallback) {
+    if (msg === undefined)
+        return fallback;
+    return typeof msg === 'function' ? msg(value) : msg;
+}
+export const Toast = {
+    info: (content, opts) => show('info', content, opts),
+    success: (content, opts) => show('success', content, opts),
+    warning: (content, opts) => show('warning', content, opts),
+    error: (content, opts) => show('error', content, opts),
+    loading: (content, opts) => show('loading', content, opts),
+    /** 完整选项打开一条 toast，返回其 id。 */
+    open: (opts) => {
+        void ensureContainer();
+        const id = ensureStore().add(opts);
+        announce(opts.content, opts.type ?? 'info');
+        return id;
+    },
+    /**
+     * promise API：传入 Promise，pending 显示 loading toast，resolve→success、reject→error 切文案。
+     * 返回原 Promise 以便继续链式/await（对齐 sonner / AntD message.promise）。
+     *
+     * 红线 #3：单条 toast 经同 id update 命令式切换状态（loading→success/error），
+     * 计时由底层 store 接管（loading 持久 duration:0，success/error 用默认 3s 自动关闭）；
+     * .then/.catch 是 Promise 自身的生命周期回调，无需额外手动 cleanup（toast 自身定时器在 store 内 cleanup）。
+     * 默认文案经 @chenzy-design/locale（回退 en_US，无 Provider context）；调用方可经 messages 覆盖。
+     */
+    promise: (promise, messages = {}, opts = {}) => {
+        const s = ensureStore();
+        void ensureContainer();
+        const t = getFallbackLocale().t;
+        const loadingText = messages.loading ?? t('Toast.promiseLoading');
+        // loading 阶段：持久（duration 0），不可关闭，交给 resolve/reject 接管。
+        const id = s.add({
+            ...opts,
+            content: loadingText,
+            type: 'loading',
+            duration: 0,
+            closable: opts.closable ?? false,
+        });
+        announce(loadingText, 'loading');
+        const settle = (type, content) => {
+            // 同 id update：原地把 loading 切为 success/error 并重启定时器（默认 3s 自动关闭）。
+            s.add({ ...opts, id, content, type });
+            announce(content, type);
+        };
+        return promise.then((value) => {
+            settle('success', resolveMessage(messages.success, value, t('Toast.promiseSuccess')));
+            return value;
+        }, (reason) => {
+            settle('error', resolveMessage(messages.error, reason, t('Toast.promiseError')));
+            throw reason;
+        });
+    },
+    /** 手动关闭指定 toast。 */
+    close: (id) => ensureStore().remove(id, 'manual'),
+    /** 按同 id 更新一条 toast（store.add 对已存在 id 走原地更新 + 重启定时器）。 */
+    update: (id, opts) => {
+        void ensureContainer();
+        const content = opts.content ?? '';
+        const result = ensureStore().add({ ...opts, id, content });
+        // 仅在有新文案时播报，避免空字符串无意义地刷新 region。
+        if (content)
+            announce(content, opts.type ?? 'info');
+        return result;
+    },
+    /** 清空全部 toast。 */
+    destroyAll: () => ensureStore().removeAll(),
+    /** 设置全局配置（theme/zIndex/top/bottom/left/right 位置偏移）。 */
+    config: (cfg) => {
+        globalConfig = { ...globalConfig, ...cfg };
+    },
+};

package/dist/tooltip/Tooltip.a11y.test.d.ts

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

package/dist/tooltip/Tooltip.a11y.test.d.ts.map

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

package/dist/tooltip/Tooltip.a11y.test.js

@@ -0,0 +1,33 @@
+// Tooltip a11y：浮层 role=tooltip，触发器 aria-describedby 关联浮层（打开时）。
+// 浮层经 use:floating portal 到 document.body —— 参照 Modal.a11y.test.ts 全局查询。
+// jsdom 触发不了真实 hover/focus，故用受控 open + trigger='custom' 强制打开再断言静态 ARIA。
+// 经 TooltipA11yFixture 提供真实触发按钮 children（自带 LocaleProvider，故直接 render）。
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { expectNoAxeViolations } from '../test-utils/a11y.js';
+import Fixture from './TooltipA11yFixture.svelte';
+describe('Tooltip a11y', () => {
+    it('收起：仅触发器可见，无浮层，无 axe violations', async () => {
+        const { container } = render(Fixture, { props: { open: false } });
+        expect(document.querySelector('[role="tooltip"]')).toBeNull();
+        await expectNoAxeViolations(container);
+    });
+    it('open=true：浮层 role=tooltip + 触发器 aria-describedby 指向浮层，无 axe violations', async () => {
+        render(Fixture, { props: { open: true, content: 'Helpful hint' } });
+        const tip = document.querySelector('[role="tooltip"]');
+        expect(tip).not.toBeNull();
+        expect(tip?.textContent).toContain('Helpful hint');
+        const trigger = document.querySelector('.cd-tooltip__trigger');
+        const describedby = trigger?.getAttribute('aria-describedby');
+        expect(describedby).toBeTruthy();
+        expect(describedby).toBe(tip?.id);
+        await expectNoAxeViolations(document.body);
+    });
+    it('status=error：语义图标有 role=img + 可访问名（locale），无 axe violations', async () => {
+        render(Fixture, { props: { open: true, content: 'Invalid', status: 'error' } });
+        const statusIcon = document.querySelector('.cd-tooltip__status');
+        expect(statusIcon?.getAttribute('role')).toBe('img');
+        expect(statusIcon?.getAttribute('aria-label')).toBeTruthy();
+        await expectNoAxeViolations(document.body);
+    });
+});

package/dist/tooltip/Tooltip.kbd.test.d.ts

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

package/dist/tooltip/Tooltip.kbd.test.d.ts.map

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

package/dist/tooltip/Tooltip.kbd.test.js

@@ -0,0 +1,31 @@
+// Tooltip 键盘 e2e（browser project / 真实 chromium）。
+// 测 useDismiss(escape:true) 的真实 Esc 关闭——浮层 portal 到 body，role=tooltip：
+//   1. 聚焦触发按钮（trigger='focus'）→ focusin 显示浮层（document 范围查 role=tooltip）。
+//   2. 按 Esc → useDismiss 关闭浮层；焦点仍在触发按钮上（Esc 不移动焦点）。
+//
+// WCAG 1.4.13（Content on Hover or Focus）：focus 浮层须可由 Esc 关闭。
+import { describe, it, expect } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
+import TooltipKbdFixture from './TooltipKbdFixture.svelte';
+function loc(el) {
+    return page.elementLocator(el);
+}
+describe('Tooltip 键盘 e2e（Esc 关闭）', () => {
+    it('聚焦显示浮层；Esc 关闭浮层且焦点留在触发器', async () => {
+        const { baseElement } = renderKbdFixture(TooltipKbdFixture);
+        const trigger = baseElement.querySelector('[data-testid="trigger"]');
+        expect(trigger).not.toBeNull();
+        // 1. 聚焦触发按钮 → focusin 打开浮层。浮层 portal 到 body，在 document 范围查询。
+        trigger.focus();
+        await expect.element(loc(trigger)).toHaveFocus();
+        const tip = page.getByRole('tooltip');
+        await expect.element(tip).toBeInTheDocument();
+        await expect.element(tip).toHaveTextContent('More info');
+        // 2. Esc 关闭浮层（useDismiss escape:true 对 focus 触发亦生效）。
+        await userEvent.keyboard('{Escape}');
+        await expect.element(tip).not.toBeInTheDocument();
+        // Esc 不移动焦点：焦点仍在触发按钮上。
+        await expect.element(loc(trigger)).toHaveFocus();
+    });
+});