@rt-tools/ui-kit-v2 0.10.0 → 0.12.0

package/src/{lib → rich-editor/lib}/components/chat/CONTEXT.md

@@ -43,4 +43,4 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 - Режим `formatting` подменяет простое поле [`rt-rich-editor`](../rich-editor/CONTEXT.md);
   тот грузит Quill динамическим импортом.
 - Неотправленное сообщение (`status: 'failed'`) получает кнопку повтора.
-- Файлы можно бросать прямо в ленту — чат обёрнут в [`rt-file-drop`](../file-drop/CONTEXT.md).
+- Файлы можно бросать прямо в ленту — чат обёрнут в [`rt-file-drop`](../../../../lib/components/file-drop/CONTEXT.md).

package/src/{lib → rich-editor/lib}/components/message-composer/CONTEXT.md

@@ -33,12 +33,16 @@
 **Enter отправляет, Shift+Enter переносит строку.** Набор во время IME-композиции игнорируется.
 
 **`droppedFiles` — вход, а не выход.** Файлы, брошенные в область
-[`rt-file-drop`](../file-drop/CONTEXT.md) снаружи, передаются сюда входом и добавляются к
+[`rt-file-drop`](../../../../lib/components/file-drop/CONTEXT.md) снаружи, передаются сюда входом и добавляются к
 вложениям; без `attachments` они игнорируются.
 
 ## Края
 
 - После отправки форма сбрасывается целиком — и текст, и файлы.
+- Ширину поле берёт от хозяина. Своей ширины у него нет намеренно: без объявленной ширины её
+  задавала бы `textarea` умолчанием браузера по числу колонок, а оно считается от средней ширины
+  знака доступного начертания и не держится между запусками — кадры витрины из-за этого месяцами
+  давали то 192 точки, то 195.
 - В режиме `formatting` текст уезжает пустым, а содержимое едет в `delta` строкой JSON.
 
 ## Рядом

package/src/{lib → rich-editor/lib}/components/message-composer/rt-message-composer.component.scss

@@ -12,6 +12,11 @@
         background: var(--rt-color-bg-surface);
         gap: var(--rt-space-2);
 
+        /* Ширина приходит от хозяина, а не от содержимого. Без этой строки её задавала textarea
+           без объявленной ширины: такую браузер считает от средней ширины знака первого
+           доступного начертания, и величина гуляла между поднятиями витрины — 158 против 161. */
+        inline-size: 100%;
+
         &:focus-within {
             border-color: var(--rt-color-border-strong);
         }
@@ -26,6 +31,10 @@
             font-size: var(--rt-text-sm);
             inline-size: 100%;
             line-height: var(--rt-leading-snug);
+
+            /* Своего размера поле ввода хозяину не отдаёт: иначе его ширина по `cols`
+               по-прежнему участвовала бы в измерении. */
+            min-inline-size: 0;
             outline: 0;
             resize: none;
 

package/src/{lib → rich-editor/lib}/components/rich-editor/CONTEXT.md

