@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

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

@@ -7,6 +7,11 @@
        так они достаются только корню шаблона. */
 
     rt-tag {
+        /* Скругление и толщина рамки объявлены на хосте: правило приложения на теге компонента
+           их переопределяет, а шаги входа `radius` стоят тоже на хосте. */
+        --rt-tag-radius: var(--rt-radius-full);
+        --rt-tag-border-width: var(--rt-border-width-thin);
+
         display: inline-flex;
 
         /* Предел стоит и на хосте, и на пилюле внутри. Вмещающий блок пилюли — сам хост, и без
@@ -14,73 +19,88 @@
            разросшегося хоста, и метка вылезает за место, которое ей дали. */
         max-width: 100%;
 
+        /* Цвета и отступы приложение задаёт ручками `--rt-tag-color-*` и `--rt-tag-padding-*`:
+           их кит не объявляет, а запасное значение — то, что дают палитра и ступень размера.
+           У интервала запасного нет нарочно: незаданная ручка даёт unset, то есть наследование
+           от родителя, как до ручки. Запасное normal обрывало его. */
         .rt-tag {
-            --rt-tag-radius: var(--rt-radius-full);
-            --rt-tag-border-width: var(--rt-border-width-thin);
+            --rt-tag-severity-bg: var(--rt-neutral-100);
+            --rt-tag-severity-text: var(--rt-neutral-700);
+            --rt-tag-size-padding-block: var(--rt-space-1);
+            --rt-tag-size-padding-inline: var(--rt-space-2);
 
             display: inline-flex;
             max-width: 100%;
             align-items: center;
-            padding: var(--rt-space-1) var(--rt-space-2);
+            padding: var(--rt-tag-padding-block, var(--rt-tag-size-padding-block))
+                var(--rt-tag-padding-inline, var(--rt-tag-size-padding-inline));
             border-radius: var(--rt-tag-radius);
-            background: var(--rt-neutral-100);
-            color: var(--rt-neutral-700);
+            background: var(--rt-tag-color-bg, var(--rt-tag-severity-bg));
+            color: var(--rt-tag-color-text, var(--rt-tag-severity-text));
             font-size: var(--rt-text-sm);
             gap: var(--rt-space-1);
+            letter-spacing: var(--rt-tag-letter-spacing);
             line-height: var(--rt-leading-tight);
 
             /* Ступени размера: отступы, кегль и просвет между частями двигаются вместе. `md`
                повторяет то, чем метка рисовалась до появления ступеней, и вид без входа не
                меняется ни на пиксель. */
             &--size--sm {
-                padding: var(--rt-space-0-5) var(--rt-space-1);
+                --rt-tag-size-padding-block: var(--rt-space-0-5);
+                --rt-tag-size-padding-inline: var(--rt-space-1);
+
                 font-size: var(--rt-text-xs);
                 gap: var(--rt-space-0-5);
             }
 
             &--size--md {
-                padding: var(--rt-space-1) var(--rt-space-2);
+                --rt-tag-size-padding-block: var(--rt-space-1);
+                --rt-tag-size-padding-inline: var(--rt-space-2);
+
                 font-size: var(--rt-text-sm);
                 gap: var(--rt-space-1);
             }
 
             &--size--lg {
-                padding: var(--rt-space-2) var(--rt-space-4);
+                --rt-tag-size-padding-block: var(--rt-space-2);
+                --rt-tag-size-padding-inline: var(--rt-space-4);
+
                 font-size: var(--rt-text-md);
                 gap: var(--rt-space-2);
             }
 
             &--severity--info {
-                background: var(--rt-color-state-info-bg);
-                color: var(--rt-color-state-info);
+                --rt-tag-severity-bg: var(--rt-color-state-info-bg);
+                --rt-tag-severity-text: var(--rt-color-state-info);
             }
 
             &--severity--success {
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+                --rt-tag-severity-bg: var(--rt-color-state-success-bg);
+                --rt-tag-severity-text: var(--rt-color-state-success);
             }
 
             &--severity--warning {
-                background: var(--rt-color-state-warning-bg);
-                color: var(--rt-color-state-warning);
+                --rt-tag-severity-bg: var(--rt-color-state-warning-bg);
+                --rt-tag-severity-text: var(--rt-color-state-warning);
             }
 
             &--severity--danger {
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+                --rt-tag-severity-bg: var(--rt-color-state-danger-bg);
+                --rt-tag-severity-text: var(--rt-color-state-danger);
             }
 
             &--severity--secondary,
             &--severity--neutral {
-                background: var(--rt-color-bg-subtle);
-                color: var(--rt-color-text-primary);
+                --rt-tag-severity-bg: var(--rt-color-bg-subtle);
+                --rt-tag-severity-text: var(--rt-color-text-primary);
             }
 
             /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
-               После severity-блоков — иначе их `background` перебил бы transparent. */
+               После severity-блоков — иначе их фон перебил бы transparent. */
             &--appearance--outlined {
-                border: var(--rt-tag-border-width) solid currentcolor;
-                background: transparent;
+                --rt-tag-severity-bg: transparent;
+
+                border: var(--rt-tag-border-width) solid var(--rt-tag-color-border, currentcolor);
             }
 
             &__icon {
@@ -111,7 +131,7 @@
             }
         }
 
-        /* Шаг входа `radius` переназначает собственное свойство пилюли. */
-        @include kv.radius-steps('--rt-tag-radius', '> .rt-tag');
+        /* Шаг входа `radius` переназначает собственное свойство пилюли на хосте. */
+        @include kv.radius-steps('--rt-tag-radius');
     }
 }

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

