fandhe-frontend-pre-styled-ui の menu mod が提供するスタイル済み Menu 部品です。トリガー起点のオーバーレイ + アクション項目リストで、サブメニューは親 Menu の content 内に子 Menu インスタンス由来の trigger_item を入れ子で配置して表現します。チェック可能な項目（CheckboxItem）・単一選択項目（RadioItemGroup）は開閉状態とは独立した checked 状態機械を別途持ちます。グループ + ラベル（item_group/item_group_label）・アイコンなし項目の位置合わせ（data-inset）・危険操作項目（data-danger、highlighted 時は背景色を合成）・ショートカット表示（独立部品 kbd との合成パターン）にも対応します。

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（キーボードフォーカス位置）・グループ+ラベル・checkbox/radio 項目・サブメニュー・ショートカット（kbd 合成）・inset・destructive・separator・disabled の各状態を含みます。2 つ目のインスタンスは destructive 項目が highlighted のときの背景色合成（イシュー #2203）を示します。3 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です。1 つ目のインスタンス（open）は presence transition が適用されており、対応ブラウザではページ読み込み時にフェードインが実際に発火します。positioner はフロー内配置へ中和しています。

Features

トリガー起点のオーバーレイ + アクション項目リスト。Root / Trigger / Indicator / Positioner / Content / Arrow / ArrowTip / Item / ItemText / ItemIndicator / ItemGroup / ItemGroupLabel / Separator / TriggerItem / ContextTrigger / CheckboxItem / RadioItemGroup / RadioItem の 18 anatomy パーツを持つ。
サブメニューは親 Menu インスタンスの content 内に子 Menu インスタンス由来の trigger_item / positioner / content を入れ子で配置して表現し、親子双方に aria-haspopup="menu" を付与する。
CheckboxItem / RadioItemGroup は開閉状態とは独立した checked 状態機械（MenuCheckboxItem / MenuRadioItemGroup）を持つ。
size variant で root/content の padding を切り替える。
ItemText / ItemIndicator は headless anatomy には #1651 時点で存在していたが、pre-styled-ui 側の再エクスポート・CSS 着装漏れをイシュー #2033（shadcn/ui 突合）で補完した。ショートカット表示は新規 anatomy パートを追加せず、独立部品 kbd との合成パターンで実現する。
destructive 項目（data-danger）が highlighted（キーボードフォーカス位置）と同時に立つ場合の背景色合成を StateCondition::AttrAll（値なし存在属性同士の AND、イシュー #2203）で実装している。

Anatomy

root
  trigger
  positioner
    content
      item-group
        item-group-label
        item
          item-text
        trigger-item
      separator
      checkbox-item
        item-indicator
      radio-item-group
        radio-item

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
`checkbox-item`	`data-state`	`checked`
`checkbox-item`	`data-value`	`show-hidden`
`content`	`data-state`	`closed`, `open`
`item`	`data-danger`	（値なし）
`item`	`data-disabled`	（値なし）
`item`	`data-highlighted`	（値なし）
`item`	`data-inset`	（値なし）
`item`	`data-value`	`archive`, `delete`, `delete-account`, `duplicate`, `edit`, `export`, `profile`, `settings`
`item-indicator`	`data-state`	`checked`, `unchecked`
`positioner`	`data-state`	`closed`, `open`
`radio-item`	`data-state`	`checked`, `unchecked`
`radio-item`	`data-value`	`grid`, `list`
`root`	`data-state`	`closed`, `open`
`trigger`	`data-state`	`closed`, `open`
`trigger-item`	`data-state`	`open`

CSS Variables

Variable	Default
`--fandhe-menu-arrow-rotate`	`45deg`
`--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)`

Examples

グループ・checkbox/radio 項目・ショートカット

item_group + item_group_label によるグループ化、checkbox_item / radio_item によるチェック可能な項目、kbd との合成によるショートカット表示を組み合わせた例です。

サブメニュー

trigger_item + 入れ子の positioner/content で子 Menu インスタンスを埋め込み、サブメニューを表現する例です。

inset 項目・destructive 項目

アイコンを持たない項目のテキスト位置を揃える data-inset と、危険操作を示す data-danger（pre-styled-only の存在属性、item() の attrs 経由で付与）を組み合わせた例です。destructive 項目は highlighted 状態で掲示しており、data-danger × data-highlighted の背景色合成（イシュー #2203）を確認できます。

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 が付与される。