@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/collapse/CollapsePanel.svelte

@@ -1,102 +1,172 @@
 <!--
-  Collapse.Panel — 声明式单面板，与数据驱动 panels 渲染同一套 .cd-collapse__item 结构，
-  从而复用父 Collapse 的 grid 展开动画、箭头位置、边框等全部 CSS，无需在父级建挂载 registry。
-  父子状态经 context.ts 传递（参考 Timeline.Item / Form.Field）：
-    展开态判断（isActive/shouldRender）为父级纯派生函数，本组件只读不写（红线 #2）；
-    点击 header 调父 toggle，受控时仅 onChange 不回写（红线 #1，在父级落实）。
+  Collapse.Panel — 单面板，对齐 Semi collapse/item.tsx 的 DOM 结构与 handleClick 逻辑。
+  经 context 读父级展开态（isActive，纯派生只读，红线 #2）与配置；点击调父 onClick
+  （受控仅 onChange 不回写，红线 #1，在父级落实）。content 用 <Collapsible> 原语做高度
+  折叠/展开过渡（keepDOM / lazyRender / motion / reCalcKey 透传，红线 #3 由原语负责）。
+
+  DOM 镜像 Semi：
+    .cd-collapse-item (.cd-collapse-item-active)
+      div.cd-collapse-header (role=button, tabindex=0, aria-expanded/-disabled/-owns)
+        string header → <span>{header}</span> + .cd-collapse-header-right(<span>{extra}</span> + icon)
+        node   header → icon(left) + {head} + icon(right)
+      <Collapsible> .cd-collapse-content(aria-hidden, id) > .cd-collapse-content-wrapper
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { useId } from '@chenzy-design/core';
+  import { IconChevronDown, IconChevronUp } from '@chenzy-design/icons';
+  import Collapsible from '../collapsible/Collapsible.svelte';
   import { getCollapseContext } from './context.js';
 
   interface Props {
-    /** 面板唯一标识，等价数据驱动 panel.key。 */
+    /** 必填且唯一，选中状态匹配 activeKey / defaultActiveKey。 */
     itemKey: string;
-    /** 头部文本。 */
+    /** 面板头文本内容（string 时渲染 header-right + extra，对齐 Semi）。 */
     header?: string;
-    /** 面板级 disabled：该面板不可展开/收起。 */
-    disabled?: boolean;
-    /** 头部富内容插槽，优先于 header 文本。 */
+    /** 面板头富内容插槽（ReactNode 语义，优先于 header 文本；此时 extra 不单独渲染）。 */
     head?: Snippet;
-    /** 头部右侧额外内容（不触发展开/收起），可为字符串或 Snippet。 */
+    /** 自定义渲染右上角辅助内容（仅当 header 为 string、未用 head 时生效）。 */
     extra?: Snippet | string;
-    /** 是否显示箭头区域，默认 true。 */
+    /** 面板是否被禁用。 */
+    disabled?: boolean;
+    /** 是否展示箭头。 */
     showArrow?: boolean;
+    /** reCalcKey 改变时重算内容高度（透传 Collapsible，动态内容用）。 */
+    reCalcKey?: number | string;
+    /** 动画结束回调。 */
+    onMotionEnd?: () => void;
+    /** 样式类名。 */
+    class?: string;
+    /** 内联 CSS 样式。 */
+    style?: string;
+    /** 面板内容。 */
     children?: Snippet;
   }
 
-  let { itemKey, header, disabled = false, head, extra, showArrow = true, children }: Props = $props();
+  let {
+    itemKey,
+    header,
+    head,
+    extra,
+    disabled = false,
+    showArrow = true,
+    reCalcKey,
+    onMotionEnd,
+    class: className,
+    style,
+    children,
+  }: Props = $props();
 
   const ctx = getCollapseContext();
 
-  // 展开态由父派生（纯函数），跨 context 读 getter 保持响应性。
+  // 展开态由父派生（纯函数），跨 context 读 getter 保持响应性（红线 #2 只读）。
   const active = $derived(ctx?.isActive(itemKey) ?? false);
