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

package/src/lib/components/color-palette/picker/rt-color-picker.component.scss

@@ -0,0 +1,161 @@
+@layer rt-kit.components {
+    /* rt-color-picker — выбор своего цвета палитры. ViewEncapsulation.None.
+       Стоит на панели вне палитры, в конце страницы, поэтому свои свойства объявляет на себе: свойства
+       палитры до панели не доходят. Значения по умолчанию — те же шаги, что у палитры.
+       Свойства `--rt-color-picker-*` ставит шаблон: площадь и полосу строит логика палитры, это
+       математика цвета, а не оформление. Здесь стоят их умолчания до первой отрисовки. Материальный
+       набор доходит до панели классом набора, который оверлей кладёт на свою панель. */
+
+    .rt-color-picker {
+        --rt-color-palette-picker-width: var(--rt-size-64);
+        --rt-color-palette-picker-height: auto;
+        --rt-color-palette-area-grow: 0;
+        --rt-color-palette-picker-padding: var(--rt-space-md);
+        --rt-color-palette-picker-gap: var(--rt-space-sm);
+        --rt-color-palette-picker-bg: var(--rt-color-bg-surface);
+        --rt-color-palette-picker-radius: var(--rt-radius-md);
+        --rt-color-palette-picker-shadow: var(--rt-shadow-md);
+        --rt-color-palette-area-height: var(--rt-size-40);
+        --rt-color-palette-area-radius: var(--rt-radius-sm);
+        --rt-color-palette-hue-height: var(--rt-size-3);
+        --rt-color-palette-thumb-size: var(--rt-size-4);
+        --rt-color-palette-thumb-border-width: var(--rt-border-width-thick);
+        --rt-color-palette-thumb-border-color: var(--rt-color-bg-surface);
+        --rt-color-palette-thumb-shadow: var(--rt-shadow-sm);
+        --rt-color-palette-preview-size: var(--rt-control-height-sm);
+        --rt-color-palette-actions-gap: var(--rt-space-xs);
+        --rt-color-palette-hue-radius: var(--rt-radius-full);
+        --rt-color-palette-thumb-radius: var(--rt-radius-full);
+        --rt-color-palette-preview-border-width: var(--rt-border-width-thin);
+        --rt-color-palette-preview-border-color: var(--rt-color-border-default);
+        --rt-color-picker-area: none;
+        --rt-color-picker-spectrum: none;
+        --rt-color-picker-color: transparent;
+        --rt-color-picker-x: 0;
+        --rt-color-picker-y: 0;
+
+        display: flex;
+        width: var(--rt-color-palette-picker-width);
+        height: var(--rt-color-palette-picker-height);
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-color-palette-picker-padding);
+        border-radius: var(--rt-color-palette-picker-radius);
+        background: var(--rt-color-palette-picker-bg);
+        box-shadow: var(--rt-color-palette-picker-shadow);
+        gap: var(--rt-color-palette-picker-gap);
+
+        /* Материальный набор повторяет панель приложения: 256×320 со скруглением 6px, площадь почти
+           прямоугольная и забирает высоту, оставшуюся от полосы и кнопок. Тень — плотная серая
+           подложка `0 8px 16px` приложения. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-color-palette-picker-height: calc(var(--rt-size-64) + var(--rt-size-16));
+            --rt-color-palette-area-grow: 1;
+            --rt-color-palette-picker-radius: var(--rt-radius-ms);
+            --rt-color-palette-picker-shadow: 0 var(--rt-space-2) var(--rt-space-4) 0 var(--rt-mat-neutral-60);
+            --rt-color-palette-area-radius: var(--rt-radius-xs);
+        }
+
+        /* Площадь — три слоя: чёрный снизу, белый слева и чистый оттенок под ними. */
+        &__area {
+            position: relative;
+            height: var(--rt-color-palette-area-height);
+            flex-grow: var(--rt-color-palette-area-grow);
+            border-radius: var(--rt-color-palette-area-radius);
+            background: var(--rt-color-picker-area);
+            cursor: crosshair;
+            touch-action: none;
+        }
+
+        &__hue {
+            position: relative;
+            height: var(--rt-color-palette-hue-height);
+            border-radius: var(--rt-color-palette-hue-radius);
+            background: var(--rt-color-picker-spectrum);
+            cursor: pointer;
+            touch-action: none;
+        }
+
+        &__area,
+        &__hue {
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+        }
+
+        &__area-thumb,
+        &__hue-thumb {
+            position: absolute;
+            width: var(--rt-color-palette-thumb-size);
+            height: var(--rt-color-palette-thumb-size);
+            box-sizing: border-box;
+            border: var(--rt-color-palette-thumb-border-width) solid var(--rt-color-palette-thumb-border-color);
+            border-radius: var(--rt-color-palette-thumb-radius);
+            background: var(--rt-color-picker-color);
+            box-shadow: var(--rt-color-palette-thumb-shadow);
+            pointer-events: none;
+            transform: translate(-50%, -50%);
+        }
+
+        &__area-thumb {
+            top: calc(var(--rt-color-picker-y) * 100%);
+            left: calc(var(--rt-color-picker-x) * 100%);
+        }
+
+        &__hue-thumb {
+            top: 50%;
+            left: calc(var(--rt-color-picker-x) * 100%);
+        }
+
+        &__row {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-color-palette-picker-gap);
+        }
+
+        &__preview {
+            width: var(--rt-color-palette-preview-size);
+            height: var(--rt-color-palette-preview-size);
+            flex-shrink: 0;
+            border: var(--rt-color-palette-preview-border-width) solid var(--rt-color-palette-preview-border-color);
+            border-radius: var(--rt-color-palette-hue-radius);
+            background: var(--rt-color-picker-color);
+        }
+
+        &__hex {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        /* Три поля каналов в ряд поровну, буква канала над своим полем. */
+        &__channels {
+            display: grid;
+            gap: var(--rt-color-palette-picker-gap);
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+
+        &__channel {
+            display: flex;
+            min-width: 0;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+        }
+
+        &__channel-name {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+        }
+
+        &__channel-input {
+            min-width: 0;
+        }
+
+        &__actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--rt-color-palette-actions-gap);
+        }
+    }
+}

