griffincss-ui 0.26.1 → 0.27.0

package/scss/_prose.scss

@@ -0,0 +1,116 @@
+// Griffincss UI — Prose
+// Форматированный текст, у детей которого нет классов: HTML из редактора,
+// описание товара, запись блога. Класс ставится на обёртку, а ритм,
+// подзаголовки, списки, цитата, ссылки, разделитель и таблица оформляются
+// по тегам.
+//
+//   <div class="gr-prose">{{ description }}</div>
+//
+// Правила детей записаны целиком под :where(): вес у них нулевой, и любой
+// класс на ребёнке сильнее прозы — утилита (.gr-mt-0), компонент (.gr-btn,
+// .gr-alert). Списки и ссылки оформляются только без класса: у .gr-menu,
+// .gr-steps и ссылки-кнопки свой вид. Поля проза ставит сама, а не берёт
+// у ресета: ресет подключают не все, и без него у абзаца поля браузера,
+// с ним — ноль.
+//
+// Меры строки в классе нет: ширину решает место — колонка, карточка, окно.
+// Мера текста — утилита .gr-max-w-prose. Вид таблицы — в _table.scss:
+// <table> в прозе оформлен теми же правилами, что .gr-table.
+
+// Длинная ссылка или слово без пробелов не выталкивают колонку вбок:
+// текст в редакторе пишет кто угодно.
+.gr-prose {
+  overflow-wrap: break-word;
+}
+
+// --- Ритм -------------------------------------------------------------------
+
+// Поле — только между соседями: у прямых детей прозы и у детей цитаты
+// и пункта списка (редактор кладёт абзацы и туда). У крайних детей полей
+// нет — блок не спорит с отступами вокруг себя.
+:where(.gr-prose, .gr-prose blockquote, .gr-prose li) > * {
+  margin-block: 0;
+}
+
+:where(.gr-prose, .gr-prose blockquote, .gr-prose li) > * + * {
+  margin-block-start: var(--gr-gap);
+}
+
+// Подзаголовок ближе к своему тексту, чем к предыдущему, а разделитель
+// отбивает разделы — поле вокруг него крупнее абзацного.
+:where(.gr-prose > * + :is(h1, h2, h3, h4, h5, h6), .gr-prose > * + hr, .gr-prose > hr + *) {
+  margin-block-start: var(--gr-gap-lg);
+}
+
+:where(.gr-prose > :is(h1, h2, h3, h4, h5, h6) + *) {
+  margin-block-start: var(--gr-gap-sm);
+}
+
+// --- Списки -----------------------------------------------------------------
+
+// Маркеры — браузера: ресет снимает их только со списков с role="list".
+// Отступ теснее браузерных 40px — на узком экране они съедали строку.
+// Пункты и вложенный список теснее абзацев.
+:where(.gr-prose :is(ul, ol):not([class])) {
+  padding-inline-start: 1.5em;
+}
+
+:where(.gr-prose :is(ul, ol):not([class]) > li + li, .gr-prose li > :is(ul, ol)) {
+  margin-block-start: var(--gr-gap-sm);
+}
+
+:where(.gr-prose :is(ul, ol):not([class]) > li)::marker {
+  color: var(--gr-color-text-secondary);
+}
+
+// --- Цитата, разделитель, медиа, код -----------------------------------------
+
+// Цитата — линией у начала строки, как в рецепте «Цитата с цветной линией».
+// Поля браузера по бокам (40px у цитаты и у figure) сняты.
+:where(.gr-prose :is(blockquote, figure)) {
+  margin-inline: 0;
+}
+
+:where(.gr-prose blockquote) {
+  padding-inline-start: 1em;
+  border-inline-start: 0.25rem solid var(--gr-color-accent);
+  font-style: italic;
+}
+
+:where(.gr-prose hr) {
+  block-size: 0;
+  border: 0;
+  border-block-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
+// Картинка и видео не шире колонки и при сужении не сплющиваются.
+:where(.gr-prose :is(img, video)) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+// Длинная строка кода прокручивается внутри блока, а не всей страницей.
+:where(.gr-prose pre) {
+  overflow-x: auto;
+}
+
+// --- Ссылки -----------------------------------------------------------------
+
+// Ссылка без класса — как .gr-link: цвет ссылки и подчёркивание, которых
+// ресет лишает <a>. Порядок LVHA — как у .gr-link.
+:where(.gr-prose a:not([class])) {
+  color: var(--gr-color-link);
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+}
+
+:where(.gr-prose a:not([class]):visited) {
+  color: var(--gr-color-link-visited);
+}
+
+@media (hover: hover) {
+  :where(.gr-prose a:not([class]):hover) {
+    color: var(--gr-color-link-hover);
+  }
+}

package/scss/_steps.scss

@@ -18,12 +18,17 @@
 // Состояний три: пройденный (.gr-step-done), текущий (aria-current="step")
 // и ожидающий — он же состояние по умолчанию. Текущий находится по тому же
 // признаку, по которому его находит программа чтения с экрана; класса
-// для него нет намеренно.
+// для него нет намеренно. Перечню этапов без хода — «Этапы работы»
+// лендинга — состояния не нужны: .gr-steps-plain делает все шаги
+// равноправными.
 //
 // Знак в маркере кладут в разметку: галочка у пройденного шага и номер
 // у остальных — это содержимое, а не оформление. Цвет остаётся вторым
 // признаком поверх знака и позиции, а не единственным.
 
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
+
 .gr-steps {
   --gr-step-marker-size: 2rem;
 
@@ -125,6 +130,26 @@
   line-height: 1.35;
 }
 
+// Подпись и пояснение одним блоком: в колонке он встаёт справа от маркера,
+// в ряду — под ним, и там ведёт себя как её отсутствие: строки друг под
+// другом с тем же зазором, что у шага. Нужен разметке, которая бывает
+// и тем и другим (.gr-steps-stack-*).
+.gr-step-body {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--gr-ui-gap) * 0.5);
+}
+
+// --- Равноправный список ----------------------------------------------------
+
+// Перечень этапов без хода процесса: подпись цвета текста, маркер
+// акцентный, линия нейтральная. Вес — как у .gr-step, и стоит до состояний:
+// пройденный и текущий шаг в таком списке по-прежнему сильнее.
+:where(.gr-steps-plain) .gr-step {
+  --gr-step-color: var(--gr-color-text);
+  --gr-step-marker-fg: var(--gr-color-accent);
+}
+
 // --- Состояния --------------------------------------------------------------
 
 // Пройденный: его хвост залит акцентом — путь от него дальше проделан.
