griffincss-ui 0.26.2 → 0.27.1

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.2
+ * Griffincss UI — Runtime v0.27.1
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
@@ -50,7 +50,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.26.2';
+  var VERSION = '0.27.1';
 
   var OVERLAY_ATTR = 'data-gr-overlay-close';
 
@@ -234,7 +234,7 @@
       : closest(trigger, DISMISSIBLE);
 
     if (!target) {
-      warn('крестику нечего закрывать: ни цели в data-gr-dismiss, ни сообщения вокруг');
+      warn('close button has nothing to close: no data-gr-dismiss target and no enclosing message');
       return true;
     }
 
@@ -343,8 +343,8 @@
     var urgent = options.assertive === undefined ? status === 'danger' : !!options.assertive;
 
     if (status && !options.title) {
-      warn('тост со статусом "' + status + '" без title: статус остался одним цветом, '
-        + 'а он не переживает чёрно-белую печать и дальтонизм');
+      warn('toast with status "' + status + '" has no title: the status is shown by colour alone, '
+        + 'which is lost in greyscale print and to colour-blind readers');
     }
 
     var node = buildToast(text, options, status);

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

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.26.2
+ * GriffinJS — Core v0.27.1
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -45,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.26.2';
+  var VERSION = '0.27.1';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.
@@ -84,13 +84,13 @@
     if (typeof opts === 'function') { factory = opts; opts = null; }
 
     if (typeof name !== 'string' || !name) {
-      throw new Error('GriffinJS: ' + kind + ' без имени');
+      throw new Error('GriffinJS: ' + kind + ' without a name');
     }
     if (typeof factory !== 'function') {
-      throw new Error('GriffinJS: ' + kind + ' «' + name + '» — не функция');
+      throw new Error('GriffinJS: ' + kind + ' "' + name + '" is not a function');
     }
     if (registry[name]) {
-      throw new Error('GriffinJS: ' + kind + ' «' + name + '» уже зарегистрирован');
+      throw new Error('GriffinJS: ' + kind + ' "' + name + '" is already registered');
     }
 
     if (opts && opts.needs) needs(name, opts.needs);
@@ -101,11 +101,11 @@
   }
 
   function defineEngine(name, opts, factory) {
-    return define(engines, 'движок', name, opts, factory);
+    return define(engines, 'engine', name, opts, factory);
   }
 
   function defineWidget(name, opts, factory) {
-    return define(widgets, 'виджет', name, opts, factory);
+    return define(widgets, 'widget', name, opts, factory);
   }
 
   // Проверка сборки на старте: модуль подключён, а часть, которую он берёт
@@ -124,7 +124,7 @@
         // Зависимостью бывает и часть G (track, anchor), и целый модуль:
         // галерея строится поверх слайдера.
         if (!api[dep] && !widgets[dep] && !engines[dep]) {
-          warn('«' + names[i] + '» не работает без griffinjs-' + dep + '.js');
+          warn('"' + names[i] + '" does not work without griffinjs-' + dep + '.js');
         }
       }
     }
@@ -228,7 +228,7 @@
   // два слайдера на одной дорожке — ошибка автора, а не два состояния.
   function mount(el, name, opts) {
     if (!el || !widgets[name]) {
-      warn('виджет «' + name + '» не зарегистрирован');
+      warn('widget "' + name + '" is not registered');
       return null;
     }
 
@@ -244,7 +244,7 @@
       record.instance = widgets[name](el, opts, api) || {};
     } catch (e) {
       mounted.splice(mounted.indexOf(record), 1);
-      warn('виджет «' + name + '» не поднялся: ' + (e && e.message));
+      warn('widget "' + name + '" failed to mount: ' + (e && e.message));
       return null;
     }
 

package/src/griffinjs/core/loader.js

@@ -62,7 +62,7 @@
       if (config.fields && config.fields.src) return request();
 
       warned[name] = true;
-      G.warn('поле «' + name + '» не собрано: подключите griffinjs-fields.js или задайте GriffinJS.config.fields');
+      G.warn('field "' + name + '" is not loaded: include griffinjs-fields.js or set GriffinJS.config.fields');
     }
   }
 