package/src/lib/components/color-palette/rt-color-palette.component.scss

@@ -0,0 +1,132 @@
+@layer rt-kit.components {
+    /* rt-color-palette — поле выбора цвета. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте. Образцы — круги цвета
+       образца; выбранный обведён кольцом его же цвета через просвет цвета поверхности.
+       Размеры, зазоры, кольцо и рамки — свойства блока: приложение переназначает их своим правилом
+       на блок, а материальный набор — в этом же файле. */
+
+    .rt-color-palette {
+        --rt-color-palette-swatch-size: var(--rt-size-8);
+        --rt-color-palette-swatch-radius: var(--rt-radius-full);
+        --rt-color-palette-swatch-border-width: var(--rt-border-width-thin);
+        --rt-color-palette-swatch-border-color: var(--rt-color-border-subtle);
+        --rt-color-palette-swatch-scale-hover: 1;
+        --rt-color-palette-gap: var(--rt-space-sm);
+        --rt-color-palette-ring-width: var(--rt-border-width-thick);
+        --rt-color-palette-ring-gap: var(--rt-border-width-thick);
+        --rt-color-palette-ring-gap-color: var(--rt-color-bg-surface);
+        --rt-color-palette-checked-inset: 0px;
+        --rt-color-palette-checked-hollow: 0%;
+        --rt-color-palette-checked-glow: 0px;
+        --rt-color-palette-readonly-size: var(--rt-size-8);
+        --rt-color-palette-readonly-border-width: var(--rt-border-width-thin);
+        --rt-color-palette-empty-border-color: var(--rt-color-border-default);
+        --rt-color-palette-empty-bg: transparent;
+        --rt-color-palette-duration: var(--rt-duration-fast);
+        --rt-color-palette-custom-gap: var(--rt-color-palette-gap);
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--rt-color-palette-custom-gap);
+
+        /* Материальный набор повторяет образцы приложения: круги 30px без рамки через 10px, выбранный —
+           полое кольцо 3px своего цвета со свечением 5px, круг под указателем растёт. Кнопка своего
+           цвета стоит в 16px под сеткой, серая 16/400; свой образец остаётся последним в сетке.
+           Пустое значение только для чтения — белый круг. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-color-palette-custom-gap: var(--rt-space-md);
+            --rt-color-palette-custom-height: var(--rt-control-height-sm);
+            --rt-color-palette-custom-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));
+            --rt-color-palette-swatch-size: calc(var(--rt-size-8) - var(--rt-space-2xs));
+            --rt-color-palette-swatch-border-width: 0px;
+            --rt-color-palette-swatch-scale-hover: 1.2;
+            --rt-color-palette-gap: calc(var(--rt-space-sm) + var(--rt-space-2xs));
+            --rt-color-palette-ring-width: 0px;
+            --rt-color-palette-ring-gap: 0px;
+            --rt-color-palette-checked-inset: var(--rt-border-width-thick);
+            --rt-color-palette-checked-hollow: 100%;
+            --rt-color-palette-checked-glow: calc(var(--rt-space-xs) + 1px);
+            --rt-color-palette-empty-bg: var(--mat-sys-surface-container-lowest, var(--rt-neutral-0));
+        }
+
+        &__swatches {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--rt-color-palette-gap);
+        }
+
+        /* Рамка тонкая и почти прозрачная: белый и светлые образцы иначе сливаются с поверхностью. */
+        &__swatch {
+            width: var(--rt-color-palette-swatch-size);
+            height: var(--rt-color-palette-swatch-size);
+            box-sizing: border-box;
+            flex-shrink: 0;
+            padding: 0;
+            border: var(--rt-color-palette-swatch-border-width) solid var(--rt-color-palette-swatch-border-color);
+            border-radius: var(--rt-color-palette-swatch-radius);
+            background: var(--rt-color-palette-color);
+            cursor: pointer;
+            transition:
+                box-shadow var(--rt-color-palette-duration) ease,
+                transform var(--rt-color-palette-duration) ease;
+
+            &:hover:not(:disabled) {
+                transform: scale(var(--rt-color-palette-swatch-scale-hover));
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width));
+            }
+
+            /* Полое кольцо — заливка, разбавленная до прозрачной долей `checked-hollow`, и вдавленная
+               тень цвета образца. Цвет образца задан на самом образце, поэтому тень собирается здесь,
+               своим свойством образца. */
+            &--checked {
+                --rt-color-palette-checked-shadow:
+                    inset 0 0 0 var(--rt-color-palette-checked-inset) var(--rt-color-palette-color),
+                    0 0 0 var(--rt-color-palette-ring-gap) var(--rt-color-palette-ring-gap-color),
+                    0 0 0 calc(var(--rt-color-palette-ring-gap) + var(--rt-color-palette-ring-width)) var(--rt-color-palette-color),
+                    0 0 var(--rt-color-palette-checked-glow) var(--rt-color-palette-color);
+
+                background: color-mix(in srgb, var(--rt-color-palette-color), transparent var(--rt-color-palette-checked-hollow));
+                box-shadow: var(--rt-color-palette-checked-shadow);
+            }
+
+            &--readonly {
+                width: var(--rt-color-palette-readonly-size);
+                height: var(--rt-color-palette-readonly-size);
+                border-width: var(--rt-color-palette-readonly-border-width);
+                cursor: default;
+
+                &:hover {
+                    transform: none;
+                }
+            }
+
+            &--empty {
+                --rt-color-palette-color: var(--rt-color-palette-empty-bg);
+
+                border-color: var(--rt-color-palette-empty-border-color);
+            }
+        }
+
+        &__custom {
+            flex-shrink: 0;
+        }
+
+        &--disabled &__swatch {
+            cursor: not-allowed;
+            opacity: var(--rt-opacity-disabled);
+        }
+
+        :is(.rt-preset-material, [data-preset='material']) & .rt-color-palette__custom {
+            --rt-btn-height: var(--rt-color-palette-custom-height);
+            --rt-btn-color: var(--rt-color-palette-custom-color);
+            --rt-btn-font-size: var(--rt-text-md);
+
+            font-weight: var(--rt-font-weight-regular);
+        }
+    }
+}

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

