# 从底部升起的面板 Sheet

分类：浮层

从 dock 升起的面板：设置、选择这类二级内容。

## 示例
```html
<div class="xxd-sheet-host">
  …
  <div class="xxd-scrim"></div>
  <section class="xxd-sheet" id="s1" aria-labelledby="s1-title"><div class="xxd-sheet__head"><h3 class="xxd-sheet__title" id="s1-title">封面</h3><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" data-xxd-sheet-close aria-label="关闭"><i data-xxd-icon="X"></i></button></div><div class="xxd-sheet__body">…</div></section>
  <footer class="xxd-dock">… <button class="xxd-btn" data-xxd-sheet-open="s1">封面</button></footer>
</div>
```

## 属性与类名
- 类名：`xxd-sheet-host` `xxd-scrim` `xxd-sheet` `xxd-sheet__head` `xxd-sheet__title` `xxd-sheet__body`

## JS
```js
Xxd.openSheet(el) / Xxd.closeSheet(el)
```

## 键盘与读屏
- 打开时焦点进到面板里第一个可聚焦元素，Tab 不出面板，Esc 关闭
- 关闭后焦点回到打开它的按钮；面板 aria-labelledby 指向标题

## 规则
- 升起 10px + 淡入 200ms，收回 120ms
- 打开时 dock 主操作隐藏