ds
Components
Command palette

Command palette

Ctrl+K search over pages and actions.

This site's own search. Also opens with "/".

Both sites have one. It is a native dialog with a combobox input and a listbox. The script is not on the page until you open it for the first time, so it costs nothing on load.

Structure

<dialog class="palette" aria-label="Command menu">
  <div class="pbox">
    <input type="text" role="combobox" aria-expanded="true" aria-controls="pl" placeholder="Jump to a page, post or action" />
    <ul id="pl" role="listbox">
      <li class="pg" role="presentation">Pages</li>
      <li role="option" id="pi-0" aria-selected="true"><span>Work</span><span class="ph">/work</span></li>
      <li role="option" id="pi-1" aria-selected="false"><span>Writing</span><span class="ph">/writing</span></li>
    </ul>
    <div class="pf"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>↵</kbd> open</span><span><kbd>esc</kbd> close</span></div>
  </div>
</dialog>

Loading it lazily

addEventListener('keydown', (e) => {
  if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
    e.preventDefault();
    import('./palette.js').then((m) => m.open());
  }
});

Class	On	What it does
`.palette`	dialog	Centred at 14vh, 35rem wide.
`.pbox`	div	The surface: input, list, footer.
`.pg`	li	Group heading.
`[role=option][aria-selected=true]`	li	Active row, with an accent bar on the left.
`.ph / .pe / .pf`	span, li, div	Row hint, empty message, footer with keys.

Accessibility

The input keeps focus; aria-activedescendant points at the active option.
Match on prefix, then substring, then subsequence, so "ckh" finds ClickHouse.