@@ -0,0 +1,54 @@
+# `rt-draggable-tree`
+
+```html
+<rt-draggable-tree ariaLabel="Разделы" [canDrop]="canDrop" [(nodes)]="sections" (moved)="save($event)" (picked)="open($event)">
+    <ng-template rtDraggableTreeNode let-node>
+        <span>{{ node.label }}</span>
+        <rt-tag size="sm" [value]="node.description ?? ''" />
+    </ng-template>
+</rt-draggable-tree>
+```
+
+| вход        | тип                                           | умолчание      |
+| ----------- | --------------------------------------------- | -------------- |
+| `nodes`     | `ReadonlyArray<IRtTree.Node<TValue>>` (model) | **обязателен** |
+| `canDrop`   | `IRtDraggableTree.CanDrop<TValue> \| null`    | `null`         |
+| `ariaLabel` | `string \| null`                              | `null`         |
+
+| выход         | тип                                   |
+| ------------- | ------------------------------------- |
+| `nodesChange` | `ReadonlyArray<IRtTree.Node<TValue>>` |
+| `moved`       | `IRtDraggableTree.Moved<TValue>`      |
+| `picked`      | `IRtTree.Node<TValue>`                |
+
+Публичный метод: `handleKeydown(event)`.
+
+## Главное, что нужно знать
+
+**Узел и строки — те же, что у `rt-tree`.** Строки и уровни считает `rtTreeRows`, боковые стрелки —
+`rtTreeSideKey`. Своей модели дерева у компонента нет.
+
+**Узлы не меняются никогда.** Перенос пишет в `nodes` новый массив: ветки на пути к узлу строятся
+заново, остальные объекты остаются прежними. `moved` называет узел, его нового родителя и место
+среди новых соседей.
+
+**Место сброса считает чистая функция** `rtDragPlace` по рамке строки под указателем: верхняя треть —
+перед, нижняя — после, середина — внутрь. Документ дерево не читает: рамки строк берутся у своих
+узлов разметки.
+
+## Края
+
+- Внутрь принимает только контейнер — узел с массивом `children`, даже пустым.
+- Узел не уходит в своё поддерево ни мышью, ни клавишей.
+- Выключенный узел не тащится и не двигается клавишами, но остаётся целью.
+- Alt+↑/↓ — среди соседей, Alt+← — сразу после своей ветки, Alt+→ — последним в контейнер прямо над
+  узлом. Двигаться некуда — клавиша всё равно взята, порядок не меняется.
+- При появлении раскрыты все ветки; свёрнутое человеком остаётся свёрнутым, а ветка, в которую
+  положили узел, раскрывается.
+- Строку тянут за ручку; ручка помечена как оформление, переставлять без мыши — клавишами.
+- Длинная подпись обрезается многоточием, полный текст — в подсказке кита.
+- `emptyIcon` ставит значок кита над подписью пустого дерева.
+- Каждое значение вида строки — свойство `--rt-draggable-tree-*`, объявленное на самой строке: строку
+  в руке CDK уносит из блока. Материальный набор даёт строке высоту 32px вместе с полями
+  (`--rt-draggable-tree-row-box-sizing` — `border-box`), скругление 8px, зазор 5px, тень под
+  указателем, ручку только под указателем и на подсвеченной строке, черты сброса 2px.

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

