@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

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

@@ -24,10 +24,15 @@
 **Отступ полосы сверху и снизу — свойства блока** `--rt-toolbar-padding-top` и
 `--rt-toolbar-padding-bottom`, по умолчанию 8px. Список ставит им свои имена.
 
-**Поле в левой части берёт ширину из свойства блока `--rt-toolbar-field-width`**, по умолчанию
-400px (`--rt-size-100`), и не бывает шире самой части. Своей ширины у `rt-input` и `rt-select` нет,
-и без этого поиск списка сжимался до подсказки. В центре поле по-прежнему занимает всю ширину
-центра.
+**Поле ввода в левой части берёт ширину из свойства блока `--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

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

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`: она вспомогательная, а имя контрола задаётся отдельно.
 
 ## Рядом

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

@@ -0,0 +1,66 @@
+# `rt-tree`
+
+```html
+<rt-tree [nodes]="regions" [searchTerm]="term()" [showSelectAll]="true" [(value)]="chosen" (picked)="open($event)">
+    <ng-template rtTreeNodeEnd let-node>
+        <rt-tag size="sm" [value]="node.description ?? ''" />
+    </ng-template>
+</rt-tree>
+```
+
+| вход            | тип                                   | умолчание      |
+| --------------- | ------------------------------------- | -------------- |
+| `nodes`         | `ReadonlyArray<IRtTree.Node<TValue>>` | **обязателен** |
+| `value` (model) | `ReadonlyArray<TValue>`               | `[]`           |
+| `mode`          | `'multiple' \| 'single' \| 'none'`    | `'multiple'`   |
+| `cascade`       | `boolean`                             | `true`         |
+| `searchTerm`    | `string`                              | `''`           |
+| `showSelectAll` | `boolean`                             | `false`        |
+| `ariaLabel`     | `string \| null`                      | `null`         |
+
+| выход         | тип                     |
+| ------------- | ----------------------- |
+| `valueChange` | `ReadonlyArray<TValue>` |
+| `picked`      | `IRtTree.Node<TValue>`  |
+
+Публичные методы: `handleKeydown(event)`, `expandAll()`, `collapseAll()`, `clearHighlight()`.
+
+## Главное, что нужно знать
+
+**Дерево считает тот же модуль, что дерево вариантов у `rt-select` и `rt-multiselect`.** Строки,
+листья, отметки ветвей, отбор по слову и боковые стрелки — функции `rt-select-tree.ts`. Свою копию
+логики дерево не держит: две копии разошлись бы на первой правке.
+
+**Узлы не меняются никогда.** Выбор живёт в `value`, каждый клик даёт новый массив. В каскаде
+выбор держит только листья, а отметка ветки выводится из них.
+
+## Края
+
+- Без каскада клик меняет только сам узел, и в выборе может лежать значение ветки.
+- В одиночном режиме повторный клик по выбранному узлу его не снимает.
+- В режиме без отметок клик по листу отдаёт `picked`, клик по ветке её раскрывает.
+- Выключенный узел не меняется ни кликом, ни «выбрать всё».
+- Выключенное дерево не меняет выбор ничем и уходит из порядка Tab. Стрелка у ветки раскрывает её
+  и в нём: раскрытие — не выбор.
+- `handleKeydown` отвечает, взята ли клавиша: незнакомую дерево не трогает, и приложение может
+  отдавать сюда каждую клавишу своего поля поиска.
+- Ветки над выбранным раскрыты, когда дерево появилось. Дальше раскрытие меняют только человек
+  и методы: первый же выбор фиксирует его, и отметка ветки её не сворачивает.
+- Отметку рисуют `rt-checkbox` и `rt-radio-button` кита. Они стоят с `inert`: фокус и нажатие
+  берёт строка, а контрол только показывает отметку.
+- Подпись и описание строки обрезаются многоточием, и тогда полный текст показывает подсказка кита
+  в режиме `rtTooltipWhenTruncated`; у поместившегося текста подсказки нет.
+- Расчёт выбора открыт наследнику четырьмя методами: `rowState`, `selectAllMarkOf`,
+  `selectAllChoice` и `nextChoice`. Так `rt-hybrid-tree` берёт эту разметку и стили целиком и меняет
+  только правила выбора. Число в конце строки рисуется, когда `rowState` его отдаёт; само дерево
+  отдаёт `null`.
+- `emptyIcon` ставит значок кита над подписью пустого дерева; без него пустота — одна подпись.
+- `nodeEndTemplate` и `nodeMetaTemplate` отдают разметку строки входом и сильнее директив
+  `rtTreeNodeEnd` и `rtTreeNodeMeta`: так её передаёт `rt-tree-selector`, у которого дерево внутри.
+- Каждое значение вида — свойство `--rt-tree-*` с прежним шагом по умолчанию. Материальный набор
+  переназначает их по деревьям приложения: строка 32px со скруглением 6px и зазором 5px, отступ
+  46px с линией, стрелка и плашка числа основного цвета, флажок 16px, совпадение на жёлтом. Высота
+  32px считается вместе с полями: `--rt-tree-row-box-sizing` в наборе — `border-box`. Размер и
+  рамку квадрата дерево передаёт через `--rt-checkbox-box-size` и `--rt-checkbox-box-border-color`
+  на хосте флажка: 14px внутри, 16px с рамкой, серая рамка приложения. Своего материального вида у
+  флажка нет.

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

