@chenzy-design/svelte 0.1.0

package/src/locale-provider/meta.ts

@@ -0,0 +1,93 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * LocaleProvider — see specs/components/other/LocaleProvider.spec.md
+ */
+export const meta = {
+  name: 'LocaleProvider',
+  category: 'other',
+  renderless: true,
+  description:
+    '语言上下文注入组件，renderless 无 DOM 输出，通过 setContext 注入 LocaleApi（t/formatDate/formatNumber/direction）供后代组件消费；含回退链 + Intl 缓存 + direction 推断，是 ConfigProvider 的 locale 维度子集。locale 支持语言包对象或字符串码（registerLocale 注册表 + 内置查表解析）；嵌套时 inherit 深合并父级语言包（子覆盖父）；timeZone/currency 经 context 注入 formatDate/formatNumber。',
+  exports: ['LocaleProvider'],
+  props: [
+    {
+      name: 'locale',
+      type: 'Locale | string',
+      default: 'undefined',
+      desc: "语言包对象或字符串码（如 'zh_CN'/'en-US'）；字符串经 registerLocale 注册表 + 内置查表解析，未知码回退 en_US",
+    },
+    {
+      name: 'fallback',
+      type: 'Locale',
+      default: 'undefined',
+      desc: '缺失 key 回退包，默认内部用 en_US',
+    },
+    {
+      name: 'direction',
+      type: "'ltr'|'rtl'|'auto'",
+      default: "'auto'",
+      desc: "文本方向，'auto' 按 locale.rtl 推断",
+    },
+    {
+      name: 'inherit',
+      type: 'boolean',
+      default: 'true',
+      desc: '嵌套时深合并父级 LocaleProvider 语言包（子覆盖父，未覆盖继承父）；false 则整体替换',
+    },
+    {
+      name: 'timeZone',
+      type: 'string',
+      default: 'undefined',
+      desc: "默认 IANA 时区（如 'Asia/Shanghai'）注入 formatDate；未设时继承父级",
+    },
+    {
+      name: 'currency',
+      type: 'string',
+      default: 'undefined',
+      desc: "默认 ISO 4217 货币（如 'CNY'）用于 currency 风格 formatNumber；未设时继承父级",
+    },
+  ],
+  events: [{ name: 'onLocaleChange', desc: 'locale/direction 变化时通知（受控，不回写）' }],
+  slots: [
+    {
+      name: 'children',
+      desc: '作用域参数 { locale, t, formatDate, formatNumber, direction }',
+    },
+  ],
+  a11y: {
+    hasRole: false,
+    note: '无 DOM 无 role；推荐宿主监听 onLocaleChange 同步 html lang/dir 满足 WCAG 3.1.2；renderless 不丢焦点。',
+  },
+  tokens: [],
+  responsive: false,
+  examples: [
+    {
+      title: '基础包裹',
+      code: '<LocaleProvider {locale}>{@render app()}</LocaleProvider>',
+    },
+    {
+      title: '局部覆盖',
+      code: '<LocaleProvider locale={en_US}>{@render section()}</LocaleProvider>',
+    },
+    {
+      title: 'slot 作用域格式化',
+      code: '<LocaleProvider {locale}>{#snippet children({ t, formatNumber })}{t("Modal.okText")} {formatNumber(1234.5)}{/snippet}</LocaleProvider>',
+    },
+    {
+      title: '字符串码解析',
+      code: '<LocaleProvider locale="en_US">{@render app()}</LocaleProvider>',
+    },
+    {
+      title: '注册自定义包后用码',
+      code: "registerLocale('fr_FR', fr); // 再 <LocaleProvider locale=\"fr_FR\">…",
+    },
+    {
+      title: '嵌套 inherit 深合并',
+      code: '<LocaleProvider locale={zh_CN}>{@render outer()}<LocaleProvider locale={{ Modal: { okText: "好的" } }}>{@render inner()}</LocaleProvider></LocaleProvider>',
+    },
+    {
+      title: '时区 / 货币',
+      code: '<LocaleProvider locale="zh_CN" timeZone="Asia/Shanghai" currency="CNY">{@render app()}</LocaleProvider>',
+    },
+  ],
+} as const;

package/src/locale-provider/use-locale.ts

