Отображение данных

Панель

Область приложения: она стоит на экране постоянно и имеет своё имя. Панель — не карточка: её нельзя перетащить, потому что она и есть место.

Компонент

Прогоны

Содержимое области.

Разметка

<div class="inst-panel">
  <div class="inst-panel-header">
    <span class="inst-panel-title">Прогоны</span>
    <div class="inst-panel-actions">
      <button class="inst-btn inst-btn--sm" type="button">Обновить</button>
    </div>
  </div>
  <div class="inst-panel-body">
    Содержимое области.
  </div>
</div>

Пример

Прогоны

Без обводки: границу держит перепад от страницы к листу. Только для крупных областей.

Разметка

<div class="inst-panel inst-panel--plain">
  <div class="inst-panel-header"><span class="inst-panel-title">Прогоны</span></div>
  <div class="inst-panel-body">Без обводки: границу держит перепад от страницы к листу.
    Только для крупных областей.</div>
</div>

Контракт

Что	Обязательно	Почему
`--plain` только на крупной области	да	Границу тогда держит перепад 1.07 — замерено, что на 201 000 px² он держится, а на 36 000 теряется. Мелкой панели обводка положена
`role="region"` и `aria-labelledby`	да, если панель — ориентир	Иначе она не попадёт в список областей у скринридера
`tabindex="0"` на теле	да, если внутри нет фокусируемого	Область прокрутки обязана получать фокус с клавиатуры
Ширина приходит снаружи	да	Панель объявлена контейнером; `container-type` отключает интринсик и схлопнет элемент, получающий ширину от содержимого

Доступность


Заголовок	`inst-panel-title` — визуальный. Если панель является ориентиром, дайте ей `role="region"` и `aria-labelledby` на заголовок, иначе она не попадёт в список областей
Прокрутка	Тело прокручивается само. Область прокрутки должна получать фокус с клавиатуры — браузеры дают это `tabindex="0"`, если внутри нет фокусируемого
Глубина	Передаётся поверхностью, а не тенью: `--surface-raised` над `--surface-page`. В `forced-colors` поверхности схлопываются, поэтому панель получает явную рамку `CanvasText`

Устройство

Тело панели

<div class="inst-panel-body inst-panel-body--list">…</div>

Класс	Когда
`inst-panel-body`	Умолчание: внутренний отступ, своя прокрутка
`inst-panel-body--flush`	Отступ снят — содержимое само знает про края (таблица, диф)
`inst-panel-body--list`	Для списка строк: отступ по вертикали, но не по горизонтали

Поведение

Панель — контейнер

Панель объявлена контейнером (container: panel / inline-size), поэтому компоненты внутри отвечают на её ширину. Одна и та же панель стоит и в узкой колонке инспектора, и во всю ширину дашборда.

/* Своё правило под узкую панель */
@container panel (inline-size < 20rem) {
  .my-thing { grid-template-columns: 1fr; }
}

Ширина к панели всегда приходит снаружи, поэтому объявлять её контейнером безопасно. Объявлять контейнером то, что получает ширину от содержимого, нельзя: container-type отключает интринсик по инлайновой оси и схлопнет элемент.

Всплывающее внутри панели

Поповер внутри панели обрежется. У панели overflow: hidden ради радиуса. Контракт библиотеки: всплывающее рисуется в верхнем слое — [popover] или портал, — а не внутри потока панели. Это же касается тултипа: в панели вместо него нужен поповер.

API

Классы
Имя	Что делает
класс
`inst-panel`	Область. Контейнер по инлайновой оси
`inst-panel-header`	Шапка: имя и действия
`inst-panel-title`	Имя области
`inst-panel-actions`	Действия в шапке, прижаты к концу
`inst-panel-body`	Тело с прокруткой
модификатор
`inst-panel-body--flush`	Без внутреннего отступа
`inst-panel-body--list`	Отступ только по вертикали
`inst-panel--plain`	Без обводки: границу держит один перепад поверхности. Для крупных областей

Токены
Имя	Значение	Откуда
токен
`--surface-raised`	`light-dark(var(--n-0), var(--n-12))`	база +1: тема
`--border`	`light-dark(oklch(0 0 0 / 0.12), oklch(1 0 0 / 0.11))`	одно на все ячейки
`--hairline`	`1px`	база +1: экран
`--radius-lg`	`12px`	база +4: масштаб
`--pad-panel`	`var(--space-5)`	база +14: плотность · масштаб
`--text-sm`	`0.875rem`	база +4: масштаб

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument