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

package/src/lib/components/action-bar/rt-action-bar.component.scss

@@ -4,22 +4,36 @@
     /* rt-action-bar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-action-bar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
+    /* Свойства полосы приложение задаёт на любом предке, хоть на корне страницы: на самой полосе
+       объявлены только умолчания с приставкой `-default`, а читается свойство с запасным значением.
+       Объявленное на полосе под публичным именем перебило бы правило предка — так было до RT-2619. */
     .rt-action-bar {
-        --rt-action-bar-radius: var(--rt-radius-lg);
-        --rt-action-bar-shadow: var(--rt-shadow-card);
-        --rt-action-bar-bg: var(--rt-color-bg-inverse);
-        --rt-action-bar-color: var(--rt-color-text-inverse);
-        --rt-action-bar-padding: var(--rt-space-2) var(--rt-space-4);
-        --rt-action-bar-gap: var(--rt-space-4);
-        --rt-action-bar-font-size: var(--rt-text-sm);
-        --rt-action-bar-counter-weight: var(--rt-font-weight-medium);
-        --rt-action-bar-action-radius: var(--rt-radius-md);
-        --rt-action-bar-action-padding-block: var(--rt-space-1);
-        --rt-action-bar-action-padding-inline: var(--rt-space-2);
-        --rt-action-bar-action-weight: var(--rt-font-weight-medium);
-        --rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-action-bar-color) 16%, transparent);
-        --rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);
-        --rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-action-bar-radius-default: var(--rt-radius-lg);
+        --rt-action-bar-shadow-default: var(--rt-shadow-card);
+        --rt-action-bar-bg-default: var(--rt-color-bg-inverse);
+        --rt-action-bar-color-default: var(--rt-color-text-inverse);
+        --rt-action-bar-padding-default: var(--rt-space-2) var(--rt-space-4);
+        --rt-action-bar-gap-default: var(--rt-space-4);
+        --rt-action-bar-font-size-default: var(--rt-text-sm);
+        --rt-action-bar-counter-weight-default: var(--rt-font-weight-medium);
+        --rt-action-bar-counter-font-size-default: 1em;
+        --rt-action-bar-action-radius-default: var(--rt-radius-md);
+        --rt-action-bar-action-padding-block-default: var(--rt-space-1);
+        --rt-action-bar-action-padding-inline-default: var(--rt-space-2);
+        --rt-action-bar-action-weight-default: var(--rt-font-weight-medium);
+        --rt-action-bar-action-height-default: auto;
+        --rt-action-bar-action-font-size-default: 1em;
+        --rt-action-bar-action-bg-hover-default: color-mix(
+            in srgb,
+            var(--rt-action-bar-color, var(--rt-action-bar-color-default)) 16%,
+            transparent
+        );
+        --rt-action-bar-action-color-danger-default: var(--rt-color-action-danger-on-surface);
+        --rt-action-bar-action-focus-shadow-default: var(--rt-shadow-focus-ring);
+        --rt-action-bar-icon-size-default: var(--rt-size-4);
+        --rt-action-bar-icon-gap-default: var(--rt-space-2);
+        --rt-action-bar-close-size-default: var(--rt-control-height-sm);
+        --rt-action-bar-close-icon-size-default: var(--rt-size-4);
 
         // Предел ширины стоит и на самом элементе. Содержащий блок полосы — этот элемент, и
         // без предела он растёт по содержимому: сто процентов считались бы тогда от выросшего,
@@ -29,16 +43,17 @@
         max-width: 100%;
         box-sizing: border-box;
         align-items: center;
