Dialog

モーダルダイアログです。fandhe-frontend-headless-ui の dialog mod は Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツと、DialogRole（Dialog/Alertdialog）で切り替えられる role・aria-modal・aria-haspopup="dialog" を提供します。本部品は SSR での属性出力と状態機械のみを担い、Escape キーでの閉鎖・外側クリックでの閉鎖・フォーカストラップ・閉鎖時の trigger へのフォーカス復帰・click → dispatch 配線は fandhe-frontend-wasm-full が実 DOM 配線を担います。content は tabindex="-1" を固定付与します（プログラム的フォーカスのみを許可する WAI-ARIA dialog パターンの前提）。

キーボード操作

参考サイトとの差分

ark-ui（zag dialog.connect.ts）・Radix Primitives・chakra-ui と突合し、content の tabindex="-1" 固定付与を追加しました。anatomy（8 パート）・data-state 語彙（open/closed）は一致しており、パート・data-* の増減はありません。一方、以下は意図的に合わせていません。

• DOM 上の root パート: zag の Dialog.Root は context のみで DOM を持ちませんが、本リポジトリの全部品が root を DOM 要素として持つ規約（data-state の付与先）のため維持しています。
• positioner の data-state + hidden: zag は pointer-events のインラインスタイルで代替しますが、headless-ui はスタイルを出力しないため JS なしの SSR での閉状態表現として維持しています。
• trigger の data-ownedby / data-value / data-current（zag の複数トリガー識別）: aria-controls による id 関連付けが同等の役割を担うため不採用です。
• content の data-nested / data-has-nested（ark-ui のネストダイアログ実行時計測）: レイアウト計測・実行時関心は headless へ持ち込まない方針（docs/policy/intentional-non-adoption.md §3.25 規則 2）のため不採用です。
• Radix Portal: DOM 配置の関心のため不採用です。
• Radix AlertDialog の Cancel / Action パート: DialogRole::Alertdialog + CloseTrigger + 素の button で構成でき、ark-ui にも該当パートは無いため不採用です。

スタイル済みの表示例は Dialog を参照してください。

関連 API: fandhe-frontend-headless-ui API

自前 CSS の最小例

Themes 版を使わず本部品を直接使う場合、[data-scope="dialog"][data-part="..."] セレクタでスタイルを当てます。以下は backdrop・positioner（中央寄せ）・content（枠・余白）の最小例です。author スタイルの display が UA の [hidden] { display: none } を上書きして closed 状態が見えてしまわないよう、[hidden] ガードを必ず含めます。

[data-scope="dialog"][data-part="backdrop"] {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
}

[data-scope="dialog"][data-part="backdrop"][hidden] {
  display: none;
}

[data-scope="dialog"][data-part="positioner"] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-scope="dialog"][data-part="positioner"][hidden] {
  display: none;
}

[data-scope="dialog"][data-part="content"] {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 28rem;
}

[data-scope="dialog"][data-part="content"][hidden] {
  display: none;
}