griffincss-ui 0.25.0-dev → 0.26.1

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.1
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
@@ -50,7 +50,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.25.0-dev';
+  var VERSION = '0.26.1';
 
   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.1
  * Опциональный слой виджетов с состоянием поверх 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.1';
 
   // Реестры. Модуль зовёт 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,28 @@
       });
     }
 
+    // --- Рост окна ----------------------------------------------------------
+
+    // Пока идёт анимация, наблюдение молчит: промежуточные высоты — её же.
+    // Открытие и закрытие (0 ↔ высота) — не рост; мелочь до порога — тоже.
+    function onResize() {
+      if (growing) return;
+
+      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;
+
+      growing = el.animate([{ blockSize: prev + 'px' }, { blockSize: next + 'px' }], { duration: ms, easing: 'ease' });
+      growing.onfinish = growing.oncancel = function () { growing = null; };
+    }
+
     // --- Hash ---------------------------------------------------------------
 
     function hashIs() {
@@ -242,6 +300,8 @@
       var at = stack.indexOf(record);
       if (at !== -1) stack.splice(at, 1);
 
+      if (grow) grow.disconnect();
+      if (growing) growing.cancel();
       relock();
       restoreMedia();
       events.removeAll();
@@ -260,6 +320,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 — окно показывается сразу.

package/src/griffinjs/widgets/dropdown.js

@@ -21,10 +21,22 @@
  *   * позицию popover-панели у кнопки: считается здесь, а не CSS anchor
  *     positioning, — одинаково во всех движках (нужен griffinjs-anchor.js);
  *   * наведение с задержкой намерения (hover) — только для pointerType
- *     mouse/pen: касание открывает щелчком, как без скрипта.
+ *     mouse/pen: касание открывает щелчком, как без скрипта;
+ *   * закрытие <details> с состоянием (Этап 48d): панель, чей уход тема
+ *     анимирует, не пропадает в первом же кадре — обёртка получает
+ *     data-gr-state="closing", open снимается по transitionend/animationend
+ *     самой панели или по таймауту в длительность --gr-transition плюс
+ *     50 мс. Щелчок по кнопке открытого дропдауна идёт тем же путём.
+ *     Во всех браузерах, без развилки по ::details-content: Firefox 153
+ *     поддерживает селектор и allow-discrete, но закрытие не анимирует —
+ *     замер в browser/closing.spec.mjs (решение владельца 2026-09-21).
+ *     CSS слоя переходов не задаёт — при 0s закрывается сразу.
+ *     Popover-панель анимирует платформа через display allow-discrete —
+ *     ей это не нужно.
  *
  * Открытое состояние — data-gr-state="open" на обёртке: у варианта
  * по наведению (.gr-dropdown-hover) панель по нему показывает CSS слоя.
+ * Между open и ready у <details> бывает closing.
  */
 (function (G) {
   'use strict';
@@ -70,6 +82,18 @@
     return document.activeElement === node;
   }
 
+  // Длительность --gr-transition у узла, мс: «0.2s ease» → 200, «150ms» → 150,
+  // пусто или 0s → 0. Одно чтение вычисленного стиля при закрытии.
+  function duration(node) {
+    var value = '';
+
+    try { value = getComputedStyle(node).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;
+  }
+
   G.defineWidget('dropdown', { needs: ['anchor'] }, function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
     var attrs = G.recorder();
@@ -86,6 +110,7 @@
     var opened = false;        // для popover и css: <details> знает сам
     var viaKeyboard = false;   // открыто с клавиатуры — фокус уходит в меню
     var timer = null;
+    var closing = null;        // таймаут состояния closing у <details>
 
     // --- Состояние ------------------------------------------------------------
 
@@ -111,6 +136,7 @@
 
     function sync(now) {
       if (kind !== 'details') opened = now;
+      if (!now) settleClosing();
 
       setAttr(trigger, 'aria-expanded', now ? 'true' : 'false');
       setAttr(el, 'data-gr-state', now ? 'open' : 'ready');
@@ -121,6 +147,59 @@
       viaKeyboard = false;
     }
 
+    // --- Закрытие <details> с состоянием closing ------------------------------
+
+    // open снимается не сразу: обёртка получает data-gr-state="closing",
+    // панель уходит переходом темы; конец — transitionend/animationend самой
+    // панели (не потомка) или таймаут. Затем toggle → sync(false) → ready.
+    function closeDetails() {
+      if (closing) return;
+
+      var wait = duration(panel);
+
+      if (!wait) {
+        el.open = false;
+        return;
+      }
+
+      closing = setTimeout(finishClosing, wait + 50);
+      panel.addEventListener('transitionend', onEnd);
+      panel.addEventListener('animationend', onEnd);
+      setAttr(el, 'data-gr-state', 'closing');
+    }
+
+    function onEnd(event) {
+      if (event.target === panel) finishClosing();
+    }
+
+    function settleClosing() {
+      if (!closing) return;
+
+      clearTimeout(closing);
+      closing = null;
+      panel.removeEventListener('transitionend', onEnd);
+      panel.removeEventListener('animationend', onEnd);
+    }
+
+    function finishClosing() {
+      if (!closing) return;
+
+      settleClosing();
+      el.open = false;
+    }
+
+    // Щелчок (и Enter/Space) по кнопке открытого <details>: платформа сняла бы
+    // open в тот же кадр — перехватывается и идёт через closing. Щелчок
+    // по закрывающемуся — передумали: панель остаётся.
+    function onTriggerClick(event) {
+      if (kind !== 'details' || !el.open) return;
+
+      event.preventDefault();
+
+      if (closing) open();
+      else close();
+    }
+
     // beforetoggle приходит синхронно, до показа: панель ещё без размера,
     // но для «снизу, по началу строки» размер и не нужен, а без этой
     // предварительной позиции она на один кадр вспыхивала бы в статическом
@@ -137,6 +216,14 @@
 
     function open() {
       cancelTimer();
+
+      // Открытие во время закрытия отменяет его: панель остаётся на месте.
+      if (closing) {
+        settleClosing();
+        setAttr(el, 'data-gr-state', 'open');
+        return;
+      }
+
       if (isOpen()) return;
 
       if (kind === 'details') el.open = true;
@@ -149,7 +236,7 @@
       cancelTimer();
       if (!isOpen()) return;
 
-      if (kind === 'details') el.open = false;
+      if (kind === 'details') closeDetails();
       else if (kind === 'popover') {
         try { panel.hidePopover(); } catch (e) { sync(false); }
       } else sync(false);
@@ -286,6 +373,7 @@
 
     function destroy() {
       cancelTimer();
+      finishClosing();
       events.removeAll();
       if (kind === 'popover' && G.anchor) G.anchor.clear(panel);
       attrs.restore();
@@ -298,8 +386,10 @@
 
     roles();
 
-    if (kind === 'details') listen(el, 'toggle', function () { sync(!!el.open); });
-    else if (kind === 'popover') {
+    if (kind === 'details') {
+      listen(el, 'toggle', function () { sync(!!el.open); });
+      listen(trigger, 'click', onTriggerClick);
+    } else if (kind === 'popover') {
       listen(panel, 'beforetoggle', onBeforeToggle);
       listen(panel, 'toggle', function (event) { sync(event.newState === 'open'); });
       listen(document, 'scroll', onReflow, true);