@@ -0,0 +1,313 @@
+@layer rt-kit.components {
+    /* rt-tree — дерево выбора; его же разметку и стили берёт rt-hybrid-tree. ViewEncapsulation.None.
+       Каждое значение вида — свойство блока: приложение перенастраивает строки, отступ уровня, стрелку,
+       отметку, совпадение и счётчик, не трогая общих шагов кита. Умолчания — прежние шаги, вид без
+       свойств не меняется. */
+
+    .rt-tree {
+        --rt-tree-font-size: var(--rt-input-font-size);
+        --rt-tree-color: var(--rt-color-text-primary);
+        --rt-tree-indent: var(--rt-space-lg);
+        --rt-tree-row-padding-block: var(--rt-space-sm);
+        --rt-tree-row-padding-inline: var(--rt-space-md);
+        --rt-tree-row-gap: var(--rt-space-sm);
+        --rt-tree-row-spacing: var(--rt-space-0);
+        --rt-tree-row-min-height: auto;
+        --rt-tree-row-box-sizing: content-box;
+        --rt-tree-row-radius: var(--rt-radius-none);
+        --rt-tree-row-bg-hover: var(--rt-color-bg-hover);
+        --rt-tree-row-bg-highlighted: var(--rt-color-bg-hover);
+        --rt-tree-row-bg-chosen: var(--rt-color-action-primary-subtle);
+        --rt-tree-guide-width: var(--rt-border-width-thin);
+        --rt-tree-guide-color: transparent;
+        --rt-tree-toggle-size: var(--rt-input-icon-size);
+        --rt-tree-toggle-color: var(--rt-neutral-600);
+        --rt-tree-leaf-space-display: inline-flex;
+        --rt-tree-check-size: calc(var(--rt-size-4) + var(--rt-space-0-5));
+        --rt-tree-check-border-color: var(--rt-color-border-strong);
+        --rt-tree-match-bg: var(--rt-yellow-400);
+        --rt-tree-match-color: var(--rt-neutral-950);
+        --rt-tree-match-radius: var(--rt-radius-xs);
+        --rt-tree-match-font-weight: var(--rt-font-weight-regular);
+        --rt-tree-count-color: var(--rt-color-text-muted);
+        --rt-tree-count-bg: transparent;
+        --rt-tree-count-font-size: var(--rt-text-sm);
+        --rt-tree-count-padding-inline: var(--rt-space-0);
+        --rt-tree-count-min-size: auto;
+        --rt-tree-count-radius: var(--rt-radius-none);
+        --rt-tree-select-all-font-size: var(--rt-tree-font-size);
+        --rt-tree-select-all-font-weight: var(--rt-font-weight-regular);
+        --rt-tree-empty-color: var(--rt-color-text-muted);
+        --rt-tree-empty-gap: var(--rt-space-sm);
+        --rt-tree-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-tree-border-width: var(--rt-border-width-thin);
+        --rt-tree-bg: var(--rt-color-bg-surface);
+        --rt-tree-select-all-bg: var(--rt-tree-bg);
+
+        /* Ярус липкой строки «выбрать всё» — внутри дерева: `isolation` не пускает её над страницей. */
+        --rt-tree-select-all-z: var(--rt-z-sticky);
+
+        display: block;
+        background-color: var(--rt-tree-bg);
+        color: var(--rt-tree-color);
+        font-size: var(--rt-tree-font-size);
+        isolation: isolate;
+        outline: none;
+
+        /* Под пальцем строка не ниже контрола кита: высота переназначается свойством, а не правилом. */
+        @media (pointer: coarse) {
+            --rt-tree-row-min-height: var(--rt-control-height-lg);
+        }
+
+        /* Материальный набор повторяет деревья приложения: строка 32px со скруглением 6px, 12px по
+           бокам и 5px до следующей; между стрелкой или отметкой и подписью 10px; уровень отступает на
+           46px, и под стрелкой предка идёт линия; у листа нет места под стрелку. Стрелка, флажок и
+           плашка счётчика — основного цвета темы, флажок 16px, совпадение — полужирное на жёлтом
+           первого кита, «выбрать всё» — 14px средней насыщенности. 32px — внешняя высота строки,
+           поэтому строка считается с полями; квадрат флажка задан без рамки — 14px внутри, 16px
+           снаружи. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-tree-indent: calc(var(--rt-size-12) - var(--rt-space-0-5));
+            --rt-tree-row-padding-block: var(--rt-space-1);
+            --rt-tree-row-padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));
+            --rt-tree-row-gap: calc(var(--rt-space-2) + var(--rt-space-0-5));
+            --rt-tree-row-spacing: calc(var(--rt-space-1) + var(--rt-space-0-5) / 2);
+            --rt-tree-row-min-height: var(--rt-size-8);
+            --rt-tree-row-box-sizing: border-box;
+            --rt-tree-row-radius: var(--rt-radius-ms);
+            --rt-tree-guide-color: var(--mat-sys-outline-variant, var(--rt-color-border-subtle));
+            --rt-tree-toggle-color: var(--rt-color-action-primary);
+            --rt-tree-leaf-space-display: none;
+            --rt-tree-check-size: calc(var(--rt-size-4) - 2 * var(--rt-input-border-width));
+            --rt-tree-check-border-color: var(--rt-mat-neutral-40);
+            --rt-tree-match-bg: var(--rt-mat-yellow-100);
+            --rt-tree-match-font-weight: var(--rt-font-weight-semibold);
+            --rt-tree-count-bg: var(--rt-color-action-primary);
+            --rt-tree-count-color: var(--mat-sys-on-primary, var(--rt-color-text-inverse));
+            --rt-tree-count-font-size: var(--rt-text-xs);
+            --rt-tree-count-padding-inline: calc(var(--rt-space-1) + var(--rt-space-0-5));
+            --rt-tree-count-min-size: var(--rt-size-5);
+            --rt-tree-count-radius: var(--rt-radius-full);
+            --rt-tree-select-all-font-size: var(--rt-text-sm);
+            --rt-tree-select-all-font-weight: var(--rt-font-weight-medium);
+
+            @media (pointer: coarse) {
+                --rt-tree-row-min-height: var(--rt-control-height-lg);
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: var(--rt-tree-focus-shadow);
+        }
+
+        &__select-all,
+        &__row {
+            /* Уровень строки ставит разметка на саму строку; ноль — верхний уровень. */
+            --rt-tree-level: 0;
+
+            display: flex;
+            box-sizing: var(--rt-tree-row-box-sizing);
+            align-items: center;
+            padding: var(--rt-tree-row-padding-block) var(--rt-tree-row-padding-inline);
+            border-radius: var(--rt-tree-row-radius);
+            cursor: pointer;
+            gap: var(--rt-tree-row-gap);
+            min-block-size: var(--rt-tree-row-min-height);
+            padding-inline-start: calc(var(--rt-tree-row-padding-inline) + var(--rt-tree-indent) * var(--rt-tree-level));
+
+            &:hover {
+                background-color: var(--rt-tree-row-bg-hover);
+            }
+        }
+
+        /* Строка прилипает к верху места, которое прокручивает дерево; фон непрозрачный, иначе под
+           ней видны уехавшие строки. Наведение ложится поверх фона, а не вместо него. */
+        &__select-all {
+            position: sticky;
+            z-index: var(--rt-tree-select-all-z);
+            top: 0;
+            border-bottom: var(--rt-tree-border-width) solid var(--rt-color-border-default);
+            background-color: var(--rt-tree-select-all-bg);
+
+            &:hover {
+                background-color: var(--rt-tree-select-all-bg);
+                background-image: linear-gradient(var(--rt-tree-row-bg-hover), var(--rt-tree-row-bg-hover));
+            }
+
+            &--disabled {
+                cursor: not-allowed;
+                opacity: var(--rt-input-disabled-opacity);
+            }
+        }
+
+        &__select-all &__label {
+            font-size: var(--rt-tree-select-all-font-size);
+            font-weight: var(--rt-tree-select-all-font-weight);
+        }
+
+        &__row {
+            position: relative;
+
+            & + & {
+                margin-block-start: var(--rt-tree-row-spacing);
+            }
+
+            /* Линии уровней: по одной под стрелкой каждого предка. Полоса тянется и через зазор над
+               строкой, чтобы линия шла сплошной; у верхнего уровня её ширина ноль. Без своего цвета
+               линия прозрачна, и вид кита её не показывает. */
+            &:before {
+                position: absolute;
+                background: repeating-linear-gradient(
+                    to right,
+                    var(--rt-tree-guide-color) 0 var(--rt-tree-guide-width),
+                    transparent var(--rt-tree-guide-width) var(--rt-tree-indent)
+                );
+                content: '';
+                inline-size: calc(var(--rt-tree-indent) * var(--rt-tree-level));
+                inset-block: calc(-1 * var(--rt-tree-row-spacing)) 0;
+                inset-inline-start: calc(var(--rt-tree-row-padding-inline) + (var(--rt-tree-toggle-size) - var(--rt-tree-guide-width)) / 2);
+                pointer-events: none;
+            }
+
+            &--highlighted {
+                background-color: var(--rt-tree-row-bg-highlighted);
+            }
+
+            &--chosen {
+                background-color: var(--rt-tree-row-bg-chosen);
+            }
+
+            &--disabled {
+                cursor: not-allowed;
+                opacity: var(--rt-input-disabled-opacity);
+
+                &:hover {
+                    background-color: transparent;
+                }
+            }
+        }
+
+        /* Стрелка ветки и пустое место под неё у листа: шаг отступа равен их ширине с зазором,
+           и стрелка дочерней строки встаёт под подписью родителя. */
+        &__toggle,
+        &__toggle-space {
+            display: inline-flex;
+            flex-shrink: 0;
+            block-size: var(--rt-tree-toggle-size);
+            inline-size: var(--rt-tree-toggle-size);
+        }
+
+        /* Место под стрелку у листа: материальный вид его убирает, и отметка листа встаёт под
+           стрелкой соседней группы, как в приложении. Над первой строкой-листом «выбрать всё»
+           убирает своё место вместе с ней. */
+        &__row > &__toggle-space,
+        &__select-all--over-leaf > &__toggle-space {
+            display: var(--rt-tree-leaf-space-display);
+        }
+
+        /* Цвет стрелки идёт в значок через его же свойство приглушённого цвета. */
+        &__toggle {
+            --rt-icon-color-muted: var(--rt-tree-toggle-color);
+
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            cursor: pointer;
+        }
+
+        /* Размер квадрата флажка: класс элемента стоит на хосте флажка и перекрывает его свойство,
+           объявленное по имени тега. Умолчание дерева равно размеру самого флажка. */
+        &__check {
+            --rt-checkbox-box-size: var(--rt-tree-check-size);
+            --rt-checkbox-box-border-color: var(--rt-tree-check-border-color);
+
+            flex-shrink: 0;
+            margin: 0;
+            pointer-events: none;
+        }
+
+        &__text {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+        }
+
+        &__label {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__description {
+            overflow: hidden;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* Метки узла и разметка приложения под подписью: строка переносится, а не вылезает. */
+        &__meta {
+            display: flex;
+            min-width: 0;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-1);
+            margin-block-start: var(--rt-space-1);
+        }
+
+        &__part {
+            &--match {
+                border-radius: var(--rt-tree-match-radius);
+                background: var(--rt-tree-match-bg);
+                color: var(--rt-tree-match-color);
+                font-weight: var(--rt-tree-match-font-weight);
+            }
+        }
+
+        /* Число выбранного под группой без отметки — в конце строки, перед разметкой приложения.
+           В материальном виде это плашка: фон, скругление и поля приходят свойствами. */
+        &__count {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-tree-count-radius);
+            background: var(--rt-tree-count-bg);
+            color: var(--rt-tree-count-color);
+            font-size: var(--rt-tree-count-font-size);
+            font-variant-numeric: tabular-nums;
+            min-block-size: var(--rt-tree-count-min-size);
+            min-inline-size: var(--rt-tree-count-min-size);
+            padding-inline: var(--rt-tree-count-padding-inline);
+        }
+
+        &__end {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            margin-inline-start: auto;
+        }
+
+        &__empty {
+            padding: var(--rt-space-md);
+            color: var(--rt-tree-empty-color);
+            text-align: center;
+
+            /* Значок приложения стоит над подписью. */
+            &--with-icon {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: var(--rt-tree-empty-gap);
+            }
+        }
+
+        &__empty-icon {
+            flex-shrink: 0;
+        }
+    }
+}