@@ -157,41 +182,59 @@
 
 // Колонка: маркер слева, подпись справа. На узком экране это единственный
 // работающий вариант — горизонтальный ряд из четырёх шагов там нечитаем.
-.gr-steps-vertical {
-  flex-direction: column;
-  gap: var(--gr-gap);
-}
-
-.gr-steps-vertical > :where(li) {
-  flex: none;
-}
-
-.gr-steps-vertical .gr-step {
-  flex: none;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--gr-ui-gap);
-  text-align: start;
-}
-
-// В колонке хвост идёт вниз от маркера до маркера следующего шага. Длину
-// задают оба вылета сразу, а block-size: auto считает её из них: сколько бы
-// текста ни висело под маркером, линия дотянется — это и есть довод
-// в пользу хвоста, а не отрезка фиксированной длины.
-.gr-steps-vertical .gr-step::after {
-  inset-block: var(--gr-step-marker-size) calc(var(--gr-gap) * -1);
-  inset-inline: calc(var(--gr-step-marker-size) / 2) auto;
-  inline-size: var(--gr-border-width);
-  block-size: auto;
-  margin-block-start: 0;
-  margin-inline-start: calc(var(--gr-border-width) * -0.5);
-}
-
-// Подпись и пояснение встают в колонку: в строке они разъезжались бы
-// по базовой линии маркера.
-.gr-steps-vertical .gr-step-body {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--gr-ui-gap) * 0.25);
-  padding-block-start: calc((var(--gr-step-marker-size) - 1.3em) / 2);
+// Правила колонки описаны один раз: .gr-steps-vertical — всегда,
+// .gr-steps-stack-{bp} и -c{bp} — ниже порога (см. ниже).
+@mixin gr-steps-vertical($s) {
+  #{$s} {
+    flex-direction: column;
+    gap: var(--gr-gap);
+  }
+
+  #{$s} > :where(li) {
+    flex: none;
+  }
+
+  #{$s} .gr-step {
+    flex: none;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--gr-ui-gap);
+    text-align: start;
+  }
+
+  // В колонке хвост идёт вниз от маркера до маркера следующего шага. Длину
+  // задают оба вылета сразу, а block-size: auto считает её из них: сколько бы
+  // текста ни висело под маркером, линия дотянется — это и есть довод
+  // в пользу хвоста, а не отрезка фиксированной длины.
+  #{$s} .gr-step::after {
+    inset-block: var(--gr-step-marker-size) calc(var(--gr-gap) * -1);
+    inset-inline: calc(var(--gr-step-marker-size) / 2) auto;
+    inline-size: var(--gr-border-width);
+    block-size: auto;
+    margin-block-start: 0;
+    margin-inline-start: calc(var(--gr-border-width) * -0.5);
+  }
+
+  // Подпись и пояснение встают в колонку рядом с маркером (сама колонка —
+  // у .gr-step-body всегда); первая строка — по центру маркера.
+  #{$s} .gr-step-body {
+    gap: calc(var(--gr-ui-gap) * 0.25);
+    padding-block-start: calc((var(--gr-step-marker-size) - 1.3em) / 2);
+  }
+}
+
+@include gr-steps-vertical('.gr-steps-vertical');
+
+// Столбиком ниже порога, рядом — от порога: суффикс называет порог,
+// как у .gr-table-stack-md. -md — колонка, пока окно уже 768px;
+// -cmd — пока уже 768px ближайший предок с .gr-cq. Разметка одна на оба
+// вида: подпись и пояснение — в .gr-step-body.
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width < $bp-value) {
+    @include gr-steps-vertical('.gr-steps-stack-#{$bp-name}');
+  }
+
+  @include cq.gr-container-below($bp-name) {
+    @include gr-steps-vertical('.gr-steps-stack-c#{$bp-name}');
+  }
 }