@@ -85,7 +85,7 @@
     function settle(event) {
       if (event.type === 'error') {
         ok = false;
-        G.warn('бандл полей не загружен: ' + event.target.src + ' — поля остались базой без скрипта');
+        G.warn('fields bundle failed to load: ' + event.target.src + '; fields stay without the script');
       }
 
       if (--left) return;

package/src/griffinjs/core/options.js

@@ -37,7 +37,7 @@
       try {
         return JSON.parse(text);
       } catch (e) {
-        G.warn('параметры не разобраны как JSON: ' + text);
+        G.warn('options are not valid JSON: ' + text);
         return out;
       }
     }

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';
@@ -542,7 +542,7 @@
     var factory = G.engines[o.engine];
 
     if (!factory) {
-      G.warn('движок «' + o.engine + '» не зарегистрирован — дорожка без движения');
+      G.warn('engine "' + o.engine + '" is not registered; the track will not move');
     } else {
       engine = factory(api, el, o) || null;
     }

package/src/griffinjs/fields/counter.js

@@ -32,7 +32,7 @@
     var attrs = G.recorder();
     var events = G.listeners();
 
-    if (!(max > 0)) throw new Error('у поля нет maxlength — считать не к чему');
+    if (!(max > 0)) throw new Error('the field has no maxlength: nothing to count');
 
     var out = o.out ? document.querySelector(o.out) : null;
     var created = false;

package/src/griffinjs/fields/datetime.js

@@ -235,7 +235,7 @@
     var native = el.getAttribute('type');
     var mode = MODES[native];
 
-    if (!mode) throw new Error('нужен type="date", "time" или "datetime-local"');
+    if (!mode) throw new Error('needs type="date", "time" or "datetime-local"');
 
     var attrs = G.recorder();
     var events = G.listeners();    // на всё время жизни
@@ -797,7 +797,7 @@
       var other = target && G.mount(target, 'datetime');
 
       if (other) { peer = other; role = 'from'; other.pair(api); push(); }
-      else G.warn('datetime: поле «по» не найдено — ' + o.to);
+      else G.warn('datetime: the "to" field is not found: ' + o.to);
     }
 
     return api;

package/src/griffinjs/fields/file.js