package/src/lib/components/tree-selector/CONTEXT.md

@@ -0,0 +1,47 @@
+# `rt-tree-selector`
+
+```html
+<rt-tree-selector
+    confirm
+    expandControls
+    revertable
+    multiToggle
+    [emptyAllowed]="false"
+    [nodes]="hotels"
+    [(value)]="hotelIds"
+    (applied)="close()" />
+```
+
+Входы и выходы — на странице обзора `Overview.mdx` рядом. Договорённость —
+`docs/specs/ui-kit-v2/tree-selector/spec.md`.
+
+## Главное, что нужно знать
+
+**Строки рисует `rt-tree`, селектор только отбирает узлы и держит выбор.** Отбор по словам — в
+`rt-tree-selector.logic.ts`; дереву уходят отобранные узлы с `filter = false`, а строка поиска — для
+подсветки слов.
+
+**Черновик — `linkedSignal` от `value`.** Смена выбора снаружи сбрасывает черновик; в прямой форме
+каждое изменение пишется и в черновик, и в `value`.
+
+**Поле поиска передаёт клавиши дереву.** Фокус ставится в поле после первой отрисовки; раскрытие на
+старте и раскрытие под строкой поиска зовут `expandAll` и `collapseAll` дерева после отрисовки.
+
+## Края
+
+- Выбор всегда новый массив, узлы не правятся.
+- «Очистить выбор» оставляет выключенные выбранные узлы.
+- Кнопки строки контролов иконочные и все необязательные. Откат стоит только в подтверждаемой форме.
+- Порядок значений при сравнении черновика с выбором не учитывается.
+- Выключенный селектор выключает поле, кнопки, переключатель и дерево, и «Применить» тогда не
+  проходит. Фокус на старте он в поле не ставит.
+- Наследник `rt-hybrid-tree-selector` ставит флаг `hybrid`, и разметка рисует `rt-hybrid-tree` вместо
+  `rt-tree`. Ссылка `tree` берёт то дерево, какое стоит.
+- `rtTreeSelectorUnderSearch` — разметка приложения между полем поиска и строкой контролов.
+- Шаблоны `rtTreeNodeEnd` и `rtTreeNodeMeta` из содержимого селектора уходят дереву внутри входами
+  `nodeEndTemplate` и `nodeMetaTemplate`: своим содержимым дерево их не видит.
+- `matchHighlight` выключает отметку найденных слов: дерево получает пустое слово, а отбор узлов
+  идёт по строке поиска как прежде. `emptyIcon` ставит значок над «ничего не найдено» и отдаётся
+  дереву внутри.
+- В материальном наборе между головой и деревом 10px (`--rt-tree-selector-gap`); строки дерева
+  берут материальный вид `rt-tree`.

