griffincss-ui 0.24.0-dev → 0.26.1

package/scss/_choice.scss

@@ -134,7 +134,6 @@
   display: block;
   padding-block: 0.375rem;
   padding-inline: var(--gr-ui-gap);
-  border-inline-start: var(--gr-border-width) solid var(--gr-color-border);
   color: var(--gr-color-text-secondary);
   font-size: 0.875rem;
   text-align: center;
@@ -143,18 +142,27 @@
   transition: background-color var(--gr-transition), color var(--gr-transition);
 }
 
+// Внутренняя рамка — у сегмента, перед которым стоит другой сегмент,
+// а не у каждого с последующим снятием у первого. Края и рамка считаются
+// по ярлыкам, а не по любым потомкам: у <fieldset> штатное имя — <legend>
+// (в том числе скрытый, .gr-sr-only), и первым потомком он отнимал
+// у первого сегмента скругление и левую рамку, а хвостовой <script>
+// или скрытое поле — скругление у последнего (фидбек темы griffin, п. 2).
+.gr-segmented label ~ label span {
+  border-inline-start: var(--gr-border-width) solid var(--gr-color-border);
+}
+
 // Скругление крайних сегментов задаётся явно, а не берётся из overflow:
 // hidden на обёртке. Обрезка по overflow идёт по внутреннему краю рамки,
 // но с ВНЕШНИМ радиусом, поэтому в углах между заливкой и рамкой оставался
 // зазор — фон переключателя не совпадал с его границами. Свои радиусы
 // у сегментов ложатся по рамке точно.
