@chenzy-design/svelte 0.1.0

package/dist/timeline/TimelineItem.svelte

@@ -0,0 +1,164 @@
+<!--
+  Timeline.Item — 声明式单项，与 dataSource 模式渲染同一套 .cd-timeline__item 结构，
+  从而复用父 Timeline 的 :nth-child 交替布局 CSS（alternate/center）与方向样式，无需索引计算。
+
+  interactive：父 Timeline 开启时，项渲染为可聚焦 role=button，roving tabindex 由父持有的
+  焦点 id 决定（getter 经 context 保持响应性，项不写 $state——红线 #2）。方向键 roving 上交父级
+  处理，Enter/Space 触发本项 onClick。挂载时经 context 领号、卸载时退号（命令式 cleanup）。
+-->
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { getTimelineContext, type TimelineLineStyle } from './context.js';
+
+  interface Props {
+    /** 圆点颜色（等价 dataSource 项的 dotColor/color）。 */
+    dotColor?: string;
+    /** 圆点颜色别名（与 dotColor 等价，优先级低于 dotColor）。 */
+    color?: string;
+    /** 语义类型，给圆点附加 cd-timeline__dot--{type} class。 */
+    type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
+    /** 自定义圆点 snippet，提供时替代默认圆点。 */
+    dot?: Snippet;
+    /** 单项连接线样式，覆盖父 Timeline 的 lineStyle。 */
+    lineStyle?: TimelineLineStyle;
+    /** 时间文本，渲染在内容下方（horizontal 模式同 dataSource）。 */
+    time?: string;
+    /** 覆盖父 Timeline mode 的单项定位（'left' | 'right'）。 */
+    position?: 'left' | 'right';
+    /** 辅助内容（时间旁附加信息），字符串或 Snippet。 */
+    extra?: string | Snippet;
+    /** interactive 模式下按 Enter/Space 或点击该节点触发。 */
+    onClick?: () => void;
+    children?: Snippet;
+  }
+
+  let { dotColor, color, type, dot, lineStyle, time, position, extra, onClick, children }: Props = $props();
+
+  const ctx = getTimelineContext();
+
+  // 未显式指定时回退到父 Timeline 的 lineStyle。
+  const effectiveLine = $derived<TimelineLineStyle>(lineStyle ?? ctx?.getLineStyle() ?? 'solid');
+
+  // dotColor 优先，其次 color 别名。
+  const effectiveDotColor = $derived(dotColor ?? color);
+
+  const dotInline = $derived(effectiveDotColor ? `--cd-timeline-dot-current: ${effectiveDotColor};` : undefined);
+
+  const dotClass = $derived(
+    ['cd-timeline__dot', type && type !== 'default' && `cd-timeline__dot--${type}`]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  // interactive：在 $effect 内 mount 领号 / unmount 退号（仿 Tabs；untrack 读初值仅跑一次，
+  // 避免重注册打乱保序）。项自身不参与 roving 簿记 $state。
+  const interactive = $derived(ctx?.getInteractive() ?? false);
+  let myId = $state(-1);
+  $effect(() => {
+    const reg = ctx?.registerItem;
+    if (!reg) return;
+    const r = untrack(() => reg());
+    myId = r.id;
+    return r.unregister;
+  });
+
+  // roving tabindex：焦点项 0，其余 -1（焦点状态经 context getter 读取，保持响应性）。
+  const tindex = $derived(interactive && myId >= 0 && ctx?.isFocused(myId) ? 0 : -1);
+
+  function onKeydown(e: KeyboardEvent): void {
+    if (!interactive) return;
+    // Enter/Space 触发本项 onClick；方向键 roving 交父级。
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick?.();
+      return;
+    }
+    ctx?.onItemKeydown(myId, e);
+  }
+
+  function onActivate(): void {
+    if (!interactive) {
+      onClick?.();
+      return;
+    }
+    ctx?.onItemFocus(myId);
+    onClick?.();
+  }
+</script>
+
+{#if interactive}
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+  <li
+    class={[
+      'cd-timeline__item',
+      'cd-timeline__item--interactive',
+      effectiveLine === 'dashed' && 'cd-timeline__item--dashed',
+      position && `cd-timeline__item--${position}`,
+    ]}
+    role="button"
+    tabindex={tindex}
+    data-tid={myId}
+    onclick={onActivate}
+    onkeydown={onKeydown}
+    onfocus={() => ctx?.onItemFocus(myId)}
+  >
+    <span class="cd-timeline__tail" aria-hidden="true"></span>
+    <span class={dotClass} style={dotInline} aria-hidden="true">
+      {#if dot}{@render dot()}{/if}
+    </span>
+    <div class="cd-timeline__body">
+      <div class="cd-timeline__content">{@render children?.()}</div>
+      {#if time || extra}
+        <div class="cd-timeline__time">
+          {#if time}{time}{/if}
+          {#if extra}
+            {#if typeof extra === 'string'}
+              <span class="cd-timeline__extra">{extra}</span>
+            {:else}
+              <span class="cd-timeline__extra">{@render extra()}</span>
+            {/if}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </li>
+{:else}
+  <li
+    class={[
+      'cd-timeline__item',
+      effectiveLine === 'dashed' && 'cd-timeline__item--dashed',
+      position && `cd-timeline__item--${position}`,
+    ]}
+  >
+    <span class="cd-timeline__tail" aria-hidden="true"></span>
+    <span class={dotClass} style={dotInline} aria-hidden="true">
+      {#if dot}{@render dot()}{/if}
+    </span>
+    <div class="cd-timeline__body">
+      <div class="cd-timeline__content">{@render children?.()}</div>
+      {#if time || extra}
+        <div class="cd-timeline__time">
+          {#if time}{time}{/if}
+          {#if extra}
+            {#if typeof extra === 'string'}
+              <span class="cd-timeline__extra">{extra}</span>
+            {:else}
+              <span class="cd-timeline__extra">{@render extra()}</span>
+            {/if}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </li>
+{/if}
+
+<style>
+  /* 单项 dashed 覆盖：作用于自身 tail，优先于父级 solid。 */
+  .cd-timeline__item--dashed .cd-timeline__tail {
+    border-inline-start-style: dashed;
+  }
+  :global(.cd-timeline--horizontal) .cd-timeline__item--dashed .cd-timeline__tail {
+    border-inline-start: none;
+    border-block-start-style: dashed;
+  }
+</style>

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Snippet } from 'svelte';
+import { type TimelineLineStyle } from './context.js';
+interface Props {
+    /** 圆点颜色（等价 dataSource 项的 dotColor/color）。 */
+    dotColor?: string;
+    /** 圆点颜色别名（与 dotColor 等价，优先级低于 dotColor）。 */
+    color?: string;
+    /** 语义类型，给圆点附加 cd-timeline__dot--{type} class。 */
+    type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
+    /** 自定义圆点 snippet，提供时替代默认圆点。 */
+    dot?: Snippet;
+    /** 单项连接线样式，覆盖父 Timeline 的 lineStyle。 */
+    lineStyle?: TimelineLineStyle;
+    /** 时间文本，渲染在内容下方（horizontal 模式同 dataSource）。 */
+    time?: string;
+    /** 覆盖父 Timeline mode 的单项定位（'left' | 'right'）。 */
+    position?: 'left' | 'right';
+    /** 辅助内容（时间旁附加信息），字符串或 Snippet。 */
+    extra?: string | Snippet;
+    /** interactive 模式下按 Enter/Space 或点击该节点触发。 */
+    onClick?: () => void;
+    children?: Snippet;
+}
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;
+//# sourceMappingURL=TimelineItem.svelte.d.ts.map

package/dist/timeline/TimelineItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineItem.svelte.d.ts","sourceRoot":"","sources":["../../src/timeline/TimelineItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAsB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGxE,UAAU,KAAK;IACb,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/D,+BAA+B;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,wCAAwC;IACxC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyHH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/timeline/context.d.ts

@@ -0,0 +1,20 @@
+export type TimelineLineStyle = 'solid' | 'dashed';
+export interface TimelineContext {
+    getLineStyle: () => TimelineLineStyle;
+    /** interactive 是否开启（getter 保持响应性）。 */
+    getInteractive: () => boolean;
+    /** 声明式项挂载时领号，返回 id 与卸载清理；id 构成 roving 序列。 */
+    registerItem: () => {
+        id: number;
+        unregister: () => void;
+    };
+    /** 该 id 是否为当前 roving 焦点项（决定 tabindex 0/-1）。 */
+    isFocused: (id: number) => boolean;
+    /** 声明式项键盘事件冒泡到父：方向键 roving 由父处理（Enter/Space 由项自身处理）。 */
+    onItemKeydown: (id: number, e: KeyboardEvent) => void;
+    /** 项获得焦点时同步父级焦点索引（点击/Tab 进入）。 */
+    onItemFocus: (id: number) => void;
+}
+export declare function setTimelineContext(ctx: TimelineContext): void;
+export declare function getTimelineContext(): TimelineContext | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/timeline/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/timeline/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnD,MAAM,WAAW,eAAe;IAE9B,YAAY,EAAE,MAAM,iBAAiB,CAAC;IACtC,sCAAsC;IACtC,cAAc,EAAE,MAAM,OAAO,CAAC;IAC9B,6CAA6C;IAC7C,YAAY,EAAE,MAAM;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC3D,+CAA+C;IAC/C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,wDAAwD;IACxD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI,CAE7D;AAED,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,SAAS,CAEhE"}

package/dist/timeline/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('cd-timeline');
+export function setTimelineContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getTimelineContext() {
+    return getContext(KEY);
+}

package/dist/timeline/index.d.ts

@@ -0,0 +1,10 @@
+import Timeline_ from './Timeline.svelte';
+import TimelineItem from './TimelineItem.svelte';
+export declare const Timeline: typeof Timeline_ & {
+    Item: typeof TimelineItem;
+};
+export { TimelineItem };
+export { meta as timelineMeta } from './meta.js';
+export type { TimelineItemData } from './types.js';
+export { getTimelineContext, setTimelineContext, type TimelineContext, type TimelineLineStyle, } from './context.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,GAAG;IACxC,IAAI,EAAE,OAAO,YAAY,CAAC;CACwB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAC"}

package/dist/timeline/index.js

@@ -0,0 +1,6 @@
+import Timeline_ from './Timeline.svelte';
+import TimelineItem from './TimelineItem.svelte';
+export const Timeline = Object.assign(Timeline_, { Item: TimelineItem });
+export { TimelineItem };
+export { meta as timelineMeta } from './meta.js';
+export { getTimelineContext, setTimelineContext, } from './context.js';

package/dist/timeline/meta.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export declare const meta: {
+    readonly name: "Timeline";
+    readonly category: "show";
+    readonly description: "时间轴，按时间顺序垂直/水平展示一组事件。两种用法择一：传 dataSource 数据驱动，或不传 dataSource 而在 children 内写 <Timeline.Item> 声明式（可放任意富内容）。支持 left/right/alternate/center 模式、vertical/horizontal 方向、pending 幽灵节点、reverse 倒序与实/虚线样式；交替布局由纯 CSS :nth-child 决定，两种用法共用同一套结构与样式。";
+    readonly props: readonly [{
+        readonly name: "dataSource";
+        readonly type: "TimelineItemData[]";
+        readonly default: "[]";
+        readonly desc: "节点数据（数据驱动用法；优先于声明式 children）";
+    }, {
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "声明式用法：内嵌 <Timeline.Item> 列表，仅在未传 dataSource 时生效";
+    }, {
+        readonly name: "mode";
+        readonly type: "'left'|'right'|'alternate'|'center'";
+        readonly default: "left";
+        readonly desc: "right 轴线在右、内容靠右对齐（left 镜像）；center 轴线居中、两侧内容朝轴对称对齐";
+    }, {
+        readonly name: "direction";
+        readonly type: "'vertical'|'horizontal'";
+        readonly default: "vertical";
+        readonly desc: "时间轴方向";
+    }, {
+        readonly name: "reverse";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "倒序展示";
+    }, {
+        readonly name: "pending";
+        readonly type: "boolean|string";
+        readonly default: "false";
+        readonly desc: "末尾追加幽灵节点，string 作为其内容";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'|'large'";
+        readonly default: "default";
+    }, {
+        readonly name: "lineStyle";
+        readonly type: "'solid'|'dashed'";
+        readonly default: "solid";
+    }, {
+        readonly name: "virtualized";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "虚拟化：长时间轴只渲染视口内项（复用 core fixedRange；仅 dataSource 模式生效，强制 vertical 列布局，轴线靠固定项高连续）";
+    }, {
+        readonly name: "itemHeight";
+        readonly type: "number";
+        readonly default: "56";
+        readonly desc: "虚拟化固定项高（px）";
+    }, {
+        readonly name: "maxHeight";
+        readonly type: "number|string";
+        readonly default: "400";
+        readonly desc: "虚拟化视口最大高（px 数字或 CSS 字符串）";
+    }, {
+        readonly name: "overscan";
+        readonly type: "number";
+        readonly default: "3";
+        readonly desc: "虚拟化上下缓冲项数";
+    }, {
+        readonly name: "interactive";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "roving tabindex 键盘漫游：项可聚焦，↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 触发项 onClick";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
+    }];
+    readonly subComponents: readonly [{
+        readonly name: "Timeline.Item";
+        readonly desc: "声明式单项，渲染 dot/line/内容（children），与 dataSource 项视觉一致";
+        readonly props: readonly [{
+            readonly name: "dotColor";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "圆点颜色";
+        }, {
+            readonly name: "color";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "圆点颜色别名（与 dotColor 等价，dotColor 优先）";
+        }, {
+            readonly name: "type";
+            readonly type: "'default'|'ongoing'|'success'|'warning'|'error'";
+            readonly default: "undefined";
+            readonly desc: "语义类型，给圆点附加 cd-timeline__dot--{type} class";
+        }, {
+            readonly name: "dot";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+            readonly desc: "自定义圆点 snippet，提供时替代默认圆点";
+        }, {
+            readonly name: "lineStyle";
+            readonly type: "'solid'|'dashed'";
+            readonly default: "继承父 Timeline";
+            readonly desc: "单项连接线样式";
+        }, {
+            readonly name: "time";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "时间文本";
+        }, {
+            readonly name: "position";
+            readonly type: "'left'|'right'";
+            readonly default: "undefined";
+            readonly desc: "覆盖父 Timeline mode 的单项定位";
+        }, {
+            readonly name: "extra";
+            readonly type: "string | Snippet";
+            readonly default: "undefined";
+            readonly desc: "时间旁辅助内容";
+        }, {
+            readonly name: "onClick";
+            readonly type: "() => void";
+            readonly default: "undefined";
+            readonly desc: "interactive 模式下点击或 Enter/Space 触发";
+        }, {
+            readonly name: "children";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+            readonly desc: "项内容";
+        }];
+    }];
+    readonly a11y: {
+        readonly role: "list";
+        readonly notes: readonly ["ul/li 结构", "圆点与连接线 aria-hidden=true", "内容与时间为可读文本", "interactive：项 role=button + roving tabindex（焦点项 tabindex=0 其余 -1），↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 激活，aria-label 取节点内容"];
+    };
+    readonly tokens: readonly ["--cd-timeline-*", "--cd-radius-full", "--cd-spacing-1", "--cd-font-size-1"];
+};
+//# sourceMappingURL=meta.d.ts.map

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

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

package/dist/timeline/meta.js

@@ -0,0 +1,128 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * See specs/00-foundation/ai-friendly.spec.md.
+ */
+export const meta = {
+    name: 'Timeline',
+    category: 'show',
+    description: '时间轴，按时间顺序垂直/水平展示一组事件。两种用法择一：传 dataSource 数据驱动，或不传 dataSource 而在 children 内写 <Timeline.Item> 声明式（可放任意富内容）。支持 left/right/alternate/center 模式、vertical/horizontal 方向、pending 幽灵节点、reverse 倒序与实/虚线样式；交替布局由纯 CSS :nth-child 决定，两种用法共用同一套结构与样式。',
+    props: [
+        {
+            name: 'dataSource',
+            type: 'TimelineItemData[]',
+            default: '[]',
+            desc: '节点数据（数据驱动用法；优先于声明式 children）',
+        },
+        {
+            name: 'children',
+            type: 'Snippet',
+            default: 'undefined',
+            desc: '声明式用法：内嵌 <Timeline.Item> 列表，仅在未传 dataSource 时生效',
+        },
+        {
+            name: 'mode',
+            type: "'left'|'right'|'alternate'|'center'",
+            default: 'left',
+            desc: 'right 轴线在右、内容靠右对齐（left 镜像）；center 轴线居中、两侧内容朝轴对称对齐',
+        },
+        {
+            name: 'direction',
+            type: "'vertical'|'horizontal'",
+            default: 'vertical',
+            desc: '时间轴方向',
+        },
+        { name: 'reverse', type: 'boolean', default: 'false', desc: '倒序展示' },
+        {
+            name: 'pending',
+            type: 'boolean|string',
+            default: 'false',
+            desc: '末尾追加幽灵节点，string 作为其内容',
+        },
+        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
+        { name: 'lineStyle', type: "'solid'|'dashed'", default: 'solid' },
+        {
+            name: 'virtualized',
+            type: 'boolean',
+            default: 'false',
+            desc: '虚拟化：长时间轴只渲染视口内项（复用 core fixedRange；仅 dataSource 模式生效，强制 vertical 列布局，轴线靠固定项高连续）',
+        },
+        {
+            name: 'itemHeight',
+            type: 'number',
+            default: '56',
+            desc: '虚拟化固定项高（px）',
+        },
+        {
+            name: 'maxHeight',
+            type: 'number|string',
+            default: '400',
+            desc: '虚拟化视口最大高（px 数字或 CSS 字符串）',
+        },
+        {
+            name: 'overscan',
+            type: 'number',
+            default: '3',
+            desc: '虚拟化上下缓冲项数',
+        },
+        {
+            name: 'interactive',
+            type: 'boolean',
+            default: 'false',
+            desc: 'roving tabindex 键盘漫游：项可聚焦，↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 触发项 onClick',
+        },
+        { name: 'class', type: 'string', default: "''" },
+    ],
+    subComponents: [
+        {
+            name: 'Timeline.Item',
+            desc: '声明式单项，渲染 dot/line/内容（children），与 dataSource 项视觉一致',
+            props: [
+                { name: 'dotColor', type: 'string', default: 'undefined', desc: '圆点颜色' },
+                { name: 'color', type: 'string', default: 'undefined', desc: '圆点颜色别名（与 dotColor 等价，dotColor 优先）' },
+                {
+                    name: 'type',
+                    type: "'default'|'ongoing'|'success'|'warning'|'error'",
+                    default: 'undefined',
+                    desc: '语义类型，给圆点附加 cd-timeline__dot--{type} class',
+                },
+                { name: 'dot', type: 'Snippet', default: 'undefined', desc: '自定义圆点 snippet，提供时替代默认圆点' },
+                {
+                    name: 'lineStyle',
+                    type: "'solid'|'dashed'",
+                    default: '继承父 Timeline',
+                    desc: '单项连接线样式',
+                },
+                { name: 'time', type: 'string', default: 'undefined', desc: '时间文本' },
+                {
+                    name: 'position',
+                    type: "'left'|'right'",
+                    default: 'undefined',
+                    desc: '覆盖父 Timeline mode 的单项定位',
+                },
+                {
+                    name: 'extra',
+                    type: 'string | Snippet',
+                    default: 'undefined',
+                    desc: '时间旁辅助内容',
+                },
+                {
+                    name: 'onClick',
+                    type: '() => void',
+                    default: 'undefined',
+                    desc: 'interactive 模式下点击或 Enter/Space 触发',
+                },
+                { name: 'children', type: 'Snippet', default: 'undefined', desc: '项内容' },
+            ],
+        },
+    ],
+    a11y: {
+        role: 'list',
+        notes: [
+            'ul/li 结构',
+            '圆点与连接线 aria-hidden=true',
+            '内容与时间为可读文本',
+            'interactive：项 role=button + roving tabindex（焦点项 tabindex=0 其余 -1），↑↓/←→ 移动焦点、Home/End 跳首尾、Enter/Space 激活，aria-label 取节点内容',
+        ],
+    },
+    tokens: ['--cd-timeline-*', '--cd-radius-full', '--cd-spacing-1', '--cd-font-size-1'],
+};

package/dist/timeline/types.d.ts

@@ -0,0 +1,10 @@
+export interface TimelineItemData {
+    key?: string;
+    content: string;
+    time?: string;
+    color?: string;
+    dotColor?: string;
+    /** interactive 模式下按 Enter/Space 或点击该节点触发（非 interactive 时忽略）。 */
+    onClick?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/timeline/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/timeline/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/timeline/types.js

@@ -0,0 +1 @@
+export {};

package/dist/toast/Toast.a11y.test.d.ts

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

package/dist/toast/Toast.a11y.test.d.ts.map

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

package/dist/toast/Toast.a11y.test.js

@@ -0,0 +1,58 @@
+// Toast a11y：命令式单例 API（Toast.info 等）经惰性挂载容器渲染。
+// Toast 的播报模型与多数库不同：卡片本身 role=presentation + aria-live=off（不充当 live
+// region），所有文案播报统一走单例 live region（live-region.ts），避免每卡各自 region 的
+// 重复/竞争。故拆两部分测：
+//  1) ToastItem 纯展示卡片：role=presentation + aria-live=off，关闭按钮 locale 可访问名，axe 0。
+//  2) live region：announce() 命令式写入 body 内 role=status（polite）/ role=alert（assertive）节点。
+// jsdom 只断言静态 ARIA + axe。
+import { describe, it, expect, afterEach } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import ToastItemRaw from './ToastItem.svelte';
+import { announce, __resetLiveRegion } from './live-region.js';
+// ToastItem 有必填 props（toast/onClose/...）；测试帮手用宽松 Record 构造器签名，
+// 故在此把组件转为宽松类型（props 实际值在调用处提供，运行时安全）。
+const ToastItem = ToastItemRaw;
+const noop = () => { };
+function makeToast(overrides = {}) {
+    return {
+        id: 't1',
+        content: 'Copied to clipboard',
+        type: 'success',
+        duration: 3,
+        position: 'top',
+        closable: true,
+        pauseOnHover: true,
+        theme: 'light',
+        onClose: undefined,
+        ...overrides,
+    };
+}
+describe('Toast a11y', () => {
+    afterEach(() => {
+        __resetLiveRegion();
+    });
+    it('ToastItem 卡片：role=presentation + aria-live=off + 关闭按钮 locale 可访问名，无 axe violations', async () => {
+        const { container } = renderWithLocale(ToastItem, {
+            props: { toast: makeToast(), onClose: noop, onPause: noop, onResume: noop },
+        });
+        const card = container.querySelector('.cd-toast-item');
+        expect(card?.getAttribute('role')).toBe('presentation');
+        expect(card?.getAttribute('aria-live')).toBe('off');
+        expect(container.querySelector('.cd-toast-item__close')?.getAttribute('aria-label')).toBeTruthy();
+        await expectNoAxeViolations(container);
+    });
+    it('live region：polite 文案写入 role=status / aria-live=polite 节点', async () => {
+        announce('Saved', 'success');
+        const polite = document.querySelector('.cd-toast-live-region[aria-live="polite"]');
+        expect(polite?.getAttribute('role')).toBe('status');
+        expect(polite?.textContent).toBe('Saved');
+        await expectNoAxeViolations(document.body);
+    });
+    it('live region：error 文案写入 role=alert / aria-live=assertive 节点', async () => {
+        announce('Failed', 'error');
+        const assertive = document.querySelector('.cd-toast-live-region[aria-live="assertive"]');
+        expect(assertive?.getAttribute('role')).toBe('alert');
+        expect(assertive?.textContent).toBe('Failed');
+        await expectNoAxeViolations(document.body);
+    });
+});