@rt-tools/ui-kit-v2 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/action-bar/CONTEXT.md

@@ -38,6 +38,11 @@
   всегда, и признак значка стоит модификатором — условие в шаблоне было бы оформлением, уехавшим
   в код.
 
+- **Меню действия со списком живёт в оверлее, вне полосы.** Свойства полосы до него не доходят,
+  поэтому `--rt-action-bar-menu-*` читаются с запасным значением и задаются на корне страницы. Без
+  них меню скруглено ступенью `md` и отбрасывает тень карточки.
+- **Цвета, отступы и шрифт полосы — свойства блока** `--rt-action-bar-*` со значениями прежнего вида.
+
 ## Края
 
 - Ноль выбранного показан числом: счётчик, прячущийся на нуле, дёргал бы ширину полосы ровно в

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

@@ -7,12 +7,19 @@
     .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-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 16%, transparent);
+        --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-menu-radius: var(--rt-radius-md);
-        --rt-action-bar-menu-shadow: var(--rt-shadow-card);
 
         // Предел ширины стоит и на самом элементе. Содержащий блок полосы — этот элемент, и
         // без предела он растёт по содержимому: сто процентов считались бы тогда от выросшего,
@@ -22,16 +29,16 @@
         max-width: 100%;
         box-sizing: border-box;
         align-items: center;
-        padding: var(--rt-space-2) var(--rt-space-4);
+        padding: var(--rt-action-bar-padding);
         border-radius: var(--rt-action-bar-radius);
-        background: var(--rt-color-bg-inverse);
+        background: var(--rt-action-bar-bg);
         box-shadow: var(--rt-action-bar-shadow);
-        color: var(--rt-color-text-inverse);
-        font-size: var(--rt-text-sm);
-        gap: var(--rt-space-4);
+        color: var(--rt-action-bar-color);
+        font-size: var(--rt-action-bar-font-size);
+        gap: var(--rt-action-bar-gap);
 
         &__counter {
-            font-weight: var(--rt-font-weight-medium);
+            font-weight: var(--rt-action-bar-counter-weight);
             white-space: nowrap;
         }
 
@@ -47,7 +54,7 @@
         &__action {
             display: flex;
             align-items: center;
-            padding: var(--rt-space-1) var(--rt-space-2);
+            padding: var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);
             border: 0;
             border-radius: var(--rt-action-bar-action-radius);
             background: transparent;
@@ -58,7 +65,7 @@
 
             // Нажатие в этом ките набрано средним начертанием — так набрана кнопка кита, и
             // действие полосы такое же нажатие. Первый кит ставил здесь шестьсот.
-            font-weight: var(--rt-font-weight-medium);
+            font-weight: var(--rt-action-bar-action-weight);
             gap: var(--rt-space-2);
 
             &:hover {
@@ -94,21 +101,28 @@
         // белому, и крестика не было видно ни в одном кадре. Своё свойство блока перебивают —
         // так делает просмотр фотографии, где кнопка стоит на снимке.
         &__close {
-            --rt-icon-button-color: var(--rt-color-text-inverse);
+            --rt-icon-button-color: var(--rt-action-bar-color);
             --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);
 
             flex: none;
             margin-left: auto;
         }
 
+        // Меню рисуется в оверлее, вне полосы: объявление на полосе до него не доходит, и раньше
+        // меню выходило без скругления и тени. Свои свойства меню читает с запасным значением —
+        // объявленное на самом меню перебило бы правило приложения на корне страницы, а только
+        // оттуда свойство до оверлея и доходит.
         &__menu {
+            --rt-action-bar-menu-radius-default: var(--rt-radius-md);
+            --rt-action-bar-menu-shadow-default: var(--rt-shadow-card);
+
             display: flex;
             flex-direction: column;
             padding: var(--rt-space-2);
-            border-radius: var(--rt-action-bar-menu-radius);
-            background: var(--rt-color-bg-surface);
-            box-shadow: var(--rt-action-bar-menu-shadow);
-            color: var(--rt-color-text-primary);
+            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));
         }
 
         // Полоса живёт на нижней кромке, и пальцу нужно место, которое занимают подписи. Решает

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