-        padding: var(--rt-action-bar-padding);
-        border-radius: var(--rt-action-bar-radius);
-        background: var(--rt-action-bar-bg);
-        box-shadow: var(--rt-action-bar-shadow);
-        color: var(--rt-action-bar-color);
-        font-size: var(--rt-action-bar-font-size);
-        gap: var(--rt-action-bar-gap);
+        padding: var(--rt-action-bar-padding, var(--rt-action-bar-padding-default));
+        border-radius: var(--rt-action-bar-radius, var(--rt-action-bar-radius-default));
+        background: var(--rt-action-bar-bg, var(--rt-action-bar-bg-default));
+        box-shadow: var(--rt-action-bar-shadow, var(--rt-action-bar-shadow-default));
+        color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));
+        font-size: var(--rt-action-bar-font-size, var(--rt-action-bar-font-size-default));
+        gap: var(--rt-action-bar-gap, var(--rt-action-bar-gap-default));
 
         &__counter {
-            font-weight: var(--rt-action-bar-counter-weight);
+            font-size: var(--rt-action-bar-counter-font-size, var(--rt-action-bar-counter-font-size-default));
+            font-weight: var(--rt-action-bar-counter-weight, var(--rt-action-bar-counter-weight-default));
             white-space: nowrap;
         }
 
@@ -53,36 +68,46 @@
 
         &__action {
             display: flex;
+            min-height: var(--rt-action-bar-action-height, var(--rt-action-bar-action-height-default));
+            box-sizing: border-box;
             align-items: center;
-            padding: var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);
+            padding: var(--rt-action-bar-action-padding-block, var(--rt-action-bar-action-padding-block-default))
+                var(--rt-action-bar-action-padding-inline, var(--rt-action-bar-action-padding-inline-default));
             border: 0;
-            border-radius: var(--rt-action-bar-action-radius);
+            border-radius: var(--rt-action-bar-action-radius, var(--rt-action-bar-action-radius-default));
             background: transparent;
             color: inherit;
             cursor: pointer;
             font-family: inherit;
-            font-size: inherit;
+            font-size: var(--rt-action-bar-action-font-size, var(--rt-action-bar-action-font-size-default));
 
             // Нажатие в этом ките набрано средним начертанием — так набрана кнопка кита, и
             // действие полосы такое же нажатие. Первый кит ставил здесь шестьсот.
-            font-weight: var(--rt-action-bar-action-weight);
-            gap: var(--rt-space-2);
+            font-weight: var(--rt-action-bar-action-weight, var(--rt-action-bar-action-weight-default));
+            gap: var(--rt-action-bar-icon-gap, var(--rt-action-bar-icon-gap-default));
 
             &:hover {
-                background: var(--rt-action-bar-action-bg-hover);
+                background: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));
             }
 
             &:focus-visible {
-                box-shadow: var(--rt-action-bar-action-focus-shadow);
+                box-shadow: var(--rt-action-bar-action-focus-shadow, var(--rt-action-bar-action-focus-shadow-default));
                 outline: none;
             }
 
             &--danger {
-                color: var(--rt-action-bar-action-color-danger);
+                color: var(--rt-action-bar-action-color-danger, var(--rt-action-bar-action-color-danger-default));
             }
         }
 
+        // Значок ставит свой размер строкой стиля, и свойство полосы берёт верх через min и max —
+        // так же делает заглушка пустого состояния. Глиф шрифта Material без пары в наборе кита
+        // держит кегль своего шага: его значок пишет строкой стиля на самом глифе.
         &__action-icon {
+            min-width: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            max-width: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            min-height: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            max-height: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
             flex: none;
         }
 
@@ -101,11 +126,25 @@
         // белому, и крестика не было видно ни в одном кадре. Своё свойство блока перебивают —
         // так делает просмотр фотографии, где кнопка стоит на снимке.
         &__close {
-            --rt-icon-button-color: var(--rt-action-bar-color);
-            --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);
+            --rt-icon-button-color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));
+            --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));
 
             flex: none;
             margin-left: auto;
