Nested pages

<div class="demo">
  <button class="demo-btn" id="open">Open the palette</button>
  <p class="demo-hint">Try “theme”, then pick one. Backspace steps back.</p>
  <p class="demo-out" id="out">Theme: system</p>
</div>

import { createCommandPalette } from 'https://devix.pk/cdn/oss/command-palette@1.0.0/index.js';

const out = document.getElementById('out');

const palette = createCommandPalette({
  recents: false,
  items: [
    {
      id: 'theme',
      title: 'Change theme',
      section: 'Preferences',
      children: ['System', 'Light', 'Dark', 'High contrast'].map((name) => ({
        id: `theme.${name}`,
        title: name,
        perform: () => (out.textContent = `Theme: ${name.toLowerCase()}`),
      })),
    },
    {
      id: 'language',
      title: 'Change language',
      section: 'Preferences',
      // A function is called when the page opens — the place to fetch the list.
      children: async () => {
        await new Promise((r) => setTimeout(r, 250));
        return ['English', 'العربية', 'اردو', 'Français'].map((name) => ({
          id: `lang.${name}`,
          title: name,
          perform: () => (out.textContent = `Language: ${name}`),
        }));
      },
    },
    {
      id: 'move',
      title: 'Move invoice to…',
      section: 'Invoice',
      // Returning commands from perform() opens them as a page, too.
      perform: () => ['Drafts', 'Sent', 'Archive'].map((folder) => ({
        id: `move.${folder}`,
        title: folder,
        perform: () => (out.textContent = `Moved to ${folder}`),
      })),
    },
  ],
});

document.getElementById('open').addEventListener('click', () => palette.open());

@import url('https://devix.pk/cdn/oss/command-palette@1.0.0/command-palette.min.css');