Command Palette

The .c-command is a Cmd+K quick-action search overlay. It uses the Popover API for top-layer rendering and @starting-style for smooth enter/exit. Porchlight provides the visual structure; the app owns filtering, activation, and keyboard state.

Semantic HTML

<button
  popovertarget="cmdk"
  aria-haspopup="dialog"
  aria-controls="cmdk"
  aria-expanded="false"
>
  Open
</button>

<div
  popover
  class="c-command"
  id="cmdk"
  role="dialog"
  aria-labelledby="cmdk-title"
>
  <h2 id="cmdk-title" class="u-sr-only">Command palette</h2>
  <input
    class="c-command__search"
    role="combobox"
    aria-expanded="true"
    aria-controls="cmdk-list"
    aria-activedescendant="cmdk-create"
    aria-label="Search commands"
    placeholder="Type a command..."
  />
  <div
    class="c-command__body"
    id="cmdk-list"
    role="listbox"
    aria-label="Commands"
  >
    <div class="c-command__group">
      <h3 class="c-command__heading">Actions</h3>
      <button
        class="c-command__item"
        id="cmdk-create"
        type="button"
        role="option"
        aria-selected="true"
        data-selected
      >
        <svg class="c-command__icon">...</svg>
        <span>Create project</span>
        <span class="c-command__shortcut">C</span>
      </button>
    </div>
  </div>
  <footer class="c-command__footer">
    <span>↑↓ navigate</span>
    <span>↵ select</span>
    <span>esc close</span>
  </footer>
</div>

Keep focus on .c-command__search while arrow keys move the active command. Synchronize the opener’s aria-expanded, the search input’s aria-activedescendant, each item’s aria-selected, and optional data-selected for styling. Enter should activate the selected command; Escape can call hidePopover().

Class contract