griffincss-ui 0.16.0

package/scss/_card.scss

@@ -0,0 +1,110 @@
+// Griffincss UI — Card
+// Карточка: поверхность с границей, скруглением и тремя необязательными
+// поясами — шапкой, телом и подвалом.
+//
+// Колонка на flex, а не блок: подвал должен прижиматься к низу, когда
+// карточки в ряду выровнены по высоте (.gr-grid-rows, align-items: stretch),
+// а тело — забирать остаток.
+
+.gr-card {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  min-inline-size: 0;
+  border: var(--gr-border-width) solid var(--gr-color-border);
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface);
+  color: var(--gr-color-text);
+  overflow: hidden;
+}
+
+// Тело забирает остаток высоты, поэтому подвал остаётся внизу
+// независимо от того, сколько в теле текста.
+.gr-card-body {
+  flex: 1 1 auto;
+  padding: var(--gr-gap);
+}
+
+.gr-card-header,
+.gr-card-footer {
+  padding-block: calc(var(--gr-gap) * 0.75);
+  padding-inline: var(--gr-gap);
+}
+
+.gr-card-header {
+  border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+  font-weight: 600;
+}
+
+.gr-card-footer {
+  border-block-start: var(--gr-border-width) solid var(--gr-color-border);
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+}
+
+// Картинка во всю ширину карточки. Скругление ей не нужно: его срезает
+// overflow: hidden обёртки, поэтому медиа одинаково лежит и сверху, и снизу.
+.gr-card-media {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  object-fit: cover;
+}
+
+// --- Варианты ---------------------------------------------------------------
+
+// Приподнятая: тень вместо границы. Плотность тени задаёт тема
+// (--gr-shadow-strength), поэтому на тёмном фоне карточка не растворяется.
+.gr-card-raised {
+  border-color: transparent;
+  background-color: var(--gr-color-surface-raised);
+  box-shadow: var(--gr-shadow-md);
+}
+
+// Плоская: только фон, ни границы, ни тени.
+.gr-card-flat {
+  border-color: transparent;
+  background-color: var(--gr-color-surface);
+  box-shadow: none;
+}
+
+// --- Кликабельная карточка --------------------------------------------------
+
+// Кликабельна вся площадь, но фокус остаётся на ссылке. Приём известен как
+// «растянутая ссылка»: ::after ссылки покрывает карточку целиком, поэтому
+// мышь попадает по всей плитке, а Tab по-прежнему приводит к одному
+// элементу с настоящим href — вторая обёртка <a> вокруг карточки такого
+// не даёт и ломает вложенные ссылки.
+//
+// Условие работы: у карточки position: relative, у ссылки — нет.
+.gr-card-interactive {
+  position: relative;
+  transition: border-color var(--gr-transition), box-shadow var(--gr-transition);
+}
+
+.gr-card-interactive :where(a[href])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+@media (hover: hover) {
+  .gr-card-interactive:hover {
+    border-color: var(--gr-color-border-strong);
+    box-shadow: var(--gr-shadow-md);
+  }
+}
+
+// Контур рисуется вокруг карточки, а не вокруг строчки текста ссылки:
+// мишень у указателя и мишень у клавиатуры должны совпадать.
+.gr-card-interactive:focus-within {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+// Текст ссылки внутри кликабельной карточки не подчёркивается и не красится:
+// ссылка здесь — вся карточка, а не одно её слово.
+.gr-card-interactive :where(a[href]) {
+  color: inherit;
+  text-decoration: none;
+}

package/scss/_choice.scss

@@ -0,0 +1,202 @@
+// Griffincss UI — Choice
+// Флажок, радиокнопка, переключатель и сегментный переключатель.
+//
+// Элемент не подменяется: класс ставится на сам <input>, а не на скрытый
+// input рядом с оформленным <span>. Родная разметка сохраняет и участие
+// в форме, и клавиатуру, и объявление состояния скринридером — всё то,
+// что приходится восстанавливать вручную, когда input прячут.
+//
+// Флажок и радиокнопка остаются системными: их рисует ОС, а цвет отметки
+// задаётся одним свойством accent-color. Переключателя среди типов <input>
+// нет — его дорожка и бегунок рисуются фоном, но сам элемент по-прежнему
+// <input type="checkbox">.
+
+// --- Флажок и радиокнопка ---------------------------------------------------
+
+.gr-checkbox,
+.gr-radio {
+  --gr-choice-size: 1.15em;
+
+  flex: none;
+  inline-size: var(--gr-choice-size);
+  block-size: var(--gr-choice-size);
+  margin: 0;
+  accent-color: var(--gr-color-accent);
+  cursor: pointer;
+}
+
+.gr-checkbox:focus-visible,
+.gr-radio:focus-visible,
+.gr-switch:focus-visible {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+.gr-checkbox:disabled,
+.gr-radio:disabled,
+.gr-switch:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+// --- Переключатель ----------------------------------------------------------
+
+// Бегунок — фоновое изображение, а не ::before: псевдоэлементы на <input>
+// поддерживаются не везде, а фон работает всюду. background-origin:
+// content-box отводит бегунку внутреннюю область, поэтому отступ от края
+// дорожки задаётся обычным padding.
+.gr-switch {
+  --gr-switch-track: 2.25rem;
+  --gr-switch-thumb: 1rem;
+
+  box-sizing: border-box;
+  flex: none;
+  inline-size: var(--gr-switch-track);
+  block-size: calc(var(--gr-switch-thumb) + 0.375rem);
+  margin: 0;
+  padding: 0.1875rem;
+  border: var(--gr-border-width) solid var(--gr-color-border-strong);
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-color-surface-sunken);
+  background-image: radial-gradient(circle at 50% 50%, var(--gr-color-text-secondary) 45%, transparent 46%);
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: var(--gr-switch-thumb) var(--gr-switch-thumb);
+  background-origin: content-box;
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color var(--gr-transition),
+    background-position var(--gr-transition),
+    border-color var(--gr-transition);
+}
+
+.gr-switch:checked {
+  border-color: var(--gr-color-accent);
+  background-color: var(--gr-color-accent);
+  background-image: radial-gradient(circle at 50% 50%, var(--gr-color-on-accent) 45%, transparent 46%);
+  background-position: right center;
+}
+
+// Единственное движение в модуле — переезд бегунка. Тем, кто просил
+// уменьшить анимацию, он достаётся мгновенным; цвет продолжает меняться
+// плавно, это не движение.
+@media (prefers-reduced-motion: reduce) {
+  .gr-switch {
+    transition:
+      background-color var(--gr-transition),
+      border-color var(--gr-transition);
+  }
+}
+
+// --- Сегментный переключатель -----------------------------------------------
+
+// Ряд взаимоисключающих вариантов из обычной радиогруппы. Оформляется
+// <fieldset>, поэтому у группы есть имя для скринридера (<legend> или
+// aria-label), а выбор переключается стрелками — это даёт платформа.
+//
+// Селекторы по элементам, а не по классам: разметка внутри фиксирована
+// (label > input + span), и требовать класс на каждом из трёх уровней
+// значило бы разменивать краткость на ничто.
+.gr-segmented {
+  // Внутренний радиус: скругление рамки за вычетом её толщины. Он нужен
+  // крайним сегментам ниже, чтобы их заливка легла ровно по рамке.
+  // Считается, а не задаётся: в режиме для слабовидящих --gr-border-width
+  // вырастает до 2px, и скругление обязано подвинуться следом.
+  --gr-segmented-radius: calc(var(--gr-radius) - var(--gr-border-width));
+
+  display: inline-flex;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: var(--gr-border-width) solid var(--gr-color-border-strong);
+  border-radius: var(--gr-radius);
+}
+
+.gr-segmented label {
+  display: block;
+  position: relative;
+  flex: 1;
+}
+
+// Сам input не прячется display: none и не убирается из потока навсегда —
+// он остаётся фокусируемым, иначе группа перестала бы работать с клавиатуры.
+.gr-segmented input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.gr-segmented span {
+  display: block;
+  padding-block: 0.375rem;
+  padding-inline: var(--gr-ui-gap);
+  border-inline-start: var(--gr-border-width) solid var(--gr-color-border);
+  color: var(--gr-color-text-secondary);
+  font-size: 0.875rem;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--gr-transition), color var(--gr-transition);
+}
+
+// Скругление крайних сегментов задаётся явно, а не берётся из overflow:
+// hidden на обёртке. Обрезка по overflow идёт по внутреннему краю рамки,
+// но с ВНЕШНИМ радиусом, поэтому в углах между заливкой и рамкой оставался
+// зазор — фон переключателя не совпадал с его границами. Свои радиусы
+// у сегментов ложатся по рамке точно.
+.gr-segmented label:first-child span {
+  border-inline-start: 0;
+  border-start-start-radius: var(--gr-segmented-radius);
+  border-end-start-radius: var(--gr-segmented-radius);
+}
+
+.gr-segmented label:last-child span {
+  border-start-end-radius: var(--gr-segmented-radius);
+  border-end-end-radius: var(--gr-segmented-radius);
+}
+
+@media (hover: hover) {
+  .gr-segmented span:hover {
+    background-color: var(--gr-color-surface-raised);
+    color: var(--gr-color-text);
+  }
+}
+
+.gr-segmented input:checked + span {
+  background-color: var(--gr-color-accent);
+  color: var(--gr-color-on-accent);
+}
+
+// Контур внутрь: снаружи он налез бы на соседний сегмент и на рамку
+// обёртки, а у среднего сегмента ещё и на оба сразу.
+.gr-segmented input:focus-visible + span {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: calc(-1 * var(--gr-focus-width) - 1px);
+}
+
+.gr-segmented input:disabled + span {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+// --- Строка выбора ----------------------------------------------------------
+
+// Флажок и подпись в одну строку, с общим кликом по подписи: <label>
+// целиком становится мишенью, а не одни 16 пикселей квадратика.
+.gr-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gr-ui-gap);
+  color: var(--gr-color-text);
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.gr-choice:has(:disabled) {
+  color: var(--gr-color-text-disabled);
+  cursor: not-allowed;
+}

