griffincss-ui 0.16.0

package/scss/_spinner.scss

@@ -0,0 +1,59 @@
+// Griffincss UI — Spinner
+// Кольцо занятости. Три четверти окружности серые, одна — акцентная;
+// вращается keyframe gr-spin.
+//
+//   <span class="gr-spinner" role="status" aria-label="Загрузка"></span>
+//
+// Роль и подпись — в разметке: пустой <span> без них молчит для программы
+// чтения с экрана, и человек, который не видит кольца, не узнаёт, что
+// страница чего-то ждёт. Если рядом уже стоит видимое слово «Загрузка»,
+// кольцу достаточно aria-hidden="true".
+//
+// Диаметр и толщина заданы в em, а не в rem: кольцо внутри кнопки должно
+// быть по её кеглю, а не по корневому, — иначе в маленькой кнопке оно
+// не помещается, а в крупной теряется.
+
+.gr-spinner {
+  --gr-spinner-size: 1.5em;
+  --gr-spinner-thickness: 0.15em;
+  --gr-spinner-track: color-mix(in srgb, currentcolor 20%, transparent);
+  --gr-spinner-color: var(--gr-color-accent);
+
+  display: inline-block;
+  box-sizing: border-box;
+  inline-size: var(--gr-spinner-size);
+  block-size: var(--gr-spinner-size);
+  border: var(--gr-spinner-thickness) solid var(--gr-spinner-track);
+
+  // Акцентной оставлена одна сторона: без разрыва в кольце вращение
+  // не читалось бы вовсе — равномерный круг выглядит неподвижным.
+  border-block-start-color: var(--gr-spinner-color);
+  border-radius: var(--gr-radius-pill);
+  vertical-align: middle;
+  animation: gr-spin 0.8s linear infinite;
+}
+
+.gr-spinner-sm {
+  --gr-spinner-size: 1em;
+  --gr-spinner-thickness: 0.12em;
+}
+
+.gr-spinner-lg {
+  --gr-spinner-size: 2.5em;
+  --gr-spinner-thickness: 0.18em;
+}
+
+// Кольцо на цветной кнопке: дорожка и стрелка берут цвет её текста,
+// иначе акцентное кольцо на акцентной заливке сливается с ней.
+.gr-spinner-current {
+  --gr-spinner-color: currentcolor;
+}
+
+// Вращение по настройке уменьшенной анимации замедляется, но не снимается.
+// Остановленный индикатор занятости сообщает «зависло» — ровно обратное
+// тому, зачем он поставлен.
+@media (prefers-reduced-motion: reduce) {
+  .gr-spinner {
+    animation-duration: 2.4s;
+  }
+}

package/scss/_steps.scss