package/src/lib/components/tree-selector/rt-tree-selector.component.scss

@@ -0,0 +1,121 @@
+@layer rt-kit.components {
+    /* rt-tree-selector — поиск, контролы и дерево. ViewEncapsulation.None.
+       Высоту задаёт место, куда приложение ставит селектор: дерево прокручивается внутри,
+       поле поиска и подвал стоят на месте. */
+
+    .rt-tree-selector {
+        --rt-tree-selector-border-width: var(--rt-border-width-thin);
+        --rt-tree-selector-bg: var(--rt-color-bg-surface);
+        --rt-tree-selector-gap: var(--rt-space-sm);
+        --rt-tree-selector-empty-color: var(--rt-color-text-muted);
+        --rt-tree-selector-empty-gap: var(--rt-space-sm);
+
+        display: flex;
+        min-height: 0;
+        box-sizing: border-box;
+        flex-direction: column;
+        background-color: var(--rt-tree-selector-bg);
+        color: var(--rt-color-text-primary);
+        gap: var(--rt-tree-selector-gap);
+
+        /* Материальный набор повторяет выбор деревом приложения: над списком 10px. Строки дерева
+           внутри берут свой материальный вид сами. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-tree-selector-gap: calc(var(--rt-space-2) + var(--rt-space-0-5));
+        }
+
+        &__head {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        &__label {
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__search {
+            display: block;
+        }
+
+        &__controls {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        // Контролы переносятся на вторую строку на узком экране: обрезка спрятала бы кнопку.
+        &__row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-xs);
+        }
+
+        &__control {
+            flex: 0 0 auto;
+        }
+
+        // Контролы приложения прижаты к правому краю строки, кнопки дерева — к левому.
+        &__own {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-xs);
+            margin-inline-start: auto;
+        }
+
+        &__multi {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-sm);
+        }
+
+        &__multi-label {
+            font-size: var(--rt-text-sm);
+        }
+
+        &__multi-hint-icon {
+            color: var(--rt-color-text-muted);
+        }
+
+        &__tree {
+            min-height: 0;
+            flex: 1 1 auto;
+            overflow-y: auto;
+        }
+
+        &__empty {
+            flex: 1 1 auto;
+            padding: var(--rt-space-md);
+            color: var(--rt-tree-selector-empty-color);
+            text-align: center;
+
+            /* Значок приложения стоит над подписью. */
+            &--with-icon {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: var(--rt-tree-selector-empty-gap);
+            }
+        }
+
+        &__empty-icon {
+            flex-shrink: 0;
+        }
+
+        /* Разметка приложения под полем поиска — во всю ширину головы. */
+        &__under-search {
+            display: block;
+        }
+
+        &__foot {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            border-top: var(--rt-tree-selector-border-width) solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-sm);
+            padding-block-start: var(--rt-space-sm);
+        }
+    }
+}

