griffincss-ui 0.16.0

package/scss/_toast.scss

@@ -0,0 +1,173 @@
+// Griffincss UI — Toast
+// Короткое уведомление в углу экрана. Живёт в регионе — закреплённом
+// контейнере, объявленном в разметке живой областью:
+//
+//   <div class="gr-toast-region gr-toast-region-bottom-end"
+//        role="status" aria-live="polite"></div>
+//
+// Регион ставится на страницу один раз и пустым: живая область обязана
+// существовать в дереве ДО того, как в неё что-то положат, иначе программа
+// чтения с экрана не заметит вставки. Пустой регион при этом ничего
+// не занимает и ничего не сообщает.
+//
+// Сообщения об ошибке требуют своего региона с aria-live="assertive"
+// и role="alert": «вежливая» область дочитает текущее и только потом
+// сообщит, а потеря данных ждать не может.
+//
+// Показывает и убирает тосты griffincss-ui.js: Griffincss.ui.toast(text).
+// Без скрипта модуль не используется — это единственный компонент
+// библиотеки, у которого нет статического применения.
+
+@use 'sass:list';
+
+.gr-toast-region {
+  --gr-toast-slide: -0.75rem;
+
+  position: fixed;
+
+  // Регион растянут по краю экрана и лежит поверх всего. Не сними он с себя
+  // указатель — прозрачная полоса перехватывала бы щелчки по странице
+  // под ней. Сами тосты указатель принимают: в них бывают крестик и ссылка.
+  z-index: var(--gr-z-toast);
+  inset-block: 0 auto;
+  inset-inline: auto 0;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--gr-ui-gap);
+  max-inline-size: min(26rem, 100%);
+  padding: var(--gr-gap);
+  pointer-events: none;
+}
+
+// --- Углы -------------------------------------------------------------------
+
+// Новый тост вставляется в конец региона. У нижних углов это значит
+// «ближе к краю экрана», поэтому колонка там перевёрнута: иначе свежее
+// сообщение уезжало бы вверх, а старое оставалось бы на виду.
+// Заодно переворачивается направление въезда.
+.gr-toast-region-top-start {
+  inset-block: 0 auto;
+  inset-inline: 0 auto;
+}
+
+.gr-toast-region-top-end {
+  inset-block: 0 auto;
+  inset-inline: auto 0;
+}
+
+.gr-toast-region-bottom-start {
+  --gr-toast-slide: 0.75rem;
+
+  inset-block: auto 0;
+  inset-inline: 0 auto;
+  flex-direction: column-reverse;
+}
+
+.gr-toast-region-bottom-end {
+  --gr-toast-slide: 0.75rem;
+
+  inset-block: auto 0;
+  inset-inline: auto 0;
+  flex-direction: column-reverse;
+}
+
+// --- Сообщение --------------------------------------------------------------
+
+.gr-toast {
+  --gr-toast-color: var(--gr-color-text-secondary);
+  --gr-toast-fill: var(--gr-color-border-strong);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: var(--gr-ui-gap);
+  padding-block: calc(var(--gr-ui-gap) * 1.25);
+  padding-inline: var(--gr-gap);
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-inline-start-width: calc(var(--gr-border-width) * 4);
+  border-inline-start-color: var(--gr-toast-fill);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface-overlay);
+  box-shadow: var(--gr-shadow-lg);
+  color: var(--gr-color-text);
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  pointer-events: auto;
+  transition:
+    opacity var(--gr-transition),
+    translate var(--gr-transition);
+}
+
+// Появление объявлено начальным состоянием, а не классом от скрипта.
+// Узел вставлен и сразу нарисован в конечном виде; @starting-style —
+// единственный способ показать въезд, не требуя от рантайма второго кадра
+// и пары «добавил класс — снял класс».
+@starting-style {
+  .gr-toast {
+    opacity: 0;
+    translate: 0 var(--gr-toast-slide, -0.75rem);
+  }
+}
+
+// Уход. Класс вешает рантайм и ждёт конца перехода — так тост исчезает
+// тем же движением, каким появился.
+.gr-toast-leaving {
+  opacity: 0;
+  translate: 0 var(--gr-toast-slide, -0.75rem);
+
+  // Уходящий тост уже не сообщение, а картинка: щелчок по нему пришёлся бы
+  // на то, чего человек больше не видит.
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-toast {
+    transition-duration: 0.01ms;
+  }
+}
+
+// Слот под иконку — как у сообщения о статусе: своих иконок библиотека
+// не везёт, сюда кладут любой знак.
+.gr-toast-icon {
+  flex: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  color: var(--gr-toast-color);
+  line-height: 1.25;
+  text-align: center;
+}
+
+.gr-toast-body {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+// Слово статуса. Тот же довод, что у .gr-alert-title: цвет не переживает
+// чёрно-белую печать и дальтонизм, слово переживает.
+.gr-toast-title {
+  display: block;
+  margin: 0;
+  color: var(--gr-toast-color);
+  font-size: inherit;
+  font-weight: 600;
+}
+
+// --- Статусы ----------------------------------------------------------------
+
+// Парами: цвет слова и иконки, цвет полосы. Расходятся они у предупреждения —
+// текстовый цвет обязан быть тёмным, чтобы читаться, а полоса такого цвета
+// не читается как «внимание».
+$gr-toast-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-toast-statuses {
+  .gr-toast-#{$gr-name} {
+    --gr-toast-color: #{list.nth($gr-value, 1)};
+    --gr-toast-fill: #{list.nth($gr-value, 2)};
+  }
+}