@@ -0,0 +1,25 @@
+import { createLocale, en_US, type LocaleApi } from '@chenzy-design/locale';
+import { getLocaleContext } from './index.js';
+
+// 无 Provider 时的回退实例：用 en_US 构造一次并缓存（模块级单例），
+// 避免每个未被 LocaleProvider 包裹的组件各自重建 createLocale。
+let fallbackApi: LocaleApi | undefined;
+function getFallbackApi(): LocaleApi {
+  if (!fallbackApi) fallbackApi = createLocale({ locale: en_US });
+  return fallbackApi;
+}
+
+/**
+ * 统一的 locale 消费入口。组件在 `<script>` 顶层（初始化期）调用一次拿到
+ * 一个稳定 getter，再在 `$derived` 里读 `loc().t('Component.field')`。
+ *
+ * - 有 `<LocaleProvider>` 包裹：返回最近注入的 LocaleApi（随语言切换响应更新）。
+ * - 无 Provider：回退到 en_US 构造的 LocaleApi（不崩溃、不渲染空串）。
+ *
+ * 返回函数而非直接返回 api：context 的 `{ current }` 是 getter，必须在
+ * 渲染期重新读取才能在语言切换后拿到新 api，故包成 `() => LocaleApi`。
+ */
+export function useLocale(): () => LocaleApi {
+  const ctx = getLocaleContext();
+  return () => ctx?.current ?? getFallbackApi();
+}

package/src/lottie-icon/LottieIcon.svelte

