Слои поверх страницы

Выпадающая панель и меню

<details class="gr-dropdown">
  <summary class="gr-btn">Действия</summary>
  <div class="gr-dropdown-panel">
    <ul class="gr-menu">
      <li><button class="gr-menu-item" type="button">Переименовать</button></li>
      <li><hr class="gr-menu-sep"></li>
      <li><button class="gr-menu-item gr-menu-danger" type="button">Удалить</button></li>
    </ul>
  </div>
</details>

<div class="gr-dropdown">
  <button class="gr-btn" type="button" popovertarget="m">Экспорт</button>
  <div class="gr-dropdown-panel" id="m" popover>
    <ul class="gr-menu">…</ul>
  </div>
</div>

<div class="gr-dropdown gr-dropdown-hover">
  <button class="gr-btn gr-btn-ghost" type="button" aria-haspopup="true">Продукты</button>
  <div class="gr-dropdown-panel">
    <ul class="gr-menu">…</ul>
  </div>
</div>

Модальное окно

<button type="button" onclick="m.showModal()">Открыть</button>

<dialog class="gr-modal" id="m" aria-labelledby="m-title">
  <div class="gr-modal-header">
    <h2 class="gr-modal-title" id="m-title">Заголовок</h2>
  </div>
  <div class="gr-modal-body">…</div>
  <div class="gr-modal-footer">
    <form method="dialog"><button class="gr-btn">Закрыть</button></form>
  </div>
</dialog>

Пустое окно: содержимое приходит позже

Типичный сценарий витрины: окно открывается сразу, а форму обратного звонка, быстрый заказ или выбор города в него кладёт ответ сервера. До ответа <dialog> пуст — и раньше рисовался полоской высотой в рамку, которая через полсекунды рывком раскрывалась в окно. Теперь у окна минимальная высота 10rem: пустое окно — плашка, а состояние data-gr-state="loading" рисует в её центре кольцо тем же keyframe, что у .gr-spinner. Ставит и снимает состояние тот же скрипт, что грузит содержимое; программе чтения с экрана о том же говорит aria-busy="true".

const m = document.getElementById('callback');
m.dataset.grState = 'loading';
m.setAttribute('aria-busy', 'true');
m.showModal();

const html = await (await fetch('/callback-form')).text();
m.innerHTML = html;
delete m.dataset.grState;
m.removeAttribute('aria-busy');

Закрытие щелчком по подложке

Единственное, чего <dialog> не умеет сам. Включается атрибутом на самом окне — не глобальной настройкой:

<dialog class="gr-modal" data-gr-overlay-close>…</dialog>

<script src="griffincss-ui/dist/griffincss-ui.js"></script>

Выдвижная панель

<dialog class="gr-drawer gr-drawer-end" aria-label="Фильтры">
  <div class="gr-modal-header">…</div>
  <div class="gr-modal-body">…</div>
</dialog>

Подсказка

<span class="gr-tooltip-anchor">
  <button class="gr-btn" type="button" aria-describedby="t1">Сохранить</button>
  <span class="gr-tooltip" id="t1" role="tooltip">Ctrl + S</span>
</span>

Примеры использования

Слои собираются из уже показанных частей: меню — из дропдауна и аватара, корзина — из панели и медиа-объектов. Оба рецепта живые.

Меню пользователя в шапке

По клику на аватар — панель к концу строки: шапка-группа с именем и почтой (.gr-menu-header двумя строками), пункты, разделитель и «Выйти» в .gr-menu-danger. Всё на <details> — здесь есть опасное действие, поэтому раскрытие по наведению не годится: нужно настоящее состояние.

<details class="gr-dropdown gr-dropdown-end">
  <summary class="gr-btn gr-btn-ghost gr-btn-icon" aria-label="Меню пользователя">
    <span class="gr-avatar gr-avatar-sm">АК</span>
  </summary>
  <div class="gr-dropdown-panel">
    <ul class="gr-menu">
      <li><div class="gr-menu-header">Анна Ковалёва<br>
        <span class="gr-text-xs gr-text-ink-secondary gr-font-normal">anna@example.ru</span></div></li>
      <li><a class="gr-menu-item" href="/profile">Профиль</a></li>
      <li><a class="gr-menu-item" href="/settings">Настройки</a></li>
      <li><hr class="gr-menu-sep"></li>
      <li><button class="gr-menu-item gr-menu-danger" type="button">Выйти</button></li>
    </ul>
  </div>
</details>

Корзина в выдвижной панели