-.gr-segmented label:first-child span {
-  border-inline-start: 0;
+.gr-segmented label:first-of-type span {
   border-start-start-radius: var(--gr-segmented-radius);
   border-end-start-radius: var(--gr-segmented-radius);
 }
 
-.gr-segmented label:last-child span {
+.gr-segmented label:last-of-type span {
   border-start-end-radius: var(--gr-segmented-radius);
   border-end-end-radius: var(--gr-segmented-radius);
 }
@@ -200,3 +208,117 @@
   color: var(--gr-color-text-disabled);
   cursor: not-allowed;
 }
+
+// Два модификатора, а не рецепты из утилит (фидбек темы griffin, п. 6).
+// Утилиты флекса лежат в слое core и проигрывают align-items и display
+// компонента в ui при любой специфичности; .gr-w-full живёт в utils,
+// а пакет компонентов обязан собираться и без него.
+//
+// Согласие «Я прочитал условия…» в две-три строки: контрол стоит
+// по первой строке, а не по центру блока. Сдвиг — к середине первой
+// строки: при line-height 1,4 квадратик 1,15em ложился бы по её верху.
+.gr-choice-start {
+  align-items: flex-start;
+}
+
+.gr-choice-start > input {
+  margin-block-start: 0.15em;
+}
+
+// Строка настроек «подпись — тумблер»: блочный флекс во всю ширину,
+// подпись слева, переключатель у правого края, кликается вся строка.
+// В инлайновом контексте автор берёт .gr-choice.
+.gr-choice-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+// --- Образец цвета и плашка размера -----------------------------------------
+
+// Радио, которую видят как образец: кружок цвета товара или плашка
+// с размером (Этап 42e). Разметка — та же строка выбора: <label
+// class="gr-choice">, внутри <input class="gr-radio"> и образец следом.
+// Композиция из готового не сложилась ровно в одном месте: состояние
+// «выбран» на самом образце требует правила, которого нет ни у одной
+// утилиты, — а без него выбор показывала бы только радио рядом с кружком.
+//
+// Цвет образца — только через переменную на элементе
+// (style="--gr-swatch: …"): цвет товара — данные страницы, литеральных
+// цветов в библиотеке нет. Цвет — не подпись: у радио обязателен aria-label
+// или текст рядом.
+//
+// Радио прячется правилом с :has(): без него (Firefox < 121) правило
+// не применяется вовсе, и радио остаётся видимой рядом с образцом —
+// мягкая деградация по построению. Сама радио остаётся в потоке, 1px
+// и прозрачной — как в .gr-segmented: display: none снял бы клавиатуру.
+.gr-swatch,
+.gr-swatch-tag {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: var(--gr-border-width) solid var(--gr-color-border-strong);
+  cursor: pointer;
+  transition:
+    box-shadow var(--gr-transition),
+    background-color var(--gr-transition),
+    color var(--gr-transition);
+}
+
+.gr-swatch {
+  --gr-swatch: var(--gr-color-surface-sunken);
+
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border-radius: var(--gr-radius-pill);
+  background-color: var(--gr-swatch);
+}
+
+.gr-swatch-tag {
+  min-inline-size: 2.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.625rem;
+  border-radius: var(--gr-radius);
+  background-color: var(--gr-color-surface);
+  color: var(--gr-color-text);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.gr-choice:has(> .gr-swatch, > .gr-swatch-tag) {
+  position: relative;
+}
+
+.gr-choice:has(> .gr-swatch, > .gr-swatch-tag) > .gr-radio {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// Выбранный кружок — кольцо акцента с просветом цвета подложки: и белый
+// образец, и образец цвета акцента читаются на нём одинаково.
+.gr-radio:checked + .gr-swatch {
+  box-shadow:
+    0 0 0 2px var(--gr-color-surface),
+    0 0 0 4px var(--gr-color-accent);
+}
+
+.gr-radio:checked + .gr-swatch-tag {
+  border-color: var(--gr-color-accent);
+  background-color: var(--gr-color-accent);
+  color: var(--gr-color-on-accent);
+}
+
+.gr-radio:focus-visible + .gr-swatch,
+.gr-radio:focus-visible + .gr-swatch-tag {
+  outline: var(--gr-focus-width) solid var(--gr-color-focus);
+  outline-offset: 2px;
+}
+
+.gr-radio:disabled + .gr-swatch,
+.gr-radio:disabled + .gr-swatch-tag {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/scss/_dropdown.scss

@@ -38,15 +38,19 @@
 
 // --- Панель -----------------------------------------------------------------
 
+// Ширина и отступ панели — токенами (Этап 46): панель — голая коробка
+// позиционирования, рамку и фон даёт .gr-menu внутри, а теме нужна панель
+// заданной ширины под свою разметку и с полем вокруг неё.
 .gr-dropdown-panel {
   position: absolute;
   z-index: var(--gr-z-dropdown);
   inset-block-start: calc(100% + var(--gr-ui-gap) * 0.5);
   inset-inline-start: 0;
   box-sizing: border-box;
-  min-inline-size: max-content;
+  min-inline-size: var(--gr-dropdown-min-width, max-content);
   max-inline-size: min(20rem, 90vw);
   margin: 0;
+  padding: var(--gr-dropdown-pad, 0);
 }
 
 // Раскрытие к концу строки — для панели у правого края шапки, которая иначе
@@ -74,7 +78,7 @@
   max-inline-size: 100%;
   margin: 0;
   border: 0;
-  padding: 0;
+  padding: var(--gr-dropdown-pad, 0);
   background: none;
   color: inherit;
   overflow: visible;
@@ -102,7 +106,7 @@
     position-anchor: --gr-dropdown-anchor;
     inset-block: calc(anchor(end) + var(--gr-ui-gap) * 0.5) auto;
     inset-inline: anchor(start) auto;
-    min-inline-size: max-content;
+    min-inline-size: var(--gr-dropdown-min-width, max-content);
     max-inline-size: min(20rem, 90%);
 
     // Если снизу места нет — панель переворачивается вверх, если не хватает

package/scss/_form.scss

@@ -168,6 +168,14 @@
 // :user-invalid, а не :invalid — пустое обязательное поле не должно краснеть
 // до того, как человек его тронул. Атрибут aria-invalid рядом: его ставит
 // серверная проверка, которой правила браузера не касаются.
+//
+// Третий источник — состояние на обёртке: .gr-field[data-gr-state="error"]
+// (фидбек темы griffin, п. 7). Скрипты, которые красят ошибки после ответа
+// сервера, получают список полей и ставят состояние на обёртку — так
+// работает OpenCart (.form-group.has-error) и большинство валидаторов,
+// и до сих пор обёртке .gr-field соответствовать было нечему. Состояние
+// красит вложенные контролы; aria-invalid на контроле остаётся источником
+// для программы чтения с экрана — виджет validate ставит оба.
 .gr-input:user-invalid,
 .gr-textarea:user-invalid,
 .gr-select:user-invalid,
@@ -175,7 +183,11 @@
 .gr-input[aria-invalid="true"],
 .gr-textarea[aria-invalid="true"],
 .gr-select[aria-invalid="true"],
-.gr-file[aria-invalid="true"] {
+.gr-file[aria-invalid="true"],
+.gr-field[data-gr-state="error"] .gr-input,
+.gr-field[data-gr-state="error"] .gr-textarea,
+.gr-field[data-gr-state="error"] .gr-select,
+.gr-field[data-gr-state="error"] .gr-file {
   border-color: var(--gr-color-danger);
 }
 
@@ -377,6 +389,22 @@
   border-radius: 0;
 }
 
+// Края — по видимым полям. Скрытые потомки в группе — обычная практика
+// форм: полное значение составного поля (телефон = код + номер) в
+// <input type="hidden">, признак формы, панель подсказки, которую живой
+// поиск дописывает внутрь, спутник поля даты или суммы из второго бандла.
+// По :first-child / :last-child скругление доставалось скрытому узлу,
+// и видимый край группы оставался прямым (фидбек темы griffin, п. 1).
+//
+// Два яруса правил, а не один. Прежние :first-child / :last-child
+// остаются запасным путём: форма `:nth-child(… of S)` появилась
+// в Chrome 111 и Firefox 113 — позже каскадных слоёв (99 / 97), — и там,
+// где она неизвестна, правило отбрасывается целиком, а группа выглядит
+// как раньше. Мягкая деградация названа в docs/compatibility.html.
+// Правила по видимым стоят ниже и специфичнее (0,3,0 против 0,2,0),
+// поэтому в новых движках побеждают они.
+$_gr-group-visible: ':not([type="hidden"], [hidden], template, script, datalist)';
+
 .gr-input-group > :first-child {
   border-start-start-radius: var(--gr-radius);
   border-end-start-radius: var(--gr-radius);
@@ -391,6 +419,19 @@
   margin-inline-start: calc(-1 * var(--gr-border-width));
 }
 
+// Первое видимое поле — ещё и без сдвига на рамку: скрытый узел перед ним
+// делает его для `* + *` вторым, и без этой строки оно уезжало бы на 1px.
+.gr-input-group > :nth-child(1 of #{$_gr-group-visible}) {
+  margin-inline-start: 0;
+  border-start-start-radius: var(--gr-radius);
+  border-end-start-radius: var(--gr-radius);
+}
+
+.gr-input-group > :nth-last-child(1 of #{$_gr-group-visible}) {
+  border-start-end-radius: var(--gr-radius);
+  border-end-end-radius: var(--gr-radius);
+}
+
 // Поле в группе тянется, аддон — нет.
 .gr-input-group > .gr-input,
 .gr-input-group > .gr-select {

package/scss/_menu.scss

@@ -17,7 +17,10 @@
   padding-block: calc(var(--gr-ui-gap) * 0.5);
   padding-inline: 0;
   border: var(--gr-border-width) solid var(--gr-color-border);
-  border-radius: var(--gr-radius);
+
+  // Радиус контейнера, как у карточки и окна: меню — видимая коробка
+  // выпадающей панели (Этап 46).
+  border-radius: var(--gr-radius-container, var(--gr-radius));
   background-color: var(--gr-color-surface-overlay);
   color: var(--gr-color-text);
   box-shadow: var(--gr-shadow-lg);

package/scss/_modal.scss

@@ -30,16 +30,23 @@
 // Размеры — в процентах от окна, а не в 100vw: единица vw включает ширину
 // полосы прокрутки, поэтому окно «во всю ширину минус поля» получалось шире
 // видимой области и центрировалось со сдвигом в половину полосы.
+//
+// Минимальная высота — для окна, чьё содержимое приходит ajax'ом: форма
+// обратного звонка, быстрый заказ, выбор города открываются сразу, а до
+// ответа сервера <dialog> пуст и рисовался полоской высотой в рамку
+// (фидбек темы griffin, п. 3). Плашка в 10rem — место кольцу загрузки
+// ниже; плавный рост высоты с приходом содержимого — работа слоя.
 .gr-modal {
   position: fixed;
   box-sizing: border-box;
   flex-direction: column;
   inline-size: min(32rem, calc(100% - var(--gr-gap) * 2));
   max-inline-size: none;
+  min-block-size: 10rem;
   max-block-size: min(85dvh, calc(100% - var(--gr-gap) * 2));
   padding: 0;
   border: var(--gr-border-width) solid var(--gr-color-border);
-  border-radius: var(--gr-radius);
+  border-radius: var(--gr-radius-container, var(--gr-radius));
   background-color: var(--gr-color-surface-overlay);
   color: var(--gr-color-text);
   box-shadow: var(--gr-shadow-xl);
@@ -62,6 +69,25 @@
   background-color: var(--gr-overlay);
 }
 
+// Состояние загрузки: кольцо по центру пустого окна, тем же keyframe,
+// что у .gr-spinner. Одним слоем, а не двумя, как у самого спиннера:
+// у окна псевдоэлемент один, и дорожка красится цветом рамки вместо
+// полупрозрачного currentcolor — окно стоит на известной поверхности.
+// Центр — авто-отступами флекс-элемента: окно в состоянии [open] уже
+// колонка, и ::before в ней — обычный элемент. Ставит и снимает состояние
+// тот же скрипт, что грузит содержимое; рядом уместен aria-busy="true".
+.gr-modal[data-gr-state="loading"]::before {
+  content: "";
+  box-sizing: border-box;
+  inline-size: 2.5em;
+  block-size: 2.5em;
+  margin: auto;
+  border: 0.18em solid var(--gr-color-border);
+  border-block-start-color: var(--gr-color-accent);
+  border-radius: var(--gr-radius-pill);
+  animation: gr-spin 0.8s linear infinite;
+}
+
 // --- Пояса ------------------------------------------------------------------
 
 // Шапка и подвал не сжимаются и не прокручиваются: прокручивается тело.
@@ -86,11 +112,14 @@
   line-height: 1.3;
 }
 
+// Прокрутка тела — токеном (Этап 46): окну с собственной прокруткой
+// внутри (карта, список) тема ставит --gr-modal-body-overflow: hidden
+// на обёртке, а не борется со слоем ui на самом теле.
 .gr-modal-body {
   flex: 1 1 auto;
   padding: var(--gr-gap);
   line-height: var(--gr-leading-base);
-  overflow-y: auto;
+  overflow-y: var(--gr-modal-body-overflow, auto);
   overscroll-behavior: contain;
 }
 
@@ -128,16 +157,18 @@
 
 // Окно проявляется и подъезжает снизу, подложка — только проявляется.
 // display и overlay переводятся через allow-discrete: без этого окно
-// возникало бы мгновенно, минуя переход.
+// возникало бы мгновенно, минуя переход. Длительность и кривая — токеном
+// --gr-modal-transition (Этап 46): тема задаёт окну свой темп на обёртке,
+// не переписывая четыре свойства перехода в правиле слоя ui.
 @supports (transition-behavior: allow-discrete) {
   .gr-modal {
     opacity: 0;
     translate: 0 var(--gr-gap);
     transition:
-      opacity var(--gr-transition),
-      translate var(--gr-transition),
-      overlay var(--gr-transition) allow-discrete,
-      display var(--gr-transition) allow-discrete;
+      opacity var(--gr-modal-transition, var(--gr-transition)),
+      translate var(--gr-modal-transition, var(--gr-transition)),
+      overlay var(--gr-modal-transition, var(--gr-transition)) allow-discrete,
+      display var(--gr-modal-transition, var(--gr-transition)) allow-discrete;
   }
 
   .gr-modal[open] {
@@ -178,4 +209,10 @@
   .gr-modal::backdrop {
     transition-duration: 0.01ms;
   }
+
+  // Кольцо замедляется, но не останавливается — как .gr-spinner:
+  // остановленный индикатор занятости сообщает «зависло».
+  .gr-modal[data-gr-state="loading"]::before {
+    animation-duration: 2.4s;
+  }
 }

package/scss/_nav.scss

@@ -31,10 +31,13 @@ $gr-nav-expand: map.get(bp.$gr-breakpoints, md);
 // Ряд на <ul>: обёртка <li> не должна ни добавлять полей, ни мешать пункту
 // растянуться по ширине колонки. :where() держит специфичность нулевой,
 // чтобы класс на самом <li> оставался сильнее.
+// Отступ пункта — токеном с нулевым умолчанием (Этап 46): правило темы
+// на самом <li> проигрывает этому по слою, и тема оборачивала пункт лишним
+// узлом. То же у радиуса ссылки ниже.
 .gr-nav > :where(li) {
   display: flex;
   margin: 0;
-  padding: 0;
+  padding: var(--gr-nav-item-pad, 0);
   list-style: none;
 }
 
@@ -61,7 +64,7 @@ $gr-nav-expand: map.get(bp.$gr-breakpoints, md);
   padding-block: 0;
   padding-inline: calc(var(--gr-control-padding-x) * 0.75);
   border: 0;
-  border-radius: var(--gr-radius);
+  border-radius: var(--gr-nav-link-radius, var(--gr-radius));
   background-color: transparent;
   color: var(--gr-nav-fg);
   font-family: inherit;

package/scss/_rating.scss

@@ -13,6 +13,12 @@
 // не везёт: подставить свой глиф можно одной строкой на весь сайт, а SVG
 // в модуле означал бы иконочный набор, которого здесь не будет.
 //
+// Цвет заливки — семантический токен --gr-color-rating из темы: его же
+// читает всё, что изображает оценку рядом с рядом знаков (Этап 45).
+// --gr-rating-color — переопределение на одном ряду или во всём проекте;
+// в :root оно не объявлено, поэтому без него ряд берёт цвет темы, и
+// вложенная секция с другой темой перекрашивает звёзды вместе с собой.
+//
 // Число ОБЯЗАНО быть и словом: aria-label вида «4,5 из 5». Пять знаков —
 // это цвет и форма, то есть ровно то, что не переживает ни печать,
 // ни программу чтения с экрана; правило «статус словом, а не только
@@ -74,5 +80,5 @@ $_gr-rating-row: var(--gr-rating-symbol) var(--gr-rating-symbol) var(--gr-rating
   inset-inline-start: 0;
   inline-size: var(--gr-rating-fill);
   overflow: hidden;
-  color: var(--gr-rating-color);
+  color: var(--gr-rating-color, var(--gr-color-rating));
 }

package/scss/_table.scss

@@ -8,6 +8,8 @@
 // у ячеек остались бы двойные линии и зазоры border-spacing.
 
 @use 'sass:string';
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
 
 .gr-table {
   inline-size: 100%;
@@ -112,12 +114,101 @@
   }
 }
 
+// --- Карточки вместо строк --------------------------------------------------
+
+// Ниже порога таблица кабинета — заказы, транзакции, бонусы — становится
+// стопкой карточек: строка — блок с обводкой, ячейки в столбик, подпись
+// колонки — из data-label ячейки (фидбек темы griffin по 0.25.0, п. 5).
+//
+// Шапка спрятана по образцу .gr-sr-only (без объявлений для строчных
+// элементов — у блока-обёртки им нечего делать), а не через display: none:
+// программе чтения с экрана заголовки колонок нужны.
+// Подпись — только у ячейки с data-label: пустой ::before у ячейки без
+// атрибута занимал бы свою долю строки и сдвигал значение. Без атрибута
+// ячейка идёт без подписи — не ломается, но и не подписана.
+//
+// Суффикс называет ПОРОГ: .gr-table-stack-md — карточки ниже 768px ширины
+// окна, .gr-table-stack-cmd — ниже 768px ширины ближайшего предка с .gr-cq;
+// от порога и выше — обычная таблица. Это обратная сторона суффиксов
+// «от брейкпоинта» у остальных адаптивных классов: класс описывает узкое
+// состояние, а широкое — просто таблица. Без суффикса — карточки всегда.
+@mixin gr-table-stack($s) {
+  #{$s},
+  #{$s} tbody,
+  #{$s} tfoot,
+  #{$s} tr {
+    display: block;
+  }
+
+  #{$s} thead {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  #{$s} tr {
+    margin-block-end: var(--gr-gap);
+    border: var(--gr-border-width) solid var(--gr-color-border);
+    border-radius: var(--gr-radius-container, var(--gr-radius));
+  }
+
+  #{$s} tr:last-child {
+    margin-block-end: 0;
+  }
+
+  // Ячейка — строка «подпись — значение». gap даёт зазор между ними,
+  // подпись занимает свою долю, значение — остальное.
+  #{$s} tr > * {
+    display: flex;
+    gap: var(--gr-gap);
+    white-space: normal;
+  }
+
+  #{$s} tr > :last-child {
+    border-block-end: 0;
+  }
+
+  // text-align: start — подпись не следует за .gr-text-end ячейки: класс
+  // ставят ради чисел, а подпись обязана стоять в начале своей доли.
+  // Остальное (шрифт, кегль через em) подпись наследует от ячейки, как
+  // любой ::before; класс шрифта для значения ставится на самом значении.
+  #{$s} tr > [data-label]::before {
+    content: attr(data-label);
+    flex: 0 0 40%;
+    color: var(--gr-color-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-align: start;
+  }
+}
+
+@include gr-table-stack('.gr-table-stack');
+
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width < $bp-value) {
+    @include gr-table-stack('.gr-table-stack-#{$bp-name}');
+  }
+
+  @include cq.gr-container-below($bp-name) {
+    @include gr-table-stack('.gr-table-stack-c#{$bp-name}');
+  }
+}
+
 // --- Прокрутка и липкая шапка -----------------------------------------------
 
 // Широкая таблица не сжимается ниже своего содержимого, поэтому без обёртки
 // вбок уезжала бы вся страница, а не одна таблица. Прокручиваемая область
 // объявлена tabindex="0" в разметке — иначе до неё не добраться с клавиатуры.
