fandhe-frontend-pre-styled-ui の menu mod が提供するスタイル済み Menu 部品です。トリガー起点のオーバーレイ + アクション項目リストで、サブメニューは親 Menu の content 内に子 Menu インスタンス由来の trigger_item を入れ子で配置して表現します。チェック可能な項目（CheckboxItem）・単一選択項目（RadioItemGroup）は開閉状態とは独立した checked 状態機械を別途持ちます。

Important

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

Demo

headless-ui の Menu（role="menu"）に pre-styled-ui の recipe CSS を適用した静的掲示です。highlighted（キーボードフォーカス位置）・separator・disabled の各状態を含みます。positioner はフロー内配置へ中和しています。

Features

トリガー起点のオーバーレイ + アクション項目リスト。Root / Trigger / Indicator / Positioner / Content / Arrow / ArrowTip / Item / ItemGroup / ItemGroupLabel / Separator / TriggerItem / ContextTrigger / CheckboxItem / RadioItemGroup / RadioItem の 16 anatomy パーツを持つ。
サブメニューは親 Menu インスタンスの content 内に子 Menu インスタンス由来の trigger_item / positioner / content を入れ子で配置して表現し、親子双方に aria-haspopup="menu" を付与する。
CheckboxItem / RadioItemGroup は開閉状態とは独立した checked 状態機械（MenuCheckboxItem / MenuRadioItemGroup）を持つ。
size variant で root/content の padding を切り替える。

Anatomy

root
  trigger
  positioner
    content
      item
      separator

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	root へ付与するサイズ variant。root/content の padding を切り替える。
state	OpenState		開閉状態（Open/Closed）。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
item	data-disabled
item	data-highlighted
item	data-value	delete, duplicate, edit
positioner	data-state	open
root	data-state	open
trigger	data-state	open

CSS Variables

Variable	Default
--fandhe-menu-content-padding	var(--fandhe-space-2)
--fandhe-menu-item-padding	var(--fandhe-space-2) var(--fandhe-space-3)
--fandhe-menu-trigger-padding	var(--fandhe-space-2) var(--fandhe-space-3)

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="menu"	trigger（およびサブメニューの trigger_item）に固定付与。
aria-expanded / aria-controls	trigger に付与。開閉状態と対応する content の id を表す。
role="menu"	content に固定付与。aria-labelledby は trigger の id が設定されているときのみ出力される。
role="menuitem"	item に固定付与。disabled 時のみ aria-disabled="true" が付与される。
role="group"	item_group に固定付与。labelledby が Some のときのみ aria-labelledby が付与される。