griffincss-ui 0.16.0

package/scss/_dropdown.scss

@@ -0,0 +1,229 @@
+// Griffincss UI — Dropdown
+// Выпадающая панель под кнопкой. Внутрь кладут .gr-menu, но не обязательно:
+// панель — просто поверхность, на ней может стоять форма или список ссылок.
+//
+// Раскрытие берётся у платформы двумя способами, и оба работают без скрипта:
+//
+//   1. <details class="gr-dropdown"> — работает везде. Панель позиционируется
+//      абсолютно внутри обёртки. Закрытия по клику мимо и по Esc платформа
+//      здесь не даёт: <details> о них не знает.
+//
+//   2. <button popovertarget> + панель с атрибутом popover — верхний слой,
+//      закрытие по Esc и по клику мимо даёт браузер. Панель в верхнем слое
+//      позиционируется относительно окна, а не обёртки, поэтому привязать
+//      её к кнопке может только CSS anchor positioning. Там, где его нет,
+//      панель раскрывается листом у нижнего края экрана — положение не то,
+//      но меню доступно и закрывается штатно.
+//
+// Оба пути — один класс панели: .gr-dropdown-panel. Третий, .gr-dropdown-hover,
+// раскрывает ту же панель наведением — со своими ограничениями, см. ниже.
+
+// --- Обёртка ----------------------------------------------------------------
+
+.gr-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+// Кнопка на <summary>: родной треугольник снимается, остальное оформление
+// берётся у .gr-btn — класс ставится на тот же элемент.
+.gr-dropdown > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.gr-dropdown > summary::-webkit-details-marker {
+  display: none;
+}
+
+// --- Панель -----------------------------------------------------------------
+
+.gr-dropdown-panel {
+  position: absolute;
+  z-index: var(--gr-z-dropdown);
+  inset-block-start: calc(100% + var(--gr-ui-gap) * 0.5);
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  min-inline-size: max-content;
+  max-inline-size: min(20rem, 90vw);
+  margin: 0;
+}
+
+// Раскрытие к концу строки — для панели у правого края шапки, которая иначе
+// вылезла бы за экран.
+.gr-dropdown-end .gr-dropdown-panel {
+  inset-inline: auto 0;
+}
+
+// Раскрытие вверх — для панели в подвале страницы.
+.gr-dropdown-up .gr-dropdown-panel {
+  inset-block: auto calc(100% + var(--gr-ui-gap) * 0.5);
+}
+
+// --- Панель в верхнем слое --------------------------------------------------
+
+// UA-стиль попапа задаёт inset: 0 и margin: auto — панель повисла бы
+// посреди экрана. Сбрасываем и то, и другое; рамка и фон приходят
+// от .gr-menu или от того, что положат внутрь.
+// margin: 0 обязателен. У попапа UA-стиль ставит margin: auto, и при
+// раскладке по position-area свободное место уходит в автополя — заданный
+// отступ от кнопки съедается, панель прилипает к ней вплотную.
+.gr-dropdown-panel[popover] {
+  position: fixed;
+  inset: auto 0 0;
+  max-inline-size: 100%;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  overflow: visible;
+}
+
+// Привязка к кнопке. anchor-scope ограничивает имя якоря поддеревом обёртки:
+// без него все дропдауны страницы с одинаковым --gr-dropdown-anchor
+// притягивались бы к последнему в документе — правило выбора якоря берёт
+// последний подходящий элемент в порядке дерева.
+//
+// Вылеты заданы функцией anchor() поимённо, а не через position-area:
+// при раскладке по области поля панели уходят в выравнивание внутри неё,
+// и отступ от кнопки съедается — панель прилипает к ней вплотную.
+// С anchor() зазор считается там же, где у обычной, не всплывающей панели.
+@supports (anchor-name: --gr-dropdown-anchor) {
+  .gr-dropdown {
+    anchor-scope: --gr-dropdown-anchor;
+  }
+
+  .gr-dropdown > :where(summary, button, .gr-btn) {
+    anchor-name: --gr-dropdown-anchor;
+  }
+
+  .gr-dropdown-panel[popover] {
+    position-anchor: --gr-dropdown-anchor;
+    inset-block: calc(anchor(end) + var(--gr-ui-gap) * 0.5) auto;
+    inset-inline: anchor(start) auto;
+    min-inline-size: max-content;
+    max-inline-size: min(20rem, 90%);
+
+    // Если снизу места нет — панель переворачивается вверх, если не хватает
+    // вбок — к другому краю кнопки. Без этого меню у нижнего края окна
+    // уезжало бы за пределы экрана.
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+
+  .gr-dropdown-end .gr-dropdown-panel[popover] {
+    inset-inline: auto anchor(end);
+  }
+
+  .gr-dropdown-up .gr-dropdown-panel[popover] {
+    inset-block: auto calc(anchor(start) + var(--gr-ui-gap) * 0.5);
+  }
+}
+
+// --- Раскрытие по наведению --------------------------------------------------
+
+// Третий способ раскрытия, для навигационных меню: панель показывается,
+// пока указатель на обёртке. Скрипт не нужен и здесь — но у способа есть
+// цена, и она честная:
+//
+//   * на сенсорном экране наведения нет вовсе, поэтому меню открывается
+//     по фокусу: тап по кнопке ставит фокус, :focus-within раскрывает
+//     панель. Кнопка обязана быть <button> — на <div> фокуса не будет;
+//   * состояние не сообщается разметкой: aria-expanded без скрипта
+//     не обновить, поэтому кнопке ставят aria-haspopup="true" и не ставят
+//     aria-expanded — лгать об открытости хуже, чем промолчать;
+//   * закрытия по Esc платформа тут не даёт: наведение — не «открытое
+//     состояние» с точки зрения браузера.
+//
+// Для меню с действиями — «Удалить», «Выйти» — берут <details> или попап:
+// там состояние настоящее. Наведение годится для навигации, где случайное
+// раскрытие ничего не стоит.
+//
+// Панель прячется visibility, а не display: скрытая через display, она
+// не участвовала бы в переходе, а visibility и из дерева доступности убирает,
+// и анимируется.
+.gr-dropdown-hover .gr-dropdown-panel {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--gr-transition),
+    visibility var(--gr-transition);
+
+  // Задержка на закрытие: указатель, соскользнувший с кнопки мимо панели,
+  // не должен захлопывать меню мгновенно.
+  transition-delay: 0.25s;
+}
+
+// Мостик через зазор между кнопкой и панелью. Без него указатель, идущий
+// от кнопки к меню, пересекает пустое место, наведение прерывается,
+// и панель закрывается на полпути.
+.gr-dropdown-hover .gr-dropdown-panel::before {
+  content: "";
+  position: absolute;
+  inset-block-end: 100%;
+  inset-inline: 0;
+  block-size: calc(var(--gr-ui-gap) * 0.5);
+}
+
+// У раскрытой вверх панели зазор с другой стороны.
+.gr-dropdown-hover.gr-dropdown-up .gr-dropdown-panel::before {
+  inset-block: 100% auto;
+}
+
+@media (hover: hover) {
+  .gr-dropdown-hover:hover .gr-dropdown-panel {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+  }
+}
+
+// Клавиатура и сенсорный экран: фокус внутри обёртки раскрывает панель
+// без всякого наведения.
+.gr-dropdown-hover:focus-within .gr-dropdown-panel {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-dropdown-hover .gr-dropdown-panel {
+    transition-duration: 0.01ms;
+  }
+}
+
+// --- Появление --------------------------------------------------------------
+
+// Панель появляется сдвигом на её же зазор и проявлением. Переход в display
+// объявлен через allow-discrete, иначе анимации не было бы вовсе: попап
+// переключается сразу из display: none.
+@supports (transition-behavior: allow-discrete) {
+  .gr-dropdown-panel[popover] {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--gr-ui-gap) * 0.5);
+    transition:
+      opacity var(--gr-transition),
+      translate var(--gr-transition),
+      overlay var(--gr-transition) allow-discrete,
+      display var(--gr-transition) allow-discrete;
+  }
+
+  .gr-dropdown-panel[popover]:popover-open {
+    opacity: 1;
+    translate: 0;
+  }
+
+  @starting-style {
+    .gr-dropdown-panel[popover]:popover-open {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--gr-ui-gap) * 0.5);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-dropdown-panel[popover] {
+    translate: none;
+    transition-duration: 0.01ms;
+  }
+}