@@ -0,0 +1,330 @@
+<!--
+  LottieIcon — see specs/components/other/LottieIcon.spec.md
+  依赖注入 player：组件不绑定 lottie-web，用户传入 player 工厂（库零外部重依赖）。
+  红线 #1：trigger/autoplay 等是受控输入，组件不回写。
+  红线 #3：adapter（player 注入）在 $effect 命令式创建 + cleanup destroy；matchMedia 订阅同样 cleanup 解绑；
+           src fetch 用 AbortController，effect cleanup 中 abort + 丢弃过期响应。
+  src：除内联 data 外可传 URL，异步 fetch Lottie JSON；加载中 skeleton、失败态 error（文案经 locale）。
+  segments：[start,end] 帧段或命名 marker（resolveSegments 解析）→ 经 adapter.playSegments / factory segment 初始段。
+  flipRtl：RTL 场景水平镜像（transform scaleX(-1)）。
+  prefers-reduced-motion：animated=false 时定位首帧并暂停（goToFrame），系统变化经 matchMedia 实时生效。
+  a11y：decorative=true → aria-hidden；decorative=false → role=img + aria-label；不可聚焦。
+-->
+<script lang="ts">
+  import {
+    resolveSize,
+    resolveAnimated,
+    shouldAutoplay,
+    resolveSegments,
+    isLottieSrc,
+    resolveRenderer,
+    type LottieTrigger,
+    type LottieSize,
+    type LottieSegments,
+    type LottieRenderer,
+    type LottiePlayerAdapter,
+    type LottiePlayerFactory,
+  } from '@chenzy-design/core';
+  import { useLocale } from '../locale-provider/index.js';
+
+  interface Props {
+    /** Lottie JSON 数据（内联）。与 src 二选一；同时存在时 data 优先。 */
+    data?: unknown;
+    /** Lottie JSON 动画 URL，异步 fetch 加载（除内联 data 外的来源）。 */
+    src?: string;
+    /** 必填：用户注入的 player 工厂（包装 lottie-web 等），库不内置 */
+    player: LottiePlayerFactory;
+    /** 播放指定帧段：[start,end] 帧对或命名 marker（按动画 markers 解析）。 */
+    segments?: LottieSegments;
+    /** RTL 场景水平镜像动画（transform scaleX(-1)）。 */
+    flipRtl?: boolean;
+    /** 受控显隐（默认 true）：false 时隐藏并暂停动画，true 恢复播放。组件不回写（红线 #1）。 */
+    visible?: boolean;
+    /** 便捷开关：true 时用 canvas 渲染后端（等价 renderer='canvas'）。 */
+    canvas?: boolean;
+    /** 渲染后端（'svg'|'canvas'|'html'），经 adapter 透传；优先于 canvas。未设时默认 svg。 */
+    renderer?: LottieRenderer;
+    size?: LottieSize | number;
+    color?: string;
+    trigger?: LottieTrigger;
+    autoplay?: boolean;
+    loop?: boolean | number;
+    speed?: number;
+    reducedMotion?: boolean;
+    decorative?: boolean;
+    label?: string;
+    class?: string;
+    style?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    /** src 加载成功回调（透出原始动画数据）。 */
+    onLoad?: (data: unknown) => void;
+    /** src 加载失败回调。 */
+    onError?: (err: unknown) => void;
+  }
+
+  let {
+    data,
+    src,
+    player,
+    segments,
+    flipRtl = false,
+    visible = true,
+    canvas = false,
+    renderer,
+    size = 'default',
+    color,
+    trigger = 'auto',
+    autoplay = true,
+    loop = true,
+    speed = 1,
+    reducedMotion,
+    decorative = true,
+    label,
+    class: className,
+    style,
+    onPlay,
+    onPause,
+    onLoad,
+    onError,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  // bind:this 挂载点；lottie-web 等会往容器内注入 svg/canvas。
+  let container = $state<HTMLElement | null>(null);
+  // 系统 reduced-motion；matchMedia 命令式监听（cleanup 解绑）。
+  let systemReduced = $state(false);
+  // adapter 由 player 工厂创建，$effect 命令式生命周期。
+  // $state：供下方 visible effect 在 adapter 创建/销毁后重新协调 play/pause。
+  let adapter = $state<LottiePlayerAdapter | null>(null);
+
+  // src fetch 结果（不回写 data prop，受控不污染）；状态机驱动 skeleton/error。
+  let fetched = $state<unknown>(undefined);
+  let status = $state<'idle' | 'loading' | 'error'>('idle');
+
+  const animated = $derived(resolveAnimated(reducedMotion, systemReduced));
+  const px = $derived(resolveSize(size));
+  // 实际渲染数据：内联 data 优先，其次 src fetch 结果。
+  const activeData = $derived(data != null ? data : fetched);
+  // 解析后的帧段（纯函数）；null 表示整段播放。
+  const segment = $derived(resolveSegments(segments, activeData));
+  // 渲染后端（纯函数）：renderer 优先，其次 canvas→'canvas'；undefined 表示沿用 adapter 默认（svg）。
+  const renderBackend = $derived(resolveRenderer(canvas, renderer));
+
+  // matchMedia 订阅系统 reduced-motion，cleanup 解绑。
+  $effect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    systemReduced = mq.matches;
+    const handler = (e: MediaQueryListEvent) => {
+      systemReduced = e.matches;
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  });
+
+  // src fetch：内联 data 缺省且 src 为 URL 时异步加载。
+  // 红线 #3：AbortController + cleanup abort；effect 重跑/卸载丢弃过期响应。
+  $effect(() => {
+    // 内联 data 优先，存在时无需 fetch。
+    if (data != null || !isLottieSrc(src)) {
+      status = 'idle';
+      return;
+    }
+    const url = src;
+    const controller = new AbortController();
+    let cancelled = false;
+    status = 'loading';
+    fetched = undefined;
+    fetch(url, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((json) => {
+        if (cancelled) return;
+        fetched = json;
+        status = 'idle';
+        onLoad?.(json);
+      })
+      .catch((err) => {
+        if (cancelled || controller.signal.aborted) return;
+        status = 'error';
+        onError?.(err);
+      });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  });
+
+  // player 生命周期：container + data 就绪时创建 adapter，cleanup 销毁。
+  // 依赖 container/activeData/animated/player + 配置项 + 解析后 segment + 渲染后端；变化重建 adapter（可接受）。
+  // 注意：不依赖 visible——显隐切换由下方独立 effect 命令式 play/pause 控制，避免无谓重建。
+  $effect(() => {
+    if (!container || activeData == null) return;
+    const willAutoplay = shouldAutoplay(trigger, autoplay, animated);
+    const a = player({
+      container,
+      data: activeData,
+      loop,
+      autoplay: willAutoplay,
+      speed,
+      ...(segment ? { segment } : {}),
+      ...(renderBackend ? { renderer: renderBackend } : {}),
+    });
+    adapter = a;
+    // 有帧段且应当播放：命令式播放指定段（player 未实现 playSegments 时已由 factory segment 兜底）。
+    if (segment && willAutoplay && a.playSegments) {
+      a.playSegments(segment);
+    }
+    // reduced-motion：定位首帧并暂停（静止渲染首帧）。
+    if (!animated && a.goToFrame) {
+      a.goToFrame(segment ? segment[0] : 0);
+      a.pause();
+    }
+    return () => {
+      a.destroy();
+      adapter = null;
+    };
+  });
+
+  // 受控 visible：命令式控制 player play/pause（红线 #3）。不回写 visible（红线 #1）。
+  // visible=false → 暂停（容器同时 display:none 隐藏）；visible=true 且允许动画 → 按触发方式恢复播放。
+  // reduced-motion（animated=false）下保持静止首帧，不强行起播。
+  $effect(() => {
+    const a = adapter;
+    if (!a) return;
+    if (!visible) {
+      a.pause();
+      return;
+    }
+    // 恢复显隐：仅 auto + autoplay 场景自动续播；hover/manual 维持当前态由用户驱动。
+    if (animated && shouldAutoplay(trigger, autoplay, animated)) {
+      if (segment && a.playSegments) a.playSegments(segment);
+      else a.play();
+    }
+  });
+
+  // 命令式方法，供 bind:this 调用。
+  export function play() {
+    if (animated) {
+      if (segment && adapter?.playSegments) adapter.playSegments(segment);
+      else adapter?.play();
+      onPlay?.();
+    }
+  }
+  export function pause() {
+    adapter?.pause();
+    onPause?.();
+  }
+  export function stop() {
+    adapter?.stop();
+  }
+
+  function handleEnter() {
+    if (animated) {
+      if (segment && adapter?.playSegments) adapter.playSegments(segment);
+      else adapter?.play();
+      onPlay?.();
+    }
+  }
+  function handleLeave() {
+    adapter?.pause();
+    onPause?.();
+  }
+</script>
+
+<i
+  class={[
+    'cd-lottie-icon',
+    flipRtl && 'cd-lottie-icon--flip-rtl',
+    !visible && 'cd-lottie-icon--hidden',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')}
+  bind:this={container}
+  style="--cd-lottieicon-current-size:{px}px; {color
+    ? `--cd-lottieicon-color:${color};`
+    : ''} {style ?? ''}"
+  aria-hidden={decorative ? 'true' : undefined}
+  role={decorative ? undefined : 'img'}
+  aria-label={decorative
+    ? undefined
+    : status === 'loading'
+      ? loc().t('LottieIcon.loading')
+      : status === 'error'
+        ? loc().t('LottieIcon.loadError')
+        : (label ?? undefined)}
+  data-status={status === 'idle' ? undefined : status}
+  onmouseenter={trigger === 'hover' ? handleEnter : undefined}
+  onmouseleave={trigger === 'hover' ? handleLeave : undefined}
+>
+  {#if status === 'loading'}
+    <span class="cd-lottie-icon__skeleton" aria-hidden="true"></span>
+  {/if}
+</i>
+
+<style>
+  .cd-lottie-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--cd-lottieicon-current-size, var(--cd-lottieicon-size));
+    block-size: var(--cd-lottieicon-current-size, var(--cd-lottieicon-size));
+    color: var(--cd-lottieicon-color);
+    vertical-align: var(--cd-lottieicon-valign);
+  }
+
+  /* RTL 镜像：水平翻转动画内容 */
+  .cd-lottie-icon--flip-rtl {
+    transform: scaleX(-1);
+  }
+
+  /* 受控隐藏：display:none（不占位）；adapter 已在 effect cleanup 中销毁/暂停 */
+  .cd-lottie-icon--hidden {
+    display: none;
+  }
+
+  /* player 注入的内容撑满容器 */
+  .cd-lottie-icon :global(svg),
+  .cd-lottie-icon :global(canvas) {
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+  }
+
+  /* src 加载中骨架占位 */
+  .cd-lottie-icon__skeleton {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--cd-lottieicon-radius);
+    background: var(--cd-lottieicon-bg-skeleton);
+    animation: cd-lottieicon-pulse 1.2s ease-in-out infinite;
+  }
+
+  /* src 加载失败：边框提示色 */
+  .cd-lottie-icon[data-status='error'] {
+    color: var(--cd-lottieicon-error-color);
+    border-radius: var(--cd-lottieicon-radius);
+    box-shadow: inset 0 0 0 1px currentColor;
+  }
+
+  @keyframes cd-lottieicon-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cd-lottie-icon__skeleton {
+      animation: none;
+    }
+  }
+</style>

