CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / feedback-overlays / depth-command-palette

Stable release
Back to category

Open experiment

Depth command palette

Organizes commands into receding spatial layers for recent, workspace, and system actions. Search and Tab switch depth layers; arrows choose commands; Enter confirms and Escape clears. Its layered command scope differs from a flat searchable command menu.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<section class="cmp-depth-command-palette cmp-atlas" data-state="idle" data-variant="3">
  <div class="cmp-atlas__feedback-scene" aria-hidden="true"><i></i><i></i><i></i><b>40</b></div>
  <div class="cmp-atlas__feedback-copy">
    <span>Command palettes</span>
    <h3>Depth command palette</h3>
    <p>
      Organizes commands into receding spatial layers for recent, workspace, and system actions.
    </p>
  </div>
  <div class="cmp-atlas__choices">
    <button type="button" data-choice="0" aria-pressed="true">Inspect</button
    ><button type="button" data-choice="1" aria-pressed="false">Resolve</button
    ><button type="button" data-choice="2" aria-pressed="false">Archive</button>
  </div>
  <div class="cmp-atlas__feedback-actions">
    <button
      type="button"
      class="cmp-atlas__primary"
      data-primary
      data-active-label="State updated"
      aria-pressed="false"
    >
      Run interaction</button
    ><button type="button" data-choice="3" aria-pressed="false">Details</button>
  </div>
  <p data-status aria-live="polite">Ready · Escape resets the demo</p>
</section>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • Every interactive target is a labelled native control with a visible focus treatment.
  • State changes are communicated through a polite text status and never by color alone.
  • The contained visual effects stop when the user requests reduced motion.

License: MIT License for open-source use, modification, and distribution.