griffincss-ui 0.25.0-dev → 0.26.2

package/scss/griffinjs/_track.scss

@@ -10,6 +10,7 @@
 // Движение — здесь. JS пишет только aria-*, data-gr-state и --gr-progress.
 
 @use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
 
 .gr-track {
   display: flex;
@@ -45,12 +46,50 @@
   }
 }
 
+// Доля слайда описана один раз: без суффикса — база, с суффиксом
+// брейкпоинта — от ширины окна, с буквой c — от ширины ближайшего предка
+// с .gr-cq (Этап 47d): виджет в слоте меряется слотом. Виджету дорожки
+// всё равно, откуда пришла доля — perView он считает по геометрии.
+@mixin gr-track-per-view($suffix) {
+  @each $n in (1, 2, 3, 4) {
+    .gr-track-#{$n}#{$suffix} > * {
+      flex-basis: calc((100% - var(--gr-gap) * #{$n - 1}) / #{$n});
+    }
+  }
+}
+
 @each $bp-name, $bp-value in bp.$gr-breakpoints {
   @media (width >= $bp-value) {
-    @each $n in (1, 2, 3, 4) {
-      .gr-track-#{$n}-#{$bp-name} > * {
-        flex-basis: calc((100% - var(--gr-gap) * #{$n - 1}) / #{$n});
-      }
+    @include gr-track-per-view('-#{$bp-name}');
+  }
+}
+
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-track-per-view('-c#{$bp-name}');
+  }
+}
+
+// Лента столбиком в узком гнезде (Этап 47d, фидбек темы griffin, п. 8):
+// подборка товаров в боковой колонке — список, в содержимом — лента.
+// Порог — ширина ближайшего предка с .gr-cq, суффикс называет его
+// (как у .gr-table-stack-c*): .gr-track-stack-csm — столбик, пока гнездо
+// уже 640px. Оконных порогов нет: в узком окне лента остаётся лентой,
+// свайп и есть её мобильный режим. Слайды отпускаются по главной оси —
+// flex-basis: auto бьёт долю .gr-track-N > * тем, что стоит позже: между
+// 640 и 768 px гнезда .gr-track-2-csm и .gr-track-stack-cmd совпадают,
+// и столбик обязан стоять в файле после долей.
+// Слайдеру не подходит: его кнопки и точки останутся на месте.
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-below($bp-name) {
+    .gr-track-stack-c#{$bp-name} {
+      flex-direction: column;
+      overflow-x: visible;
+      scroll-snap-type: none;
+    }
+
+    .gr-track-stack-c#{$bp-name} > * {
+      flex-basis: auto;
     }
   }
 }

package/scss/griffinjs/fields/_number.scss

@@ -1,12 +1,10 @@
 // GriffinJS — сумма с разрядами (Этап 43b)
-// Своих стилей у поля нет: на экране обычный .gr-input с текстом. Единственное
-// правило — про спутник. Скрытый input с числом встаёт сразу за полем
-// (у суммы — всегда, у даты — на указателе мыши), и в .gr-input-group
-// с аддоном после поля он был бы последним ребёнком: поле теряло бы
-// скругление края. Скругление возвращается тому, за кем стоит спутник.
-// Без :has() остаётся прямой угол у поля — деградация видимая, но мягкая.
-
-.gr-input-group > :has(+ [hidden]:last-child) {
-  border-start-end-radius: var(--gr-radius);
-  border-end-end-radius: var(--gr-radius);
-}
+// Своих стилей у поля нет: на экране обычный .gr-input с текстом. Скрытый
+// спутник с числом встаёт сразу за полем (у суммы — всегда, у даты —
+// на указателе мыши), и в .gr-input-group с аддоном после поля он был бы
+// последним ребёнком: до Этапа 45 поле теряло бы скругление края, и его
+// возвращало правило `:has(+ [hidden]:last-child)` здесь. Теперь края
+// группы считаются по видимым полям в самом компоненте (_form.scss,
+// `:nth-last-child(1 of S)`), и спутник, как любой скрытый узел, края
+// не трогает. Файл остаётся в списке сборки пустым: место для стилей поля,
+// если они понадобятся, — здесь, а не в чужом модуле.

package/scss/griffinjs/fields/fields.scss

@@ -14,7 +14,7 @@
 
 
 @use 'sass:meta';