@@ -25,6 +25,8 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | `width`         | `string \| null`       | `null`      |
 | `ariaLabel`     | `string \| null`       | `null`      |
 | `requestError`  | `unknown`              | `null`      |
+| `trapFocus`     | `boolean`              | `false`     |
+| `pending`       | `boolean`              | `false`     |
 
 | настройка `open()`                       | умолчание                                 |
 | ---------------------------------------- | ----------------------------------------- |
@@ -32,6 +34,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | `position`                               | `'right'`                                 |
 | `closeOnBackdropClick` / `closeOnEscape` | `true`; второе — из настроек кита         |
 | `backdropClass` / `panelClass`           | `rt-aside-backdrop` / `rt-aside-overlay`  |
+| `injector`                               | корневой — уничтожение хозяина закрывает  |
 
 ## Главное, что нужно знать
 
@@ -54,7 +57,12 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 переопределяет своими правилами. Стережёт это `rt-aside-overlay.styles.spec.ts`.
 
 **`disableClose`** на `RtAsideRef` держит панель под кликом по подложке и под Escape — ставится
-самим содержимым, когда в форме есть несохранённое.
+самим содержимым, когда в форме есть несохранённое. Отказанный жест — под `disableClose` или
+выключенный настройкой — приходит в `closeRequests()`: `'escape'` или `'backdrop'`.
+
+**Снятый без `close()` слой завершает `afterClosed()` значением `undefined`.** Переход по адресу
+(`disposeOnNavigation`) и уничтожение хозяина больше не оставляют подписчика ждать. То же у
+`RtDialogRef`.
 
 **Ошибку запроса показывает сама панель.** Вход `requestError` ставит между шапкой и содержимым
 блок `rt-aside-error-box` с кнопкой копирования ошибки; `null` и `undefined` его убирают. Своя

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

@@ -4,19 +4,18 @@
     .rt-aside-footer {
         --rt-aside-footer-border-width: var(--rt-border-width-thin);
 
-        padding-top: var(--rt-aside-inset);
-
-        /* Верхний разделитель не на всю ширину панели: margin отбивает футер по
-           горизонтали на тот же инсет, что и контентная зона, поэтому
-           border-block-start совпадает по краям с контентом. */
-        margin: var(--rt-aside-inset);
+        /* Отступ и поля футера — ручки приложения; без них отступ только сверху, а поля — инсет
+           панели. Верхний разделитель не на всю ширину: поля отбивают футер по горизонтали на тот
+           же инсет, что и контентная зона, и border-block-start совпадает по краям с контентом. */
+        padding: var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);
+        margin: var(--rt-aside-footer-margin, var(--rt-aside-inset));
         border-block-start: var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle);
 
         &__content {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-between;
-            gap: var(--rt-space-sm);
+            justify-content: var(--rt-aside-footer-justify, space-between);
+            gap: var(--rt-aside-footer-gap, var(--rt-space-sm));
         }
 
         &:empty {

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

@@ -9,7 +9,8 @@
         --rt-aside-header-gap: var(--rt-space-sm);
         --rt-aside-header-min-height: auto;
 
-        padding: var(--rt-aside-inset);
+        /* Отступ шапки — ручка приложения; без неё общий инсет панели. */
+        padding: var(--rt-aside-header-inset, var(--rt-aside-inset));
 
         &__content {
             display: flex;
@@ -51,6 +52,9 @@
             font-size: var(--rt-aside-header-title-size);
             font-weight: var(--rt-aside-header-title-weight);
 
+            /* Высота строки — ручка приложения; без неё наследуется, как было. */
+            line-height: var(--rt-aside-header-title-leading, inherit);
+
             /* Ellipsis для длинного заголовка: skeleton-wrapper рендерит `{{ title }}`
                как ng-content внутри inline-flex; чтобы `text-overflow: ellipsis`
                cработал, нужен block-level контейнер с overflow: hidden над текстом. */
@@ -90,6 +94,17 @@
             }
         }
 
