组件 · 数据展示
Accordion 手风琴
可折叠分组内容；Item/Trigger/Panel 结构，支持单开/多开。
使用建议
- 避免：杜撰 activeKey 代替 value
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
import {
Accordion,
AccordionDescription,
AccordionExtra,
AccordionHeader,
AccordionItem,
AccordionPanel,
// …共 7 个导出
} from '@selrux/ui/accordion';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
单项展开；collapsible 允许全部收起。
外观
variant 为 outlined / plain / ghost；indicatorPlacement 指示器位置。
受控与禁用
value / onValueChange 受控（null 表示全部收起）；Accordion 的 disabled 禁用整组，AccordionItem 的 disabled 禁用单项；type="single"。
展开范围、尺寸与卸载
expandTrigger="indicator" 只有指示器可点击；showIndicator 控制指示器；size；destroyOnHidden 关闭时卸载内容（根、Item、Panel 均可设）；AccordionPanel 的 region 控制是否为 region 地标；dir 设定方向。
只有右侧箭头可展开
API
属性覆盖：示例用到 19 / 22 个自有属性（86.4%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Accordion.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示AccordionItem.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
Accordion
styled Accordion：解析尺寸与外观，把 options 展开为 styled 子树后再交给行为层； 展开状态不在此处维护第二份。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 当前展开项；null 表示全部关闭。 | string | readonly string[] | null | - |
defaultValue | - | string | readonly string[] | null | - |
type | 展开模式；省略等同 single。 | "single" | "multiple" | - |
collapsible | 是否允许用户再次关闭当前已开项，默认 true。 | boolean | true |
onValueChange | 用户展开/收起请求；同值与 prop 更新不通知。 | ((value: string | null) => void) | ((value: readonly string[]) => void) | - |
disabled | 禁止所有 Trigger 激活；不主动关闭已开面板。 | boolean | - |
dir | 同步 DOM 方向；未传时继承。 | "ltr" | "rtl" | - |
expandTrigger | 展开触发范围，默认 header。 | "header" | "indicator" | header |
destroyOnHidden | 关闭时是否卸载 Panel 内容；默认 false（保活）。 | boolean | - |
classNames | 语义 slot → className，仅对象形式。 | Partial<Record<AccordionSemanticSlot, string>> | - |
styles | 语义 slot → style，仅对象形式。 | Partial<Record<AccordionSemanticSlot, CSSProperties>> | - |
options | - | readonly AccordionOption[] | - |
headingLevel | 复合模式忽略，改用各 Header.level。 | 2 | 3 | 4 | 5 | 6 | - |
panelRegion | 复合模式忽略，改用各 Panel.region。 | boolean | - |
size | 显式尺寸优先于 Provider，最终回退 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
variant | 外观变体，默认 outlined。 | "outlined" | "plain" | "ghost" | outlined |
indicatorPlacement | 指示器逻辑位置，默认 end。 | "start" | "end" | end |
showIndicator | 是否绘制装饰指示器，默认 true；false 时 expandTrigger 必须为 header。 | boolean | true |
children | - | ReactNode | - |
另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。
AccordionDescription
styled Description：仅叠加静态类名，行为与语义 class/style 落点在行为层。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AccordionExtra
styled Extra：仅叠加静态类名，行为与语义 class/style 落点在行为层。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
AccordionHeader
styled Header：仅叠加静态类名，行为与语义 class/style 落点在行为层。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level * | 标题层级。 | 2 | 3 | 4 | 5 | 6 | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
AccordionItem
styled Item：叠加静态类名，并向 Trigger 提供合并后的 title / indicator 语义映射。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | 展开标识；非空、组内唯一。 | string | - |
disabled | 禁止本项触发；内容可保持展开。 | boolean | - |
destroyOnHidden | 覆盖 Root.destroyOnHidden；仅影响本项 Panel。 | boolean | - |
classNames | 本项语义 class，与 Root 对应 slot 合并。 | Partial<Record<AccordionSemanticSlot, string>> | - |
styles | 本项语义 style，与 Root 对应 slot 合并。 | Partial<Record<AccordionSemanticSlot, CSSProperties>> | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
AccordionPanel
styled Panel：用 grid 高度 + 透明度过渡开合； 关闭过渡中保持壳可见并设 inert，结束后再写 hidden； destroyOnHidden 在过渡结束后卸载 children。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
region | 是否作为 region landmark 并关联标题，默认 false。 | boolean | false |
destroyOnHidden | 覆盖 Item / Root 的 destroyOnHidden。 | boolean | - |
另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。
AccordionTrigger
styled Trigger：header 模式下按钮包裹「指示器 + 标题区」； indicator 模式下标题区留在按钮外的静态节点，按钮只含指示器并以 aria-labelledby 取名。
无自有属性；其余 284 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。
导出类型：AccordionClassNames、AccordionDescriptionProps、AccordionExpandTrigger、AccordionExtraProps、AccordionHeaderProps、AccordionHeadingLevel、AccordionIndicatorPlacement、AccordionItemProps、AccordionMultipleProps、AccordionOption、AccordionPanelProps、AccordionProps、AccordionSemanticSlot、AccordionSingleProps、AccordionSize、AccordionStyles、AccordionTriggerProps、AccordionVariant、AccordionVisualProps
无障碍
摘自源码 JSDoc。
- indicator 模式下标题区留在按钮外的静态节点，按钮只含指示器并以 aria-labelledby 取名。