Admin Command

admin-command

Module-tier command palette wrapper — wraps a native <dialog> and the inner <command-ui>. Owns the keyboard shortcut listener, focus management, and dismiss handlers. Reflects [open].

Basic shape

Place <admin-command> as a direct child of <admin-shell>. The host wires [data-command-trigger] elements to .show() via lookup; you don't reach across siblings.

<admin-shell> …sidebars + content… <admin-command> <command-ui placeholder="Search…"></command-ui> </admin-command> </admin-shell>

Keyboard shortcut

ValueBehavior
both (default)Responds to Cmd+K (mac) AND Ctrl+K (other platforms) — the AdiaUI cross-platform convention.
cmd+kResponds only when metaKey is held.
ctrl+kResponds only when ctrlKey is held.
[no-shortcut]Disables the keyboard listener entirely. Use when the host wires its own shortcut handling.

State as attribute

AttributeWhen setUse for
openDialog is showingCSS :has(admin-command[open]); JS .hasAttribute('open'); programmatic round-trip via .toggle()

The [open] attribute is synced both ways — programmatic .show() sets it, native dialog close (esc key, backdrop click) clears it.

Public methods

MethodEffect
.show()Open via showModal(); focus the inner command-ui; clear its value.
.hide()Close the dialog; clear inner palette state.
.toggle()Flip open state. Returns the new open value.

Events

EventDetail
command-selectForwarded from the inner command-ui when an option is chosen. Detail mirrors the inner event's detail.

Trigger wiring

Triggers (any element with [data-command-trigger]) live anywhere in the shell — typically a search row in the leading sidebar. The host (<admin-shell>) finds the inner <admin-command> on connect and wires every trigger's click to command.show().

<admin-shell> <admin-sidebar slot="leading"> <nav-ui> <nav-item-ui data-command-trigger icon="magnifying-glass">Search</nav-item-ui> </nav-ui> </admin-sidebar> <admin-command> <command-ui placeholder="Search…"></command-ui> </admin-command> </admin-shell>