Command Palette Patterns

Palette Preview

A static command palette preview shows Command palette surface, open query, Open project top result, and Palette preview status.

Program

A command palette preview should make the current query and first visible result easy to read before any command runs.

palette_open_preview.html
Visuals: captured from real browser rendering
<section class="palette-preview" aria-labelledby="palette-preview-title"><h2 id="palette-preview-title">Palette open preview</h2><div class="palette-card" aria-label="Static command palette preview"><span class="query">open</span><span>Open project</span></div><dl>
  <div><dt>Surface</dt><dd>Command palette</dd></div>
  <div><dt>Query</dt><dd>open</dd></div><div><dt>Top result</dt><dd>Open project</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Palette preview</span></dd></div></dl>
  <p class="check">Learner check: the query and top result are visible without running search.</p>
  <p class="note">Static command palette preview only; no key capture, keydown handler, global shortcut, focus trap, dialog API, modal API, search indexing, fuzzy matching, command execution, routing, navigation, route, API, network, storage, cookie, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, service worker, account/session behavior, live command palette, live search, live navigation, or live submission runs.</p></section>
<style>
  .palette-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .palette-card { display: grid; gap: 6px; justify-self: start; min-width: 220px; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .query { color: #475569; border-bottom: 1px solid #ccfbf1; padding-bottom: 4px; }
  .palette-preview dl { display: grid; gap: 8px; margin: 0; }
  .palette-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .palette-preview dt { color: #475569; }
  .palette-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the palette preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show surface row.

    The surface name is exact pinned data.
    The surface name is exact pinned data.

  3. Show query and top result rows.

    The query and top result are exact pinned data.
    The query and top result are exact pinned data.

  4. Render palette-preview status.

    The status badge says this is a palette preview.
    The status badge says this is a palette preview.

  5. Check palette readback.

    The check says the query and top result are visible without running search.
    The check says the query and top result are visible without running search.

  6. Check palette honesty.

    Surface, query, top result, status, and no live command.
    Surface, query, top result, status, and no live command.
step flow step(1) labels the source, step(2) shows the surface, step(3) shows query and top result rows, step(4) shows palette-preview status, step(5) checks the palette readback, and step(6) checks the honesty note.
palette readback The section heading names the palette open preview surface.
palette rows Surface, Query, Top result, and Status values are exact pinned data.
no live command palette The lesson should not imply key capture, keydown handlers, global shortcuts, focus traps, dialog APIs, modal APIs, search indexing, fuzzy matching, command execution, routing, navigation, routes, APIs, networks, storage, cookies, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, service workers, account/session behavior, live command palettes, live search, live navigation, or live submissions.