@rt-tools/ui-kit-v2 0.15.0 → 0.17.0

package/src/lib/components/toast/rt-toast.component.scss

@@ -7,6 +7,7 @@
         --rt-toast-shadow-duration: var(--rt-duration-base);
         --rt-toast-leave-duration: var(--rt-duration-slower);
         --rt-toast-fade-duration: var(--rt-duration-fast);
+        --rt-toast-severity-color: var(--rt-color-state-info);
         --y: translateY(100%);
         --lift-amount: calc(var(--lift) * var(--gap));
 
@@ -17,11 +18,11 @@
         box-sizing: border-box;
         align-items: center;
         padding: var(--rt-space-4);
-        border: var(--rt-toast-border-width) solid var(--rt-color-border-subtle);
+        border: var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));
         border-radius: var(--rt-toast-radius);
-        background: var(--rt-color-bg-surface);
+        background: var(--rt-toast-bg, var(--rt-color-bg-surface));
         box-shadow: var(--rt-toast-shadow);
-        color: var(--rt-color-text-primary);
+        color: var(--rt-toast-color, var(--rt-color-text-primary));
         font-size: var(--rt-text-sm);
         font-weight: var(--rt-font-weight-medium);
         gap: var(--rt-space-2);
@@ -64,33 +65,52 @@
             bottom: 0;
         }
 
+        /* Цвет важности — частное свойство: его берут значок и полоса срока. */
+        &--severity--success {
+            --rt-toast-severity-color: var(--rt-color-state-success);
+        }
+
+        &--severity--warning {
+            --rt-toast-severity-color: var(--rt-color-state-warning);
+        }
+
+        &--severity--danger {
+            --rt-toast-severity-color: var(--rt-color-state-danger);
+        }
+
+        /* Залитый тост читает свои ручки по важности, а не общие: общая ручка фона, заданная
+           на корне страницы, иначе перекрасила бы и залитые тосты. Значок идёт за текстом. */
         &--filled {
             .rt-toast__description {
                 color: inherit;
             }
 
+            .rt-toast__icon {
+                color: currentcolor;
+            }
+
             &.rt-toast--severity--info {
-                border-color: var(--rt-color-state-info-bg);
-                background: var(--rt-color-state-info-bg);
-                color: var(--rt-color-state-info);
+                border-color: var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));
+                background: var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));
+                color: var(--rt-toast-filled-info-color, var(--rt-color-state-info));
             }
 
             &.rt-toast--severity--success {
-                border-color: var(--rt-color-state-success-bg);
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+                border-color: var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));
+                background: var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));
+                color: var(--rt-toast-filled-success-color, var(--rt-color-state-success));
             }
 
             &.rt-toast--severity--warning {
-                border-color: var(--rt-color-state-warning-bg);
-                background: var(--rt-color-state-warning-bg);
-                color: var(--rt-color-state-warning);
+                border-color: var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));
+                background: var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));
+                color: var(--rt-toast-filled-warning-color, var(--rt-color-state-warning));
             }
 
             &.rt-toast--severity--danger {
-                border-color: var(--rt-color-state-danger-bg);
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+                border-color: var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));
+                background: var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));
+                color: var(--rt-toast-filled-danger-color, var(--rt-color-state-danger));
             }
         }
 
@@ -152,6 +172,25 @@
 
         &__icon {
             flex-shrink: 0;
+            color: var(--rt-toast-icon-color, var(--rt-toast-severity-color));
+        }
+
+        /* Полоса срока — анимация того же срока, что у таймера, и встаёт от того же признака.
+           Она лежит у нижнего края внутри рамки и повторяет нижние скругления. */
+        &__progress {
+            position: absolute;
+            bottom: 0;
+            animation: rt-toast-progress var(--lifetime) linear forwards;
+            background: var(--rt-toast-progress-color, var(--rt-toast-severity-color));
+            block-size: var(--rt-toast-progress-height, var(--rt-space-0-5));
+            border-end-end-radius: var(--rt-toast-radius);
+            border-end-start-radius: var(--rt-toast-radius);
+            inset-inline: 0;
+            transform-origin: left center;
+        }
+
+        &--paused &__progress {
+            animation-play-state: paused;
         }
 
         &__content {
@@ -186,7 +225,17 @@
             align-self: flex-start;
         }
 