package/scss/_empty.scss

@@ -0,0 +1,70 @@
+// Griffincss UI — Empty state
+// Пустое состояние: список без записей, поиск без результатов, папка,
+// в которую ещё ничего не положили.
+//
+//   <div class="gr-empty">
+//     <span class="gr-empty-icon" aria-hidden="true">📭</span>
+//     <p class="gr-empty-title">Пока пусто</p>
+//     <p class="gr-empty-text">Здесь появятся заказы, как только вы
+//       оформите первый.</p>
+//     <div class="gr-empty-actions">
+//       <a class="gr-btn gr-btn-primary" href="/catalog">В каталог</a>
+//     </div>
+//   </div>
+//
+// Пустое состояние без действия — тупик: человек прочитал, что записей нет,
+// и остался с этим один на один. Поэтому в модуле есть слот под кнопку,
+// и ставить её стоит везде, где следующий шаг вообще существует.
+
+.gr-empty {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  padding-block: calc(var(--gr-gap) * 2);
+  padding-inline: var(--gr-gap);
+  color: var(--gr-color-text-secondary);
+  text-align: center;
+}
+
+.gr-empty-icon {
+  color: var(--gr-color-text-muted);
+  font-size: 2.5rem;
+  line-height: 1;
+}
+
+.gr-empty-title {
+  margin: 0;
+  color: var(--gr-color-text);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+// Пояснение — единственный текст на пустом экране, и во всю ширину таблицы
+// оно читается плохо: строка уходит далеко за комфортные 60–70 знаков.
+// Ограничение задано в ch, поэтому оно следует кеглю и переживает режим
+// для слабовидящих.
+.gr-empty-text {
+  max-inline-size: 46ch;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.gr-empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gr-ui-gap);
+  justify-content: center;
+  margin-block-start: calc(var(--gr-ui-gap) * 0.5);
+}
+
+// Вариант в рамке: то же состояние внутри пунктирной коробки — годится
+// там, где пустое место иначе не читается как часть интерфейса, например
+// в колонке доски задач.
+.gr-empty-boxed {
+  border: var(--gr-border-width) dashed var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: color-mix(in srgb, currentcolor 3%, transparent);
+}

