Command Palette Patterns

Group Preview

A static grouped command preview shows Navigation group, Open project and Go to dashboard results, Open project current result, and Grouped preview status.

Program

Grouped command previews help learners see related actions without running a search engine.

command_group_preview.html
Visuals: captured from real browser rendering
<section class="group-preview" aria-labelledby="group-preview-title"><h2 id="group-preview-title">Command group preview</h2><div class="group-card" aria-label="Static grouped command preview"><span>Navigation</span><span>Open project</span><span>Go to dashboard</span></div><dl>
  <div><dt>Group</dt><dd>Navigation</dd></div>
  <div><dt>Results</dt><dd>Open project, Go to dashboard</dd></div><div><dt>Current result</dt><dd>Open project</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Grouped preview</span></dd></div></dl>
  <p class="check">Learner check: grouped commands are visible without a search engine.</p>
  <p class="note">Static command group 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>
  .group-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .group-card { display: grid; gap: 6px; justify-self: start; min-width: 240px; border: 1px solid #1d4ed8; background: #ffffff; padding: 10px; }
  .group-card span:first-child { color: #475569; font-weight: 700; border-bottom: 1px solid #dbeafe; padding-bottom: 4px; }
  .group-preview dl { display: grid; gap: 8px; margin: 0; }
  .group-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .group-preview dt { color: #475569; }
  .group-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the command group preview.

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

  2. Show group row.

    The group name is exact pinned data.
    The group name is exact pinned data.

  3. Show results and current result rows.

    The results and current result are exact pinned data.
    The results and current result are exact pinned data.

  4. Render grouped-preview status.

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

  5. Check group readback.

    The check says grouped commands are visible without a search engine.
    The check says grouped commands are visible without a search engine.

  6. Check group preview honesty.

    Group, results, current result, status, and no live command.
    Group, results, current result, status, and no live command.
step flow step(1) labels the source, step(2) shows the group, step(3) shows results and current result rows, step(4) shows grouped-preview status, step(5) checks the group readback, and step(6) checks the honesty note.
group readback The section heading names the command group preview surface.
group rows Group, Results, Current result, and Status values are exact pinned data.
no search engine 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.