package/src/styles/_primitives.scss

@@ -358,6 +358,10 @@
        цветность те же): это ближайшая к виду первого кита ступень, что берёт порог текста. */
     --rt-mat-green-120: #008465;
 
+    /* Материальный набор: жёлтая подсветка найденного — фон совпадения в деревьях первого кита
+       и приложения. */
+    --rt-mat-yellow-100: #ffeb3b;
+
     /* Материальный набор: марка первого кита и подложка его обвязки */
     --rt-mat-navy-100: #0d1c2b;
 

package/src/styles/_semantic.scss

@@ -399,8 +399,12 @@
     --rt-profile-menu-min-width: var(--rt-size-60);
     --rt-profile-menu-padding: var(--rt-space-5);
     --rt-profile-menu-shadow: var(--rt-shadow-profile-menu);
+    --rt-profile-menu-border-width: var(--rt-border-width-thin);
+    --rt-profile-menu-radius: var(--rt-radius-md);
     --rt-profile-avatar-size: var(--rt-size-10);
     --rt-profile-avatar-font-size: var(--rt-text-2xl);
+    --rt-profile-avatar-border-width: var(--rt-border-width-medium);
+    --rt-profile-avatar-radius: var(--rt-radius-full);
     --rt-profile-item-padding-y: var(--rt-space-4);
     --rt-profile-item-content-gap: var(--rt-space-2);
     --rt-profile-item-font-size: var(--rt-text-md);
@@ -412,6 +416,7 @@
        вертикали с содержимым. Это же число — горизонтальный отступ строки. */
     --rt-profile-row-inset: var(--rt-space-2);
     --rt-profile-theme-icon-padding: var(--rt-space-2);
+    --rt-profile-theme-icon-radius: var(--rt-radius-full);
 
     /* Габариты панели второго уровня: ширина считается числом колонок, поэтому
        колонка, промежуток и внутренний отступ — токены, из которых панель