+
+            // Размер кнопки — шаг самой иконочной кнопки: `--rt-icon-button-size` — ручка приложения,
+            // и кит её не объявляет. Шаг объявлен на внутренней кнопке правилом из двух классов,
+            // поэтому здесь три: хост с классом элемента и внутренняя кнопка.
+            &.rt-icon-button .rt-icon-button {
+                --rt-icon-button-size-step: var(--rt-action-bar-close-size, var(--rt-action-bar-close-size-default));
+            }
+
+            .rt-icon {
+                min-width: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                max-width: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                min-height: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                max-height: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+            }
         }
 
         // Меню рисуется в оверлее, вне полосы: объявление на полосе до него не доходит, и раньше
@@ -115,14 +154,23 @@
         &__menu {
             --rt-action-bar-menu-radius-default: var(--rt-radius-md);
             --rt-action-bar-menu-shadow-default: var(--rt-shadow-card);
+            --rt-action-bar-menu-padding-default: var(--rt-space-2);
+            --rt-action-bar-menu-gap-default: 0;
+            --rt-action-bar-menu-item-font-size-default: var(--rt-text-sm);
 
             display: flex;
             flex-direction: column;
-            padding: var(--rt-space-2);
+            padding: var(--rt-action-bar-menu-padding, var(--rt-action-bar-menu-padding-default));
             border-radius: var(--rt-action-bar-menu-radius, var(--rt-action-bar-menu-radius-default));
             background: var(--rt-action-bar-menu-bg, var(--rt-color-bg-surface));
             box-shadow: var(--rt-action-bar-menu-shadow, var(--rt-action-bar-menu-shadow-default));
             color: var(--rt-action-bar-menu-color, var(--rt-color-text-primary));
+            gap: var(--rt-action-bar-menu-gap, var(--rt-action-bar-menu-gap-default));
+
+            // Кегль пункта у пункта меню свой; меню полосы переназначает его правилом большей силы.
+            .rt-menu-item {
+                font-size: var(--rt-action-bar-menu-item-font-size, var(--rt-action-bar-menu-item-font-size-default));
+            }
         }
 
         // Полоса живёт на нижней кромке, и пальцу нужно место, которое занимают подписи. Решает

package/src/lib/components/ai-run-status/CONTEXT.md

