Dialog

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

alert-dialog（確認ダイアログ、Radix Primitives / Radix Themes の Alert Dialog に相当）は独立部品や新しい variant 軸としては追加せず、DialogRole::Alertdialog（role="alertdialog"）と footer（pre-styled-only のアクション列レイアウトパート）に既存の button の variant / colorPalette 軸（Solid + Danger と Outline の組み合わせ等）を組み合わせて構成します。role="alertdialog" の dialog は wasm-full 層が外側クリックでの閉鎖を既定で無効化します。構成例は下記 Demo の Examples 節（Alert dialog）を参照してください。

スクロール可能コンテンツ（shadcn/ui〔Base UI スタイル〕突合、イシュー #2030）には pre-styled-only の body パートを使います。見出し（title/description）と footer（アクション列）を content の子として body の外側の兄弟に配置すると、body にだけ overflow-y: auto / max-height: 50vh が効き、見出し・フッターを固定したまま本文だけを縦スクロールさせられます（position: sticky は使いません）。content/positioner 自体は変更していないため、body を使わない既存の構成には影響しません。close ボタンを content 右上のアイコンではなく footer 内の通常のボタンとして掲示したい場合（shadcn の「Custom Close Button」相当）は、close_trigger_with_variant(CloseTriggerVariant::Text, ...) を footer 内に置くと、アイコン専用契約の絶対配置・固定正方形サイズを上書きし、既存の閉じる配線（(dialog, close-trigger) -> "close"）を共有した平文ボタンの見た目・配置として機能します（構成例は下記 Demo の Examples 節「Share link (custom close button)」を参照してください）。

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 が担います）。close-trigger は content 右上のゴーストボタン（× アイコン + aria-label）として掲示し、description の下に body パート（イシュー #2030、pre-styled-only のスクロール可能コンテンツパート）で複数段落の本文を、その下に footer パート（イシュー #1690、pre-styled-only のレイアウト専用パート）でアクション列を配置しています。alert-dialog（確認ダイアログ）構成の例は Examples 節を参照してください。2 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です（JS で開閉できない静的ページのため）。1 つ目のインスタンス（open）は presence transition（@starting-style + allow-discrete）が適用されており、対応ブラウザではページ読み込み時にフェード＋スケールインが実際に発火します。

Features

headless-ui 由来の Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツに加え、pre-styled-only の footer パート（イシュー #1690）・body パート（イシュー #2030）を持つモーダルダイアログ（data-scope="dialog" 配下は headless 8 パート + pre-styled-only 2 パートの計 10 件）。
DialogRole（Dialog/Alertdialog）で role="dialog"/role="alertdialog" を出し分ける。
size variant（Xs/Sm/Md/Lg/Xl、既定 Md、イシュー #1714）で root の寸法を切り替える。
フォーカストラップ・Escape キーでの閉鎖・外側クリックでの閉鎖は JS ランタイム側の責務であり、本レイヤーは SSR/属性出力のみを担う。
alert-dialog（確認ダイアログ）構成: 独立部品や新しい variant 軸ではなく、role="alertdialog"（DialogRole::Alertdialog）+ footer（アクション列レイアウト）+ button（Solid/Danger と Outline の組み合わせ）で表現する（イシュー #1690。role="alertdialog" の dialog は wasm-full 層が外側クリックでの閉鎖を既定で無効化する）。footer 自体は送信・閉鎖等のアプリケーションロジックを持たないレイアウト専用パートである。
スクロール可能コンテンツ: body パート（shadcn/ui〔Base UI スタイル〕突合、イシュー #2030）は title/description（見出し）と footer（アクション列）を content 内で固定したまま、本文だけを縦スクロールさせるレイアウト専用パートである（overflow-y: auto / max-height: 50vh）。呼び出し側の任意判断によるオプトインパートであり、使わない既存の呼び出しには影響しない。
footer へ data-subtle を渡すと淡色背景の帯が content の左右・下端まで伸びる opt-in 状態（既定は帯なし、イシュー #3127）。

Anatomy

trigger
root
  backdrop
  positioner
    content
      title
      description
      body
      footer
        close-trigger

API Reference

Arguments

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

Data Attributes

Part	Attribute	Observed Values
`backdrop`	`data-state`	`closed`, `open`
`close-trigger`	`data-variant`	`text`
`content`	`data-state`	`closed`, `open`
`positioner`	`data-state`	`closed`, `open`
`root`	`data-state`	`closed`, `open`
`trigger`	`data-state`	`closed`, `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)`

Examples

Alert dialog

DialogRole::Alertdialog（role="alertdialog"）と footer（イシュー #1690、pre-styled-only のアクション列パート）に、既存の button を Solid/ColorPalette::Danger（破壊的確認）と Outline（キャンセル）の組み合わせで構成した確認ダイアログの例です。role="alertdialog" の dialog は wasm-full 層が外側クリックでの閉鎖を既定で無効化します。footer はレイアウト専用パートであり送信・閉鎖の配線は持ちません（close_trigger は併用せず省略しています）。

shadcn/ui（Base UI スタイル）の「Custom Close Button」デモ（イシュー #2030、親 #2025）に対応する構成です。content 右上のアイコン専用 close-trigger は使わず、footer 内の close_trigger_with_variant(CloseTriggerVariant::Text, ...)（イシュー #2193）で平文の "Close" ボタンを併設します。text variant は data-variant="text" を出力し、既存の (dialog, close-trigger) -> "close" 配線を共有するため、見た目だけでなく実際にクリックでダイアログを閉じられます。

footer に data-subtle を付け、content の左右・下端まで伸びる淡色背景の帯を出す例です（イシュー #3127）。

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 が設定されているときのみ出力される。