+        /* Ручка цвета действия — заливка главной кнопки во всех её состояниях; подпись на ней
+           остаётся цветом кита. */
+        & &__action:not(.rt-button--text) {
+            --rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));
+            --rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));
+            --rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active));
+        }
+
         & &__close {
+            --rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));
+
             flex-shrink: 0;
             align-self: flex-start;
             margin-inline-start: auto;
@@ -207,4 +256,14 @@
             }
         }
     }
+
+    @keyframes rt-toast-progress {
+        from {
+            transform: scaleX(1);
+        }
+
+        to {
+            transform: scaleX(0);
+        }
+    }
 }

package/src/lib/components/toast/rt-toaster.component.scss

@@ -3,8 +3,12 @@
         --width: 356px;
         --toaster-offset: 32px;
 
+        /* Слой — своё свойство на шаге шкалы: шаг `sticky` и есть прежние 1100, а приложение,
+           которому тост нужен поверх диалога, перебивает свойство правилом на своём теге. */
+        --rt-toaster-z-index: var(--rt-z-sticky);
+
         position: fixed;
-        z-index: 1100;
+        z-index: var(--rt-toaster-z-index);
         width: var(--width);
         box-sizing: border-box;
         padding: 0;

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -10,31 +10,46 @@
        (sm 30 / md 40 / lg 50px).
        Цвета — только семантические --rt-* токены. */
 
+    /* Свойства объявлены на хосте: правило приложения на теге переопределяет их, а ступени
+       размера — тоже правила хоста, по модификатору на нём самом.
+
+       Дорожка берёт приглушённую поверхность, а не ближайшую по светлоте ступень:
+       прежний код цвета стоял почти на уровне белого, а отличаться дорожка обязана
+       именно от активного сегмента, который белым и покрашен. Default size = sm. */
     rt-toggle-button-group {
+        --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
+        --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+        --rt-toggle-button-group-height: 30px;
+        --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
+        --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-toggle-button-group-track-padding: 4px;
+        --rt-toggle-button-group-track-radius: var(--rt-radius-md);
+        --rt-toggle-button-group-btn-padding: 0 8px;
+        --rt-toggle-button-group-btn-radius: var(--rt-radius-ms);
+        --rt-toggle-button-group-btn-gap: 4px;
+        --rt-toggle-button-group-btn-font-size: 12px;
+        --rt-toggle-button-group-btn-line-height: 14px;
+
         display: inline-flex;
 
-        /* Локальные overridable custom properties — позволяют потребителю
-           подстроить trackовый bg без перекраски всей темы (см. dark override ниже).
+        /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
+        &.rt-toggle-button-group--md {
+            --rt-toggle-button-group-height: 40px;
+            --rt-toggle-button-group-btn-padding: 0 14px;
+            --rt-toggle-button-group-btn-gap: 6px;
+            --rt-toggle-button-group-btn-font-size: 14px;
+            --rt-toggle-button-group-btn-line-height: 16px;
+        }
 
-           Дорожка берёт приглушённую поверхность, а не ближайшую по светлоте ступень:
-           прежний код цвета стоял почти на уровне белого, а отличаться дорожка обязана
-           именно от активного сегмента, который белым и покрашен. */
-        --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
-        --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+        &.rt-toggle-button-group--lg {
+            --rt-toggle-button-group-height: 50px;
+            --rt-toggle-button-group-btn-padding: 0 20px;
+            --rt-toggle-button-group-btn-gap: 8px;
+            --rt-toggle-button-group-btn-font-size: 16px;
+            --rt-toggle-button-group-btn-line-height: 18px;
+        }
 
         .rt-toggle-button-group {
-            /* Default size = sm. md/lg переопределяют ниже. */
-            --rt-toggle-button-group-height: 30px;
-            --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
-            --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
-            --rt-toggle-button-group-track-padding: 4px;
-            --rt-toggle-button-group-track-radius: var(--rt-radius-md);
-            --rt-toggle-button-group-btn-padding: 0 8px;
-            --rt-toggle-button-group-btn-radius: var(--rt-radius-ms);
-            --rt-toggle-button-group-btn-gap: 4px;
-            --rt-toggle-button-group-btn-font-size: 12px;
-            --rt-toggle-button-group-btn-line-height: 14px;
-
             display: inline-flex;
             height: var(--rt-toggle-button-group-height);
             box-sizing: border-box;
@@ -97,30 +112,13 @@
                 flex-shrink: 0;
             }
 
-            /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
-            &--md {
-                --rt-toggle-button-group-height: 40px;
-                --rt-toggle-button-group-btn-padding: 0 14px;
-                --rt-toggle-button-group-btn-gap: 6px;
-                --rt-toggle-button-group-btn-font-size: 14px;
-                --rt-toggle-button-group-btn-line-height: 16px;
-            }
-
-            &--lg {
-                --rt-toggle-button-group-height: 50px;
-                --rt-toggle-button-group-btn-padding: 0 20px;
-                --rt-toggle-button-group-btn-gap: 8px;
-                --rt-toggle-button-group-btn-font-size: 16px;
-                --rt-toggle-button-group-btn-line-height: 18px;
-            }
-
             &--disabled {
                 opacity: 0.5;
             }
         }
 
         /* Шаг входа `radius` переназначает скругление дорожки; сегменты держат своё. */