+        /* Строка под заголовком на всю ширину шапки — слот `[asideHeaderContent]`. Пустая места
+           не занимает. */
+        &__row {
+            min-width: 0;
+            margin-top: var(--rt-aside-header-gap);
+
+            &:empty {
+                display: none;
+            }
+        }
+
         /* Ряд action-иконок справа от title (отклонить / на доработку / снять с
            публикации и т.п.). Пустой при отсутствии проекции — нулевой ширины. */
         &__actions {

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

@@ -35,6 +35,9 @@
     }
 
     rt-aside .rt-aside {
+        /* Точка отсчёта для слоя ожидания. Рамка и так занимает панель целиком, поэтому прочим
+           потомкам она ничего не меняет. */
+        position: relative;
         display: flex;
         width: var(--rt-aside-width, var(--rt-aside-width-md));
 
@@ -75,6 +78,7 @@
         &__error {
             min-width: 0;
             flex-shrink: 0;
+            margin-block: var(--rt-aside-error-margin-block, 0);
             padding-inline: var(--rt-aside-inset);
         }
 
@@ -87,12 +91,24 @@
             min-height: 0;
             flex: 1 1 auto;
             flex-direction: column;
-            padding: var(--rt-aside-inset);
+            padding: var(--rt-aside-content-inset, var(--rt-aside-inset));
             gap: var(--rt-aside-content-gap);
             overflow-y: auto;
             overscroll-behavior: contain;
         }
 
+        /* Слой ожидания поверх всей панели: шапка, содержимое и футер под ним не нажимаются. Тот же
+           вид, что у слоя дозагрузки таблицы. */
+        &__pending {
+            position: absolute;
+            z-index: var(--rt-z-sticky);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: color-mix(in srgb, var(--rt-color-bg-surface) 60%, transparent);
+            inset: 0;
+        }
+
         &--size--sm {
             width: var(--rt-aside-width, var(--rt-aside-width-sm));
         }

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

