griffincss-ui 0.16.0

package/scss/_alert.scss

@@ -0,0 +1,90 @@
+// Griffincss UI — Alert
+// Сообщение о статусе: информация, успех, предупреждение, ошибка.
+//
+// Статус читается словом, а не только цветом. Цветная полоса не переживает
+// чёрно-белую печать, дальтонизм и монохромный режим высокого контраста —
+// слово переживает. Поэтому .gr-alert-title в разметке обязателен, а иконка
+// в слоте — третий, необязательный признак поверх цвета и текста.
+//
+// Роль объявляется разметкой: role="alert" для того, что требует немедленного
+// внимания, role="status" для остального. Модуль их не подменяет.
+//
+// Статус задаёт две переменные: --gr-alert-color красит слово и иконку,
+// --gr-alert-fill — полосу и подложку. У трёх статусов из четырёх они
+// совпадают. Расходятся у предупреждения: чтобы читаться текстом на белом,
+// его цвет обязан быть тёмно-коричневым, а полоса такого цвета не читается
+// как «внимание».
+
+@use 'sass:list';
+
+.gr-alert {
+  --gr-alert-color: var(--gr-color-info);
+  --gr-alert-fill: var(--gr-color-info);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: var(--gr-ui-gap);
+  padding: var(--gr-gap);
+  border: var(--gr-border-width) solid var(--gr-alert-fill);
+  border-inline-start-width: calc(var(--gr-border-width) * 4);
+  border-radius: var(--gr-radius);
+  background-color: color-mix(in srgb, var(--gr-alert-fill) 10%, var(--gr-color-bg));
+  color: var(--gr-color-text);
+  line-height: 1.5;
+}
+
+// Слово статуса. Цвет — тот, что безопасен для текста: у предупреждения
+// он темнее полосы, у остальных совпадает с ней. Само слово при этом
+// остаётся читаемым и вовсе без цвета — это и есть смысл требования.
+.gr-alert-title {
+  display: block;
+  margin: 0;
+  color: var(--gr-alert-color);
+  font-size: inherit;
+  font-weight: 600;
+}
+
+// Слот под иконку. Своих иконок библиотека не везёт: сюда кладут <svg>,
+// эмодзи или любой знак — размер и выравнивание задаёт слот.
+.gr-alert-icon {
+  flex: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  color: var(--gr-alert-color);
+  line-height: 1.25;
+  text-align: center;
+}
+
+// Текст забирает остаток строки, кнопка закрытия прижимается к концу.
+.gr-alert-body {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+// --- Статусы ----------------------------------------------------------------
+
+// Парами: цвет слова и иконки, цвет полосы и подложки.
+$gr-alert-statuses: (
+  info: (var(--gr-color-info), var(--gr-color-info)),
+  success: (var(--gr-color-success), var(--gr-color-success)),
+  warning: (var(--gr-color-warning), var(--gr-color-warning-surface)),
+  danger: (var(--gr-color-danger), var(--gr-color-danger))
+);
+
+@each $gr-name, $gr-value in $gr-alert-statuses {
+  .gr-alert-#{$gr-name} {
+    --gr-alert-color: #{list.nth($gr-value, 1)};
+    --gr-alert-fill: #{list.nth($gr-value, 2)};
+  }
+}
+
+// --- Закрытие ---------------------------------------------------------------
+
+// Отступ под кнопку закрытия. Сама кнопка — обычная .gr-btn-icon.gr-btn-ghost
+// в конце строки; закрывает её делегированный обработчик [data-gr-dismiss]
+// из griffincss-ui.js (волна 8b). Без скрипта кнопку просто не ставят —
+// сообщение остаётся на месте, а не превращается в мёртвый крестик.
+.gr-alert-dismissible {
+  padding-inline-end: calc(var(--gr-gap) * 0.5);
+}

package/scss/_avatar.scss