@@ -0,0 +1,219 @@
+@layer rt-kit.components {
+    /* rt-draggable-tree — дерево с перетаскиванием строк. ViewEncapsulation.None.
+       Каждое значение вида — свойство: приложение перенастраивает строки, ручку, стрелку и черты
+       места сброса, не трогая общих шагов кита. Умолчания — прежние шаги, вид без свойств не меняется. */
+
+    .rt-draggable-tree {
+        --rt-draggable-tree-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-draggable-tree-empty-color: var(--rt-color-text-muted);
+        --rt-draggable-tree-empty-gap: var(--rt-space-sm);
+
+        display: block;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-input-font-size);
+        outline: none;
+
+        &:focus-visible {
+            box-shadow: var(--rt-draggable-tree-focus-shadow);
+        }
+
+        &__list {
+            display: block;
+        }
+
+        &__empty {
+            padding: var(--rt-space-md);
+            color: var(--rt-draggable-tree-empty-color);
+            text-align: center;
+
+            /* Значок приложения стоит над подписью. */
+            &--with-icon {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: var(--rt-draggable-tree-empty-gap);
+            }
+        }
+
+        &__empty-icon {
+            flex-shrink: 0;
+        }
+    }
+
+    /* Строка объявлена вне корня блока: строку в руке CDK выносит в конец страницы, и правило из
+       корня до неё не доходит. Свои свойства она поэтому объявляет на себе. */
+    .rt-draggable-tree__row {
+        --rt-draggable-tree-level: 0;
+        --rt-draggable-tree-indent: var(--rt-space-lg);
+        --rt-draggable-tree-row-padding-block: var(--rt-space-sm);
+        --rt-draggable-tree-row-padding-inline: var(--rt-space-md);
+        --rt-draggable-tree-row-gap: var(--rt-space-sm);
+        --rt-draggable-tree-row-spacing: var(--rt-space-0);
+        --rt-draggable-tree-row-min-height: auto;
+        --rt-draggable-tree-row-box-sizing: content-box;
+        --rt-draggable-tree-row-radius: var(--rt-radius-none);
+        --rt-draggable-tree-row-bg: var(--rt-color-bg-surface);
+        --rt-draggable-tree-row-bg-hover: var(--rt-color-bg-hover);
+        --rt-draggable-tree-row-shadow-hover: none;
+        --rt-draggable-tree-handle-opacity: 1;
+        --rt-draggable-tree-toggle-color: var(--rt-neutral-600);
+        --rt-draggable-tree-mark-width: var(--rt-border-width-thick);
+        --rt-draggable-tree-mark-color: var(--rt-color-action-primary);
+        --rt-draggable-tree-mark-radius: var(--rt-radius-xs);
+        --rt-draggable-tree-preview-shadow: var(--rt-shadow-md);
+
+        position: relative;
+        display: flex;
+        box-sizing: var(--rt-draggable-tree-row-box-sizing);
+        align-items: center;
+        padding: var(--rt-draggable-tree-row-padding-block) var(--rt-draggable-tree-row-padding-inline);
+        border-radius: var(--rt-draggable-tree-row-radius);
+        background: var(--rt-draggable-tree-row-bg);
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-draggable-tree-row-gap);
+        min-block-size: var(--rt-draggable-tree-row-min-height);
+        padding-inline-start: calc(
+            var(--rt-draggable-tree-row-padding-inline) + var(--rt-draggable-tree-indent) * var(--rt-draggable-tree-level)
+        );
+
+        /* Под пальцем строка не ниже контрола кита: высота переназначается свойством, а не правилом. */
+        @media (pointer: coarse) {
+            --rt-draggable-tree-row-min-height: var(--rt-control-height-lg);
+        }
+
+        /* Материальный набор повторяет перетаскиваемое дерево приложения: строка 32px со скруглением
+           8px и 5px до следующей, под указателем поднимается тенью второго уровня; ручка видна только
+           под указателем и на подсвеченной строке; уровень отступает на 46px, стрелка — основного
+           цвета темы, черты места сброса — 2px. Строка в руке уезжает в конец страницы, и признак
+           набора она находит выше — на корне страницы, где его ставит приложение. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-draggable-tree-indent: calc(var(--rt-size-12) - var(--rt-space-0-5));
+            --rt-draggable-tree-row-padding-block: var(--rt-space-1);
+            --rt-draggable-tree-row-padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));
+            --rt-draggable-tree-row-gap: calc(var(--rt-space-2) + var(--rt-space-0-5));
+            --rt-draggable-tree-row-spacing: calc(var(--rt-space-1) + var(--rt-space-0-5) / 2);
+            --rt-draggable-tree-row-min-height: var(--rt-size-8);
+            --rt-draggable-tree-row-box-sizing: border-box;
+            --rt-draggable-tree-row-radius: var(--rt-radius-md);
+            --rt-draggable-tree-row-shadow-hover: var(--rt-mat-shadow-level-2);
+            --rt-draggable-tree-handle-opacity: 0;
+            --rt-draggable-tree-toggle-color: var(--rt-color-action-primary);
+            --rt-draggable-tree-mark-width: var(--rt-border-width-medium);
+
+            @media (pointer: coarse) {
+                --rt-draggable-tree-row-min-height: var(--rt-control-height-lg);
+            }
+        }
+
+        & + & {
+            margin-block-start: var(--rt-draggable-tree-row-spacing);
+        }
+
+        &:hover,
+        &--highlighted {
+            background-color: var(--rt-draggable-tree-row-bg-hover);
+        }
+
+        &:hover {
+            box-shadow: var(--rt-draggable-tree-row-shadow-hover);
+        }
+
+        /* Черта места сброса — полоса у верхнего или нижнего края строки цели. */
+        &--drop-before:before,
+        &--drop-after:after {
+            position: absolute;
+            background: var(--rt-draggable-tree-mark-color);
+            block-size: var(--rt-draggable-tree-mark-width);
+            content: '';
+            inset-inline: 0;
+        }
+
+        &--drop-before:before {
+            inset-block-start: 0;
+        }
+
+        &--drop-after:after {
+            inset-block-end: 0;
+        }
+
+        &--drop-inside {
+            border-radius: var(--rt-draggable-tree-mark-radius);
+            outline: var(--rt-draggable-tree-mark-width) solid var(--rt-draggable-tree-mark-color);
+            outline-offset: calc(var(--rt-draggable-tree-mark-width) * -1);
+        }
+
+        &.cdk-drag-preview {
+            box-shadow: var(--rt-draggable-tree-preview-shadow);
+        }
+
+        &.cdk-drag-placeholder {
+            opacity: 0;
+        }
+
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+
+            &:hover {
+                background-color: transparent;
+                box-shadow: none;
+            }
+        }
+    }
+
+    /* Ручка и стрелка ветки — по ширине значка; у выключенного узла и у листа на их месте пустое
+       место той же ширины, чтобы подписи одного уровня стояли в линию. */
+    .rt-draggable-tree__handle,
+    .rt-draggable-tree__handle-space,
+    .rt-draggable-tree__toggle,
+    .rt-draggable-tree__toggle-space {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        block-size: var(--rt-input-icon-size);
+        inline-size: var(--rt-input-icon-size);
+    }
+
+    /* Ручку можно спрятать до наведения: под указателем, на подсвеченной строке и на строке в руке
+       она видна всегда. */
+    .rt-draggable-tree__handle {
+        cursor: grab;
+        opacity: var(--rt-draggable-tree-handle-opacity);
+
+        &:active {
+            cursor: grabbing;
+        }
+    }
+
+    .rt-draggable-tree__row:is(:hover, .rt-draggable-tree__row--highlighted, .cdk-drag-preview) {
+        --rt-draggable-tree-handle-opacity: 1;
+    }
+
+    /* Цвет стрелки идёт в значок через его же свойство приглушённого цвета. */
+    .rt-draggable-tree__toggle {
+        --rt-icon-color-muted: var(--rt-draggable-tree-toggle-color);
+
+        padding: 0;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+    }
+
+    .rt-draggable-tree__content {
+        display: flex;
+        min-width: 0;
+        flex: 1 1 auto;
+        align-items: center;
+        gap: var(--rt-space-sm);
+    }
+
+    /* Длинная подпись обрезается многоточием, и полный текст даёт подсказка кита. */
+    .rt-draggable-tree__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

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

