griffincss-ui 0.23.0 → 0.24.0-dev

package/scss/griffinjs/_lightbox.scss

@@ -7,6 +7,8 @@
 // Правил на .gr-modal здесь нет: класс принадлежит пакету ui, лайтбокс
 // только уточняет его своим классом.
 
+@use '../mixins' as m;
+
 .gr-lightbox {
   inline-size: 100%;
   block-size: 100%;
@@ -81,6 +83,14 @@
   transition: background-color var(--gr-transition);
 }
 
+// Закрытие — полосками: знак «×» в 1,5rem садится на 2 px ниже центра
+// круга во всех движках.
+.gr-lightbox-close {
+  @include m.gr-cross(1rem);
+
+  --gr-cross-color: hsl(var(--gr-hsl-white));
+}
+
 .gr-lightbox-close:hover,
 .gr-lightbox-prev:hover,
 .gr-lightbox-next:hover {

package/scss/griffinjs/fields/_file.scss

@@ -3,6 +3,8 @@
 // Без скрипта его нет: сколько файлов выбрано, показывает само поле,
 // а оформление поля — модуль .gr-file пакета ui.
 
+@use '../../mixins' as m;
+
 .gr-file-list {
   display: flex;
   flex-direction: column;
@@ -45,10 +47,13 @@
 }
 
 .gr-file-remove {
+  @include m.gr-cross(0.75rem);
+
+  --gr-cross-color: var(--gr-color-text-secondary);
+
+  position: relative;
   display: inline-flex;
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
   inline-size: 1.75rem;
   block-size: 1.75rem;
   margin: 0;
@@ -56,17 +61,14 @@
   border: 0;
   border-radius: var(--gr-radius);
   background: none;
-  color: var(--gr-color-text-secondary);
-  font: inherit;
-  font-size: 1.125rem;
-  line-height: 1;
   cursor: pointer;
 }
 
 @media (hover: hover) {
   .gr-file-remove:hover {
+    --gr-cross-color: var(--gr-color-danger);
+
     background-color: var(--gr-color-surface-raised);
-    color: var(--gr-color-danger);
   }
 }
 

package/src/griffincss-ui.js

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

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

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

package/src/griffinjs/fields/mask.js

@@ -19,9 +19,19 @@
  * fill — знак свободного слота в ней, «_» по умолчанию.
  *
  * База без скрипта: pattern и inputmode на элементе — платформа проверяет
- * сама, скрипт лишь помогает вводить и ни pattern, ни проверку не трогает.
- * Из маски он берёт только два удобства: подсказку и inputmode="numeric"
- * для маски из одних цифр — и то, если автор не задал своих.
+ * сама. Авторский pattern маска не трогает и не заменяет; из маски она берёт
+ * два удобства — подсказку и inputmode="numeric" для маски из одних цифр,
+ * и то, если автор не задал своих.
+ *
+ * Недобор. Непустое значение с незаполненными обязательными слотами — своя
+ * ошибка проверки: setCustomValidity(incomplete) ставится сразу, поэтому
+ * checkValidity() даёт false и форма не уходит с половиной номера. На полном
+ * значении custom-error пуст, и единственным судьёй снова становится pattern.
+ * Пустое поле маска не трогает: пустое — это required платформы, и поле
+ * без required обязательным не становится. Красным (aria-invalid) поле
+ * помечается ТОЛЬКО по уходу фокуса и светлеет, как только значение стало
+ * полным: ругаться на человека, пока он печатает, — не проверка. Там, где
+ * недобор законен, выход не требует нового API — токен ? в формате.
  *
  * Каретка. Правки перехватываются в beforeinput: новое значение считается
  * здесь, пишется целиком, и каретка встаёт за только что введённый знак —
@@ -31,16 +41,17 @@
  * браузер делает своё, а маска потом приводит значение к формату по input
  * или compositionend. Это единственный случай, когда каретка уходит в конец.
  *
- * Маска пишет value контрола — первый такой виджет в слое. Расширение
- * инварианта 7 объявлено в docs/griffinjs-architecture.html («Инварианты»)
- * и в правилах правки слоя. После каждой своей записи она шлёт input
+ * Маска пишет value контрола и его валидность — первый такой виджет в слое.
+ * Расширение инварианта 7 объявлено в docs/griffinjs-architecture.html
+ * («Инварианты») и в правилах правки слоя: пишешь value — пиши и валидность,
+ * и возвращай её в destroy(). После каждой своей записи она шлёт input
  * (а по уходу фокуса — change), поэтому фреймворк узнаёт о значении
  * так же, как о набранном руками.
  */
 (function (G) {
   'use strict';
 
-  var DEFAULTS = { format: '', hint: true, fill: '_' };
+  var DEFAULTS = { format: '', hint: true, fill: '_', incomplete: 'Значение набрано не полностью' };
 
   // Что принимает слот. Буква — любая по Юникоду: маска номерного знака
   // на кириллице не хуже латинской.
@@ -157,6 +168,7 @@
     var tokens;
     var last = null;          // последнее записанное значение
     var focused = null;       // значение на момент фокуса — для change
+    var short = false;        // набрано, но не до конца
     var ownHint = o.hint && !el.getAttribute('placeholder');
     var ownMode = !el.getAttribute('inputmode');
 
@@ -170,6 +182,12 @@
 
       attrs.set(el, 'data-gr-state', !result.raw ? 'empty' : result.complete ? 'complete' : 'partial');
 
+      // Недобор — своя ошибка; пустое поле остаётся заботой required.
+      short = !!result.raw && !result.complete;
+
+      if (typeof el.setCustomValidity === 'function') el.setCustomValidity(short ? o.incomplete : '');
+      if (!short) attrs.set(el, 'aria-invalid', null);
+
       if (k !== undefined && typeof el.setSelectionRange === 'function') {
         var at = caret(result, k);
 
@@ -264,6 +282,7 @@
     // правку он не видел. Событие шлётся здесь по тому же правилу —
     // значение по уходу фокуса отличается от значения на входе.
     function onBlur() {
+      if (short) attrs.set(el, 'aria-invalid', 'true');
       if (focused !== null && el.value !== focused) fire(el, 'change');
       focused = null;
     }
@@ -298,6 +317,8 @@
       destroy: function () {
         events.removeAll();
         attrs.restore();
+
+        if (typeof el.setCustomValidity === 'function') el.setCustomValidity('');
       }
     };
   });

package/src/griffinjs/fields/phone.js

@@ -15,8 +15,10 @@
  * зовётся иначе, чем виджет: data-gr-mask на позиции списка ядро приняло бы
  * за виджет и попыталось бы надеть маску на <option>. Пустой <select> заполняется
  * из таблицы griffinjs-countries.js, если она подключена; без неё виджет
- * предупреждает и работает как поле без маски. Данные со своим темпом
- * обновления библиотека вместе с кодом не сопровождает.
+ * предупреждает и работает как поле без маски. Начальная страна списка
+ * из таблицы — параметр country; без него первой стоит первая по алфавиту
+ * языка страницы, и виджет предупреждает об этом в консоли. Данные
+ * со своим темпом обновления библиотека вместе с кодом не сопровождает.
  *
  * Имя страны и флаг — у платформы: Intl.DisplayNames в языке страницы
  * (lang документа) и пара региональных индикаторов из двух букв ISO.
@@ -34,6 +36,13 @@
  * два поля: код и национальный номер; целиком он в value() и в событии
  * griffin:change.
  *
+ * Проверка приходит от маски и вместе со страной: недобранный номер
+ * не проходит checkValidity(), и смена кода пересчитывает полноту —
+ * девяти знаков хватает Беларуси и мало России. Проверяется ДЛИНА номера
+ * по маске выбранной страны, а не тип номера и не диапазон оператора:
+ * libphonenumber в замену не входит. value() при этом отражает набранное,
+ * даже неполное, — полнота отдаётся признаком complete в griffin:change.
+ *
  * База без скрипта: type="tel" и <select> кодов в .gr-input-group —
  * обе части платформенные.
  */
@@ -129,6 +138,11 @@
         select.appendChild(option);
         created.push(option);
       }
+
+      // Без country первой стоит первая по алфавиту языка страницы —
+      // на русской это Австралия, +61. Угадывать страну за автора виджет
+      // не берётся: ошибся бы тише, чем сейчас. Но и молчать не должен.
+      if (!o.country) G.warn('телефон: страна не задана — выбрана первая по алфавиту; укажите country');
     }
 
     if (!options().length) {
@@ -184,7 +198,7 @@
     function emit() {
       var c = info(current());
 
-      G.emit('griffin:change', el, { iso: c.iso, code: c.code, value: value() });
+      G.emit('griffin:change', el, { iso: c.iso, code: c.code, value: value(), complete: mask ? mask.complete() : true });
     }
 
     // Полный номер с плюсом: страна — по самому длинному коду, который

package/src/griffinjs/widgets/combobox.js

@@ -27,7 +27,7 @@
  * Мультивыбор (Этап 38g) — флаг multiple, а не новый виджет:
  *
  *   <div class="gr-combobox" data-gr-combobox="src: /tags?q={q}; multiple">
- *     <select name="tags[]" multiple>
+ *     <select class="gr-select" name="tags[]" multiple>
  *       <option value="css" selected>CSS</option>
  *     </select>
  *     <input class="gr-input" type="search">