-        @include kv.radius-steps('--rt-toggle-button-group-track-radius', '> .rt-toggle-button-group');
+        @include kv.radius-steps('--rt-toggle-button-group-track-radius');
     }
 
     /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */

package/src/lib/components/toggle-switch/CONTEXT.md

@@ -8,17 +8,25 @@
 | -------------------- | ---------------------- | --------- |
 | `inputId`            | `string \| null`       | `null`    |
 | `ariaLabel`          | `string \| null`       | `null`    |
+| `label`              | `string \| null`       | `null`    |
 | `size`               | `'sm' \| 'md' \| 'lg'` | `'sm'`    |
 | `iconOff` / `iconOn` | `IRtIcon.Name \| null` | `null`    |
 | `disabled`           | `boolean`              | `false`   |
 
-Значение — `boolean` через `ControlValueAccessor`. Своей подписи на экране нет.
+Значение — `boolean` через `ControlValueAccessor`. Подпись на экране рисует только вход `label`.
 
 ## Главное, что нужно знать
 
 **`role="switch"`, а не `checkbox`.** Скринридер произносит «switch off/on» вместо «checkbox
-unchecked» — для тумблера это точнее. Своего текста у контрола нет, поэтому подпись задаётся
-входом `ariaLabel` или внешним `<label for>` через `inputId`.
+unchecked» — для тумблера это точнее. Имя даёт вход `label`, вход `ariaLabel` или внешний
+`<label for>` через `inputId`.
+
+**Подпись `label` — `<label>`, связанный с кнопкой.** Нажатие на неё переключает, кнопка ссылается
+на неё через `aria-labelledby`. Без входа разметка прежняя: ни подписи, ни своего id.
+
+**Свойства размеров и подписи объявлены на хосте.** Ступени размера — правила хоста по его
+модификатору, прозрачность отключения `--rt-toggle-disabled-opacity` гасит и подпись. Правило
+приложения на теге перебивает и ступень.
 
 ## Как этим пользоваться
 

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -6,17 +6,20 @@
        и на `<rt-toggle-switch>`, и на корне шаблона, поэтому правила блока вложены в хост —
        так они достаются только корню шаблона. */
 
+    /* Свойства объявлены на хосте: правило приложения на теге переопределяет их, а
+       ступени размера — тоже правила хоста, по модификатору на нём самом. Имена подписи
+       не повторяют первый кит: у его переключателя свои `--rt-toggle-label-*`. */
     rt-toggle-switch {
-        display: inline-flex;
-
-        /* Шаг входа `radius` переназначает скругление дорожки, ручка идёт за ней. */
-        @include kv.radius-steps('--rt-toggle-radius', '> .rt-toggle-switch');
-    }
-
-    rt-toggle-switch .rt-toggle-switch {
         --rt-toggle-radius: var(--rt-radius-full);
         --rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);
         --rt-toggle-transition-duration: var(--rt-duration-fast);
+        --rt-toggle-disabled-opacity: 0.5;
+        --rt-toggle-justify: flex-start;
+        --rt-toggle-label-gap: var(--rt-space-2);
+        --rt-toggle-label-size: var(--rt-text-sm);
+        --rt-toggle-label-color-off: var(--rt-color-text-muted);
+        --rt-toggle-label-color-on: var(--rt-color-text-primary);
+        --rt-toggle-label-color-hover: var(--rt-color-text-primary);
 
         /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
            правила ниже к размерам не привязаны. `thumb-travel` держим явным