@@ -77,7 +77,7 @@
   G.defineWidget('file', function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
 
-    if (typeof DataTransfer !== 'function') throw new Error('без DataTransfer убрать один файл из выбранного нельзя');
+    if (typeof DataTransfer !== 'function') throw new Error('without DataTransfer a single file cannot be removed from the selection');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/fields/mask.js

@@ -163,7 +163,7 @@
     // разобрался бы как пара «00: 00», поэтому без ключа берётся строка как есть.
     var format = o.format ? String(o.format) : (el.getAttribute('data-gr-mask') || '').trim();
 
-    if (!format) throw new Error('у маски нет формата');
+    if (!format) throw new Error('the mask has no format');
 
     var tokens;
     var last = null;          // последнее записанное значение

package/src/griffinjs/fields/otp.js

@@ -35,7 +35,7 @@
   G.defineWidget('otp', function (el) {
     var cells = el.querySelectorAll('input');
 
-    if (!cells.length) throw new Error('внутри нет ни одной ячейки <input>');
+    if (!cells.length) throw new Error('no <input> cells inside');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/fields/phone.js

@@ -93,7 +93,7 @@
     var input = el.querySelector('input');
     var locale = lang();
 
-    if (!input) throw new Error('у поля телефона нет <input>');
+    if (!input) throw new Error('the phone field has no <input>');
 
     var created = [];   // позиции, добавленные из таблицы
     var texts = [];     // [позиция, подпись автора] — для destroy
@@ -142,11 +142,11 @@
       // Без country первой стоит первая по алфавиту языка страницы —
       // на русской это Австралия, +61. Угадывать страну за автора виджет
       // не берётся: ошибся бы тише, чем сейчас. Но и молчать не должен.
-      if (!o.country) G.warn('телефон: страна не задана — выбрана первая по алфавиту; укажите country');
+      if (!o.country) G.warn('phone: no country set, the first one alphabetically is used; set country');
     }
 
     if (!options().length) {
-      G.warn('телефон: список кодов пуст — перечислите <option> сами или подключите griffinjs-countries.js');
+      G.warn('phone: the code list is empty; list the <option>s yourself or include griffinjs-countries.js');
     }
 
     // Подписи: флаг + имя в языке страницы + код. Только там, где есть ISO

package/src/griffinjs/fields/rating.js

@@ -37,7 +37,7 @@
     var display = el.querySelector('.gr-rating');
     var radios = el.querySelectorAll('input[type="radio"]');
 
-    if (!display || !radios.length) throw new Error('нужны .gr-rating и <input type="radio"> внутри');
+    if (!display || !radios.length) throw new Error('needs .gr-rating and <input type="radio"> inside');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/fields/validate.js

@@ -45,7 +45,7 @@
   }
 
   G.defineWidget('validate', function (el, opts) {
-    if (String(el.tagName).toLowerCase() !== 'form') throw new Error('нужен <form>');
+    if (String(el.tagName).toLowerCase() !== 'form') throw new Error('needs a <form>');
 
     var o = G.merge(DEFAULTS, opts);
     var attrs = G.recorder();

package/src/griffinjs/widgets/combobox.js

@@ -8,6 +8,7 @@
  * Источник — адрес с {q} (ответ — JSON: массив строк или объектов
  * {value, label, href, group, id}, либо {items: […]}) или функция
  * через JS: GriffinJS.mount(el, 'combobox', { source: (q, signal) => Promise }).
+ * С флагом navigate выбор позиции переходит по её href — только http(s).
  * Рендер позиции подменяется render(item) → узел.
  *
  * База без JS — само поле: форма поиска отправляется Enter, как всегда.
@@ -140,12 +141,12 @@
 
     var input = el.querySelector('input');
 
-    if (!input) throw new Error('у комбобокса нет поля ввода');
+    if (!input) throw new Error('the combobox has no input');
 
     var choice = o.multiple ? el.querySelector('select[multiple]') : null;
 
-    if (o.multiple && !choice) throw new Error('для multiple нужен <select multiple> внутри');
-    if (o.free && !choice) { G.warn('комбобокс: free без multiple смысла не имеет — флаг пропущен'); o.free = false; }
+    if (o.multiple && !choice) throw new Error('multiple needs a <select multiple> inside');
+    if (o.free && !choice) { G.warn('combobox: free makes no sense without multiple; flag ignored'); o.free = false; }
 
     var list = el.querySelector('[role="listbox"]');
     var created = false;
@@ -276,7 +277,7 @@
           return response.json();
         });
       } else {
-        G.warn('комбобокс: нет источника (src или source)');
+        G.warn('combobox: no source (src or source)');
         return;
       }
 
@@ -292,7 +293,7 @@
         render(query, found);
       }, function (error) {
         if (error && error.name === 'AbortError') return;
-        G.warn('комбобокс: запрос не удался: ' + (error && error.message));
+        G.warn('combobox: request failed: ' + (error && error.message));
       });
     }
 
@@ -440,11 +441,23 @@
       close();
       G.emit('griffin:select', input, { item: item, index: index, input: input });
 
-      if (o.navigate && item.href && typeof location !== 'undefined') location.href = item.href;
+      if (o.navigate && item.href && typeof location !== 'undefined') navigate(item.href);
 
       return api;
     }
 
+    // Переход — только по http(s): href приходит из ответа источника,
+    // и javascript: исполнился бы в origin страницы. Выбор при отказе
+    // остаётся — значение в поле, событие ушло.
+    function navigate(href) {
+      var url = null;
+
+      try { url = new URL(href, document.baseURI); } catch (e) { /* не адрес */ }
+
+      if (url && /^https?:$/.test(url.protocol)) location.href = href;
+      else G.warn('combobox: navigation refused: ' + href);
+    }
+
     // --- События --------------------------------------------------------------
 
     function onInput() { query(); }