-  // 面板不可用 = 父整体 disabled 或本面板 disabled。
-  const itemDisabled = $derived((ctx?.getDisabled() ?? false) || disabled);
-  const render = $derived(ctx?.shouldRender(itemKey) ?? true);
+  const iconPosition = $derived(ctx?.getIconPosition() ?? 'right');
+  const keepDOM = $derived(ctx?.getKeepDOM() ?? false);
+  const motion = $derived(ctx?.getMotion() ?? true);
+  const lazyRender = $derived(ctx?.getLazyRender() ?? false);
+  const clickHeaderToExpand = $derived(ctx?.getClickHeaderToExpand() ?? true);
+  const customExpandIcon = $derived(ctx?.getExpandIcon());
+  const customCollapseIcon = $derived(ctx?.getCollapseIcon());
+
+  // aria-owns 关联内容区（对齐 Semi ariaID）。
+  const ariaID = useId('cd-collapse');
+
+  // 图标是否「可用」（对齐 Semi expandIconEnable）：有内容且未禁用时，展开/收起切换两个图标；
+  // 否则恒显 expandIcon 并加 -header-iconDisabled。
+  const iconEnable = $derived(children !== undefined && !disabled);
+  const iconPosLeft = $derived(iconPosition === 'left');
 
-  const idBase = $derived(ctx?.getIdBase() ?? 'cd-collapse');
-  const headerId = $derived(`${idBase}-h-${itemKey}`);
-  const regionId = $derived(`${idBase}-r-${itemKey}`);
-  const headingLevel = $derived(ctx?.getHeadingLevel() ?? 3);
-  // roving tabindex 由父派生（红线 #2：本组件只读不写父级 $state）。
-  const tabindex = $derived(ctx?.headerTabindex(itemKey, disabled) ?? 0);
-  const expandIcon = $derived(ctx?.getExpandIcon());
+  // header-icon 引用：用于判定点击是否落在箭头上（clickHeaderToExpand=false 时仅箭头可触发）。
+  let iconEl = $state<HTMLElement | null>(null);
+
+  // 对齐 Semi handleClick：clickHeaderToExpand 或点击目标在 icon 内才触发切换。
+  function handleClick(event: MouseEvent): void {
+    if (disabled) return;
+    if (clickHeaderToExpand || iconEl?.contains(event.target as Node)) {
+      ctx?.onClick(itemKey, event);
+    }
+  }
+
+  const itemCls = $derived(
+    ['cd-collapse-item', active && 'cd-collapse-item-active', className]
+      .filter(Boolean)
+      .join(' '),
+  );
+  const headerCls = $derived(
+    [
+      'cd-collapse-header',
+      disabled && 'cd-collapse-header-disabled',
+      iconPosLeft && 'cd-collapse-header-iconLeft',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 </script>
 
-<div class="cd-collapse__item" class:cd-collapse__item--active={active}>
-  <!-- APG Accordion：Header 触发器外层 role=heading + aria-level。 -->
-  <span role="heading" aria-level={headingLevel} class="cd-collapse__heading">
-  <button
-    type="button"
-    id={headerId}
-    class="cd-collapse__header"
-    data-collapse-key={itemKey}
-    aria-expanded={active}
-    aria-controls={regionId}
-    aria-disabled={itemDisabled || undefined}
-    disabled={itemDisabled || undefined}
-    {tabindex}
-    onclick={(e) => ctx?.headerClick(e, itemKey, disabled)}
-    onkeydown={(e) => ctx?.onHeaderKeydown(e, itemKey)}
-    onfocus={() => ctx?.onHeaderFocus(itemKey)}
+<!-- 默认展开图标（收起态显示）：IconChevronDown（对齐 Semi，两图标切换非 rotate）。 -->
+{#snippet defaultExpand()}
+  <IconChevronDown size="inherit" aria-hidden="true" />
+{/snippet}
+<!-- 默认折叠图标（展开态显示）：IconChevronUp（对齐 Semi，两图标切换非 rotate）。 -->
+{#snippet defaultCollapse()}
+  <IconChevronUp size="inherit" aria-hidden="true" />
+{/snippet}
+
+{#snippet iconSpan()}
+  <span
+    bind:this={iconEl}
+    aria-hidden="true"
+    class={['cd-collapse-header-icon', !iconEnable && 'cd-collapse-header-iconDisabled']
+      .filter(Boolean)
+      .join(' ')}
   >
-    {#if showArrow}
-      {#if expandIcon}
-        <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
-          {@render expandIcon({ isExpanded: active })}
-        </span>
-      {:else}
-        <span class="cd-collapse__arrow" class:cd-collapse__arrow--open={active} aria-hidden="true">
-          <svg viewBox="0 0 16 16" width="12" height="12" focusable="false">
-            <path fill="currentColor" d="M6 4l4 4-4 4V4Z" />
-          </svg>
-        </span>
-      {/if}
-    {/if}
-    <span class="cd-collapse__title">
-      {#if head}{@render head()}{:else}{header}{/if}
-    </span>
-    {#if extra !== undefined}
-      <span class="cd-collapse__extra" onclick={(e) => e.stopPropagation()} role="none">
-        {#if typeof extra === 'string'}{extra}{:else}{@render extra()}{/if}
-      </span>
-    {/if}
-  </button>
+    {#if iconEnable && active}
+      {#if customCollapseIcon}{@render customCollapseIcon()}{:else}{@render defaultCollapse()}{/if}
+    {:else if customExpandIcon}{@render customExpandIcon()}{:else}{@render defaultExpand()}{/if}
   </span>
+{/snippet}
+
+<div class={itemCls} {style}>
   <div
-    id={regionId}
-    class="cd-collapse__region"
-    role="region"
-    aria-labelledby={headerId}
-    hidden={!active}
+    role="button"
+    tabindex={0}
+    class={headerCls}
+    aria-disabled={disabled}
+    aria-expanded={active ? 'true' : 'false'}
+    aria-owns={ariaID}
+    onclick={handleClick}
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleClick(e as unknown as MouseEvent);
+      }
+    }}
   >
-    <div class="cd-collapse__region-inner">
-      <div class="cd-collapse__content">
-        {#if render}
-          {@render children?.()}
+    {#if head}
+      <!-- 富内容 header：icon 直接夹在 head 两侧（对齐 Semi node header 分支）。 -->
+      {#if showArrow && iconPosLeft}{@render iconSpan()}{/if}
+      {@render head()}
+      {#if showArrow && !iconPosLeft}{@render iconSpan()}{/if}
+    {:else}
+      <!-- string header：header-right 承载 extra + icon（对齐 Semi string header 分支）。 -->
+      {#if showArrow && iconPosLeft}{@render iconSpan()}{/if}
+      <span>{header}</span>
+      <span class="cd-collapse-header-right">
+        {#if extra !== undefined}
+          <span>{#if typeof extra === 'string'}{extra}{:else}{@render extra()}{/if}</span>
         {/if}
-      </div>
-    </div>
+        {#if showArrow && !iconPosLeft}{@render iconSpan()}{/if}
+      </span>
+    {/if}
   </div>
+  {#if children !== undefined}
+    <Collapsible isOpen={active} {keepDOM} {motion} {lazyRender} {reCalcKey} {onMotionEnd}>
+      <div class="cd-collapse-content" aria-hidden={!active} id={ariaID}>
+        <div class="cd-collapse-content-wrapper">
+          {@render children()}
+        </div>
+      </div>
+    </Collapsible>
+  {/if}
 </div>

package/dist/collapse/CollapsePanel.svelte.d.ts

@@ -1,17 +1,26 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    /** 面板唯一标识，等价数据驱动 panel.key。 */
+    /** 必填且唯一，选中状态匹配 activeKey / defaultActiveKey。 */
     itemKey: string;
-    /** 头部文本。 */
+    /** 面板头文本内容（string 时渲染 header-right + extra，对齐 Semi）。 */
     header?: string;
-    /** 面板级 disabled：该面板不可展开/收起。 */
-    disabled?: boolean;
-    /** 头部富内容插槽，优先于 header 文本。 */
+    /** 面板头富内容插槽（ReactNode 语义，优先于 header 文本；此时 extra 不单独渲染）。 */
     head?: Snippet;
-    /** 头部右侧额外内容（不触发展开/收起），可为字符串或 Snippet。 */
+    /** 自定义渲染右上角辅助内容（仅当 header 为 string、未用 head 时生效）。 */
     extra?: Snippet | string;
-    /** 是否显示箭头区域，默认 true。 */
+    /** 面板是否被禁用。 */
+    disabled?: boolean;
+    /** 是否展示箭头。 */
     showArrow?: boolean;
+    /** reCalcKey 改变时重算内容高度（透传 Collapsible，动态内容用）。 */
+    reCalcKey?: number | string;
+    /** 动画结束回调。 */
+    onMotionEnd?: () => void;
+    /** 样式类名。 */
+    class?: string;
+    /** 内联 CSS 样式。 */
+    style?: string;
+    /** 面板内容。 */
     children?: Snippet;
 }
 declare const CollapsePanel: import("svelte").Component<Props, {}, "">;

package/dist/collapse/CollapsePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/CollapsePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CollapsePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/collapse/CollapsePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,UAAU,KAAK;IACb,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,cAAc;IACd,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+HH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/collapse/context.d.ts

@@ -1,45 +1,31 @@
 import type { Snippet } from 'svelte';
-export type CollapseSize = 'small' | 'default' | 'large';
 export type CollapseIconPosition = 'left' | 'right';
 /**
- * 父 Collapse 向声明式 <Collapse.Panel> 暴露的上下文。
+ * 父 Collapse 向 <Collapse.Panel> 暴露的上下文（对齐 Semi collapse-context）。
  * 全部用 getter 跨 context 边界保持对父 prop / 展开态变化的响应性
  * （直接读快照会冻结初始值）。
- * 红线 #2: isActive / shouldRender 为纯派生函数，render 期只读不写。
+ * 红线 #1#2 在父级落实：activeSet 由父派生（受控读 prop、非受控读本地 set），
+ *   子 Panel 只读 isActive，点击调 onClick 不回写 prop。
  */
 export interface CollapseContext {
     /** 该 key 当前是否展开（受控读 prop、非受控读本地 set，均由父派生）。 */
     isActive: (key: string) => boolean;
-    /** 该 key 内容是否应渲染（lazyRender / keepDOM 策略）。 */
-    shouldRender: (key: string) => boolean;
-    /** 点击 header 切换展开态；panelDisabled 为该面板自身 disabled。 */
-    toggle: (key: string, panelDisabled?: boolean) => void;
-    /**
-     * Header 点击入口：先发 on:headerClick（埋点，disabled 拦截前），再 toggle。
-     * 声明式 <Collapse.Panel> 的 header onclick 应调此，保证 headerClick 事件统一从父发出。
-     */
-    headerClick: (event: MouseEvent, key: string, panelDisabled?: boolean) => void;
-    /** 父级整体 disabled。 */
-    getDisabled: () => boolean;
-    getSize: () => CollapseSize;
+    /** 点击 header / icon 切换该 key 展开态（受控仅 onChange，非受控更新本地 set）。 */
+    onClick: (key: string, event: MouseEvent) => void;
+    /** 是否点击整个 Header 即展开（false 时只响应点击箭头，对齐 Semi clickHeaderToExpand）。 */
+    getClickHeaderToExpand: () => boolean;
+    /** 折叠时是否保留 DOM（对齐 Semi keepDOM，默认 false）。 */
+    getKeepDOM: () => boolean;
+    /** 是否开启展开动画（对齐 Semi motion）。 */
+    getMotion: () => boolean;
+    /** 配合 keepDOM，首次挂载不渲染内容（对齐 Semi lazyRender）。 */
+    getLazyRender: () => boolean;
+    /** 展开图标位置（对齐 Semi expandIconPosition，默认 right）。 */
     getIconPosition: () => CollapseIconPosition;
-    /** header/region id 前缀，用于 aria 关联。 */
-    getIdBase: () => string;
-    /** Header role=heading 的 aria-level。 */
-    getHeadingLevel: () => number;
-    /**
-     * roving tabindex（纯派生）：焦点 Header / 首个未禁用 Header 为 0，其余 -1。
-     * 红线 #2：render 期只读，不写父级 $state。
-     */
-    headerTabindex: (key: string, panelDisabled?: boolean) => 0 | -1;
-    /** Header keydown：↑↓ roving + Home/End（命令式 focus()，非 render 期）。 */
-    onHeaderKeydown: (event: KeyboardEvent, key: string) => void;
-    /** Header 获得焦点时同步 focusedKey。 */
-    onHeaderFocus: (key: string) => void;
-    /** 自定义展开图标 Snippet，参数为 {isExpanded}；undefined 时渲染默认箭头 SVG。 */
-    getExpandIcon: () => Snippet<[{
-        isExpanded: boolean;
-    }]> | undefined;
+    /** 自定义展开图标（未展开时显示，对齐 Semi expandIcon，默认 IconChevronDown）。 */
+    getExpandIcon: () => Snippet | undefined;
+    /** 自定义折叠图标（展开时显示，对齐 Semi collapseIcon，默认 IconChevronUp）。 */
+    getCollapseIcon: () => Snippet | undefined;
 }
 export declare function setCollapseContext(ctx: CollapseContext): void;
 export declare function getCollapseContext(): CollapseContext | undefined;

package/dist/collapse/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/collapse/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,8CAA8C;IAC9C,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,qDAAqD;IACrD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/E,qBAAqB;IACrB,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,eAAe,EAAE,MAAM,oBAAoB,CAAC;IAC5C,sCAAsC;IACtC,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,wCAAwC;IACxC,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACjE,mEAAmE;IACnE,eAAe,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,iCAAiC;IACjC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,8DAA8D;IAC9D,aAAa,EAAE,MAAM,OAAO,CAAC,CAAC;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,GAAG,SAAS,CAAC;CACrE;AAID,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI,CAE7D;AAED,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,SAAS,CAEhE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/collapse/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,8DAA8D;IAC9D,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAClD,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,OAAO,CAAC;IACtC,6CAA6C;IAC7C,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,gCAAgC;IAChC,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gDAAgD;IAChD,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,mDAAmD;IACnD,eAAe,EAAE,MAAM,oBAAoB,CAAC;IAC5C,6DAA6D;IAC7D,aAAa,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IACzC,4DAA4D;IAC5D,eAAe,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;CAC5C;AAID,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,eAAe,GAAG,IAAI,CAE7D;AAED,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,SAAS,CAEhE"}

package/dist/collapse/index.d.ts

@@ -5,6 +5,5 @@ export declare const Collapse: typeof Collapse_ & {
 };
 export { CollapsePanelComponent };
 export { meta as collapseMeta } from './meta.js';
-export type { CollapsePanel } from './types.js';
-export { getCollapseContext, setCollapseContext, type CollapseContext, type CollapseSize, type CollapseIconPosition, } from './context.js';
+export { getCollapseContext, setCollapseContext, type CollapseContext, type CollapseIconPosition, } from './context.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/collapse/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,GAAG;IACxC,KAAK,EAAE,OAAO,sBAAsB,CAAC;CACwB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,oBAAoB,GAC1B,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,GAAG;IACxC,KAAK,EAAE,OAAO,sBAAsB,CAAC;CACwB,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,MAAM,cAAc,CAAC"}

package/dist/collapse/meta.d.ts

@@ -1,109 +1,126 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * See specs/00-foundation/ai-friendly.spec.md.
+ * API / tokens 全面对齐 Semi Design collapse。
  */
 export declare const meta: {
     readonly name: "Collapse";
     readonly category: "show";
-    readonly description: "折叠面板，分组承载内容、按需展开。支持数据驱动 panels 与声明式 <Collapse.Panel> 两种用法（择一）、受控 activeKey、accordion 手风琴、展开动画、箭头位置、边框与面板级 disabled。";
+    readonly description: "折叠面板，可展开或折叠展示内容区域。用 <Collapse.Panel itemKey header> 声明面板，支持受控 activeKey、accordion 手风琴、clickHeaderToExpand、自定义 expandIcon/collapseIcon、keepDOM/lazyRender、展开动画。DOM/API/tokens 对齐 Semi。";
     readonly props: readonly [{
-        readonly name: "panels";
-        readonly type: "CollapsePanel[]";
-        readonly default: "[]";
-        readonly desc: "面板头部数据（数据驱动模式；为空且传 children 时切换为声明式 <Collapse.Panel>）";
+        readonly name: "accordion";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "手风琴模式，每次只允许展开一个面板";
     }, {
         readonly name: "activeKey";
         readonly type: "string|string[]";
         readonly default: "undefined";
-        readonly desc: "受控展开键，仅 onChange 不回写";
+        readonly desc: "受控属性，当前展开的面板 key（仅 onChange 不回写）";
     }, {
-        readonly name: "defaultActiveKey";
-        readonly type: "string|string[]";
+        readonly name: "class";
+        readonly type: "string";
         readonly default: "undefined";
+        readonly desc: "样式类名";
     }, {
-        readonly name: "accordion";
+        readonly name: "clickHeaderToExpand";
         readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "手风琴模式，仅展开一个";
+        readonly default: "true";
+        readonly desc: "点击 Header 展开收起，否则只响应点击箭头";
     }, {
-        readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
-        readonly default: "default";
+        readonly name: "collapseIcon";
+        readonly type: "Snippet";
+        readonly default: "IconChevronUp";
+        readonly desc: "自定义折叠图标（展开态显示）";
+    }, {
+        readonly name: "defaultActiveKey";
+        readonly type: "string|string[]";
+        readonly default: "undefined";
+        readonly desc: "初始化选中面板的 key";
+    }, {
+        readonly name: "expandIcon";
+        readonly type: "Snippet";
+        readonly default: "IconChevronDown";
+        readonly desc: "自定义展开图标（收起态显示）";
     }, {
         readonly name: "expandIconPosition";
         readonly type: "'left'|'right'";
         readonly default: "right";
+        readonly desc: "展开图标位置";
     }, {
-        readonly name: "bordered";
-        readonly type: "boolean";
-        readonly default: "true";
-    }, {
-        readonly name: "disabled";
+        readonly name: "keepDOM";
         readonly type: "boolean";
         readonly default: "false";
-    }, {
-        readonly name: "motion";
-        readonly type: "boolean";
-        readonly default: "true";
-        readonly desc: "展开动画开关";
+        readonly desc: "是否保留隐藏的面板 DOM 树，默认销毁";
     }, {
         readonly name: "lazyRender";
         readonly type: "boolean";
         readonly default: "false";
-        readonly desc: "首次展开后才渲染内容";
+        readonly desc: "配合 keepDOM，为 true 时挂载时不渲染内容";
     }, {
-        readonly name: "keepDOM";
+        readonly name: "motion";
         readonly type: "boolean";
         readonly default: "true";
-        readonly desc: "展开过的内容保留 DOM";
-    }, {
-        readonly name: "onChange";
-        readonly type: "(keys: string[]) => void";
-        readonly default: "undefined";
+        readonly desc: "是否开启动画";
     }, {
-        readonly name: "onExpand";
-        readonly type: "(detail: { key: string }) => void";
+        readonly name: "style";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "某面板被展开后触发";
+        readonly desc: "内联 CSS 样式";
     }, {
-        readonly name: "onCollapse";
-        readonly type: "(detail: { key: string }) => void";
-        readonly default: "undefined";
-        readonly desc: "某面板被收起后触发";
-    }, {
-        readonly name: "onHeaderClick";
-        readonly type: "(detail: { key: string; event: MouseEvent }) => void";
+        readonly name: "onChange";
+        readonly type: "(activeKey: string[], event: MouseEvent) => void";
         readonly default: "undefined";
-        readonly desc: "Header 被点击触发（disabled 拦截前发出，可用于埋点）";
+        readonly desc: "切换面板的回调";
     }, {
         readonly name: "children";
-        readonly type: "Snippet<[{ key: string }]> | Snippet";
+        readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "数据驱动：按 key 渲染面板内容；声明式（不传 panels）：内嵌 <Collapse.Panel> 列表";
+        readonly desc: "内嵌 <Collapse.Panel> 列表";
     }];
     readonly subcomponents: readonly [{
         readonly name: "Collapse.Panel";
-        readonly desc: "声明式单面板，经 Object.assign(Collapse, { Panel }) 导出，父子状态用 context 传递（同 Timeline.Item / Form.Field 复合模式）。等价于 panels 数据驱动的一项，可放富内容头部/内容。";
+        readonly desc: "单面板，经 Object.assign(Collapse, { Panel }) 导出，父子状态用 context 传递（同 Timeline.Item / Form.Field 复合模式）。DOM 对齐 Semi collapse/item：header role=button，content 用 Collapsible 原语折叠。";
         readonly props: readonly [{
             readonly name: "itemKey";
             readonly type: "string";
             readonly default: "(required)";
-            readonly desc: "面板唯一标识，等价 panel.key";
+            readonly desc: "必填且唯一，匹配 activeKey / defaultActiveKey";
         }, {
             readonly name: "header";
             readonly type: "string";
             readonly default: "undefined";
-            readonly desc: "头部文本";
+            readonly desc: "面板头文本（string 时渲染 header-right + extra）";
+        }, {
+            readonly name: "head";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+            readonly desc: "面板头富内容插槽（ReactNode 语义，优先于 header）";
+        }, {
+            readonly name: "extra";
+            readonly type: "Snippet|string";
+            readonly default: "undefined";
+            readonly desc: "右上角辅助内容（仅 header 为 string 且未用 head 时生效）";
         }, {
             readonly name: "disabled";
             readonly type: "boolean";
             readonly default: "false";
-            readonly desc: "面板级 disabled，该面板不可展开/收起";
+            readonly desc: "面板是否被禁用";
         }, {
-            readonly name: "head";
-            readonly type: "Snippet";
+            readonly name: "showArrow";
+            readonly type: "boolean";
+            readonly default: "true";
+            readonly desc: "是否展示箭头";
+        }, {
+            readonly name: "reCalcKey";
+            readonly type: "number|string";
+            readonly default: "undefined";
+            readonly desc: "reCalcKey 改变时重算内容高度（动态内容用）";
+        }, {
+            readonly name: "onMotionEnd";
+            readonly type: "() => void";
             readonly default: "undefined";
-            readonly desc: "头部富内容插槽，优先于 header";
+            readonly desc: "动画结束回调";
         }, {
             readonly name: "children";
             readonly type: "Snippet";
@@ -112,10 +129,10 @@ export declare const meta: {
         }];
     }];
     readonly a11y: {
-        readonly role: "region";
+        readonly role: "button";
         readonly keyboard: readonly ["Tab", "Enter", "Space"];
-        readonly notes: readonly ["面板头为原生 button，aria-expanded 标记展开态", "button aria-controls 指向内容 region，region aria-labelledby 指回头部", "折叠时内容区 hidden 移出可达性树", "箭头 aria-hidden=true"];
+        readonly notes: readonly ["面板 header 为 role=button，aria-expanded 标记展开态", "header aria-owns 指向内容区，内容区 aria-hidden 随展开态切换", "header aria-disabled 与 disabled 属性同步", "箭头图标 aria-hidden=true"];
     };
-    readonly tokens: readonly ["--cd-collapse-*", "--cd-focus-ring", "--cd-border-radius-small", "--cd-spacing-tight", "--cd-motion-ease-standard", "--cd-color-text-3"];
+    readonly tokens: readonly ["--cd-color-collapse-item-border-default", "--cd-color-collapse-header-text-default", "--cd-color-collapse-header-text-disabled", "--cd-color-collapse-header-icon-default", "--cd-color-collapse-header-bg-hover", "--cd-color-collapse-header-bg-active", "--cd-color-collapse-content-text-default", "--cd-font-collapse-header-fontweight", "--cd-spacing-collapse-header-marginx", "--cd-spacing-collapse-header-marginy", "--cd-spacing-collapse-header-padding", "--cd-spacing-collapse-right-paddingright", "--cd-spacing-collapse-header-iconleft-marginright", "--cd-spacing-collapse-content-paddingtop", "--cd-spacing-collapse-content-paddingright", "--cd-spacing-collapse-content-paddingbottom", "--cd-spacing-collapse-content-paddingleft", "--cd-radius-collapse-header", "--cd-width-collapse-item-border", "--cd-size-collapse-icon-default", "--cd-color-disabled-text", "--cd-font-size-regular", "--cd-line-height-regular", "--cd-focus-ring"];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/collapse/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/collapse/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/collapse/meta.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EP,CAAC"}