@@ -0,0 +1,31 @@
+# `rt-hybrid-tree`
+
+```html
+<rt-hybrid-tree [branchMarks]="false" [nodes]="fields" [(value)]="chosenFields" />
+```
+
+Входы и выходы — на странице обзора `Overview.mdx` рядом. Договорённость —
+`docs/specs/ui-kit-v2/hybrid-tree-selector/spec.md`.
+
+## Главное, что нужно знать
+
+**Это `rt-tree` с другим расчётом выбора.** Класс наследует `RtTreeComponent` и берёт его разметку
+и стили: клавиши, поиск, метки и разметка приложения общие. Переопределены четыре точки —
+`rowState`, `selectAllMarkOf`, `selectAllChoice` и `nextChoice`. Правка разметки дерева доходит до
+обоих.
+
+**Группа с `single: true` держит один прямой лист.** Правила в `rt-hybrid-tree.logic.ts`: выбор листа
+снимает соседей по группе, радио группы снимает её или выбирает первый включённый лист.
+«Выбрать всё» и каскад ветки листья такой группы не набирают, а снимают.
+
+**Группа без отметки показывает число выбранного под собой.** Число считается по всем листьям,
+выключенные тоже.
+
+## Края
+
+- Выбор всегда новый массив, узлы не правятся.
+- Группа «один лист» внутри другой такой же рисуется обычной веткой: её листья — радио только своей
+  группы.
+- В режимах `single` и `none` правила групп «один лист» не действуют, дерево ведёт себя как `rt-tree`.
+- Атрибуты хоста повторены у наследника, и с ними `disabled`: выключенное дерево уходит из порядка Tab
+  и несёт `aria-disabled`, как `rt-tree`.

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