-@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+@layer griffincss.reset, griffincss.tokens, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style, griffincss.hidden;
 
 // Весь вывод — в griffincss.ui, как у компонентов.
 @layer griffincss.ui {

package/scss/griffinjs/griffinjs.scss

@@ -18,7 +18,7 @@
 
 
 @use 'sass:meta';
-@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+@layer griffincss.reset, griffincss.tokens, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style, griffincss.hidden;
 
 // Весь вывод слоя — в griffincss.ui, как у компонентов.
 @layer griffincss.ui {

package/src/griffincss-ui.js

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

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

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.25.0-dev
+ * GriffinJS — Core v0.26.2
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -10,8 +10,8 @@
  * поднимает всё, destroy() снимает всё до последнего атрибута.
  *
  * В griffinjs-core.js склеивается только то, без чего не обходится ни один
- * виджет: options, registry, scanner. Остальное из core/ — anchor, media,
- * motion, gesture, track — общие части ВНЕ ядра (Этап 22): ими пользуется
+ * виджет: options, registry, scanner. Остальное из core/ — loader, anchor,
+ * media, motion, gesture, track — общие части ВНЕ ядра (Этап 22): ими пользуется
  * меньшинство, и каждая уезжает своим файлом griffinjs-<часть>.js. Что
  * модуль из этого берёт, он объявляет сам — вторым аргументом defineWidget
  * или needs(); start() сверяет объявленное со сборкой.
@@ -20,6 +20,13 @@
  * window.GriffinJS, а не window.Griffincss — там слияние рантаймов
  * CSS-части, и порядок тегов не значим; слою с состоянием чужой
  * глобал ни к чему.
+ *
+ * Участник жизненного цикла (use) кроме start/destroy может объявить
+ * init(root): ядро зовёт его после подъёма виджетов в корне — и на старте,
+ * и на каждой порции сканера. Так догрузка бандла полей (core/loader.js,
+ * Этап 48c) видит data-gr-<поле> без виджета, не будучи частью ядра.
+ * GriffinJS.config — общий объект настроек: ядру он не нужен, но это
+ * его поверхность, и модуль читает из неё (config.fields у загрузчика).
  */
 (function (factory) {
   'use strict';
@@ -38,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.25.0-dev';
+  var VERSION = '0.26.2';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.
@@ -61,6 +68,9 @@
 
   var started = false;
 
+  // Настройки — одна поверхность на слой; ядро само ничего отсюда не читает.
+  var config = {};
+
   // Объявление и чтение зависимостей: needs('slider', ['track', 'motion'])
   // записывает, needs('slider') возвращает.
   function needs(name, list) {
@@ -273,6 +283,10 @@
       for (var j = 0; j < nodes.length; j++) mount(nodes[j], name);
     }
 
+    for (var k = 0; k < lifecycle.length; k++) {
+      if (typeof lifecycle[k].init === 'function') lifecycle[k].init(root);
+    }
+
     return api;
   }
 
@@ -332,22 +346,54 @@
 
   // Автостарт: только в браузере и только если его не отключили атрибутом
   // data-auto="false" на теге <script>.
+  //
+  // Момент старта — когда поставка зарегистрирована целиком. Ядро — первый
+  // IIFE бандла, и старт при выполнении собственного файла обгоняет
+  // defineWidget модулей дальше в том же файле; под defer так и было:
+  // readyState уже «interactive», старт шёл сразу, init(document) не
+  // находил ни одного виджета, поздних никто не поднимал (фидбек темы
+  // griffin по 0.26.0, п. 1). Три момента:
+  //   * разбор идёт (loading) — DOMContentLoaded, как прежде;
+  //   * свой тег отложен (defer) — тоже DOMContentLoaded: отложенные теги
+  //     выполняются после разбора и ДО события, значит к нему выполнятся
+  //     и griffinjs-fields.js с griffinjs-countries.js следующими тегами —
+  //     та же схема, что синхронные теги в подвале. Не readystatechange:
+  //     «interactive» наступает ДО отложенных тегов;
+  //   * иначе (документ готов, тег вставлен скриптом) — микрозадачей:
+  //     после текущего файла целиком, до любого следующего тега. Набору
+  //     «ядро + нужное», вставленному скриптом, нужен data-auto="false"
+  //     и GriffinJS.start() после последнего тега.
+  // Тег с defer, вставленный скриптом после DOMContentLoaded, отложенным
+  // не является, и события он не дождётся; страховка от вечного
+  // ожидания — readystatechange: при «interactive» следующее — «complete».
   function autoStart() {
-    try {
-      var script = document.currentScript;
-      if (script && script.getAttribute('data-auto') === 'false') return;
-    } catch (e) { /* currentScript недоступен */ }
+    var script = null;
+
+    try { script = document.currentScript; } catch (e) { /* currentScript недоступен */ }
+
+    if (script && script.getAttribute('data-auto') === 'false') return;
+
+    var deferred = !!script && script.hasAttribute('defer') && !script.hasAttribute('async');
+
+    if (document.readyState === 'loading' || (deferred && document.readyState !== 'complete')) {
+      var ready = function () {
+        document.removeEventListener('DOMContentLoaded', ready);
+        document.removeEventListener('readystatechange', ready);
+        start();
+      };
+
+      document.addEventListener('DOMContentLoaded', ready);
+      if (deferred) document.addEventListener('readystatechange', ready);
 
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', function () { start(); });
       return;
     }
 
-    start();
+    Promise.resolve().then(start);
   }
 
   var api = {
     version: VERSION,
+    config: config,
     engines: engines,
     widgets: widgets,
     defineEngine: defineEngine,

package/src/griffinjs/core/loader.js

@@ -0,0 +1,124 @@
+/*
+ * GriffinJS — догрузка бандла полей по потребности (Этап 48c).
+ *
+ *   <script defer src="griffinjs.js"
+ *           data-fields="griffinjs-fields.js"
+ *           data-countries="griffinjs-countries.js"></script>
+ *
+ *   GriffinJS.config.fields = { src: 'griffinjs-fields.js', countries: 'griffinjs-countries.js' };
+ *
+ * Витрине поля нужны на трёх страницах из трёхсот, а тег бандла стоит
+ * в шаблоне шапки для всех. Вместо тега — путь: встретив data-gr-<поле>
+ * без зарегистрированного виджета, слой вставляет <script> сам — один раз
+ * на документ, с nonce со своего тега (под строгим CSP без него файл
+ * отброшен молча), таблица стран вторым тегом в том же порядке, — и после
+ * загрузки ВСЕХ файлов поднимает поля по документу и шлёт
+ * griffinjs:fields-loaded. Ошибка загрузки — предупреждение, поля остаются
+ * базой без скрипта, второй попытки нет. Без config — предупреждение раз
+ * на имя поля: раньше такое поле молчало.
+ *
+ * Единственное, что здесь известно поимённо, — не виджет, а файл поставки:
+ * девять имён второго бандла, те же, что в списке FIELDS сборки
+ * (scripts/build-griffinjs.mjs; тест сверяет). Ядро о них не знает:
+ * модуль подписывается на init(root) и лежит вне ядра, в SHARED, —
+ * за него не платит набор из двух файлов ради одной подсказки.
+ *
+ * Пути и nonce читаются у своего тега в момент выполнения — позже
+ * document.currentScript уже null. Атрибуты, а не только свойство, —
+ * ради тега с defer: инлайновый скрипт перед ним глобала ещё не видит.
+ */
+(function (G) {
+  'use strict';
+
+  var FIELDS = ['mask', 'phone', 'datetime', 'number', 'file', 'rating', 'otp', 'counter', 'validate'];
+
+  var config = G.config;
+  var nonce = '';
+  var loading = null;   // null — не запрашивали; pending | done | failed
+  var warned = {};      // поле → без config уже сказано
+
+  try {
+    var script = document.currentScript;
+
+    if (script) {
+      nonce = script.nonce || '';
+
+      var src = script.getAttribute('data-fields');
+
+      if (src) config.fields = { src: src, countries: script.getAttribute('data-countries') || '' };
+    }
+  } catch (e) { /* currentScript недоступен */ }
+
+  // Поля в корне, чьих виджетов нет: с config — запрос бандла, без него —
+  // предупреждение. Узлы не трогаются: база без скрипта — рабочее состояние.
+  function check(root) {
+    for (var i = 0; i < FIELDS.length; i++) {
+      var name = FIELDS[i];
+      var selector = '[data-gr-' + name + ']';
+
+      if (G.widgets[name] || warned[name]) continue;
+      if (!(root.matches && root.matches(selector)) && !(root.querySelector && root.querySelector(selector))) continue;
+
+      if (config.fields && config.fields.src) return request();
+
+      warned[name] = true;
+      G.warn('поле «' + name + '» не собрано: подключите griffinjs-fields.js или задайте GriffinJS.config.fields');
+    }
+  }
+
+  // Поля поднимаются после ВСЕХ файлов: телефон читает таблицу стран
+  // при монтировании, и она обязана лечь раньше. Что успело
+  // зарегистрироваться при ошибке, всё равно поднимается.
+  function request() {
+    if (loading) return;
+
+    loading = 'pending';
+
+    var files = [config.fields.src];
+    var ok = true;
+    var left;
+
+    if (config.fields.countries) files.push(config.fields.countries);
+
+    left = files.length;
+
+    function settle(event) {
+      if (event.type === 'error') {
+        ok = false;
+        G.warn('бандл полей не загружен: ' + event.target.src + ' — поля остались базой без скрипта');
+      }
+
+      if (--left) return;
+
+      loading = ok ? 'done' : 'failed';
+      G.init(document);
+
+      if (ok) G.emit('griffinjs:fields-loaded', document, { files: files });
+    }
+
+    for (var i = 0; i < files.length; i++) insert(files[i], settle);
+  }
+
+  // async = false: вставленный скриптом тег по умолчанию async, а порядок
+  // «поля, затем страны» нужен. nonce — свойством: атрибут после разбора
+  // браузер прячет.
+  function insert(src, settle) {
+    var tag = document.createElement('script');
+
+    tag.src = src;
+    tag.async = false;
+    if (nonce) tag.nonce = nonce;
+
+    tag.addEventListener('load', settle);
+    tag.addEventListener('error', settle);
+
+    (document.head || document.documentElement).appendChild(tag);
+  }
+
+  G.loader = {
+    _fields: function () { return FIELDS.slice(); },
+    _nonce: function (value) { if (value !== undefined) nonce = value; return nonce; }
+  };
+
+  G.use({ init: check });
+})(typeof window !== 'undefined' && window.GriffinJS ? window.GriffinJS : require('./griffinjs-core.js'));

package/src/griffinjs/fields/validate.js

@@ -12,8 +12,10 @@
  * сообщение», где сообщение — платформенное, в языке браузера, а подпись —
  * <label> поля (или его aria-label, или name). Фокус после отправки —
  * на первой ссылке; Enter по ней ведёт к полю. Непройденные поля получают
- * aria-invalid="true" — их красит CSS семьи .gr-field, — и теряют его,
- * как только исправлены; список же обновляется следующей отправкой.
+ * aria-invalid="true" — источник для программы чтения с экрана, — а их
+ * обёртка .gr-field, если она есть, состояние data-gr-state="error":
+ * его и красит CSS семьи. Оба снимаются, как только поле исправлено;
+ * список же обновляется следующей отправкой.
  *
  * Пузырь браузера на время жизни виджета снимается (novalidate): двум
  * сообщениям об одном и том же незачем спорить. Проверку это не отменяет —
@@ -84,9 +86,26 @@
       return control.getAttribute('id');
     }
 
+    function fieldOf(control) {
+      return G.closest(control, '.gr-field');
+    }
+
+    // Обёртка держит состояние, пока хотя бы один её контрол не пройден.
+    function release(control) {
+      var field = fieldOf(control);
+
+      for (var i = 0; field && i < marked.length; i++) if (fieldOf(marked[i]) === field) return;
+      if (field) attrs.set(field, 'data-gr-state', null);
+    }
+
     function unmark() {
-      for (var i = 0; i < marked.length; i++) attrs.set(marked[i], 'aria-invalid', null);
+      var was = marked;
+
       marked = [];
+      for (var i = 0; i < was.length; i++) {
+        attrs.set(was[i], 'aria-invalid', null);
+        release(was[i]);
+      }
     }
 
     function render(failed) {
@@ -112,6 +131,7 @@
         item.appendChild(link);
         list.appendChild(item);
         attrs.set(failed[i], 'aria-invalid', 'true');
+        if (fieldOf(failed[i])) attrs.set(fieldOf(failed[i]), 'data-gr-state', 'error');
         marked.push(failed[i]);
       }
 
@@ -165,6 +185,7 @@
       if (at !== -1 && !invalid(control)) {
         attrs.set(control, 'aria-invalid', null);
         marked.splice(at, 1);
+        release(control);
       }
     }
 

package/src/griffinjs/widgets/dialog.js

@@ -21,7 +21,14 @@
  *   * ajax-содержимое: data-gr-src грузится один раз в [data-gr-content]
  *     (или в само окно), состояния loading → open | error;
  *   * hash: открытие пишет #id в историю, «Назад» закрывает окно,
- *     а страница, открытая с #id, показывает окно сразу.
+ *     а страница, открытая с #id, показывает окно сразу;
+ *   * рост окна (Этап 48d) — data-gr-dialog="grow": ResizeObserver
+ *     на окне, и смена высоты больше 24 px идёт анимацией от прежней
+ *     к новой (element.animate по block-size — не спорит с transition
+ *     компонента). Для окна, чьё содержимое приходит ajax'ом: плашка
+ *     в 10rem не прыгает к форме, а вырастает до неё. Только по атрибуту:
+ *     наблюдатель на каждом окне — цена, которую не все просили. Открытие
+ *     и закрытие не трогаются, prefers-reduced-motion — без анимации.
  *
  * Разметка и стили .gr-modal / .gr-drawer не меняются. Окно поднимается
  * по data-gr-dialog или при первом открытии через data-gr-open — атрибут
@@ -33,9 +40,35 @@
   var DEFAULTS = {
     hash: false,
     media: true,
-    lock: true
+    lock: true,
+    grow: false
   };
 
+  // Порог роста: ниже — ввод в textarea с автовысотой, а не приход содержимого.
+  var GROW_STEP = 24;
+
+  function reducedMotion() {
+    try {
+      return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    } catch (e) { return false; }
+  }
+
+  // Темп окна, мс: --gr-modal-transition темы, иначе --gr-transition;
+  // «0.2s ease» → 200, пусто или 0s → 0.
+  function duration(node) {
+    var value = '';
+
+    try {
+      var styles = getComputedStyle(node);
+
+      value = styles.getPropertyValue('--gr-modal-transition') || styles.getPropertyValue('--gr-transition');
+    } catch (e) { /* без CSSOM */ }
+
+    var m = /(\d*\.?\d+)(m?s)/.exec(value);
+
+    return m ? parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1) : 0;
+  }
+
   var OPEN_ATTR = 'data-gr-open';
 
   var stack = [];              // открытые окна, последнее — верхнее
@@ -103,6 +136,9 @@
     var frames = [];           // [{el, src}] — разгруженные iframe
     var byHistory = false;     // закрыто кнопкой «Назад»: back() не зовём
     var record = { el: el, o: o };
+    var grow = null;           // ResizeObserver — только по grow
+    var known = 0;             // высота окна по последнему наблюдению
+    var growing = null;        // идущая анимация высоты
 
     function id() { return el.getAttribute('id') || ''; }
 
@@ -167,6 +203,38 @@
       });
     }
 
