@chenzy-design/svelte 0.1.0

package/dist/menu/Menu.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { MenuItemDef, MenuItemNode, MenuKey, MenuPurpose } from './types.js';
+type Mode = 'vertical' | 'inline' | 'horizontal';
+type Size = 'small' | 'default' | 'large';
+type Status = 'default' | 'warning' | 'error';
+type TriggerSubMenuAction = 'hover' | 'click';
+interface TooltipProps {
+    content?: string;
+    position?: string;
+    theme?: 'dark' | 'light';
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+}
+interface Props {
+    items?: MenuItemDef[];
+    mode?: Mode;
+    selectedKeys?: MenuKey[];
+    defaultSelectedKeys?: MenuKey[];
+    openKeys?: MenuKey[];
+    defaultOpenKeys?: MenuKey[];
+    size?: Size;
+    inlineIndent?: number;
+    /** inline 模式下折叠为图标轨：仅显图标、容器变窄，有子菜单的项 hover 向右弹浮层 */
+    inlineCollapsed?: boolean;
+    /** 多选模式：点击叶子项 toggle 其选中态，selectedKeys 可含多项同时高亮（默认单选） */
+    multiple?: boolean;
+    /**
+     * 浮层子菜单触发方式（仅 vertical/horizontal/collapsed 浮层模式生效）：
+     * 'hover'（默认推导）= 鼠标悬停带 open/close 延迟展开/收起；
+     * 'click' = 点击 title 切换浮层（不随 hover 开合）。
+     * 缺省时按 mode 推导：horizontal 默认 hover，其余 hover（inline 内联不涉及浮层）。
+     */
+    triggerSubMenuAction?: TriggerSubMenuAction;
+    /** hover 触发时子菜单浮层展开延迟(ms) */
+    subMenuOpenDelay?: number;
+    /** hover 触发时子菜单浮层收起延迟(ms) */
+    subMenuCloseDelay?: number;
+    /** 浮层子菜单挂载容器，缺省 document.body（透传 floating action getContainer） */
+    getPopupContainer?: () => HTMLElement | null | undefined;
+    /**
+     * 校验态（用于表单内菜单选择，少见）：'default' | 'warning' | 'error'。
+     * 非 default 时给根节点加 cd-menu--{status} 类并以 token 着色选中指示条/边框，
+     * error 时根节点 aria-invalid=true。默认 'default'。
+     */
+    status?: Status;
+    /**
+     * 浮层子菜单隐藏时是否卸载其内容 DOM（默认 false：保留 DOM 仅隐藏，重显不重建）。
+     * 仅作用于 vertical/horizontal/collapsed 浮层模式的 hover/click 子菜单浮层；
+     * inline 内联展开不涉及浮层，始终随展开态挂载/卸载。
+     */
+    destroyOnHide?: boolean;
+    /** 整体禁用：所有项不可交互（叶子/子菜单 title 均 disabled） */
+    disabled?: boolean;
+    /**
+     * 语义用途（默认 'menu'）：
+     * 'menu' = 命令式菜单（role=menu/menuitem + roving，执行操作）；
+     * 'navigation' = 站点导航（nav landmark + 含 href 叶子渲染 <a>，原生链接语义）。
+     */
+    purpose?: MenuPurpose;
+    onSelect?: (key: MenuKey) => void;
+    onOpenChange?: (keys: MenuKey[]) => void;
+    ariaLabel?: string;
+    /**
+     * 折叠模式（inlineCollapsed=true）下顶层项的 Tooltip 配置。
+     * content 默认为项 label；position→placement、theme、mouseEnterDelay、mouseLeaveDelay 透传给 Tooltip。
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * 自定义叶子项内容包裹 Snippet，接收 { item, children }。
+     * children 为默认的 <a> 或 <button>，可在外层包一层自定义容器。
+     */
+    renderWrapper?: Snippet<[{
+        item: MenuItemNode;
+        children: Snippet;
+    }]>;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;
+//# sourceMappingURL=Menu.svelte.d.ts.map

package/dist/menu/Menu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../../src/menu/Menu.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAGhF,KAAK,IAAI,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;AACjD,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,oBAAoB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;CACtE;AA6ZH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/menu/MenuKbdFixture.svelte

@@ -0,0 +1,22 @@
+<!--
+  仅供 Menu.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
+  外层 LocaleProvider 提供 context；菜单前放一个「before」按钮，
+  用于验证 Tab 从 before 进入菜单时只停靠在单一 menuitem（roving 单停靠点），
+  而非逐个 menuitem 都进 Tab 序。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import Menu from './Menu.svelte';
+
+  const items = [
+    { key: 'home', label: 'Home' },
+    { key: 'profile', label: 'Profile' },
+    { key: 'settings', label: 'Settings' },
+  ];
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before">before</button>
+  <Menu {items} ariaLabel="Main menu" mode="vertical" />
+  <button type="button" data-testid="after">after</button>
+</LocaleProvider>

package/dist/menu/MenuKbdFixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MenuKbdFixture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MenuKbdFixture = InstanceType<typeof MenuKbdFixture>;
+export default MenuKbdFixture;
+//# sourceMappingURL=MenuKbdFixture.svelte.d.ts.map

package/dist/menu/MenuKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/menu/MenuKbdFixture.svelte.ts"],"names":[],"mappings":"AA0BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;kBAA+E,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/menu/MenuPopupNode.svelte

@@ -0,0 +1,525 @@
+<!--
+  MenuPopupNode — vertical 模式下的单个菜单项（递归）。
+  叶子: 普通 menuitem; SubMenu: title + hover 弹出浮层 (use:floating, rightStart)。
+  浮层内继续递归 MenuPopupNode，形成多级 hover 子菜单。
+  hover 意图: 进入 title 延迟开、离开 title 与浮层组延迟关 (closeDelay)，
+  指针移入浮层时取消关闭计时，避免 title→浮层 缝隙抖动。
+  定时器/floating 均命令式管理 + cleanup (红线 #3)。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { floating } from '../_floating/use-floating.js';
+  import type { Placement } from '@chenzy-design/core';
+  import { isDivider, isGroup } from './types.js';
+  import type { MenuItemDef, MenuItemNode, MenuKey } from './types.js';
+  import Self from './MenuPopupNode.svelte';
+  import { Tooltip } from '../tooltip/index.js';
+
+  interface TooltipProps {
+    content?: string;
+    position?: string;
+    theme?: 'dark' | 'light';
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+  }
+
+  interface Props {
+    item: MenuItemDef;
+    /** 顶层节点用 bottomStart 弹出向下，嵌套层用 rightStart 向右 */
+    placement: Placement;
+    isSelected: (key: MenuKey) => boolean;
+    onSelectLeaf: (item: MenuItemNode) => void;
+    /** 选中叶子后自顶向下逐级关闭浮层 */
+    onCloseAll: () => void;
+    openDelay?: number;
+    closeDelay?: number;
+    /** 折叠图标轨：仅本节点（顶层）隐藏文字 label、只显图标，浮层内子项不受影响 */
+    collapsed?: boolean;
+    /** 多选模式：选中叶子显勾选标记并用 aria-checked/menuitemcheckbox 语义 */
+    multiple?: boolean;
+    /** navigation 用途：含 href 叶子渲染原生 <a href>，结构去除 menu/menuitem role（原生链接语义） */
+    navigation?: boolean;
+    /** 浮层子菜单触发方式：'hover'（默认）随悬停开合 / 'click' 点击 title 切换 */
+    trigger?: 'hover' | 'click';
+    /** 浮层子菜单挂载容器（透传 floating action getContainer） */
+    getPopupContainer?: (() => HTMLElement | null | undefined) | undefined;
+    /** 整体禁用（来自父 Menu disabled）：叠加单项 disabled */
+    parentDisabled?: boolean;
+    /** 浮层隐藏时是否卸载内容 DOM（默认 false：保留 DOM 仅隐藏，重显不重建） */
+    destroyOnHide?: boolean;
+    /**
+     * 折叠模式下顶层项的 Tooltip 配置。content 默认为项 label；
+     * position→placement、theme、mouseEnterDelay、mouseLeaveDelay 透传给 Tooltip。
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * 自定义每个叶子项内容的包裹 Snippet，接收 { item, children }。
+     * children 为默认的 <a> 或 <button> 内容 snippet。
+     */
+    renderWrapper?: Snippet<[{ item: MenuItemNode; children: Snippet }]>;
+  }
+
+  let {
+    item,
+    placement,
+    isSelected,
+    onSelectLeaf,
+    onCloseAll,
+    openDelay = 100,
+    closeDelay = 200,
+    collapsed = false,
+    multiple = false,
+    navigation = false,
+    trigger = 'hover',
+    getPopupContainer,
+    parentDisabled = false,
+    destroyOnHide = false,
+    tooltipProps,
+    renderWrapper,
+  }: Props = $props();
+
+  // 分隔符/分组在模板顶层单独处理；此处统一窄化为普通项节点供后续派生使用。
+  const node = $derived(item as MenuItemNode);
+  // 折叠态无图标时取 label 首字符兜底显示，保证轨上仍有可视标识。
+  const firstChar = $derived([...(node.label ?? '')][0] ?? '');
+
+  const hasChildren = $derived(!!node.children && node.children.length > 0);
+  // 整体 disabled（parentDisabled）叠加单项 disabled。
+  const itemDisabled = $derived(parentDisabled || !!node.disabled);
+
+  let titleEl = $state<HTMLButtonElement | null>(null);
+  let open = $state(false);
+
+  // destroyOnHide=false（默认）时浮层首开后保留 DOM 仅隐藏；true 时随 open 卸载/重建。
+  let hasOpened = $state(false);
+  $effect(() => {
+    if (open) hasOpened = true;
+  });
+  // 浮层是否渲染：destroyOnHide=true 仅 open 时渲染；false 时首开后持续渲染（隐藏由 class 控制）。
+  const shouldRenderSub = $derived(
+    !!titleEl && (destroyOnHide ? open : open || hasOpened),
+  );
+
+  let openTimer: ReturnType<typeof setTimeout> | undefined;
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function clearTimers() {
+    if (openTimer !== undefined) {
+      clearTimeout(openTimer);
+      openTimer = undefined;
+    }
+    if (closeTimer !== undefined) {
+      clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+
+  function scheduleOpen() {
+    if (trigger !== 'hover' || itemDisabled || !hasChildren) return;
+    if (closeTimer !== undefined) {
+      clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+    if (open) return;
+    openTimer = setTimeout(() => {
+      open = true;
+      openTimer = undefined;
+    }, openDelay);
+  }
+
+  function scheduleClose() {
+    if (trigger !== 'hover') return;
+    if (openTimer !== undefined) {
+      clearTimeout(openTimer);
+      openTimer = undefined;
+    }
+    if (!open) return;
+    closeTimer = setTimeout(() => {
+      open = false;
+      closeTimer = undefined;
+    }, closeDelay);
+  }
+
+  // 指针移入浮层 → 取消关闭计时，保持打开。
+  function keepOpen() {
+    if (closeTimer !== undefined) {
+      clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+
+  function closeNow() {
+    clearTimers();
+    open = false;
+  }
+
+  function onLeafClick() {
+    if (itemDisabled) return;
+    onSelectLeaf(node);
+    onCloseAll();
+  }
+
+  // click 触发模式：点击 title 切换浮层开合（hover 模式下点击不接管）。
+  function onTitleClick() {
+    if (trigger !== 'click' || itemDisabled || !hasChildren) return;
+    open = !open;
+  }
+
+  // 卸载兜底清理定时器。
+  $effect(() => clearTimers);
+</script>
+
+{#if isDivider(item)}
+  <li class="cd-menu__divider" role={navigation ? undefined : 'separator'}></li>
+{:else if isGroup(item)}
+  <li class="cd-menu__item cd-menu__item--group" role={navigation ? undefined : 'none'}>
+    {#if !collapsed}
+      <div class="cd-menu__group-title">{item.label}</div>
+    {/if}
+    <ul class="cd-menu__group-list" role={navigation ? undefined : 'group'} aria-label={item.label}>
+      {#each item.children as child, i (child.key ?? `__cd-menu-grp-${i}`)}
+        <Self
+          item={child}
+          {placement}
+          {collapsed}
+          {isSelected}
+          {multiple}
+          {navigation}
+          {trigger}
+          {getPopupContainer}
+          {parentDisabled}
+          {destroyOnHide}
+          {tooltipProps}
+          {renderWrapper}
+          {onSelectLeaf}
+          {onCloseAll}
+          {openDelay}
+          {closeDelay}
+        />
+      {/each}
+    </ul>
+  </li>
+{:else if hasChildren}
+  <li
+    class="cd-menu__item cd-menu__item--submenu"
+    role={navigation ? undefined : 'none'}
+    onpointerenter={scheduleOpen}
+    onpointerleave={scheduleClose}
+  >
+    {#snippet titleButton()}
+      <button
+        type="button"
+        class="cd-menu__title"
+        class:cd-menu__title--collapsed={collapsed}
+        role={navigation ? undefined : 'menuitem'}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-disabled={itemDisabled || undefined}
+        aria-label={collapsed ? node.label : undefined}
+        disabled={itemDisabled || undefined}
+        bind:this={titleEl}
+        onclick={onTitleClick}
+        onkeydown={(e) => {
+          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (hasChildren && !itemDisabled) open = true;
+          } else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            closeNow();
+          }
+        }}
+      >
+        {#if node.icon}<span class="cd-menu__icon" aria-hidden="true">{@render node.icon()}</span>{:else if collapsed}<span class="cd-menu__icon cd-menu__icon--char" aria-hidden="true">{firstChar}</span>{/if}
+        {#if !collapsed}<span class="cd-menu__label">{node.label}</span>
+        <span class="cd-menu__arrow cd-menu__arrow--popup" aria-hidden="true">
+          <svg viewBox="0 0 16 16" width="10" height="10" focusable="false">
+            <path fill="currentColor" d="M6 4l4 4-4 4V4Z" />
+          </svg>
+        </span>{/if}
+      </button>
+    {/snippet}
+    {#if collapsed}
+      <Tooltip
+        content={tooltipProps?.content ?? node.label}
+        placement={tooltipProps?.position ?? 'right'}
+        theme={tooltipProps?.theme}
+        mouseEnterDelay={tooltipProps?.mouseEnterDelay}
+        mouseLeaveDelay={tooltipProps?.mouseLeaveDelay}
+      >
+        {@render titleButton()}
+      </Tooltip>
+    {:else}
+      {@render titleButton()}
+    {/if}
+
+    {#if shouldRenderSub}
+      <ul
+        class="cd-menu__sub cd-menu__sub--popup"
+        class:cd-menu__sub--hidden={!open}
+        role={navigation ? undefined : 'menu'}
+        aria-hidden={!open || undefined}
+        use:floating={{ trigger: titleEl, placement, offset: 2, autoAdjust: true, getContainer: getPopupContainer, open }}
+        onpointerenter={keepOpen}
+        onpointerleave={scheduleClose}
+      >
+        {#each node.children ?? [] as child, i (child.key ?? `__cd-menu-sub-${i}`)}
+          <Self
+            item={child}
+            placement="rightStart"
+            {isSelected}
+            {multiple}
+            {navigation}
+            {trigger}
+            {getPopupContainer}
+            {destroyOnHide}
+            parentDisabled={parentDisabled}
+            {onSelectLeaf}
+            {renderWrapper}
+            onCloseAll={() => {
+              closeNow();
+              onCloseAll();
+            }}
+            {openDelay}
+            {closeDelay}
+          />
+        {/each}
+      </ul>
+    {/if}
+  </li>
+{:else}
+  {@const selected = isSelected(node.key)}
+  <li class="cd-menu__item" role={navigation ? undefined : 'none'}>
+    {#if navigation && node.href !== undefined}
+      <!-- navigation 用途：含 href 叶子渲染原生 <a>，原生链接 + Tab 键序 -->
+      {#snippet leafLink()}
+        <a
+          class="cd-menu__link"
+          class:cd-menu__link--selected={selected}
+          class:cd-menu__link--collapsed={collapsed}
+          href={itemDisabled ? undefined : node.href}
+          target={node.target}
+          rel={node.rel}
+          aria-current={selected ? 'page' : undefined}
+          aria-disabled={itemDisabled || undefined}
+          aria-label={collapsed ? node.label : undefined}
+          onclick={onLeafClick}
+        >
+          {#if node.icon}<span class="cd-menu__icon" aria-hidden="true">{@render node.icon()}</span>{:else if collapsed}<span class="cd-menu__icon cd-menu__icon--char" aria-hidden="true">{firstChar}</span>{/if}
+          {#if !collapsed}<span class="cd-menu__label">{node.label}</span>{/if}
+        </a>
+      {/snippet}
+      {#if collapsed}
+        <Tooltip
+          content={tooltipProps?.content ?? node.label}
+          placement={tooltipProps?.position ?? 'right'}
+          theme={tooltipProps?.theme}
+          mouseEnterDelay={tooltipProps?.mouseEnterDelay}
+          mouseLeaveDelay={tooltipProps?.mouseLeaveDelay}
+        >
+          {#if renderWrapper}
+            {@render renderWrapper({ item: node, children: leafLink })}
+          {:else}
+            {@render leafLink()}
+          {/if}
+        </Tooltip>
+      {:else if renderWrapper}
+        {@render renderWrapper({ item: node, children: leafLink })}
+      {:else}
+        {@render leafLink()}
+      {/if}
+    {:else}
+      {#snippet leafButton()}
+        <button
+          type="button"
+          class="cd-menu__link"
+          class:cd-menu__link--selected={selected}
+          class:cd-menu__link--collapsed={collapsed}
+          role={navigation ? undefined : multiple ? 'menuitemcheckbox' : 'menuitem'}
+          aria-current={!navigation && !multiple && selected ? 'true' : undefined}
+          aria-checked={!navigation && multiple ? selected : undefined}
+          aria-disabled={itemDisabled || undefined}
+          aria-label={collapsed ? node.label : undefined}
+          disabled={itemDisabled || undefined}
+          onclick={onLeafClick}
+        >
+          {#if node.icon}<span class="cd-menu__icon" aria-hidden="true">{@render node.icon()}</span>{:else if collapsed}<span class="cd-menu__icon cd-menu__icon--char" aria-hidden="true">{firstChar}</span>{/if}
+          {#if !collapsed}<span class="cd-menu__label">{node.label}</span>{/if}
+          {#if multiple && !collapsed && !navigation}
+            <span class="cd-menu__check" class:cd-menu__check--on={selected} aria-hidden="true">
+              <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
+                <path fill="none" stroke="currentColor" stroke-width="2" d="M3 8.5l3.5 3.5L13 5" />
+              </svg>
+            </span>
+          {/if}
+        </button>
+      {/snippet}
+      {#if collapsed}
+        <Tooltip
+          content={tooltipProps?.content ?? node.label}
+          placement={tooltipProps?.position ?? 'right'}
+          theme={tooltipProps?.theme}
+          mouseEnterDelay={tooltipProps?.mouseEnterDelay}
+          mouseLeaveDelay={tooltipProps?.mouseLeaveDelay}
+        >
+          {#if renderWrapper}
+            {@render renderWrapper({ item: node, children: leafButton })}
+          {:else}
+            {@render leafButton()}
+          {/if}
+        </Tooltip>
+      {:else if renderWrapper}
+        {@render renderWrapper({ item: node, children: leafButton })}
+      {:else}
+        {@render leafButton()}
+      {/if}
+    {/if}
+  </li>
+{/if}
+
+<style>
+  .cd-menu__item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  /* 分隔符：水平细线，不可交互 */
+  .cd-menu__divider {
+    block-size: 1px;
+    margin-block: var(--cd-spacing-1);
+    background: var(--cd-menu-border-color, var(--cd-color-border));
+  }
+  /* 分组：始终展开的分区标题 + 组内项 */
+  .cd-menu__group-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .cd-menu__group-title {
+    display: flex;
+    align-items: center;
+    block-size: var(--cd-menu-item-height);
+    padding-inline: var(--cd-menu-item-padding);
+    color: var(--cd-menu-item-color-disabled);
+    font-size: var(--cd-font-size-1);
+    cursor: default;
+    user-select: none;
+  }
+  .cd-menu__link,
+  .cd-menu__title {
+    display: flex;
+    align-items: center;
+    gap: var(--cd-spacing-2);
+    inline-size: 100%;
+    block-size: var(--cd-menu-item-height);
+    padding-inline: var(--cd-menu-item-padding);
+    border: none;
+    background: transparent;
+    color: var(--cd-menu-item-color);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  /* navigation 叶子用 <a> 渲染：抹平默认下划线/颜色，复用 link 视觉 */
+  a.cd-menu__link {
+    text-decoration: none;
+  }
+  a.cd-menu__link[aria-disabled='true'] {
+    color: var(--cd-menu-item-color-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .cd-menu__link:hover,
+  .cd-menu__title:hover {
+    background: var(--cd-menu-item-bg-hover);
+  }
+  .cd-menu__link:focus-visible,
+  .cd-menu__title:focus-visible {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
+  }
+  .cd-menu__link--selected {
+    position: relative;
+    color: var(--cd-menu-item-color-selected);
+    background: var(--cd-menu-item-bg-selected);
+  }
+  .cd-menu__link--selected::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 3px;
+    background: var(--cd-menu-item-indicator);
+  }
+  .cd-menu__link[aria-disabled='true'],
+  .cd-menu__title[aria-disabled='true'] {
+    color: var(--cd-menu-item-color-disabled);
+    cursor: not-allowed;
+  }
+  .cd-menu__label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .cd-menu__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    block-size: 1rem;
+    color: var(--cd-menu-item-color);
+  }
+  .cd-menu__icon--char {
+    font-weight: 600;
+  }
+  /* 折叠图标轨：顶层项只显图标、居中、无文字与箭头 */
+  .cd-menu__title--collapsed,
+  .cd-menu__link--collapsed {
+    justify-content: center;
+    gap: 0;
+    padding-inline: 0;
+  }
+  .cd-menu__check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    block-size: 1rem;
+    color: var(--cd-menu-item-color-selected);
+    opacity: 0;
+  }
+  .cd-menu__check--on {
+    opacity: 1;
+  }
+  .cd-menu__arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    color: var(--cd-menu-submenu-arrow-color);
+  }
+  /* hover 浮层子菜单：脱离内联缩进，独立卡片 */
+  .cd-menu__sub--popup {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-inline-size: 8rem;
+    padding-block: var(--cd-spacing-1);
+    background: var(--cd-menu-bg);
+    border-radius: var(--cd-select-dropdown-radius, 6px);
+    box-shadow: var(--cd-select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+    z-index: var(--cd-select-dropdown-z, 1050);
+  }
+  /* destroyOnHide=false 隐藏浮层时保留 DOM 但不可见、不可交互、不占位 */
+  .cd-menu__sub--hidden {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cd-menu__link,
+    .cd-menu__title {
+      transition: none;
+    }
+  }
+</style>