@@ -0,0 +1,193 @@
+// Griffincss UI — Steps
+// Шаги процесса: оформление заказа, мастер настройки, ход проверки.
+// Разметка — <ol>: порядок здесь значащий, и нумерованный список сообщает
+// об этом программе чтения с экрана.
+//
+//   <ol class="gr-steps">
+//     <li class="gr-step gr-step-done">
+//       <span class="gr-step-marker" aria-hidden="true">✓</span>
+//       <span class="gr-step-label">Корзина</span>
+//     </li>
+//     <li class="gr-step" aria-current="step">
+//       <span class="gr-step-marker" aria-hidden="true">2</span>
+//       <span class="gr-step-label">Доставка</span>
+//       <span class="gr-step-note">Курьером до двери</span>
+//     </li>
+//   </ol>
+//
+// Состояний три: пройденный (.gr-step-done), текущий (aria-current="step")
+// и ожидающий — он же состояние по умолчанию. Текущий находится по тому же
+// признаку, по которому его находит программа чтения с экрана; класса
+// для него нет намеренно.
+//
+// Знак в маркере кладут в разметку: галочка у пройденного шага и номер
+// у остальных — это содержимое, а не оформление. Цвет остаётся вторым
+// признаком поверх знака и позиции, а не единственным.
+
+.gr-steps {
+  --gr-step-marker-size: 2rem;
+
+  display: flex;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Обёртка списка не должна ни добавлять полей, ни перебивать классы,
+// поставленные на сам <li>: :where() держит специфичность нулевой.
+.gr-steps > :where(li) {
+  display: flex;
+  flex: 1 1 0;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-step {
+  --gr-step-color: var(--gr-color-text-muted);
+  --gr-step-line: var(--gr-color-border);
+  --gr-step-marker-fg: var(--gr-color-text-muted);
+  --gr-step-marker-bg: var(--gr-color-bg);
+
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  min-inline-size: 0;
+  color: var(--gr-step-color);
+  text-align: center;
+}
+
+// Линия — хвост шага, ведущий к следующему, и залита она у пройденного:
+// «путь от этого шага дальше проделан». Принадлежность именно левому
+// (в колонке — верхнему) выбрана не ради вида, а потому, что только у него
+// длину линии считает сам CSS: низ его блока и есть верх промежутка,
+// а вот сколько текста висит под маркером ПРЕДЫДУЩЕГО шага, правило,
+// написанное на следующего, знать не может. Хвост, растущий вверх,
+// упирался бы в границу своего блока и не доставал до соседнего маркера —
+// ровно это и было видно в колонке.
+.gr-step::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc(var(--gr-step-marker-size) / 2);
+  inset-inline: 50% -50%;
+  block-size: var(--gr-border-width);
+  margin-block-start: calc(var(--gr-border-width) * -0.5);
+  background-color: var(--gr-step-line);
+}
+
+// У последнего шага линии нет: вести ей некуда. Класс .gr-step встречается
+// и на самом <li>, и на элементе внутри него — сняты оба случая.
+.gr-steps > :last-child .gr-step::after,
+.gr-steps > .gr-step:last-child::after {
+  content: none;
+}
+
+.gr-step-marker {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--gr-step-marker-size);
+  block-size: var(--gr-step-marker-size);
+  border: var(--gr-border-width) solid currentcolor;
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-step-marker-bg);
+  color: var(--gr-step-marker-fg);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.gr-step-label {
+  color: var(--gr-step-color);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.gr-step-note {
+  color: var(--gr-color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.35;
+}
+
+// --- Состояния --------------------------------------------------------------
+
+// Пройденный: его хвост залит акцентом — путь от него дальше проделан.
+.gr-step-done {
+  --gr-step-color: var(--gr-color-text);
+  --gr-step-line: var(--gr-color-accent);
+  --gr-step-marker-fg: var(--gr-color-accent);
+}
+
+// Текущий. Маркер залит, а не обведён: из трёх состояний это единственное,
+// которое нужно найти взглядом сразу. Хвост при этом остаётся серым —
+// он ведёт к тому, до чего ещё не дошли.
+.gr-step[aria-current] {
+  --gr-step-color: var(--gr-color-text);
+  --gr-step-marker-fg: var(--gr-color-on-accent);
+  --gr-step-marker-bg: var(--gr-color-accent);
+}
+
+.gr-step[aria-current] .gr-step-marker {
+  border-color: var(--gr-color-accent);
+}
+
+// Шаг, до которого не дошли и не дойдут: отменённый или пропущенный.
+.gr-step-disabled {
+  --gr-step-color: var(--gr-color-text-disabled);
+  --gr-step-marker-fg: var(--gr-color-text-disabled);
+}
+
+// --- Вертикальный вариант ---------------------------------------------------
+
+// Колонка: маркер слева, подпись справа. На узком экране это единственный
+// работающий вариант — горизонтальный ряд из четырёх шагов там нечитаем.
+.gr-steps-vertical {
+  flex-direction: column;
+  gap: var(--gr-gap);
+}
+
+.gr-steps-vertical > :where(li) {
+  flex: none;
+}
+
+.gr-steps-vertical .gr-step {
+  flex: none;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--gr-ui-gap);
+  text-align: start;
+}
+
+// В колонке хвост идёт вниз от маркера до маркера следующего шага. Длину
+// задают оба вылета сразу, а block-size: auto считает её из них: сколько бы
+// текста ни висело под маркером, линия дотянется — это и есть довод
+// в пользу хвоста, а не отрезка фиксированной длины.
+.gr-steps-vertical .gr-step::after {
+  inset-block: var(--gr-step-marker-size) calc(var(--gr-gap) * -1);
+  inset-inline: calc(var(--gr-step-marker-size) / 2) auto;
+  inline-size: var(--gr-border-width);
+  block-size: auto;
+  margin-block-start: 0;
+  margin-inline-start: calc(var(--gr-border-width) * -0.5);
+}
+
+// Подпись и пояснение встают в колонку: в строке они разъезжались бы
+// по базовой линии маркера.
+.gr-steps-vertical .gr-step-body {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--gr-ui-gap) * 0.25);
+  padding-block-start: calc((var(--gr-step-marker-size) - 1.3em) / 2);
+}

package/scss/_style-rules.scss

