面板
白卡片容器（panel-block）+ 标题栏（panel-title），用于承载一组相关内容。增强：副标题（panel-subtitle）、可折叠（--collapsible + .is-collapsed）、强调变体（--accent）、平面变体（--flat）。
面板标题
带副标题描述的示例
白卡片容器 + 标题栏 + 副标题，用于承载一组相关内容。panel-subtitle 会自动缩小并转为描述色。
可折叠面板
点击标题栏展开/折叠
点击右上角箭头可折叠/展开此面板内容。
<div class="panel-block"> <div class="panel-title"> <div class="panel-title-text"> <span>面板标题</span> <span class="panel-subtitle">带副标题描述的示例</span> </div> <div class="panel-title-actions"><button class="btn btn-sm">刷新</button></div> </div> <div class="panel-body"> 白卡片容器 + 标题栏 + 副标题，用于承载一组相关内容。panel-subtitle 会自动缩小并转为描述色。 </div> <div class="panel-foot"> <button class="btn btn-sm">取消</button> <button class="btn btn-sm btn-primary">保存</button> </div></div><div class="panel-block panel-block--collapsible" id="demo-panel-collapse" style="margin-top:16px"> <div class="panel-title"> <div class="panel-title-text"> <span>可折叠面板</span> <span class="panel-subtitle">点击标题栏展开/折叠</span> </div> <div class="panel-title-actions"> <button class="panel-toggle" aria-expanded="true" type="button"><svg class="panel-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></button> </div> </div> <div class="panel-body">点击右上角箭头可折叠/展开此面板内容。</div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/panel';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add panel
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/panel.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="panel-block [--flush] [--accent] [--flat] [--collapsible] [.is-collapsed]"> <div class="panel-title"> <div class="panel-title-text"> <span>标题</span> <span class="panel-subtitle">副标题</span> </div> <div class="panel-title-actions">…</div> </div> <div class="panel-body">…内容…</div> <div class="panel-foot">…底栏…</div></div>