material-command-palette

⌘K / Ctrl+K quick actions — fuzzy search over slotted material-options or a commands array, sections, keyboard nav; data-href items navigate via a real light-DOM anchor (Unpoly-friendly), the rest emit materialCommand.

press ⌘K / Ctrl+K anywhere on this page, or

executed: —

Try: type ven (substring + word-start ranking), ndr (fuzzy subsequence → "New vendor"), navigate with ↑/↓, execute with Enter. "Go to" items change the location hash via a real anchor click. Esc or a click on the scrim closes.

"Toggle dark theme" is handled in-page via materialCommand.

Sample usage (Django / Unpoly) 
<material-command-palette up-target="main">
  {% for action in quick_actions %}
  <material-option value="{{ action.id }}" label="{{ action.title }}"
                   leading-icon="{{ action.icon }}" data-section="Actions"
                   data-href="{{ action.url }}"></material-option>
  {% endfor %}
</material-command-palette>

<script>
  palette.addEventListener('materialCommand', (e) => {
    // e.preventDefault() to suppress data-href navigation
    console.log(e.detail); // {id, item}
  });
</script>