@@ -10,17 +10,18 @@
 <a rtButton label="На главную" [routerLink]="'/'"></a>
 ```
 
-| вход          | тип                                                                        | умолчание                     |
-| ------------- | -------------------------------------------------------------------------- | ----------------------------- |
-| `label`       | `string \| null`                                                           | `null`                        |
-| `icon`        | `string \| null` (имя из набора `rt-icon`)                                 | `null`                        |
-| `iconPos`     | `'left' \| 'right'`                                                        | `'left'`                      |
-| `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                   |
-| `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'` |
-| `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`     |
-| `radius`      | `TRtRadius \| null` — шаг общей шкалы                                      | настройки кита или `null`     |
-| `loading`     | `boolean`                                                                  | `false`                       |
-| `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо    |
+| вход           | тип                                                                        | умолчание                          |
+| -------------- | -------------------------------------------------------------------------- | ---------------------------------- |
+| `label`        | `string \| null`                                                           | `null`                             |
+| `icon`         | `string \| null` (имя из набора `rt-icon`)                                 | `null`                             |
+| `iconPos`      | `'left' \| 'right'`                                                        | `'left'`                           |
+| `theme`        | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                        |
+| `appearance`   | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'`      |
+| `size`         | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`          |
+| `radius`       | `TRtRadius \| null` — шаг общей шкалы                                      | настройки кита или `null`          |
+| `loading`      | `boolean`                                                                  | `false`                            |
+| `loadingIcon`  | `string \| null`                                                           | `null` → встроенное кольцо         |
+| `loadingLabel` | `'keep' \| 'hide'`                                                         | `'keep'` — кольцо рядом с подписью |
 
 Своего выхода нет — клик слушается нативным `(click)` на самом элементе.
 

package/src/lib/components/button/rt-button.directive.scss

@@ -91,6 +91,25 @@
             font-size: var(--rt-btn-icon-size);
         }
 
+        /* Лигатура шрифта Material Symbols для имени без пары — размер ей даёт `__icon` рядом.
+           Шрифт подключает приложение, семью можно переназначить свойством сверху. До готовности
+           шрифтов лигатура скрыта: иначе на её месте видно слово. */
+        &__glyph {
+            overflow: hidden;
+            font-family: var(--rt-icon-glyph-font, 'Material Symbols Outlined'), sans-serif;
+            font-feature-settings: 'liga';
+            font-style: normal;
+            font-weight: var(--rt-font-weight-regular);
+            letter-spacing: normal;
+            line-height: 1;
+            text-transform: none;
+            white-space: nowrap;
+
+            &--pending {
+                visibility: hidden;
+            }
+        }
+
         &__label {
             display: inline-flex;
             align-items: center;
@@ -264,6 +283,23 @@
             pointer-events: none;
         }
 
+        /* Подпись спрятана на время загрузки: содержимое гаснет прозрачностью, а не
+           `visibility` — так оно держит ширину и остаётся именем кнопки для скринридера.
+           Загрузчик встаёт поверх по центру. */
+        &--loading-label-hidden {
+            position: relative;
+
+            > :not(.rt-button__loader) {
+                opacity: 0;
+            }
+        }
+
+        &__loader {
+            position: absolute;
+            margin: auto;
+            inset: 0;
+        }
+
         /* Состояние стоит ниже всех вариантов оформления и палитры того же блока.
            Специфичность у них равная, и правила равной силы разбираются порядком в
            файле: отсюда, снизу, отключённость отменяет и заливку, и цвет подписи.

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

@@ -145,7 +145,7 @@
 
         /* Кнопка «назад» — круглая `mat-icon-button` первого кита, как и кнопки подвала панели. */
         .rt-aside-header__back .rt-icon-button {
-            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);
             --rt-icon-button-color: var(--rt-list-settings-icon-color);
             --rt-icon-button-radius: var(--rt-radius-full);
         }
@@ -236,7 +236,7 @@
         }
 
         .rt-data-list-settings-aside__toggle .rt-icon-button {
-            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);
             --rt-icon-button-color: var(--rt-list-settings-icon-color);
         }
     }

package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss

@@ -87,7 +87,7 @@
             --rt-icon-button-color: var(--rt-list-copy-button-color);
 
             .rt-icon-button {
-                --rt-icon-button-size: var(--rt-list-copy-button-size);
+                --rt-icon-button-size-step: var(--rt-list-copy-button-size);
                 --rt-icon-button-radius: var(--rt-list-copy-button-radius);
                 --rt-icon-button-color-hover: var(--rt-color-text-primary);
                 --rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);

package/src/lib/components/data-table/filter-cell/rt-data-table-filter-cell.component.scss

@@ -39,7 +39,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-list-table-button-size);
+            --rt-icon-button-size-step: var(--rt-list-table-button-size);
             --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 

package/src/lib/components/data-table/rt-data-table.component.scss

@@ -225,7 +225,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-list-table-button-size);
+            --rt-icon-button-size-step: var(--rt-list-table-button-size);
             --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 

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

@@ -44,6 +44,15 @@ ref.afterClosed().subscribe((ok?: boolean): void => …);
 `RtDialogRef.disableClose` держит окно и под кликом по подложке, и под Escape — ставится самим
 содержимым, когда закрывать нельзя.
 
+**Фокус служба по умолчанию не трогает.** `trapFocus`, `restoreFocus` и `autoFocus` в настройке
+открытия включают ловушку CDK, возврат фокуса и первый фокус (`'dialog'` — на рамку,
+`'first-tabbable'` — на первый элемент под Tab). Ловушка и первый фокус ставятся после отрисовки
+окна, ловушка уходит вместе с оверлеем.
+
+**Части окна.** `rt-dialog-content` — тело с отступом и прокруткой; `rtDialogHeaderLead` — узел
+перед заголовком шапки; `align` подвала — `start`, `center`, `end` (по умолчанию) или `between`.
+Вид окна задают ручки `--rt-dialog-*` на корне страницы, перечень — на странице Theming.
+
 **Крестик в шапке ищет `RtDialogRef` необязательным инжектом.** Поэтому `rt-dialog-header` можно
 поставить и вне диалога — нажатие просто ничего не сделает, а не упадёт.
 

package/src/lib/components/dialog/content/rt-dialog-content.component.scss

@@ -0,0 +1,20 @@
+@layer rt-kit.components {
+    /* rt-dialog-content — тело модалки. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, как у шапки и подвала: класс блока висит и на хосте, и на
+       узле внутри. Хост боксом не становится — тело должно быть прямым flex-ребёнком рамки, чтобы
+       сжиматься между шапкой и подвалом и прокручиваться само.
+
+       Свойства читаются с запасным значением на месте: окно живёт в оверлее, вне блоков
+       приложения, и приложение задаёт их на корне страницы. */
+    rt-dialog-content {
+        display: contents;
+
+        .rt-dialog-content {
+            overflow: auto;
+            min-height: 0;
+            max-height: var(--rt-dialog-content-max-height, none);
+            flex: 1 1 auto;
+            padding: var(--rt-dialog-content-padding, var(--rt-space-lg));
+        }
+    }
+}

package/src/lib/components/dialog/footer/rt-dialog-footer.component.scss

@@ -11,13 +11,29 @@
     rt-dialog-footer {
         display: contents;
 
+        /* Свойства читаются с запасным значением на месте — окно живёт в оверлее. Разделитель
+           кита лежит в частном `-default`, как у шапки. */
         .rt-dialog-footer {
+            --rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
             display: flex;
             justify-content: flex-end;
-            padding: var(--rt-space-lg);
-            border-block-start: 1px solid var(--rt-color-border-subtle);
+            padding: var(--rt-dialog-footer-padding, var(--rt-space-lg));
+            border-block-start: var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));
             gap: var(--rt-space-sm);
 
+            &--align--start {
+                justify-content: flex-start;
+            }
+
+            &--align--center {
+                justify-content: center;
+            }
+
+            &--align--between {
+                justify-content: space-between;
+            }
+
             &:empty {
                 display: none;
             }

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

@@ -13,18 +13,36 @@
     rt-dialog-header {
         display: contents;
 
+        /* Свойства читаются с запасным значением на месте: окно живёт в оверлее, и приложение
+           задаёт их на корне страницы. Разделитель кита лежит в частном `-default` — проверка
+           токенов не пускает шаг толщины рамки запасным значением напрямую. */
         .rt-dialog-header {
+            --rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: var(--rt-space-lg);
-            border-block-end: 1px solid var(--rt-color-border-subtle);
+            padding: var(--rt-dialog-header-padding, var(--rt-space-lg));
+            border-block-end: var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));
             gap: var(--rt-space-sm);
 
+            /* Место перед заголовком: пустое ничего не занимает и не добавляет промежутка. */
+            &__lead {
+                display: inline-flex;
+                flex-shrink: 0;
+                align-items: center;
+
+                &:empty {
+                    display: none;
+                }
+            }
+
             &__title {
                 margin: 0;
                 color: var(--rt-color-text-primary);
-                font-size: var(--rt-text-xl);
+                font-size: var(--rt-dialog-title-font-size, var(--rt-text-xl));
+                font-weight: var(--rt-dialog-title-weight, var(--rt-font-weight-bold));
+                text-transform: var(--rt-dialog-title-transform, none);
             }
 
             &__close {

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

@@ -3,7 +3,7 @@
 @layer rt-kit.components {
     /* rt-dialog — styled frame модалки поверх CDK Overlay.
        ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
-       Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
+       Видимость и подложку даёт CDK Overlay, ловушку и первый фокус — RtDialogService по флагам. */
 
     /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-dialog`
        висит и на `<rt-dialog>`, и на рамке внутри него, поэтому правила рамки