@@ -0,0 +1,41 @@
+# `rt-ai-run-status`
+
+```html
+<rt-ai-run-status [state]="run.state" [label]="run.label" [meta]="run.meta" [steps]="run.steps" [(expanded)]="stepsOpen" />
+```
+
+| вход       | тип                           | умолчание                     |
+| ---------- | ----------------------------- | ----------------------------- |
+| `state`    | `IRtAiRunStatus.State`        | обязателен                    |
+| `label`    | `string`                      | обязателен                    |
+| `meta`     | `string`                      | `''` — не рисуется            |
+| `steps`    | `readonly IRtTimeline.Step[]` | `[]` — строку нельзя раскрыть |
+| `expanded` | `boolean` (`model`)           | `false`                       |
+
+Выход: `expandedChange` — от `model` раскрытия.
+
+Спек — `docs/specs/ui-kit-v2/ai-run-status/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Строка презентационная.** Состояние, подпись, мета и шаги приходят готовыми: разбор потока
+событий модели и подсчёт времени — дело приложения.
+
+**С шагами вся строка — кнопка.** Без шагов кнопки нет, строка объявляется `role="status"`.
+`aria-expanded` и `aria-controls` стоят на кнопке, `id` — на ленте шагов.
+
+## Края
+
+- Блик подписи — градиент, обрезанный по тексту, и он бежит анимацией. Перелив из четырёх цветов
+  (`-shimmer-to`, `-shimmer-2…4`) между приглушённым текстом; проход 2,4 с: при 500 мс блик
+  мелькал, владелец попросил медленнее и разноцветный. При
+  `prefers-reduced-motion` анимации нет, подпись стоит цветом `--rt-ai-run-status-shimmer-from`.
+- Крутилка переливается теми же цветами: метка анимирует `color` (`rt-ai-run-status-hue`), а
+  спиннеру внутри задан `--rt-spinner-progress-color: currentcolor`. Это публичный токен
+  спиннера, его ключевые кадры не трогаются. Без анимации крутилка стоит `-shimmer-to`.
+- `expanded` при пустом `steps` ничего не раскрывает: список рисуется только при шагах.
+
+## Рядом
+
+- [`rt-timeline`](../timeline/CONTEXT.md) — лента шагов под строкой.
+- [`rt-spinner`](../spinner/CONTEXT.md) — крутилка состояния `running`.

package/src/lib/components/ai-run-status/rt-ai-run-status.component.scss

@@ -0,0 +1,158 @@
+@layer rt-kit.components {
+    /* rt-ai-run-status — строка хода работы ассистента. ViewEncapsulation.None.
+       Класс блока висит и на хосте, и на корне шаблона, поэтому правила вложены в хост. */
+
+    rt-ai-run-status {
+        display: block;
+
+        .rt-ai-run-status {
+            --rt-ai-run-status-radius: var(--rt-radius-sm);
+            --rt-ai-run-status-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-ai-run-status-shimmer-duration: 2.4s;
+            --rt-ai-run-status-shimmer-from: var(--rt-color-text-muted);
+            --rt-ai-run-status-shimmer-to: var(--rt-color-action-primary-on-surface);
+            --rt-ai-run-status-shimmer-2: var(--rt-info-500);
+            --rt-ai-run-status-shimmer-3: var(--rt-success-400);
+            --rt-ai-run-status-shimmer-4: var(--rt-amber-400);
+
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+
+            &__row {
+                display: inline-flex;
+                align-items: center;
+                align-self: flex-start;
+                padding: var(--rt-space-2xs) 0;
+                border: 0;
+                border-radius: var(--rt-ai-run-status-radius);
+                margin: 0;
+                background: transparent;
+                color: inherit;
+                font: inherit;
+                gap: var(--rt-space-sm);
+                text-align: start;
+            }
+
+            button.rt-ai-run-status__row {
+                cursor: pointer;
+
+                &:focus-visible {
+                    box-shadow: var(--rt-ai-run-status-focus-shadow);
+                    outline: 2px solid transparent;
+                    outline-offset: 2px;
+                }
+
+                &:hover .rt-ai-run-status__chevron {
+                    color: var(--rt-color-text-primary);
+                }
+            }
+
+            &__mark {
+                display: inline-flex;
+                flex: none;
+                align-items: center;
+                justify-content: center;
+                block-size: 16px;
+                inline-size: 16px;
+
+                .rt-spinner {
+                    --rt-spinner-progress-color: currentcolor;
+                }
+            }
+
+            &--state--running .rt-ai-run-status__mark {
+                animation: rt-ai-run-status-hue var(--rt-ai-run-status-shimmer-duration) linear infinite;
+                color: var(--rt-ai-run-status-shimmer-to);
+            }
+
+            &__label {
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                line-height: var(--rt-leading-snug);
+
+                &--state--running {
+                    animation: rt-ai-run-status-shimmer var(--rt-ai-run-status-shimmer-duration) linear infinite;
+                    background: linear-gradient(
+                        90deg,
+                        var(--rt-ai-run-status-shimmer-from) 0%,
+                        var(--rt-ai-run-status-shimmer-to) 20%,
+                        var(--rt-ai-run-status-shimmer-2) 35%,
+                        var(--rt-ai-run-status-shimmer-3) 50%,
+                        var(--rt-ai-run-status-shimmer-4) 65%,
+                        var(--rt-ai-run-status-shimmer-from) 80%,
+                        var(--rt-ai-run-status-shimmer-from) 100%
+                    );
+                    background-clip: text;
+                    background-size: 200% 100%;
+                    color: transparent;
+                }
+
+                &--state--stopped {
+                    color: var(--rt-color-text-muted);
+                }
+
+                &--state--failed {
+                    color: var(--rt-color-action-danger-on-surface);
+                }
+            }
+
+            &__meta {
+                flex: none;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                line-height: var(--rt-leading-snug);
+            }
+
+            &__chevron {
+                flex: none;
+                color: var(--rt-color-text-muted);
+            }
+
+            &__steps {
+                padding-inline-start: var(--rt-space-2xs);
+            }
+        }
+    }
+
+    @keyframes rt-ai-run-status-shimmer {
+        0% {
+            background-position: 100% 0;
+        }
+
+        100% {
+            background-position: -100% 0;
+        }
+    }
+
+    @keyframes rt-ai-run-status-hue {
+        0%,
+        100% {
+            color: var(--rt-ai-run-status-shimmer-to);
+        }
+
+        25% {
+            color: var(--rt-ai-run-status-shimmer-2);
+        }
+
+        50% {
+            color: var(--rt-ai-run-status-shimmer-3);
+        }
+
+        75% {
+            color: var(--rt-ai-run-status-shimmer-4);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-ai-run-status--state--running .rt-ai-run-status__mark {
+            animation: none;
+        }
+
+        .rt-ai-run-status__label--state--running {
+            animation: none;
+            background: none;
+            color: var(--rt-ai-run-status-shimmer-from);
+        }
+    }
+}

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

@@ -35,6 +35,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | `closeOnBackdropClick` / `closeOnEscape` | `true`; второе — из настроек кита         |
 | `backdropClass` / `panelClass`           | `rt-aside-backdrop` / `rt-aside-overlay`  |
 | `injector`                               | корневой — уничтожение хозяина закрывает  |
+| `disposeOnNavigation`                    | `true` — переход по адресу снимает        |
 
 ## Главное, что нужно знать
 

package/src/lib/components/aside/header/rt-aside-header.component.scss

@@ -2,12 +2,15 @@
     /* rt-aside-header — заголовок side-sheet'а. ViewEncapsulation.None.
        Селекторы префиксованы `.rt-aside-header`. */
 
+    /* Свойства шапки — рукоятки приложения: каждое читается как `--rt-aside-header-*` с любого
+       предка (панели оверлея, своего контейнера), а на самом блоке стоит только умолчание под
+       `-default`. Значение, объявленное на блоке под публичным именем, перебило бы предка. */
     .rt-aside-header {
-        --rt-aside-header-title-size: var(--rt-text-xl);
-        --rt-aside-header-title-weight: var(--rt-font-weight-bold);
-        --rt-aside-header-subtitle-size: var(--rt-text-sm);
-        --rt-aside-header-gap: var(--rt-space-sm);
-        --rt-aside-header-min-height: auto;
+        --rt-aside-header-title-size-default: var(--rt-text-xl);
+        --rt-aside-header-title-weight-default: var(--rt-font-weight-bold);
+        --rt-aside-header-subtitle-size-default: var(--rt-text-sm);
+        --rt-aside-header-gap-default: var(--rt-space-sm);
+        --rt-aside-header-min-height-default: auto;
 
         /* Отступ шапки — ручка приложения; без неё общий инсет панели. */
         padding: var(--rt-aside-header-inset, var(--rt-aside-inset));
@@ -15,15 +18,28 @@
         &__content {
             display: flex;
             min-width: 0;
-            min-height: var(--rt-aside-header-min-height);
+            min-height: var(--rt-aside-header-min-height, var(--rt-aside-header-min-height-default));
             align-items: center;
-            gap: var(--rt-aside-header-gap);
+            gap: var(--rt-aside-header-gap, var(--rt-aside-header-gap-default));
         }
 
+        /* Кнопка «назад» — шаг `sm` кнопки и значка. Размеры кнопки и значка — рукоятки
+           `--rt-aside-header-back-size` и `--rt-aside-header-back-icon-size` с любого предка; без них
+           стоят те же шаги. Значок читает свою ступень `sm` на этом узле: ступень, заданная
+           приложением выше, сюда не доходит — у кнопки «назад» своя рукоятка. */
         &__back {
+            --rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));
+
             flex-shrink: 0;
         }
 
+        /* Шаг кнопки переназначается на её внутреннем узле: модификатор размера объявляет его там
+           же. Вес селектора выше модификатора, а публичная `--rt-icon-button-size` по-прежнему
+           важнее шага. */
+        & &__back .rt-icon-button {
+            --rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm));
+        }
+
         /* Колонка overline + title. flex/min-width живут здесь, чтобы ellipsis
            у title работал и в двухстрочном варианте. */
         &__heading {
@@ -49,8 +65,8 @@
             min-width: 0;
             margin: 0;
             color: var(--rt-color-text-primary);
-            font-size: var(--rt-aside-header-title-size);
-            font-weight: var(--rt-aside-header-title-weight);
+            font-size: var(--rt-aside-header-title-size, var(--rt-aside-header-title-size-default));
+            font-weight: var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));
 
             /* Высота строки — ручка приложения; без неё наследуется, как было. */
             line-height: var(--rt-aside-header-title-leading, inherit);
@@ -71,7 +87,7 @@
         &__subtitle {
             margin: 0;
             color: var(--rt-color-text-muted);
-            font-size: var(--rt-aside-header-subtitle-size);
+            font-size: var(--rt-aside-header-subtitle-size, var(--rt-aside-header-subtitle-size-default));
             line-height: var(--rt-leading-snug);
         }
 
@@ -98,7 +114,7 @@
            не занимает. */
         &__row {
             min-width: 0;
-            margin-top: var(--rt-aside-header-gap);
+            margin-top: var(--rt-aside-header-gap, var(--rt-aside-header-gap-default));
 
             &:empty {
                 display: none;

package/src/lib/components/copy-value/CONTEXT.md

@@ -0,0 +1,31 @@
+# `rt-copy-value`
+
+```html
+<rt-copy-value label="Reference" copyLabel="Copy reference" [value]="error.referenceId" />
+```
+
+| вход        | тип      | умолчание                    |
+| ----------- | -------- | ---------------------------- |
+| `value`     | `string` | обязателен                   |
+| `label`     | `string` | `''` — не рисуется           |
+| `copyLabel` | `string` | `''` → переведённое `uiCopy` |
+
+Выход: `copiedValue` — значение, ушедшее в буфер.
+
+Спек — `docs/specs/ui-kit-v2/copy-value/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Копируется ровно `value`.** Отображаемое и копируемое совпадают: значение стоит на подложке
+целиком, длинное обрезается многоточием, но в буфер уходит полностью.
+
+## Края
+
+- После нажатия подпись кнопки две секунды «Copied», иконка — галочка; таймер гасится при
+  уничтожении.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- [`rt-copy-cell`](../table/copy-cell/rt-copy-cell.component.ts) — копирование в ячейке таблицы,
+  с кнопкой по наведению и проекцией содержимого.