@@ -8,7 +8,7 @@
 </rt-field>
 ```
 
-Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+Свои входы поверх общих из [`RtFormControlBase`](../../../../lib/components/form-control/CONTEXT.md):
 
 | вход          | тип                    | умолчание |
 | ------------- | ---------------------- | --------- |
@@ -31,6 +31,6 @@
 
 ## Рядом
 
-- [`rt-delta-view`](../delta-view/CONTEXT.md) — показ той же модели без редактирования.
+- [`rt-delta-view`](../../../../lib/components/delta-view/CONTEXT.md) — показ той же модели без редактирования.
 - [`rt-message-composer`](../message-composer/CONTEXT.md) — использует редактор в режиме
   форматирования.

package/src/styles/_coarse-pointer.scss

@@ -0,0 +1,15 @@
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+
+/* On touch devices an input is not smaller than 16px: WebKit (all of iOS, Chrome included)
+   zooms the page on focusing a field with font-size < 16px — hence the horizontal
+   shift of the layout. The desktop keeps the dense 14px. */
+@mixin rt-coarse-pointer-tokens {
+    @media (pointer: coarse) {
+        --rt-input-font-size: var(--rt-text-md);
+    }
+}
+
+:root {
+    @include rt-coarse-pointer-tokens;
+}

package/src/styles/_coexist.scss

@@ -0,0 +1,28 @@
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+
+/* Coexistence with the first kit for the time of migration. The first kit declares ten steps of the
+   same names on the page root with its own values, and an application holding both kits gets them
+   inside the second kit's components: a 4px rounding becomes 8px. Here the second kit's values stand
+   on the preset node, and the preset is drawn by its own scale whatever lies on the root.
+
+   The selector outweighs the first kit's root by one step wherever the preset flag stands, the page
+   root included: there both kits declare the steps on the same node, and without the extra weight
+   the order of inclusion decides.
+
+   The application includes it only while it holds the first kit, and removes it together with it:
+   the values repeat the scale, so without the first kit the look does not change. */
+
+[data-preset='material']:is(:root, :not(:root)),
+.rt-preset-material:is(:root, :not(:root)) {
+    --rt-radius-xs: 2px;
+    --rt-radius-sm: 4px;
+    --rt-radius-md: 8px;
+    --rt-radius-lg: 10px;
+    --rt-radius-xl: 15px;
+    --rt-radius-2xl: 20px;
+    --rt-radius-full: 9999px;
+    --rt-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
+    --rt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 6%);
+    --rt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 6%);
+}

package/src/styles/_fonts.scss

@@ -0,0 +1,99 @@
+// Начертания, которые кит называет, кит и везёт.
+// Прежде токен `--rt-font-family-sans` называл Montserrat, а файлов кит не вёз ни одного: у
+// потребителя кит рисовался тем, что случайно стоит на машине читателя. Отступы, высоты строк и
+// ширины полей рассчитаны под Montserrat, и вид разъезжался там, где никто ничего не правил.
+// Кадры витрины это скрывали: они снимались на машине, где Montserrat установлен.
+// Файлы лежат рядом, в `assets/fonts`, и уезжают в пакет тем же путём, что набор значков. Адрес
+// относительный: сборка потребителя разрешает `url()` от места файла стилей. Исходники партиалов
+// лежат в пакете в `src/styles`, и им подходит адрес по умолчанию. Собранный `styles/tokens.css`
+// лежит на каталог выше исходников, поэтому его сборка задаёт `$rt-fonts-url` своим входом —
+// с прежним адресом сборка приложения не находила ни одного файла.
+// Объявления стоят вне слоя каскада намеренно: `@font-face` — не правило оформления, спорить ему
+// не с чем, и слой на него не действует.
+// Начертание одно на все насыщенности: переменный шрифт несёт ось веса целиком, и четыре
+// объявленных китом веса — 400, 500, 600, 700 — берутся из него же. Файлами по весу это стоило бы
+// вчетверо больше при том же виде.
+// Подмножества разделены по диапазонам знаков: браузер качает только те, чьи знаки на странице
+// встретились. Русской странице достаются кириллица и латиница, а латинское расширение не едет.
+
+$rt-fonts-url: '../assets/fonts' !default;
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-cyrillic-ext-wght-italic.woff2') format('woff2-variations');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-cyrillic-wght-normal.woff2') format('woff2-variations');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-cyrillic-wght-italic.woff2') format('woff2-variations');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-latin-ext-wght-italic.woff2') format('woff2-variations');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-latin-wght-normal.woff2') format('woff2-variations');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('#{$rt-fonts-url}/montserrat-latin-wght-italic.woff2') format('woff2-variations');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/styles/_index.scss

@@ -6,9 +6,18 @@
 // подслой ложится.
 @forward './layers';
 
+// Начертания идут первыми: объявление `@font-face` обязано попасть в вывод раньше первого
+// правила, которое им рисует. Без этой строки кит называет Montserrat и не везёт его — у
+// потребителя он рисуется тем, что случайно стоит на машине читателя.
+@forward './fonts';
+
 @forward './primitives';
 @forward './semantic';
 
+// Грубый указатель идёт сразу за назначениями: у правила запроса тот же вес, что у корневого, и
+// выигрывает оно местом.
+@forward './coarse-pointer';
+
 // Материальный набор стоит между назначениями и тёмной темой: у признака набора и признака
 // тёмной темы на корне одинаковая специфичность, и порядок здесь — единственное, чем тёмная
 // тема выигрывает у набора.
@@ -16,6 +25,10 @@
 
 @forward './theme-dark';
 @forward './theme-dark-rules';
+
+// Местный кусок темы стоит последним из наборов свойств: его правила обязаны выигрывать у
+// корневых, а выигрывают они местом, а не силой селектора.
+@forward './theme-scope';
 @forward './scrollbar';
 
 // Раскладка экрана входа: она объявлена классами, а не компонентом, поэтому доехать до

package/src/styles/_preset-material.scss

@@ -15,24 +15,24 @@
 @mixin rt-preset-material-tokens {
     /* Подложки */
     --rt-color-bg-page: var(--rt-mat-neutral-5);
-    --rt-color-bg-surface: var(--rt-mat-neutral-0);
+    --rt-color-bg-surface: var(--mat-sys-surface, var(--rt-mat-neutral-0));
     --rt-color-bg-surface-subtle: var(--rt-mat-overlay-black-4);
-    --rt-color-bg-surface-subtle-2: var(--rt-mat-neutral-15);
+    --rt-color-bg-surface-subtle-2: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant, var(--rt-mat-neutral-15)));
     --rt-color-bg-hover: var(--rt-mat-neutral-10);
     --rt-color-bg-subtle: var(--rt-mat-neutral-10);
     --rt-color-bg-overlay: var(--rt-mat-overlay-black-32);
-    --rt-color-bg-inverse: var(--rt-mat-neutral-100);
-    --rt-color-bg-nav: var(--rt-mat-navy-100); /* марка первого кита: обвязка тёмная в обоих наборах */
+    --rt-color-bg-inverse: var(--mat-sys-inverse-surface, var(--rt-mat-neutral-100));
+    --rt-color-bg-nav: var(--mat-sys-primary, var(--rt-mat-navy-100)); /* марка первого кита: обвязка тёмная в обоих наборах */
     --rt-color-bg-page-auth: var(--rt-mat-neutral-5);
     --rt-color-bg-surface-auth-card: var(--rt-mat-neutral-0);
 
     /* Текст */
-    --rt-color-text-primary: var(--rt-mat-neutral-100);
+    --rt-color-text-primary: var(--mat-sys-on-surface, var(--rt-mat-neutral-100));
     --rt-color-text-muted: var(--rt-mat-neutral-60);
-    --rt-color-text-disabled: var(--rt-mat-neutral-40);
-    --rt-color-text-inverse: var(--rt-mat-neutral-0);
-    --rt-color-text-link: var(--rt-mat-blue-100);
-    --rt-color-text-link-hover: var(--rt-mat-blue-hover);
+    --rt-color-text-disabled: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-100)) 38%, transparent);
+    --rt-color-text-inverse: var(--mat-sys-inverse-on-surface, var(--rt-mat-neutral-0));
+    --rt-color-text-link: var(--mat-sys-primary, var(--rt-mat-blue-100));
+    --rt-color-text-link-hover: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 90%, #000);
 
     /* Рамки */
     --rt-color-border-default: var(--rt-mat-neutral-25);
@@ -41,11 +41,11 @@
     --rt-color-border-focus: var(--rt-mat-blue-40); /* кольцо фокуса первого кита светлее его действия */
 
     /* Действие: подложка, наведение, нажатие, подпись на них и цвет роли на поверхности */
-    --rt-color-action-primary: var(--rt-mat-blue-100);
-    --rt-color-action-primary-hover: var(--rt-mat-blue-hover);
-    --rt-color-action-primary-active: var(--rt-mat-blue-active);
-    --rt-color-action-primary-subtle: var(--rt-mat-overlay-blue-8);
-    --rt-color-action-primary-soft: var(--rt-mat-overlay-blue-24);
+    --rt-color-action-primary: var(--mat-sys-primary, var(--rt-mat-blue-100));
+    --rt-color-action-primary-hover: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 90%, #000);
+    --rt-color-action-primary-active: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 80%, #000);
+    --rt-color-action-primary-subtle: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 8%, transparent);
+    --rt-color-action-primary-soft: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 24%, transparent);
     --rt-color-action-on-primary: var(--rt-mat-neutral-0);
     --rt-color-action-secondary: var(--rt-mat-neutral-60);
     --rt-color-action-secondary-hover: var(--rt-mat-neutral-hover);
@@ -60,27 +60,28 @@
     --rt-color-action-warning-hover: var(--rt-mat-orange-hover);
     --rt-color-action-warning-active: var(--rt-mat-orange-active);
     --rt-color-action-on-warning: var(--rt-mat-neutral-0);
-    --rt-color-action-danger: var(--rt-mat-red-100);
-    --rt-color-action-danger-hover: var(--rt-mat-red-hover);
-    --rt-color-action-danger-active: var(--rt-mat-red-active);
+    --rt-color-action-danger: var(--mat-sys-error, var(--rt-mat-red-100));
+    --rt-color-action-danger-hover: color-mix(in srgb, var(--mat-sys-error, var(--rt-mat-red-100)) 90%, #000);
+    --rt-color-action-danger-active: color-mix(in srgb, var(--mat-sys-error, var(--rt-mat-red-100)) 80%, #000);
     --rt-color-action-on-danger: var(--rt-mat-neutral-0);
-    --rt-color-action-info: var(--rt-mat-blue-100);
-    --rt-color-action-info-hover: var(--rt-mat-blue-hover);
-    --rt-color-action-info-active: var(--rt-mat-blue-active);
+    --rt-color-action-info: var(--mat-sys-primary, var(--rt-mat-blue-100));
+    --rt-color-action-info-hover: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 90%, #000);
+    --rt-color-action-info-active: color-mix(in srgb, var(--mat-sys-primary, var(--rt-mat-blue-100)) 80%, #000);
     --rt-color-action-on-info: var(--rt-mat-neutral-0);
-    --rt-color-action-disabled: var(--rt-mat-neutral-25);
+    --rt-color-action-disabled: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-100)) 12%, transparent);
 
     /* Состояния: цвет роли и её светлая подложка */
     --rt-color-state-success: var(--rt-mat-green-100);
     --rt-color-state-success-bg: var(--rt-mat-green-10);
+    --rt-color-state-success-text: var(--rt-mat-green-120);
     --rt-color-state-warning: var(--rt-mat-orange-100);
     --rt-color-state-warning-bg: var(--rt-mat-orange-5);
     --rt-color-state-warning-text: var(--rt-mat-orange-100);
-    --rt-color-state-danger: var(--rt-mat-red-100);
-    --rt-color-state-danger-bg: var(--rt-mat-red-10);
-    --rt-color-state-error-text: var(--rt-mat-red-100);
-    --rt-color-state-info: var(--rt-mat-blue-100);
-    --rt-color-state-info-bg: var(--rt-mat-blue-20);
+    --rt-color-state-danger: var(--mat-sys-error, var(--rt-mat-red-100));
+    --rt-color-state-danger-bg: var(--mat-sys-error-container, var(--rt-mat-red-10));
+    --rt-color-state-error-text: var(--mat-sys-error, var(--rt-mat-red-100));
+    --rt-color-state-info: var(--mat-sys-primary, var(--rt-mat-blue-100));
+    --rt-color-state-info-bg: var(--mat-sys-primary-container, var(--rt-mat-blue-20));
 
     /* Рельса шагов */
     --rt-color-stepper-track: var(--rt-mat-neutral-30);
@@ -90,9 +91,183 @@
     --rt-color-skeleton-base: var(--rt-mat-neutral-10);
     --rt-color-skeleton-wave: var(--rt-mat-neutral-25);
 
+    /* Шапка таблицы первого кита залита тем же цветом, что залитое поле Material. */
+    --rt-color-table-head-bg: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant, var(--rt-mat-overlay-black-4)));
+
+    /* Черта снизу у залитого поля Material — цвет on-surface-variant темы. */
+    --rt-color-field-fill-underline: var(--mat-sys-on-surface-variant, var(--rt-mat-neutral-30));
+
+    /* Поиск списка первого кита — обведённое или залитое поле Material при плотности −1:
+       52px, скругление 4px, рамка цвета outline темы, внутри прозрачное. Ступени 52px нет, высота собрана из ступени
+       xl без ступени 1. */
+    --rt-list-search-height: calc(var(--rt-control-height-xl) - var(--rt-space-1));
+    --rt-list-search-radius: var(--rt-radius-sm);
+    --rt-list-search-color-border: var(--mat-sys-outline, var(--rt-mat-neutral-25));
+    --rt-list-search-color-bg: transparent;
+    --rt-list-search-width: calc(var(--rt-size-64) + var(--rt-size-24));
+    --rt-list-search-padding-x: calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-border-width-thin));
+    --rt-list-search-gap: var(--rt-space-4);
+    --rt-list-search-font-size: var(--rt-text-md);
+    --rt-list-search-icon-size: var(--rt-size-6);
+    --rt-list-search-icon-color: var(--mat-sys-on-surface-variant, var(--rt-mat-neutral-60));
+    --rt-list-search-color-placeholder: var(--mat-sys-on-surface-variant, var(--rt-mat-neutral-60));
+
+    /* Панель настройки колонок первого кита: плашка колонки залита цветом выбранного пункта
+       Material, значки — в тоне on-surface-variant темы. Сняты с панели на витрине первого кита. */
+    --rt-list-settings-item-bg: var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container, var(--rt-mat-neutral-10)));
+    --rt-list-settings-icon-color: var(--mat-sys-on-surface-variant, var(--rt-mat-neutral-60));
+
+    /* Кнопки действий панели списка — mat-mini-fab первого кита: круг без заливки с подъёмом 6,
+       под указателем подъём 8 и тёмный значок вместо серого; значок 24px, промежуток 16px. */
+    --rt-list-action-gap: var(--rt-space-md);
+    --rt-list-action-divider-height: var(--rt-size-8);
+    --rt-list-action-radius: var(--rt-radius-full);
+    --rt-list-action-shadow: var(--rt-mat-shadow-fab);
+    --rt-list-action-shadow-hover: var(--rt-mat-shadow-fab-hover);
+    --rt-list-action-icon-size: var(--rt-size-6);
+    --rt-list-action-color: var(--rt-mat-neutral-60);
+    --rt-list-table-icon-size: var(--rt-size-6);
+    --rt-list-table-icon-color: var(--mat-sys-on-surface-variant, var(--rt-mat-neutral-60));
+    --rt-list-table-head-divider-color: var(--mat-sys-outline, var(--rt-mat-neutral-30));
+    --rt-list-table-button-size: calc(var(--rt-size-8) + var(--rt-size-1));
+    --rt-list-table-button-radius: var(--rt-radius-full);
+    --rt-list-copy-button-size: var(--rt-size-6);
+    --rt-list-copy-button-radius: var(--rt-mat-radius-5);
+    --rt-list-settings-item-radius: var(--rt-mat-radius-5);
+    --rt-list-filter-line-height: var(--rt-size-6);
+    --rt-list-copy-button-bg: var(--mat-fab-small-container-color, var(--rt-mat-neutral-0));
+    --rt-list-copy-button-bg-hover: var(--mat-fab-small-container-color, var(--rt-mat-neutral-0));
+    --rt-list-copy-button-color: var(--rt-mat-neutral-60);
+    --rt-list-action-color-hover: var(--rt-mat-neutral-100);
+    --rt-list-action-color-bg-hover: transparent;
+    --rt-list-toolbar-padding-top: var(--rt-space-4);
+    --rt-list-toolbar-padding-bottom: 0px;
+    --rt-list-toolbar-gap: var(--rt-space-4);
+    --rt-list-empty-icon-wrap-size: var(--rt-size-12);
+    --rt-list-empty-icon-wrap-bg: transparent;
+    --rt-list-empty-icon-size: var(--rt-size-12);
+    --rt-list-empty-title-size: var(--rt-text-3xl);
+    --rt-list-empty-title-weight: var(--rt-font-weight-regular);
+    --rt-list-selector-label-color: var(--rt-mat-neutral-60);
+
+    /* Полоса страниц первого кита: ячейки 34px в серой рамке со скруглением 12px, промежуток 8px,
+       текущая залита серым с белой цифрой, стрелки такими же ячейками. Подписи диапазона нет,
+       номера и выбор размера стоят рядом через 32px, поле размера 32px высотой. */
+    --rt-pagination-justify: flex-start;
+    --rt-pagination-gap: var(--rt-space-xl);
+    --rt-pagination-padding-y: var(--rt-space-sm);
+    --rt-pagination-padding-x: 0px;
+    --rt-pagination-nav-gap: var(--rt-space-sm);
+    --rt-pagination-range-display: none;
+    --rt-pagination-box-size: calc(var(--rt-space-xl) + 2 * var(--rt-border-width-thin));
+    --rt-pagination-box-radius: calc(var(--rt-radius-lg) + var(--rt-radius-xs));
+    --rt-pagination-box-color-border: var(--rt-mat-neutral-30);
+    --rt-pagination-box-color-text: var(--rt-mat-neutral-60);
+    --rt-pagination-box-current-color-bg: var(--rt-mat-neutral-60);
+    --rt-pagination-box-current-color-text: var(--rt-mat-neutral-0);
+    --rt-pagination-box-current-color-border: var(--rt-mat-neutral-30);
+    --rt-pagination-box-current-font-weight: var(--rt-font-weight-regular);
+    --rt-pagination-arrow-size: calc(var(--rt-space-xl) + 2 * var(--rt-border-width-thin));
+    --rt-pagination-arrow-radius: calc(var(--rt-radius-lg) + var(--rt-radius-xs));
+    --rt-pagination-arrow-shadow: inset 0 0 0 var(--rt-border-width-thin) var(--rt-mat-neutral-30);
+    --rt-pagination-arrow-color: var(--rt-mat-neutral-60);
+    --rt-pagination-per-page-gap: calc(var(--rt-space-sm) + var(--rt-space-xs));
+    --rt-pagination-per-page-label-white-space: nowrap;
+    --rt-pagination-field-height: var(--rt-control-height-sm);
+    --rt-pagination-field-radius: calc(var(--rt-radius-lg) + var(--rt-radius-xs));
+    --rt-pagination-field-color-border: var(--rt-mat-neutral-30);
+    --rt-pagination-field-padding-x: var(--rt-space-sm);
+    --rt-pagination-field-color-bg: transparent;
+    --rt-pagination-field-color-text: var(--rt-mat-neutral-60);
+
+    /* Переключатель первого кита — свой, не Material: серый трек в рамке, включённый — в цвете
+       действия темы, как у кнопки. Тёмная тема отвечает на эти имена своими цветами. */
+    --rt-toggle-color-track: var(--rt-mat-neutral-20);
+    --rt-toggle-color-track-on: var(--rt-color-action-primary);
+    --rt-toggle-color-border: var(--rt-mat-neutral-30);
+
     /* Кнопка и поле первого кита скруглены заметно сильнее: 1.5rem против 10px.
        Значение снято числом — ссылки на токены первого кита во второй кит не едут. */
     --rt-radius-control: 1.5rem;
+
+    /* Панели над страницей — скругления и подъём первого кита: меню 4px, выпадающий список
+       скруглён только снизу, подсказка 4px без тени. Тень — подъём 2 Material, как у mat-menu и
+       mat-select. */
+    --rt-overlay-menu-radius: var(--rt-mat-radius-4);
+    --rt-overlay-menu-shadow: var(--mat-sys-level2, var(--rt-mat-shadow-level-2));
+    --rt-overlay-select-radius: 0 0 var(--rt-mat-radius-4) var(--rt-mat-radius-4);
+    --rt-overlay-select-shadow: var(--mat-sys-level2, var(--rt-mat-shadow-level-2));
+    --rt-overlay-tooltip-radius: var(--rt-mat-radius-4);
+    --rt-overlay-tooltip-shadow: none;
+
+    /* Меню строки — mat-menu первого кита: фон контейнера Material, отступ 8px сверху и снизу,
+       подписи весом 500, опасный пункт красным первого кита. Выпадающий список — mat-select: пункты
+       16px, выбранный — фон текста 12% без жирного и с галочкой. */
+    --rt-overlay-menu-bg: var(--mat-menu-container-color, var(--rt-mat-neutral-0));
+    --rt-overlay-menu-padding-y: var(--rt-space-sm);
+    --rt-overlay-menu-item-weight: var(--rt-font-weight-medium);
+    --rt-overlay-menu-danger-color: var(--rt-mat-red-100);
+    --rt-overlay-select-option-font-size: var(--rt-text-md);
+    --rt-overlay-select-selected-bg: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-100)) 12%, transparent);
+    --rt-overlay-select-selected-weight: var(--rt-font-weight-regular);
+    --rt-overlay-select-check-display: inline-flex;
+    --rt-overlay-menu-current-bg: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-100)) 12%, transparent);
+    --rt-overlay-menu-min-width: var(--rt-mat-menu-min-width);
+    --rt-overlay-menu-item-min-height: var(--rt-size-12);
+    --rt-overlay-menu-item-padding-y: 0px;
+    --rt-overlay-menu-item-padding-x: var(--rt-size-3);
+    --rt-overlay-menu-item-icon-size: var(--rt-size-6);
+    --rt-overlay-menu-sm-item-min-height: var(--rt-mat-menu-sm-item-height);
+    --rt-overlay-menu-sm-item-icon-size: var(--rt-mat-menu-sm-icon-size);
+    --rt-overlay-menu-danger-label-color: var(--rt-color-text-primary);
+    --rt-overlay-select-option-min-height: var(--rt-size-12);
+    --rt-overlay-select-panel-border-width: 0px;
+    --rt-icon-button-disabled-opacity: 1;
+    --rt-icon-button-disabled-color: var(--rt-color-text-disabled);
+    --rt-icon-button-disabled-fill: 0%;
+}
+
+/* The preset under a dark theme: the names the preset reads from Material keep the Material chain,
+   and its last fallback is the dark answer. Material switches its own colours with the application's
+   theme, so the search, the fields and the pagination follow the page; without Material the look is
+   the former dark one. A name mixed by `color-mix` has no fallback to swap and stays on its dark answer. */
+@mixin rt-preset-material-dark-tokens {
+    --rt-color-bg-surface: var(--mat-sys-surface, var(--rt-charcoal-800));
+    --rt-color-bg-surface-subtle-2: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant, var(--rt-charcoal-950)));
+    --rt-color-bg-inverse: var(--mat-sys-inverse-surface, var(--rt-neutral-0));
+    --rt-color-text-primary: var(--mat-sys-on-surface, var(--rt-neutral-50));
+    --rt-color-text-disabled: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-0)) 38%, transparent);
+    --rt-color-text-inverse: var(--mat-sys-inverse-on-surface, var(--rt-neutral-900));
+    --rt-color-text-link: var(--mat-sys-primary, var(--rt-brand-300));
+    --rt-color-border-subtle: var(--rt-mat-dark-20);
+    --rt-color-action-disabled: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-0)) 12%, transparent);
+    --rt-color-state-danger-bg: var(--mat-sys-error-container, color-mix(in srgb, var(--rt-danger-500) 12%, transparent));
+    --rt-color-state-error-text: var(--mat-sys-error, var(--rt-danger-500));
+    --rt-color-state-info-bg: var(--mat-sys-primary-container, color-mix(in srgb, var(--rt-info-500) 12%, transparent));
+    --rt-color-table-head-bg: var(
+        --mat-form-field-filled-container-color,
+        var(--mat-sys-surface-variant, var(--rt-color-bg-surface-subtle))
+    );
+    --rt-color-field-fill-underline: var(--mat-sys-on-surface-variant, var(--rt-color-border-strong));
+    --rt-list-search-color-border: var(--mat-sys-outline, var(--rt-input-color-border));
+    --rt-list-search-color-bg: transparent;
+    --rt-list-search-icon-color: var(--mat-sys-on-surface-variant, var(--rt-input-icon-color));
+    --rt-list-search-color-placeholder: var(--mat-sys-on-surface-variant, var(--rt-input-color-text-placeholder));
+    --rt-list-settings-item-bg: var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container, var(--rt-color-bg-subtle)));
+    --rt-list-settings-icon-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));
+    --rt-list-table-icon-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-primary));
+    --rt-list-table-head-divider-color: var(--mat-sys-outline, var(--rt-color-border-strong));
+    --rt-list-copy-button-bg: var(--mat-fab-small-container-color, transparent);
+    --rt-list-copy-button-bg-hover: var(--mat-fab-small-container-color, var(--rt-icon-button-color-bg-hover));
+    --rt-pagination-box-color-border: var(--rt-mat-dark-30);
+    --rt-pagination-box-color-text: var(--rt-mat-neutral-40);
+    --rt-pagination-box-current-color-bg: var(--rt-mat-neutral-40);
+    --rt-pagination-box-current-color-text: var(--rt-mat-neutral-0);
+    --rt-pagination-box-current-color-border: var(--rt-mat-dark-30);
+    --rt-pagination-arrow-shadow: inset 0 0 0 var(--rt-border-width-thin) var(--rt-mat-dark-30);
+    --rt-overlay-menu-bg: var(--mat-menu-container-color, var(--rt-color-bg-surface));
+    --rt-overlay-select-selected-bg: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-0)) 12%, transparent);
+    --rt-overlay-menu-current-bg: color-mix(in srgb, var(--mat-sys-on-surface, var(--rt-mat-neutral-0)) 12%, transparent);
 }
 
 :root[data-preset='material'],

package/src/styles/_primitives.scss

@@ -82,6 +82,10 @@
        нажатие действия берут именно эти ступени, и такая пара их сливала. */
     --rt-success-50: #ecfdf5;
     --rt-success-100: #eafaf5;
+
+    /* Ступень 400 — на шаг светлоты выше 500 тем же шагом, что 600 и 700 ниже: подпись успеха
+       на графите тёмной темы. Сама 500 на графите порога контраста для текста не берёт. */
+    --rt-success-400: #31ac7d;
     --rt-success-500: #059669;
     --rt-success-600: #017f58;
     --rt-success-700: #006848;
@@ -137,11 +141,15 @@
 
     /* Typography — font-family */
 
-    /* Noto-начертания идут после Montserrat запасными: они подхватывают тайский,
-       хангыль и деванагари, которых в основном шрифте нет, и не трогают латиницу
-       с кириллицей — браузер берёт из них только недостающие знаки. */
-    --rt-font-family-sans: 'Montserrat', 'Noto Sans Thai', 'Noto Sans KR', 'Noto Sans Devanagari', system-ui, sans-serif;
-    --rt-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
+    /* Montserrat кит везёт сам — объявления в `_fonts.scss`, файлы в `assets/fonts`.
+       Остальные имена здесь не стоят: названное, но не привезённое семейство кит
+       обещает и не даёт, и у потребителя рисуется то, что случайно стоит на машине
+       читателя. Письменности, которых в Montserrat нет — тайская, хангыль,
+       деванагари, — добавляются потребителем: как, сказано в README кита.
+       Одноширинного начертания кит тоже не везёт, поэтому называет только
+       системные. */
+    --rt-font-family-sans: 'Montserrat', system-ui, sans-serif;
+    --rt-font-family-mono: ui-monospace, monospace;
 
     /* Typography — text size scale */
 
@@ -306,6 +314,12 @@
     --rt-mat-neutral-80: #323033;
     --rt-mat-neutral-100: #181818;
 
+    /* Тёмные нейтральные первого кита: рамки и фон его тёмной темы */
+    --rt-mat-dark-10: #2e2d31;
+    --rt-mat-dark-20: #3f3e43;
+    --rt-mat-dark-30: #4a494e;
+    --rt-mat-dark-40: #5c5b60;
+
     /* Материальный набор: синий — действие, ссылка, кольцо фокуса */
     --rt-mat-blue-20: #eaedfc;
     --rt-mat-blue-40: #b3ceef;
@@ -339,6 +353,11 @@
     --rt-mat-green-80: #21b18e;
     --rt-mat-green-100: #01af8d;
 
+    /* Своей тёмной ступени зелёного у первого кита нет, а его 100 на белом даёт 2.8:1 — подпись
+       успеха ею не читается. Ступень 120 взята от 100 двумя шагами светлоты вниз (OKLCH, тон и
+       цветность те же): это ближайшая к виду первого кита ступень, что берёт порог текста. */
+    --rt-mat-green-120: #008465;
+
     /* Материальный набор: марка первого кита и подложка его обвязки */
     --rt-mat-navy-100: #0d1c2b;
 
@@ -361,4 +380,21 @@
     --rt-mat-red-active: color-mix(in srgb, var(--rt-mat-red-100) 80%, #000);
     --rt-mat-neutral-hover: color-mix(in srgb, var(--rt-mat-neutral-60) 90%, #000);
     --rt-mat-neutral-active: color-mix(in srgb, var(--rt-mat-neutral-60) 80%, #000);
+
+    /* Материальный набор: тени круглой кнопки действия первого кита — подъём 6 в покое и 8 под
+       указателем, как у mat-mini-fab. Составное значение — ступень целиком, по частям не собирается. */
+    --rt-mat-shadow-fab: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
+    --rt-mat-shadow-fab-hover: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
+
+    /* Материальный набор: подъём 2 Material — тень меню и выпадающего списка первого кита */
+    --rt-mat-shadow-level-2: 0 3px 3px -2px rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%);
+
+    /* Материальный набор: скругления первого кита. Свои ступени, а не --rt-radius-*: первый кит
+       объявляет те же имена на корне страницы своими значениями, и без файла совместимости набор
+       рисовал бы его числа вместо своих. */
+    --rt-mat-radius-4: 4px;
+    --rt-mat-radius-5: 5px;
+    --rt-mat-menu-min-width: 112px;
+    --rt-mat-menu-sm-item-height: 38px;
+    --rt-mat-menu-sm-icon-size: 13px;
 }