@@ -0,0 +1,25 @@
+# `rt-hybrid-tree-selector`
+
+```html
+<rt-hybrid-tree-selector confirm expandControls [nodes]="fields" [(value)]="chosenFields" />
+```
+
+Входы и выходы — на странице обзора `Overview.mdx` рядом. Договорённость —
+`docs/specs/ui-kit-v2/hybrid-tree-selector/spec.md`.
+
+## Главное, что нужно знать
+
+**Это `rt-tree-selector` с `rt-hybrid-tree` внутри.** Класс наследует `RtTreeSelectorComponent`, берёт
+его разметку и стили и ставит флаг `hybrid`. По флагу разметка селектора рисует гибридное дерево
+вместо обычного. Панель, черновик, «Применить», поиск и кнопки строки общие: правка селектора
+доходит до обоих.
+
+**Поиск не теряет признак `single`.** Отбор по словам копирует отобранную ветку целиком, со всеми
+полями узла.
+
+## Края
+
+- Всё, что сказано в `CONTEXT.md` селектора, верно и здесь.
+- Место под поиском, шаблоны строк `rtTreeNodeEnd` и `rtTreeNodeMeta`, флаг `matchHighlight` и
+  значок пустоты доходят до гибридного дерева так же, как у селектора до `rt-tree`. В списке
+  `imports` стоит `ModDirective`: шаблон селектора ставит модификатор пустому состоянию.

