Popover

fandhe-frontend-pre-styled-ui の popover mod が提供するスタイル済み Popover 部品です。トリガー起点のオーバーレイで、content に role="dialog" を固定付与し、 title/description が設定されているときのみ aria-labelledby/ aria-describedby をセットで付与します。開閉は Disclosure を埋め込んだ状態機械 Popover が管理します。

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 が担います）。

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 をセットで付与する。

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	open
positioner	data-state	open
root	data-state	open
trigger	data-state	open

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