package/scss/_form.scss

@@ -0,0 +1,236 @@
+// Griffincss UI — Form
+// Поля ввода, метки, подсказки и сообщения об ошибке.
+//
+// Три поля — .gr-input, .gr-textarea, .gr-select — одна семья элементов
+// управления: общая высота, общий кегль, общие состояния. Поэтому и размер
+// у них задаётся одной парой классов, .gr-input-sm / .gr-input-lg,
+// на любом из трёх.
+//
+// Родной вид элемента не подменяется там, где его можно оставить:
+// у <input type="date"> остаётся системный календарь, у <input type="color"> —
+// системная палитра. Меняются рамка, фон и кегль.
+//
+// Исключение — стрелка <select>. Её положение задаёт браузер, и на
+// padding-inline-end она не реагирует: стрелка прижимается вплотную к краю
+// поля, а в разных браузерах ещё и выглядит по-разному. Поэтому у списка
+// appearance: none и своя стрелка фоном, отбитая от края на --gr-control-padding-x.
+// Сам элемент при этом остаётся <select> — как <input type="checkbox">
+// остаётся собой под классом .gr-switch.
+
+// --- Обёртка ----------------------------------------------------------------
+
+// Метка, поле и подсказка одной колонкой. Зазор вдвое меньше --gr-ui-gap:
+// подпись должна читаться как часть поля, а не как соседний блок.
+.gr-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+}
+
+.gr-label {
+  color: var(--gr-color-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.gr-hint {
+  color: var(--gr-color-text-muted);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+// Сообщение об ошибке. Цвет — не единственный признак: рядом с полем стоит
+// текст, который переживает и печать, и дальтонизм.
+.gr-error {
+  color: var(--gr-color-danger);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+// --- Поля -------------------------------------------------------------------
+
+.gr-input,
+.gr-textarea,
+.gr-select {
+  --gr-control-h: var(--gr-control-height);
+
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--gr-control-h);
+  margin: 0;
+  padding-block: 0.375rem;
+  padding-inline: var(--gr-control-padding-x);
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-bg);
+  color: var(--gr-color-text);
+  font-family: inherit;
+  font-size: var(--gr-control-font-size);
+  line-height: 1.4;
+  transition: border-color var(--gr-transition);
+}
+
+// Многострочное поле выше однострочного и тянется только по вертикали:
+// горизонтальное растягивание ломает колонку разметки.
+.gr-textarea {
+  min-block-size: calc(var(--gr-control-h) * 2);
+  resize: vertical;
+}
+
+// Стрелка — один треугольник из конического градиента. Не картинка
+// и не data-URI: цвет берётся из currentcolor, поэтому стрелка следует
+// и теме, и состоянию :disabled, а SVG с зашитым цветом не следовал бы
+// ни тому, ни другому.
+//
+// Раньше её складывали из двух линейных градиентов, стыкующихся встык.
+// Геометрия сходилась точно — сдвиг между слоями был ровно равен ширине
+// половины, — но координаты обеих половин дробные, а округляются при
+// растеризации независимо. Стоило стилю оформления сдвинуть отступ так,
+// что одна половина попадала на 10.5px, а другая на 15.94px, как половины
+// расходились на полпикселя и «галочка» выглядела сломанной. Одна фигура
+// одним слоем такого шва не имеет в принципе.
+//
+// Сектор 90°, отсчёт от −45°: из нижней центральной точки лучи идут
+// в верхние углы коробки, вдвое более широкой, чем высокой.
+.gr-select {
+  --gr-select-arrow: 0.34rem;
+
+  padding-inline-end: calc(var(--gr-control-padding-x) * 2 + var(--gr-select-arrow) * 2);
+  background-image: conic-gradient(from -45deg at 50% 100%, currentcolor 0 90deg, transparent 0);
+  background-repeat: no-repeat;
+
+  // Отсчёт от правого края в три значения: так отступ задаётся точно,
+  // а не долей от разницы размеров, как при записи процентом.
+  background-position: right var(--gr-control-padding-x) center;
+  background-size: calc(var(--gr-select-arrow) * 2) var(--gr-select-arrow);
+  appearance: none;
+}
+
+// Список с несколькими строками не выпадает — стрелке там нечего показывать.
+.gr-select[multiple],
+.gr-select[size] {
+  padding-inline-end: var(--gr-control-padding-x);
+  background-image: none;
+}
+
+.gr-input::placeholder,
+.gr-textarea::placeholder {
+  color: var(--gr-color-text-muted);
+  opacity: 1;
+}
+
+.gr-input:focus-visible,
+.gr-textarea:focus-visible,
+.gr-select:focus-visible {
+  border-color: var(--gr-color-accent);
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 1px;
+}
+
+// :user-invalid, а не :invalid — пустое обязательное поле не должно краснеть
+// до того, как человек его тронул. Атрибут aria-invalid рядом: его ставит
+// серверная проверка, которой правила браузера не касаются.
+.gr-input:user-invalid,
+.gr-textarea:user-invalid,
+.gr-select:user-invalid,
+.gr-input[aria-invalid="true"],
+.gr-textarea[aria-invalid="true"],
+.gr-select[aria-invalid="true"] {
+  border-color: var(--gr-color-danger);
+}
+
+.gr-input:disabled,
+.gr-textarea:disabled,
+.gr-select:disabled {
+  border-color: var(--gr-color-border);
+  background-color: var(--gr-color-surface-sunken);
+  color: var(--gr-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.gr-input:read-only:not(:disabled),
+.gr-textarea:read-only:not(:disabled) {
+  background-color: var(--gr-color-surface);
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+.gr-input-sm {
+  --gr-control-h: var(--gr-control-height-sm);
+
+  padding-block: 0.1875rem;
+  padding-inline: calc(var(--gr-control-padding-x) * 0.7);
+  font-size: 0.875rem;
+}
+
+.gr-input-lg {
+  --gr-control-h: var(--gr-control-height-lg);
+
+  padding-block: 0.5rem;
+  padding-inline: calc(var(--gr-control-padding-x) * 1.4);
+  font-size: 1.125rem;
+}
+
+// --- Группа с аддонами ------------------------------------------------------
+
+// Поле и приклеенные к нему подпись или кнопка. Как и в .gr-btn-group,
+// соседние границы наезжают друг на друга на свою толщину.
+.gr-input-group {
+  display: flex;
+  inline-size: 100%;
+}
+
+.gr-input-group > * {
+  border-radius: 0;
+}
+
+.gr-input-group > :first-child {
+  border-start-start-radius: var(--gr-radius);
+  border-end-start-radius: var(--gr-radius);
+}
+
+.gr-input-group > :last-child {
+  border-start-end-radius: var(--gr-radius);
+  border-end-end-radius: var(--gr-radius);
+}
+
+.gr-input-group > * + * {
+  margin-inline-start: calc(-1 * var(--gr-border-width));
+}
+
+// Поле в группе тянется, аддон — нет.
+.gr-input-group > .gr-input,
+.gr-input-group > .gr-select {
+  flex: 1 1 auto;
+  inline-size: auto;
+  min-inline-size: 0;
+}
+
+// Сфокусированное поле поднимается над соседями: иначе контур фокуса
+// оказался бы наполовину закрыт аддоном.
+.gr-input-group > :focus-within,
+.gr-input-group > :focus-visible {
+  position: relative;
+  z-index: 1;
+}
+
+// Неинтерактивная подпись у края поля — единица измерения, валюта, префикс.
+// Своя --gr-control-h, а не унаследованная: аддон полю не потомок, а сосед,
+// поэтому размер ему задаётся тем же .gr-input-sm на нём самом.
+.gr-input-addon {
+  --gr-control-h: var(--gr-control-height);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  align-items: center;
+  min-block-size: var(--gr-control-h);
+  padding-inline: var(--gr-control-padding-x);
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  background-color: var(--gr-color-surface-raised);
+  color: var(--gr-color-text-secondary);
+  font-size: var(--gr-control-font-size);
+  white-space: nowrap;
+}

package/scss/_keyframes.scss

@@ -0,0 +1,39 @@
+// Griffincss UI — Keyframes
+// Отдельный файл, а не части модулей: внутри @scope правила @keyframes
+// недействительны, поэтому в scoped-сборке они подключаются вне области
+// видимости. Имена префиксованы gr-, чтобы не столкнуться с анимациями
+// проекта.
+
+// Тот же keyframe, что у .gr-animate-spin в griffincss-utils: имя одно,
+// а пакеты независимы, и определения обязаны совпадать посимвольно.
+// Разойдись они — картинка зависела бы от того, какой файл подключён,
+// потому что слой утилит старше слоя компонентов. Совпадение сторожит
+// тест «кольцо спиннера крутит тот же keyframe, что и утилита».
+@keyframes gr-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Бегущая полоса неопределённого прогресса. Ездит физическим направлением,
+// а не логическим: индикатор занятости ничего не сообщает о направлении
+// чтения, и переворачивать его в RTL значило бы приписать ему смысл,
+// которого у него нет.
+@keyframes gr-progress-slide {
+  from {
+    background-position-x: 0%;
+  }
+
+  to {
+    background-position-x: 100%;
+  }
+}
+
+// Мерцание заглушки. Меняется прозрачность, а не цвет: заглушка залита
+// оттенком currentcolor, и анимировать цвет пришлось бы через color-mix
+// в каждом кадре.
+@keyframes gr-skeleton-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}