package/src/lib/components/copy-value/rt-copy-value.component.scss

@@ -0,0 +1,39 @@
+@layer rt-kit.components {
+    /* rt-copy-value — значение с кнопкой копирования. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте. */
+
+    .rt-copy-value {
+        --rt-copy-value-radius: var(--rt-radius-sm);
+
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rt-space-sm);
+        max-inline-size: 100%;
+        min-inline-size: 0;
+
+        &__label {
+            flex: none;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__value {
+            overflow: hidden;
+            padding: var(--rt-space-2xs) var(--rt-space-xs);
+            border-radius: var(--rt-copy-value-radius);
+            background: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+            line-height: var(--rt-leading-snug);
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__button {
+            flex: none;
+        }
+    }
+}

package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss

@@ -136,11 +136,11 @@
         --rt-data-list-settings-aside-header-height: 96px;
 
         .rt-aside-header {
-            --rt-aside-header-title-size: var(--rt-text-2xl);
-            --rt-aside-header-title-weight: var(--rt-font-weight-semibold);
-            --rt-aside-header-subtitle-size: var(--rt-text-md);
-            --rt-aside-header-gap: var(--rt-space-md);
-            --rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height);
+            --rt-aside-header-title-size-default: var(--rt-text-2xl);
+            --rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);
+            --rt-aside-header-subtitle-size-default: var(--rt-text-md);
+            --rt-aside-header-gap-default: var(--rt-space-md);
+            --rt-aside-header-min-height-default: var(--rt-data-list-settings-aside-header-height);
         }
 
         /* Кнопка «назад» — круглая `mat-icon-button` первого кита, как и кнопки подвала панели. */

