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

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

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

@@ -9,11 +9,6 @@
     rt-icon-button {
         display: inline-flex;
 
-        /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя.
-           Ряд берётся из общей шкалы высот контролов: иконочная кнопка стоит в строке
-           рядом с кнопкой и полем и обязана совпадать с ними по высоте. */
-        --rt-icon-button-size: var(--rt-control-height-md);
-
         /* Цвет иконки объявлен здесь, а не приходил бы запасным значением на месте
            обращения: запасное переживает смену темы — переопределять нечего. Своё
            свойство блока перебивает тот, кому нужен другой цвет: так делает просмотр
@@ -38,20 +33,26 @@
             --rt-icon-button-color-hover: var(--rt-icon-button-color);
             --rt-icon-button-transition-duration: var(--rt-duration-fast);
 
-            /* Заливка покоя — своим свойством: неактивная кнопка берёт из неё долю, которую задаёт
-               набор оформления. */
-            --rt-icon-button-bg: transparent;
+            /* Размер и заливка покоя — частные шаги: их пишут модификаторы размера и вида, а кнопка
+               читает их под публичными `--rt-icon-button-size` и `--rt-icon-button-bg`. Публичные
+               кнопка не объявляет, поэтому значение на теге `<rt-icon-button>` или выше доходит до
+               неё; раньше модификатор объявлял публичное свойство на самой кнопке и перебивал тег.
+               Компоненты кита, которым нужен свой размер кнопки, тоже пишут шаг, а не публичное
+               свойство: последнее слово остаётся за приложением.
+               Ряд размеров — из общей шкалы высот контролов: кнопка стоит в строке рядом с полем. */
+            --rt-icon-button-bg-variant: transparent;
+            --rt-icon-button-size-step: var(--rt-control-height-md);
 
             position: relative;
             display: inline-flex;
-            width: var(--rt-icon-button-size);
-            height: var(--rt-icon-button-size);
+            width: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
+            height: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
             align-items: center;
             justify-content: center;
             padding: 0;
             border: 0;
             border-radius: var(--rt-icon-button-radius);
-            background-color: var(--rt-icon-button-bg);
+            background-color: var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
@@ -59,24 +60,34 @@
                 background-color var(--rt-icon-button-transition-duration) ease,
                 box-shadow var(--rt-icon-button-transition-duration) ease;
 
+            /* Два шага меньше `sm` — для плотных строк. У шкалы нет ступени 22px, и ступень ради одной
+               кнопки легла бы мимо её сетки в 4px: шаг `xs` записан на месте. */
+            &--2xs {
+                --rt-icon-button-size-step: var(--rt-size-5);
+            }
+
+            &--xs {
+                --rt-icon-button-size-step: 22px;
+            }
+
             &--sm {
-                --rt-icon-button-size: var(--rt-control-height-sm);
+                --rt-icon-button-size-step: var(--rt-control-height-sm);
             }
 
             &--md {
-                --rt-icon-button-size: var(--rt-control-height-md);
+                --rt-icon-button-size-step: var(--rt-control-height-md);
             }
 
             &--lg {
-                --rt-icon-button-size: var(--rt-control-height-lg);
+                --rt-icon-button-size-step: var(--rt-control-height-lg);
             }
 
             &--xl {
-                --rt-icon-button-size: var(--rt-control-height-xl);
+                --rt-icon-button-size-step: var(--rt-control-height-xl);
             }
 
             &--2xl {
-                --rt-icon-button-size: var(--rt-control-height-2xl);
+                --rt-icon-button-size-step: var(--rt-control-height-2xl);
             }
 
             /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
@@ -85,9 +96,11 @@
                 box-shadow: var(--rt-icon-button-shadow-hover);
             }
 
+            /* Заливка под указателем читается под ручкой `--rt-icon-button-bg-hover`; без неё каждый
+               вид берёт свою, как прежде. */
             &--ghost {
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                     color: var(--rt-icon-button-color-hover);
                 }
 
