文案规范
使用建议
承载二级操作页面 / 详情 / 筛选 / 表单；模态用 mask=true，可操作外部区域用 mask=false。承载单一确认/决策用 Modal，不要混用。
危险操作
footer 危险操作（删除/清空等不可逆）使用 --cd-color-danger 与具体动词文案，并由业务侧在 onCancel 对未保存内容做二次确认。
相关组件
更多通用文案规范见 文案规范指南。
SideSheet
滑动侧边栏：从视口四边（left/right/top/bottom）滑入的浮层容器，承载二级操作页面 / 详情 / 表单 / 筛选，比 Modal 提供更大可滚动内容区。DOM 结构与类名严格对齐 Semi：wrapper(.cd-sidesheet-{placement}) > mask + inner(.cd-sidesheet-inner.cd-sidesheet-inner-wrap.cd-sidesheet-size-{size}, role=dialog tabindex=-1) > content > header(role=heading aria-level=1)+body+footer。Portal 到 getPopupContainer()/body 脱离父层叠上下文；role=dialog，mask 时加 aria-modal；closeOnEsc（默认 false）时 window 监听 Esc 关闭；mask=true 默认锁 body 滚动（disableScroll），getPopupContainer 指向非 body 时为 popup 模式（wrapper position:static）。mask=false 为可操作外部区域形态（无遮罩、面板 box-shadow: --cd-shadow-elevated、宽度落在 wrapper）。size(small448/medium684/large920，默认 small) 仅 left/right 生效；width（默认 448，left/right）/ height（默认 400，top/bottom）显式覆盖。进出场动画对齐 Semi CSSAnimation：mask 淡入淡出 + inner 按 placement 滑入滑出，animationend 后卸载；motion=false 或 prefers-reduced-motion 退化即时显隐。关闭按钮用 IconButton（type=tertiary theme=borderless size=small）+ IconClose。受控 visible（不回写），仅经 onCancel(e) 通知；afterVisibleChange 于动画结束回调可见状态。keepDOM 关闭保留 DOM。
如何引入
import { SideSheet } from '@chenzy-design/svelte';基本
默认侧边栏从右滑出，支持点击遮罩区关闭。
自定义位置
placement 设置滑出位置，支持 top/bottom/left/right。
自定义尺寸
size 设置尺寸，支持 small(448px)/medium(684px)/large(920px)，仅 left/right 生效；也可用 width 自定义。
可操作的外部区域
mask=false 时允许对外部区域进行操作；disableScroll=false 保留外部滚动。
渲染在指定容器
getPopupContainer 指定父级 DOM，弹层渲染至该 DOM；容器需设 overflow:hidden。
自定义内容区域
自定义 titleSnippet、footer、headerStyle/bodyStyle 等创建丰富内容样式。
API 参考
SideSheet
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 面板是否可见（受控，不回写） | boolean | false |
placement | 滑出位置 | 'left'|'right'|'top'|'bottom' | 'right' |
size | 尺寸（448/684/920px），仅 left/right 生效 | 'small'|'medium'|'large' | 'small' |
width | left/right 宽度，数字按 px | number|string | 448 |
height | top/bottom 高度，数字按 px | number|string | 400 |
title | 面板标题 | string | undefined |
titleSnippet | 自定义标题区（覆盖 title）；对齐 Semi title(ReactNode) | Snippet | undefined |
closable | 是否显示右上角关闭按钮 | boolean | true |
closeIcon | 关闭按钮 icon | Snippet|null | IconClose |
closeOnEsc | 是否允许 Esc 关闭 | boolean | false |
mask | 是否显示遮罩；false 时允许操作外部区域 | boolean | true |
maskClosable | 是否允许点击遮罩关闭 | boolean | true |
disableScroll | 渲染在 body 层时是否禁止 body 滚动 | boolean | true |
keepDOM | 关闭时是否保留内部组件不销毁 | boolean | false |
getPopupContainer | 指定父级 DOM，弹层渲染至该 DOM | () => HTMLElement | null | undefined |
zIndex | 弹层 z-index | number | 1000 |
motion | 是否允许动画 | boolean | true |
style | 面板根内联样式 | string | undefined |
bodyStyle | 内容区域内联样式 | string | undefined |
headerStyle | Header 区域内联样式 | string | undefined |
maskStyle | 遮罩内联样式 | string | undefined |
footer | Footer 操作区；提供 close() 关闭面板；未提供不渲染 | Snippet<[{ close: () => void }]>|null | undefined |
children | Body 主内容区（可滚动） | Snippet | undefined |
ariaLabel | 无可见标题时提供 aria-label | string | undefined |
class | 根元素自定义类名 | string | undefined |
afterVisibleChange | 展示/隐藏动画结束触发 | (isVisible: boolean) => void | undefined |
onCancel | 取消面板时的回调 | (e: MouseEvent | KeyboardEvent) => void | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onCancel | — | 取消面板（关闭按钮 / 遮罩 / Esc），payload 为触发事件 |
afterVisibleChange | — | 面板展示/隐藏动画结束触发，payload 为当前是否可见 |
Slots
| 名称 | 说明 |
|---|---|
children | Body 主内容区（可滚动） |
titleSnippet | 自定义标题区，覆盖 title |
footer | Footer 操作区，提供 close() |
closeIcon | 自定义关闭图标 |
Accessibility
| APG | dialog-modal |
- wrapper > inner role=dialog tabindex=-1（mask=true 加 aria-modal=true）；内部 header role=heading aria-level=1；有 title 用 aria-labelledby，无则 ariaLabel；closeOnEsc 控制 Esc 关闭；关闭按钮 aria-label 经 SideSheet.closeAriaLabel；reduced-motion / motion=false 退化即时显隐。
参考 WAI-ARIA APG 模式：dialog (modal)
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-animation-delay-side-sheet-inner-hide | 0ms | 侧边栏关闭-延迟时间 |
--cd-animation-delay-side-sheet-inner-show | 0ms | 侧边栏打开-延迟时间 |
--cd-animation-delay-side-sheet-mask-hide | 0ms | 侧边栏关闭时-蒙层-延迟时间 |
--cd-animation-delay-side-sheet-mask-show | 0ms | 侧边栏打开时-蒙层-延迟时间 |
--cd-animation-duration-side-sheet-inner-hide | 180ms | 侧边栏关闭-动画持续时间 |
--cd-animation-duration-side-sheet-inner-show | 180ms | 侧边栏打开-动画持续时间 |
--cd-animation-duration-side-sheet-mask-hide | 180ms | 侧边栏关闭时-蒙层-动画持续时间 |
--cd-animation-duration-side-sheet-mask-show | 180ms | 侧边栏打开时-蒙层-动画持续时间 |
--cd-animation-function-side-sheet-inner-hide | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 侧边栏关闭-过渡曲线 |
--cd-animation-function-side-sheet-inner-show | cubic-bezier(0.25, 0.46, 0.45, 0.94) | 侧边栏打开-过渡曲线 |