# Paleta de comandos

> Buscador de acciones y páginas que se abre con Ctrl K: grupos, sin resultados y en diálogo.

Categoría: Navegación · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- En backoffices y herramientas con muchas secciones.
- No en sitios públicos: ahí va el Buscador.
- Cada comando también se puede hacer desde el menú.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none overflow-hidden"><div class="flex items-center gap-2 px-3 h-12 border-b border-ccs-line dark:border-ccs-dark-line"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><input role="combobox" aria-expanded="true" aria-controls="cmd-l-1" aria-autocomplete="list" aria-activedescendant="cmd-l-1-o0" autocomplete="off" aria-label="Buscar un comando" value="" placeholder="Escribe un comando o busca…" class="flex-1 bg-transparent text-base outline-none placeholder:text-ccs-slate sm:text-sm dark:placeholder:text-ccs-dark-text-2" /></div><div role="listbox" id="cmd-l-1" class="p-1.5"><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Sugerencias</div><button type="button" role="option" tabindex="-1" id="cmd-l-1-o0" aria-selected="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover bg-ccs-hover dark:bg-ccs-dark-hover  "><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calendario</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Buscar documentos</span></button><button type="button" role="option" tabindex="-1" aria-disabled="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover  opacity-50 cursor-not-allowed pointer-events-none "><iconify-icon icon="solar:calculator-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calculadora</span></button><div role="separator" class="-mx-1.5 my-1.5 h-px bg-ccs-line dark:bg-ccs-dark-line"></div><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Configuración</div><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:user-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Perfil</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:card-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Facturación</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:settings-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Configuración</span></button></div></div></div>
```

## Sin resultados

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none overflow-hidden"><div class="flex items-center gap-2 px-3 h-12 border-b border-ccs-line dark:border-ccs-dark-line"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><input role="combobox" aria-expanded="true" aria-controls="cmd-l-2" aria-autocomplete="list" autocomplete="off" aria-label="Buscar un comando" value="zzz" placeholder="Escribe un comando o busca…" class="flex-1 bg-transparent text-base outline-none placeholder:text-ccs-slate sm:text-sm dark:placeholder:text-ccs-dark-text-2" /></div><div role="listbox" id="cmd-l-2" class="p-1.5"><div class="py-8 text-center text-sm text-ccs-slate dark:text-ccs-dark-text-2">Sin resultados.</div></div></div></div>
```

## Con desplazamiento

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none overflow-hidden"><div class="flex items-center gap-2 px-3 h-12 border-b border-ccs-line dark:border-ccs-dark-line"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><input role="combobox" aria-expanded="true" aria-controls="cmd-l-3" aria-autocomplete="list" aria-activedescendant="cmd-l-3-o0" autocomplete="off" aria-label="Buscar un comando" value="" placeholder="Escribe un comando o busca…" class="flex-1 bg-transparent text-base outline-none placeholder:text-ccs-slate sm:text-sm dark:placeholder:text-ccs-dark-text-2" /></div><div role="listbox" id="cmd-l-3" class="ccs-corte-scroll p-1.5 max-h-64 overflow-y-auto"><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Sugerencias</div><button type="button" role="option" tabindex="-1" id="cmd-l-3-o0" aria-selected="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover bg-ccs-hover dark:bg-ccs-dark-hover  "><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calendario</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Buscar documentos</span></button><button type="button" role="option" tabindex="-1" aria-disabled="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover  opacity-50 cursor-not-allowed pointer-events-none "><iconify-icon icon="solar:calculator-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calculadora</span></button><div role="separator" class="-mx-1.5 my-1.5 h-px bg-ccs-line dark:bg-ccs-dark-line"></div><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Configuración</div><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:user-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Perfil</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:card-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Facturación</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:settings-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Configuración</span></button><div role="separator" class="-mx-1.5 my-1.5 h-px bg-ccs-line dark:bg-ccs-dark-line"></div><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Ayuda</div><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:keyboard-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Atajos de teclado</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:chat-round-dots-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Contactar a soporte</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Novedades</span></button></div></div></div>
```

## En un diálogo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><button type="button" commandfor="paleta" command="show-modal" aria-keyshortcuts="Control+K Meta+K" class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text w-64 justify-start text-ccs-slate dark:text-ccs-dark-text-2 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon><span class="flex-1 text-left">Buscar…</span><span aria-hidden="true" class="hidden gap-1 [@media(hover:hover)_and_(pointer:fine)]:flex"><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">Ctrl</kbd><kbd class="inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-lg bg-ccs-hover px-1.5 font-sans text-xs font-medium text-ccs-slate dark:bg-ccs-dark-hover dark:text-ccs-dark-text-2 ">K</kbd></span></button><dialog closedby="any" id="paleta" aria-label="Paleta de comandos" class="ccs-backdrop-blur w-11/12 max-w-lg mt-[10dvh] p-0 bg-transparent"><form method="dialog"><div class="w-full max-w-lg rounded-ccs border border-ccs-line bg-white shadow-ccs dark:border-ccs-dark-line dark:bg-ccs-dark-overlay dark:shadow-none overflow-hidden"><div class="flex items-center gap-2 px-3 h-12 border-b border-ccs-line dark:border-ccs-dark-line"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><input role="combobox" aria-expanded="true" aria-controls="cmd-l-4" aria-autocomplete="list" aria-activedescendant="cmd-l-4-o0" autocomplete="off" aria-label="Buscar un comando" value="" placeholder="Escribe un comando o busca…" class="flex-1 bg-transparent text-base outline-none placeholder:text-ccs-slate sm:text-sm dark:placeholder:text-ccs-dark-text-2" /></div><div role="listbox" id="cmd-l-4" class="p-1.5"><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Sugerencias</div><button type="button" role="option" tabindex="-1" id="cmd-l-4-o0" aria-selected="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover bg-ccs-hover dark:bg-ccs-dark-hover  "><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calendario</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Buscar documentos</span></button><button type="button" role="option" tabindex="-1" aria-disabled="true" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover  opacity-50 cursor-not-allowed pointer-events-none "><iconify-icon icon="solar:calculator-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Calculadora</span></button><div role="separator" class="-mx-1.5 my-1.5 h-px bg-ccs-line dark:bg-ccs-dark-line"></div><div class="px-2.5 pt-1.5 pb-1 text-xs font-semibold text-ccs-slate dark:text-ccs-dark-text-2">Configuración</div><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:user-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Perfil</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:card-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Facturación</span></button><button type="button" role="option" tabindex="-1" class="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-left outline-none transition text-ccs-ink hover:bg-ccs-hover aria-selected:bg-ccs-hover dark:aria-selected:bg-ccs-dark-hover focus-visible:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:focus-visible:bg-ccs-dark-hover   "><iconify-icon icon="solar:settings-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span class="truncate">Configuración</span></button></div></div></form></dialog></div>
```

## Guía: Comportamiento

Mismo patrón que Combobox: el foco queda en el campo, las flechas recorren los ítems (aria-activedescendant) y Enter ejecuta. Escape borra y, con el campo vacío, cierra. Se abre con Ctrl K (⌘K en Mac), el mismo atajo del Buscador; se muestra con Tecla en el botón que la abre y se declara con aria-keyshortcuts.

Los comandos no muestran atajos propios. Si la aplicación de verdad los tiene, van a la derecha de cada comando con Tecla, y no pueden chocar con los del navegador (imprimir, guardar, marcadores) ni con los de los lectores de pantalla.