@@ -37,12 +37,18 @@
         max-height: 90dvh;
         flex-direction: column;
         padding: 0;
-        border: none;
+        border: var(--rt-dialog-border, none);
         border-radius: var(--rt-dialog-radius);
-        background: var(--rt-color-bg-surface);
+        background: var(--rt-dialog-bg, var(--rt-color-bg-surface));
         box-shadow: var(--rt-dialog-shadow);
         color: var(--rt-color-text-primary);
 
+        /* Рамку фокус берёт только по `autoFocus: 'dialog'` — как точку отсчёта для скринридера,
+           а не как элемент управления: кольцо вокруг всего окна читалось бы как выбор окна. */
+        &:focus {
+            outline: none;
+        }
+
         &--size--sm {
             width: var(--rt-dialog-width, var(--rt-dialog-width-sm));
         }

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

@@ -35,6 +35,12 @@
 - Свои кнопки у строки — `<ng-template rtDynamicSelectorRowControls let-item>`, своё название —
   `<ng-template rtDynamicSelectorRowTitle let-item>`. Корзина и ручка перетаскивания остаются китовыми.
 - Приглашение (`invitation`) встаёт вместо полосы кнопок; его кнопка открывает тот же выбор.
+  `listActionsShown = false` убирает сброс и очистку, оставляя кнопку добавления;
+  `removeShown = false` убирает корзину строк.
+- Правки в своём шаблоне строки — `extraChanged`: сброс и очистка включены при прежних ключах и
+  сообщают `listReset` и `listCleared`, значение сброс тогда не трогает.
+- Начальный запрос окна — `searchTerm`, событием поиска он не уходит. Открыто ли окно — сигнал
+  `popupOpen` и выход `popupOpenChange`.
 
 ## Рядом
 

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

