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

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/dot-field/CONTEXT.md

@@ -0,0 +1,31 @@
+# `rt-dot-field`
+
+Фон из квадратных точек на сетке 10px, которые медленно плывут облаками. Заполняет
+позиционированного родителя и стоит под его содержимым.
+
+```html
+<rt-dot-field />
+```
+
+Входов и выходов нет. Цвет точек — CSS-свойство `color` хоста.
+
+## Главное, что нужно знать
+
+**Какая клетка горит, решают чистые функции в `rt-dot-field.logic.ts`.** Клетка горит там, где
+медленно движущийся шум проходит порог, а матрица Байера 4x4 сдвигает порог по клеткам: края
+облаков выходят рваными. В центре поля плотность ниже — там стоит карточка.
+
+**Рисует `RtDotFieldPainter`.** Кадр — раз в 90 мс, а не каждый кадр анимации: ступенчатое
+движение — часть облика. Цвет читается из вычисленного `color` холста на каждом кадре, поэтому
+точки идут за темой без кода: назначение темы — `light-dark()` или переопределение по флагу, а
+холст принимает только готовый цвет.
+
+**Запуск — в `afterNextRender`, остановка — при уходе компонента.** На сервере поле ничего не
+рисует.
+
+## Края
+
+- При `prefers-reduced-motion: reduce` рисуется один кадр, следующий не просится.
+- Холст без 2D-контекста (jsdom в спеках) ничего не рисует и `matchMedia` не спрашивает.
+- `viewChild` не принимает поле с решёткой, поэтому `canvas` объявлен `protected`.
+- Родитель задаёт `position: relative`, а своё содержимое ставит выше через `z-index: 1`.

package/src/lib/components/dot-field/rt-dot-field.component.scss

@@ -0,0 +1,20 @@
+@layer rt-kit.components {
+    .rt-dot-field {
+        --rt-dot-field-color: var(--rt-color-action-primary);
+        --rt-dot-field-opacity: 0.85;
+
+        position: absolute;
+        z-index: var(--rt-z-base);
+        display: block;
+        color: var(--rt-dot-field-color);
+        inset: 0;
+        opacity: var(--rt-dot-field-opacity);
+        pointer-events: none;
+
+        &__canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/lib/components/dot-field/stories/component/CONTEXT.md

@@ -0,0 +1,14 @@
+# `TestRtDotFieldComponent`
+
+Обёртка витрины для `rt-dot-field`. В пакет не уезжает.
+
+Рисует сцену так, как поле стоит на странице входа: позиционированный родитель с фоном страницы,
+поле под ним и карточка в центре поверх поля. Позиционированный родитель и карточка — забота
+страницы, поэтому они живут здесь, а не в компоненте.
+
+Вход `part` выбирает историю: `playground` — одна сцена, `presets` — сцена в обоих наборах, `themes` — в светлой и тёмной теме.
+Снимков у историй нет: поле движется.
+
+Стили обёртки лежат в каскадном слое кита под блоком `app-dot-field` на хосте. Контур, скругление и тень
+карточки идут своими свойствами `--rt-dot-field-story-card-*`: проверка токенов не принимает шаг шкалы
+прямо в свойстве.

package/src/lib/components/dot-field/stories/component/test-dot-field.component.scss

@@ -0,0 +1,31 @@
+@layer rt-kit.components {
+    /* Сцена страницы входа: позиционированный родитель поля и карточка поверх него. */
+    .app-dot-field {
+        --rt-dot-field-story-card-border-width: var(--rt-border-width-thin);
+        --rt-dot-field-story-card-radius: var(--rt-radius-md);
+        --rt-dot-field-story-card-shadow: var(--rt-shadow-card);
+
+        &__scene {
+            position: relative;
+            display: flex;
+            overflow: hidden;
+            width: 100%;
+            height: 22rem;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--rt-color-bg-page);
+        }
+
+        &__card {
+            position: relative;
+            z-index: 1;
+            padding: var(--rt-space-10) var(--rt-space-5);
+            border: var(--rt-dot-field-story-card-border-width) solid var(--rt-color-border-default);
+            border-radius: var(--rt-dot-field-story-card-radius);
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-dot-field-story-card-shadow);
+            color: var(--rt-color-text-primary);
+            font-family: var(--rt-font-family-sans);
+        }
+    }
+}

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/field/CONTEXT.md