@@ -29,17 +32,16 @@
         --rt-toggle-icon-inset: 4px;
 
         display: inline-flex;
-        padding: 0;
-        border: none;
-        background: none;
-        cursor: pointer;
+        align-items: center;
+        justify-content: var(--rt-toggle-justify);
+        gap: var(--rt-toggle-label-gap);
 
-        &--md {
+        &.rt-toggle-switch--md {
             --rt-toggle-track-width: 52px;
             --rt-toggle-thumb-travel: 28px;
         }
 
-        &--lg {
+        &.rt-toggle-switch--lg {
             --rt-toggle-track-width: 60px;
             --rt-toggle-track-height: 30px;
             --rt-toggle-thumb-size: 24px;
@@ -47,6 +49,22 @@
             --rt-toggle-icon-inset: 6px;
         }
 
+        /* Прозрачность — на хосте: подпись гаснет вместе с переключателем. */
+        &.rt-toggle-switch--disabled {
+            opacity: var(--rt-toggle-disabled-opacity);
+        }
+
+        /* Шаг входа `radius` переназначает скругление дорожки, ручка идёт за ней. */
+        @include kv.radius-steps('--rt-toggle-radius');
+    }
+
+    rt-toggle-switch .rt-toggle-switch {
+        display: inline-flex;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
+
         &:focus-visible {
             border-radius: var(--rt-toggle-radius);
             box-shadow: var(--rt-toggle-focus-shadow);
@@ -56,7 +74,6 @@
 
         &--disabled {
             cursor: not-allowed;
-            opacity: 0.5;
         }
 
         &__track {
@@ -114,5 +131,27 @@
         &--on .rt-toggle-switch__thumb {
             transform: translateX(var(--rt-toggle-thumb-travel));
         }
+
+        &__label {
+            color: var(--rt-toggle-label-color-off);
+            cursor: pointer;
+            font-size: var(--rt-toggle-label-size);
+            transition: color var(--rt-toggle-transition-duration) ease;
+            user-select: none;
+        }
+    }
+
+    /* Состояния подписи — по модификаторам хоста: подпись стоит рядом с кнопкой, не в ней.
+       Наведение ниже включённого: под курсором подпись берёт свой цвет и у включённого. */
+    rt-toggle-switch.rt-toggle-switch--on .rt-toggle-switch__label {
+        color: var(--rt-toggle-label-color-on);
+    }
+
+    rt-toggle-switch:not(.rt-toggle-switch--disabled):hover .rt-toggle-switch__label {
+        color: var(--rt-toggle-label-color-hover);
+    }
+
+    rt-toggle-switch.rt-toggle-switch--disabled .rt-toggle-switch__label {
+        cursor: not-allowed;
     }
 }

package/src/lib/components/toolbar/rt-toolbar.component.scss

@@ -1,19 +1,29 @@
 @layer rt-kit.components {
     .rt-toolbar {
-        /* Отступ полосы сверху и снизу — свойства блока: обёртка переставляет их снаружи. */
+        /* Раскладка полосы — свойства блока: обёртка и приложение переставляют их снаружи.
+           Высота — наименьшая: полоса, стёкшая в колонку на узком экране, не обрезается. */
         --rt-toolbar-padding-top: var(--rt-space-2);
         --rt-toolbar-padding-bottom: var(--rt-space-2);
+        --rt-toolbar-padding-inline: 0;
+        --rt-toolbar-height: auto;
+        --rt-toolbar-border-bottom: none;
+        --rt-toolbar-gap: var(--rt-space-2);
+        --rt-toolbar-center-justify: flex-end;
+        --rt-toolbar-center-overflow: visible;
 
         display: block;
 
         &__bars {
             display: flex;
             width: 100%;
+            min-height: var(--rt-toolbar-height);
+            box-sizing: border-box;
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
-            padding: var(--rt-toolbar-padding-top) 0 var(--rt-toolbar-padding-bottom);
-            gap: var(--rt-space-2);
+            padding: var(--rt-toolbar-padding-top) var(--rt-toolbar-padding-inline) var(--rt-toolbar-padding-bottom);
+            border-bottom: var(--rt-toolbar-border-bottom);
+            gap: var(--rt-toolbar-gap);
         }
 
         &__bar {
@@ -29,8 +39,9 @@
             }
 
             &--center {
+                overflow: var(--rt-toolbar-center-overflow);
                 flex: 1 1 auto;
-                justify-content: flex-end;
+                justify-content: var(--rt-toolbar-center-justify);
                 gap: var(--rt-space-2);
 
                 // Контрол-фильтр (поиск/селект) занимает ширину center и право-

package/src/lib/components/tooltip/CONTEXT.md

@@ -5,10 +5,11 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
 ```
 
-| вход                 | тип                           | умолчание                                       |
-| -------------------- | ----------------------------- | ----------------------------------------------- |
-| `rtTooltip`          | `string \| null \| undefined` | `''`                                            |
-| `rtTooltipPlacement` | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
+| вход                     | тип                                              | умолчание                                       |
+| ------------------------ | ------------------------------------------------ | ----------------------------------------------- |
+| `rtTooltip`              | `string \| null \| undefined`                    | `''`                                            |
+| `rtTooltipPlacement`     | `'top' \| 'bottom' \| 'left' \| 'right' \| null` | `null` — сверху, под материальным набором снизу |
+| `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 
@@ -26,6 +27,8 @@ no-op, а не пустая панель под курсором. Поэтому
 
 - Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
   (панель мешала бы смотреть на результат нажатия).
+- Фокус, поставленный мышью или кодом, подсказку не показывает: меню возвращает фокус кнопке после
+  выбора пункта, и подсказка кнопки всплывала бы поверх того, что пункт открыл.
 - `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`.
 - Подсказка не заменяет `aria-label`: она вспомогательная, а имя контрола задаётся отдельно.
 

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

@@ -16,8 +16,8 @@
 ```
 
 Основные входы: `messages`, `hasThread`, `canReply`, `replyBlockReason`, `loading`, `fetching`,
-`sending`, `attachments`, `accept`, `formatting`, `title`, `showRefresh`, `showExpand`, `fill`.
-Выходы: `send`, `refresh` и события по сообщениям (повтор, удаление).
+`sending`, `attachments`, `accept`, `formatting`, `title`, `showRefresh`, `showExpand`, `fill`,
+`typingText`. Выходы: `send`, `refresh`, `typing` и события по сообщениям (повтор, удаление).
 
 ## Главное, что нужно знать
 
@@ -35,6 +35,11 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 **Поле ответа гейтится `canReply`.** Когда отвечать нельзя, вместо него рисуется причина
 из `replyBlockReason`.
 
+**Набор текста уходит наружу одним событием на отрезок.** `typing` шлёт `true`, когда человек начал
+набирать, и `false` на пустом поле, при отправке и после 3 секунд без ввода — в обоих режимах поля.
+Что печатает вторая сторона, показывает `typingText`: плашка стоит поверх низа ленты и места не
+занимает, пустая строка её прячет. Текст и перевод даёт приложение.
+
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
 что отвечали соседние реплики.
 

package/src/rich-editor/lib/components/chat/rt-chat.component.scss

@@ -3,6 +3,8 @@
         --rt-chat-bubble-radius: var(--rt-radius-lg);
         --rt-chat-message-border-width: var(--rt-border-width-thin);
         --rt-chat-transition-duration: var(--rt-duration-fast);
+        --rt-chat-typing-radius: var(--rt-radius-full);
+        --rt-chat-typing-shadow: var(--rt-shadow-sm);
 
         display: flex;
         flex-direction: column;
@@ -114,6 +116,29 @@
             inset: 0;
         }
 
+        // Строка «печатает» стоит поверх низа ленты и места не занимает: лента не сдвигается, а чат
+        // без строки не меняется ни на пиксель. Пустой узел остаётся в разметке — иначе программа
+        // чтения с экрана не объявит первую строку.
+        &__typing {
+            position: absolute;
+            z-index: 1;
+            bottom: var(--rt-space-1);
+            left: var(--rt-space-2);
+            box-sizing: border-box;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            max-inline-size: calc(100% - 2 * var(--rt-space-2));
+            overflow-wrap: anywhere;
+            pointer-events: none;
+
+            &--shown {
+                padding: var(--rt-space-0-5) var(--rt-space-2);
+                border-radius: var(--rt-chat-typing-radius);
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-chat-typing-shadow);
+            }
+        }
+
         &__footer-slot {
             display: flex;
             flex-direction: column;

package/src/styles/_color-scheme.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+/* A colour scheme — the brand ramp under its own name, switched on by `data-rt-scheme` on `<html>`,
+   as in the first kit.
+
+   The scheme rewrites the steps, not the assignments: the accent of the own set derives from
+   `--rt-brand-*`, the accent of the material set from `--rt-mat-blue-100`, and the dark theme refers to
+   the same steps. So one ramp repaints every look the kit is drawn in, and the names the components
+   read stay untouched.
+
+   The scheme answers on the root only. A value referring to a step is resolved where it is declared,
+   and the assignments are declared on the root: a scheme on an inner node would change the steps under
+   assignments already resolved, and the piece would keep the old accent.
+
+   A Material theme of the application wins over the scheme in the material set: its `--mat-sys-primary`
+   stands in front of the step in that set's assignments.
+
+   Usage:
+     @use '@rt-tools/ui-kit-v2/styles/color-scheme' as rt;
+     @include rt.rt-color-scheme('teal', (50: #e6f4f3, …, 500: #008582, …, 950: #00201f));
+*/
+
+$brand-steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+
+@mixin rt-color-scheme($name, $ramp) {
+    @if meta.type-of($name) != 'string' {
+        @error 'rt-color-scheme: the name must be a string, got #{meta.type-of($name)}.';
+    }
+
+    @if meta.type-of($ramp) != 'map' or not map.has-key($ramp, 500) {
+        @error 'rt-color-scheme("#{$name}"): the ramp is a map of (step: colour) and holds at least the step 500 — the brand colour.';
+    }
+
+    @each $step, $value in $ramp {
+        @if not list.index($brand-steps, $step) {
+            @error 'rt-color-scheme("#{$name}"): unknown step #{$step}. Allowed: #{$brand-steps}.';
+        }
+    }
+
+    /* `:root[…]` (0,2,0) outranks the steps on `:root` (0,1,0) whatever the order of the sources. */
+    :root[data-rt-scheme='#{$name}'] {
+        @each $step, $value in $ramp {
+            --rt-brand-#{$step}: #{$value};
+        }
+
+        --rt-mat-blue-100: #{map.get($ramp, 500)};
+    }
+}

package/styles/tokens.css

@@ -6798,6 +6798,25 @@ html.rt-theme-dark.rt-preset-material {
     justify-content: center;
     font-size: var(--rt-btn-icon-size);
   }
+  .rt-button {
+    /* Лигатура шрифта Material Symbols для имени без пары — размер ей даёт `__icon` рядом.
+       Шрифт подключает приложение, семью можно переназначить свойством сверху. До готовности
+       шрифтов лигатура скрыта: иначе на её месте видно слово. */
+  }
+  .rt-button__glyph {
+    overflow: hidden;
+    font-family: var(--rt-icon-glyph-font, "Material Symbols Outlined"), sans-serif;
+    font-feature-settings: "liga";
+    font-style: normal;
+    font-weight: var(--rt-font-weight-regular);
+    letter-spacing: normal;
+    line-height: 1;
+    text-transform: none;
+    white-space: nowrap;
+  }
+  .rt-button__glyph--pending {
+    visibility: hidden;
+  }
   .rt-button__label {
     display: inline-flex;
     align-items: center;
@@ -6973,6 +6992,22 @@ html.rt-theme-dark.rt-preset-material {
     cursor: wait;
     pointer-events: none;
   }
+  .rt-button {
+    /* Подпись спрятана на время загрузки: содержимое гаснет прозрачностью, а не
+       `visibility` — так оно держит ширину и остаётся именем кнопки для скринридера.
+       Загрузчик встаёт поверх по центру. */
+  }
+  .rt-button--loading-label-hidden {
+    position: relative;
+  }
+  .rt-button--loading-label-hidden > :not(.rt-button__loader) {
+    opacity: 0;
+  }
+  .rt-button__loader {
+    position: absolute;
+    margin: auto;
+    inset: 0;
+  }
   .rt-button {
     /* Состояние стоит ниже всех вариантов оформления и палитры того же блока.
        Специфичность у них равная, и правила равной силы разбираются порядком в