+//
+// position: relative — обёртка становится содержащим блоком для абсолютно
+// позиционированных потомков. Без него .gr-sr-only внутри кнопки-иконки
+// (кнопка не позиционирована) считался от блока снаружи прокрутки, вставал
+// у правого края широкой таблицы за её пределами и растягивал документ:
+// страница уезжала вбок ровно от того, что обёртка должна была удержать.
 .gr-table-wrap {
+  position: relative;
   inline-size: 100%;
   max-block-size: 100%;
   overflow: auto;

package/scss/_tabs.scss

@@ -59,7 +59,10 @@
   min-block-size: var(--gr-control-height);
   margin: 0;
   padding-block: 0;
-  padding-inline: var(--gr-control-padding-x);
+
+  // Отступ вкладки — токеном (Этап 46): правило темы на .gr-tab
+  // проигрывает слою ui, а ряд вкладок в шапке витрины хочет быть плотнее.
+  padding-inline: var(--gr-tabs-tab-pad, var(--gr-control-padding-x));
   border: 0;
 
   // Линия объявлена прозрачной у всех вкладок сразу: появись она только

package/scss/griffincss-ui-scoped.scss

@@ -25,16 +25,20 @@
 // остаётся в DOM внутри .griffin, поэтому префикс до него достаёт.
 
 @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 {
+// Токены и тема — вне области и в общем слое griffincss.tokens, как
+// в обычной сборке (Этап 46): атрибут data-gr-theme стоит на <html>,
+// то есть заведомо снаружи области .griffin.
+@layer griffincss.tokens {
   @include meta.load-css('griffincss-core/scss/tokens');
-
-  // Тема — тоже вне области: атрибут data-gr-theme стоит на <html>,
-  // то есть заведомо снаружи области .griffin. Оба файла, как в обычной
-  // сборке: правила режима обязаны лежать в одном слое с вариантами ссылки.
   @include meta.load-css('griffincss-core/scss/theme-tokens');
+}
+
+// Остальной вывод пакета — в слое griffincss.ui.
+@layer griffincss.ui {
+  // Правила режима со свойствами — в одном слое с вариантами ссылки,
+  // как в обычной сборке.
   @include meta.load-css('griffincss-core/scss/theme-rules');
 
   // @keyframes — вне области: имя анимации ищется глобально, префикс
@@ -71,3 +75,9 @@
     @include meta.load-css('tooltip');
   }
 }
+
+// [hidden] — вне области: атрибут обязан работать на любом элементе страницы,
+// а не только внутри .griffin.
+@layer griffincss.hidden {
+  @include meta.load-css('griffincss-core/scss/hidden');
+}

package/scss/griffincss-ui.scss

@@ -17,23 +17,25 @@
 // margin-bottom.
 
 @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 {
+// Токены и тема подключаются и здесь, а не только в ядре: собранный файл
+// самодостаточен. Но эмитятся они в общий слой griffincss.tokens, а не в ui
+// (Этап 46): копия та же, что в ядре и в утилитах, и все копии стоят в одном
+// слое — подслой темы потребителя сразу после tokens перебивает их при любой
+// специфичности. Раньше копия в ui была старше и подслоя, и ядра.
+@layer griffincss.tokens {
   @include meta.load-css('griffincss-core/scss/tokens');
+  @include meta.load-css('griffincss-core/scss/theme-tokens');
+}
 
-  // Тема подключается и здесь, а не только в ядре: слой griffincss.ui старше
-  // griffincss.core, поэтому переопределения темы, приехавшие только
-  // с griffincss-core.css, проиграли бы базовому :root из этой сборки —
-  // независимо от специфичности селектора.
-  //
-  // Правила режима со свойствами тоже здесь — в отличие от utils. Правило
+// Остальной вывод пакета — в слое griffincss.ui.
+@layer griffincss.ui {
+  // Правила режима со свойствами — здесь, в отличие от utils. Правило
   // [data-gr-a11y="low-vision"] a[href] (0,1,1) обязано побеждать варианты
   // ссылки .gr-link-quiet и .gr-link-inherit (0,1,0), а для этого лежать
   // с ними в одном слое: из ядра оно бы им проиграло. Компонент с заливкой
   // защищается от него сам — a.gr-btn в _button.scss стоит позже по порядку.
-  @include meta.load-css('griffincss-core/scss/theme-tokens');
   @include meta.load-css('griffincss-core/scss/theme-rules');
 
   // @keyframes живут отдельным файлом ради scoped-сборки — см. _keyframes.scss.
@@ -71,3 +73,7 @@
   // модуля нет намеренно, см. его шапку.
   @include meta.load-css('style-rules');
 }
+
+@layer griffincss.hidden {
+  @include meta.load-css('griffincss-core/scss/hidden');
+}