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

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/styles/tokens.css

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

package/types/rt-tools-ui-kit-v2-accordion.d.ts

@@ -1,30 +1,37 @@
-import * as i0 from '@angular/core';
-import { WritableSignal, InputSignal } from '@angular/core';
-
-declare namespace IRtAccordion {
-    /** Пункт аккордеона: заголовок раскрывает текст под собой. Строки приходят уже переведёнными. */
-    interface Item {
-        readonly title: string;
-        readonly text: string;
-    }
+import * as i0 from "@angular/core";
+import { InputSignal, WritableSignal } from "@angular/core";
+export declare namespace IRtAccordion {
+  /** Пункт аккордеона: заголовок раскрывает текст под собой. Строки приходят уже переведёнными. */
+  interface Item {
+    readonly title: string;
+    readonly text: string;
+  }
 }
-
 /**
  * Список пунктов, у каждого заголовок-кнопка и текст под ней. Нажатие раскрывает или сворачивает
  * пункт, соседи остаются как были. Предмета показа аккордеон не знает: пункты приходят входом уже
  * переведёнными.
  */
-declare class RtAccordionComponent {
-    /** Основа id кнопок и панелей: два аккордеона на одной странице не ссылаются на чужие панели. */
-    protected readonly idBase: string;
-    /** Пришёл новый список — раскрытие начинается заново с пункта из входа. */
-    protected readonly open: WritableSignal<ReadonlySet<number>>;
-    readonly items: InputSignal<readonly IRtAccordion.Item[]>;
-    /** Пункт, раскрытый при входе. `null` оставляет все свёрнутыми. */
-    readonly openIndex: InputSignal<number | null>;
-    protected toggle(index: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RtAccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtAccordionComponent, "rt-accordion", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "openIndex": { "alias": "openIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-export { IRtAccordion, RtAccordionComponent };
+export declare class RtAccordionComponent {
+  /** Основа id кнопок и панелей: два аккордеона на одной странице не ссылаются на чужие панели. */
+  protected readonly idBase: string;
+  /** Пришёл новый список — раскрытие начинается заново с пункта из входа. */
+  protected readonly open: WritableSignal<ReadonlySet<number>>;
+  readonly items: InputSignal<readonly IRtAccordion.Item[]>;
+  /** Пункт, раскрытый при входе. `null` оставляет все свёрнутыми. */
+  readonly openIndex: InputSignal<number | null>;
+  protected toggle(index: number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtAccordionComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAccordionComponent, "rt-accordion", never, {
+    "items": {
+      "alias": "items";
+      "required": true;
+      "isSignal": true;
+    };
+    "openIndex": {
+      "alias": "openIndex";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}