# 对话框 Dialog

分类：浮层 · React：Dialog + DialogActions（@xxd/react）

必须先回答才能继续的问题：确认、选择、短表单。

## 示例
```html
<dialog class="xxd-dialog" id="d1" aria-labelledby="d1-title">
  <div class="xxd-dialog__head"><h2 class="xxd-dialog__title" id="d1-title">写入哪篇文章？</h2></div>
  <div class="xxd-dialog__body"><p>默认不会替换已有内容。</p></div>
  <div class="xxd-dialog__actions">
    <button class="xxd-btn ui-dialog-cancel" data-xxd-dialog-close>取消</button>
    <button class="xxd-btn" data-variant="primary" data-xxd-dialog-close="new">写入为新文章</button>
  </div>
</dialog>
<button class="xxd-btn" data-xxd-dialog-open="d1">打开</button>
```

## 属性与类名
- `data-light-dismiss`：点遮罩关闭（确认类对话框不要加）
- `data-size`：sm | （缺省 440）| lg | xl
- `role="alertdialog"`：必须回答的确认：不加 data-light-dismiss
- 类名：`xxd-dialog` `xxd-dialog__head` `xxd-dialog__title` `xxd-dialog__body` `xxd-dialog__actions` `ui-dialog-cancel` `xxd-dialog__desc`

## JS
```js
await Xxd.confirmDialog({ title, message, confirmLabel: "删除", tone: "danger" })  // → true / false
await Xxd.confirmDelete({ name: "长文发布", what: "这个插件的全部记录" })  // 输入名字才能删
```

## 键盘与读屏
- 原生 <dialog> + showModal：背后的页面不可交互，Esc 关闭，焦点困在里面
- 关闭后焦点回到打开它的按钮；破坏性操作默认聚焦在「取消」上

## 规则
- 取消在前（DOM 顺序），内容宽度、安静；主操作最后、最右
- 破坏性确认默认聚焦取消
- §10