@rt-tools/ui-kit-v2 0.23.2 → 0.23.4

package/src/lib/components/inline-edit/CONTEXT.md

@@ -0,0 +1,41 @@
+# `rt-inline-edit`
+
+```html
+<rt-inline-edit placeholder="Название отчёта" [value]="report.name" (saved)="rename($event)" />
+```
+
+Входы — `value`, `placeholder`, `look`, `size`, `fieldLabel`, `disabled`, `saving`, `allowEmpty`,
+`closeOnSave`, `blurAction`, `fieldIcon`, `truncate` и двусторонний `editing`. Выходы — `saved` и `cancelled`.
+
+Описание — `docs/specs/ui-kit-v2/inline-edit/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Значение принадлежит приложению.** Компонент отдаёт новое выходом и сам его не хранит: в покое
+всегда видно то, что пришло во вход `value`.
+
+**Черновик — в форме, а не в двусторонней привязке.** Форма пишет значение в поле в том же проходе
+отрисовки; двусторонняя привязка писала его тиком позже, и выделение текста при открытии заставало
+пустое поле.
+
+**Что сохранять, решает чистая функция.** `inlineEditOutcome` обрезает черновик, отказывает пустому
+и закрывает поле без события, если черновик равен значению. `inlineEditLeaves` отличает уход фокуса
+от перехода на свои кнопки.
+
+## Края
+
+- Открытие входом `editing` ведёт себя как нажатие: черновик берёт значение, фокус встаёт в поле.
+- Escape гасится в поле и не закрывает окно или панель вокруг.
+- Пока `saving`, ни Escape, ни уход фокуса, ни кнопки поле не закрывают.
+- Погашенное на время сохранения поле роняет фокус в никуда. Отметка `#focusInside` помнит, что он
+  был внутри, и после отказа или закрытия фокус возвращается; ушедший на другой элемент не трогается.
+- Плашка-поле `look="chip-field"` — отдельная ветка шаблона: тот же черновик в форме, но без покоя,
+  кнопок и `editing`. Ширину ей задаёт невидимая копия текста в одной клетке с полем. Enter и Escape
+  сохраняют сами и снимают фокус под отметкой `#chipLeaving`, чтобы уход не сохранил второй раз.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+- Цвета, зазоры и плашка — свойства `--rt-inline-edit-*` на корне блока. Материальный набор
+  переназначает пять из них в том же файле стилей, вид кита от этого не меняется.
+
+## Рядом
+
+- `rt-dynamic-input` с `editable` — правка строк списка выбора, своя внутри списка.

package/src/lib/components/inline-edit/rt-inline-edit.component.scss

