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

package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss

@@ -0,0 +1,170 @@
+@use '../../../../styles/breakpoints' as bp;
+
+@layer rt-kit.components {
+    /* rt-dynamic-selector-popup — панель выбора в CDK Overlay. ViewEncapsulation.None.
+       Размер и вид сняты с кадров первого кита: 20rem на 30rem, поверхность с рамкой и тенью. */
+
+    .rt-dynamic-selector-popup {
+        --rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);
+        --rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));
+        --rt-dynamic-selector-popup-radius: var(--rt-radius-md);
+        --rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);
+        --rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);
+
+        display: flex;
+        width: var(--rt-dynamic-selector-popup-width);
+        max-width: calc(100vw - var(--rt-space-md) * 2);
+        max-height: var(--rt-dynamic-selector-popup-max-height);
+        box-sizing: border-box;
+        flex-direction: column;
+        border: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-dynamic-selector-popup-radius);
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-dynamic-selector-popup-shadow);
+        color: var(--rt-color-text-primary);
+        gap: var(--rt-space-sm);
+        padding-block: var(--rt-space-md);
+
+        &__head {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+            padding-inline: var(--rt-space-md);
+        }
+
+        &__search {
+            display: block;
+        }
+
+        &__controls {
+            display: flex;
+            flex-direction: column;
+            border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+
+            /* Строка переключателя и «Выбрать все» — два разных решения; при зазоре 2xs флажок
+               прилипал к переключателю и читался его частью. */
+            gap: var(--rt-space-sm);
+            padding-block-end: var(--rt-space-sm);
+        }
+
+        &__multi {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-2xs) var(--rt-space-sm);
+        }
+
+        &__multi-label {
+            font-size: var(--rt-text-sm);
+        }
+
+        &__multi-hint-icon {
+            color: var(--rt-color-text-muted);
+        }
+
+        // На широком экране подсказка стоит значком со всплывающей подсказкой, на узком — текстом.
+        &__multi-hint {
+            display: none;
+            flex-basis: 100%;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+        }
+
+        @media (width <= #{bp.$rt-bp-lg}) {
+            &__multi-hint {
+                display: block;
+            }
+
+            &__multi-hint-icon {
+                display: none;
+            }
+        }
+
+        &__select-all {
+            display: block;
+        }
+
+        &__state {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-md);
+        }
+
+        &__list {
+            display: flex;
+            min-height: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            overflow-y: auto;
+            padding-inline: var(--rt-space-md);
+        }
+
+        // Шаг строки снят с первого кита: флажок и по отступу сверху и снизу — около 36px.
+        &__row {
+            display: block;
+            padding-block: var(--rt-space-sm);
+
+            &--separated {
+                border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+                margin-block-end: var(--rt-space-2xs);
+                padding-block-end: var(--rt-space-sm);
+            }
+        }
+
+        // Длинная подпись строки переносится: обрезка спрятала бы, какую запись человек отмечает.
+        &__option {
+            display: block;
+            overflow-wrap: anywhere;
+        }
+
+        &__sentinel {
+            min-height: var(--rt-size-1);
+        }
+
+        &__fetching {
+            display: flex;
+            justify-content: center;
+            padding-block: var(--rt-space-sm);
+        }
+
+        &__empty {
+            display: block;
+            padding-inline: var(--rt-space-md);
+        }
+
+        &__foot {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            border-top: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-sm);
+            padding-block-start: var(--rt-space-sm);
+            padding-inline: var(--rt-space-md);
+
+            &--nav {
+                justify-content: space-between;
+            }
+        }
+
+        // Длинное название ссылки обрезается многоточием, а целиком читается во всплывающей подсказке.
+        &__nav {
+            overflow: hidden;
+            min-width: 0;
+            color: var(--rt-color-text-link);
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &:hover {
+                color: var(--rt-color-text-link-hover);
+            }
+        }
+
+        &__actions {
+            display: flex;
+            flex: 0 0 auto;
+            gap: var(--rt-space-sm);
+        }
+    }
+}

package/src/lib/components/dynamic-selector/rt-dynamic-selector.component.scss