package/scss/_table.scss

@@ -6,12 +6,18 @@
 //
 // Ресет опционален, поэтому border-collapse задаётся здесь: без него
 // у ячеек остались бы двойные линии и зазоры border-spacing.
+//
+// Таблица внутри .gr-prose оформлена теми же правилами: класс на <table>
+// редактор не поставит. Селекторы прозы — под :where(), с нулевым весом:
+// варианты (.gr-table-compact и другие) на такой таблице по-прежнему
+// сильнее базы.
 
 @use 'sass:string';
 @use 'griffincss-core/scss/breakpoints' as bp;
 @use 'griffincss-core/scss/container-mixins' as cq;
 
-.gr-table {
+.gr-table,
+:where(.gr-prose table) {
   inline-size: 100%;
   border-collapse: collapse;
   color: var(--gr-color-text);
@@ -19,7 +25,8 @@
 }
 
 .gr-table th,
-.gr-table td {
+.gr-table td,
+:where(.gr-prose table :is(th, td)) {
   padding-block: calc(var(--gr-gap) * 0.5);
   padding-inline: calc(var(--gr-gap) * 0.75);
   border-block-end: var(--gr-border-width) solid var(--gr-color-border);
@@ -27,24 +34,28 @@
   vertical-align: top;
 }
 
-.gr-table th {
+.gr-table th,
+:where(.gr-prose table th) {
   color: var(--gr-color-text-secondary);
   font-size: 0.875rem;
   font-weight: 600;
   white-space: nowrap;
 }
 
-.gr-table thead th {
+.gr-table thead th,
+:where(.gr-prose table thead th) {
   border-block-end: calc(var(--gr-border-width) * 2) solid var(--gr-color-border-strong);
 }
 
-.gr-table tfoot td {
+.gr-table tfoot td,
+:where(.gr-prose table tfoot td) {
   border-block-end: 0;
   color: var(--gr-color-text-secondary);
   font-size: 0.875rem;
 }
 
-.gr-table caption {
+.gr-table caption,
+:where(.gr-prose table caption) {
   padding-block-end: calc(var(--gr-gap) * 0.5);
   color: var(--gr-color-text-secondary);
   font-size: 0.875rem;

package/scss/griffincss-ui-scoped.scss

@@ -64,6 +64,7 @@
     @include meta.load-css('nav');
     @include meta.load-css('pagination');
     @include meta.load-css('progress');
+    @include meta.load-css('prose');
     @include meta.load-css('range');
     @include meta.load-css('rating');
     @include meta.load-css('skeleton');

package/scss/griffincss-ui.scss

@@ -58,6 +58,7 @@
   @include meta.load-css('nav');
   @include meta.load-css('pagination');
   @include meta.load-css('progress');
+  @include meta.load-css('prose');
   @include meta.load-css('range');
   @include meta.load-css('rating');
   @include meta.load-css('skeleton');

package/scss/griffinjs/_track.scss

@@ -46,6 +46,16 @@
   }
 }
 
+// Слайды своей ширины: лента историй, полоса тегов, ряд логотипов. Ширину
+// даёт содержимое — аватар, атрибуты width/height картинки, текст кнопки;
+// утилита ширины на слайде доли 100% не перебьёт, основа здесь — flex-basis.
+// Не сжимаются (flex-shrink: 0 базового правила): лишнее уходит в прокрутку.
+// Стоит до суффиксных долей: .gr-track-auto .gr-track-3-lg — своя ширина
+// на узком окне и три в ряд на широком.
+.gr-track-auto > * {
+  flex-basis: auto;
+}
+
 // Доля слайда описана один раз: без суффикса — база, с суффиксом
 // брейкпоинта — от ширины окна, с буквой c — от ширины ближайшего предка
 // с .gr-cq (Этап 47d): виджет в слоте меряется слотом. Виджету дорожки

package/scss/griffinjs/griffinjs.scss

@@ -8,7 +8,7 @@
 // griffinjs.css подключается всегда ПОВЕРХ griffincss-ui.css, где он есть.
 //
 // Оформление привязывается к состояниям, а не к классам, которые JS
-// добавляет: [data-gr-state="open"], .gr-slide[aria-current],
+// добавляет: [data-gr-state="open"], .gr-track > [aria-current],
 // var(--gr-progress). Движение — здесь, в CSS; JS transform и opacity
 // не пишет никогда (инварианты слоя — docs/griffinjs-architecture.html).
 //

package/src/griffincss-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Griffincss UI — Runtime v0.26.1
+ * Griffincss UI — Runtime v0.27.0
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
@@ -50,7 +50,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.26.1';
+  var VERSION = '0.27.0';
 
   var OVERLAY_ATTR = 'data-gr-overlay-close';
 

package/src/griffinjs/core/griffinjs-core.js

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.26.1
+ * GriffinJS — Core v0.27.0
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -45,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.26.1';
+  var VERSION = '0.27.0';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.

package/src/griffinjs/core/track.js

@@ -20,7 +20,7 @@
  * состояние, только physical.
  *
  * JS пишет только aria-*, inert, --gr-progress и --gr-snap (снап-точки
- * по страницам); оформление активного слайда — .gr-slide[aria-current] в CSS.
+ * по страницам); оформление активного слайда — .gr-track > [aria-current] в CSS.
  */
 (function (G) {
   'use strict';

package/src/griffinjs/widgets/dialog.js

@@ -205,11 +205,14 @@
 
     // --- Рост окна ----------------------------------------------------------
 
-    // Пока идёт анимация, наблюдение молчит: промежуточные высоты — её же.
     // Открытие и закрытие (0 ↔ высота) — не рост; мелочь до порога — тоже.
+    // Анимация меняет размер самого окна, поэтому на её время окно снято
+    // с наблюдения: начатая здесь при живом наблюдении, она давала на window
+    // «ResizeObserver loop completed with undelivered notifications».
+    // Промежуточные высоты — её же, слушать их незачем. Вернувшись,
+    // наблюдение первым сообщает текущую высоту: если за время анимации
+    // пришло ещё содержимое, окно дорастёт следующей.
     function onResize() {
-      if (growing) return;
-
       var next = el.getBoundingClientRect().height;
       var prev = known;
 
@@ -221,8 +224,15 @@
 
       if (!ms || typeof el.animate !== 'function') return;
 
+      grow.unobserve(el);
       growing = el.animate([{ blockSize: prev + 'px' }, { blockSize: next + 'px' }], { duration: ms, easing: 'ease' });
-      growing.onfinish = growing.oncancel = function () { growing = null; };
+      growing.onfinish = growing.oncancel = settle;
+    }
+
+    // После destroy() наблюдателя нет: отмена приходит позже и не вернёт его.
+    function settle() {
+      growing = null;
+      if (grow) grow.observe(el);
     }
 
     // --- Hash ---------------------------------------------------------------
@@ -300,7 +310,7 @@
       var at = stack.indexOf(record);
       if (at !== -1) stack.splice(at, 1);
 
-      if (grow) grow.disconnect();
+      if (grow) { grow.disconnect(); grow = null; }
       if (growing) growing.cancel();
       relock();
       restoreMedia();

package/src/griffinjs/widgets/gallery.js

@@ -1,7 +1,7 @@
 /*
  * GriffinJS — галерея: слайдер + полоса превью.
  *
- *   <div class="gr-gallery" data-gr-gallery>
+ *   <div data-gr-gallery>
  *     <div class="gr-track">…большие кадры…</div>
  *     <div class="gr-track gr-gallery-thumbs">
  *       <button type="button"><img …></button> …

package/src/griffinjs/widgets/lightbox.js

@@ -2,23 +2,28 @@
  * GriffinJS — лайтбокс: <dialog> + дорожка.
  *
  *   <a href="large.jpg" data-gr-lightbox="promo" data-gr-caption="Подпись"><img src="thumb.jpg" alt="…"></a>
+ *   <a href="https://rutube.ru/video/…/" data-gr-src="https://rutube.ru/play/embed/…" data-gr-lightbox>…</a>
  *
  * Значение атрибута — группа: элементы с одним значением листаются в одном
  * окне; пустое значение — окно на один элемент, и дорожка вырождается
- * в один кадр без кнопок. Тип — по адресу (картинка, видео, iframe для
- * YouTube/Vimeo) или явно: data-gr-type="iframe".
+ * в один кадр без кнопок. Адрес кадра — data-gr-src, без него — href:
+ * у видео это разные адреса — во фрейм встаёт только плеер, страницу ролика
+ * хостинги во фрейме не показывают, а ссылка без скрипта ведёт именно на неё.
+ * Тип — по адресу кадра (картинка, видео, iframe для плееров YouTube, Vimeo,
+ * Rutube и VK Видео) или явно: data-gr-type="iframe".
  *
- * База без JS — ссылка на большое изображение. Окно строится при открытии
- * и уничтожается при закрытии: так видео гарантированно останавливается,
- * а в документе не копится по <dialog> на каждую группу. Верхний слой,
- * ловушка фокуса, Esc, возврат фокуса — от <dialog>.
+ * База без JS — ссылка на большое изображение или на страницу ролика.
+ * Окно строится при открытии и уничтожается при закрытии: так видео
+ * гарантированно останавливается, а в документе не копится по <dialog>
+ * на каждую группу. Верхний слой, ловушка фокуса, Esc, возврат фокуса —
+ * от <dialog>.
  */
 (function (G) {
   'use strict';
 
   var ATTR = 'data-gr-lightbox';
   var VIDEO = /\.(mp4|webm|ogv|mov)(\?|#|$)/i;
-  var EMBED = /youtube\.com|youtu\.be|vimeo\.com/i;
+  var EMBED = /youtube\.com|youtu\.be|vimeo\.com|rutube\.ru|vkvideo\.ru|vk\.com\/video/i;
 
   var dialog = null;
   var track = null;
@@ -36,9 +41,10 @@
     return 'image';
   }
 
-  // Элемент разметки → описание кадра.
+  // Элемент разметки → описание кадра. data-gr-src старше href: у видео
+  // href — страница ролика для перехода без скрипта, а кадр — плеер.
   function itemOf(node) {
-    var src = node.getAttribute('href') || node.getAttribute('data-gr-src') || '';
+    var src = node.getAttribute('data-gr-src') || node.getAttribute('href') || '';
     var img = node.querySelector ? node.querySelector('img') : null;
 
     return {
@@ -105,7 +111,7 @@
     var trackEl = element('div', 'gr-track gr-lightbox-track', { tabindex: '0' });
 
     for (var i = 0; i < n; i++) {
-      var figure = element('figure', 'gr-slide gr-lightbox-item');
+      var figure = element('figure', 'gr-lightbox-item');
 
       figure.appendChild(media(items[i]));