@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/nav/Nav.svelte.d.ts

@@ -1,10 +1,9 @@
 export { NAV_CONTEXT_KEY } from './context.js';
 import type { Snippet } from 'svelte';
-import type { MenuItemNode } from '../menu/types.js';
-import { type NavItemDef, type NavKey, type NavMode, type NavHeaderConfig, type NavFooterConfig } from './types.js';
+import { type NavItemDef, type NavItemInput, type NavKey, type NavMode, type NavHeaderConfig, type NavFooterConfig, type NavSelectData, type NavClickData, type NavOpenChangeData } from './types.js';
 interface Props {
-    /** 导航项列表（字段对齐 Semi：itemKey/text/icon/items）。 */
-    items?: NavItemDef[];
+    /** 导航项列表（字段对齐 Semi：itemKey/text/icon/items）。string 项取值作 text 与 itemKey。 */
+    items?: NavItemInput[];
     /** 导航方向：vertical（侧边，默认）/ horizontal（顶部）。 */
     mode?: NavMode;
     /** 受控选中项 key 数组。 */
@@ -15,51 +14,65 @@ interface Props {
     openKeys?: NavKey[];
     /** 默认展开的子导航 key 数组（非受控）。 */
     defaultOpenKeys?: NavKey[];
+    /** 多选模式（对齐 Semi multiple）：叠加选中，配合 onDeselect。 */
+    multiple?: boolean;
     /** 受控折叠态（仅 vertical 有效）。 */
     isCollapsed?: boolean;
     /** 默认折叠态（非受控，仅 vertical 有效）。 */
     defaultIsCollapsed?: boolean;
-    /** 头部区域配置对象（{logo, text}）。与 header snippet 二选一。 */
+    /** 头部区域配置对象（{logo, text, link, ...}）。与 headerSlot 二选一。 */
     header?: NavHeaderConfig;
-    /** 底部区域配置对象（{collapseButton}）。与 footer snippet 二选一。 */
+    /** 底部区域配置对象（{collapseButton, ...}）。与 footerSlot 二选一。 */
     footer?: NavFooterConfig;
-    /** 整体禁用。 */
-    disabled?: boolean;
-    /** 子级缩进像素（透传 Menu inlineIndent）。 */
-    inlineIndent?: number;
-    /** 缩进限制：仅一级缩进（默认 true）；false 时逐级缩进（透传 Menu limitIndent）。 */
+    /** 缩进限制：仅一级缩进（默认 true）；false 时逐级缩进。 */
     limitIndent?: boolean;
-    /** 含子导航项的展开箭头位置（透传 Menu toggleIconPosition）。 */
+    /** 含子导航项的展开箭头位置。 */
     toggleIconPosition?: 'left' | 'right';
-    /** 自定义展开箭头图标（透传 Menu expandIcon）。 */
+    /** 自定义展开箭头图标。 */
     expandIcon?: Snippet;
-    /** 子导航展开动画开关（默认 true，透传 Menu motion）。对齐 Semi subNavMotion。 */
+    /**
+     * 数据驱动的项图标渲染钩子（本库扩展，Semi 无）：项自身未设 icon 时按 item 渲染前置图标。
+     * 用于 items 大量、图标随 item 变化的场景（如站点侧边栏按组件名取图标）。项自带 icon 优先。
+     */
+    renderIcon?: Snippet<[NavItemDef]>;
+    /** 子导航展开动画开关（默认 true）。对齐 Semi subNavMotion。 */
     subNavMotion?: boolean;
-    /** 浮层子导航展开延迟 ms（透传 Menu subMenuOpenDelay）。对齐 Semi subNavOpenDelay。 */
+    /** 浮层子导航展开延迟 ms。对齐 Semi subNavOpenDelay。 */
     subNavOpenDelay?: number;
-    /** 浮层子导航关闭延迟 ms（透传 Menu subMenuCloseDelay）。对齐 Semi subNavCloseDelay。 */
+    /** 浮层子导航关闭延迟 ms。对齐 Semi subNavCloseDelay。 */
     subNavCloseDelay?: number;
-    /** 浮层挂载容器（透传 Menu getPopupContainer）。 */
+    /** Nav 级：透传给所有子导航浮层 Dropdown 的默认属性（对齐 Semi subDropdownProps）。 */
+    subDropdownProps?: import('./types.js').NavDropdownProps;
+    /** 折叠态 tooltip 显示延迟 ms（对齐 Semi tooltipShowDelay）。 */
+    tooltipShowDelay?: number;
+    /** 折叠态 tooltip 隐藏延迟 ms（对齐 Semi tooltipHideDelay）。 */
+    tooltipHideDelay?: number;
+    /** 浮层挂载容器。 */
     getPopupContainer?: () => HTMLElement | null | undefined;
-    /** 自定义导航项外层包裹（透传 Menu renderWrapper）。 */
-    renderWrapper?: Snippet<[{
-        item: MenuItemNode;
-        children: Snippet;
-    }]>;
+    /** 自定义导航项外层包裹（对齐 Semi renderWrapper {itemElement,isSubNav,isInSubNav,props}）。 */
+    renderWrapper?: Snippet<[
+        {
+            item: NavItemDef;
+            isSubNav: boolean;
+            isInSubNav: boolean;
+            props: NavItemDef;
+            children: Snippet;
+        }
+    ]>;
     /** 根元素自定义类名（透传）。 */
     class?: string;
     /** 根元素自定义内联样式（透传）。 */
     style?: string;
     /** 导航项列表容器自定义样式（对齐 Semi bodyStyle）。 */
     bodyStyle?: string;
-    /** 可访问性标签。 */
-    ariaLabel?: string;
-    /** 选中导航项回调。 */
-    onSelect?: (key: NavKey) => void;
-    /** 点击任意导航项回调（对齐 Semi onClick，在 onSelect 之外亦对已选项触发）。 */
-    onClick?: (key: NavKey) => void;
-    /** 展开/收起子导航回调。 */
-    onOpenChange?: (keys: NavKey[]) => void;
+    /** 选中导航项回调（富载荷对齐 Semi）。 */
+    onSelect?: (data: NavSelectData) => void;
+    /** 多选下取消选中回调（对齐 Semi onDeselect）。 */
+    onDeselect?: (data: NavSelectData) => void;
+    /** 点击任意导航项回调（富载荷对齐 Semi）。 */
+    onClick?: (data: NavClickData) => void;
+    /** 展开/收起子导航回调（富载荷对齐 Semi）。 */
+    onOpenChange?: (data: NavOpenChangeData) => void;
     /** 折叠态变化回调。 */
     onCollapseChange?: (isCollapsed: boolean) => void;
     /** 自定义头部（覆盖 header 配置对象）。 */

package/dist/nav/Nav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/Nav.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAW,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAEH,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,OAAO,EACZ,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAWpB,UAAU,KAAK;IACb,gDAAgD;IAChD,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,yBAAyB;IACzB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,uDAAuD;IACvD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IACrE,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kBAAkB;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe;IACf,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+JH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Nav.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/Nav.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAIH,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,OAAO,EACZ,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAC;AAYpB,UAAU,KAAK;IACb,2EAA2E;IAC3E,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,yBAAyB;IACzB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,iBAAiB;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IACnC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,YAAY,EAAE,gBAAgB,CAAC;IACzD,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc;IACd,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CACrB;QACE;YACE,IAAI,EAAE,UAAU,CAAC;YACjB,QAAQ,EAAE,OAAO,CAAC;YAClB,UAAU,EAAE,OAAO,CAAC;YACpB,KAAK,EAAE,UAAU,CAAC;YAClB,QAAQ,EAAE,OAAO,CAAC;SACnB;KACF,CACF,CAAC;IACF,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,eAAe;IACf,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqRH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/nav/NavCollapseButton.svelte

@@ -0,0 +1,74 @@
+<!--
+  NavCollapseButton — 收起/展开侧边栏按钮（对齐 Semi CollapseButton.tsx）。
+  DOM：div.cd-nav__collapse-btn >
+    - 折叠态：Tooltip(content=展开文案, position=right) 包裹 span.cd-nav__collapse-wrapper > Button(icon=IconSidebar)
+    - 展开态：Button(icon=IconSidebar, type=tertiary, theme=borderless) 内含 collapseText 文案
+  文案：collapseText(isCollapsed) 优先，否则 locale.expandText/collapseText。
+-->
+<script lang="ts">
+  import { useLocale } from '../locale-provider/index.js';
+  import Button from '../button/Button.svelte';
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  import { IconSidebar } from '@chenzy-design/icons';
+
+  interface Props {
+    /** 是否折叠态。 */
+    isCollapsed?: boolean;
+    /** 文案自定义（对齐 Semi collapseText，(isCollapsed)=>string）。 */
+    collapseText?: (isCollapsed: boolean) => string;
+    /** 点击回调，收到目标折叠态（对齐 Semi onClick(!isCollapsed)）。 */
+    onClick?: (next: boolean) => void;
+  }
+
+  let { isCollapsed = false, collapseText, onClick }: Props = $props();
+
+  const loc = useLocale();
+
+  function handleClick(): void {
+    onClick?.(!isCollapsed);
+  }
+
+  // 折叠态显示「展开」文案，展开态显示「收起」文案（对齐 Semi expandText/collapseText）。
+  const finalText = $derived(
+    collapseText
+      ? collapseText(isCollapsed)
+      : isCollapsed
+        ? loc().t('Navigation.expandText')
+        : loc().t('Navigation.collapseText'),
+  );
+</script>
+
+{#snippet sidebarIcon()}
+  <IconSidebar />
+{/snippet}
+
+<div class="cd-nav__collapse-btn">
+  {#if isCollapsed}
+    <Tooltip content={finalText} position="right">
+      <span class="cd-nav__collapse-wrapper">
+        <Button
+          icon={sidebarIcon}
+          type="tertiary"
+          theme="borderless"
+          ariaLabel={finalText}
+          onclick={handleClick}
+        />
+      </span>
+    </Tooltip>
+  {:else}
+    <Button icon={sidebarIcon} type="tertiary" theme="borderless" onclick={handleClick}>
+      {finalText}
+    </Button>
+  {/if}
+</div>
+
+<style>
+  .cd-nav__collapse-btn {
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+  }
+  .cd-nav__collapse-wrapper {
+    display: inline-flex;
+  }
+</style>

package/dist/nav/NavCollapseButton.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** 是否折叠态。 */
+    isCollapsed?: boolean;
+    /** 文案自定义（对齐 Semi collapseText，(isCollapsed)=>string）。 */
+    collapseText?: (isCollapsed: boolean) => string;
+    /** 点击回调，收到目标折叠态（对齐 Semi onClick(!isCollapsed)）。 */
+    onClick?: (next: boolean) => void;
+}
+declare const NavCollapseButton: import("svelte").Component<Props, {}, "">;
+type NavCollapseButton = ReturnType<typeof NavCollapseButton>;
+export default NavCollapseButton;
+//# sourceMappingURL=NavCollapseButton.svelte.d.ts.map

package/dist/nav/NavCollapseButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavCollapseButton.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavCollapseButton.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,aAAa;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,MAAM,CAAC;IAChD,mDAAmD;IACnD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC;AAiDH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/nav/NavFooter.svelte

@@ -1,49 +1,66 @@
 <!--
-  Nav.Footer — 导航底部（对齐 Semi footer={{collapseButton}}）。
-  collapseButton 仅 mode='vertical' 生效，点击经 Nav context toggle 折叠态。
-  aria-label 文案复用 locale 包 Sider.expand/collapse。
+  Nav.Footer — 导航底部（对齐 Semi Footer.tsx）。
+  collapseButton 仅 mode='vertical'（非 horizontal）生效，点击经 Nav context toggle 折叠态。
+  收起按钮由 NavCollapseButton（复用 Button + Tooltip + IconSidebar）渲染。
+  collapseButton 可为 boolean 或 Snippet（自定义节点，对齐 Semi React.isValidElement 分支）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
   import { getNavContext } from './context.js';
+  import NavCollapseButton from './NavCollapseButton.svelte';
 
   interface Props {
-    /** 是否展示收起按钮（仅 vertical 生效）。 */
-    collapseButton?: boolean;
+    /** 是否展示收起按钮，或传自定义节点（仅 vertical 生效）。 */
+    collapseButton?: boolean | Snippet;
+    /** 收起按钮文案（对齐 Semi collapseText，(collapsed)=>string；默认用 locale）。 */
+    collapseText?: (collapsed: boolean) => string;
     /** 自定义类名。 */
     class?: string;
     /** 自定义内联样式。 */
     style?: string;
+    /** 点击事件回调（对齐 Semi Nav.Footer onClick）。 */
+    onClick?: (e: MouseEvent) => void;
     children?: Snippet;
   }
 
-  let { collapseButton = false, class: className = '', style, children }: Props = $props();
+  let {
+    collapseButton = false,
+    collapseText,
+    class: className = '',
+    style,
+    onClick,
+    children,
+  }: Props = $props();
 
-  const loc = useLocale();
   const nav = getNavContext();
 
+  // collapseButton 为 Snippet 时视为自定义节点（对齐 Semi isValidElement 分支）。
+  const customButton = $derived(
+    typeof collapseButton === 'function' ? (collapseButton as Snippet) : undefined,
+  );
   const showCollapseButton = $derived(
-    collapseButton && !children && nav?.mode === 'vertical',
+    !!collapseButton && !children && nav?.mode !== 'horizontal',
   );
   const collapsed = $derived(nav?.collapsed ?? false);
-  // 折叠时箭头指向「展开」方向，反之指向「收起」。
-  const arrow = $derived(collapsed ? '›' : '‹');
 </script>
 
-<div class={['cd-nav__footer', className].filter(Boolean).join(' ')} {style}>
+<div
+  class={['cd-nav__footer', className].filter(Boolean).join(' ')}
+  class:cd-nav__footer-collapsed={collapsed}
+  {style}
+  onclick={onClick}
+  role="presentation"
+>
   {#if children}
     {@render children()}
+  {:else if customButton}
+    {@render customButton()}
   {:else if showCollapseButton}
-    <button
-      type="button"
-      class="cd-nav__collapse-btn"
-      aria-expanded={!collapsed}
-      aria-label={collapsed ? loc().t('Sider.expand') : loc().t('Sider.collapse')}
-      onclick={() => nav?.toggleCollapsed()}
-    >
-      <span class="cd-nav__collapse-arrow" aria-hidden="true">{arrow}</span>
-    </button>
+    <NavCollapseButton
+      isCollapsed={collapsed}
+      {...collapseText !== undefined ? { collapseText } : {}}
+      onClick={() => nav?.toggleCollapsed()}
+    />
   {/if}
 </div>
 
@@ -52,31 +69,9 @@
     display: flex;
     align-items: center;
     flex: 0 0 auto;
-    padding: var(--cd-nav-footer-padding);
-    border-block-start: 1px solid var(--cd-nav-footer-border);
-  }
-  .cd-nav__collapse-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: var(--cd-nav-collapse-btn-height);
-    border: none;
-    background: transparent;
-    color: var(--cd-nav-collapse-btn-color);
-    cursor: pointer;
-    border-radius: var(--cd-border-radius-small);
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-nav__collapse-btn:hover {
-    background: var(--cd-nav-collapse-btn-hover-bg);
-  }
-  .cd-nav__collapse-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-nav__collapse-arrow {
-    font-size: 18px;
-    line-height: 1;
+    /* 侧边（vertical）态左右内边距 8px（对齐 Semi $spacing-navigation_vertical_footer-paddingLeft/Right）。 */
+    padding: var(--cd-spacing-navigation-footer-paddingy) var(--cd-spacing-navigation-vertical-footer-paddingx);
+    border-block-start: 1px solid var(--cd-color-navigation-border-default);
+    color: var(--cd-color-navigation-footer-icon-default);
   }
 </style>

package/dist/nav/NavFooter.svelte.d.ts

@@ -1,11 +1,15 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    /** 是否展示收起按钮（仅 vertical 生效）。 */
-    collapseButton?: boolean;
+    /** 是否展示收起按钮，或传自定义节点（仅 vertical 生效）。 */
+    collapseButton?: boolean | Snippet;
+    /** 收起按钮文案（对齐 Semi collapseText，(collapsed)=>string；默认用 locale）。 */
+    collapseText?: (collapsed: boolean) => string;
     /** 自定义类名。 */
     class?: string;
     /** 自定义内联样式。 */
     style?: string;
+    /** 点击事件回调（对齐 Semi Nav.Footer onClick）。 */
+    onClick?: (e: MouseEvent) => void;
     children?: Snippet;
 }
 declare const NavFooter: import("svelte").Component<Props, {}, "">;

package/dist/nav/NavFooter.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavFooter.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavFooter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,+BAA+B;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NavFooter.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavFooter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM,CAAC;IAC9C,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2CH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/nav/NavHeader.svelte

@@ -8,8 +8,14 @@
   interface Props {
     /** Logo 节点。 */
     logo?: Snippet;
-    /** Logo 文案。 */
-    text?: string;
+    /** Logo 文案（字符串或 Snippet）。 */
+    text?: string | Snippet;
+    /** 链接地址（对齐 Semi）：传入时头部整体包裹一个 `<a>`。 */
+    link?: string;
+    /** 透传给 `<a>` 的属性（对齐 Semi linkOptions，如 target/rel）。 */
+    linkOptions?: Record<string, string>;
+    /** 导航方向（由 Nav 透传；决定 header 左右内边距语义）。 */
+    mode?: 'vertical' | 'horizontal';
     /** 折叠态（由 Nav 透传；折叠时隐藏文案）。 */
     collapsedState?: boolean;
     /** 自定义类名。 */
@@ -22,6 +28,9 @@
   let {
     logo,
     text,
+    link,
+    linkOptions,
+    mode = 'vertical',
     collapsedState = false,
     class: className = '',
     style,
@@ -29,38 +38,78 @@
   }: Props = $props();
 </script>
 
-<div class={['cd-nav__header', className].filter(Boolean).join(' ')} {style}>
+{#snippet inner()}
   {#if children}
     {@render children()}
   {:else}
     {#if logo}
-      <span class="cd-nav__logo">{@render logo()}</span>
+      <span class="cd-nav__header-logo">{@render logo()}</span>
     {/if}
     {#if text && !collapsedState}
-      <span class="cd-nav__header-text">{text}</span>
+      <span class="cd-nav__header-text"
+        >{#if typeof text === 'string'}{text}{:else}{@render text()}{/if}</span
+      >
     {/if}
   {/if}
+{/snippet}
+
+<div
+  class={[
+    'cd-nav__header',
+    `cd-nav__header--${mode}`,
+    collapsedState && 'cd-nav__header--collapsed',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')}
+  {style}
+>
+  {#if link}
+    <a class="cd-nav__header-link" href={link} {...linkOptions}>{@render inner()}</a>
+  {:else}
+    {@render inner()}
+  {/if}
 </div>
 
 <style>
   .cd-nav__header {
     display: flex;
     align-items: center;
-    gap: var(--cd-nav-header-gap);
-    height: var(--cd-nav-header-height);
-    padding-inline: var(--cd-nav-header-padding-x);
+    gap: var(--cd-spacing-navigation-header-logo-marginright);
+    height: var(--cd-height-navigation-horizontal-header);
     flex: 0 0 auto;
     overflow: hidden;
   }
-  .cd-nav__logo {
+  /* 顶部导航：左右内边距 24px（对齐 Semi $spacing-navigation_horizontal-paddingLeft）。 */
+  .cd-nav__header--horizontal {
+    padding-inline: var(--cd-spacing-navigation-horizontal-paddingleft);
+  }
+  /* 侧边导航：左内边距按 Semi 公式派生使 Logo 与折叠态图标居中对齐，右为 tight。 */
+  .cd-nav__header--vertical {
+    padding-left: var(--cd-spacing-navigation-vertical-header-paddingleft);
+    padding-right: var(--cd-spacing-navigation-vertical-header-paddingright);
+  }
+  /* 侧边折叠态：右内边距归 0（对齐 Semi collapsed-paddingRight）。 */
+  .cd-nav__header--vertical.cd-nav__header--collapsed {
+    padding-left: var(--cd-spacing-navigation-vertical-header-collapsed-paddingleft);
+    padding-right: var(--cd-spacing-navigation-vertical-header-collapsed-paddingright);
+  }
+  .cd-nav__header-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cd-spacing-navigation-header-logo-marginright);
+    color: inherit;
+    text-decoration: none;
+  }
+  .cd-nav__header-logo {
     display: inline-flex;
     align-items: center;
     flex: 0 0 auto;
   }
   .cd-nav__header-text {
-    font-size: var(--cd-nav-header-text-size);
-    font-weight: var(--cd-font-weight-bold);
+    font-size: var(--cd-font-size-navigation-header-text);
+    font-weight: var(--cd-font-navigation-header-item-fontweight);
     white-space: nowrap;
-    color: var(--cd-nav-header-text-color);
+    color: var(--cd-color-navigation-header-text-default);
   }
 </style>

package/dist/nav/NavHeader.svelte.d.ts

@@ -2,8 +2,14 @@ import type { Snippet } from 'svelte';
 interface Props {
     /** Logo 节点。 */
     logo?: Snippet;
-    /** Logo 文案。 */
-    text?: string;
+    /** Logo 文案（字符串或 Snippet）。 */
+    text?: string | Snippet;
+    /** 链接地址（对齐 Semi）：传入时头部整体包裹一个 `<a>`。 */
+    link?: string;
+    /** 透传给 `<a>` 的属性（对齐 Semi linkOptions，如 target/rel）。 */
+    linkOptions?: Record<string, string>;
+    /** 导航方向（由 Nav 透传；决定 header 左右内边距语义）。 */
+    mode?: 'vertical' | 'horizontal';
     /** 折叠态（由 Nav 透传；折叠时隐藏文案）。 */
     collapsedState?: boolean;
     /** 自定义类名。 */

package/dist/nav/NavHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavHeader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,eAAe;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NavHeader.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavHeader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,eAAe;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC,6BAA6B;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/nav/NavItem.svelte

@@ -1,31 +1,33 @@
 <!--
   Nav.Item — 声明式叶子导航项（对齐 Semi Nav.Item）。
-  仅注册描述符到父级收集器，不直接渲染 DOM（渲染由 Nav 委托的 Menu 统一负责）。
+  仅注册描述符到父级收集器，不直接渲染 DOM（渲染由 Nav 自身的 NavItemRender 统一负责）。
   安全：init 同步注册进【普通数组】，挂载后【异步】bump 触发一次 Nav 重建。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { onMount } from 'svelte';
   import { getNavCollector } from './context.js';
-  import type { NavKey } from './types.js';
+  import type { NavKey, NavClickData } from './types.js';
 
   interface Props {
     /** 导航项唯一标识。 */
     itemKey: NavKey;
-    /** 导航项文案。 */
-    text: string;
+    /** 导航项文案（字符串或 Snippet）。 */
+    text: string | Snippet;
     /** 项前置图标。 */
     icon?: Snippet;
-    /** 是否禁用。 */
+    /** 是否禁用（默认 false）。 */
     disabled?: boolean;
     /** 链接地址（叶子项渲染为原生 <a>）。 */
     link?: string;
-    /** 链接 target。 */
-    target?: string;
-    /** 链接 rel。 */
-    rel?: string;
-    /** 项级点击回调。 */
-    onClick?: (e: MouseEvent) => void;
+    /** 透传给 <a> 的属性（对齐 Semi linkOptions，如 target/rel/download）。 */
+    linkOptions?: Record<string, string>;
+    /** 是否保留左侧 Icon 占位（对齐 Semi indent）。 */
+    indent?: boolean;
+    /** 当前项嵌套层级（对齐 Semi level）；limitIndent=false 时用于自定义缩进位置。 */
+    level?: number;
+    /** 项级点击回调（富载荷对齐 Semi）。 */
+    onClick?: (data: NavClickData) => void;
     /** 项级鼠标移入回调。 */
     onMouseEnter?: (e: MouseEvent) => void;
     /** 项级鼠标移出回调。 */
@@ -36,10 +38,11 @@
     itemKey,
     text,
     icon,
-    disabled,
+    disabled = false,
     link,
-    target,
-    rel,
+    linkOptions,
+    indent,
+    level,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -53,11 +56,12 @@
     collector.add({
       itemKey,
       text,
+      disabled,
       ...(icon !== undefined ? { icon } : {}),
-      ...(disabled !== undefined ? { disabled } : {}),
       ...(link !== undefined ? { link } : {}),
-      ...(target !== undefined ? { target } : {}),
-      ...(rel !== undefined ? { rel } : {}),
+      ...(linkOptions !== undefined ? { linkOptions } : {}),
+      ...(indent !== undefined ? { indent } : {}),
+      ...(level !== undefined ? { level } : {}),
       ...(onClick !== undefined ? { onClick } : {}),
       ...(onMouseEnter !== undefined ? { onMouseEnter } : {}),
       ...(onMouseLeave !== undefined ? { onMouseLeave } : {}),

package/dist/nav/NavItem.svelte.d.ts

@@ -1,22 +1,24 @@
 import type { Snippet } from 'svelte';
-import type { NavKey } from './types.js';
+import type { NavKey, NavClickData } from './types.js';
 interface Props {
     /** 导航项唯一标识。 */
     itemKey: NavKey;
-    /** 导航项文案。 */
-    text: string;
+    /** 导航项文案（字符串或 Snippet）。 */
+    text: string | Snippet;
     /** 项前置图标。 */
     icon?: Snippet;
-    /** 是否禁用。 */
+    /** 是否禁用（默认 false）。 */
     disabled?: boolean;
     /** 链接地址（叶子项渲染为原生 <a>）。 */
     link?: string;
-    /** 链接 target。 */
-    target?: string;
-    /** 链接 rel。 */
-    rel?: string;
-    /** 项级点击回调。 */
-    onClick?: (e: MouseEvent) => void;
+    /** 透传给 <a> 的属性（对齐 Semi linkOptions，如 target/rel/download）。 */
+    linkOptions?: Record<string, string>;
+    /** 是否保留左侧 Icon 占位（对齐 Semi indent）。 */
+    indent?: boolean;
+    /** 当前项嵌套层级（对齐 Semi level）；limitIndent=false 时用于自定义缩进位置。 */
+    level?: number;
+    /** 项级点击回调（富载荷对齐 Semi）。 */
+    onClick?: (data: NavClickData) => void;
     /** 项级鼠标移入回调。 */
     onMouseEnter?: (e: MouseEvent) => void;
     /** 项级鼠标移出回调。 */

package/dist/nav/NavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAGvC,UAAU,KAAK;IACb,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AA8CH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../../src/nav/NavItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAGrD,UAAU,KAAK;IACb,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,aAAa;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAgDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}