Dialog (am-dialog)

am-dialog 使用原生 <dialog>，支援 @starting-style 進入動畫與 focus trap。

Variants

• modal: 預設置中對話框，適合一般確認流程
• alert: 高風險操作，預設使用 alertdialog，並停用 backdrop / Esc 關閉
• sheet: 右側面板式版型，適合設定與多欄位編輯
• preview: 較寬的內容預覽版型，適合摘要、圖片與 metadata

Layout Controls

• size: sm | md | lg | xl | full
• placement: center | top | bottom | left | right
• showCloseButton: 控制右上角 close button；alert 預設為 false
• closeLabel: close button 的無障礙標籤

預設情況下，sheet 會自動使用 placement="right"；其他 variant 預設為 center。

Slots

• trigger: 開啟 dialog 的觸發器
• header: 額外 header 內容，例如 badge、status、eyebrow
• title: 標題
• description: 說明文字
• default slot: 主要內容區
• footer: 操作列或次要補充資訊

Companion Components

• DialogClose: 產生可關閉當前 dialog 的操作按鈕
• DialogFooterActions: footer actions 的對齊與 mobile stack wrapper

<Dialog variant="alert" size="sm">
  <Button slot="trigger">刪除專案</Button>
  <Fragment slot="title">刪除確認</Fragment>
  <Fragment slot="description">這個動作無法復原。</Fragment>
</Dialog>

<Dialog variant="preview" size="xl" placement="top" closeLabel="Close preview">
  <Button slot="trigger">Open Preview</Button>
  <Fragment slot="header">
    <span class="eyebrow">Campaign draft</span>
  </Fragment>
  <Fragment slot="title">Campaign Preview</Fragment>
  <Fragment slot="description">Review content before publish.</Fragment>
</Dialog>

<Dialog variant="sheet" size="lg">
  <Button slot="trigger">Open Settings</Button>
  <Fragment slot="title">Settings</Fragment>
  <DialogFooterActions slot="footer" stackOnMobile={true}>
    <DialogClose>Cancel</DialogClose>
    <button class="am-dialog-action am-dialog-action--primary" type="button">
      Save changes
    </button>
  </DialogFooterActions>
</Dialog>

詳見 playground /playground/dialog/ 範例。