@@ -25,6 +25,7 @@
 | `errors`           | `Record<validatorKey, string>` | `{}`      |
 | `readonly`         | `boolean`                      | `false`   |
 | `loading`          | `boolean`                      | `false`   |
+| `required`         | `boolean`                      | `false`   |
 | `hideRequiredMark` | `boolean`                      | `false`   |
 | `reserveHintSpace` | `boolean`                      | `false`   |
 
@@ -35,8 +36,8 @@
 
 - выдаёт контролу авто-идентификатор (`rt-field-N`) и связывает с ним `<label for>`, если у
   контрола нет своего `controlId`;
-- рисует «\*», если у контрола есть валидатор обязательности (обнаруживается сам, входа для этого
-  нет);
+- рисует «\*», если у контрола есть валидатор обязательности (обнаруживается сам) или у поля стоит
+  вход `required`;
 - показывает текст ошибки и включает режим плоского чтения.
 
 Всё это работает только для контролов кита. Обычный `<input>` внутрь класть можно, но подписи,
@@ -53,6 +54,21 @@
 
 Ошибка появляется только после касания или правки контрола — это решает сам контрол, а не поле.
 
+## Обязательность без валидатора
+
+Шаблонная форма (`ngModel`) валидатора на контрол не кладёт, и обязательным поле само себя не
+объявит. Для неё у поля есть вход `required`:
+
+```html
+<rt-field label="Имя" required>
+    <rt-input [(ngModel)]="name" />
+</rt-field>
+```
+
+Поле рисует «\*». Тронутое и оставленное пустым краснеет с ошибкой `required`. Форму вход
+недействительной не делает: можно ли записать, решает сама форма. Рядом с валидатором формы вход
+ничего не меняет.
+
 ## Подсказка
 
 - Строковый `[hint]` — обычный случай.

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`.
 
 ## Главное, что нужно знать
 

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

@@ -3,6 +3,9 @@
        Селектор bare `.rt-icon` (класс на host) — им же адресуются и программные
        потребители sprite'а, рисующие иконку без компонента. */
     .rt-icon {
+        --rt-icon-spin-duration: 1s;
+        --rt-icon-spin-duration-reduced: 4s;
+
         display: inline-flex;
         flex-shrink: 0;
         line-height: 0;
@@ -14,7 +17,51 @@
             fill: currentcolor;
         }
 
+        /* Лигатура шрифта Material Symbols для глифа без пары. Шрифт подключает приложение,
+           семью можно переназначить свойством сверху. Размер шрифта — встроенным стилем, он равен
+           ширине значка. До готовности шрифтов лигатура скрыта: иначе на её месте видно слово. */
+        &__glyph {
+            display: block;
+            overflow: hidden;
+            width: 100%;
+            font-family: var(--rt-icon-glyph-font, 'Material Symbols Outlined'), sans-serif;
+            font-feature-settings: 'liga';
+            font-style: normal;
+            font-variation-settings: 'FILL' 0;
+            font-weight: var(--rt-font-weight-regular);
+            letter-spacing: normal;
+            line-height: 1;
+            text-align: center;
+            text-transform: none;
+            white-space: nowrap;
+
+            &--filled {
+                font-variation-settings: 'FILL' 1;
+            }
+
+            &--pending {
+                visibility: hidden;
+            }
+        }
+
+        /* Вращение задаётся анимацией, и на её время она перекрывает поворот значка. */
+        &--spin {
+            animation: rt-icon-spin var(--rt-icon-spin-duration) linear infinite;
+        }
+
         /* Набор рисунков стилями не выбирается: ссылку на символ спрайта CSS подменить нечем.
            Признак набора компонент читает у разметки над собой — см. rt-icon.component.ts. */
     }
+
+    @keyframes rt-icon-spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-icon--spin {
+            animation-duration: var(--rt-icon-spin-duration-reduced);
+        }
+    }
 }

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

@@ -4,19 +4,20 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" variant="danger" size="md" (clicked)="remove()" />
 ```
 
