API reference

The full CommandPalette surface: props, the two-way open + query models, the select event, the imperative handle, and the slots. For the per-framework consumption code see the usage page.

Props

The full prop surface. The two model: true slices (open and query, the Two-way column) are two-way r-model bindings.

Name	Type	Default	Two-way (model)	Required	Description
open	Boolean	false	✓		Whether the palette overlay is shown (two-way r-model). Two-way bind it (r-model:open / v-model:open / bind:open / [(open)]); every close path (backdrop click, Escape, selecting an item when closeOnSelect, the imperative close()) writes open = false. As one of two model: true props the component does not generate an Angular ControlValueAccessor.
query	String	''	✓		The current search text (two-way r-model). Two-way bind it to read or pre-seed the query; the component filters items by this string over each item label plus its keywords. Cleared to "" whenever the palette opens.
items	Array	[]			The command list — [{ id, label, group?, keywords?, disabled? }]. label is the displayed (and filtered) text; id is a stable key passed back on select; optional group buckets items under a heading; optional keywords are extra strings the query also matches; an optional disabled flag styles an item and skips it for selection/navigation.
placeholder	String	"Type a command…"			Placeholder text shown in the search input while the query is empty.
emptyText	String	"No results."			Text shown when the query matches no items. Override the whole empty state with the empty slot when you need richer markup.
closeOnSelect	Boolean	true			Whether choosing an item closes the palette. Defaults to true (the cmdk convention); set to false to keep the palette open after a selection — e.g. for a multi-action menu where the user runs several commands in a row.
ariaLabel	String	"Command palette"			Accessible name for the dialog surface (aria-label on the role="dialog" panel). Override it to match the palette's purpose (e.g. "Search commands").
idBase	String	"rozie-command-palette"			Id base for the combobox and option elements — aria-activedescendant needs real ids. Option ids are derived as idBase + "-opt-" + i. Set a distinct value per instance when more than one palette shares a page. Named idBase (not id) to avoid shadowing HTMLElement.id on the Lit custom element.

Models (two-way state)

open and query are both model: true. Two-way bind each (r-model:open / v-model:open / bind:open / [(open)], and likewise for query). Because there are two models the component generates no Angular ControlValueAccessor — a palette is not a single form control.

Model (r-model:)	Shape	Description
open	boolean	Whether the overlay is shown. Written back false on every close path (backdrop click, Escape, a closeOnSelect selection, or close()/toggle()).
query	string	The search text. Written back as the user types; cleared to "" whenever the palette opens.

Events

Event	Description
select	Fired when the user chooses a command (click, or highlight + Enter). Payload { id, label, group } — the chosen item. open / query are two-way models, not events.

Imperative handle

Declared once via $expose; obtained through each framework's native ref mechanism.

Method	Description
show	Open the palette (writes open → true). Clears the query, resets the highlight, and focuses the search input. The open verb is show — not open — because an open() verb collides with the open model (both collapse onto React's generated open/setOpen state).
close	Close the palette (writes open → false).
toggle	Flip the open state.
focus	Move DOM focus to the search input. Deliberately overrides the inherited HTMLElement.focus on the Lit custom element (accepted warn-only ROZ137).

Slots

Slot	Params	Description
option	{ option, index, active, selected, disabled }	Custom render for a single result row. Breaking change: renamed from item and realigned to the @rozie-ui/listbox option vocabulary (the palette now composes the listbox primitive). option is the command ({ id, label, group, keywords, disabled, _i }); index is its position; active is whether it is currently highlighted; selected whether it is the committed value; disabled whether it is non-selectable. Falls back to the label plus an optional group badge.
empty	{ query }	The no-results state; query is the current search string. Falls back to the emptyText prop.
footer	—	A persistent footer bar below the list (e.g. keyboard hints). Rendered only when provided.