DropdownMenu

DropdownMenuController を dropdown-menu として登録します。id は画面内で一意にし、items に項目を並べます。開く操作は共通の Button で、variant・size・disabled・busy は開く操作にかかります。

項目は kind で分けます。省略または action は通常の操作、link はページの移動、checkbox はオン・オフ、radio は単一選択、submenu は下の階層、separator は区切り線、group は見出し付きのまとまりです。submenu と group は items を持ち、入れ子にできます。radio の name は、同じ階層の中の選択のまとまりを表します。

項目には icon・description・shortcut を添えられ、通常の操作は danger で赤い文字にできます（ホバーした時と選んでいる時は、淡い赤の面に赤い文字にします）。shortcut は表示だけで、キーの登録は利用側が行います。

通常の操作は選ぶと閉じ、チェックと単一選択は開いたままチェックマークを更新します。closeOnSelect でこの既定を変えられます。リンクは標準のページ移動を行い、選択のイベントを発火しません。

選んだ項目は dropdown-menu:select の detail で受け取ります。action に dropdown-menu:select->editor#apply のようなStimulusのactionを渡すと、ルートの data-action になり、利用側のcontrollerへつなげます。選んだ後の処理（保存・通信・画面の更新）は利用側が行います。

メニューは白いパネル（1px #bbb の枠、角丸5px、外への柔らかい影）に黒い12pxの文字で、Popover APIのトップレイヤーに出します。開閉はその場で切り替え、アニメーションはしません。項目は28pxの間隔で並べます。ホバーした項目と矢印キーで選んでいる項目は、行の幅いっぱいの角の無い淡い青（--rx-option-active、#ddeefe）に黒い文字にし、ピルで囲みません。まとまりの見出しは灰色の小さな太字（11px）、区切りは1px #dedede の罫線です。使えない項目は文字だけを灰色にします。開く操作の下に出し、下に空きが無ければ上に出します。サブメニューは行の末尾側に開き、空きが無ければ反対側に開きます。どちらも画面の端から8pxの内側に収め、幅は20rem、高さは384pxを上限にして、あふれる分はスクロールします。

メニューの背後には透明な層を置き、層を押すとメニューを閉じます。背後のボタンやリンクは押されません。メニューの外へフォーカスが移った時と、別の DropdownMenu を開いた時も閉じます。

項目は上揃えです。一行の時は対称な上下の余白で中央に見え、説明が付いて複数行になると、同じ上端から下へ伸びます。項目の中身全体を align-items: center で中央へ寄せないでください。指で操作する環境では、一行の高さを2.75remにします。

items が空の時は「利用できる操作はありません」と出します。JavaScriptなしではメニューは開きません。