@@ -97,22 +110,22 @@
             }
 
             &--primary {
-                --rt-icon-button-bg: var(--rt-color-action-primary);
+                --rt-icon-button-bg-variant: var(--rt-color-action-primary);
 
                 color: var(--rt-color-action-on-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-color-action-primary-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover));
                 }
             }
 
             &--secondary {
-                --rt-icon-button-bg: var(--rt-color-bg-surface-subtle);
+                --rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);
 
                 color: var(--rt-color-text-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
             }
 
@@ -120,7 +133,7 @@
                 color: var(--rt-color-state-danger);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -132,7 +145,7 @@
                 color: var(--rt-color-state-success);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -144,7 +157,7 @@
                 color: var(--rt-color-state-warning);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -157,7 +170,11 @@
                встроенным стилем, и правилом его не перебить. Заливка остаётся долей заливки покоя: по умолчанию
                вся, и свой вид прежний. */
             &:disabled {
-                background-color: color-mix(in srgb, var(--rt-icon-button-bg) var(--rt-icon-button-disabled-fill), transparent);
+                background-color: color-mix(
+                    in srgb,
+                    var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),
+                    transparent
+                );
                 cursor: not-allowed;
                 opacity: var(--rt-icon-button-disabled-opacity);
 
@@ -172,6 +189,15 @@
                 outline-offset: 2px;
             }
 
+            /* Своё содержимое вместо значка по имени: встаёт по центру и берёт цвет кнопки. */
+            &__content {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                color: inherit;
+                line-height: 1;
+            }
+
             &__spinner {
                 --rt-icon-button-spin-duration: 1s;
 

package/src/lib/components/image-upload/CONTEXT.md

@@ -12,20 +12,23 @@
     (imageChanged)="upload($event)" />
 ```
 
-| вход            | тип                                 | умолчание                    |
-| --------------- | ----------------------------------- | ---------------------------- |
-| `imageUrl`      | `string \| null`                    | `null`                       |
-| `fileName`      | `string`                            | `'image'`                    |
-| `tooltip`       | `string`                            | `''` → `uiImageUploadChange` |
-| `downloadable`  | `boolean`                           | `false`                      |
-| `downloadShape` | `'circle' \| 'square'`              | `'circle'`                   |
-| `autoApply`     | `boolean`                           | `false`                      |
-| `loading`       | `boolean`                           | `false`                      |
-| `disabled`      | `boolean`                           | `false`                      |
-| `ratio`         | `number \| null`                    | `null`                       |
-| `round`         | `boolean`                           | `false`                      |
-| `format`        | `'png' \| 'jpeg' \| 'webp' \| null` | `null`                       |
-| `quality`       | `number`                            | `92`                         |
+| вход               | тип                                                     | умолчание                    |
+| ------------------ | ------------------------------------------------------- | ---------------------------- |
+| `imageUrl`         | `string \| null`                                        | `null`                       |
+| `fileName`         | `string`                                                | `'image'`                    |
+| `tooltip`          | `string`                                                | `''` → `uiImageUploadChange` |
+| `downloadable`     | `boolean`                                               | `false`                      |
+| `downloadShape`    | `'circle' \| 'square'`                                  | `'circle'`                   |
+| `downloadIconSize` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| null` | `null` → по размеру кнопки   |
+| `chooseAppearance` | `'filled' \| 'outlined' \| 'text'`                      | `'outlined'`                 |
+| `chooseIcon`       | `string \| null`                                        | `'ico-upload'`               |
+| `autoApply`        | `boolean`                                               | `false`                      |
+| `loading`          | `boolean`                                               | `false`                      |
+| `disabled`         | `boolean`                                               | `false`                      |
+| `ratio`            | `number \| null`                                        | `null`                       |
+| `round`            | `boolean`                                               | `false`                      |
+| `format`           | `'png' \| 'jpeg' \| 'webp' \| null`                     | `null`                       |
+| `quality`          | `number`                                                | `92`                         |
 
 Выходы: `imageChanged` (`File`), `downloaded`.
 
@@ -48,7 +51,9 @@
 Свойства блока: `--rt-image-upload-image-max-height`, `--rt-image-upload-image-radius`,
 `--rt-image-upload-hover-opacity`, `--rt-image-upload-focus-shadow`,
 `--rt-image-upload-download-overhang`, `--rt-image-upload-download-bg`,
-`--rt-image-upload-download-radius`. Они объявлены на самом блоке, поэтому переопределяются
+`--rt-image-upload-download-radius`, `--rt-image-upload-download-size` (размер кнопки скачивания,
+по умолчанию шаг `--rt-control-height-md`), `--rt-image-upload-download-blur` (размытие под ней,
+8px). Они объявлены на самом блоке, поэтому переопределяются
 правилом на `.rt-image-upload`, а не на `:root`. Зона загрузки берёт свойства
 `--rt-empty-state-frame-*`, обрезка — `--rt-image-cropper-*`.
 

package/src/lib/components/image-upload/rt-image-upload.component.scss

@@ -10,6 +10,8 @@
         --rt-image-upload-download-overhang: var(--rt-space-sm);
         --rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);
         --rt-image-upload-download-radius: var(--rt-radius-md);
