griffincss-utils 0.21.4 → 0.22.1

package/scss/_typography.scss

@@ -17,7 +17,7 @@ $gr-text-sizes: (
   4xl:  2.25rem,
   5xl:  3rem,
   6xl:  3.75rem
-);
+) !default;
 
 @each $name, $size in $gr-text-sizes {
   .gr-text-#{$name} { font-size: $size; }
@@ -45,7 +45,7 @@ $gr-text-rel-steps: (
   xl:   4px,
   2xl:  6px,
   3xl:  8px
-);
+) !default;
 
 @each $gr-name, $gr-delta in $gr-text-rel-steps {
   .gr-text-rel-#{$gr-name} {
@@ -70,19 +70,17 @@ $gr-weights: (
   "bold":       700,
   "extrabold":  800,
   "black":      900
-);
+) !default;
 
 @each $name, $weight in $gr-weights {
   .gr-font-#{$name} { font-weight: $weight; }
 }
 
 // Text alignment
-// left/right буквальны и остаются такими: их выбирают, когда сторона
-// действительно нужна физическая. Разворот по направлению письма даёт
-// пара start/end — в LTR она совпадает с left/right, в RTL меняется местами.
-.gr-text-left    { text-align: left; }
+// Стороны — только логические: start — начало строки, end — конец,
+// в RTL они меняются местами сами. Физические left/right удалены
+// Этапом 36 вместе с остальными односторонними классами.
 .gr-text-center  { text-align: center; }
-.gr-text-right   { text-align: right; }
 .gr-text-justify { text-align: justify; }
 .gr-text-start   { text-align: start; }
 .gr-text-end     { text-align: end; }
