Dialog

fandhe-frontend-pre-styled-ui の dialog mod が提供するスタイル済み Dialog 部品です。画面全体を覆うモーダルダイアログで、通常の確認ダイアログ（role="dialog"）と警告用ダイアログ（role="alertdialog"）を DialogRole で切り替えられます。フォーカストラップ・Escape キーでの閉鎖・外側クリックでの閉鎖といったクライアント挙動は JS ランタイム側の責務とし、本レイヤーは決定的な SSR 属性出力のみを担います。

Important

Demo はトリガー起点のオーバーレイ部品を「開いた状態」で固定掲示しています。本来の配置（画面全体を覆う・トリガー直下に重なる）ではページ内の他セクションと重なるため、掲示専用 CSS（assets/pre-styled-ui.css の .pre-styled-showcase スコープ）でページの流れの中へ収めています。実アプリケーションでの overlay 配置は pre-styled-ui の recipe CSS がそのまま担います。

Demo

headless-ui の Dialog（WAI-ARIA dialog パターン）に pre-styled-ui の data-scope / data-part セレクタ CSS を適用した静的掲示です。backdrop は掲示用に非表示化し、positioner はフロー内配置へ中和しています（実際の overlay 配置は recipe CSS が担います）。

Features

Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツを持つモーダルダイアログ。
DialogRole（Dialog/AlertDialog）で role="dialog"/role="alertdialog" を出し分ける。
size variant（Sm/Md/Lg）で root の寸法を切り替える。
フォーカストラップ・Escape キーでの閉鎖・外側クリックでの閉鎖は JS ランタイム側の責務であり、本レイヤーは SSR/属性出力のみを担う。

Anatomy

trigger
root
  backdrop
  positioner
    content
      title
      description
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	root へ付与するサイズ variant（Sm/Md/Lg）。
state	OpenState		開閉状態（Open/Closed）。root/content の data-state へ反映される。

Data Attributes

Part	Attribute	Observed Values
backdrop	data-state	open
content	data-state	open
positioner	data-state	open
root	data-state	open
trigger	data-state	open

CSS Variables

Variable	Default
--fandhe-dialog-content-max-width	32rem
--fandhe-dialog-content-padding	var(--fandhe-space-6)
--fandhe-dialog-title-font-size	var(--fandhe-font-font-size-lg)

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded	trigger に付与。開閉状態を表す。
aria-controls	trigger に付与。controls が Some のとき content の id を指す。
role="dialog" / role="alertdialog"	content に付与。DialogRole に応じて出し分けられる。
aria-modal	content に付与。モーダルかどうかを表す真偽値。
aria-labelledby / aria-describedby	content に付与。対応する title/description が設定されているときのみ出力される。