griffincss-ui 0.28.2 → 0.29.1

package/scss/_prose.scss

@@ -15,11 +15,20 @@
 //
 // Меры строки в классе нет: ширину решает место — колонка, карточка, окно.
 // Мера текста — утилита .gr-max-w-prose. Вид таблицы — в _table.scss:
-// <table> в прозе оформлен теми же правилами, что .gr-table.
+// <table> в прозе оформлен теми же правилами, что .gr-table, и широкая
+// прокручивается сама.
 
 // Длинная ссылка или слово без пробелов не выталкивают колонку вбок:
 // текст в редакторе пишет кто угодно.
+//
+// min-inline-size: 0 — для прозы, которая сама флекс-элемент или ячейка
+// сетки: такие не сжимаются меньше самого длинного слова и самой длинной
+// строки кода (min-width: auto), и статья рядом с боковой колонкой
+// становилась шире окна. Вне флекса и сетки ноль и так. Колонке со своим
+// CSS, внутри которой лежит проза, нужно то же (.gr-min-w-0); у сеток
+// библиотеки — minmax(0, 1fr).
 .gr-prose {
+  min-inline-size: 0;
   overflow-wrap: break-word;
 }
 
@@ -89,6 +98,28 @@
   block-size: auto;
 }
 
+// Фрейм из кода вставки (плеер, карта, форма) тоже не шире колонки. Своей
+// пропорции у фрейма нет: атрибуты width и height браузер, в отличие
+// от картинки, в неё не превращает, поэтому высота остаётся из атрибута,
+// а плеер рисует полосы по краям видео.
+:where(.gr-prose iframe) {
+  max-inline-size: 100%;
+}
+
+// Где движок читает атрибут как число, пропорция берётся из width и height
+// в пикселях — у любого плеера и любой карты, без списка хостингов. Низкий
+// виджет (аудиоплеер 560×80) не становится ниже своей высоты: при сужении
+// высота не падает меньше min(атрибут, 150px). Без поддержки attr() одно
+// block-size: auto сплющило бы фрейм до 150 px — поэтому всё под @supports.
+// Ширина в процентах (width="100%") пропорции не задаёт — высота остаётся.
+@supports (aspect-ratio: #{'attr(width type(<number>)) / attr(height type(<number>))'}) {
+  :where(.gr-prose iframe[width][height]:not([width$='%'], [height$='%'])) {
+    aspect-ratio: #{'attr(width type(<number>)) / attr(height type(<number>))'};
+    block-size: auto;
+    min-block-size: #{'min(attr(height px), 150px)'};
+  }
+}
+
 // Длинная строка кода прокручивается внутри блока, а не всей страницей.
 :where(.gr-prose pre) {
   overflow-x: auto;

package/scss/_table.scss

@@ -10,7 +10,8 @@
 // Таблица внутри .gr-prose оформлена теми же правилами: класс на <table>
 // редактор не поставит. Селекторы прозы — под :where(), с нулевым весом:
 // варианты (.gr-table-compact и другие) на такой таблице по-прежнему
-// сильнее базы.
+// сильнее базы. Отличий от .gr-table два: заголовки переносятся, а широкая
+// таблица прокручивается сама (см. .gr-table-scroll).
 
 @use 'sass:string';
 @use 'griffincss-core/scss/breakpoints' as bp;
@@ -39,6 +40,13 @@
   color: var(--gr-color-text-secondary);
   font-size: 0.875rem;
   font-weight: 600;
+}
+
+// Заголовок в одну строку — только у таблицы библиотеки: перенос ей снимают
+// классом (.gr-whitespace-normal). В прозе снять некому — класс на <th>
+// редактор не поставит, — и таблица из четырёх столбцов с заголовками
+// становилась шире колонки.
+.gr-table th {
   white-space: nowrap;
 }
 
@@ -226,6 +234,114 @@
   overscroll-behavior-x: contain;
 }
 
