griffincss-ui 0.16.0

package/scss/_nav.scss

@@ -0,0 +1,233 @@
+// Griffincss UI — Nav
+// Навигация: ряд ссылок, шапка сайта и её сворачивание на узком экране.
+//
+// Класс ставится на любую разметку: <nav> со ссылками, <ul> со списком —
+// список обнуляется здесь же, потому что ресет опционален.
+//
+// Активный пункт помечается в разметке атрибутом aria-current="page",
+// а не отдельным классом: тот же признак, по которому пункт находит
+// программа чтения с экрана, красит его и на экране. Класс без атрибута
+// подсветил бы пункт только зрячему.
+
+@use 'sass:map';
+@use 'griffincss-core/scss/breakpoints' as bp;
+
+// Экран, с которого шапка перестаёт сворачиваться.
+$gr-nav-expand: map.get(bp.$gr-breakpoints, md);
+
+// --- Ряд ссылок -------------------------------------------------------------
+
+.gr-nav {
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Ряд на <ul>: обёртка <li> не должна ни добавлять полей, ни мешать пункту
+// растянуться по ширине колонки. :where() держит специфичность нулевой,
+// чтобы класс на самом <li> оставался сильнее.
+.gr-nav > :where(li) {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-nav-vertical > :where(li) {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+// Вертикальная — боковое меню раздела. Пункты растянуты по ширине колонки,
+// иначе подсветка активного обрывалась бы по длине слова.
+.gr-nav-vertical {
+  flex-flow: column nowrap;
+  align-items: stretch;
+}
+
+.gr-nav-link {
+  --gr-nav-fg: var(--gr-color-text-secondary);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  min-block-size: var(--gr-control-height-sm);
+  padding-block: 0;
+  padding-inline: calc(var(--gr-control-padding-x) * 0.75);
+  border: 0;
+  border-radius: var(--gr-radius);
+  background-color: transparent;
+  color: var(--gr-nav-fg);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  line-height: 1.2;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// Текущий пункт из подсветки исключён: правило с :hover весомее правила
+// состояния, и наведение гасило бы акцентную подложку текущего раздела.
+@media (hover: hover) {
+  .gr-nav-link:hover:not([aria-current], [aria-disabled="true"]) {
+    --gr-nav-fg: var(--gr-color-text);
+
+    background-color: color-mix(in srgb, currentcolor 8%, transparent);
+  }
+}
+
+.gr-nav-link:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+// Текущий раздел. Цвет — не единственный признак: у активного пункта
+// ещё и подложка, а вес шрифта тяжелее, поэтому он находится и на
+// чёрно-белой печати.
+.gr-nav-link[aria-current] {
+  --gr-nav-fg: var(--gr-color-accent);
+
+  background-color: color-mix(in srgb, var(--gr-color-accent) 12%, transparent);
+  font-weight: 600;
+}
+
+.gr-nav-link[aria-disabled="true"] {
+  color: var(--gr-color-text-disabled);
+  cursor: not-allowed;
+}
+
+// --- Подсветка линией -------------------------------------------------------
+
+// Вариант без подложки: активный пункт подчёркнут. Линия объявлена
+// прозрачной у всех пунктов сразу — иначе ряд подпрыгивал бы на её толщину
+// в момент, когда пункт становится текущим.
+.gr-nav-underline .gr-nav-link {
+  border-block-end: calc(var(--gr-border-width) * 2) solid transparent;
+  border-radius: 0;
+}
+
+.gr-nav-underline .gr-nav-link[aria-current] {
+  border-block-end-color: var(--gr-color-accent);
+  background-color: transparent;
+}
+
+@media (hover: hover) {
+  .gr-nav-underline .gr-nav-link:hover:not([aria-current], [aria-disabled="true"]) {
+    border-block-end-color: var(--gr-color-border-strong);
+    background-color: transparent;
+  }
+}
+
+// Вертикальная разновидность того же варианта отбивает линией начало строки,
+// а не низ: подчёркивание в столбце читалось бы как разделитель пунктов.
+.gr-nav-underline.gr-nav-vertical .gr-nav-link {
+  border-block-end: 0;
+  border-inline-start: calc(var(--gr-border-width) * 2) solid transparent;
+}
+
+.gr-nav-underline.gr-nav-vertical .gr-nav-link[aria-current] {
+  border-inline-start-color: var(--gr-color-accent);
+}
+
+// --- Шапка ------------------------------------------------------------------
+
+.gr-navbar {
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  padding-block: calc(var(--gr-gap) * 0.5);
+  padding-inline: var(--gr-gap);
+  border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+  background-color: var(--gr-color-surface);
+  color: var(--gr-color-text);
+}
+
+// Название сайта. Забирает остаток строки, поэтому навигация и кнопки
+// прижимаются к её концу без единой утилиты.
+.gr-navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  margin-inline-end: auto;
+  color: var(--gr-color-text);
+  font-size: 1.125rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+// --- Сворачивание на узком экране -------------------------------------------
+
+// Переключатель — <details>, но навигация лежит не внутри него, а следующим
+// соседом: содержимое <details> скрывается самим браузером, и на широком
+// экране раскрыть его без скрипта или ::details-content нельзя. Соседом же
+// управляет обычный селектор, и медиазапрос отменяет сворачивание целиком.
+//
+//   <div class="gr-navbar">
+//     <a class="gr-navbar-brand" href="/">Сайт</a>
+//     <details class="gr-nav-toggle"><summary>Меню</summary></details>
+//     <nav class="gr-nav gr-nav-collapse">…</nav>
+//   </div>
+.gr-nav-toggle > summary {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--gr-control-height);
+  min-block-size: var(--gr-control-height);
+  padding-inline: calc(var(--gr-control-padding-x) * 0.5);
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  color: var(--gr-color-text);
+  font-size: var(--gr-control-font-size);
+  list-style: none;
+  cursor: pointer;
+}
+
+// Родной треугольник снимается в обоих движках: в WebKit — своим
+// псевдоэлементом, в остальных — через list-style выше.
+.gr-nav-toggle > summary::-webkit-details-marker {
+  display: none;
+}
+
+.gr-nav-toggle > summary:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+// Свёрнутая навигация занимает всю строку под шапкой, а не втискивается
+// в её ряд: пункты должны читаться столбцом, как в боковом меню.
+.gr-nav-collapse {
+  display: none;
+  flex-basis: 100%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+// Общий сосед, а не следующий: между переключателем и навигацией в шапке
+// может стоять что угодно — поиск, кнопка входа, — и раскрытие не должно
+// от этого ломаться.
+.gr-nav-toggle[open] ~ .gr-nav-collapse {
+  display: flex;
+}
+
+// Со средних экранов сворачивания нет вовсе: кнопка убирается, навигация
+// возвращается в строку шапки независимо от того, открыт <details> или нет.
+@media (width >= $gr-nav-expand) {
+  .gr-nav-toggle {
+    display: none;
+  }
+
+  .gr-nav-collapse {
+    display: flex;
+    flex-basis: auto;
+    flex-direction: row;
+    align-items: center;
+  }
+}

package/scss/_pagination.scss

@@ -0,0 +1,142 @@
+// Griffincss UI — Pagination
+// Постраничная навигация. Разметка — <nav aria-label="Страницы"> со списком
+// ссылок: каждая страница обязана быть настоящей ссылкой с href, иначе она
+// не откроется в новой вкладке и не попадёт в историю.
+//
+// Текущая страница помечается aria-current="page" — тем же атрибутом, что
+// и активный пункт навигации. Кнопка «дальше» на последней странице
+// получает aria-disabled="true" и остаётся в порядке обхода: исчезнувшая
+// кнопка сбивает счёт нажатий Tab, приглушённая — нет.
+
+.gr-pagination {
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Ряд на <ul>: обёртка <li> не приносит с собой ни полей, ни маркера.
+// :where() оставляет специфичность нулевой — класс на самом <li> сильнее.
+.gr-pagination > :where(li) {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-page {
+  --gr-page-size: var(--gr-control-height);
+  --gr-page-fg: var(--gr-color-text);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--gr-page-size);
+  min-block-size: var(--gr-page-size);
+  padding-inline: calc(var(--gr-control-padding-x) * 0.5);
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface);
+  color: var(--gr-page-fg);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .gr-page:hover:not([aria-current], [aria-disabled="true"], :disabled) {
+    border-color: var(--gr-color-border-strong);
+    background-color: var(--gr-color-surface-raised);
+  }
+}
+
+.gr-page:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+// Текущая страница. Заливка, а не только цвет текста: в ряду одинаковых
+// цифр разница в оттенке замечается хуже, чем разница в весе пятна.
+.gr-page[aria-current] {
+  border-color: var(--gr-color-accent);
+  background-color: var(--gr-color-accent);
+  color: var(--gr-color-on-accent);
+  font-weight: 600;
+  cursor: default;
+}
+
+.gr-page[aria-disabled="true"],
+.gr-page:disabled {
+  color: var(--gr-color-text-disabled);
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+// Пропуск страниц. Не ссылка и не кнопка — знак того, что ряд прерван,
+// поэтому у него нет ни рамки, ни фона, ни курсора указателя.
+.gr-page-gap {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  min-inline-size: calc(var(--gr-control-height) * 0.75);
+  min-block-size: var(--gr-control-height);
+  color: var(--gr-color-text-muted);
+  user-select: none;
+}
+
+// --- Размеры и варианты -----------------------------------------------------
+
+// Компактный ряд — для подвала таблицы, где строка и без того плотная.
+.gr-pagination-compact .gr-page {
+  --gr-page-size: var(--gr-control-height-sm);
+
+  font-size: 0.875rem;
+}
+
+.gr-pagination-compact .gr-page-gap {
+  min-block-size: var(--gr-control-height-sm);
+}
+
+// Слипшийся ряд — одна лента вместо отдельных клавиш. Соседние границы
+// наезжают друг на друга на свою толщину, иначе на стыке была бы двойная
+// линия; приём тот же, что у .gr-btn-group.
+.gr-pagination-joined {
+  gap: 0;
+}
+
+.gr-pagination-joined .gr-page {
+  border-radius: 0;
+}
+
+.gr-pagination-joined > :first-child .gr-page,
+.gr-pagination-joined > .gr-page:first-child {
+  border-start-start-radius: var(--gr-radius);
+  border-end-start-radius: var(--gr-radius);
+}
+
+.gr-pagination-joined > :last-child .gr-page,
+.gr-pagination-joined > .gr-page:last-child {
+  border-start-end-radius: var(--gr-radius);
+  border-end-end-radius: var(--gr-radius);
+}
+
+.gr-pagination-joined .gr-page + .gr-page,
+.gr-pagination-joined > :where(* + *) .gr-page {
+  margin-inline-start: calc(-1 * var(--gr-border-width));
+}
+
+// Активная клавиша поднимается над соседями: иначе её граница и контур
+// фокуса оказались бы наполовину закрыты следующей.
+.gr-pagination-joined .gr-page:focus-visible,
+.gr-pagination-joined .gr-page[aria-current] {
+  position: relative;
+  z-index: 1;
+}

package/scss/_progress.scss

@@ -0,0 +1,188 @@
+// Griffincss UI — Progress
+// Полоса выполнения на <progress> и шкала на <meter>. Значение показывает
+// сам элемент — классу остаётся снять системную отрисовку и покрасить
+// дорожку и заполнение.
+//
+//   <progress class="gr-progress" value="40" max="100">40 %</progress>
+//   <meter class="gr-meter" value="0.7" low="0.3" high="0.8" optimum="1">70 %</meter>
+//
+// Текст внутри элемента — не подпись, а запасной путь для движка, который
+// <progress> не знает вовсе; видимую подпись ставят рядом.
+//
+// Вендорные псевдоэлементы объявлены КАЖДЫЙ своим правилом. Неизвестный
+// селектор в группе делает невалидной всю группу: WebKit, встретив
+// ::-moz-progress-bar рядом со своим псевдоэлементом, выбрасывает правило
+// целиком — и полоса остаётся некрашеной в обоих движках. Это условие
+// приёмки модуля, а не стилевое предпочтение.
+//
+// Каждому из них вдобавок снимается background-image. UA-стиль рисует части
+// шкалы градиентом, а он лежит ПОВЕРХ цвета фона: заданный background-color
+// оказывается под непрозрачной картинкой и не виден вовсе. Снаружи это
+// выглядело как «класс не применился» — на деле применился и был закрашен
+// системным градиентом. appearance: none этого не снимает.
+
+.gr-progress {
+  --gr-progress-fill: var(--gr-color-accent);
+  --gr-progress-track: color-mix(in srgb, currentcolor 12%, transparent);
+  --gr-progress-height: 0.5rem;
+
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--gr-progress-height);
+  border: 0;
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-progress-track);
+
+  // Дорожка — оттенок currentcolor, а не готовая поверхность: непрозрачный
+  // серый совпал бы с одной из подложек, на которых полоса может лежать,
+  // и исчез бы вместе с ней.
+  appearance: none;
+  overflow: hidden;
+}
+
+// --- Дорожка и заполнение ---------------------------------------------------
+
+.gr-progress::-webkit-progress-bar {
+  background-image: none;
+  background-color: var(--gr-progress-track);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-progress::-webkit-progress-value {
+  background-image: none;
+  background-color: var(--gr-progress-fill);
+  border-radius: var(--gr-radius-pill);
+  transition: inline-size var(--gr-transition);
+}
+
+.gr-progress::-moz-progress-bar {
+  background-image: none;
+  background-color: var(--gr-progress-fill);
+  border-radius: var(--gr-radius-pill);
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+.gr-progress-sm {
+  --gr-progress-height: 0.25rem;
+}
+
+.gr-progress-lg {
+  --gr-progress-height: 0.75rem;
+}
+
+// --- Статусы ----------------------------------------------------------------
+
+// Полоса выполнения — фигура, а не текст, поэтому предупреждение красится
+// поверхностным цветом: текстовый в светлой теме тёмно-коричневый и читается
+// не как «внимание», а как грязь.
+$gr-progress-statuses: (
+  success: var(--gr-color-success),
+  warning: var(--gr-color-warning-surface),
+  danger: var(--gr-color-danger)
+);
+
+@each $gr-name, $gr-value in $gr-progress-statuses {
+  .gr-progress-#{$gr-name} {
+    --gr-progress-fill: #{$gr-value};
+  }
+}
+
+// --- Неопределённое состояние -----------------------------------------------
+
+// <progress> без атрибута value. Системную бегущую полосу забирает
+// appearance: none, поэтому её рисует фон самого элемента: отрезок в 40 %
+// ширины ездит от края до края. Псевдоэлементы при этом обнуляются —
+// иначе дорожка WebKit закрыла бы фон элемента собой.
+.gr-progress-indeterminate {
+  background-image: linear-gradient(to right, var(--gr-progress-fill) 0 100%);
+  background-repeat: no-repeat;
+  background-size: 40% 100%;
+  animation: gr-progress-slide 1.4s ease-in-out infinite alternate;
+}
+
+.gr-progress-indeterminate::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+.gr-progress-indeterminate::-webkit-progress-value {
+  background-color: transparent;
+}
+
+.gr-progress-indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+
+// Бег — единственный признак того, что работа идёт, поэтому по настройке
+// уменьшенной анимации он замедляется, а не снимается: замершая полоса
+// сообщала бы «зависло».
+@media (prefers-reduced-motion: reduce) {
+  .gr-progress-indeterminate {
+    animation-duration: 3s;
+  }
+}
+
+// --- Шкала ------------------------------------------------------------------
+
+// <meter> — не прогресс: он показывает измеренную величину в известном
+// диапазоне (заполненность диска, оценку, запас). Цвет заливки берётся
+// у платформы: браузер сам вычисляет по low / high / optimum, попало ли
+// значение в хороший диапазон. Класс-статус разошёлся бы с этим
+// вычислением, поэтому у шкалы их и нет.
+.gr-meter {
+  --gr-meter-height: 0.75rem;
+
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--gr-meter-height);
+  border: 0;
+  border-radius: var(--gr-radius-pill);
+  background-color: color-mix(in srgb, currentcolor 12%, transparent);
+  appearance: none;
+  overflow: hidden;
+}
+
+.gr-meter::-webkit-meter-bar {
+  background-image: none;
+  background-color: color-mix(in srgb, currentcolor 12%, transparent);
+  border: 0;
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter::-webkit-meter-optimum-value {
+  background-image: none;
+  background-color: var(--gr-color-success);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter::-webkit-meter-suboptimum-value {
+  background-image: none;
+  background-color: var(--gr-color-warning-surface);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter::-webkit-meter-even-less-good-value {
+  background-image: none;
+  background-color: var(--gr-color-danger);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter:-moz-meter-optimum::-moz-meter-bar {
+  background-image: none;
+  background-color: var(--gr-color-success);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background-image: none;
+  background-color: var(--gr-color-warning-surface);
+  border-radius: var(--gr-radius-pill);
+}
+
+.gr-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background-image: none;
+  background-color: var(--gr-color-danger);
+  border-radius: var(--gr-radius-pill);
+}

package/scss/_skeleton.scss

@@ -0,0 +1,95 @@
+// Griffincss UI — Skeleton
+// Заглушка на время загрузки: серые фигуры на месте будущего содержимого.
+//
+//   <div aria-hidden="true">
+//     <span class="gr-skeleton gr-skeleton-circle"></span>
+//     <span class="gr-skeleton gr-skeleton-text"></span>
+//   </div>
+//   <span class="gr-sr-only" role="status">Загружаем список</span>
+//
+// aria-hidden на обёртке обязателен: пустые прямоугольники не значат ничего
+// и в озвучке превращаются в шум. Сообщение о загрузке ставят рядом словом —
+// это тот же принцип, что у сообщения о статусе.
+//
+// Залито оттенком currentcolor, а не готовой поверхностью: непрозрачный
+// серый совпал бы с одной из подложек, на которых заглушка может лежать,
+// и стал бы невидимым — так уже было с полосами таблицы.
+
+.gr-skeleton {
+  display: block;
+  box-sizing: border-box;
+  min-block-size: 1em;
+  border-radius: calc(var(--gr-radius) * 0.5);
+  background-color: color-mix(in srgb, currentcolor 12%, transparent);
+  animation: gr-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+// Строка текста. Высота — по кеглю строки, на месте которой она стоит,
+// поэтому заглушка абзаца собирается из нескольких таких строк
+// и выглядит абзацем, а не одним серым прямоугольником.
+.gr-skeleton-text {
+  block-size: 1em;
+  min-block-size: 0;
+  border-radius: var(--gr-radius-pill);
+
+  // Поля — по половине междустрочного зазора с каждой стороны: строки
+  // заглушки встают с тем же шагом, что и настоящие.
+  margin-block: 0.25em;
+}
+
+// Последняя строка абзаца короче остальных — иначе ровный правый край
+// выдаёт, что это фигура, а не текст. Ширину переопределяют на месте,
+// когда порядок строк другой.
+.gr-skeleton-text:last-child {
+  inline-size: 60%;
+}
+
+// Круг под аватар или иконку. flex: none — чтобы в строке рядом с текстом
+// его не сжимало.
+.gr-skeleton-circle {
+  flex: none;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  border-radius: var(--gr-radius-pill);
+}
+
+// --- Готовая коробка --------------------------------------------------------
+
+// Типовая заглушка блока: круг слева, колонка строк справа. Отступы и зазоры
+// задаёт она сама и потому встаёт в карточке ВМЕСТО .gr-card-body — пока
+// содержимого нет, она и есть тело. Без неё фигуры расставляют утилитами,
+// а прижатые к краям коробки они читаются не как заглушка, а как сломанная
+// вёрстка.
+.gr-skeleton-group {
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--gr-ui-gap);
+  padding: var(--gr-gap);
+}
+
+// Колонка строк: забирает остаток строки рядом с кругом. min-inline-size: 0
+// обязателен — без него flex-элемент не сжимается ниже своего содержимого
+// и строки вылезают за край на узком экране.
+.gr-skeleton-stack {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 0.5em;
+  min-inline-size: 0;
+}
+
+// В колонке шаг задаёт gap: собственные поля строк удвоили бы его.
+.gr-skeleton-stack .gr-skeleton-text {
+  margin-block: 0;
+}
+
+// Мерцание снимается по настройке совсем, в отличие от кольца спиннера:
+// заглушка сообщает «здесь будет содержимое» самим своим присутствием,
+// и без анимации это сообщение не теряется.
+@media (prefers-reduced-motion: reduce) {
+  .gr-skeleton {
+    animation: none;
+  }
+}