«Товар добавлен» — и справа выезжает корзина: .gr-drawer .gr-drawer-end. Внутри позиции — медиа-объекты со стопкой «название + цена» и кнопкой-крестиком, в подвале — .gr-flex-between с итогом и кнопка оформления на всю ширину. Контекст страницы не теряется — панель поверх, щелчок мимо закрывает её (data-gr-overlay-close).

<dialog class="gr-drawer gr-drawer-end" id="cart" aria-label="Корзина" data-gr-overlay-close>
  <div class="gr-modal-header">
    <strong>Корзина</strong>
    <form method="dialog"><button class="gr-btn gr-btn-ghost gr-btn-icon" aria-label="Закрыть">✕</button></form>
  </div>
  <div class="gr-modal-body gr-flex gr-flex-col gr-gap">
    <div class="gr-flex gr-gap-sm gr-flex-items-start">
      <span class="gr-avatar gr-avatar-square">🪑</span>
      <div class="gr-min-w-0 gr-flex-1">
        <p class="gr-m-0 gr-text-sm gr-font-medium">Кресло «Дюна»</p>
        <p class="gr-m-0 gr-text-xs gr-text-ink-secondary">1 × 12 400 ₽</p>
      </div>
      <button class="gr-btn gr-btn-icon gr-btn-ghost gr-btn-sm">✕<span class="gr-sr-only">Убрать</span></button>
    </div>
  </div>
  <div class="gr-modal-footer gr-flex gr-flex-col gr-gap-sm">
    <div class="gr-flex gr-flex-between gr-w-full">
      <span>Итого</span><span class="gr-font-bold">18 300 ₽</span>
    </div>
    <button class="gr-btn gr-btn-primary gr-btn-block">Оформить заказ</button>
  </div>
</dialog>

С подключённым griffinjs.js

Дропдаун: роли меню, клавиатура, закрытие, позиция

data-gr-dropdown на обёртке любой из трёх форм — <details>, popover, наведение. Контроллер ставит роли menu/menuitem/separator, честный aria-expanded, ведёт клавиатуру по схеме WAI-ARIA menu button (↓ открывает и переходит к первому пункту, ↑ ↓ Home End по пунктам, набор по первой букве, Esc закрывает и возвращает фокус) и добавляет <details> то, чего у него нет: закрытие по Esc и щелчку мимо. Popover-панель контроллер кладёт под кнопку сам — по getBoundingClientRect, одинаково во всех браузерах, без зависимости от CSS anchor positioning; при нехватке места снизу переворачивает вверх, при прокрутке — догоняет кнопку. Закрытие <details> идёт с анимацией темы: обёртка получает data-gr-state="closing" и держит open до конца перехода панели (рецепт — на странице мегаменю).

<details class="gr-dropdown" data-gr-dropdown>…</details>
<div class="gr-dropdown" data-gr-dropdown="align: end">
  <button popovertarget="m">…</button><div id="m" popover>…</div>
</div>
<div class="gr-dropdown gr-dropdown-hover" data-gr-dropdown="hover; delay: 100">…</div>

Окно и панель: открытие атрибутом, стек, прокрутка, медиа, ajax, hash

Контроллер окон ничего не переписывает у <dialog>: верхний слой, фокус, Esc и inert остаются платформе, щелчок по подложке — атрибуту data-gr-overlay-close выше. Он добавляет data-gr-open="#id" на кнопке вместо onclick, стек окон, блокировку прокрутки страницы под окном (в том числе на iOS), паузу видео при закрытии, содержимое с сервера по data-gr-src, синхронизацию с адресом (data-gr-dialog="hash") и плавный рост окна с приходом содержимого (data-gr-dialog="grow"). Подробно — на странице GriffinJS → «Окна и комбобокс».

<button class="gr-btn" type="button" data-gr-open="#cart">Корзина</button>
<dialog class="gr-drawer gr-drawer-end" id="cart" data-gr-dialog="hash" data-gr-overlay-close>…</dialog>

Подсказка в верхнем слое

Обычной подсказке скрипт не нужен. Он нужен подсказке внутри таблицы с прокруткой или блока с overflow: hidden — её обрезает край предка. data-gr-tooltip на обёртке переводит подсказку в popover="manual", показывает по наведению с задержкой (мышь и перо) и по фокусу сразу, прячет по уходу, потере фокуса и Esc, а положение у якоря считает сам. Без скрипта та же разметка — обычная подсказка из раздела выше; aria-describedby работает в обоих случаях.

<span class="gr-tooltip-anchor" data-gr-tooltip="side: bottom">
  <button class="gr-btn" type="button" aria-describedby="t9">В таблице</button>
  <span class="gr-tooltip" id="t9" role="tooltip">Не обрежется</span>
</span>