package/src/lib/components/data-table/CONTEXT.md

@@ -100,3 +100,8 @@
 - Выбор по одной рисует радиокнопку, и флажка страницы в шапке нет.
 - Отметки, названные заранее (`selectedEntitiesKeys`), ставятся один раз — к первым непустым
   строкам; позже присланный набор уже ничего не переписывает.
+
+## Ячейка отбора: фокус после сброса
+
+`rt-data-table-filter-cell.onClear` после сброса даты или списка переводит фокус в поле рядом.
+Крестик без значения выключается, и выключенная кнопка роняла фокус на `body`.

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

@@ -24,6 +24,12 @@
 **Отметки всплывающего окна уходят только по «Применить».** «Отмена», `Escape` и щелчок мимо
 снимают их, значение остаётся прежним.
 
+**Вид приглашения, очистки, поиска и пустого результата задаёт приложение входами.** Значок и вид
+кнопки приглашения — `invitationButtonIcon` и `invitationButtonAppearance`, значок очистки —
+`clearIcon`, вид поля поиска окна — `searchAppearance`, подпись пустого результата —
+`emptyResultsText`; у поля строк вид поля новой строки — `fieldAppearance`. Цвет кнопки «Добавить»
+— ручка `--rt-dynamic-selector-list-add-color`: кнопку проецируют оба поля, и вид у неё разный.
+
 **Поле строк срезает пробелы по краям и не добавляет пустое и повторное.** Повтор сравнивается
 точно, с учётом регистра.
 