@@ -26,8 +26,8 @@
 
 ## Края
 
-- Кнопки действий подогнаны под высоту шапки инлайновым `--rt-icon-button-size: 35px` — это
-  осознанный выход за шкалу размеров.
+- Кнопки действий идут шагом `md`, 40px. Прежний инлайновый `--rt-icon-button-size: 35px` до кнопки
+  не доходил и снят: после того как кнопка-значок научилась брать размер с тега, он уменьшил бы их.
 - Логотип рисуется вариантом `wordmark` высотой 15px; сами файлы даёт приложение
   (см. [`rt-logo`](../logo/CONTEXT.md)).
 

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

@@ -4,15 +4,19 @@
 <rt-icon name="check" size="md" color="current" [rotate]="null" />
 ```
 
-| вход     | тип                                                                                 | умолчание      |
-| -------- | ----------------------------------------------------------------------------------- | -------------- |
-| `name`   | `IRtIcon.Name` — литеральный union из `rt-icon-names.ts`                            | **обязателен** |
-| `size`   | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                     | `'md'`         |
-| `color`  | `'current' \| 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | `'current'`    |
-| `rotate` | `number \| string \| null`                                                          | `null`         |
+| вход     | тип                                                                                 | умолчание   |
+| -------- | ----------------------------------------------------------------------------------- | ----------- |
+| `name`   | `IRtIcon.Name \| null` — литеральный union из `rt-icon-names.ts`; побеждает `glyph` | `null`      |
+| `glyph`  | `string \| null` — имя Material: пара кита или лигатура шрифта                      | `null`      |
+| `size`   | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number` — число в пикселях        | `'md'`      |
+| `color`  | `'current' \| 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | `'current'` |
+| `rotate` | `number \| string \| null`                                                          | `null`      |
+| `fill`   | `boolean` — залитый рисунок материального набора и заливка шрифта лигатуры          | `false`     |
+| `spin`   | `boolean` — вращение, медленнее при просьбе системы о меньшем движении              | `false`     |
 
 Выходов нет. Размер и цвет едут инлайновым стилем host-а (`width`/`height`/`color`), не классом:
-`xs` 12px, `sm` 16px, `md` 20px, `lg` 24px, `xl` 32px, `2xl` 40px.
+`xs` 12px, `sm` 16px, `md` 20px, `lg` 24px, `xl` 32px, `2xl` 40px, или число пикселей. Лигатура
+глифа скрыта, пока шрифты страницы не готовы: её ждёт `RtIconFontService`.
 
 ## Главное, что нужно знать