+// Прокрутка на самой таблице, без обёртки: таблица становится блоком,
+// строки собирает анонимная таблица внутри него. Блок по ширине содержимого,
+// но не шире колонки; шире — прокручивается сам. Цена — узкая таблица
+// не растягивается во всю колонку: анонимная таблица сжимается по
+// содержимому, поэтому класс — для широких таблиц. position: relative —
+// по той же причине, что у обёртки.
+//
+// Таблица прозы ведёт себя так же без класса: автор текста о классах
+// не знает. Таблица библиотеки в прозе (.gr-table) — своя раскладка,
+// во всю ширину и без прокрутки; .gr-table-scroll возвращает прокрутку.
+.gr-table-scroll,
+:where(.gr-prose table:not(.gr-table)) {
+  display: block;
+  position: relative;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+// Word и Google Docs кладут ширину таблицы в style — 100 %, пиксели,
+// пункты. Блок растягивался по ней, а строки — анонимная таблица внутри —
+// вставали по содержимому: рамка и фон уходили далеко за ячейки. Встроенный
+// стиль сильнее любого правила без !important, поэтому здесь — единственное
+// !important библиотеки, и только у таблицы прозы со встроенной шириной:
+// у остальных таблиц ширину по-прежнему перебивает любой CSS сайта.
+// Тема из подслоя ниже ui снимает его своим !important.
+:where(.gr-prose table:not(.gr-table)[style*="width" i]) {
+  // stylelint-disable-next-line declaration-no-important
+  inline-size: max-content !important;
+}
+
+// Подсказка прокрутки. Край колонки обрезает таблицу ровно по столбцу,
+// а полосы прокрутки macOS и телефонов видны только при касании — скрытые
+// столбцы легко не заметить. У края, за которым ещё есть содержимое,
+// лежит мягкая тень: радиальная, растянутая по высоте области и гаснущая
+// к верху и низу. Докрутили до конца — тень у этого края гаснет.
+//
+// Силу теней (--gr-scroll-start / -end, _keyframes.scss) ведёт анимация
+// по прокрутке самой области: шторка цвета подложки не нужна, и подсказка
+// верна на любой подложке — карточке, цветной секции, в тёмной теме.
+// Без переполнения шкала прокрутки неактивна, и теней нет. Цвет и сила —
+// как у теней библиотеки: тёмная тема сильнее, на печати теней нет.
+// Спад не линейный: промежуточная точка собирает тень у самого края,
+// и хвост растворяется — линейный рисовал «линзу» с заметной границей.
+@function gr-scroll-shade($side, $amount) {
+  @return radial-gradient(
+    farthest-side at $side 50%,
+    hsl(var(--gr-shadow-color), calc(#{$amount} * 16% * var(--gr-shadow-strength))),
+    hsl(var(--gr-shadow-color), calc(#{$amount} * 6% * var(--gr-shadow-strength))) 45%,
+    transparent
+  );
+}
+
+$gr-scroll-areas: '.gr-table-wrap, .gr-table-scroll, :where(.gr-prose table:not(.gr-table))';
+
+// Первые два слоя — шторки для Firefox (см. ниже); здесь они прозрачные.
+//
+// --gr-scroll-hint-inset — отступ подсказки от начала строки: у таблицы
+// с липким первым столбцом тень «в начале ещё есть столбцы» лежит у его
+// края, а не у края области, где её закрывает или (в строке без липкой
+// ячейки) пятнает сам столбец. Сдвигаются начальная тень и шторка.
+#{$gr-scroll-areas} {
+  background-image:
+    linear-gradient(to right, var(--gr-scroll-cover, transparent) 30%, transparent),
+    linear-gradient(to left, var(--gr-scroll-cover, transparent) 30%, transparent),
+    gr-scroll-shade(0, var(--gr-scroll-start)),
+    gr-scroll-shade(100%, var(--gr-scroll-end));
+  background-repeat: no-repeat;
+  background-position: var(--gr-scroll-hint-inset, 0) 50%, 100% 50%;
+  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+@supports (animation-timeline: scroll()) {
+  #{$gr-scroll-areas} {
+    animation: gr-scroll-start linear both, gr-scroll-end linear both;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 2rem, calc(100% - 2rem) 100%;
+  }
+}
+
+// В RTL строка начинается справа: отступ — у правого края, а та же пара
+// анимаций идёт в обратную сторону — тень у левого края гаснет к концу
+// шкалы, у правого появляется с её начала. Вне @supports: отступ нужен
+// и шторке Firefox, а animation-* там без анимации ничего не делают.
+.gr-table-wrap:dir(rtl),
+.gr-table-scroll:dir(rtl),
+:where(.gr-prose table:not(.gr-table):dir(rtl)) {
+  background-position: 0 50%, right var(--gr-scroll-hint-inset, 0) center;
+  animation-direction: reverse;
+  animation-range: calc(100% - 2rem) 100%, 0 2rem;
+}
+
+// Firefox шкалы прокрутки не знает: там тени у краёв стоят на полной силе,
+// а прячет их шторка — первые два слоя фона, которые едут вместе
+// с содержимым (background-attachment: local) и закрывают тень у края,
+// до которого докрутили. Шторка — цвета подложки: --gr-scroll-hint-bg,
+// по умолчанию цвет страницы. На другой подложке его задают, иначе у края
+// в покое ляжет полоса цвета страницы.
+@supports not (animation-timeline: scroll()) {
+  #{$gr-scroll-areas} {
+    --gr-scroll-start: 1;
+    --gr-scroll-end: 1;
+    --gr-scroll-cover: var(--gr-scroll-hint-bg, var(--gr-color-bg));
+  }
+}
+
 // Шапка остаётся видна при прокрутке тела. Работает внутри .gr-table-wrap
 // с заданной высотой; собственный фон обязателен — без него сквозь ячейки
 // просвечивали бы уезжающие строки.

package/scss/griffinjs/_megamenu.scss

@@ -95,6 +95,10 @@ $gr-megamenu-expand: map.get(bp.$gr-breakpoints, md);
   border-block-end: var(--gr-border-width) solid var(--gr-color-border);
   background-color: var(--gr-color-surface-overlay);
   color: var(--gr-color-text);
+
+  // Подложка — и шторке подсказки прокрутки (_table.scss): без шкалы прокрутки
+  // (Firefox) тень у края таблицы прячет шторка этого цвета.
+  --gr-scroll-hint-bg: var(--gr-color-surface-overlay);
 }
 
 // Ajax-панель, пока грузится: место под содержимое, чтобы полоса

package/src/griffincss-ui.js

@@ -1,10 +1,10 @@
 /*!
- * Griffincss UI — Runtime v0.28.2
+ * Griffincss UI — Runtime v0.29.1
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
  *
- * Здесь четыре вещи:
+ * Здесь пять вещей:
  *
  *   1. Закрытие модального окна и выдвижной панели щелчком по подложке.
  *      <dialog> закрывается по Esc сам, но щелчок мимо окна ему безразличен,
@@ -27,6 +27,12 @@
  *      для разметки с [data-gr-tabs]. Без скрипта та же разметка остаётся
  *      списком ссылок-якорей и секциями подряд.
  *
+ *   5. Широкая таблица в .gr-prose — в порядке Tab. Она прокручивается
+ *      сама, и Chromium с Firefox ставят такую область в порядок Tab сами,
+ *      а Safari — нет; tabindex в тексте из редактора поставить некому.
+ *      Перед каждым Tab рантайм ставит его сам — и снимает, когда таблица
+ *      стала помещаться.
+ *
  * Всё, что умеют <details>, <dialog> и Popover API, остаётся за ними.
  */
 (function (factory) {
@@ -50,7 +56,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.28.2';
+  var VERSION = '0.29.1';
 
   var OVERLAY_ATTR = 'data-gr-overlay-close';
 
@@ -73,12 +79,21 @@
 
   var TABS_ATTR = 'data-gr-tabs';
 
+  // Таблица прозы со своей прокруткой (_table.scss) и то, что делает
+  // таблицу доступной с клавиатуры и без tabindex: Tab по ссылке или полю
+  // внутри и так докручивает таблицу до них.
+  var PROSE_TABLES = '.gr-prose table:not(.gr-table)';
+  var FOCUSABLE = 'a[href],button,input,select,textarea,summary,iframe,[tabindex],[contenteditable]';
+
   // Причина закрытия попадает в dialog.returnValue: обработчик close
   // на странице отличит щелчок мимо от кнопки «Сохранить».
   var OVERLAY_REASON = 'overlay';
 
   var started = false;
 
+  // Таблицы, которым tabindex поставил рантайм: снимается только свой.
+  var focusTables = [];
+
   // Цель нажатия. Щелчок — это пара «нажал» и «отпустил», и закрывать окно
   // нужно, только если обе половины пришлись на подложку: выделение текста,
   // начатое в окне и законченное за его краем, щелчком по подложке не является.
@@ -611,6 +626,38 @@
     return Array.prototype.indexOf.call(list, node);
   }
 
+  // --- Широкая таблица прозы в порядке Tab ------------------------------------
+
+  // Перед каждым Tab, в перехвате: порядок обхода браузер считает после
+  // обработчиков, и отметка, поставленная здесь, уже в нём. Так не нужны
+  // ни наблюдатели, ни замеры вне нажатия. Ширина — по прокрутке самой
+  // таблицы: шире колонки — значит, прокручивается.
+  function onTabPress(event) {
+    if (event.key !== 'Tab') return;
+
+    focusTables = focusTables.filter(function (table) { return table.isConnected; });
+
+    var tables = document.querySelectorAll(PROSE_TABLES);
+
+    for (var i = 0; i < tables.length; i++) {
+      var table = tables[i];
+      var marked = focusTables.indexOf(table) !== -1;
+      var wide = table.scrollWidth > table.clientWidth;
+
+      if (wide && !marked && !table.hasAttribute('tabindex') && !table.querySelector(FOCUSABLE)) {
+        table.setAttribute('tabindex', '0');
+        focusTables.push(table);
+      } else if (!wide && marked) {
+        unmarkTable(table);
+      }
+    }
+  }
+
+  function unmarkTable(table) {
+    table.removeAttribute('tabindex');
+    focusTables.splice(focusTables.indexOf(table), 1);
+  }
+
   // Один делегированный обработчик на документ, а не по слушателю на окно:
   // окна появляются и исчезают вместе с разметкой, и переподписываться
   // на каждое пришлось бы вручную.
@@ -630,13 +677,17 @@
     pressed = null;
     listen('removeEventListener');
 
+    while (focusTables.length) unmarkTable(focusTables[0]);
+
     return publicApi;
   }
 
   // Подписка и отписка — один список: диспетчер на каждый тип события
-  // из реестра плюс перехват нажатия для щелчка по подложке.
+  // из реестра плюс перехват нажатия для щелчка по подложке и Tab
+  // для широких таблиц прозы.
   function listen(method) {
     document[method]('pointerdown', onPointerDown, true);
+    document[method]('keydown', onTabPress, true);
 
     for (var type in registry) {
       if (Object.prototype.hasOwnProperty.call(registry, type)) {

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

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