-| вход                                            | тип                                                                         | умолчание                    |
-| ----------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------- |
-| `icon`                                          | `IRtIcon.Name`                                                              | **обязателен**               |
-| `ariaLabel`                                     | `string`                                                                    | **обязателен**               |
-| `variant`                                       | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'success' \| 'warning'` | `'ghost'`                    |
-| `size`                                          | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                     | `'md'`                       |
-| `iconSize`                                      | `IRtIcon.Size \| null`                                                      | `null` → от размера кнопки   |
-| `iconColor`                                     | `IRtIcon.Color`                                                             | `'current'`                  |
-| `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                       | `null` → `md`                |
-| `type`                                          | `'button' \| 'submit'`                                                      | `'button'`                   |
-| `tooltip`                                       | `string`                                                                    | `''` (пусто → подсказки нет) |
-| `tabIndex`                                      | `number`                                                                    | `0`                          |
-| `loading` / `disabled` / `active` / `indicator` | `boolean`                                                                   | `false`                      |
+| вход                                            | тип                                                                           | умолчание                    |
+| ----------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------- |
+| `icon`                                          | `IRtIcon.Name \| null` — нужен он или `glyph`; без обоих показывает вложенное | `null`                       |
+| `glyph`                                         | `string \| null` — имя Material, как `glyph` у `rt-icon`                      | `null`                       |
+| `ariaLabel`                                     | `string`                                                                      | **обязателен**               |
+| `variant`                                       | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'success' \| 'warning'`   | `'ghost'`                    |
+| `size`                                          | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                      | `'md'`                       |
+| `iconSize`                                      | `IRtIcon.Size \| null`                                                        | `null` → от размера кнопки   |
+| `iconColor`                                     | `IRtIcon.Color`                                                               | `'current'`                  |
+| `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                         | `null` → `md`                |
+| `type`                                          | `'button' \| 'submit'`                                                        | `'button'`                   |
+| `tooltip`                                       | `string`                                                                      | `''` (пусто → подсказки нет) |
+| `tabIndex`                                      | `number`                                                                      | `0`                          |
+| `loading` / `disabled` / `active` / `indicator` | `boolean`                                                                     | `false`                      |
 
 | выход     | тип          |
 | --------- | ------------ |
@@ -27,13 +28,19 @@
 **`ariaLabel` обязателен.** У кнопки нет текста, и без подписи она для скринридера безымянна.
 Это единственная причина, по которой вход помечен `required`.
 
-**Кнопку компонент рисует внутри себя**, host остаётся обычным элементом. Диаметр держит
-свойство `--rt-icon-button-size`, и объявляет его модификатор размера на самой кнопке —
-поэтому ни класс на host-е, ни инлайн-стиль на нём диаметра не меняют: собственное
-объявление элемента бьёт унаследованное. Диаметр берётся из общей шкалы высот контролов, а не
-своим рядом: иконочная кнопка стоит в строке рядом с кнопкой и полем и обязана совпадать с ними
-по высоте. Ступени — `sm`, `md`, `lg`, `xl`, `2xl`; значения держит шкала, и здесь они не
-повторяются.
+**Нет ни `icon`, ни `glyph` — кнопка показывает вложенное.** Так в кнопку кита встаёт рисунок,
+которого нет в наборе: размер, форма и состояния остаются кнопочными. Со значком вложенное не
+рисуется.
+
+**Кнопку компонент рисует внутри себя**, host остаётся обычным элементом. Модификаторы размера и
+вида пишут частные шаги `--rt-icon-button-size-step` и `--rt-icon-button-bg-variant`, а кнопка
+читает их под публичными `--rt-icon-button-size` и `--rt-icon-button-bg`. Публичные кнопка не
+объявляет, поэтому значение на теге или выше доходит до неё; заливку под указателем задаёт
+`--rt-icon-button-bg-hover`. Компоненты кита, которым нужен свой размер кнопки, пишут шаг, и
+последнее слово остаётся за приложением. Диаметр берётся из общей шкалы высот контролов: иконочная
+кнопка стоит в строке рядом с кнопкой и полем. Ступени — `2xs` 20px и `xs` 22px со значком 16px,
+затем `sm`, `md`, `lg`, `xl`, `2xl` по шкале. У шкалы нет ступени 22px, поэтому `xs` записан на
+месте.
 
 ## Как этим пользоваться