@@ -37,6 +43,18 @@
 - Приглашение (`invitation`) встаёт вместо полосы кнопок; его кнопка открывает тот же выбор.
   `listActionsShown = false` убирает сброс и очистку, оставляя кнопку добавления;
   `removeShown = false` убирает корзину строк.
+  Рисунок приглашения — значок кита `invitationIcon` или имя Material `invitationGlyph`; при обоих
+  рисуется значок кита.
+- Подпись поля — обёртка `rt-field` с `label`, как у любого поля кита. У поля строк она ведёт к полю
+  новой строки, пока оно открыто.
+- Выбранное без формы — вход `chosenEntities`: непустой список с другими ключами становится и
+  значением, и списком для «Сбросить»; эхо выбора от родителя ничего не меняет.
+- `titleWrap="false"` — название строки одной строкой с многоточием и подсказкой при обрезке.
+- Подпись самого поля новой строки — вход `fieldLabel`: поле встаёт в `rt-field` с этой подписью.
+  Без подписи обёртки нет, и поле стоит как раньше.
+- Вид кнопки приглашения, значок очистки, вид поиска, подпись пустого результата и перенос названия
+  строки приложение задаёт один раз — `provideRtKit({ components: { dynamicSelector: { … } } })`.
+  Вход на месте сильнее, без настроек остаются умолчания кита.
 - Правки в своём шаблоне строки — `extraChanged`: сброс и очистка включены при прежних ключах и
   сообщают `listReset` и `listCleared`, значение сброс тогда не трогает.
 - Начальный запрос окна — `searchTerm`, событием поиска он не уходит. Открыто ли окно — сигнал