+        --rt-image-upload-download-blur: 8px;
+        --rt-image-upload-download-size: var(--rt-control-height-md);
 
         display: block;
         width: 100%;
@@ -36,6 +38,9 @@
             max-width: 100%;
             box-sizing: border-box;
             padding: var(--rt-image-upload-download-overhang);
+
+            /* На верх строки: на базовой линии под картинкой оставался зазор под нижние выносные. */
+            vertical-align: top;
         }
 
         &__download {
@@ -44,13 +49,20 @@
             right: 0;
             border-radius: var(--rt-image-upload-download-radius);
             /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-            -webkit-backdrop-filter: blur(8px);
-            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(var(--rt-image-upload-download-blur));
+            backdrop-filter: blur(var(--rt-image-upload-download-blur));
             background: var(--rt-image-upload-download-bg);
 
             &--round {
                 --rt-image-upload-download-radius: var(--rt-radius-full);
             }
+
+            /* Размер отдаётся кнопке её частным шагом, а не публичным `--rt-icon-button-size`: так
+               последнее слово остаётся за приложением. Шаг кнопка объявляет на корне своего
+               шаблона, а не на хосте, поэтому правило адресует тот же корень. */
+            .rt-icon-button {
+                --rt-icon-button-size-step: var(--rt-image-upload-download-size);
+            }
         }
 
         &__image {

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

@@ -25,7 +25,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-pagination-arrow-size);
+            --rt-icon-button-size-step: var(--rt-pagination-arrow-size);
             --rt-icon-button-radius: var(--rt-pagination-arrow-radius);
             --rt-icon-button-shadow: var(--rt-pagination-arrow-shadow);
         }

package/src/lib/components/scroll-area/CONTEXT.md

@@ -46,6 +46,8 @@
 - Нажатие на значок уводит тело к самому низу и в содержимое под значком не уходит.
 - Полоса не ловит указатель — нажатия по списку под ней проходят насквозь; значок ловит сам.
 - Перекрасить растушёвку можно свойством `--rt-scroll-area-hint-color` на блоке.
+- Отступы и фоны шапки, тела и подвала — свойства блока `--rt-scroll-area-*-padding` и
+  `--rt-scroll-area-*-bg`; фоны по умолчанию прозрачные.
 
 ## Договорённость
 

package/src/lib/components/scroll-area/rt-scroll-area.component.scss

