@chenzy-design/svelte 0.2.0 → 0.3.0

package/dist/modal/Modal.svelte

@@ -447,7 +447,7 @@
     margin: 0;
     color: var(--cd-modal-title-color);
     font-size: var(--cd-modal-title-size);
-    font-weight: 600;
+    font-weight: var(--cd-modal-title-weight);
     line-height: 1.4;
   }
   .cd-modal__close {

package/dist/nav/Nav.svelte

@@ -0,0 +1,293 @@
+<!--
+  Nav — 站点导航（对齐 Semi Navigation）。独立组件、对外字段对齐 Semi
+  （itemKey/text/icon/items），内部委托我们自己的 Menu 渲染导航体（purpose=navigation），
+  复用 Menu 的选中/展开/折叠/键盘/a11y 逻辑，仅新增 Header（logo+text）/Footer（collapseButton）
+  容器与折叠联动。
+
+  mode 映射：horizontal → Menu mode=horizontal；vertical 展开 → Menu mode=inline；
+  vertical 折叠 → Menu mode=inline + inlineCollapsed（图标轨 + hover 浮层）。
+
+  范围（MVP）：mode(vertical/horizontal)、items、header/footer、selected/open/collapsed
+  受控与非受控 + 回调。TODO（暂未实现，留待后续）：limitIndent / toggleIconPosition /
+  subNavMotion / tooltip 延迟 / renderWrapper / Nav.Item 声明式写法。
+-->
+<script lang="ts" module>
+  export { NAV_CONTEXT_KEY } from './context.js';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext, untrack } from 'svelte';
+  import Menu from '../menu/Menu.svelte';
+  import type { MenuKey, MenuItemNode } from '../menu/types.js';
+  import {
+    navItemsToMenuItems,
+    type NavItemDef,
+    type NavKey,
+    type NavMode,
+    type NavHeaderConfig,
+    type NavFooterConfig,
+  } from './types.js';
+  import {
+    NAV_CONTEXT_KEY,
+    NAV_COLLECTOR_KEY,
+    type NavContext,
+    type NavCollector,
+  } from './context.js';
+  import NavHeader from './NavHeader.svelte';
+  import NavFooter from './NavFooter.svelte';
+
+  interface Props {
+    /** 导航项列表（字段对齐 Semi：itemKey/text/icon/items）。 */
+    items?: NavItemDef[];
+    /** 导航方向：vertical（侧边，默认）/ horizontal（顶部）。 */
+    mode?: NavMode;
+    /** 受控选中项 key 数组。 */
+    selectedKeys?: NavKey[];
+    /** 默认选中项 key 数组（非受控）。 */
+    defaultSelectedKeys?: NavKey[];
+    /** 受控展开的子导航 key 数组（仅 vertical 且未折叠有效）。 */
+    openKeys?: NavKey[];
+    /** 默认展开的子导航 key 数组（非受控）。 */
+    defaultOpenKeys?: NavKey[];
+    /** 受控折叠态（仅 vertical 有效）。 */
+    isCollapsed?: boolean;
+    /** 默认折叠态（非受控，仅 vertical 有效）。 */
+    defaultIsCollapsed?: boolean;
+    /** 头部区域配置对象（{logo, text}）。与 header snippet 二选一。 */
+    header?: NavHeaderConfig;
+    /** 底部区域配置对象（{collapseButton}）。与 footer snippet 二选一。 */
+    footer?: NavFooterConfig;
+    /** 整体禁用。 */
+    disabled?: boolean;
+    /** 子级缩进像素（透传 Menu inlineIndent）。 */
+    inlineIndent?: number;
+    /** 缩进限制：仅一级缩进（默认 true）；false 时逐级缩进（透传 Menu limitIndent）。 */
+    limitIndent?: boolean;
+    /** 含子导航项的展开箭头位置（透传 Menu toggleIconPosition）。 */
+    toggleIconPosition?: 'left' | 'right';
+    /** 自定义展开箭头图标（透传 Menu expandIcon）。 */
+    expandIcon?: Snippet;
+    /** 子导航展开动画开关（默认 true，透传 Menu motion）。对齐 Semi subNavMotion。 */
+    subNavMotion?: boolean;
+    /** 浮层子导航展开延迟 ms（透传 Menu subMenuOpenDelay）。对齐 Semi subNavOpenDelay。 */
+    subNavOpenDelay?: number;
+    /** 浮层子导航关闭延迟 ms（透传 Menu subMenuCloseDelay）。对齐 Semi subNavCloseDelay。 */
+    subNavCloseDelay?: number;
+    /** 浮层挂载容器（透传 Menu getPopupContainer）。 */
+    getPopupContainer?: () => HTMLElement | null | undefined;
+    /** 自定义导航项外层包裹（透传 Menu renderWrapper）。 */
+    renderWrapper?: Snippet<[{ item: MenuItemNode; 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;
+    /** 折叠态变化回调。 */
+    onCollapseChange?: (isCollapsed: boolean) => void;
+    /** 自定义头部（覆盖 header 配置对象）。 */
+    headerSlot?: Snippet;
+    /** 自定义底部（覆盖 footer 配置对象）。 */
+    footerSlot?: Snippet;
+    /** 声明式子项（<Nav.Item>/<Nav.Sub>）。与 items 二选一，items 优先。 */
+    children?: Snippet;
+  }
+
+  let {
+    items = [],
+    mode = 'vertical',
+    selectedKeys,
+    defaultSelectedKeys,
+    openKeys,
+    defaultOpenKeys,
+    isCollapsed,
+    defaultIsCollapsed = false,
+    header,
+    footer,
+    disabled = false,
+    inlineIndent,
+    limitIndent,
+    toggleIconPosition,
+    expandIcon,
+    subNavMotion,
+    subNavOpenDelay,
+    subNavCloseDelay,
+    getPopupContainer,
+    renderWrapper,
+    class: className = '',
+    style,
+    bodyStyle,
+    ariaLabel,
+    onSelect,
+    onClick,
+    onOpenChange,
+    onCollapseChange,
+    headerSlot,
+    footerSlot,
+    children,
+  }: Props = $props();
+
+  // --- 受控/非受控折叠态（仅 vertical 有意义）；受控 prop 优先，变化走回调不回写 ---
+  const isCollapsedControlled = $derived(isCollapsed !== undefined);
+  let innerCollapsed = $state(untrack(() => defaultIsCollapsed));
+  const collapsedState = $derived(
+    mode === 'vertical' && (isCollapsedControlled ? !!isCollapsed : innerCollapsed),
+  );
+
+  function toggleCollapsed(): void {
+    const next = !collapsedState;
+    if (!isCollapsedControlled) innerCollapsed = next;
+    onCollapseChange?.(next);
+  }
+
+  // Footer 的 collapseButton 经 context 联动折叠态。
+  setContext<NavContext>(NAV_CONTEXT_KEY, {
+    get collapsed() {
+      return collapsedState;
+    },
+    get mode() {
+      return mode;
+    },
+    toggleCollapsed,
+  });
+
+  // --- 声明式子项收集（<Nav.Item>/<Nav.Sub>）---
+  // 普通数组承接注册（非 $state，避免子项 init push 触发反应自循环）。
+  let declared: NavItemDef[] = [];
+  // 唯一反应量：子项挂载后异步 bump，触发一次 items 重建。
+  let revision = $state(0);
+  let bumpScheduled = false;
+
+  setContext<NavCollector>(NAV_COLLECTOR_KEY, {
+    add: (item: NavItemDef) => {
+      declared.push(item);
+      return item;
+    },
+    bump: () => {
+      // 合并同一帧的多次 bump 为一次；异步脱离挂载 effect 同步栈。
+      if (bumpScheduled) return;
+      bumpScheduled = true;
+      queueMicrotask(() => {
+        bumpScheduled = false;
+        revision += 1;
+      });
+    },
+  });
+
+  // items prop 优先；否则用声明式收集结果。
+  // 必须真正使用 revision 的值（裸读语句会被编译器优化掉、断开依赖）；
+  // 返回浅拷贝确保 Menu 每次收到新数组引用而重渲染。
+  const resolvedItems = $derived.by(() => {
+    if (items.length) return items;
+    const r = revision;
+    return r >= 0 ? declared.slice() : [];
+  });
+
+  // --- items（Semi 形）→ Menu items ---
+  const menuItems = $derived(navItemsToMenuItems(resolvedItems));
+
+  // --- mode 映射到 Menu ---
+  const menuMode = $derived<'inline' | 'horizontal'>(
+    mode === 'horizontal' ? 'horizontal' : 'inline',
+  );
+  const menuInlineCollapsed = $derived(mode === 'vertical' && collapsedState);
+
+  const cls = $derived(
+    ['cd-nav', `cd-nav--${mode}`, collapsedState && 'cd-nav--collapsed', className]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  // 头部/底部是否渲染。
+  const hasHeader = $derived(!!headerSlot || !!header);
+  const hasFooter = $derived(!!footerSlot || (!!footer && footer.collapseButton));
+</script>
+
+<div class={cls} {style} aria-label={ariaLabel}>
+  {#if hasHeader}
+    {#if headerSlot}
+      {@render headerSlot()}
+    {:else if header}
+      <NavHeader
+        {...header.logo !== undefined ? { logo: header.logo } : {}}
+        {...header.text !== undefined ? { text: header.text } : {}}
+        {collapsedState}
+      />
+    {/if}
+  {/if}
+
+  <div class="cd-nav__body" style={bodyStyle}>
+    <Menu
+      items={menuItems}
+      mode={menuMode}
+      inlineCollapsed={menuInlineCollapsed}
+      purpose="navigation"
+      {disabled}
+      {...selectedKeys !== undefined ? { selectedKeys } : {}}
+      {...defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}}
+      {...openKeys !== undefined ? { openKeys } : {}}
+      {...defaultOpenKeys !== undefined ? { defaultOpenKeys } : {}}
+      {...inlineIndent !== undefined ? { inlineIndent } : {}}
+      {...limitIndent !== undefined ? { limitIndent } : {}}
+      {...toggleIconPosition !== undefined ? { toggleIconPosition } : {}}
+      {...expandIcon !== undefined ? { expandIcon } : {}}
+      {...subNavMotion !== undefined ? { motion: subNavMotion } : {}}
+      {...subNavOpenDelay !== undefined ? { subMenuOpenDelay: subNavOpenDelay } : {}}
+      {...subNavCloseDelay !== undefined ? { subMenuCloseDelay: subNavCloseDelay } : {}}
+      {...getPopupContainer !== undefined ? { getPopupContainer } : {}}
+      {...renderWrapper !== undefined ? { renderWrapper } : {}}
+      onSelect={(key: MenuKey) => {
+        onSelect?.(key);
+        onClick?.(key);
+      }}
+      onOpenChange={(keys: MenuKey[]) => onOpenChange?.(keys)}
+    />
+  </div>
+
+  <!-- 声明式子项注册宿主：仅当未传 items 且有 children 时挂载。
+       Nav.Item/Nav.Sub 渲染无可见 DOM，只在此注册描述符；display:none 不占位。 -->
+  {#if !items.length && children}
+    <div hidden style="display:none">{@render children()}</div>
+  {/if}
+
+  {#if hasFooter}
+    {#if footerSlot}
+      {@render footerSlot()}
+    {:else if footer}
+      <NavFooter collapseButton={footer.collapseButton ?? false} />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .cd-nav {
+    display: flex;
+    flex-direction: column;
+    background: var(--cd-nav-bg);
+    color: var(--cd-nav-color);
+  }
+  .cd-nav--horizontal {
+    flex-direction: row;
+    align-items: center;
+    height: var(--cd-nav-horizontal-height);
+  }
+  /* 导航体占据中间，header/footer 固定 */
+  .cd-nav__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+  .cd-nav--horizontal .cd-nav__body {
+    flex: 1 1 auto;
+    overflow: visible;
+  }
+</style>

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

@@ -0,0 +1,75 @@
+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';
+interface Props {
+    /** 导航项列表（字段对齐 Semi：itemKey/text/icon/items）。 */
+    items?: NavItemDef[];
+    /** 导航方向：vertical（侧边，默认）/ horizontal（顶部）。 */
+    mode?: NavMode;
+    /** 受控选中项 key 数组。 */
+    selectedKeys?: NavKey[];
+    /** 默认选中项 key 数组（非受控）。 */
+    defaultSelectedKeys?: NavKey[];
+    /** 受控展开的子导航 key 数组（仅 vertical 且未折叠有效）。 */
+    openKeys?: NavKey[];
+    /** 默认展开的子导航 key 数组（非受控）。 */
+    defaultOpenKeys?: NavKey[];
+    /** 受控折叠态（仅 vertical 有效）。 */
+    isCollapsed?: boolean;
+    /** 默认折叠态（非受控，仅 vertical 有效）。 */
+    defaultIsCollapsed?: boolean;
+    /** 头部区域配置对象（{logo, text}）。与 header snippet 二选一。 */
+    header?: NavHeaderConfig;
+    /** 底部区域配置对象（{collapseButton}）。与 footer snippet 二选一。 */
+    footer?: NavFooterConfig;
+    /** 整体禁用。 */
+    disabled?: boolean;
+    /** 子级缩进像素（透传 Menu inlineIndent）。 */
+    inlineIndent?: number;
+    /** 缩进限制：仅一级缩进（默认 true）；false 时逐级缩进（透传 Menu limitIndent）。 */
+    limitIndent?: boolean;
+    /** 含子导航项的展开箭头位置（透传 Menu toggleIconPosition）。 */
+    toggleIconPosition?: 'left' | 'right';
+    /** 自定义展开箭头图标（透传 Menu expandIcon）。 */
+    expandIcon?: Snippet;
+    /** 子导航展开动画开关（默认 true，透传 Menu motion）。对齐 Semi subNavMotion。 */
+    subNavMotion?: boolean;
+    /** 浮层子导航展开延迟 ms（透传 Menu subMenuOpenDelay）。对齐 Semi subNavOpenDelay。 */
+    subNavOpenDelay?: number;
+    /** 浮层子导航关闭延迟 ms（透传 Menu subMenuCloseDelay）。对齐 Semi subNavCloseDelay。 */
+    subNavCloseDelay?: number;
+    /** 浮层挂载容器（透传 Menu getPopupContainer）。 */
+    getPopupContainer?: () => HTMLElement | null | undefined;
+    /** 自定义导航项外层包裹（透传 Menu renderWrapper）。 */
+    renderWrapper?: Snippet<[{
+        item: MenuItemNode;
+        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;
+    /** 折叠态变化回调。 */
+    onCollapseChange?: (isCollapsed: boolean) => void;
+    /** 自定义头部（覆盖 header 配置对象）。 */
+    headerSlot?: Snippet;
+    /** 自定义底部（覆盖 footer 配置对象）。 */
+    footerSlot?: Snippet;
+    /** 声明式子项（<Nav.Item>/<Nav.Sub>）。与 items 二选一，items 优先。 */
+    children?: Snippet;
+}
+declare const Nav: import("svelte").Component<Props, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;
+//# sourceMappingURL=Nav.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/nav/NavFooter.svelte

@@ -0,0 +1,82 @@
+<!--
+  Nav.Footer — 导航底部（对齐 Semi footer={{collapseButton}}）。
+  collapseButton 仅 mode='vertical' 生效，点击经 Nav context toggle 折叠态。
+  aria-label 文案复用 locale 包 Sider.expand/collapse。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useLocale } from '../locale-provider/index.js';
+  import { getNavContext } from './context.js';
+
+  interface Props {
+    /** 是否展示收起按钮（仅 vertical 生效）。 */
+    collapseButton?: boolean;
+    /** 自定义类名。 */
+    class?: string;
+    /** 自定义内联样式。 */
+    style?: string;
+    children?: Snippet;
+  }
+
+  let { collapseButton = false, class: className = '', style, children }: Props = $props();
+
+  const loc = useLocale();
+  const nav = getNavContext();
+
+  const showCollapseButton = $derived(
+    collapseButton && !children && nav?.mode === 'vertical',
+  );
+  const collapsed = $derived(nav?.collapsed ?? false);
+  // 折叠时箭头指向「展开」方向，反之指向「收起」。
+  const arrow = $derived(collapsed ? '›' : '‹');
+</script>
+
+<div class={['cd-nav__footer', className].filter(Boolean).join(' ')} {style}>
+  {#if children}
+    {@render children()}
+  {: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>
+  {/if}
+</div>
+
+<style>
+  .cd-nav__footer {
+    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;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 是否展示收起按钮（仅 vertical 生效）。 */
+    collapseButton?: boolean;
+    /** 自定义类名。 */
+    class?: string;
+    /** 自定义内联样式。 */
+    style?: string;
+    children?: Snippet;
+}
+declare const NavFooter: import("svelte").Component<Props, {}, "">;
+type NavFooter = ReturnType<typeof NavFooter>;
+export default NavFooter;
+//# sourceMappingURL=NavFooter.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/nav/NavHeader.svelte

@@ -0,0 +1,66 @@
+<!--
+  Nav.Header — 导航头部：logo 槽 + 文案（对齐 Semi header={{logo,text}}）。
+  折叠态隐藏文案仅留 logo。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Logo 节点。 */
+    logo?: Snippet;
+    /** Logo 文案。 */
+    text?: string;
+    /** 折叠态（由 Nav 透传；折叠时隐藏文案）。 */
+    collapsedState?: boolean;
+    /** 自定义类名。 */
+    class?: string;
+    /** 自定义内联样式。 */
+    style?: string;
+    children?: Snippet;
+  }
+
+  let {
+    logo,
+    text,
+    collapsedState = false,
+    class: className = '',
+    style,
+    children,
+  }: Props = $props();
+</script>
+
+<div class={['cd-nav__header', className].filter(Boolean).join(' ')} {style}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#if logo}
+      <span class="cd-nav__logo">{@render logo()}</span>
+    {/if}
+    {#if text && !collapsedState}
+      <span class="cd-nav__header-text">{text}</span>
+    {/if}
+  {/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);
+    flex: 0 0 auto;
+    overflow: hidden;
+  }
+  .cd-nav__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);
+    white-space: nowrap;
+    color: var(--cd-nav-header-text-color);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Logo 节点。 */
+    logo?: Snippet;
+    /** Logo 文案。 */
+    text?: string;
+    /** 折叠态（由 Nav 透传；折叠时隐藏文案）。 */
+    collapsedState?: boolean;
+    /** 自定义类名。 */
+    class?: string;
+    /** 自定义内联样式。 */
+    style?: string;
+    children?: Snippet;
+}
+declare const NavHeader: import("svelte").Component<Props, {}, "">;
+type NavHeader = ReturnType<typeof NavHeader>;
+export default NavHeader;
+//# sourceMappingURL=NavHeader.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/nav/NavItem.svelte

@@ -0,0 +1,68 @@
+<!--
+  Nav.Item — 声明式叶子导航项（对齐 Semi Nav.Item）。
+  仅注册描述符到父级收集器，不直接渲染 DOM（渲染由 Nav 委托的 Menu 统一负责）。
+  安全：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';
+
+  interface Props {
+    /** 导航项唯一标识。 */
+    itemKey: NavKey;
+    /** 导航项文案。 */
+    text: string;
+    /** 项前置图标。 */
+    icon?: Snippet;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 链接地址（叶子项渲染为原生 <a>）。 */
+    link?: string;
+    /** 链接 target。 */
+    target?: string;
+    /** 链接 rel。 */
+    rel?: string;
+    /** 项级点击回调。 */
+    onClick?: (e: MouseEvent) => void;
+    /** 项级鼠标移入回调。 */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** 项级鼠标移出回调。 */
+    onMouseLeave?: (e: MouseEvent) => void;
+  }
+
+  let {
+    itemKey,
+    text,
+    icon,
+    disabled,
+    link,
+    target,
+    rel,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+  }: Props = $props();
+
+  const collector = getNavCollector();
+  // 声明式项为「声明时读取一次」语义（对齐 Semi Nav.Item，不支持运行时改 prop）。
+  // 故此处刻意静态读取 props 注册，state_referenced_locally 警告预期且无害。
+  // svelte-ignore state_referenced_locally
+  if (collector) {
+    collector.add({
+      itemKey,
+      text,
+      ...(icon !== undefined ? { icon } : {}),
+      ...(disabled !== undefined ? { disabled } : {}),
+      ...(link !== undefined ? { link } : {}),
+      ...(target !== undefined ? { target } : {}),
+      ...(rel !== undefined ? { rel } : {}),
+      ...(onClick !== undefined ? { onClick } : {}),
+      ...(onMouseEnter !== undefined ? { onMouseEnter } : {}),
+      ...(onMouseLeave !== undefined ? { onMouseLeave } : {}),
+    });
+  }
+  // 挂载后异步 bump，脱离挂载 effect 同步栈。
+  onMount(() => collector?.bump());
+</script>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { NavKey } from './types.js';
+interface Props {
+    /** 导航项唯一标识。 */
+    itemKey: NavKey;
+    /** 导航项文案。 */
+    text: string;
+    /** 项前置图标。 */
+    icon?: Snippet;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 链接地址（叶子项渲染为原生 <a>）。 */
+    link?: string;
+    /** 链接 target。 */
+    target?: string;
+    /** 链接 rel。 */
+    rel?: string;
+    /** 项级点击回调。 */
+    onClick?: (e: MouseEvent) => void;
+    /** 项级鼠标移入回调。 */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** 项级鼠标移出回调。 */
+    onMouseLeave?: (e: MouseEvent) => void;
+}
+declare const NavItem: import("svelte").Component<Props, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;
+//# sourceMappingURL=NavItem.svelte.d.ts.map

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

@@ -0,0 +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"}