package/src/lottie-icon/index.ts

@@ -0,0 +1,9 @@
+export { default as LottieIcon } from './LottieIcon.svelte';
+export { meta as lottieIconMeta } from './meta.js';
+export type {
+  LottiePlayerAdapter,
+  LottiePlayerFactory,
+  LottieTrigger,
+  LottieSize,
+  LottieSegments,
+} from '@chenzy-design/core';

package/src/lottie-icon/meta.ts

@@ -0,0 +1,162 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * LottieIcon — see specs/components/other/LottieIcon.spec.md
+ */
+export const meta = {
+  name: 'LottieIcon',
+  category: 'other',
+  description:
+    'Lottie 动画图标：依赖注入 player 工厂（库不绑定 lottie-web，用户自带），data 内联 JSON 或 src URL 异步 fetch（AbortController + 加载中 skeleton / 失败 error 态），size/color/trigger(auto/hover/manual)/loop/speed 播放控制，segments 帧段([start,end]或命名 marker)，flipRtl RTL 水平镜像，visible 受控显隐（false 暂停+display:none），canvas/renderer 渲染后端(svg/canvas/html，经 adapter 透传)，命令式 play/pause/stop，prefers-reduced-motion 降级首帧静止，decorative aria-hidden / 功能性 role=img+label。',
+  exports: ['LottieIcon'],
+  props: [
+    {
+      name: 'data',
+      type: 'unknown',
+      default: 'undefined',
+      desc: 'Lottie JSON 数据（内联）；与 src 二选一，同时存在时 data 优先',
+    },
+    {
+      name: 'src',
+      type: 'string',
+      default: 'undefined',
+      desc: 'Lottie JSON 动画 URL，异步 fetch 加载（AbortController + 加载中/失败态）',
+    },
+    {
+      name: 'player',
+      type: 'LottiePlayerFactory',
+      default: 'undefined',
+      desc: '必填：用户注入的 player 工厂（包装 lottie-web 等），库不内置',
+    },
+    {
+      name: 'segments',
+      type: '[number, number] | string',
+      default: 'undefined',
+      desc: '播放指定帧段：[start,end] 帧对或命名 marker（按动画 markers 解析）',
+    },
+    {
+      name: 'flipRtl',
+      type: 'boolean',
+      default: 'false',
+      desc: 'RTL 场景水平镜像动画（transform scaleX(-1)）',
+    },
+    {
+      name: 'visible',
+      type: 'boolean',
+      default: 'true',
+      desc: '受控显隐：false 时 display:none 并命令式暂停动画，true 恢复（auto+autoplay 自动续播）；组件不回写',
+    },
+    {
+      name: 'canvas',
+      type: 'boolean',
+      default: 'false',
+      desc: '便捷开关：true 时用 canvas 渲染后端（等价 renderer="canvas"），经 adapter 透传',
+    },
+    {
+      name: 'renderer',
+      type: "'svg'|'canvas'|'html'",
+      default: 'undefined',
+      desc: '渲染后端，经 adapter 的 renderer 参数透传（优先于 canvas）；未设时默认 svg，旧 adapter 不破坏',
+    },
+    {
+      name: 'size',
+      type: "'small'|'default'|'large'|number",
+      default: "'default'",
+      desc: '尺寸 token 或 px 数值',
+    },
+    {
+      name: 'color',
+      type: 'string',
+      default: 'undefined',
+      desc: '可着色图层色，默认继承 --cd-lottieicon-color',
+    },
+    {
+      name: 'trigger',
+      type: "'auto'|'hover'|'manual'",
+      default: "'auto'",
+      desc: '播放触发方式',
+    },
+    { name: 'autoplay', type: 'boolean', default: 'true', desc: 'auto 触发时是否自动播放' },
+    { name: 'loop', type: 'boolean|number', default: 'true', desc: '循环开关或循环次数' },
+    { name: 'speed', type: 'number', default: '1', desc: '播放速度' },
+    {
+      name: 'reducedMotion',
+      type: 'boolean',
+      default: 'undefined',
+      desc: '强制降级开关；未设跟随系统 prefers-reduced-motion',
+    },
+    {
+      name: 'onLoad',
+      type: '(data: unknown) => void',
+      default: 'undefined',
+      desc: 'src 加载成功回调',
+    },
+    {
+      name: 'onError',
+      type: '(err: unknown) => void',
+      default: 'undefined',
+      desc: 'src 加载失败回调',
+    },
+    {
+      name: 'decorative',
+      type: 'boolean',
+      default: 'true',
+      desc: 'true 装饰性 aria-hidden；false 时必须给 label',
+    },
+    {
+      name: 'label',
+      type: 'string',
+      default: 'undefined',
+      desc: '功能性图标无障碍名（decorative=false 必填）',
+    },
+  ],
+  events: [
+    { name: 'onPlay', desc: '开始播放回调' },
+    { name: 'onPause', desc: '暂停回调' },
+    { name: 'onLoad', desc: 'src 加载成功回调（透出动画数据）' },
+    { name: 'onError', desc: 'src 加载失败回调' },
+  ],
+  slots: [],
+  a11y: {
+    hasRole: true,
+    focusable: false,
+    note: 'decorative=true 时 aria-hidden；decorative=false 时 role=img + aria-label；不可聚焦（无 tabindex）；reduced-motion 时不播放，渲染静止首帧。',
+  },
+  tokens: [
+    '--cd-lottieicon-size',
+    '--cd-lottieicon-size-small',
+    '--cd-lottieicon-size-large',
+    '--cd-lottieicon-color',
+    '--cd-lottieicon-color-hover',
+    '--cd-lottieicon-bg-skeleton',
+    '--cd-lottieicon-radius',
+    '--cd-lottieicon-error-color',
+    '--cd-lottieicon-valign',
+  ],
+  responsive: false,
+  examples: [
+    {
+      title: 'auto 自动播放',
+      code: '<LottieIcon {data} player={makePlayer} />',
+    },
+    {
+      title: 'hover 触发',
+      code: '<LottieIcon {data} player={makePlayer} trigger="hover" />',
+    },
+    {
+      title: 'reduced-motion 降级（首帧静止）',
+      code: '<LottieIcon {data} player={makePlayer} reducedMotion />',
+    },
+    {
+      title: 'src URL 异步加载',
+      code: '<LottieIcon src="/anim/like.json" player={makePlayer} />',
+    },
+    {
+      title: 'segments 帧段播放',
+      code: '<LottieIcon {data} player={makePlayer} segments={[10, 60]} />',
+    },
+    {
+      title: 'flipRtl RTL 镜像',
+      code: '<LottieIcon {data} player={makePlayer} flipRtl />',
+    },
+  ],
+} as const;