@@ -1,8 +1,22 @@
 @layer rt-kit.components {
+    /* Фон хоста — с нулевой специфичностью. Хост области часто сам элемент чужого блока со своим
+       фоном (столбец бокового меню), и правило той же силы перебивало его порядком в файле:
+       столбец терял подложку. Под `:where` любое правило по классу сильнее. */
+    :where(.rt-scroll-area) {
+        background: var(--rt-scroll-area-bg);
+    }
+
     .rt-scroll-area {
         --rt-scroll-area-hint-height: var(--rt-space-10);
         --rt-scroll-area-hint-color: var(--rt-color-bg-surface);
         --rt-scroll-area-hint-radius: var(--rt-radius-full);
+        --rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);
+        --rt-scroll-area-body-padding: var(--rt-space-4);
+        --rt-scroll-area-footer-padding: var(--rt-space-4);
+        --rt-scroll-area-bg: transparent;
+        --rt-scroll-area-header-bg: transparent;
+        --rt-scroll-area-body-bg: transparent;
+        --rt-scroll-area-footer-bg: transparent;
 
         // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а
         // полоса обязана дойти до содержимого подвала.
@@ -15,7 +29,8 @@
 
         &__header {
             flex: 0 0 auto;
-            padding: var(--rt-space-2) var(--rt-space-4);
+            padding: var(--rt-scroll-area-header-padding);
+            background: var(--rt-scroll-area-header-bg);
         }
 
         &__body {
@@ -23,13 +38,15 @@
             overflow: auto;
             flex: 1 1 auto;
             flex-direction: column;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-body-padding);
+            background: var(--rt-scroll-area-body-bg);
             min-block-size: 0;
         }
 
         &__footer {
             flex: 0 0 auto;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-footer-padding);
+            background: var(--rt-scroll-area-footer-bg);
         }
 
         // Полоса стоит поверх стыка тела и подвала и не ловит указатель: под ней живой список,

package/src/lib/components/side-menu/CONTEXT.md

@@ -17,10 +17,15 @@
 
 **Режим и ширину подменю хранит сервис, а не меню.** `provideRtSideMenuSettings()` включает
 хранение под номером меню; без провайдера меню ничего не помнит, и режим с шириной приходят
-входами. Вход важнее сохранённого.
+входами. Вход важнее сохранённого. `pinShown="false"` убирает кнопку закрепления, и сохранённое
+закрепление тогда не читается: иначе человек не открепил бы меню.
+
+**Подсказки строк подменю гасит `subMenuTooltipsShown="false"`.** Имена кнопок для чтения экрана
+остаются.
 
 **Значок вне набора — шаблон `rtSideMenuIcon`.** Имя Material первого кита меню переводит парой
-из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты; без
+из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты и кнопки строк;
+контекст — строка (`$implicit`), имя (`icon`) и место (`slot`: `'icon'` или `'iconButton'`). Без
 шаблона на его месте пусто, а в режиме разработки консоль называет такое имя.
 
 **Раздел и запрос меню держит само.** Их не задать входом: раздел открывает нажатие или наведение

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

@@ -4,17 +4,24 @@
 <rt-spinner color="primary" [diameter]="32" />
 ```
 
-| вход       | тип                                      | умолчание   |
-| ---------- | ---------------------------------------- | ----------- |
-| `diameter` | `number \| string` (px)                  | `32`        |
-| `color`    | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
-
-Выходов нет. Собственной разметки нет — кольцо рисуется на host-е.
+| вход         | тип                                      | умолчание   |
+| ------------ | ---------------------------------------- | ----------- |
+| `diameter`   | `number \| string` (px)                  | `32`        |
+| `color`      | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
+| `appearance` | `'border' \| 'arc'`                      | `'border'`  |
+| `overlay`    | `boolean`                                | `false`     |
+| `backdrop`   | `boolean` — только вместе с `overlay`    | `false`     |
+| `plate`      | `boolean`                                | `false`     |
+
+Выходов нет. Без `overlay`, `plate` и `arc` собственной разметки нет — кольцо рисуется на host-е,
+и так спиннер стоит в компонентах кита. Любой из этих входов включает внутреннюю разметку.
 
 ## Главное, что нужно знать
 
-**Спиннер не решает, показывать ли себя.** Ни условной отрисовки, ни подложки внутри нет: и то,
-и другое — дело вмещающего. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
+**Спиннер не решает, показывать ли себя.** Условной отрисовки внутри нет — это дело вмещающего.
+Подложку и накрытие блока он рисует по просьбе: `overlay` занимает позиционированного родителя,
+`backdrop` приглушает его содержимое. Слой оверлея — `sticky`, переназначается свойством
+`--rt-spinner-overlay-z`. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
 подменяет им иконку.
 
 Диаметр едет свойством оформления `--rt-spinner-diameter`, а не классом, — поэтому размер