block · command-palette

Command palette

A modal command finder composed from native dialog and editable combobox contracts.

Install with npx @madojs/ui@latest add command-palette.

Block

Open one native modal search surface without replacing dialog, form or text-input behavior.

No command has been run.

Composition

Compose a labelled native dialog from header, close form, search form, editable combobox, status and footer regions.
Open it with showModal(); command data, matching, execution and the global shortcut stay in application code.

element dialog: Browser-owned modal lifecycle and Escape close request.
class mado-ui-command-palette-*: Root, header, title, close, content, search, status, footer, hint, shortcut and submit hooks.
export madoUiCombobox(): Optional progressive enhancement for the palette's editable suggestions.

The dialog needs a visible accessible heading, and the combobox needs its own visible label.
Update one stable status node when result counts change; announce command outcomes only when the surrounding application needs it.

Tab and Escape follow the native modal dialog contract; the nested combobox owns suggestion arrows and Enter.
A global opening shortcut must ignore editable controls and IME composition, and must never replace an essential visible control.

Move initial focus to the query input when opening and return focus to the invoker when closing.

Without combobox enhancement, the dialog, labelled input, datalist, close button and submit form remain usable native controls.

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.