package/src/menu/Menu.a11y.test.ts

@@ -0,0 +1,54 @@
+// Menu a11y：数据驱动导航菜单。
+// 容器 ul[role=menu]（horizontal 为 menubar），叶子 button[role=menuitem]，
+// 单选选中项 aria-current=true，多选叶子 role=menuitemcheckbox + aria-checked。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Menu from './Menu.svelte';
+
+const items = [
+  { key: 'home', label: 'Home' },
+  { key: 'profile', label: 'Profile' },
+  { key: 'settings', label: 'Settings' },
+];
+
+describe('Menu a11y', () => {
+  it('默认渲染：role=menu + menuitem，无 axe violations', async () => {
+    const { container } = renderWithLocale(Menu, {
+      props: { items, ariaLabel: 'Main menu' },
+    });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).not.toBeNull();
+    expect(menu?.getAttribute('aria-label')).toBe('Main menu');
+    const menuitems = container.querySelectorAll('[role="menuitem"]');
+    expect(menuitems.length).toBe(3);
+    await expectNoAxeViolations(container);
+  });
+
+  it('单选选中态：选中叶子 aria-current=true', async () => {
+    const { container } = renderWithLocale(Menu, {
+      props: { items, ariaLabel: 'Nav', defaultSelectedKeys: ['profile'] },
+    });
+    const current = container.querySelector('[role="menuitem"][aria-current="true"]');
+    expect(current?.textContent).toContain('Profile');
+    await expectNoAxeViolations(container);
+  });
+
+  it('horizontal 模式：容器 role=menubar', async () => {
+    const { container } = renderWithLocale(Menu, {
+      props: { items, ariaLabel: 'Top', mode: 'horizontal' },
+    });
+    expect(container.querySelector('[role="menubar"]')).not.toBeNull();
+    await expectNoAxeViolations(container);
+  });
+
+  it('multiple：叶子 role=menuitemcheckbox + aria-checked', async () => {
+    const { container } = renderWithLocale(Menu, {
+      props: { items, ariaLabel: 'Multi', multiple: true, defaultSelectedKeys: ['home'] },
+    });
+    const checkboxes = container.querySelectorAll('[role="menuitemcheckbox"]');
+    expect(checkboxes.length).toBe(3);
+    const checked = container.querySelector('[role="menuitemcheckbox"][aria-checked="true"]');
+    expect(checked?.textContent).toContain('Home');
+    await expectNoAxeViolations(container);
+  });
+});