Палитра команд

<button class="btn btn--ghost" type="button" data-ui-open="#cmd-ex-1">Поиск по кабинету <kbd class="command__kbd">Ctrl K</kbd></button>
<dialog class="dialog command" id="cmd-ex-1" data-ui-command data-ui-hotkey="k" aria-label="Палитра команд">
  <div class="command__search">
    <span class="command__prompt" aria-hidden="true">›</span>
    <input class="command__input" type="text" placeholder="Команда или раздел…" aria-label="Поиск команды" autocomplete="off" spellcheck="false">
  </div>
  <div class="command__list" role="listbox" aria-label="Команды">
    <div class="command__group" role="group" aria-labelledby="cmd-ex-1-g1">
      <p class="command__label" id="cmd-ex-1-g1" role="presentation">Переход</p>
      <a class="command__item" href="/meetings/"><span class="command__icon" aria-hidden="true">▣</span><span class="command__text">Встречи</span><kbd class="command__kbd">G M</kbd></a>
      <a class="command__item" href="/rooms/"><span class="command__icon" aria-hidden="true">□</span><span class="command__text">Комнаты</span><kbd class="command__kbd">G R</kbd></a>
      <a class="command__item" href="/recordings/" data-ui-keywords="видео архив"><span class="command__icon" aria-hidden="true">●</span><span class="command__text">Записи</span></a>
    </div>
    <div class="command__group" role="group" aria-labelledby="cmd-ex-1-g2">
      <p class="command__label" id="cmd-ex-1-g2" role="presentation">Действия</p>
      <button class="command__item" type="button" data-ui-keywords="создать комната"><span class="command__icon" aria-hidden="true">+</span><span class="command__text">Новая встреча</span><kbd class="command__kbd">N</kbd></button>
      <button class="command__item" type="button" data-ui-keywords="пригласить e-mail"><span class="command__icon" aria-hidden="true">→</span><span class="command__text">Пригласить участника</span></button>
      <button class="command__item" type="button" data-ui-keywords="logout выход"><span class="command__icon" aria-hidden="true">×</span><span class="command__text">Выйти</span></button>
    </div>
  </div>
  <p class="command__empty" role="status" hidden>Ничего не найдено</p>
  <div class="command__foot">
    <span><kbd class="command__kbd">↑</kbd><kbd class="command__kbd">↓</kbd> выбор</span>
    <span><kbd class="command__kbd">Enter</kbd> открыть</span>
    <span><kbd class="command__kbd">Esc</kbd> закрыть</span>
  </div>
</dialog>

<div class="command" data-ui-command>
  <div class="command__search">
    <span class="command__prompt" aria-hidden="true">›</span>
    <input class="command__input" type="text" placeholder="Найти заметку…" aria-label="Поиск по блогу" autocomplete="off" spellcheck="false">
  </div>
  <div class="command__list" role="listbox" aria-label="Заметки">
    <div class="command__group" role="group" aria-labelledby="cmd-ex-2-g1">
      <p class="command__label" id="cmd-ex-2-g1" role="presentation">Эксплуатация</p>
      <a class="command__item" href="/posts/oncall-handover/"><span class="command__text">Передача дежурства без потерь</span><span class="command__hint">12/10/2026</span></a>
      <a class="command__item" href="/posts/postmortem/"><span class="command__text">Разбор инцидента: что записывать</span><span class="command__hint">28/09/2026</span></a>
    </div>
    <div class="command__group" role="group" aria-labelledby="cmd-ex-2-g2">
      <p class="command__label" id="cmd-ex-2-g2" role="presentation">Инфраструктура</p>
      <a class="command__item" href="/posts/backups/"><span class="command__text">Резервные копии: проверка восстановления</span><span class="command__hint">05/09/2026</span></a>
    </div>
  </div>
  <p class="command__empty" role="status" hidden>Ничего не найдено</p>
</div>