griffincss-ui 0.16.0

package/scss/_link.scss

@@ -0,0 +1,165 @@
+// Griffincss UI — Link
+// Ссылка. Компонент нужен ровно потому, что ресет снимает с <a> и цвет,
+// и подчёркивание (`color: inherit; text-decoration: none`): без него
+// ссылка в тексте ничем не отличается от текста.
+//
+// Отличие от .gr-btn-link из _button.scss: там кнопка, которая выглядит
+// ссылкой, — элемент, выполняющий действие на текущей странице. Здесь
+// ссылка, которая выглядит ссылкой, — переход по адресу. Выбирает разметка,
+// оформление лишь подтверждает выбор.
+//
+// Отличие от .gr-text-link из griffincss-utils: та задаёт только цвет.
+// Здесь — цвет, подчёркивание, три состояния и контур фокуса.
+//
+// Линия объявляется ТОЛЬКО длинными свойствами — text-decoration-line,
+// -thickness, -style. Сокращённое text-decoration сбрасывает все остальные
+// длинные в initial, поэтому одно `text-decoration: underline` в правиле
+// :hover обнуляло бы толщину from-font, заданную в базовом классе:
+// подчёркивание у тихой ссылки получалось не таким, как у обычной.
+
+@use 'sass:string';
+
+.gr-link {
+  color: var(--gr-color-link);
+  text-decoration-line: underline;
+
+  // from-font, а не фиксированная толщина: линия остаётся соразмерной кеглю
+  // и в подписи, и в заголовке. Задана один раз здесь и не сбрасывается
+  // ни одним вариантом — они трогают только -line и -style.
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+  transition: color var(--gr-transition), text-decoration-color var(--gr-transition);
+}
+
+// Порядок LVHA обязателен: :visited объявлен до :hover, иначе посещённая
+// ссылка не меняла бы цвет под указателем.
+.gr-link:visited {
+  color: var(--gr-color-link-visited);
+}
+
+@media (hover: hover) {
+  .gr-link:hover {
+    color: var(--gr-color-link-hover);
+  }
+}
+
+.gr-link:active {
+  color: var(--gr-color-link-hover);
+}
+
+.gr-link:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+  border-radius: calc(var(--gr-radius) * 0.25);
+}
+
+// --- Варианты ---------------------------------------------------------------
+
+// Приглушённая: цвет вторичного текста. Для подписей, футеров и служебных
+// переходов, где акцентная ссылка перетягивала бы внимание на себя.
+.gr-link-muted {
+  color: var(--gr-color-text-secondary);
+}
+
+.gr-link-muted:visited {
+  color: var(--gr-color-text-secondary);
+}
+
+@media (hover: hover) {
+  .gr-link-muted:hover {
+    color: var(--gr-color-text);
+  }
+}
+
+// Цвет берётся у окружающего текста. Для ссылки-заголовка и ссылки внутри
+// цветной плашки, где акцентный синий столкнулся бы с фоном.
+.gr-link-inherit {
+  color: inherit;
+}
+
+.gr-link-inherit:visited {
+  color: inherit;
+}
+
+// Цвет на наведении менять нечем — он наследуется. Отзывается линия:
+// толщину трогать нельзя, поэтому меняется её цвет.
+@media (hover: hover) {
+  .gr-link-inherit:hover {
+    color: inherit;
+    text-decoration-color: var(--gr-color-link);
+  }
+}
+
+// Без подчёркивания, пока на неё не навели. Только для мест, где ссылка
+// опознаётся по положению: список навигации, ряд карточек, футер. В тексте
+// абзаца подчёркивание снимать нельзя — там положение ни о чём не говорит,
+// и ссылка остаётся отличима только цветом, то есть не отличима вовсе
+// для дальтоника и на чёрно-белой печати.
+.gr-link-quiet {
+  text-decoration-line: none;
+}
+
+@media (hover: hover) {
+  .gr-link-quiet:hover {
+    text-decoration-line: underline;
+  }
+}
+
+// Подчёркивание возвращается и по фокусу — вне @media (hover: hover):
+// с клавиатуры ссылку находят и на сенсорном экране.
+.gr-link-quiet:focus-visible {
+  text-decoration-line: underline;
+}
+
+// --- Стиль линии ------------------------------------------------------------
+
+// Линия несёт смысл, которого нет у цвета. Пунктир и точки традиционно
+// помечают ссылку-пояснение: сноску, термин со справкой, — то, что откроется
+// рядом, а не уведёт со страницы. Волна помечает проблемное: устаревший
+// адрес, неточный перевод. Двойная линия выделяет главную ссылку абзаца.
+//
+// Стиль сочетается с любым вариантом: .gr-link-quiet.gr-link-dotted
+// покажет точки при наведении, .gr-link-muted.gr-link-dashed — пунктир
+// приглушённым цветом.
+@each $gr-style in (dotted, dashed, wavy, double) {
+  .gr-link-#{$gr-style} {
+    text-decoration-style: $gr-style;
+  }
+}
+
+// Волне и двойной линии нужен зазор больше обычного: первая занимает
+// по высоте вдвое больше сплошной, вторая — это две линии с просветом,
+// и на стандартном отступе обе задевают нижние выносные элементы букв.
+.gr-link-wavy,
+.gr-link-double {
+  text-underline-offset: 0.3em;
+}
+
+// --- Внешняя ссылка ---------------------------------------------------------
+
+// Стрелка-указатель после текста. Своих иконок библиотека не везёт: это
+// обычный символ, поэтому он масштабируется вместе с кеглем и переживает
+// чёрно-белую печать.
+//
+// Стрелка — признак для глаза. Скринридеру о переходе на чужой сайт или
+// об открытии новой вкладки сообщает разметка, а не она: псевдоэлемент
+// пометить aria-hidden нельзя, поэтому предупреждение ставится текстом
+// в .gr-sr-only рядом.
+//
+// Символ записан CSS-экранированием, а не сам собой: literal ↗ сделал бы
+// собранный файл не-ASCII, а Sass в ответ приписал бы к нему BOM. Тогда
+// объявление порядка слоёв перестало бы быть первым в файле — проверка 4
+// в check-dist.mjs на это и падает. Экранирование разворачивает браузер,
+// и вывод остаётся независимым от кодировки, в которой файл отдали.
+.gr-link-external::after {
+  content: string.unquote('"\\2197"');
+
+  // inline-block, а не inline: подчёркивание родителя протягивается сквозь
+  // строчных потомков и снять его с них нельзя, а атомарный строчный бокс
+  // оно не пересекает. Стрелка остаётся неподчёркнутой.
+  display: inline-block;
+  margin-inline-start: 0.15em;
+  font-size: 0.85em;
+  vertical-align: baseline;
+}