@@ -0,0 +1,23 @@
+@layer rt-kit.components {
+    /* rt-dynamic-selector — поле со списком выбранного. ViewEncapsulation.None.
+       Строки и полосу рисует список семьи; здесь — место под приглашение и пустое состояние. */
+
+    .rt-dynamic-selector {
+        display: block;
+        width: 100%;
+
+        &__content {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        &__invitation {
+            display: block;
+        }
+
+        &__nothing {
+            display: block;
+        }
+    }
+}

package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector-matrix.component.scss

@@ -0,0 +1,8 @@
+@layer rt-kit.components {
+    .app-dynamic-selector-matrix__theme-cell {
+        display: flex;
+        width: 22rem;
+        flex-direction: column;
+        gap: var(--rt-space-4);
+    }
+}

package/src/lib/components/dynamic-selector/stories/component/test-dynamic-selector.component.scss

@@ -0,0 +1,7 @@
+@layer rt-kit.components {
+    /* Окно выбора ложится под поле: запас снизу держит его в пределах окна витрины. */
+    .app-dynamic-selector__slot {
+        width: 30rem;
+        padding-bottom: calc(var(--rt-size-64) * 2);
+    }
+}

package/src/lib/components/empty-state/CONTEXT.md

@@ -12,6 +12,7 @@
 | `icon`        | `IRtIcon.Name \| null` | `null`    |
 | `title`       | `string`               | `''`      |
 | `description` | `string \| null`       | `null`    |
+| `framed`      | `boolean`              | `false`   |
 
 Выходов нет. Два слота проекции:
 
@@ -28,6 +29,8 @@
 
 - Иконка рисуется крупной (`xl`, 32px) и приглушённой: это заглушка, а не аффорданс. Кликабельным
   должно быть проецируемое действие.
+- `framed` обводит заглушку пунктиром: так она читается как зона, куда бросают файл. Сам приём
+  файла даёт обёртка [`rt-file-drop`](../file-drop/CONTEXT.md), заглушка только рисует приглашение.
 - Слот действия существует всегда, даже пустым; прячет его `:empty` в стилях.
 - Размеры и подложка — свойства блока: `--rt-empty-state-icon-wrap-size`,
   `--rt-empty-state-icon-wrap-bg`, `--rt-empty-state-icon-size`, `--rt-empty-state-title-size`,

package/src/lib/components/empty-state/rt-empty-state.component.scss

@@ -13,6 +13,9 @@
         --rt-empty-state-icon-size: var(--rt-size-8);
         --rt-empty-state-title-size: var(--rt-text-md);
         --rt-empty-state-title-weight: var(--rt-font-weight-medium);
+        --rt-empty-state-frame-width: var(--rt-border-width-medium);
+        --rt-empty-state-frame-color: var(--rt-color-border-strong);
+        --rt-empty-state-frame-radius: var(--rt-radius-lg);
 
         display: flex;
         flex-direction: column;
@@ -22,6 +25,12 @@
         gap: var(--rt-space-sm);
         text-align: center;
 
+        /* Рамка зоны загрузки: пунктир говорит «сюда можно бросить файл», как у первого кита. */
+        &--framed {
+            border: var(--rt-empty-state-frame-width) dashed var(--rt-empty-state-frame-color);
+            border-radius: var(--rt-empty-state-frame-radius);
+        }
+
         /* Слот иллюстрации (проецируемая графика вместо иконки) — скрыт, если пуст. */
         &__illustration {
             &:empty {

package/src/lib/components/expansion-panel/CONTEXT.md

@@ -0,0 +1,45 @@
+# `rt-expansion-panel`
+
+Раскрывающаяся панель: заголовок-кнопка во всю ширину с шевроном и тело под ним. Замена панели
+раскрытия Material из первого кита.
+
+```html
+<rt-expansion-panel appearance="plain" [(expanded)]="open">
+    <span>Заголовок</span>
+    <ng-template rtExpansionPanelContent>Тело</ng-template>
+</rt-expansion-panel>
+```
+
+| вход         | тип                            | умолчание |
+| ------------ | ------------------------------ | --------- |
+| `expanded`   | `boolean` (model)              | `false`   |
+| `disabled`   | `boolean`                      | `false`   |
+| `hideToggle` | `boolean`                      | `false`   |
+| `appearance` | `IRtExpansionPanel.Appearance` | `'card'`  |
+| `headerId`   | `string \| null`               | `null`    |
+| `ariaLabel`  | `string \| null`               | `null`    |
+
+Выход — `expandedChange`, половина двусторонней привязки.
+
+## Главное, что нужно знать
+
+**Панель пишет в `expanded` сама.** Владелец, который решает раскрытие по своим правилам, слушает
+`expandedChange` и держит значение в своём сигнале. Отказ владельца изменить значение панель не
+видит: привязка не передаёт то же самое значение второй раз. Такой владелец держит раскрытие в
+`linkedSignal` и привязывает его в обе стороны — так делает блок избранного бокового меню.
+
+**Тело двух видов.** `<ng-template rtExpansionPanelContent>` создаётся при раскрытии и уходит после
+сворачивания, узел с `rtExpansionPanelBody` создаётся сразу. Всё прочее содержимое — заголовок.
+
+**Движение — средствами CSS.** Высота тела идёт от нуля через `@starting-style` и
+`interpolate-size`, уход доигрывает класс `rt-expansion-panel__body--leaving` через `animate.leave`.
+Браузер без `interpolate-size` показывает тело сразу.
+
+## Края
+
+- Размеры заголовка и тела — свойства `--rt-expansion-panel-*`. Владелец переназначает их правилом
+  двух классов на хосте: одного класса мало, он равен по силе объявлению самой панели на том же
+  узле. Вложенная панель объявляет свои значения заново и чужих не наследует.
+- `headerId` нужен владельцу, который нажимает заголовок по своему номеру: боковое меню ищет строки
+  по id.
+- Id тела берётся из счётчика на экземпляр: две панели на странице не ссылаются на чужое тело.

package/src/lib/components/expansion-panel/rt-expansion-panel.component.scss

@@ -0,0 +1,134 @@
+@layer rt-kit.components {
+    /* rt-expansion-panel — раскрывающаяся панель. ViewEncapsulation.None.
+       Host несёт класс блока и модификаторы вида и состояния. Все размеры заголовка и тела — свои
+       свойства блока: владелец, рисующий панель строкой своего списка, переназначает их на хосте
+       правилом большей силы, а не переписывает правила панели. */
+
+    .rt-expansion-panel {
+        --rt-expansion-panel-radius: var(--rt-radius-md);
+        --rt-expansion-panel-shadow: var(--rt-shadow-sm);
+        --rt-expansion-panel-duration: var(--rt-duration-base);
+        --rt-expansion-panel-bg: var(--rt-color-bg-surface);
+        --rt-expansion-panel-header-min-height: var(--rt-control-height-lg);
+        --rt-expansion-panel-header-padding-block: var(--rt-space-sm);
+        --rt-expansion-panel-header-padding-start: var(--rt-space-lg);
+        --rt-expansion-panel-header-padding-end: var(--rt-space-md);
+        --rt-expansion-panel-header-gap: var(--rt-space-sm);
+        --rt-expansion-panel-header-radius: var(--rt-radius-md);
+        --rt-expansion-panel-header-bg: transparent;
+        --rt-expansion-panel-header-hover-bg: var(--rt-color-bg-hover);
+        --rt-expansion-panel-header-color: var(--rt-color-text-primary);
+        --rt-expansion-panel-header-font-size: var(--rt-text-md);
+        --rt-expansion-panel-header-font-weight: var(--rt-font-weight-medium);
+        --rt-expansion-panel-chevron-size: var(--rt-control-height-sm);
+        --rt-expansion-panel-chevron-color: var(--rt-color-text-muted);
+        --rt-expansion-panel-body-padding-inline: var(--rt-space-lg);
+        --rt-expansion-panel-body-padding-end: var(--rt-space-md);
+
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: var(--rt-expansion-panel-radius);
+        background: var(--rt-expansion-panel-bg);
+        box-shadow: var(--rt-expansion-panel-shadow);
+        color: var(--rt-color-text-primary);
+
+        /* Панель внутри списка: ни фона, ни тени, ни отступов — строки рисует список. */
+        &--plain {
+            --rt-expansion-panel-radius: var(--rt-radius-none);
+            --rt-expansion-panel-shadow: var(--rt-shadow-none);
+            --rt-expansion-panel-bg: transparent;
+            --rt-expansion-panel-header-min-height: var(--rt-control-height-md);
+            --rt-expansion-panel-header-padding-start: var(--rt-space-0);
+            --rt-expansion-panel-header-padding-end: var(--rt-space-0);
+            --rt-expansion-panel-header-font-size: var(--rt-text-sm);
+            --rt-expansion-panel-header-font-weight: var(--rt-font-weight-regular);
+            --rt-expansion-panel-body-padding-inline: var(--rt-space-0);
+            --rt-expansion-panel-body-padding-end: var(--rt-space-0);
+        }
+
+        /* Заголовок во всю ширину: нажатие принимает вся строка, а не один шеврон. */
+        &__header {
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-expansion-panel-header-min-height);
+            box-sizing: border-box;
+            align-items: center;
+            border: 0;
+            border-radius: var(--rt-expansion-panel-header-radius);
+            background: var(--rt-expansion-panel-header-bg);
+            color: var(--rt-expansion-panel-header-color);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-expansion-panel-header-font-size);
+            font-weight: var(--rt-expansion-panel-header-font-weight);
+            gap: var(--rt-expansion-panel-header-gap);
+            padding-block: var(--rt-expansion-panel-header-padding-block);
+            padding-inline: var(--rt-expansion-panel-header-padding-start) var(--rt-expansion-panel-header-padding-end);
+            text-align: start;
+            transition: background-color var(--rt-expansion-panel-duration) ease;
+
+            &:hover:not(:disabled) {
+                background: var(--rt-expansion-panel-header-hover-bg);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-focus-ring-width) * -1);
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                cursor: default;
+            }
+        }
+
+        /* Шеврон у правого края, в столбце ширины маленькой кнопки: соседние кнопки строк списка
+           встают с ним на одну вертикаль. */
+        &__chevron {
+            display: inline-flex;
+            flex-shrink: 0;
+            justify-content: center;
+            color: var(--rt-expansion-panel-chevron-color);
+            inline-size: var(--rt-expansion-panel-chevron-size);
+            margin-inline-start: auto;
+            transition: transform var(--rt-expansion-panel-duration) ease;
+
+            &--open {
+                transform: rotate(180deg);
+            }
+        }
+
+        /* Раскрытие и сворачивание — высотой от нуля до своей и обратно. Высота «auto» становится
+           величиной, между которой можно вести движение, через `interpolate-size`; браузер без него
+           показывает и убирает тело сразу. */
+        &__body {
+            overflow: hidden;
+            height: auto;
+            interpolate-size: allow-keywords;
+            padding-block-end: var(--rt-expansion-panel-body-padding-end);
+            padding-inline: var(--rt-expansion-panel-body-padding-inline);
+            transition:
+                height var(--rt-expansion-panel-duration) ease,
+                padding-block-end var(--rt-expansion-panel-duration) ease;
+
+            @starting-style {
+                height: 0;
+                padding-block-end: 0;
+            }
+
+            &--leaving {
+                height: 0;
+                padding-block-end: 0;
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                transition: none;
+            }
+        }
+
+        &--disabled &__chevron {
+            color: var(--rt-color-text-disabled);
+        }
+    }
+}

package/src/lib/components/expansion-panel/stories/component/test-expansion-panel-matrix.component.scss

@@ -0,0 +1,31 @@
+@layer rt-kit.components {
+    /* Заголовок и тело, которые витрина кладёт в панель: подпись режется многоточием — так её
+       оформляет владелец панели, сама панель содержимого заголовка не знает. */
+    .app-expansion-panel-demo {
+        &__stack {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        &__icon {
+            flex-shrink: 0;
+            color: var(--rt-color-text-muted);
+        }
+
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__text {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            line-height: var(--rt-leading-normal);
+        }
+    }
+}

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` записан на
+месте.
 
 ## Как этим пользоваться