package/scss/_tooltip.scss

@@ -0,0 +1,143 @@
+// Griffincss UI — Tooltip
+// Короткая подсказка у элемента. Показывается и указателем, и с клавиатуры,
+// и то и другое — чистым CSS: подсказка лежит внутри обёртки, а обёртка
+// реагирует на :hover и на :focus-within. Скрипт для этого не нужен.
+//
+//   <span class="gr-tooltip-anchor">
+//     <button class="gr-btn" aria-describedby="t1">Сохранить</button>
+//     <span class="gr-tooltip" id="t1" role="tooltip">Ctrl + S</span>
+//   </span>
+//
+// aria-describedby в разметке обязателен: без него подсказку услышит
+// только тот, кто её видит. Роль tooltip сообщает, что это пояснение
+// к элементу, а не отдельная надпись рядом.
+//
+// Подсказка не прячется display: none и не появляется display: block:
+// скрытая так, она исчезла бы из дерева доступности целиком, и связь
+// по aria-describedby оборвалась бы. Прячут её прозрачность
+// и visibility — то и другое анимируется и обратимо.
+
+.gr-tooltip-anchor {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.gr-tooltip {
+  --gr-tooltip-offset: calc(var(--gr-ui-gap) * 0.75);
+
+  position: absolute;
+  z-index: var(--gr-z-dropdown);
+  inset-block-end: calc(100% + var(--gr-tooltip-offset));
+  inset-inline-start: 50%;
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: min(16rem, 70vw);
+  padding-block: calc(var(--gr-ui-gap) * 0.5);
+  padding-inline: calc(var(--gr-control-padding-x) * 0.6);
+  border-radius: calc(var(--gr-radius) * 0.75);
+  background-color: var(--gr-color-text);
+  color: var(--gr-color-bg);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  text-align: center;
+  translate: -50% 0;
+  opacity: 0;
+  visibility: hidden;
+
+  // Скрытая подсказка не должна влиять на раскладку страницы. visibility
+  // убирает её с экрана и из дерева доступности, но место в области
+  // прокрутки за ней остаётся: боковая подсказка у правого края узкого
+  // экрана растягивала документ вбок — появлялась горизонтальная прокрутка
+  // страницы, на которой ничего не видно. content-visibility снимает
+  // содержимое и с раскладки; переход по нему объявлен allow-discrete,
+  // иначе появление шло бы рывком.
+  content-visibility: hidden;
+  transition:
+    opacity var(--gr-transition),
+    visibility var(--gr-transition),
+    content-visibility var(--gr-transition) allow-discrete;
+
+  // Подсказка не должна перехватывать указатель: наведённая мышью, она
+  // иначе закрыла бы собой элемент, к которому относится.
+  pointer-events: none;
+}
+
+// Клавиатура. :focus-within, а не :focus: фокус приходит на кнопку внутри
+// обёртки, а правило написано на обёртку.
+.gr-tooltip-anchor:focus-within .gr-tooltip {
+  opacity: 1;
+  visibility: visible;
+  content-visibility: visible;
+}
+
+// Указатель — отдельным правилом в @media (hover: hover): на сенсорном
+// экране :hover залипает после тапа, и подсказка осталась бы висеть.
+@media (hover: hover) {
+  .gr-tooltip-anchor:hover .gr-tooltip {
+    opacity: 1;
+    visibility: visible;
+    content-visibility: visible;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-tooltip {
+    transition-duration: 0.01ms;
+  }
+}
+
+// --- Стороны ----------------------------------------------------------------
+
+.gr-tooltip-bottom {
+  inset-block: calc(100% + var(--gr-tooltip-offset)) auto;
+}
+
+// У боковых подсказок смещение по другой оси: центрируется высота,
+// а не ширина.
+.gr-tooltip-start,
+.gr-tooltip-end {
+  inset-block: 50% auto;
+  translate: 0 -50%;
+}
+
+.gr-tooltip-start {
+  inset-inline: auto calc(100% + var(--gr-tooltip-offset));
+}
+
+.gr-tooltip-end {
+  inset-inline: calc(100% + var(--gr-tooltip-offset)) auto;
+}
+
+// --- Подсказка в верхнем слое -----------------------------------------------
+
+// Подсказка внутри прокручиваемого блока или таблицы с overflow: hidden
+// обрезается его краем. Лечится верхним слоем: тот же .gr-tooltip
+// с атрибутом popover рисуется поверх всего и притягивается к элементу
+// якорем. Показывает такую подсказку скрипт (showPopover), поэтому
+// правила :hover и :focus-within её не касаются.
+@supports (anchor-name: --gr-tooltip-anchor) {
+  .gr-tooltip-anchor:has(> [popover].gr-tooltip) {
+    anchor-scope: --gr-tooltip-anchor;
+    anchor-name: --gr-tooltip-anchor;
+  }
+
+  [popover].gr-tooltip {
+    position: fixed;
+    position-anchor: --gr-tooltip-anchor;
+    position-area: block-start center;
+    inset: auto;
+    margin: 0;
+    margin-block-end: var(--gr-tooltip-offset);
+    border: 0;
+    translate: none;
+    overflow: visible;
+    position-try-fallbacks: flip-block;
+  }
+
+  [popover].gr-tooltip:popover-open {
+    opacity: 1;
+    visibility: visible;
+    content-visibility: visible;
+  }
+}

package/scss/griffincss-ui-scoped.scss

@@ -0,0 +1,61 @@
+// Griffincss UI — версия, ограниченная областью .griffin
+// Компоненты действуют только внутри элементов с классом .griffin,
+// что позволяет подключать библиотеку в чужую разметку без конфликтов.
+// Токены (из griffincss-core) объявляются вне @scope: :root должен
+// остаться глобальным.
+//
+// Слой тот же, что и у обычной сборки, — griffincss.ui.
+//
+// Требует поддержки CSS @scope (Chrome 118+, Safari 17.4+, Firefox 128+).
+//
+// Структурных правил оси оформления здесь нет: внутри @scope селектор
+// [data-gr-style="…"] неявно получает :scope в начало и требует носитель
+// атрибута в области, а он стоит на <html>. Ось при этом действует на уровне
+// токенов — они объявлены вне области и работают в этой сборке полностью.
+//
+// Компоненты, живущие в верхнем слое, — модальное окно, выдвижная панель
+// и попап дропдауна — областью не ограничены только визуально: узел
+// остаётся в DOM внутри .griffin, поэтому @scope до него достаёт.
+
+@use 'sass:meta';
+@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+
+// Весь вывод пакета — в слое griffincss.ui.
+@layer griffincss.ui {
+  @include meta.load-css('griffincss-core/scss/tokens');
+
+  // Тема — тоже вне @scope: атрибут data-gr-theme стоит на <html>,
+  // то есть заведомо снаружи области .griffin.
+  @include meta.load-css('griffincss-core/scss/theme');
+
+  // @keyframes внутри @scope недействительны — подключаются вне области.
+  @include meta.load-css('keyframes');
+
+  @scope (.griffin) {
+    @include meta.load-css('accordion');
+    @include meta.load-css('alert');
+    @include meta.load-css('avatar');
+    @include meta.load-css('badge');
+    @include meta.load-css('breadcrumb');
+    @include meta.load-css('button');
+    @include meta.load-css('card');
+    @include meta.load-css('choice');
+    @include meta.load-css('drawer');
+    @include meta.load-css('dropdown');
+    @include meta.load-css('empty');
+    @include meta.load-css('form');
+    @include meta.load-css('link');
+    @include meta.load-css('menu');
+    @include meta.load-css('modal');
+    @include meta.load-css('nav');
+    @include meta.load-css('pagination');
+    @include meta.load-css('progress');
+    @include meta.load-css('skeleton');
+    @include meta.load-css('spinner');
+    @include meta.load-css('steps');
+    @include meta.load-css('table');
+    @include meta.load-css('tabs');
+    @include meta.load-css('toast');
+    @include meta.load-css('tooltip');
+  }
+}

package/scss/griffincss-ui.scss

@@ -0,0 +1,64 @@
+// Griffincss UI — компоненты интерфейса
+// Кнопки, поля ввода, переключатели, карточки, таблицы, статусы, аватары,
+// навигация, меню, вкладки, аккордеон, модальное окно, выдвижная панель,
+// подсказки и пагинация.
+//
+// Надстройка над griffincss-core: токены, тема и карта брейкпоинтов берутся
+// оттуда (peer-зависимость). От griffincss-utils пакет не зависит вовсе —
+// компонент обязан выглядеть правильно сам по себе; утилиты нужны, чтобы
+// его подвинуть, а не чтобы он собрался.
+//
+// Собранный griffincss-ui.css самодостаточен: блок :root входит в него
+// целиком, подключать griffincss-core.css не требуется.
+//
+// Слой griffincss.ui стоит между ядром и утилитами. Компоненты старше ядра:
+// .gr-card задаёт display: flex и не должен проигрывать .gr-flex. Утилиты
+// старше компонентов: .gr-mb-0 на карточке обязан побеждать её собственный
+// margin-bottom.
+
+@use 'sass:meta';
+@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+
+// Весь вывод пакета — в слое griffincss.ui.
+@layer griffincss.ui {
+  @include meta.load-css('griffincss-core/scss/tokens');
+
+  // Тема подключается и здесь, как в utils: слой griffincss.ui старше
+  // griffincss.core, поэтому переопределения темы, приехавшие только
+  // с griffincss-core.css, проиграли бы базовому :root из этой сборки —
+  // независимо от специфичности селектора.
+  @include meta.load-css('griffincss-core/scss/theme');
+
+  // @keyframes живут отдельным файлом ради scoped-сборки — см. _keyframes.scss.
+  @include meta.load-css('keyframes');
+  @include meta.load-css('accordion');
+  @include meta.load-css('alert');
+  @include meta.load-css('avatar');
+  @include meta.load-css('badge');
+  @include meta.load-css('breadcrumb');
+  @include meta.load-css('button');
+  @include meta.load-css('card');
+  @include meta.load-css('choice');
+  @include meta.load-css('drawer');
+  @include meta.load-css('dropdown');
+  @include meta.load-css('empty');
+  @include meta.load-css('form');
+  @include meta.load-css('link');
+  @include meta.load-css('menu');
+  @include meta.load-css('modal');
+  @include meta.load-css('nav');
+  @include meta.load-css('pagination');
+  @include meta.load-css('progress');
+  @include meta.load-css('skeleton');
+  @include meta.load-css('spinner');
+  @include meta.load-css('steps');
+  @include meta.load-css('table');
+  @include meta.load-css('tabs');
+  @include meta.load-css('toast');
+  @include meta.load-css('tooltip');
+
+  // Структурные правила оси оформления — последними: они уточняют компоненты
+  // и обязаны идти после их базовых правил. В griffincss-ui-scoped.scss
+  // модуля нет намеренно, см. его шапку.
+  @include meta.load-css('style-rules');
+}