Command palette search

<dialog id="palette" aria-label="Command palette"
  class="mx-auto mt-24 w-full max-w-lg rounded-xl bg-white p-0 shadow-2xl backdrop:bg-slate-900/50">
  <input id="palette-input" type="text" role="combobox" aria-expanded="true" aria-controls="palette-list"
    aria-autocomplete="list" placeholder="Search docs..." autocomplete="off"
    class="w-full border-b border-slate-200 px-4 py-3 text-slate-900 outline-none">
  <ul id="palette-list" role="listbox" class="max-h-72 overflow-y-auto p-2 text-sm"></ul>
  <p class="border-t border-slate-100 px-4 py-2 text-xs text-slate-400">Arrows to move, Enter to open, Esc to close</p>
</dialog>

const items = [
  { label: 'Getting started', href: '/docs/start' },
  { label: 'Authentication', href: '/docs/auth' },
  { label: 'Webhooks', href: '/docs/webhooks' },
  { label: 'API reference', href: '/docs/api' },
  { label: 'Troubleshooting', href: '/docs/help' },
];
const dialog = document.getElementById('palette');
const input = document.getElementById('palette-input');
const list = document.getElementById('palette-list');
let shown = items;
let index = 0;

function render() {
  list.replaceChildren(...shown.map((item, i) => {
    const li = document.createElement('li');
    li.id = 'palette-opt-' + i;
    li.setAttribute('role', 'option');
    li.setAttribute('aria-selected', String(i === index));
    li.className = 'cursor-pointer rounded-lg px-3 py-2 aria-selected:bg-indigo-600 aria-selected:text-white';
    li.textContent = item.label;
    li.addEventListener('click', () => (location.href = item.href));
    return li;
  }));
  input.setAttribute('aria-activedescendant', shown.length ? 'palette-opt-' + index : '');
}

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  shown = items.filter((it) => it.label.toLowerCase().includes(q));
  index = 0;
  render();
});

input.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
    e.preventDefault();
    index = (index + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % (shown.length || 1);
    render();
  } else if (e.key === 'Enter' && shown[index]) {
    location.href = shown[index].href;
  }
});

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
    e.preventDefault();               // stop the browser's own shortcut
    dialog.open ? dialog.close() : (dialog.showModal(), input.value = '', input.dispatchEvent(new Event('input')));
  }
});