package/src/lib/components/icon-button/CONTEXT.md

@@ -16,6 +16,7 @@
 | `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                         | `null` → `md`                |
 | `type`                                          | `'button' \| 'submit'`                                                        | `'button'`                   |
 | `tooltip`                                       | `string`                                                                      | `''` (пусто → подсказки нет) |
+| `tooltipHideOnClick`                            | `boolean` — `false` у переключателя: подсказка остаётся после клика           | `true`                       |
 | `tabIndex`                                      | `number`                                                                      | `0`                          |
 | `loading` / `disabled` / `active` / `indicator` | `boolean`                                                                     | `false`                      |
 
@@ -46,6 +47,8 @@
 
 - `loading` = `disabled` плюс кольцо вместо иконки. Клик в этом состоянии наружу не уходит.
 - `active` превращается в `aria-pressed="true"` — для кнопок-переключателей.
+- `expanded` пишет `aria-expanded` кнопке, которая открывает панель, — так делает `rt-speed-menu`.
+  Без входа атрибута нет вовсе.
 - `tabIndex="-1"` оставляет клик мышью, но убирает кнопку из таб-порядка: так сделаны
   вспомогательные крестики внутри полей.
 - `iconSize` нужен, когда крупная кнопка должна остаться крупной (в неё целятся пальцем), а