@@ -99,7 +97,7 @@ $gr-leading: (
   normal: 1.5,
   relaxed: 1.625,
   loose:  2
-);
+) !default;
 
 @each $name, $value in $gr-leading {
   .gr-leading-#{$name} { line-height: $value; }
@@ -189,9 +187,7 @@ $gr-leading: (
   }
 
   // Text alignment responsive
-  .gr-text-left#{$suffix}    { text-align: left; }
   .gr-text-center#{$suffix}  { text-align: center; }
-  .gr-text-right#{$suffix}   { text-align: right; }
   .gr-text-justify#{$suffix} { text-align: justify; }
   .gr-text-start#{$suffix}   { text-align: start; }
   .gr-text-end#{$suffix}     { text-align: end; }

package/scss/griffincss-utils-scoped.scss

@@ -1,11 +1,18 @@
 // Griffincss Utils — версия, ограниченная областью .griffin
 // Утилитарные классы действуют только внутри элементов с классом .griffin,
 // что позволяет подключать библиотеку в чужую разметку без конфликтов.
-// Токены (из griffincss-core) объявляются вне @scope: :root должен остаться глобальным.
+// Токены (из griffincss-core) объявляются вне области: :root должен остаться глобальным.
 //
-// Слой тот же, что и у обычной сборки, — griffincss.utils.
-//
-// Требует поддержки CSS @scope (Chrome 118+, Safari 17.4+, Firefox 128+).
+// Слой тот же, что и у обычной сборки, — griffincss.utils.//
+// Область задаётся префиксом :where(.griffin), а не правилом @scope.
+// Вес у них одинаковый — нулевой: неявный :scope внутри @scope
+// специфичности не добавляет, и :where() не добавляет тоже, поэтому
+// scoped-сборка остаётся каскадным двойником обычной. Разница в пороге
+// браузеров: @scope требует Chrome 118, Safari 17.4 и Firefox 146,
+// а :where() — Chrome 88, Safari 14 и Firefox 78, то есть ниже
+// каскадных слоёв, на которых стоит вся библиотека. Файл, который
+// встраивают в чужую разметку, не вправе быть самым требовательным
+// в наборе.
 
 @use 'sass:meta';
 @layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
@@ -14,24 +21,28 @@
 @layer griffincss.utils {
   @include meta.load-css('griffincss-core/scss/tokens');
 
-  // Тема — тоже вне @scope: атрибут data-gr-theme стоит на <html>,
+  // Тема — тоже вне области: атрибут data-gr-theme стоит на <html>,
   // то есть заведомо снаружи области .griffin.
   @include meta.load-css('griffincss-core/scss/theme');
 
-  // @keyframes внутри @scope недействительны — подключаются вне области.
+  // @keyframes — вне области: имя анимации ищется глобально, префикс
+  // области к нему неприменим.
   @include meta.load-css('keyframes');
 
-  @scope (.griffin) {
+  :where(.griffin) {
     @include meta.load-css('animations');
     @include meta.load-css('border-radius');
     @include meta.load-css('borders');
     @include meta.load-css('colors');
     @include meta.load-css('effects');
+    @include meta.load-css('filters');
+    @include meta.load-css('gradients');
     @include meta.load-css('interactivity');
     @include meta.load-css('position');
     @include meta.load-css('shadows');
     @include meta.load-css('sizing');
     @include meta.load-css('spacing');
+    @include meta.load-css('transforms');
     @include meta.load-css('typography');
     @include meta.load-css('visibility');
   }

package/scss/griffincss-utils.scss

@@ -28,11 +28,14 @@
   @include meta.load-css('borders');
   @include meta.load-css('colors');
   @include meta.load-css('effects');
+  @include meta.load-css('filters');
+  @include meta.load-css('gradients');
   @include meta.load-css('interactivity');
   @include meta.load-css('position');
   @include meta.load-css('shadows');
   @include meta.load-css('sizing');
   @include meta.load-css('spacing');
+  @include meta.load-css('transforms');
   @include meta.load-css('typography');
   @include meta.load-css('visibility');
 }

package/src/griffincss-utils.js

@@ -1,5 +1,5 @@
 /*!
- * Griffincss Utils — Runtime v0.21.4
+ * Griffincss Utils — Runtime v0.22.1
  * Достраивает то, чего статический CSS выразить не может.
  * Пишется руками и не компилируется — правится этот файл.
  */
@@ -23,7 +23,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.21.4';
+  var VERSION = '0.22.1';
 
   // Таблица правил выводится из SCSS-карт скриптом scripts/sync-rule-table.mjs.
   // Правьте карты в SCSS, а не этот блок: npm run sync -- --fix перепишет его.
@@ -275,6 +275,14 @@
   // а `.gr-text-white` — цвет, и `.gr-text-[13px]` пришлось бы угадывать.
   // Угадывать рантайм не будет.
   //
+  // Физических односторонних свойств в таблице нет с Этапа 36: таблица
+  // повторяет статические классы один в один, а статические удалены.
+  // Привязку к строке произвольным значением дают gr-start-/gr-end- —
+  // логическая пара, заведённая взамен gr-left-/gr-right- тем же этапом:
+  // удаление без пары забрало бы возможность, а не перевело её. Верх
+  // и низ (mt/mb, pt/pb, top/bottom) — физические по устройству
+  // и остаются.
+  //
   // Запись единая — `свойство:{}` в каждой строке, даже там, где
   // объявление одно. Короткая форма замерена и отвергнута: gzip
   // повторение съедает сам, и выигрыш в 11 Б не стоит второй формы
@@ -282,18 +290,14 @@
   var PROPS = {
     'gr-m-': 'margin:{}',
     'gr-mt-': 'margin-top:{}',
-    'gr-mr-': 'margin-right:{}',
     'gr-mb-': 'margin-bottom:{}',
-    'gr-ml-': 'margin-left:{}',
     'gr-ms-': 'margin-inline-start:{}',
     'gr-me-': 'margin-inline-end:{}',
     'gr-mx-': 'margin-inline:{}',
     'gr-my-': 'margin-top:{};margin-bottom:{}',
     'gr-p-': '--gr-p:{};padding:var(--gr-p)',
     'gr-pt-': 'padding-top:{}',
-    'gr-pr-': 'padding-right:{}',
     'gr-pb-': 'padding-bottom:{}',
-    'gr-pl-': 'padding-left:{}',
     'gr-ps-': 'padding-inline-start:{}',
     'gr-pe-': 'padding-inline-end:{}',
     'gr-px-': 'padding-inline:{}',
@@ -307,9 +311,9 @@
     'gr-min-h-': 'min-height:{}',
     'gr-max-h-': 'max-height:{}',
     'gr-top-': 'top:{}',
-    'gr-right-': 'right:{}',
     'gr-bottom-': 'bottom:{}',
-    'gr-left-': 'left:{}',
+    'gr-start-': 'inset-inline-start:{}',
+    'gr-end-': 'inset-inline-end:{}',
     'gr-inset-': 'inset:{}',
     'gr-z-': 'z-index:{}'
   };