# `PhiaUi.Components.CommandPalette`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/command_palette.ex#L1)

Command palette (Cmd+K) overlay component.

Reuses the existing `PhiaCommand` hook from `priv/templates/js/hooks/command.js`.
The hook manages show/hide by toggling the `hidden` class on the root element,
filters items by the search input value, and highlights items via keyboard.

## Markup contract (required by PhiaCommand hook)

- Root element: `phx-hook="PhiaCommand"` + `role="dialog"` — starts hidden via `hidden` class
- `[data-command-backdrop]` — clicking this closes the palette
- `[data-command-input]` + `role="combobox"` — the search input
- `[data-command-list]` — the results list container
- `[data-command-item]` — individual items (must have `id` for aria-activedescendant)

## Four components

- `command_palette/1` — the root dialog overlay
- `command_palette_group/1` — groups items under a heading
- `command_palette_item/1` — a single command item
- `command_palette_empty/1` — empty state shown when no results match

# `command_palette`

Renders the command palette overlay dialog.

Open programmatically by dispatching the custom event or setting the hook
trigger. The hook registers keyboard shortcuts (Cmd+K / Ctrl+K) and Escape
to close.

## Attributes

* `id` (`:string`) (required) - Required for phx-hook and aria-activedescendant.
* `placeholder` (`:string`) - Defaults to `"Search..."`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - groups/items/empty state.

# `command_palette_empty`

Renders an empty state inside the command palette when no results match.
## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` - Custom empty state content.

# `command_palette_group`

Renders a labeled group of command palette items.
## Attributes

* `heading` (`:string`) (required)
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `command_palette_item`

Renders a single command item inside a command palette.
## Attributes

* `id` (`:string`) (required) - Required for aria-activedescendant targeting.
* `on_select` (`:string`) - phx-click event name. Defaults to `nil`.
* `value` (`:any`) - phx-value-value sent with on_select. Defaults to `nil`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `icon` - Optional leading icon.
* `inner_block` (required) - Label text.

---

*Consult [api-reference.md](api-reference.md) for complete listing*