@@ -24,6 +24,7 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 | `duration`        | `number \| string` (мс)                                                                           | `4000`           |
 | `visibleToasts`   | `number \| string`                                                                                | `3`              |
 | `expand`          | `boolean`                                                                                         | `false`          |
+| `mode`            | `'stack' \| 'replace'`                                                                            | `'stack'`        |
 
 ## Главное, что нужно знать
 
@@ -42,12 +43,19 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `action` и `secondaryAction` рисуются кнопками внутри тоста и зовут переданные обработчики.
 - `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
 - Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
+- `duration` у самого тоста важнее срока тостера; `duration: null` держит тост до крестика.
+- `progress: true` рисует полосу срока; она встаёт тем же признаком `rt-toast--paused`, что и таймер.
+- `icon` у тоста важнее карты `RT_TOAST_SEVERITY_ICONS`; `icon: null` снимает значок.
+- `mode="replace"` помечает прежние тосты вытесненными, и они уходят той же анимацией, что по крестику.
 
 ## Края
 
 - **Нулевая длительность не значит «висит, пока не закроют».** `duration: 0` — это таймер на
   ноль миллисекунд: тост гасит себя сразу после первой отрисовки. Держать его открытым умеет
   только пауза таймера — признак `interacting` либо развёрнутая стопка.
+  Тост «до крестика» задаётся `duration: null`.
+- **Значок красится стилем, а не входом `color` значка.** Вход пишет цвет прямо в разметку, и
+  ручке `--rt-toast-icon-color` перебить его было бы нечем.
 - **В матрице каждому тосту ставится `[interacting]="true"`.** Иначе ячейки гаснут одна за
   другой, пока смотришь на показ, и кадр снимается с пустой сетки.
 

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,11 +5,11 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
 ```
 
-| вход                     | тип                           | умолчание                                       |
-| ------------------------ | ----------------------------- | ----------------------------------------------- |
-| `rtTooltip`              | `string \| null \| undefined` | `''`                                            |
-| `rtTooltipPlacement`     | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
-| `rtTooltipWhenTruncated` | `boolean`                     | `false` — подсказка только у обрезанного текста |
+| вход                     | тип                                              | умолчание                                       |
+| ------------------------ | ------------------------------------------------ | ----------------------------------------------- |
+| `rtTooltip`              | `string \| null \| undefined`                    | `''`                                            |
+| `rtTooltipPlacement`     | `'top' \| 'bottom' \| 'left' \| 'right' \| null` | `null` — сверху, под материальным набором снизу |
+| `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 

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`: плашка стоит поверх низа ленты и места не
+занимает, пустая строка её прячет. Текст и перевод даёт приложение.
+
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
 что отвечали соседние реплики.