@@ -0,0 +1,274 @@
+@layer rt-kit.components {
+    /* rt-inline-edit — правка короткого значения на месте. ViewEncapsulation.None.
+       Host несёт класс блока; в покое — кнопка со значением, при правке — поле кита и две кнопки.
+       Высота покоя равна высоте поля: строка не прыгает при открытии.
+       Цвета, зазоры и плашка — свойства блока: приложение перекрашивает правку своим правилом на
+       блок. Умолчания — прежние ступени, вид без свойств не меняется. */
+
+    .rt-inline-edit {
+        --rt-inline-edit-height: var(--rt-input-height-sm);
+        --rt-inline-edit-field-width: var(--rt-size-64);
+        --rt-inline-edit-radius: var(--rt-radius-sm);
+        --rt-inline-edit-border-width: var(--rt-border-width-thin);
+        --rt-inline-edit-duration: var(--rt-duration-fast);
+        --rt-inline-edit-gap: var(--rt-space-2xs);
+        --rt-inline-edit-value-padding-x: var(--rt-space-xs);
+        --rt-inline-edit-value-gap: var(--rt-space-xs);
+        --rt-inline-edit-value-bg-hover: var(--rt-color-bg-hover);
+        --rt-inline-edit-empty-color: var(--rt-color-text-muted);
+        --rt-inline-edit-disabled-color: var(--rt-color-text-disabled);
+        --rt-inline-edit-pencil-color: var(--rt-color-text-muted);
+        --rt-inline-edit-chip-radius: var(--rt-radius-sm);
+        --rt-inline-edit-chip-bg: var(--rt-color-bg-subtle);
+        --rt-inline-edit-chip-color: var(--rt-color-text-primary);
+        --rt-inline-edit-chip-border-color: var(--rt-color-border-default);
+        --rt-inline-edit-chip-border-color-hover: var(--rt-color-action-primary-on-surface);
+        --rt-inline-edit-chip-font-size: var(--rt-text-xs);
+        --rt-inline-edit-chip-font-weight: var(--rt-font-weight-semibold);
+        --rt-inline-edit-chip-field-max-width: calc(var(--rt-size-64) + var(--rt-size-64) / 2);
+        --rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);
+        --rt-inline-edit-chip-field-color: var(--rt-inline-edit-chip-color);
+        --rt-inline-edit-chip-field-icon-color: var(--rt-inline-edit-pencil-color);
+        --rt-inline-edit-chip-field-border-color: var(--rt-inline-edit-chip-border-color);
+        --rt-inline-edit-chip-field-border-color-focus: var(--rt-inline-edit-chip-border-color-hover);
+
+        display: inline-flex;
+        min-width: 0;
+        max-width: 100%;
+        align-items: center;
+        gap: var(--rt-inline-edit-gap);
+        vertical-align: middle;
+
+        &--size-md {
+            --rt-inline-edit-height: var(--rt-input-height-md);
+        }
+
+        &--size-lg {
+            --rt-inline-edit-height: var(--rt-input-height-lg);
+        }
+
+        /* Материальный набор повторяет плашку приложения: скругление 6px, светлая серая подложка
+           и тонкая рамка без цвета действия. Цвет подписи остаётся основным — серый на серой
+           подложке не набирает 4.5 контраста для мелкого текста. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-inline-edit-chip-radius: var(--rt-radius-ms);
+            --rt-inline-edit-chip-bg: var(--rt-color-bg-surface-subtle-2);
+            --rt-inline-edit-chip-border-color: var(--rt-color-border-subtle);
+            --rt-inline-edit-chip-border-color-hover: var(--rt-color-border-strong);
+            --rt-inline-edit-value-padding-x: var(--rt-space-2);
+
+            /* Плашка-поле приложения: светлая подложка, рамка, текст и значок — основной цвет темы. */
+            --rt-inline-edit-chip-field-bg: var(--rt-mat-neutral-5);
+            --rt-inline-edit-chip-field-color: var(--mat-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-icon-color: var(--mat-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-border-color: var(--mat-sys-primary-fixed-dim, var(--rt-brand-200));
+            --rt-inline-edit-chip-field-border-color-focus: var(--mat-sys-primary, var(--rt-color-action-primary));
+        }
+
+        /* Значение в покое: подпись режется многоточием, полный текст — в подсказке. */
+        &__value {
+            display: inline-flex;
+            min-width: 0;
+            max-width: 100%;
+            min-height: var(--rt-inline-edit-height);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 0 var(--rt-inline-edit-value-padding-x);
+            border: var(--rt-inline-edit-border-width) solid transparent;
+            border-radius: var(--rt-inline-edit-radius);
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-inline-edit-value-gap);
+            text-align: start;
+            transition:
+                background-color var(--rt-inline-edit-duration) ease,
+                border-color var(--rt-inline-edit-duration) ease;
+
+            &:hover:not(:disabled) {
+                background: var(--rt-inline-edit-value-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+            }
+
+            &--empty {
+                color: var(--rt-inline-edit-empty-color);
+            }
+
+            &:disabled {
+                color: var(--rt-inline-edit-disabled-color);
+                cursor: default;
+            }
+        }
+
+        &__text {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__pencil {
+            flex-shrink: 0;
+            color: var(--rt-inline-edit-pencil-color);
+        }
+
+        &__field {
+            width: var(--rt-inline-edit-field-width);
+            min-width: 0;
+            flex: 0 1 auto;
+        }
+
+        &__save,
+        &__cancel {
+            flex-shrink: 0;
+        }
+
+        /* Плашка: светлая подложка, рамка, мелкий жирный шрифт — цвета нейтральной плашки rt-tag.
+           Цвет действия на этой подложке не набирает 4.5 контраста, поэтому он только у рамки при
+           наведении. Плашка только в покое — поле при правке читается полем в обоих видах. */
+        &--chip &__value {
+            border-color: var(--rt-inline-edit-chip-border-color);
+            border-radius: var(--rt-inline-edit-chip-radius);
+            background: var(--rt-inline-edit-chip-bg);
+            color: var(--rt-inline-edit-chip-color);
+            font-size: var(--rt-inline-edit-chip-font-size);
+            font-weight: var(--rt-inline-edit-chip-font-weight);
+
+            &:hover:not(:disabled) {
+                border-color: var(--rt-inline-edit-chip-border-color-hover);
+                background: var(--rt-inline-edit-chip-bg);
+            }
+        }
+
+        &--chip &__value--empty {
+            color: var(--rt-inline-edit-empty-color);
+        }
+
+        &--chip &__value:disabled {
+            color: var(--rt-inline-edit-disabled-color);
+        }
+
+        /* Плашка-поле: сама плашка — поле. Значок слева, рамка темнеет в фокусе; ширина идёт за
+           текстом до предела, длинный текст прокручивается в поле и целиком виден в подсказке. */
+        &__chip-field {
+            display: inline-flex;
+            min-width: 0;
+            max-width: min(100%, var(--rt-inline-edit-chip-field-max-width));
+            min-height: var(--rt-inline-edit-height);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 0 var(--rt-inline-edit-value-padding-x);
+            border: var(--rt-inline-edit-border-width) solid var(--rt-inline-edit-chip-field-border-color);
+            border-radius: var(--rt-inline-edit-chip-radius);
+            background: var(--rt-inline-edit-chip-field-bg);
+            color: var(--rt-inline-edit-chip-field-color);
+            cursor: text;
+            font-size: var(--rt-inline-edit-chip-font-size);
+            font-weight: var(--rt-inline-edit-chip-font-weight);
+            gap: var(--rt-inline-edit-value-gap);
+            transition: border-color var(--rt-inline-edit-duration) ease;
+
+            &:focus-within {
+                border-color: var(--rt-inline-edit-chip-field-border-color-focus);
+            }
+
+            &--disabled {
+                color: var(--rt-inline-edit-disabled-color);
+                cursor: default;
+            }
+        }
+
+        &__chip-icon {
+            flex-shrink: 0;
+            color: var(--rt-inline-edit-chip-field-icon-color);
+        }
+
+        &__chip-field--disabled &__chip-icon {
+            color: var(--rt-inline-edit-disabled-color);
+        }
+
+        /* Копия текста и поле лежат в одной клетке: копия задаёт ширину, поле её занимает. */
+        &__sizer {
+            display: inline-grid;
+            overflow: hidden;
+            min-width: 0;
+            grid-template-columns: minmax(0, auto);
+        }
+
+        &__mirror,
+        &__middle,
+        &__chip-input {
+            padding: 0;
+            font: inherit;
+            grid-area: 1 / 1;
+            letter-spacing: inherit;
+            white-space: pre;
+        }
+
+        &__mirror {
+            visibility: hidden;
+        }
+
+        /* Слой обрезки посередине лежит над полем, пока плашка не в фокусе: поле под ним держит
+           текст прозрачным. В фокусе слой прячется, и поле показывает текст целиком. */
+        &__middle {
+            display: flex;
+            overflow: hidden;
+            min-width: 0;
+            pointer-events: none;
+        }
+
+        &__head {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+        }
+
+        &__tail {
+            flex-shrink: 0;
+        }
+
+        /* Условие стоит фокусом, а не его отрицанием: витрина переписывает состояния в классы, и
+           отрицание там выполнялось бы всегда. */
+        &__middle ~ &__chip-input {
+            color: transparent;
+        }
+
+        &__chip-field:focus-within &__middle {
+            visibility: hidden;
+        }
+
+        &__chip-field:focus-within &__middle ~ &__chip-input {
+            color: inherit;
+        }
+
+        &__chip-input {
+            width: 100%;
+            min-width: var(--rt-space-xs);
+            border: 0;
+            background: transparent;
+            color: inherit;
+            outline: none;
+
+            &::placeholder {
+                color: var(--rt-inline-edit-empty-color);
+            }
+
+            &:disabled {
+                cursor: default;
+            }
+        }
+    }
+
+    /* Светлая подложка плашки-поля приложения в тёмной теме светлее страницы: там плашка берёт
+       подложку плашки набора, которую тёмная тема отвечает сама. */
+    [data-theme='dark'] :is(.rt-preset-material, [data-preset='material']) .rt-inline-edit,
+    :is(.rt-preset-material, [data-preset='material']) [data-theme='dark'] .rt-inline-edit,
+    html.rt-theme-dark :is(.rt-preset-material, [data-preset='material']) .rt-inline-edit {
+        --rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);
+    }
+}

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

