Collapsible
折叠容器原语：对任意内容做高度折叠/展开过渡，无触发器 UI（aria-expanded 由使用方提供）。是 Collapse 手风琴的底层能力，作为独立原语暴露以支持 keepDOM / lazyRender / collapseHeight 等精细控制。机制镜像 Semi：ResizeObserver 测内容高度 + wrapper 显式 height 过渡，仅过渡进行中挂载 transition class。
如何引入
import { Collapsible } from '@chenzy-design/svelte';基本用法
通过 isOpen 控制内容的展开或折叠。Collapsible 是无触发器 UI 的折叠原语，触发器由使用方提供。
自定义动画时间
通过 duration 设置动画展开/折叠时间，也可通过 motion 关闭动画。
嵌套使用
Collapsible 可嵌套使用，父子各自通过 isOpen 独立控制。
自定义折叠高度
通过 collapseHeight 自定义收起的高度，配合遮罩渐隐实现「展开更多」。
Semi Design 以内容优先进行设计。
更容易地自定义主题。
适用国际化场景。
效率场景加入人性化关怀。
fade 渐变
fade=true 时折叠/展开叠加透明度渐变，过渡更柔和。
fade=true：折叠/展开时叠加透明度渐变，过渡更柔和。
keepDOM 保留 DOM
keepDOM=true 时折叠后内容 DOM 不卸载，输入框内容、滚动位置等状态得以保留。
keepDOM=true：折叠后内容 DOM 不卸载，输入框内容/滚动位置得以保留。
lazyRender 惰性渲染
lazyRender 配合 keepDOM：首次展开前不渲染内容，节省首屏成本，首展后保留 DOM。
lazyRender + keepDOM：首次展开前不渲染内容（省首屏成本），首展后保留 DOM。
无障碍 id 关联
id 会设置到内容元素，配合触发器的 aria-controls / aria-expanded 指明控制关系。
API 参考
Collapsible
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
isOpen | 是否展开 | boolean | false |
duration | 过渡时长（ms） | number | 250 |
motion | 是否启用过渡动画（false 即时显隐） | boolean | true |
keepDOM | 折叠时是否保留 DOM（false 则完全折叠后移除内容 DOM） | boolean | false |
lazyRender | 首次展开前不渲染内容（配合 keepDOM，首帧惰性） | boolean | false |
collapseHeight | 折叠时保留的高度（px，0=完全折叠；>0=保留部分作「展开更多」） | number | 0 |
collapseHeightAdaptive | 折叠高度是否自适应（不超过实测内容高度） | boolean | false |
fade | 折叠时是否叠加透明度渐变 | boolean | false |
reCalcKey | 变更时强制重算高度（内容动态变化后触发重测，仅 collapseHeight>0 生效） | number | string | undefined |
id | 内容容器 id | string | undefined |
onMotionEnd | 展开/折叠过渡动画结束回调 | () => void | undefined |
class | 根节点 class | string | undefined |
style | 根节点内联样式 | string | undefined |
children | 被折叠的内容 | Snippet | undefined |
Accessibility
| ARIA role | presentation |
- 折叠时 wrapper overflow:hidden 裁剪内容；完全折叠（不 keepDOM 且 collapseHeight===0）后内容 DOM 卸载移出可达性树
- 原语不含触发器：aria-expanded / aria-controls 由使用方（或 Collapse）提供；id 透传至内容元素供 aria-controls 关联
- reduced-motion：motion=true 但用户 prefers-reduced-motion 时移除过渡（即时）
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-delay-collapsible-height | var(--cd-motion-delay-none) | 折叠-高度-延迟时间（组件消费，对齐 Semi $transition_delay-collapsible-height） |
--cd-transition-delay-collapsible-opacity | var(--cd-motion-delay-none) | 折叠-透明度-延迟时间（组件消费，对齐 Semi $transition_delay-collapsible-opacity） |
--cd-transition-duration-collapsible-height | 250ms | 折叠-高度-动画持续时间默认值（可被 duration prop 覆盖，组件消费，对齐 Semi $transition_duration-collapsible-height） |
--cd-transition-duration-collapsible-opacity | 250ms | 折叠-透明度-动画持续时间（组件消费，对齐 Semi $transition_duration-collapsible-opacity） |
--cd-transition-function-collapsible-height | cubic-bezier(0.25, 0.1, 0.25, 1) | 折叠-高度-过渡曲线（组件消费，对齐 Semi $transition_function-collapsible-height） |
--cd-transition-function-collapsible-opacity | var(--cd-motion-ease-in) | 折叠-透明度-过渡曲线（组件消费，对齐 Semi $transition_function-collapsible-opacity） |