package/scss/_menu.scss

@@ -0,0 +1,150 @@
+// Griffincss UI — Menu
+// Список действий: то, что видно внутри выпадающего меню, контекстного меню
+// или боковой панели. Собственного раскрытия у модуля нет — его даёт
+// .gr-dropdown; здесь только оформление списка.
+//
+// Пункт — <button> или <a>. Выбор между ними решает, что произойдёт: ссылка
+// ведёт по адресу, кнопка выполняет действие на месте. Оформление у них
+// общее, поэтому кнопке здесь возвращают то, что забрал браузер: шрифт,
+// выравнивание по началу строки и полную ширину.
+
+.gr-menu {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  min-inline-size: 11rem;
+  margin: 0;
+  padding-block: calc(var(--gr-ui-gap) * 0.5);
+  padding-inline: 0;
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface-overlay);
+  color: var(--gr-color-text);
+  box-shadow: var(--gr-shadow-lg);
+  list-style: none;
+}
+
+// Меню на <ul>: обёртки <li> не должны добавлять ни отступов, ни маркеров,
+// а пункт внутри — растягиваться на всю ширину строки.
+//
+// Селектор обёрнут в :where() ради нулевой специфичности: иначе правило
+// «.gr-menu > li» (0,1,1) перебивало бы .gr-menu-header и .gr-menu-sep
+// (0,1,0), поставленные на сам <li>, — заголовок группы терял отступы,
+// а разделитель превращался в линию во всю ширину без полей.
+.gr-menu > :where(li) {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.gr-menu > :where(li) > :where(*) {
+  flex: 1 1 auto;
+}
+
+.gr-menu-item {
+  --gr-menu-fg: var(--gr-color-text);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  inline-size: 100%;
+  min-block-size: var(--gr-control-height-sm);
+  margin: 0;
+  padding-block: calc(var(--gr-ui-gap) * 0.5);
+  padding-inline: var(--gr-control-padding-x);
+  border: 0;
+  background-color: transparent;
+  color: var(--gr-menu-fg);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  line-height: 1.3;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .gr-menu-item:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: color-mix(in srgb, currentcolor 10%, transparent);
+  }
+}
+
+// Контур внутренний: пункт лежит вплотную к краю меню, и обычный outline
+// с отступом срезался бы скруглением обёртки.
+.gr-menu-item:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: calc(-1 * var(--gr-focus-width));
+}
+
+.gr-menu-item:disabled,
+.gr-menu-item[aria-disabled="true"] {
+  --gr-menu-fg: var(--gr-color-text-disabled);
+
+  cursor: not-allowed;
+}
+
+// Выбранный пункт: aria-checked для переключателей меню, aria-current —
+// для пункта, ведущего на текущую страницу.
+.gr-menu-item[aria-checked="true"],
+.gr-menu-item[aria-current] {
+  --gr-menu-fg: var(--gr-color-accent);
+
+  background-color: color-mix(in srgb, var(--gr-color-accent) 12%, transparent);
+  font-weight: 600;
+}
+
+// Опасное действие — удаление и подобное. Красный цвет здесь не единственный
+// признак: такой пункт стоит последним, за разделителем, и назван глаголом.
+.gr-menu-danger {
+  --gr-menu-fg: var(--gr-color-danger);
+}
+
+@media (hover: hover) {
+  .gr-menu-danger:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: color-mix(in srgb, var(--gr-color-danger) 12%, transparent);
+  }
+}
+
+// --- Части меню -------------------------------------------------------------
+
+// Заголовок группы. Не кнопка и не ссылка: текст, объясняющий, что за
+// пункты идут ниже.
+.gr-menu-header {
+  padding-block: calc(var(--gr-ui-gap) * 0.5);
+  padding-inline: var(--gr-control-padding-x);
+  color: var(--gr-color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+// Разделитель. На <hr> — собственная граница элемента снимается, линию
+// рисует border-block-start, поэтому толщина следует токену.
+.gr-menu-sep {
+  block-size: 0;
+  margin-block: calc(var(--gr-ui-gap) * 0.5);
+  margin-inline: 0;
+  border: 0;
+  border-block-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// Слот под иконку и под сочетание клавиш. Иконка стоит в начале строки,
+// подсказка — в конце: сдвинуть её туда достаточно одному правилу,
+// потому что пункт — flex.
+.gr-menu-icon {
+  flex: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  text-align: center;
+}
+
+.gr-menu-shortcut {
+  margin-inline-start: auto;
+  padding-inline-start: var(--gr-ui-gap);
+  color: var(--gr-color-text-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}

package/scss/_modal.scss

@@ -0,0 +1,181 @@
+// Griffincss UI — Modal
+// Модальное окно на <dialog>. Всё, ради чего обычно пишут скрипт, платформа
+// даёт сама: верхний слой без z-index, фокус внутри окна, закрытие по Esc,
+// возврат фокуса на кнопку, инертность страницы под окном. Библиотеке
+// остаётся вид.
+//
+// Открывается окно вызовом showModal() — в разметке это одна строка:
+//
+//   <button onclick="document.getElementById('m').showModal()">Открыть</button>
+//   <dialog class="gr-modal" id="m">…</dialog>
+//
+// Закрывается без скрипта вовсе: <form method="dialog"> внутри окна или
+// атрибут formmethod="dialog" у кнопки. Именно так закрывают окна примеры
+// в документации — ни одной строки JS.
+//
+// В состоянии [open] задан ОДИН display, и это принципиально: у <dialog>
+// он none по умолчанию, поэтому безусловный display: flex показал бы окно
+// сразу, — а всё остальное обязано жить в базовом правиле. Атрибут снимается
+// в первый же кадр close(), тогда как переход по display: allow-discrete
+// держит окно на экране до конца анимации: любое свойство, оставленное
+// в [open], пропадает раньше самого окна. Так строение окна (колонка)
+// на время исчезновения превращалось в строку — пояса вставали в ряд,
+// и окно меняло размеры прямо в момент ухода.
+//
+// По той же причине position задан явно. Модальному <dialog> его даёт
+// UA-стиль (position: fixed от :modal), но в top layer окно уже не считается
+// модальным к концу перехода: containing block меняется на предка, и проценты
+// в размерах пересчитываются от него — окно теряло ширину на исчезновении.
+
+// Размеры — в процентах от окна, а не в 100vw: единица vw включает ширину
+// полосы прокрутки, поэтому окно «во всю ширину минус поля» получалось шире
+// видимой области и центрировалось со сдвигом в половину полосы.
+.gr-modal {
+  position: fixed;
+  box-sizing: border-box;
+  flex-direction: column;
+  inline-size: min(32rem, calc(100% - var(--gr-gap) * 2));
+  max-inline-size: none;
+  max-block-size: min(85dvh, calc(100% - var(--gr-gap) * 2));
+  padding: 0;
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface-overlay);
+  color: var(--gr-color-text);
+  box-shadow: var(--gr-shadow-xl);
+  overflow: hidden;
+}
+
+// Единственное, что различает открытое и закрытое окно, — показано оно или
+// нет. display остаётся здесь и только здесь: объявленный в базовом правиле,
+// он показал бы закрытое окно прямо в потоке страницы — авторский стиль
+// сильнее UA-правила dialog:not([open]) { display: none } независимо
+// от специфичности. Направление же колонки живёт в базовом правиле и потому
+// переживает закрытие.
+.gr-modal[open] {
+  display: flex;
+}
+
+// Подложка. Цвет — токен --gr-overlay: он одинаково тёмен в обеих темах,
+// потому что подложка затемняет страницу, а не перекрашивает её.
+.gr-modal::backdrop {
+  background-color: var(--gr-overlay);
+}
+
+// --- Пояса ------------------------------------------------------------------
+
+// Шапка и подвал не сжимаются и не прокручиваются: прокручивается тело.
+// Так заголовок остаётся виден, а кнопки — доступны на длинном содержимом.
+.gr-modal-header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gr-ui-gap);
+  padding-block: calc(var(--gr-gap) * 0.75);
+  padding-inline: var(--gr-gap);
+  border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// Заголовок окна: на него указывает aria-labelledby у <dialog>, поэтому
+// в разметке это настоящий заголовок, а не строка текста.
+.gr-modal-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.gr-modal-body {
+  flex: 1 1 auto;
+  padding: var(--gr-gap);
+  line-height: var(--gr-leading-base);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.gr-modal-footer {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gr-ui-gap);
+  padding-block: calc(var(--gr-gap) * 0.75);
+  padding-inline: var(--gr-gap);
+  border-block-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+.gr-modal-sm {
+  inline-size: min(24rem, calc(100% - var(--gr-gap) * 2));
+}
+
+.gr-modal-lg {
+  inline-size: min(48rem, calc(100% - var(--gr-gap) * 2));
+}
+
+// Во весь экран, с полями по краям. Пригодно для просмотрщика и для
+// длинной формы на узком экране.
+.gr-modal-full {
+  inline-size: calc(100% - var(--gr-gap) * 2);
+  block-size: calc(100% - var(--gr-gap) * 2);
+  max-block-size: none;
+}
+
+// --- Появление --------------------------------------------------------------
+
+// Окно проявляется и подъезжает снизу, подложка — только проявляется.
+// display и overlay переводятся через allow-discrete: без этого окно
+// возникало бы мгновенно, минуя переход.
+@supports (transition-behavior: allow-discrete) {
+  .gr-modal {
+    opacity: 0;
+    translate: 0 var(--gr-gap);
+    transition:
+      opacity var(--gr-transition),
+      translate var(--gr-transition),
+      overlay var(--gr-transition) allow-discrete,
+      display var(--gr-transition) allow-discrete;
+  }
+
+  .gr-modal[open] {
+    opacity: 1;
+    translate: 0;
+  }
+
+  .gr-modal::backdrop {
+    opacity: 0;
+    transition:
+      opacity var(--gr-transition),
+      overlay var(--gr-transition) allow-discrete,
+      display var(--gr-transition) allow-discrete;
+  }
+
+  .gr-modal[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    .gr-modal[open] {
+      opacity: 0;
+      translate: 0 var(--gr-gap);
+    }
+
+    .gr-modal[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-modal {
+    translate: none;
+    transition-duration: 0.01ms;
+  }
+
+  .gr-modal::backdrop {
+    transition-duration: 0.01ms;
+  }
+}