@@ -0,0 +1,90 @@
+// Griffincss UI — Avatar
+// Портрет пользователя: картинка, а если её нет — инициалы.
+//
+// Фолбэк не требует ни скрипта, ни второго элемента. Класс ставится
+// на контейнер с инициалами внутри, а <img> кладётся поверх и закрывает их
+// собой. Нет картинки — нет и перекрытия, инициалы остаются видны; битая
+// ссылка даёт тот же результат, потому что сломанный <img> ничего не рисует.
+
+.gr-avatar {
+  --gr-avatar-size: 2.5rem;
+
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--gr-avatar-size);
+  block-size: var(--gr-avatar-size);
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-color-surface-raised);
+  color: var(--gr-color-text-secondary);
+  font-size: calc(var(--gr-avatar-size) * 0.38);
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  user-select: none;
+  overflow: hidden;
+}
+
+// Картинка перекрывает инициалы целиком. object-fit: cover не даёт
+// непропорциональному портрету растянуться в овал.
+.gr-avatar img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+$gr-avatar-sizes: (
+  xs: 1.5rem,
+  sm: 2rem,
+  lg: 3rem,
+  xl: 4rem
+);
+
+@each $gr-name, $gr-size in $gr-avatar-sizes {
+  .gr-avatar-#{$gr-name} {
+    --gr-avatar-size: #{$gr-size};
+  }
+}
+
+// --- Форма ------------------------------------------------------------------
+
+// Скруглённый квадрат вместо круга — для логотипов и обложек,
+// которым круг срезает углы вместе со смыслом.
+.gr-avatar-square {
+  border-radius: var(--gr-radius);
+}
+
+// --- Стопка -----------------------------------------------------------------
+
+// Ряд с перекрытием: «и ещё пятеро». Кольцо цветом фона отделяет соседей
+// друг от друга — без него силуэты слипаются в одно пятно.
+.gr-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.gr-avatar-group > .gr-avatar {
+  box-shadow: 0 0 0 calc(var(--gr-border-width) * 2) var(--gr-color-bg);
+}
+
+.gr-avatar-group > .gr-avatar + .gr-avatar {
+  margin-inline-start: calc(var(--gr-avatar-size) * -0.3);
+}
+
+// В стопке каждый следующий аватар накрывает предыдущему край — так их
+// и рисует браузер по порядку разметки. Тот, на который навели или перешли
+// табом, поднимается наверх и показывается целиком.
+.gr-avatar-group > .gr-avatar:hover,
+.gr-avatar-group > .gr-avatar:focus-visible,
+.gr-avatar-group > .gr-avatar:focus-within {
+  position: relative;
+  z-index: 1;
+}

package/scss/_badge.scss

