s72

    • Command palette

    data-commands since 0.1.0

    A <dialog data-commands> is the ⌘K palette: a search box over a menu of commands. Typing filters the list, the arrows move the active option and Enter presses its button.

    Basic

    •
    html
    <button data-open="#palette" data-variant="line" data-size="sm">Commands <kbd>⌘K</kbd></button>
<dialog data-commands id="palette" aria-label="Commands">
  <input type="search" placeholder="Type a command" aria-label="Search commands">
  <menu>
    <li><button data-toast="Focus timer started, fifty minutes" data-toast-tone="go">Start a focus timer <kbd>F T</kbd></button></li>
    <li><button data-toast="Status set to focus" data-toast-tone="go">Set status to focus <kbd>S F</kbd></button></li>
    <li><button data-toast="Standup snoozed for ten minutes">Snooze the next meeting <kbd>S N</kbd></button></li>
    <li><button data-toast="Copied the atlas clone command">Copy the atlas clone command <kbd>C A</kbd></button></li>
  </menu>
  <output></output>
</dialog>

    ⌘K or Ctrl+K opens the first palette on the page and closes it again; the <output> says "No matches" when nothing is left.

    Notes