+    // --- Рост окна ----------------------------------------------------------
+
+    // Открытие и закрытие (0 ↔ высота) — не рост; мелочь до порога — тоже.
+    // Анимация меняет размер самого окна, поэтому на её время окно снято
+    // с наблюдения: начатая здесь при живом наблюдении, она давала на window
+    // «ResizeObserver loop completed with undelivered notifications».
+    // Промежуточные высоты — её же, слушать их незачем. Вернувшись,
+    // наблюдение первым сообщает текущую высоту: если за время анимации
+    // пришло ещё содержимое, окно дорастёт следующей.
+    function onResize() {
+      var next = el.getBoundingClientRect().height;
+      var prev = known;
+
+      known = next;
+
+      if (!prev || !next || !isOpen() || Math.abs(next - prev) <= GROW_STEP) return;
+
+      var ms = reducedMotion() ? 0 : duration(el);
+
+      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 = settle;
+    }
+
+    // После destroy() наблюдателя нет: отмена приходит позже и не вернёт его.
+    function settle() {
+      growing = null;
+      if (grow) grow.observe(el);
+    }
+
     // --- Hash ---------------------------------------------------------------
 
     function hashIs() {
@@ -242,6 +310,8 @@
       var at = stack.indexOf(record);
       if (at !== -1) stack.splice(at, 1);
 
+      if (grow) { grow.disconnect(); grow = null; }
+      if (growing) growing.cancel();
       relock();
       restoreMedia();
       events.removeAll();
@@ -260,6 +330,11 @@
     listen(el, 'close', onClose);
     setAttr(el, 'data-gr-state', isOpen() ? 'open' : 'ready');
 
+    if (o.grow && typeof ResizeObserver === 'function') {
+      grow = new ResizeObserver(onResize);
+      grow.observe(el);
+    }
+
     if (isOpen()) { stack.push(record); relock(); }
 
     // Страница открыта с #id — окно показывается сразу.