package/scss/_drawer.scss

@@ -0,0 +1,183 @@
+// Griffincss UI — Drawer
+// Выдвижная панель — тот же <dialog>, что и модальное окно, но прижатый
+// к краю экрана. Верхний слой, фокус, Esc и инертность страницы под панелью
+// платформа даёт так же, как модалке.
+//
+// Пояса берутся у модалки: .gr-modal-header, -body, -footer работают
+// и здесь. Дублировать их незачем — панель отличается только положением
+// и размерами, а не устройством.
+//
+//   <dialog class="gr-drawer gr-drawer-end">
+//     <div class="gr-modal-header">…</div>
+//     <div class="gr-modal-body">…</div>
+//   </dialog>
+//
+// Сторона задаётся вылетами (inset), а не полями. У модального <dialog>
+// UA-стиль ставит inset: 0 и margin: auto, и при таком наборе высота auto
+// перестаёт считаться по содержимому: два заданных вылета растягивают
+// элемент, а auto-поле забирает остаток. Верхняя панель из-за этого
+// занимала ровно половину экрана и стояла полупустой. Отпущенный вылет
+// на противоположной стороне возвращает высоту содержимому.
+//
+// Размеры — в процентах, а не в 100vw: единица vw включает ширину полосы
+// прокрутки, и панель во «всю ширину» оказывалась шире видимой области,
+// уезжая правым краем под полосу.
+
+// Строение панели и её position живут в базовом правиле, а не в [open]:
+// атрибут снимается в первый кадр close(), а переход по display держит
+// панель на экране до конца анимации — всё, что осталось в [open],
+// пропадает раньше самой панели. См. подробный разбор в _modal.scss.
+.gr-drawer {
+  --gr-drawer-size: 20rem;
+
+  // Направление выезда. Объявлено здесь, а не в блоке анимации: там оно
+  // стояло бы ПОСЛЕ классов сторон с той же специфичностью и перебивало бы
+  // их значение — панель начала строки выезжала бы справа.
+  --gr-drawer-slide: 100%;
+
+  position: fixed;
+  box-sizing: border-box;
+  flex-direction: column;
+  inset-block: 0;
+  inline-size: min(var(--gr-drawer-size), 100%);
+  max-inline-size: none;
+  block-size: auto;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--gr-color-surface-overlay);
+  color: var(--gr-color-text);
+  box-shadow: var(--gr-shadow-xl);
+  overflow: hidden;
+}
+
+.gr-drawer[open] {
+  display: flex;
+}
+
+.gr-drawer::backdrop {
+  background-color: var(--gr-overlay);
+}
+
+// --- Стороны ----------------------------------------------------------------
+
+// Начало и конец строки — не «слева» и «справа»: в разметке на арабском
+// панель конца строки выедет с левого края, и это правильное поведение.
+// Сдвиг для выезда задан в процентах от самой панели, поэтому он совпадает
+// с её шириной при любом --gr-drawer-size.
+.gr-drawer-start {
+  --gr-drawer-slide: -100%;
+
+  inset-inline: 0 auto;
+  border-inline-end: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+.gr-drawer-end {
+  --gr-drawer-slide: 100%;
+
+  inset-inline: auto 0;
+  border-inline-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// Верхняя и нижняя занимают всю ширину, а высоту берут по содержимому,
+// но не выше половины экрана: панель, закрывшая страницу целиком, — это
+// уже модальное окно.
+.gr-drawer-top,
+.gr-drawer-bottom {
+  inset-inline: 0;
+  inline-size: auto;
+  block-size: auto;
+  max-block-size: 50dvh;
+}
+
+.gr-drawer-top {
+  --gr-drawer-slide: -100%;
+
+  inset-block: 0 auto;
+  border-block-end: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+.gr-drawer-bottom {
+  --gr-drawer-slide: 100%;
+
+  inset-block: auto 0;
+  border-block-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// --- Размеры ----------------------------------------------------------------
+
+.gr-drawer-sm {
+  --gr-drawer-size: 15rem;
+}
+
+.gr-drawer-lg {
+  --gr-drawer-size: 28rem;
+}
+
+// --- Появление --------------------------------------------------------------
+
+// Панель выезжает с той стороны, к которой прижата: направление задаёт
+// --gr-drawer-slide, объявленная вместе со стороной. У верхней и нижней
+// сдвиг по другой оси, поэтому translate записан двумя значениями.
+@supports (transition-behavior: allow-discrete) {
+  .gr-drawer {
+    opacity: 0;
+    translate: var(--gr-drawer-slide) 0;
+    transition:
+      opacity var(--gr-transition),
+      translate var(--gr-transition),
+      overlay var(--gr-transition) allow-discrete,
+      display var(--gr-transition) allow-discrete;
+  }
+
+  .gr-drawer-top,
+  .gr-drawer-bottom {
+    translate: 0 var(--gr-drawer-slide);
+  }
+
+  .gr-drawer[open] {
+    opacity: 1;
+    translate: 0;
+  }
+
+  .gr-drawer::backdrop {
+    opacity: 0;
+    transition:
+      opacity var(--gr-transition),
+      overlay var(--gr-transition) allow-discrete,
+      display var(--gr-transition) allow-discrete;
+  }
+
+  .gr-drawer[open]::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    .gr-drawer[open] {
+      opacity: 0;
+      translate: var(--gr-drawer-slide) 0;
+    }
+
+    .gr-drawer-top[open],
+    .gr-drawer-bottom[open] {
+      translate: 0 var(--gr-drawer-slide);
+    }
+
+    .gr-drawer[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-drawer {
+    translate: none;
+    transition-duration: 0.01ms;
+  }
+
+  .gr-drawer::backdrop {
+    transition-duration: 0.01ms;
+  }
+}