@@ -0,0 +1,162 @@
+// Griffincss UI — Badge
+// Мелкие маркеры: плашка статуса, тег с крестиком, точка-индикатор
+// и счётчик непрочитанного.
+//
+// Все четыре — строчные: стоят внутри строки текста, заголовка или кнопки
+// и не ломают её высоту. Кегль задан в em, а не в rem: плашка рядом
+// с заголовком должна быть крупнее, чем та же плашка в подписи.
+//
+// Статус задаёт три переменные, а не одну: --gr-badge-color для текста
+// и линии, --gr-badge-fill для заливки и --gr-badge-on-fill для чернил
+// на ней. У четырёх статусов из пяти первые две совпадают; расходятся они
+// только у предупреждения — его текстовый цвет в светлой теме обязан быть
+// тёмно-коричневым, чтобы читаться на белом, а точка или счётчик такого
+// цвета выглядят не предупреждением, а грязью.
+
+@use 'sass:list';
+
+.gr-badge {
+  --gr-badge-color: var(--gr-color-text-secondary);
+  --gr-badge-fill: var(--gr-color-text-secondary);
+  --gr-badge-on-fill: var(--gr-color-on-accent);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  padding-block: 0.125em;
+  padding-inline: 0.5em;
+  border: var(--gr-border-width) solid transparent;
+  border-radius: calc(var(--gr-radius) * 0.5);
+  background-color: color-mix(in srgb, var(--gr-badge-fill) 16%, var(--gr-color-bg));
+  color: var(--gr-badge-color);
+  font-size: 0.8125em;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+// Тройками: текст и линия, заливка, чернила на заливке.
+$gr-badge-statuses: (
+  accent: (var(--gr-color-accent), var(--gr-color-accent), var(--gr-color-on-accent)),
+  success: (var(--gr-color-success), var(--gr-color-success-surface), var(--gr-color-on-success)),
+  warning: (var(--gr-color-warning), var(--gr-color-warning-surface), var(--gr-color-on-warning)),
+  danger: (var(--gr-color-danger), var(--gr-color-danger-surface), var(--gr-color-on-danger)),
+  info: (var(--gr-color-info), var(--gr-color-info-surface), var(--gr-color-on-info))
+);
+
+@each $gr-name, $gr-value in $gr-badge-statuses {
+  .gr-badge-#{$gr-name} {
+    --gr-badge-color: #{list.nth($gr-value, 1)};
+    --gr-badge-fill: #{list.nth($gr-value, 2)};
+    --gr-badge-on-fill: #{list.nth($gr-value, 3)};
+  }
+}
+
+// Скруглённая до полукруга — под счётчики и короткие метки.
+.gr-badge-pill {
+  padding-inline: 0.6em;
+  border-radius: var(--gr-radius-pill);
+}
+
+// Контурная: фон уходит, остаётся линия. Полезна поверх цветной подложки,
+// где заливка плашки слилась бы с фоном.
+.gr-badge-outline {
+  border-color: currentcolor;
+  background-color: transparent;
+}
+
+// --- Счётчик ----------------------------------------------------------------
+
+// Круг с числом. min-inline-size равна высоте, поэтому одна цифра даёт круг,
+// а три — вытянутую пилюлю, и обе версии остаются одного роста.
+//
+// Здесь цвет статуса работает заливкой, а не текстом, поэтому берётся
+// --gr-badge-fill, и чернила — соответствующие ему.
+.gr-badge-count {
+  justify-content: center;
+  min-inline-size: 1.6em;
+  padding-inline: 0.4em;
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-badge-fill);
+  color: var(--gr-badge-on-fill);
+  font-variant-numeric: tabular-nums;
+}
+
+// --- Тег --------------------------------------------------------------------
+
+// Плашка, которую можно снять: тот же корпус, но с местом под крестик.
+// Крестик — обычная кнопка внутри; закрытие делает [data-gr-dismiss]
+// из griffincss-ui.js (волна 8b).
+.gr-tag {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  padding-block: 0.125em;
+  padding-inline: 0.5em;
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: calc(var(--gr-radius) * 0.5);
+  background-color: var(--gr-color-surface-raised);
+  color: var(--gr-color-text);
+  font-size: 0.875em;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.gr-tag-remove {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.2em;
+  block-size: 1.2em;
+  padding: 0;
+  border: 0;
+  border-radius: var(--gr-radius-pill);
+  background-color: transparent;
+  color: var(--gr-color-text-secondary);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .gr-tag-remove:hover {
+    background-color: var(--gr-color-border);
+    color: var(--gr-color-text);
+  }
+}
+
+.gr-tag-remove:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 1px;
+}
+
+// --- Точка ------------------------------------------------------------------
+
+// Индикатор состояния без текста. Сам по себе он ничего не сообщает
+// скринридеру, поэтому в разметке рядом обязана стоять подпись —
+// хотя бы .gr-sr-only из griffincss-utils.
+//
+// Точка — чистая заливка, текста на ней нет, поэтому цвет берётся
+// из --gr-badge-fill, а не из --gr-badge-color.
+.gr-dot {
+  --gr-badge-fill: var(--gr-color-text-secondary);
+
+  display: inline-block;
+  inline-size: 0.6em;
+  block-size: 0.6em;
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-badge-fill);
+  vertical-align: middle;
+}
+
+@each $gr-name, $gr-value in $gr-badge-statuses {
+  .gr-dot-#{$gr-name} {
+    --gr-badge-fill: #{list.nth($gr-value, 2)};
+  }
+}

package/scss/_breadcrumb.scss

