Popover

fandhe-frontend-pre-styled-ui の popover mod が提供するスタイル済み Popover 部品です。トリガー起点のオーバーレイで、content に role="dialog" を固定付与し、title/description が設定されているときのみ aria-labelledby/ aria-describedby をセットで付与します。開閉は Disclosure を埋め込んだ状態機械 Popover が管理します。content は自由な children を受け取るため、fandhe-frontend-pre-styled-ui の field/input mod と組み合わせてフォーム内包パターンも表現できます（下記 Examples 節「Dimensions form」参照）。

Important

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

Demo

headless-ui の Popover（role="dialog"、非モーダル）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています（実際の overlay 配置は recipe CSS が担います）。2 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です。1 つ目のインスタンス（open）は presence transition が適用されており、対応ブラウザではページ読み込み時にフェード＋スケールインが実際に発火します。

Features

トリガー起点のオーバーレイ。Root / Trigger / Anchor / Positioner / Arrow / ArrowTip / Content / Title / Description / CloseTrigger / Indicator の 11 anatomy パーツを持つ。
開閉は Disclosure を埋め込んだ状態機械 Popover が管理する。
content に role="dialog" を固定付与し、title / description が設定されているときのみ aria-labelledby / aria-describedby をセットで付与する。
shadcn/ui（Base UI）の With Form Example（Field/Input を内包する Content）は content の children へ fandhe-frontend-pre-styled-ui::field/input の既存 API を並べるだけの既存合成パターンであり、新規の variant/size/state 軸を追加しない（下記 Examples 節参照）。

Anatomy

root
  trigger
  positioner
    content
      title
      description
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	—	開閉状態（Open/Closed）。root/content の data-state へ反映される。

Data Attributes

Part	Attribute	Observed Values
`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-popover-arrow-rotate`	`45deg`

Examples

Dimensions form

shadcn/ui（Base UI）の With Form Example に相当する、Field/Input を組み合わせたフォーム内包パターンです。バリデーション・送信処理は実装せず、fandhe-frontend-pre-styled-ui::field/input の既存 API のみで静的な入力欄を並べています。新しい variant や data-* 語彙は追加していません。

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded / aria-controls	trigger に付与。開閉状態と対応する content の id を表す。
role="dialog"	content に固定付与。
aria-labelledby / aria-describedby	content に付与。対応する title/description が設定されているときのみ出力される。