@@ -46,6 +46,9 @@
   остаётся недостижимым.
 - `rtPopoverPanelClass` добавляется **к** базовому `rt-popover-panel`, а не вместо него.
 - Escape и клик мимо закрывают панель во всех режимах.
+- `rtPopoverPositions` даёт свои места вокруг host'а — первое главное, остальные запасные. Заданные
+  читаются при каждом открытии; без входа у панели прежние два места, под host'ом и над ним. Так
+  `rt-speed-menu` ставит действия по сторонам кнопки.
 
 ## Рядом
 

package/src/lib/components/speed-menu/CONTEXT.md

@@ -0,0 +1,34 @@
+# `rt-speed-menu`
+
+```html
+<rt-speed-menu label="Масштаб" icon="zoom_in" [actions]="zoomActions" (actionSelect)="zoom($event)" />
+```
+
+Входы — `actions`, `icon`, `label`, `direction`, `size`, `variant`, `closeOnSelect` и `disabled`.
+Выходы — `actionSelect` и `openChange`.
+
+Описание — `docs/specs/ui-kit-v2/speed-menu/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Панель — `rtPopover` на кнопке меню.** Триггер у панели ручной: открывает и закрывает её кнопка.
+Места вокруг кнопки задаёт вход панели `rtPopoverPositions`; без него у панели прежние два места.
+
+**Клавиатуру узнают по счёту щелчков.** Нажатие с клавиатуры приходит с `detail` ноль, и тогда фокус
+встаёт на первое доступное действие. Мышиное нажатие оставляет фокус на кнопке.
+
+**Ходьбу по действиям решает чистая функция.** `speedMenuNextIndex` знает стрелки, Home и End;
+недоступные кнопки отбираются по нативному `disabled` кнопки кита.
+
+## Края
+
+- Escape и Tab в панели ловит сама панель: закрывает меню и ставит фокус на кнопку. Escape на кнопке
+  меню закрывает панель её собственным обработчиком.
+- Шаг входа действия задан правилами `nth-child` до восьми действий; девятое и дальше входят вместе
+  с восьмым.
+- Порядок входа считается с конца у столбца вверх и у ряда к началу: ближнее к кнопке там последнее.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- `rt-icon-button` — его вход `expanded` пишет `aria-expanded` кнопки меню.

package/src/lib/components/speed-menu/rt-speed-menu.component.scss

@@ -0,0 +1,118 @@
+@layer rt-kit.components {
+    /* rt-speed-menu — быстрое меню у круглой кнопки. ViewEncapsulation.None.
+       Host несёт класс блока и кнопку меню; действия лежат в плавающей панели кита в конце
+       страницы, вне блока, поэтому свои свойства панель объявляет на себе. */
+
+    .rt-speed-menu {
+        --rt-speed-menu-shadow: var(--rt-shadow-md);
+
+        display: inline-flex;
+        vertical-align: middle;
+
+        /* Тень покоя кнопка-значок объявляет на своём корне, и ручку переписывает правило сильнее. */
+        &__trigger .rt-icon-button {
+            --rt-icon-button-shadow: var(--rt-speed-menu-shadow);
+        }
+    }
+
+    .rt-speed-menu__panel {
+        --rt-speed-menu-gap: var(--rt-space-sm);
+        --rt-speed-menu-inset: var(--rt-speed-menu-gap);
+        --rt-speed-menu-action-shadow: var(--rt-shadow-md);
+        --rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);
+        --rt-speed-menu-action-bg: var(--rt-color-bg-surface);
+        --rt-speed-menu-action-color: var(--rt-color-text-primary);
+        --rt-speed-menu-action-radius: var(--rt-radius-full);
+        --rt-speed-menu-duration: var(--rt-duration-fast);
+        --rt-speed-menu-stagger: var(--rt-duration-fast);
+
+        display: flex;
+        align-items: center;
+        padding: var(--rt-speed-menu-inset);
+        gap: var(--rt-speed-menu-gap);
+
+        /* Материальный набор повторяет меню приложения — mat-mini-fab: круг цвета primary-container
+           темы со значком on-primary-container 24px, подъём 3 Material (под указателем — 4), действия
+           через 16px и в 28px от кнопки, вход 100 мс со сдвигом 50 мс. Без темы Material круг серый.
+           Значок действия кнопки меню `lg` — ступень `md`, и набор переписывает её размер.
+           Панель живёт в слое поверх страницы, и признак набора несёт сама подложка слоя. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-speed-menu-gap: var(--rt-size-4);
+            --rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));
+            --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-neutral-25));
+            --rt-speed-menu-action-color: var(--mat-sys-on-primary-container, var(--rt-color-text-primary));
+            --rt-icon-step-md: var(--rt-size-6);
+            --rt-speed-menu-action-shadow: var(--mat-sys-level3, var(--rt-mat-shadow-fab));
+            --rt-speed-menu-action-shadow-hover: var(--mat-sys-level4, var(--rt-mat-shadow-fab-hover));
+            --rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);
+            --rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12);
+        }
+
+        &--up,
+        &--down {
+            flex-direction: column;
+        }
+
+        &--start,
+        &--end {
+            flex-direction: row;
+        }
+    }
+
+    /* Подложка цвета поверхности: действие висит над картой или таблицей, а заливка второй палитры
+       кнопки-значка прозрачна. Наведение и недоступность кнопка рисует поверх подложки сама.
+       Действия входят по одному, ближнее к кнопке первым: в столбце вверх и в ряду к началу
+       ближнее — последнее, поэтому там шаг считается с конца. Вход — переход от начального стиля, а
+       не анимация по кадрам: браузер съёмки оставлял анимацию в первом кадре, и действия выходили
+       прозрачными; переход доводится до конца так же, как у раскрывающейся панели. */
+    .rt-speed-menu__action {
+        --rt-speed-menu-step: 0;
+
+        border-radius: var(--rt-speed-menu-action-radius);
+        background-color: var(--rt-speed-menu-action-bg);
+        opacity: 1;
+        transform: scale(1);
+        transition:
+            opacity var(--rt-speed-menu-duration) ease-out,
+            transform var(--rt-speed-menu-duration) ease-out;
+        transition-delay: calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger));
+
+        @starting-style {
+            opacity: 0;
+            transform: scale(0.5);
+        }
+    }
+
+    /* Цвет значка — свойство меню; по умолчанию тот же цвет текста, что ставит вид `secondary`. */
+    .rt-speed-menu__action .rt-icon-button {
+        --rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);
+
+        color: var(--rt-speed-menu-action-color);
+
+        &:hover {
+            --rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover);
+        }
+    }
+
+    /* Тёмная заливка материального действия: тема Material отвечает тёмным сама, без неё — тёмная
+       ступень первого кита. */
+    :root[data-theme='dark'] :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel,
+    html.rt-theme-dark :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel {
+        --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-dark-20));
+    }
+
+    @for $step from 1 through 7 {
+        .rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(#{$step + 1}),
+        .rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(#{$step + 1}),
+        .rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(#{$step + 1}),
+        .rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(#{$step + 1}) {
+            --rt-speed-menu-step: #{$step};
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-speed-menu__action {
+            transition: none;
+        }
+    }
+}

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

@@ -28,6 +28,9 @@
             --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);
+            --rt-tag-match-bg: var(--rt-yellow-400);
+            --rt-tag-match-color: var(--rt-neutral-950);
+            --rt-tag-match-radius: var(--rt-radius-xs);
 
             display: inline-flex;
             max-width: 100%;
@@ -126,6 +129,15 @@
                 white-space: nowrap;
             }
 
+            /* Найденное слово поиска — тем же цветом, что в подписи дерева и в поиске меню. */
+            &__part {
+                &--match {
+                    border-radius: var(--rt-tag-match-radius);
+                    background: var(--rt-tag-match-bg);
+                    color: var(--rt-tag-match-color);
+                }
+            }
+
             &__close {
                 margin-inline-start: var(--rt-space-0-5);
             }

package/src/lib/components/thread-list/CONTEXT.md

@@ -52,3 +52,4 @@
 - Кнопка фильтров рисуется, только если объявлен шаблон `[rtThreadListFilters]`;
   `filtersActive` рисует на ней точку.
 - Собственное поле поиска можно заменить шаблоном `[rtThreadListSearch]`.
+- Поле поиска занимает всю шапку до кнопки фильтров, потолка ширины у него нет.

package/src/lib/components/thread-list/rt-thread-list.component.scss

@@ -27,9 +27,10 @@
             padding-inline: var(--rt-space-4);
         }
 
+        // Поиск занимает всю шапку до кнопки фильтров: в широкой колонке потолок оставлял
+        // пустое место справа, и шапка читалась недорисованной
         &__search {
             flex: 1 1 auto;
-            max-inline-size: 400px;
             min-inline-size: 0;
         }
 

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

@@ -24,6 +24,16 @@
 **Отступ полосы сверху и снизу — свойства блока** `--rt-toolbar-padding-top` и
 `--rt-toolbar-padding-bottom`, по умолчанию 8px. Список ставит им свои имена.
 
+**Поле ввода в левой части берёт ширину из свойства блока `--rt-toolbar-field-width`**, по
+умолчанию 400px (`--rt-size-100`), и не бывает шире самой части. Своей ширины у `rt-input` нет, и
+без этого поиск списка сжимался до подсказки. Выпадающие отборы `rt-select` слева держат ширину по
+содержимому: они стоят рядами, и по 400px каждый растягивали строку и вылезали за узкий экран. В
+центре поле и отбор по-прежнему занимают всю ширину центра. Ширину берёт только поле, стоящее в
+левой части прямо: поле внутри своего компонента приложения остаётся по содержимому, иначе обёртка
+растёт до 400px и не сжимается, и несколько отборов не влезают в строку. На узком экране левая
+часть стекает в колонку и не шире окна: у неё `min-width: 0`, иначе её наименьшая ширина бралась по
+полю в 400px, и оно уходило за правый край.
+
 **Плотная полоса остаётся строкой на любой ширине, и её левая часть сжимается.** Длинный
 заголовок в ней переносится по словам и не выходит за правый край. Кнопки справа держат свою
 ширину. Обычная полоса левую часть не сжимает: на узком экране она стекает в колонку.

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

@@ -10,6 +10,7 @@
         --rt-toolbar-gap: var(--rt-space-2);
         --rt-toolbar-center-justify: flex-end;
         --rt-toolbar-center-overflow: visible;
+        --rt-toolbar-field-width: var(--rt-size-100);
 
         display: block;
 
@@ -34,8 +35,25 @@
             // прижимает right-бар к краю. Раньше каждый list-page переопределял
             // эти три флекса через ::ng-deep — теперь поведение зашито здесь.
             &--left {
+                min-width: 0;
                 flex: 0 0 auto;
                 gap: var(--rt-space-2);
+
+                // Поле слева — поиск списка — берёт ширину из свойства блока, а не по подсказке:
+                // своей ширины у поля нет, и в полосе по содержимому оно сжималось до подсказки.
+                // Шире самой полосы поле не становится — на узком экране оно её не распирает.
+                // Для этого у части min-width: 0: иначе её наименьшая ширина берётся по ширине
+                // поля, процент max-width в этом счёте не участвует, и в колонке узкого экрана
+                // часть уходила за правый край окна.
+                // Выпадающие отборы сюда не входят: они стоят здесь рядами и держат ширину по
+                // содержимому, а по 400 px каждый растягивали строку и вылезали за узкий экран.
+                // Ширина — только у поля, стоящего в части прямо. Поле внутри своего компонента
+                // приложения ширину не берёт: обёртка растёт по нему до 400px, её не сжать, и три
+                // таких отбора не влезали в строку и вылезали за край узкого экрана.
+                > rt-input {
+                    width: var(--rt-toolbar-field-width);
+                    max-width: 100%;
+                }
             }
 
             &--center {

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

@@ -10,6 +10,7 @@
 | `rtTooltip`              | `string \| null \| undefined`                    | `''`                                            |
 | `rtTooltipPlacement`     | `'top' \| 'bottom' \| 'left' \| 'right' \| null` | `null` — сверху, под материальным набором снизу |
 | `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
+| `rtTooltipHideOnClick`   | `boolean`                                        | `true` — клик прячет открытую подсказку         |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 
@@ -27,9 +28,15 @@ no-op, а не пустая панель под курсором. Поэтому
 
 - Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
   (панель мешала бы смотреть на результат нажатия).
+- У переключателя ставят `rtTooltipHideOnClick="false"`: клик оставляет подсказку, а новый текст
+  `[rtTooltip]` («Включить» → «Выключить») появляется в открытой панели на месте. Отложенный показ клик
+  снимает при любом значении, поэтому касание на тач-экране подсказку не показывает.
+- Смена текста при открытой подсказке меняет его на месте при любом значении входа; пустой текст её
+  прячет.
 - Фокус, поставленный мышью или кодом, подсказку не показывает: меню возвращает фокус кнопке после
   выбора пункта, и подсказка кнопки всплывала бы поверх того, что пункт открыл.
-- `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`.
+- `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`, а поведение по клику
+  задаёт его вход `tooltipHideOnClick`.
 - Подсказка не заменяет `aria-label`: она вспомогательная, а имя контрола задаётся отдельно.
 
 ## Рядом