29/Overlays

Command palette

Búsqueda ⌘K con grupos, navegación con flechas y búsqueda que ignora tildes. Es la misma que usa esta documentación.

Paleta

Los resultados se leen de un script type="application/json" dentro de la paleta.

Esc

↑ ↓ navegar↵ abrirEsc cerrar

HTML

<button class="cb-search-btn" type="button" data-cb-command-open="demo-command"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span>Abrir paleta</span></button>

<div class="cb-command" id="demo-command" data-cb-command data-cb-command-empty="Nada para">
  <div class="cb-command__panel" aria-label="Buscar">
    <div class="cb-command__head">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="cb-command__input" data-cb-command-input placeholder="Buscar..." aria-label="Buscar">
      <kbd>Esc</kbd>
    </div>
    <div class="cb-command__results" data-cb-command-results></div>
    <div class="cb-command__foot"><span><kbd>↑</kbd> <kbd>↓</kbd> navegar</span><span><kbd>↵</kbd> abrir</span><span><kbd>Esc</kbd> cerrar</span></div>
  </div>
  <script type="application/json" data-cb-command-items>
    [
      { "group": "Páginas", "label": "Inicio", "href": "#paleta" },
      { "group": "Páginas", "label": "Facturación", "href": "#paleta", "keywords": "nit factura" },
      { "group": "Acciones", "label": "Crear cliente", "hint": "C" }
    ]
  </script>
</div>

Clases y modificadores

Clase	Descripción
`.cb-command`	Fondo. `.is-open` lo muestra.
`.cb-command__panel`	Caja de la paleta.
`.cb-command__head`, `.cb-command__input`	Cabecera con el campo de búsqueda.
`.cb-command__results`, `.cb-command__group`, `.cb-command__item`	Lista, títulos de grupo y resultados (`.is-active` el seleccionado).
`.cb-command__hint`, `.cb-command__empty`, `.cb-command__foot`	Indicador, estado vacío y pie con atajos.

Atributos data-cb-*

Atributo	Descripción
`data-cb-command`	Activa la paleta.
`data-cb-command-hotkey="k"`	Atajo con ⌘ o Ctrl. Sin valor usa K.
`data-cb-command-open="id"`	Botón que la abre.
`data-cb-command-items`	JSON con `label`, `href`, `group`, `keywords` y `hint`.
`data-cb-command-empty`	Texto antes de la búsqueda cuando no hay resultados. Por defecto: "Sin resultados para".

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	Al abrir o cerrar.
`cb:select`	Al elegir un resultado (`detail.item`). Cancelable para manejar la navegación tú mismo.

Cargar resultados desde JS (por ejemplo, desde una API):

cobalto.components.command.setItems('demo-command', [
  { group: 'Clientes', label: 'María Ramírez', href: '/clientes/12' },
]);

Accesibilidad

El input es un combobox con aria-activedescendant apuntando al resultado activo.
Los resultados forman un listbox con opciones aria-selected.
Foco atrapado dentro de la paleta; Esc la cierra y devuelve el foco.