CommandMenu

id・label・shortcuts・groupsを渡し、CommandMenuControllerをcommand-menuとして登録します。labelは開くボタンとパネルの見出しに出す名前です。開くボタンは、Basecamp 2のヘッダーの検索欄と同じ見た目にします。枠の無い白い欄（高さ32px、角丸3px）をシートと同じ四方へのぼかしの影で浮かせ、icon（既定はlayers）と淡い灰色のlabelを先頭から並べ、326px（20.375rem）以上の幅を取ります。パネルを開いている間は、欄にフォーカスがある時と同じ青い縁と淡い青の輪を付けます。

開くボタンを押すと、背景を暗転しないpopover="auto"のパネルを開きます。パネルは枠を持たず、四方へ約10pxのぼかしの影で浮かせた白いパネル（角丸5px、幅30remまで）で、画面の上端から1remの位置の中央に、動きを付けずにその場で現れます。中は見出し、shortcutsのタイル（columnsの列数、既定は4列で、パネルが狭い時は2列）、検索欄、候補の一覧、キーの案内の順です。候補の一覧はBasecamp 2のジャンプの候補と同じ二列で、左の112pxの列にまとまりの名前（12pxの灰色、右寄せ。長い名前は文節で折り返す）を置き、1pxのごく淡い罫線（#f5f5f5）で区切った右の列に、候補を高さ25pxの行で隙間なく並べます。まとまりの間と、検索欄・キーの案内との間も同じ罫線で区切ります。ホバーした候補と矢印キーで選んでいる候補は、右の列だけをDropdownMenuと同じ角の無い淡い青（#ddeefe）で塗り、文字は黒のままにします。パネルの幅が20rem未満では、まとまりの名前を候補の上に積みます。ピルでは囲みません。開くたびに検索欄を空にして全候補を出し、検索欄へフォーカスを移します。先頭の候補を選んだ状態で始まります。移動や操作の項目を選ぶ、閉じるボタンかEscを押す、パネルの外を押す、フォーカスがパネルの外へ移る、のいずれかで閉じます。Turboのキャッシュの直前（turbo:before-cache）にも閉じます。

検索欄の文字は、各項目のlabel・description・keywordsをつないだ文字列と照合します。空白で区切った語をすべて含む項目だけを残し、全角と半角、大文字と小文字は区別しません。項目の残らないグループは隠し、一件も残らなければ「見つかりませんでした。」を出します。shortcutsは絞り込みの対象外です。

groupsの項目は、hrefを渡すと移動のリンク、valueを渡すと操作のボタンになります。移動は通常のリンクとして画面を移ります。操作を選ぶとパネルを閉じて開くボタンへフォーカスを戻し、command-menu:selectを発火してdetail.valueを渡します。操作の実行は利用側のcontrollerが担い、actionにcommand-menu:select->（controller名）#（メソッド名）の形で受け取り先を書きます。

shortcutを指定すると、ページのどこからでもそのキーで開閉し、パネルの下にキーの案内を出します。shift+jは入力欄・テキストエリア・選択欄・編集できる要素の中では働かず、mod+kは入力中も働きます。どちらも、Altを押している時、キーを押し続けた繰り返し、日本語の変換中、開くボタンが無効か表示されていない時は働きません。開いている時に押すと閉じて、開くボタンへフォーカスを戻します。

JavaScriptなしでも、開くボタンと閉じるボタンはpopovertargetでパネルを開閉し、ショートカットと移動の項目は通常のリンクとして動作します。絞り込み、矢印キーの選択、操作の項目の実行、開閉のキーはcontrollerが担います。