@@ -0,0 +1,86 @@
+// Griffincss UI — Breadcrumb
+// Путь до текущей страницы. Разметка — <nav aria-label="Хлебные крошки">
+// со списком <ol>: порядок здесь значащий, и нумерованный список сообщает
+// об этом программе чтения с экрана.
+//
+// Разделитель рисует ::before у каждого пункта, кроме первого. Он объявлен
+// декоративным (aria-hidden не нужен — сгенерированное содержимое в дерево
+// доступности не попадает у современных движков), поэтому путь читается
+// вслух как «Главная, Каталог, Товар», а не «Главная слэш Каталог».
+//
+// Символ разделителя — переменная --gr-breadcrumb-sep: её меняют на месте,
+// не переписывая правило.
+
+.gr-breadcrumb {
+  --gr-breadcrumb-sep: "/";
+
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  margin: 0;
+  padding: 0;
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  list-style: none;
+}
+
+// Пункт находится и по <li>, и по классу: список может быть развёрнут
+// в <nav> со ссылками подряд, без обёрток.
+.gr-breadcrumb > :where(li, .gr-breadcrumb-item) {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-breadcrumb > :where(li, .gr-breadcrumb-item) + :where(li, .gr-breadcrumb-item)::before {
+  content: var(--gr-breadcrumb-sep);
+  color: var(--gr-color-text-muted);
+}
+
+.gr-breadcrumb a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .gr-breadcrumb a:hover {
+    color: var(--gr-color-link-hover);
+    text-decoration-line: underline;
+  }
+}
+
+.gr-breadcrumb a:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+  border-radius: calc(var(--gr-radius) * 0.5);
+}
+
+// Последний пункт — сама страница. Ссылкой он не бывает: вести ему некуда,
+// поэтому в разметке это текст с aria-current="page", а здесь — цвет
+// и вес, отличающие конец пути от его середины.
+.gr-breadcrumb [aria-current="page"] {
+  color: var(--gr-color-text);
+  font-weight: 600;
+}
+
+// --- Свёрнутый путь ---------------------------------------------------------
+
+// Длинный путь на узком экране: середина уезжает в горизонтальную прокрутку,
+// а не переносится на три строки. Первый и последний пункты при этом
+// остаются на виду.
+.gr-breadcrumb-scroll {
+  flex-wrap: nowrap;
+  overflow: auto hidden;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+
+.gr-breadcrumb-scroll > :where(li, .gr-breadcrumb-item) {
+  flex: none;
+}

package/scss/_button.scss

@@ -0,0 +1,216 @@
+// Griffincss UI — Button
+// Кнопка и её варианты. Класс ставится на любой элемент: <button>, <a>,
+// <input type="submit"> — оформление одинаковое, семантику выбирает разметка.
+//
+// Ресет опционален, поэтому компонент не рассчитывает на него: box-sizing,
+// font-family и обнуление полей задаются здесь.
+//
+// Цвета варианта живут в трёх локальных переменных — --gr-btn-bg, --gr-btn-fg,
+// --gr-btn-border. Благодаря этому правила :hover и :active написаны один раз
+// на все девять вариантов: они подмешивают к фону варианта его же цвет текста,
+// а насколько это темнее или светлее — решает действующая тема.
+
+@use 'sass:list';
+
+.gr-btn {
+  --gr-btn-height: var(--gr-control-height);
+  --gr-btn-bg: var(--gr-color-surface-raised);
+  --gr-btn-fg: var(--gr-color-text);
+  --gr-btn-border: var(--gr-color-border);
+  --gr-btn-bg-hover: color-mix(in srgb, var(--gr-btn-bg) 88%, var(--gr-btn-fg));
+  --gr-btn-bg-active: color-mix(in srgb, var(--gr-btn-bg) 76%, var(--gr-btn-fg));
+
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gr-ui-gap);
+  min-block-size: var(--gr-btn-height);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--gr-control-padding-x);
+  border: var(--gr-border-width) solid var(--gr-btn-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-btn-bg);
+  color: var(--gr-btn-fg);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  transition:
+    background-color var(--gr-transition),
+    border-color var(--gr-transition),
+    color var(--gr-transition);
+}
+
+// Наведение — только там, где указатель есть на самом деле: на сенсорном
+// экране :hover залипает после тапа и кнопка остаётся подсвеченной.
+@media (hover: hover) {
+  .gr-btn:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--gr-btn-bg-hover);
+  }
+}
+
+.gr-btn:active:not(:disabled, [aria-disabled="true"]) {
+  background-color: var(--gr-btn-bg-active);
+}
+
+.gr-btn:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+// aria-disabled оформляется наравне с :disabled: на <a> атрибута disabled
+// не существует, а недоступная ссылка выглядеть должна так же.
+.gr-btn:disabled,
+.gr-btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+// Ожидание. Кольцо загрузки приедет с модулем _spinner (волна 8c);
+// здесь — то, что видно и без него: курсор и приглушение.
+.gr-btn[aria-busy="true"] {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+// --- Варианты ---------------------------------------------------------------
+
+// Заливка. Парами: цвет заливки и чернила НА ней. Общего токена чернил
+// у статусов нет намеренно — он был, и это ломалось: стоило оси оформления
+// перекрасить акцент под свою пастель, как чернила акцента уезжали
+// на зелёную и красную кнопки. Своя пара у каждого статуса позволяет стилю
+// сделать заливку светлее, а чернила — темнее, не спрашивая у соседей.
+//
+// Предупреждение больше не исключение, а обычный член этого списка: его
+// текстовый цвет в светлой теме тёмно-коричневый (иначе не читался бы
+// текстом на белом), а прямоугольник такого цвета читается как «оливковый»,
+// а не как «внимание». Ровно та же развилка теперь описана у всех четырёх.
+$gr-btn-filled: (
+  primary: (var(--gr-color-accent), var(--gr-color-on-accent)),
+  success: (var(--gr-color-success-surface), var(--gr-color-on-success)),
+  warning: (var(--gr-color-warning-surface), var(--gr-color-on-warning)),
+  danger: (var(--gr-color-danger-surface), var(--gr-color-on-danger)),
+  info: (var(--gr-color-info-surface), var(--gr-color-on-info))
+);
+
+@each $gr-name, $gr-pair in $gr-btn-filled {
+  .gr-btn-#{$gr-name} {
+    --gr-btn-bg: #{list.nth($gr-pair, 1)};
+    --gr-btn-fg: #{list.nth($gr-pair, 2)};
+    --gr-btn-border: #{list.nth($gr-pair, 1)};
+  }
+}
+
+// Контурная: акцент линией и текстом, фон появляется при наведении.
+.gr-btn-secondary {
+  --gr-btn-bg: transparent;
+  --gr-btn-fg: var(--gr-color-accent);
+  --gr-btn-border: var(--gr-color-accent);
+}
+
+// Без фона и границы. Граница остаётся объявленной прозрачной, иначе кнопка
+// прыгала бы на пиксель рядом с обычной в одном ряду.
+.gr-btn-ghost {
+  --gr-btn-bg: transparent;
+  --gr-btn-fg: var(--gr-color-text);
+  --gr-btn-border: transparent;
+}
+
+// Кнопка, выглядящая ссылкой. Подсветки фона у неё нет — меняется цвет,
+// как у настоящей ссылки.
+.gr-btn-link {
+  --gr-btn-bg: transparent;
+  --gr-btn-fg: var(--gr-color-link);
+  --gr-btn-border: transparent;
+  --gr-btn-bg-hover: transparent;
+  --gr-btn-bg-active: transparent;
+
+  padding-inline: 0;
+
+  // Линия объявлена длинными свойствами и берёт толщину у шрифта — та же
+  // линия, что у .gr-link. Сокращённое text-decoration сбросило бы
+  // text-decoration-thickness в initial, и подчёркивание кнопки-ссылки
+  // не совпадало бы с подчёркиванием настоящей ссылки рядом.
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+}
+
+@media (hover: hover) {
+  .gr-btn-link:hover:not(:disabled, [aria-disabled="true"]) {
+    --gr-btn-fg: var(--gr-color-link-hover);
+  }
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+.gr-btn-sm {
+  --gr-btn-height: var(--gr-control-height-sm);
+
+  padding-inline: calc(var(--gr-control-padding-x) * 0.7);
+  font-size: 0.875rem;
+}
+
+.gr-btn-lg {
+  --gr-btn-height: var(--gr-control-height-lg);
+
+  padding-inline: calc(var(--gr-control-padding-x) * 1.4);
+  font-size: 1.125rem;
+}
+
+// --- Форма ------------------------------------------------------------------
+
+// Во всю ширину родителя. display меняется на flex: inline-flex шириной
+// в 100% всё равно оставил бы за собой строку.
+.gr-btn-block {
+  display: flex;
+  inline-size: 100%;
+}
+
+// Квадратная — под одну иконку. Ширина берётся из той же переменной,
+// что и высота, поэтому .gr-btn-icon.gr-btn-lg остаётся квадратом.
+.gr-btn-icon {
+  min-inline-size: var(--gr-btn-height);
+  padding-inline: 0;
+}
+
+// --- Группа -----------------------------------------------------------------
+
+// Слипшийся ряд. Соседние границы наезжают друг на друга на свою толщину,
+// иначе на стыке получилась бы двойная линия.
+.gr-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.gr-btn-group > .gr-btn {
+  border-radius: 0;
+}
+
+.gr-btn-group > .gr-btn:first-child {
+  border-start-start-radius: var(--gr-radius);
+  border-end-start-radius: var(--gr-radius);
+}
+
+.gr-btn-group > .gr-btn:last-child {
+  border-start-end-radius: var(--gr-radius);
+  border-end-end-radius: var(--gr-radius);
+}
+
+.gr-btn-group > .gr-btn + .gr-btn {
+  margin-inline-start: calc(-1 * var(--gr-border-width));
+}
+
+// Активная кнопка поднимается над соседями: иначе её граница и контур фокуса
+// оказались бы наполовину закрыты следующей кнопкой ряда.
+.gr-btn-group > .gr-btn:hover,
+.gr-btn-group > .gr-btn:focus-visible {
+  position: relative;
+  z-index: 1;
+}