Command

fandhe-frontend-pre-styled-ui の command mod が提供するスタイル済み Command（cmdk 由来のコマンドパレット、shadcn/ui Command 相当）部品です。Root / Input / List / Empty / Group / GroupHeading / Item / Shortcut / Separator / Dialog の headless 10 パーツ + pre-styled-only Footer（イシュー #3143）の計 11 パーツ構成で、入力欄・リスト・group 見出し・選択行の背景・shortcut の右寄せ・dialog 型の幅を持つ意匠を重ねます。

size / variant / color-palette いずれの軸も持ちません。絞り込み結果 0 件は empty slot が既定 display: none で、headless 層が付与する data-empty が付いたときのみ display: block へ切り替わります。item の選択行は data-selected の背景色で表し、hover はその背景色を洗い流さないよう選択行を除外します。shortcut は右寄せのみを担い、children へ Kbd を渡すことでキー表示を合成できます。dialog は --fandhe-command-dialog-max-width（既定 32rem）で幅を決め、closed 時は hidden で確実に非表示化します。

footer（pre-styled-only、headless-ui の anatomy には存在しません）はキー操作ヒント（例: ↑↓ で移動 / ↵ で選択 / esc で閉じる）をリスト下端に区切り線付きで並べるレイアウト専用パートです。shortcut と同様 API は増やさず、children へ Kbd とテキストを組んで渡します。

絞り込み配線・Enter 実行・Cmd/Ctrl+K のグローバルショートカット・フォーカストラップといったアプリケーションロジックはこの部品では実装しません（footer のキー操作そのものの配線も含む）。

Demo

headless-ui の Command（role="combobox" の入力欄 + role="listbox" のリスト）に pre-styled-ui の recipe CSS を適用した静的掲示です。"Calendar" 行は選択中（背景色 + kbd を合成した shortcut）、"Settings" 行は disabled、2 個目のインスタンスは絞り込み結果 0 件（empty を可視化）を固定表示しています。3 個目のインスタンスは dialog 型の掲示用に、position: fixed のオーバーレイをフロー内配置へ中和しています。

No results found.

Features

root/input/list/empty/group/group-heading/item/shortcut/separator/dialog の headless 10 slot に、pre-styled-only の footer（下記参照）を加えた計 11 パーツ構成。size/variant/color-palette いずれの軸も持たない（crates/pre-styled-ui/src/command.rs モジュール doc「軸を持たない理由」節参照）。
empty は既定 display: none、[data-empty]（headless が絞り込み結果 0 件のときのみ付与）が付いたときだけ display: block へ切り替わる。
item の選択行は [data-selected] の背景色で表す（data-highlighted は使わない）。hover は選択行を除外する規則（HoverExceptAttr）を持ち、選択色が hover で洗い流されない。
shortcut は margin-inline-start: auto で右寄せする。API は増やさず、children へ [Kbd](../kbd/) を渡すことでキー表示を合成する。
dialog は --fandhe-command-dialog-max-width（既定 32rem）で幅を決め、closed 時は headless が付与する hidden を確実に非表示化する（[hidden] { display: none; }）。単一パーツのため独立した backdrop は持たない。
絞り込み配線（入力 → "input" dispatch → DOM 反映）・Enter 実行・Cmd/Ctrl+K のグローバルショートカット・フォーカストラップはアプリケーション/fandhe-frontend-wasm-full の責務として実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）。
pre-styled-only footer パート（イシュー #3143）: headless-ui の anatomy には存在しないレイアウト専用パートで、キー操作ヒントを list/empty の後ろに区切り線付きで並べる。shortcut と同様 API を増やさず、children へ [Kbd](../kbd/) と text を組んで渡す。footer は flex-wrap: wrap で折り返すため、ヒント 1 件（kbd + 説明テキスト）は span 等 1 つの子要素へまとめてから渡す。加えて stylesheet() は footer 直接の子を raw CSS で display: inline-flex のまとまりにし、その中の kbd だけを white-space: nowrap にする（span へ包むだけでは span 自身が display: inline のままで内部の折り返しを防げないため）。kbd と説明文は別行に分かれず、ヒント 1 件がコンテナ幅を超える狭幅・文字拡大時は説明文が overflow-wrap: anywhere で折り返すため、root の overflow: hidden で説明文が切れない。

Anatomy

root
  input
  list
    group
      group-heading
      item
        shortcut
    separator
  empty
dialog

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	`OpenState::Closed`	`root`/`dialog`/`input` の開閉状態。
`empty`	`bool`	`false`	`root`/`list`/`empty` へ渡す絞り込み結果 0 件フラグ（`command::filter_items` の結果を注入する想定）。
`value`	`&str`	—	`input` の現在の検索クエリ。
`list_id`	`&str`	—	`input` の `aria-controls` / `list` の `id` として対応させる識別子。
`activedescendant`	`Option<&str>`	`None`	`input` の `aria-activedescendant`。選択中 `item` の `id` を指す。
`selected / disabled`	`bool`	`false`	`item` の選択・disabled 状態。
`value / id`	`&str / Option<&str>`	—	`item` の候補値（`data-value`）と `aria-activedescendant` の参照先 `id`。
`label`	`&str`	—	`list`/`dialog` のアクセシブルネーム（`aria-label`）。
`attrs`	`Vec<(&str, &str)>`	—	各パーツへ合成する追加属性（`class` は除去され、本モジュールが見た目クラスを付与しない設計のため `class` 属性自体が出力から消える）。
`children`	`Vec<Node>`	—	各パーツの子ノード。

Data Attributes

Part	Attribute	Observed Values
`dialog`	`data-state`	`open`
`empty`	`data-empty`	（値なし）
`input`	`data-state`	`open`
`item`	`data-disabled`	（値なし）
`item`	`data-selected`	（値なし）
`item`	`data-value`	`calendar`, `search`, `settings`
`list`	`data-empty`	（値なし）
`root`	`data-empty`	（値なし）
`root`	`data-state`	`open`

CSS Variables

Variable	Default
`--fandhe-command-dialog-max-width`	`32rem`
`--fandhe-command-list-max-height`	`18.75rem`

Examples

基本形

入力欄 + リスト + group 見出し + 選択行の組み合わせです。

No results found.

dialog 型

dialog パーツで command palette 全体を包んだ構成です（掲示用にフロー内配置へ中和しています）。

footer パート（イシュー #3143）でリスト下端にキー操作ヒントを並べる例です。[Kbd](../kbd/) とテキストを組み合わせて root の末尾へ配置します。

↑↓ で移動↵ で選択esc で閉じる

Accessibility

WAI-ARIA

Attribute	Description
role="combobox" / aria-controls / aria-expanded	`input` へ固定付与する（`aria-controls` は `list` の `id` を指す必須引数）。
aria-activedescendant	`input` の `activedescendant` が `Some` のときのみ付与する。選択中 `item` の `id` を指す。
role="listbox" / aria-label	`list` へ固定付与する。
role="option" / aria-selected	`item` へ固定付与する。選択有無は `data-selected`（presence）でも表す。
role="dialog" / aria-modal="true"	`dialog` へ固定付与する。
role="separator"	`separator` へ固定付与する。