@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -1,76 +1,73 @@
 import { type Snippet } from 'svelte';
 import { type Placement } from '@chenzy-design/core';
-import type { DropdownItem } from './types.js';
-type ItemKey = string | number;
-type Trigger = 'hover' | 'click' | 'contextMenu';
-type Position = Placement;
-type Size = 'small' | 'default' | 'large';
+import type { DropdownMenuItem } from './types.js';
+type Trigger = 'hover' | 'focus' | 'click' | 'custom' | 'contextMenu';
 interface Props {
-    items?: DropdownItem[];
+    /** 弹出层内容，由 Dropdown.Menu / Dropdown.Item / Dropdown.Title / Dropdown.Divider 构成（对齐 Semi render）。 */
+    render?: Snippet;
+    /** 通过 JSON Array 快速配置 Dropdown 内容（对齐 Semi menu）；render 存在时忽略 menu。 */
+    menu?: DropdownMenuItem[];
+    /** 触发弹出层的 Trigger 元素（对齐 Semi children）。 */
+    children?: Snippet;
+    /** 触发下拉的行为：hover / focus / click / custom / contextMenu。默认 hover。 */
     trigger?: Trigger;
-    open?: boolean;
-    defaultOpen?: boolean;
-    position?: Position;
-    size?: Size;
-    disabled?: boolean;
-    closeOnSelect?: boolean;
-    closeOnEsc?: boolean;
+    /** 是否显示菜单，需配合 trigger='custom' 使用（对齐 Semi visible，受控）。 */
+    visible?: boolean;
+    /** 非受控初始显隐。 */
+    defaultVisible?: boolean;
+    /**
+     * 弹出菜单的位置（对齐 Semi position）。本库统一用 12 方位 Placement 命名，
+     * 语义与 Semi 一一对应（bottomStart≈bottomLeft、rightStart≈rightTop）。默认 bottom。
+     */
+    position?: Placement;
+    /** 弹出层被遮挡时是否自动调整方向（对齐 Semi autoAdjustOverflow）。默认 true。 */
+    autoAdjustOverflow?: boolean;
+    /** 鼠标移入 Trigger 后延迟显示时间(ms)，仅 hover/focus 生效（对齐 Semi mouseEnterDelay）。 */
     mouseEnterDelay?: number;
+    /** 鼠标移出弹出层后延迟消失时间(ms)，仅 hover/focus 生效（对齐 Semi mouseLeaveDelay）。 */
     mouseLeaveDelay?: number;
     /**
-     * 浮层与触发元素的间距(px)。数值映射到 floating 主轴 offset；
-     * 传 { x, y } 时按当前 position 主轴方向取值（上下取 y、左右取 x）。默认 4。
+     * 弹出层与 Trigger 的距离(px)（对齐 Semi spacing）。嵌套时缺省用 NESTED_SPACING(2)，顶层 SPACING(4)。
+     * 传 { x, y } 时按 position 主轴方向取值（上下取 y、左右取 x）。
      */
     spacing?: number | {
         x: number;
         y: number;
     };
-    /**
-     * hover 模式下点击菜单项是否关闭浮层（默认 true）。
-     * 设为 false 时 hover 触发下点击项不关闭，仅靠移出/Esc/外部点击收起。
-     * 仅影响 hover 触发；click/contextMenu 触发的关闭仍由 closeOnSelect 决定。
-     */
-    clickToHide?: boolean;
-    /** 浮层层级（z-index），默认 1050。写入浮层内联 style 覆盖 token 默认值。 */
+    /** 弹出层计算溢出时增加的冗余值(px)（对齐 Semi margin，作用同 Tooltip margin）。 */
+    margin?: number;
+    /** 弹出层 z-index（对齐 Semi zIndex）。默认 1050（Tooltip DEFAULT_Z_INDEX）。 */
     zIndex?: number;
-    /**
-     * 空间不足时自动翻转/移位到可视区（默认 true）。
-     * 透传 floating action autoAdjust：false 时严格按 position 定位不翻转。
-     */
-    autoAdjustOverflow?: boolean;
-    /** 关闭即卸载浮层内容（{#if}），重开重建。默认 false：首开后保留 DOM 仅隐藏。 */
-    destroyOnClose?: boolean;
-    /**
-     * 首次打开前不渲染浮层内容（默认 true：惰性渲染，首开才挂载）。
-     * 设为 false 时即使从未打开也预渲染浮层 DOM（仅隐藏），可减少首开开销。
-     */
-    lazyRender?: boolean;
-    /**
-     * 关闭后保留浮层 DOM（与 destroyOnClose 互斥；为 true 时强制保留，忽略 destroyOnClose）。
-     * 默认 false：保留策略由 destroyOnClose 决定。
-     */
-    keepDOM?: boolean;
-    /** 浮层挂载容器，缺省 document.body。非 body 容器时改 absolute 定位相对该容器。 */
-    getPopupContainer?: () => HTMLElement | null | undefined;
-    /**
-     * 已选中的 Item 右侧显示 ✓ 勾选标记（默认 false）。
-     * 通过 context 透传给 DropdownItemNode 渲染。
-     */
-    showTick?: boolean;
-    /**
-     * 下拉动画开关（默认 true）。
-     * false 时禁用菜单展开/收起过渡动画。
-     */
+    /** 下拉动画开关（对齐 Semi motion）。默认 true。 */
     motion?: boolean;
-    /**
-     * 阻断下拉框内点击事件冒泡（默认 true）。
-     * 包裹菜单的 onclick/pointerdown 停止冒泡，防止触发上层监听器。
-     */
+    /** 下拉弹层外层样式类名（对齐 Semi className，作用于 div.cd-dropdown）。 */
+    className?: string;
+    /** 下拉菜单根元素类名（对齐 Semi contentClassName，作用于 div.cd-dropdown-content）。 */
+    contentClassName?: string;
+    /** 弹出层内联样式（对齐 Semi style，作用于 div.cd-dropdown-content；勿含 position/transform）。 */
+    style?: string;
+    /** 是否自动在 active 的 Dropdown.Item 左侧展示对勾（对齐 Semi showTick）。默认 false。 */
+    showTick?: boolean;
+    /** 是否阻止弹出层上的点击事件冒泡（对齐 Semi stopPropagation）。默认 false。 */
     stopPropagation?: boolean;
-    onSelect?: (key: ItemKey) => void;
-    onOpenChange?: (open: boolean) => void;
-    triggerContent?: Snippet;
-    children?: Snippet;
+    /** 在 trigger 或弹出层按 Esc 键是否关闭面板，受控时不生效（对齐 Semi closeOnEsc）。默认 true。 */
+    closeOnEsc?: boolean;
+    /** 更新该值手动触发弹出层重新定位（对齐 Semi rePosKey）。 */
+    rePosKey?: string | number;
+    /** hover 时不响应键盘聚焦弹出事件（对齐 Semi disableFocusListener，issue#977）。默认 false。 */
+    disableFocusListener?: boolean;
+    /** 弹出层内点击时是否自动关闭弹出层（对齐 Semi clickToHide）。默认随触发方式：hover/click 为 true。 */
+    clickToHide?: boolean;
+    /** 关闭时是否保留内部组件 DOM 不销毁（对齐 Semi keepDOM）。默认 false。 */
+    keepDOM?: boolean;
+    /** 指定父级 DOM，弹层渲染至该 DOM（对齐 Semi getPopupContainer）。默认 document.body。 */
+    getPopupContainer?: () => HTMLElement | null | undefined;
+    /** 弹出层显示状态改变时的回调（对齐 Semi onVisibleChange）。 */
+    onVisibleChange?: (visible: boolean) => void;
+    /** 在 trigger 或弹出层按 Esc 键时调用（对齐 Semi onEscKeyDown），在关闭逻辑之前。 */
+    onEscKeyDown?: (e: KeyboardEvent) => void;
+    /** 展示状态下点击非 children、非弹出层区域时回调（对齐 Semi onClickOutSide，仅 custom/click 有效）。 */
+    onClickOutSide?: (e: PointerEvent) => void;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "">;
 type Dropdown = ReturnType<typeof Dropdown>;

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAOxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG7C,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC/B,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEjD,KAAK,QAAQ,GAAG,SAAS,CAAC;AAC1B,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2YH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmC,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACvE,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAIjD,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEtE,UAAU,KAAK;IACb,oGAAoG;IACpG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,2EAA2E;IAC3E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD,8CAA8C;IAC9C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,6EAA6E;IAC7E,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAydH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/dropdown/DropdownDivider.svelte

@@ -1,17 +1,29 @@
 <!--
-  Dropdown.Divider — 菜单项之间的水平分隔线（role=separator）。
-  对应 items 数据驱动模式中 type='divider' 的项。
+  Dropdown.Divider — 菜单项之间的分隔线（对齐 Semi dropdownDivider）。
+  渲染 div.cd-dropdown-divider（block 水平线）。
 -->
 <script lang="ts">
-  // 无 props，仅渲染分隔线。
+  interface Props {
+    /** 样式类名（对齐 Semi className）。 */
+    class?: string;
+    /** 内联样式（对齐 Semi style）。 */
+    style?: string;
+  }
+
+  let { class: className, style }: Props = $props();
 </script>
 
-<li class="cd-dropdown__divider" role="separator"></li>
+<div class="cd-dropdown-divider {className ?? ''}" {style} role="separator"></div>
 
 <style>
-  .cd-dropdown__divider {
-    block-size: 1px;
-    margin-block: var(--cd-spacing-extra-tight);
-    background: var(--cd-color-border);
+  /* 对齐 Semi .semi-dropdown-divider */
+  .cd-dropdown-divider {
+    display: block;
+    height: var(--cd-height-dropdown-seperator);
+    width: 100%;
+    min-width: 100%;
+    clear: both;
+    background: var(--cd-color-dropdown-seperator-bg-default);
+    margin: var(--cd-spacing-dropdown-seperator-marginy) var(--cd-spacing-dropdown-seperator-marginx);
   }
 </style>

package/dist/dropdown/DropdownDivider.svelte.d.ts

@@ -1,19 +1,10 @@
-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;
+interface Props {
+    /** 样式类名（对齐 Semi className）。 */
+    class?: string;
+    /** 内联样式（对齐 Semi style）。 */
+    style?: string;
 }
-declare const DropdownDivider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DropdownDivider = InstanceType<typeof DropdownDivider>;
+declare const DropdownDivider: import("svelte").Component<Props, {}, "">;
+type DropdownDivider = ReturnType<typeof DropdownDivider>;
 export default DropdownDivider;
 //# sourceMappingURL=DropdownDivider.svelte.d.ts.map

package/dist/dropdown/DropdownDivider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownDivider.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownDivider.svelte.ts"],"names":[],"mappings":"AAcA,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,eAAe;;kBAA+E,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DropdownDivider.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownDivider.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAcH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/dropdown/DropdownItem.svelte

@@ -1,127 +1,199 @@
 <!--
-  Dropdown.Item — 单个叶子菜单项的声明式包装。
-  用于 <Dropdown> children 插槽模式（相对于 items 数据驱动模式）。
-  直接渲染 li + button，遵循 DropdownItemNode 的样式约定。
+  Dropdown.Item — 单个下拉菜单项（对齐 Semi dropdownItem）。
+  DOM 镜像 Semi：li[role=menuitem][tabindex=-1][aria-disabled] > (tick?) (icon?) children。
+   - showTick（经 context）：active 时左侧显示对勾 IconTick，否则占位透明勾（恒定宽度）。
+   - type：primary/secondary/tertiary/warning/danger 语义色。
+   - active：字重加粗 + 选中色。
+   - 事件：onClick / onMouseEnter / onMouseLeave / onContextMenu。
+     嵌套（context.level>1）时 onClick 改用 mousedown（button 0）语义——对齐 Semi：避免外层
+     Dropdown 的 outside-click 在 click 前先关闭浮层导致点击丢失。
+   - 点击后经 context.requestClose 请求父 Dropdown 关闭（clickToHide）。
 -->
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
+  import { IconTick } from '@chenzy-design/icons';
   import { DROPDOWN_CTX, type DropdownContext } from './context.js';
+  import type { DropdownItemType, DropdownKey } from './types.js';
 
   interface Props {
-    /** 菜单项标识（选中回调携带） */
-    key?: string | number;
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 危险操作样式 */
-    danger?: boolean;
-    /** 是否选中（showTick=true 时渲染 ✓ 标记） */
-    selected?: boolean;
-    /** 点击回调 */
-    onClick?: (key: string | number | undefined) => void;
-    children?: import('svelte').Snippet;
+    /** 项键，选中回调携带。 */
+    key?: DropdownKey | undefined;
+    /** 是否禁用菜单项（对齐 Semi disabled）。 */
+    disabled?: boolean | undefined;
+    /** 激活态：showTick 时左侧显示对勾、字重加粗、颜色加深（对齐 Semi active）。 */
+    active?: boolean | undefined;
+    /** 语义色（对齐 Semi type）。 */
+    type?: DropdownItemType | undefined;
+    /** 前置图标（对齐 Semi icon）。 */
+    icon?: Snippet | undefined;
+    /** 样式类名（对齐 Semi className）。 */
+    class?: string | undefined;
+    /** 内联样式（对齐 Semi style）。 */
+    style?: string | undefined;
+    /** 单击回调（对齐 Semi onClick）。 */
+    onClick?: ((e: MouseEvent) => void) | undefined;
+    /** MouseEnter 回调（对齐 Semi onMouseEnter）。 */
+    onMouseEnter?: ((e: MouseEvent) => void) | undefined;
+    /** MouseLeave 回调（对齐 Semi onMouseLeave）。 */
+    onMouseLeave?: ((e: MouseEvent) => void) | undefined;
+    /** 右键回调（对齐 Semi onContextMenu）。 */
+    onContextMenu?: ((e: MouseEvent) => void) | undefined;
+    children?: Snippet | undefined;
   }
 
   let {
     key,
     disabled = false,
-    danger = false,
-    selected = false,
+    active = false,
+    type,
+    icon,
+    class: className,
+    style,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onContextMenu,
     children,
   }: Props = $props();
 
-  const ddCtx = getContext<DropdownContext | undefined>(DROPDOWN_CTX);
-  const showTick = $derived(ddCtx?.showTick ?? false);
+  const ctx = getContext<DropdownContext | undefined>(DROPDOWN_CTX);
+  const showTick = $derived(ctx?.showTick ?? false);
+  // 嵌套：context.level>1 表示处于子 Dropdown 浮层内（顶层 content 内 level=1）。
+  const isNested = $derived((ctx?.level ?? 1) > 1);
 
-  function handleClick() {
+  function handleClick(e: MouseEvent) {
     if (disabled) return;
-    onClick?.(key);
+    onClick?.(e);
+    ctx?.requestClose?.();
   }
+
+  // 嵌套项用 mousedown（button 0）替代 click（对齐 Semi），避免外层浮层先被 outside-click 关闭。
+  function handleMouseDown(e: MouseEvent) {
+    if (disabled || !isNested) return;
+    if (e.button !== 0) return;
+    onClick?.(e);
+    ctx?.requestClose?.();
+  }
+
+  const itemCls = $derived(
+    [
+      'cd-dropdown-item',
+      disabled && 'cd-dropdown-item-disabled',
+      showTick && 'cd-dropdown-item-withTick',
+      type && `cd-dropdown-item-${type}`,
+      active && 'cd-dropdown-item-active',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 </script>
 
-<li class="cd-dropdown__item-wrap" role="none">
-  <!-- svelte-ignore a11y_consider_explicit_label -->
-  <button
-    type="button"
-    class="cd-dropdown__item"
-    class:cd-dropdown__item--danger={danger}
-    class:cd-dropdown__item--selected={selected}
-    role={showTick ? 'menuitemcheckbox' : 'menuitem'}
-    tabindex="-1"
-    aria-checked={showTick ? selected : undefined}
-    aria-disabled={disabled || undefined}
-    disabled={disabled || undefined}
-    onclick={handleClick}
-  >
-    <span class="cd-dropdown__label">
-      {@render children?.()}
-    </span>
-    {#if showTick}
-      <span class="cd-dropdown__tick" aria-hidden="true">
-        {#if selected}
-          <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
-            <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M2.5 8.5l4 4 7-8" />
-          </svg>
-        {/if}
-      </span>
-    {/if}
-  </button>
+<!--
+  菜单项键盘由父 Dropdown 的 roving 焦点管理（tabindex=-1 + 方向键移动焦点、Enter/Space 由菜单层
+  document.activeElement.click() 激活），li 自身不挂 keydown，符合 ARIA menu 模式，故忽略下列 a11y 提示。
+-->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<li
+  class={itemCls}
+  {style}
+  role="menuitem"
+  tabindex="-1"
+  aria-disabled={disabled || undefined}
+  onclick={isNested ? undefined : handleClick}
+  onmousedown={isNested ? handleMouseDown : undefined}
+  onmouseenter={disabled ? undefined : onMouseEnter}
+  onmouseleave={disabled ? undefined : onMouseLeave}
+  oncontextmenu={disabled ? undefined : onContextMenu}
+>
+  {#if showTick}
+    <!-- 对勾恒占位：active 显示实色勾，否则透明勾保持宽度一致（对齐 Semi IconTick 占位机制） -->
+    <IconTick
+      size="small"
+      class={`cd-dropdown-item-tick${active ? '' : ' cd-dropdown-item-tick--hidden'}`}
+      aria-hidden="true"
+    />
+  {/if}
+  {#if icon}
+    <span class="cd-dropdown-item-icon">{@render icon()}</span>
+  {/if}
+  {@render children?.()}
 </li>
 
 <style>
-  .cd-dropdown__item-wrap {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .cd-dropdown__item {
+  /* 对齐 Semi .semi-dropdown-item */
+  .cd-dropdown-item {
+    padding: var(--cd-spacing-dropdown-item-paddingy) var(--cd-spacing-dropdown-item-paddingx);
+    color: var(--cd-color-dropdown-item-text-default);
+    max-width: var(--cd-width-dropdown);
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-tight);
-    inline-size: 100%;
-    margin: 0;
-    padding: var(--cd-dropdown-item-padding);
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    text-align: start;
+    transition: background-color var(--cd-transition-dropdown-item-bg-duration)
+      var(--cd-transition-dropdown-item-bg-function) var(--cd-transition-dropdown-item-bg-delay);
+    border-radius: var(--cd-radius-dropdown-item);
     cursor: pointer;
   }
-  .cd-dropdown__item:hover,
-  .cd-dropdown__item:focus-visible {
-    background: var(--cd-dropdown-item-bg-hover);
-  }
-  .cd-dropdown__item:focus-visible {
-    outline: none;
+  .cd-dropdown-item:not(.cd-dropdown-item-active):hover {
+    background-color: var(--cd-color-dropdown-item-bg-hover);
+    cursor: pointer;
   }
-  .cd-dropdown__item--danger {
-    color: var(--cd-color-danger);
+  .cd-dropdown-item:not(.cd-dropdown-item-active):active {
+    background-color: var(--cd-color-dropdown-item-bg-active);
   }
-  .cd-dropdown__item--danger:hover,
-  .cd-dropdown__item--danger:focus-visible {
-    background: var(--cd-color-danger-light-default, var(--cd-dropdown-item-bg-hover));
+  .cd-dropdown-item:focus-visible {
+    background-color: var(--cd-color-dropdown-item-bg-hover);
+    outline: 0;
   }
-  .cd-dropdown__item[aria-disabled='true'] {
-    color: var(--cd-dropdown-item-color-disabled);
-    cursor: not-allowed;
+  /* 对勾（IconTick 等价）：宽度对齐 icon 尺寸 + 右侧留白让位内容 */
+  .cd-dropdown-item-tick {
+    flex-shrink: 0;
+    width: var(--cd-size-dropdown-icon-width);
+    height: var(--cd-size-dropdown-icon-height);
+    margin-right: var(--cd-spacing-dropdown-icon-marginright);
   }
-  .cd-dropdown__item--selected {
-    color: var(--cd-color-primary, #165dff);
+  .cd-dropdown-item-tick--hidden {
+    color: transparent;
   }
-  .cd-dropdown__label {
-    flex: 1 1 auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .cd-dropdown__tick {
+  /* icon 容器：对齐 Semi .semi-dropdown-item-icon（inline-flex + margin-right:tight） */
+  .cd-dropdown-item-icon {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    inline-size: 14px;
-    block-size: 14px;
-    color: var(--cd-color-primary, #165dff);
+    margin-right: var(--cd-spacing-tight);
+    flex-shrink: 0;
+  }
+  /* type 语义色 */
+  .cd-dropdown-item-danger {
+    color: var(--cd-color-dropdown-item-danger-text-default);
+  }
+  .cd-dropdown-item-secondary {
+    color: var(--cd-color-dropdown-item-secondary-text-default);
+  }
+  .cd-dropdown-item-warning {
+    color: var(--cd-color-dropdown-item-warning-text-default);
+  }
+  .cd-dropdown-item-tertiary {
+    color: var(--cd-color-dropdown-item-tertiary-text-default);
+  }
+  .cd-dropdown-item-primary {
+    color: var(--cd-color-dropdown-item-primary-text-default);
+  }
+  /* showTick：项左内边距让位对勾（对齐 Semi item-withTick-paddingLeft） */
+  .cd-dropdown-item-withTick {
+    padding-left: var(--cd-spacing-dropdown-item-withtick-paddingleft);
+  }
+  /* active：字重加粗（对齐 Semi item-active-fontWeight） */
+  .cd-dropdown-item-active {
+    font-weight: var(--cd-font-dropdown-item-active-fontweight);
+  }
+  /* 禁用态 */
+  .cd-dropdown-item.cd-dropdown-item-disabled {
+    color: var(--cd-color-dropdown-item-disabled-text-default);
+    cursor: not-allowed;
+  }
+  .cd-dropdown-item.cd-dropdown-item-disabled:hover,
+  .cd-dropdown-item.cd-dropdown-item-disabled:active {
+    cursor: not-allowed;
+    background-color: var(--cd-color-dropdown-item-disabled-bg-default);
   }
 </style>

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -1,15 +1,29 @@
+import { type Snippet } from 'svelte';
+import type { DropdownItemType, DropdownKey } from './types.js';
 interface Props {
-    /** 菜单项标识（选中回调携带） */
-    key?: string | number;
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 危险操作样式 */
-    danger?: boolean;
-    /** 是否选中（showTick=true 时渲染 ✓ 标记） */
-    selected?: boolean;
-    /** 点击回调 */
-    onClick?: (key: string | number | undefined) => void;
-    children?: import('svelte').Snippet;
+    /** 项键，选中回调携带。 */
+    key?: DropdownKey | undefined;
+    /** 是否禁用菜单项（对齐 Semi disabled）。 */
+    disabled?: boolean | undefined;
+    /** 激活态：showTick 时左侧显示对勾、字重加粗、颜色加深（对齐 Semi active）。 */
+    active?: boolean | undefined;
+    /** 语义色（对齐 Semi type）。 */
+    type?: DropdownItemType | undefined;
+    /** 前置图标（对齐 Semi icon）。 */
+    icon?: Snippet | undefined;
+    /** 样式类名（对齐 Semi className）。 */
+    class?: string | undefined;
+    /** 内联样式（对齐 Semi style）。 */
+    style?: string | undefined;
+    /** 单击回调（对齐 Semi onClick）。 */
+    onClick?: ((e: MouseEvent) => void) | undefined;
+    /** MouseEnter 回调（对齐 Semi onMouseEnter）。 */
+    onMouseEnter?: ((e: MouseEvent) => void) | undefined;
+    /** MouseLeave 回调（对齐 Semi onMouseLeave）。 */
+    onMouseLeave?: ((e: MouseEvent) => void) | undefined;
+    /** 右键回调（对齐 Semi onContextMenu）。 */
+    onContextMenu?: ((e: MouseEvent) => void) | undefined;
+    children?: Snippet | undefined;
 }
 declare const DropdownItem: import("svelte").Component<Props, {}, "">;
 type DropdownItem = ReturnType<typeof DropdownItem>;

package/dist/dropdown/DropdownItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownItem.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW;IACX,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACrC;AA+CH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGlD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,KAAK;IACb,iBAAiB;IACjB,GAAG,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,yBAAyB;IACzB,IAAI,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACpC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChD,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrD,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrD,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AA2EH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/dropdown/DropdownMenu.svelte

@@ -1,24 +1,36 @@
 <!--
-  Dropdown.Menu — 声明式子菜单/菜单分组容器。
-  包裹 Dropdown.Item / Dropdown.SubMenu / Dropdown.Title / Dropdown.Divider，
-  渲染为 role=group 的 ul，与 items 数据驱动模式下的分组一致。
+  Dropdown.Menu — 下拉弹层菜单容器（对齐 Semi dropdownMenu）。
+  渲染 ul.cd-dropdown-menu[role=menu][aria-orientation=vertical]，包裹 Dropdown.Item /
+  Dropdown.Title / Dropdown.Divider。
 -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   interface Props {
-    children?: import('svelte').Snippet;
+    /** 下拉弹层菜单样式类名（对齐 Semi className）。 */
+    class?: string;
+    /** 下拉弹层菜单样式（对齐 Semi style）。 */
+    style?: string;
+    children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { class: className, style, children }: Props = $props();
 </script>
 
-<ul class="cd-dropdown__menu-group" role="group">
+<ul
+  class="cd-dropdown-menu {className ?? ''}"
+  {style}
+  role="menu"
+  aria-orientation="vertical"
+>
   {@render children?.()}
 </ul>
 
 <style>
-  .cd-dropdown__menu-group {
-    margin: 0;
-    padding: 0;
+  /* 对齐 Semi .semi-dropdown-menu：list-style:none + menu-paddingY/paddingX + margin:0 */
+  .cd-dropdown-menu {
     list-style: none;
+    padding: var(--cd-spacing-dropdown-menu-paddingy) var(--cd-spacing-dropdown-menu-paddingx);
+    margin: 0;
   }
 </style>

package/dist/dropdown/DropdownMenu.svelte.d.ts

@@ -1,5 +1,10 @@
+import type { Snippet } from 'svelte';
 interface Props {
-    children?: import('svelte').Snippet;
+    /** 下拉弹层菜单样式类名（对齐 Semi className）。 */
+    class?: string;
+    /** 下拉弹层菜单样式（对齐 Semi style）。 */
+    style?: string;
+    children?: Snippet;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/dropdown/DropdownMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownMenu.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACrC;AAgBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/dropdown/DropdownMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}