@@ -0,0 +1,75 @@
+// Griffincss UI — Структурные правила оси оформления
+// Здесь только то, что не выражается ручками: скругление, отступы, плотность
+// и цвета компонент берёт из токенов сам, и они действуют в любой сборке.
+//
+// Модуль отдельный, а не секции в модулях компонентов, по двум причинам сразу.
+// Правило проекта запрещает модулю селекторы по атрибуту, который стоит
+// на <html>: внутри @scope (.griffin) селектор неявно получает :scope в начало
+// и требует носитель атрибута внутри области. Поэтому griffincss-ui-scoped.scss
+// этот модуль не подключает — там ось действует на уровне токенов, которые
+// глобальны и объявлены вне области. Тем же приёмом обслужены @keyframes и тема.
+//
+// Правило, которое выражается ручкой, писать здесь нельзя: оно досталось бы
+// только компонентам, а ручка достаётся всей странице.
+
+@use 'griffincss-core/scss/style-config' as cfg;
+
+@if cfg.gr-style-enabled(strict) {
+  // Шапка карточки перестаёт быть подложкой и становится линией: строгий
+  // стиль разделяет пояса границей, а не заливкой.
+  [data-gr-style="strict"] .gr-card-header {
+    background-color: transparent;
+    font-weight: 500;
+  }
+
+  // Кнопка без подъёма: строгий стиль не приподнимает элементы управления
+  // над листом, он выстраивает их в одной плоскости.
+  [data-gr-style="strict"] .gr-btn {
+    box-shadow: none;
+    font-weight: 500;
+  }
+
+  // Шапка таблицы отличается начертанием, а не заливкой.
+  [data-gr-style="strict"] .gr-table th {
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+}
+
+@if cfg.gr-style-enabled(compact) {
+  // Плотные ячейки с разделителями строк: журнальный стиль отвечает
+  // за объём информации, и строку от строки отделяет линия, а не воздух.
+  [data-gr-style="compact"] .gr-table th,
+  [data-gr-style="compact"] .gr-table td {
+    padding-block: calc(var(--gr-gap) * 0.35);
+    border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+  }
+
+  [data-gr-style="compact"] .gr-card-header,
+  [data-gr-style="compact"] .gr-card-footer {
+    padding-block: calc(var(--gr-gap) * 0.5);
+  }
+
+  [data-gr-style="compact"] .gr-alert {
+    padding: calc(var(--gr-gap) * 0.6);
+  }
+
+  [data-gr-style="compact"] .gr-menu-item {
+    padding-block: calc(var(--gr-gap) * 0.3);
+  }
+}
+
+@if cfg.gr-style-enabled(airy) {
+  // Граница уступает тени: воздушный стиль отделяет карточку от фона
+  // мягким подъёмом, а не линией.
+  [data-gr-style="airy"] .gr-card {
+    border-color: transparent;
+    box-shadow: var(--gr-shadow-md);
+  }
+
+  // Отклик заметнее — это вторая половина «оживлённых анимаций»,
+  // первую даёт кривая в --gr-transition.
+  [data-gr-style="airy"] .gr-btn:active:not(:disabled, [aria-disabled="true"]) {
+    scale: 0.97;
+  }
+}

package/scss/_table.scss

@@ -0,0 +1,141 @@
+// Griffincss UI — Table
+// Таблица данных и обёртка для горизонтальной прокрутки.
+//
+// Селекторы по элементам внутри .gr-table: у таблицы разметка фиксирована
+// стандартом (thead / tbody / tr / th / td), придумывать ей классы нечего.
+//
+// Ресет опционален, поэтому border-collapse задаётся здесь: без него
+// у ячеек остались бы двойные линии и зазоры border-spacing.
+
+.gr-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  color: var(--gr-color-text);
+  text-align: start;
+}
+
+.gr-table th,
+.gr-table td {
+  padding-block: calc(var(--gr-gap) * 0.5);
+  padding-inline: calc(var(--gr-gap) * 0.75);
+  border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+  text-align: start;
+  vertical-align: top;
+}
+
+.gr-table th {
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.gr-table thead th {
+  border-block-end: calc(var(--gr-border-width) * 2) solid var(--gr-color-border-strong);
+}
+
+.gr-table tfoot td {
+  border-block-end: 0;
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.gr-table caption {
+  padding-block-end: calc(var(--gr-gap) * 0.5);
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+  text-align: start;
+}
+
+// --- Варианты ---------------------------------------------------------------
+
+// Чередование строк. nth-child(odd) считается по строкам тела, поэтому
+// полосы не сбиваются от шапки и подвала.
+//
+// Полупрозрачный оттенок собственного цвета текста, а не готовый
+// --gr-color-surface: таблица может лежать на чём угодно — на странице,
+// на карточке, на утопленной панели, — и любой непрозрачный цвет
+// совпадёт с одной из этих подложек и станет невидимым. Оттенок виден
+// на всех и меняет направление вместе с темой сам: в светлой currentcolor
+// тёмный, в тёмной — светлый.
+.gr-table-striped tbody tr:nth-child(odd) {
+  background-color: color-mix(in srgb, currentcolor 5%, transparent);
+}
+
+// Полная сетка: к горизонтальным линиям добавляются вертикальные
+// и внешняя рамка.
+.gr-table-bordered {
+  border: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+.gr-table-bordered th,
+.gr-table-bordered td {
+  border: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+.gr-table-compact th,
+.gr-table-compact td {
+  padding-block: calc(var(--gr-gap) * 0.25);
+  padding-inline: calc(var(--gr-gap) * 0.5);
+  font-size: 0.875rem;
+}
+
+// Обратное компактному: воздуха больше стандартного. Для таблиц из трёх
+// строк, где плотность не экономит ничего, а разреженность помогает читать.
+.gr-table-relaxed th,
+.gr-table-relaxed td {
+  padding-block: calc(var(--gr-gap) * 0.875);
+  padding-inline: calc(var(--gr-gap) * 1.25);
+}
+
+// Подсветка строки под указателем — только там, где указатель есть:
+// на сенсорном экране она залипала бы после касания.
+//
+// Слоем поверх фона строки (background-image), а не вместо него
+// (background-color). У полосы и подсветки одна специфичность — обе
+// «класс + tbody + tr + псевдокласс», — поэтому подсветка просто заменяла бы
+// полосу: на нечётной строке полосатой таблицы разница между 5 % и 9 %
+// почти не читается. Слой складывается с полосой, и шаг при наведении
+// одинаков на любой строке.
+//
+// Оттенок скромнее полосы вдвое меньше, чем можно было бы: подложка
+// у таблицы может быть какой угодно, а на белом фоне глаз замечает
+// одну и ту же разницу заметно резче, чем на сером.
+@media (hover: hover) {
+  .gr-table-hover tbody tr:hover {
+    background-image: linear-gradient(
+      color-mix(in srgb, currentcolor 6%, transparent),
+      color-mix(in srgb, currentcolor 6%, transparent)
+    );
+  }
+}
+
+// --- Прокрутка и липкая шапка -----------------------------------------------
+
+// Широкая таблица не сжимается ниже своего содержимого, поэтому без обёртки
+// вбок уезжала бы вся страница, а не одна таблица. Прокручиваемая область
+// объявлена tabindex="0" в разметке — иначе до неё не добраться с клавиатуры.
+.gr-table-wrap {
+  inline-size: 100%;
+  max-block-size: 100%;
+  overflow: auto;
+  overscroll-behavior-x: contain;
+}
+
+// Шапка остаётся видна при прокрутке тела. Работает внутри .gr-table-wrap
+// с заданной высотой; собственный фон обязателен — без него сквозь ячейки
+// просвечивали бы уезжающие строки.
+//
+// Линию под шапкой рисует внутренняя тень, а не граница. При
+// border-collapse: collapse границу между ячейками рисует таблица, а не сама
+// ячейка, и с уехавшей липкой шапкой она не двигается — линия оставалась
+// на исходном месте и пропадала из виду. Тень принадлежит элементу
+// и едет вместе с ним.
+.gr-table-sticky thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  border-block-end: 0;
+  background-color: var(--gr-color-bg);
+  box-shadow: inset 0 calc(-2 * var(--gr-border-width)) 0 var(--gr-color-border-strong);
+}

package/scss/_tabs.scss

@@ -0,0 +1,166 @@
+// Griffincss UI — Tabs
+// Вкладки. Без скрипта это разметка из ссылок-якорей и подряд идущих
+// секций: страница остаётся читаемой и печатается целиком. Со скриптом
+// (griffincss-ui.js) появляются role="tablist", стрелки, Home/End
+// и roving tabindex, а неактивные панели прячутся атрибутом hidden.
+//
+// Панель скрывает платформа, не библиотека: [hidden] убирает её и с экрана,
+// и из дерева доступности. Правила display: none в модуле нет — оно бы
+// сделало панель невидимой и для программы чтения с экрана, но оставило бы
+// в порядке обхода.
+
+.gr-tabs {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+// Ряд заголовков. Прокручивается вбок, когда вкладок больше, чем помещается:
+// перенос на вторую строку разорвал бы линию, по которой ряд читается.
+//
+// Линия под рядом нарисована внутренней тенью, а не границей. Причина
+// в том, как линия сочетается с активной вкладкой: граница ряда лежит
+// снаружи его содержимого, и чтобы линия вкладки её перекрыла, вкладку
+// пришлось бы подтягивать вниз отрицательным полем — а ряд прокручивается,
+// и всё, что вылезло за его край, обрезается. Внутренняя тень рисуется
+// в тех же пикселях, что и нижняя граница вкладки, поэтому вкладка
+// перекрывает её просто тем, что нарисована позже.
+.gr-tablist {
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  margin: 0;
+  padding: 0;
+  box-shadow: inset 0 calc(-1 * var(--gr-border-width)) 0 0 var(--gr-color-border);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  list-style: none;
+}
+
+// Ряд на <ul>: обёртки <li> не должны ни добавлять полей, ни ломать
+// растяжение вкладки по высоте ряда.
+.gr-tablist > :where(li) {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-tab {
+  --gr-tab-fg: var(--gr-color-text-secondary);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: none;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  min-block-size: var(--gr-control-height);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--gr-control-padding-x);
+  border: 0;
+
+  // Линия объявлена прозрачной у всех вкладок сразу: появись она только
+  // у активной, ряд подпрыгивал бы на её толщину при переключении.
+  border-block-end: calc(var(--gr-border-width) * 2) solid transparent;
+  background-color: transparent;
+  color: var(--gr-tab-fg);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  line-height: 1.2;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// Подсветка наведения не касается выбранной вкладки: у правила с :hover
+// специфичность заведомо выше, чем у правила состояния, и серая линия
+// подсветки гасила бы акцентную линию выбора ровно в тот момент, когда
+// на неё навели. Оба признака выбора перечислены в :not() — специфичность
+// от этого не растёт: она берётся по самому весомому аргументу.
+@media (hover: hover) {
+  .gr-tab:hover:not([aria-selected="true"], [aria-current], [aria-disabled="true"], :disabled) {
+    --gr-tab-fg: var(--gr-color-text);
+
+    border-block-end-color: var(--gr-color-border-strong);
+  }
+}
+
+// Контур смещён внутрь: у вкладки нет своих полей сверху, и внешний
+// контур срезался бы прокруткой ряда.
+.gr-tab:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: calc(-1 * var(--gr-focus-width));
+}
+
+// Активная вкладка. Три признака сразу: цвет, вес и линия — по одной линии
+// её видно и в чёрно-белой печати. aria-current — для варианта со ссылками,
+// aria-selected — для варианта со скриптом.
+.gr-tab[aria-selected="true"],
+.gr-tab[aria-current] {
+  --gr-tab-fg: var(--gr-color-accent);
+
+  border-block-end-color: var(--gr-color-accent);
+  font-weight: 600;
+}
+
+.gr-tab:disabled,
+.gr-tab[aria-disabled="true"] {
+  --gr-tab-fg: var(--gr-color-text-disabled);
+
+  cursor: not-allowed;
+}
+
+.gr-tab-panel {
+  box-sizing: border-box;
+  padding-block: var(--gr-gap);
+}
+
+// Панель получает фокус от скрипта (tabindex="0"), чтобы после стрелок
+// клавиатура оказывалась в содержимом вкладки, а не в конце страницы.
+.gr-tab-panel:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: calc(-1 * var(--gr-focus-width));
+}
+
+// --- Варианты ---------------------------------------------------------------
+
+// Клавишами: активная вкладка выделена заливкой, а не линией. Годится
+// для переключателей внутри карточки, где линия спорила бы с её границей.
+.gr-tabs-pills .gr-tablist {
+  box-shadow: none;
+}
+
+.gr-tabs-pills .gr-tab {
+  min-block-size: var(--gr-control-height-sm);
+  border-block-end: 0;
+  border-radius: var(--gr-radius);
+}
+
+@media (hover: hover) {
+  .gr-tabs-pills .gr-tab:hover:not([aria-selected="true"], [aria-current], [aria-disabled="true"], :disabled) {
+    background-color: color-mix(in srgb, currentcolor 8%, transparent);
+  }
+}
+
+.gr-tabs-pills .gr-tab[aria-selected="true"],
+.gr-tabs-pills .gr-tab[aria-current] {
+  background-color: var(--gr-color-accent);
+  color: var(--gr-color-on-accent);
+}
+
+// Ряд во всю ширину: вкладки делят её поровну. Для двух-трёх коротких
+// заголовков — на узком экране это удобнее прокрутки.
+.gr-tabs-stretch .gr-tablist {
+  overflow-x: visible;
+}
+
+.gr-tabs-stretch .gr-tab {
+  flex: 1 1 0;
+  justify-content: center;
+  min-inline-size: 0;
+  padding-inline: calc(var(--gr-control-padding-x) * 0.5);
+  white-space: normal;
+}