@rt-tools/ui-kit-v2 0.13.0 → 0.14.0

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

@@ -1,5 +1,8 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-multiselect {
+        --rt-multiselect-radius: var(--rt-input-radius);
         --rt-multiselect-caret-transition-duration: var(--rt-duration-fast);
         --rt-multiselect-own-outline-width: var(--rt-border-width-medium);
 
@@ -22,7 +25,7 @@
             align-items: center;
             padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
             border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-            border-radius: var(--rt-input-radius);
+            border-radius: var(--rt-multiselect-radius);
             background-color: var(--rt-input-color-bg);
             color: var(--rt-input-color-text);
             cursor: pointer;
@@ -171,6 +174,7 @@
             font-size: var(--rt-input-font-size);
         }
 
+        &__icon-left,
         &__clear {
             flex-shrink: 0;
         }
@@ -189,6 +193,7 @@
             /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
                объявляется на ней самой — с корня блока оно бы не докатилось. */
             --rt-multiselect-panel-shadow: var(--rt-shadow-md);
+            --rt-multiselect-tree-indent: var(--rt-space-lg);
 
             /* Предел высоты по умолчанию — предел кита: длинный список прокручивается внутри
                панели, а не уходит за нижний край экрана. Вход `panelMaxHeight` ставит свой
@@ -215,6 +220,9 @@
         }
 
         &__option {
+            /* Уровень строки в дереве ставит разметка на саму строку; ноль — строка верхнего уровня. */
+            --rt-multiselect-tree-level: 0;
+
             display: flex;
             align-items: center;
             padding: var(--rt-space-sm) var(--rt-space-md);
@@ -222,6 +230,7 @@
             cursor: pointer;
             font-size: var(--rt-input-font-size);
             gap: var(--rt-space-sm);
+            padding-inline-start: calc(var(--rt-space-md) + var(--rt-multiselect-tree-indent) * var(--rt-multiselect-tree-level));
 
             &:hover,
             &--active {
@@ -243,6 +252,25 @@
             }
         }
 
+        /* Стрелка ветки и пустое место под неё у листа: шаг отступа равен их ширине с зазором,
+           и стрелка дочерней строки встаёт под подписью родителя. */
+        &__toggle,
+        &__toggle-space {
+            display: inline-flex;
+            flex-shrink: 0;
+            block-size: var(--rt-input-icon-size);
+            inline-size: var(--rt-input-icon-size);
+        }
+
+        &__toggle {
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            cursor: pointer;
+        }
+
         &__checkbox {
             flex-shrink: 0;
             margin: 0;
@@ -259,5 +287,8 @@
             color: var(--rt-input-color-text-placeholder);
             font-style: italic;
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-multiselect-radius');
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-note — тихая информационная заметка в common/ui (ViewEncapsulation.None).
        Селектор bare `.rt-note` (класс на host) — `:host` в None light-DOM не матчит.
@@ -13,5 +15,8 @@
         color: var(--rt-color-text-muted);
         font-size: var(--rt-text-sm);
         line-height: var(--rt-leading-normal);
+
+        /* Шаг входа `radius` переназначает скругление заметки. */
+        @include kv.radius-steps('--rt-note-radius');
     }
 }

package/src/lib/components/notifications-bell/rt-notifications-bell.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-notifications-bell {
         --rt-notifications-bell-radius: var(--rt-radius-md);
@@ -35,5 +37,8 @@
             border-radius: var(--rt-notifications-bell-dot-radius);
             background-color: var(--rt-nav-marker-color);
         }
+
+        /* Шаг входа `radius` переназначает скругление кнопки: класс блока стоит и на хосте, и на кнопке внутри. */
+        @include kv.radius-steps('--rt-notifications-bell-radius', '> .rt-notifications-bell');
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-pagination {
         --rt-pagination-page-radius: var(--rt-pagination-box-radius);
@@ -24,7 +26,7 @@
 
         .rt-icon-button {
             --rt-icon-button-size: var(--rt-pagination-arrow-size);
-            --rt-icon-button-square-radius: var(--rt-pagination-arrow-radius);
+            --rt-icon-button-radius: var(--rt-pagination-arrow-radius);
             --rt-icon-button-shadow: var(--rt-pagination-arrow-shadow);
         }
 
@@ -123,6 +125,9 @@
             font-size: var(--rt-text-sm);
             white-space: var(--rt-pagination-per-page-label-white-space);
         }
+
+        /* Шаг входа `radius` переназначает скругление страницы; стрелки и поле держат своё. */
+        @include kv.radius-steps('--rt-pagination-page-radius');
     }
 
     // Узкий контейнер: прячем числовую полосу и диапазон, показываем compact-форму.

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-radio-button — радиокнопка. ViewEncapsulation.None, как у галочки: класс блока висит и на
        хосте, и на корне шаблона, поэтому правила блока вложены в хост. Размеры образца лежат на
@@ -7,6 +9,9 @@
 
     rt-radio-button {
         display: inline-block;
+
+        /* Шаг входа `radius` переназначает скругление карточки; кружок остаётся кругом. */
+        @include kv.radius-steps('--rt-radio-button-card-radius', '> .rt-radio-button');
     }
 
     rt-radio-button .rt-radio-button {

package/src/lib/components/section-nav/rt-section-nav.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-section-nav — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-section-nav` — сам хост (шаблон начинается с ng-container, класс ставит host). */
@@ -53,6 +55,9 @@
             letter-spacing: var(--rt-letter-spacing-wide);
             line-height: var(--rt-leading-snug);
         }
+
+        /* Шаг входа `radius` переназначает скругление плитки. */
+        @include kv.radius-steps('--rt-section-nav-tile-radius');
     }
 
     /* Тёмная тема: активная плитка на тёмной поверхности берёт свой фон.

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

@@ -8,13 +8,13 @@
 
 Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
 
-| вход                | тип                                          | умолчание         |
-| ------------------- | -------------------------------------------- | ----------------- |
-| `options`           | `ReadonlyArray<{ label, value, disabled? }>` | `[]`              |
-| `placeholder`       | `string`                                     | `''`              |
-| `iconLeft`          | `IRtIcon.Name \| null`                       | `null`            |
-| `filter`            | `boolean`                                    | `false`           |
-| `filterPlaceholder` | `string`                                     | `''` → `uiSearch` |
+| вход                | тип                                                     | умолчание         |
+| ------------------- | ------------------------------------------------------- | ----------------- |
+| `options`           | `ReadonlyArray<{ label, value, disabled?, children? }>` | `[]`              |
+| `placeholder`       | `string`                                                | `''`              |
+| `iconLeft`          | `IRtIcon.Name \| null`                                  | `null`            |
+| `filter`            | `boolean`                                               | `false`           |
+| `filterPlaceholder` | `string`                                                | `''` → `uiSearch` |
 
 | выход             | тип              |
 | ----------------- | ---------------- |
@@ -37,6 +37,9 @@
   первую доступную опцию.
 - Стрелки **перешагивают отключённые опции** и заворачиваются по кругу.
 - `Enter`/`Space` выбирают подсвеченную, `Escape` закрывает без выбора.
+- В дереве `ArrowRight` раскрывает ветку или спускается к первому ребёнку, `ArrowLeft` сворачивает
+  ветку или поднимается к родителю. Опции с `children` рисуются деревом — договорённость в
+  `docs/specs/ui-kit-v2/option-tree/`.
 - Опции не фокусируются поодиночке: подсвеченная называется скринридеру через
   `aria-activedescendant` на триггере.
 - Подсвеченная опция **прокручивается в видимую часть панели** (`block: 'nearest'`): у панели

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

@@ -1,5 +1,8 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-select {
+        --rt-select-radius: var(--rt-input-radius);
         --rt-select-fill-radius: var(--rt-radius-sm);
         --rt-select-caret-transition-duration: var(--rt-duration-fast);
         --rt-select-own-outline-width: var(--rt-border-width-medium);
@@ -34,7 +37,7 @@
             align-items: center;
             padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
             border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-            border-radius: var(--rt-input-radius);
+            border-radius: var(--rt-select-radius);
             background-color: var(--rt-input-color-bg);
             color: var(--rt-input-color-text);
             cursor: pointer;
@@ -207,6 +210,7 @@
             --rt-select-check-display: var(--rt-overlay-select-check-display);
             --rt-select-option-min-height: var(--rt-overlay-select-option-min-height);
             --rt-select-panel-border-width: var(--rt-overlay-select-panel-border-width);
+            --rt-select-tree-indent: var(--rt-space-lg);
 
             /* Предел высоты по умолчанию — предел кита: длинный список прокручивается внутри
                панели, а не уходит за нижний край экрана. Вход `panelMaxHeight` ставит свой
@@ -238,6 +242,9 @@
         }
 
         &__option {
+            /* Уровень строки в дереве ставит разметка на саму строку; ноль — строка верхнего уровня. */
+            --rt-select-tree-level: 0;
+
             display: flex;
             min-height: var(--rt-select-option-min-height);
             box-sizing: border-box;
@@ -248,6 +255,7 @@
             cursor: pointer;
             font-size: var(--rt-select-option-font-size);
             gap: var(--rt-space-sm);
+            padding-inline-start: calc(var(--rt-space-md) + var(--rt-select-tree-indent) * var(--rt-select-tree-level));
 
             &:hover,
             &--active {
@@ -269,6 +277,30 @@
             }
         }
 
+        &__option-label {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        /* Стрелка ветки и пустое место под неё у листа: шаг отступа равен их ширине с зазором,
+           и стрелка дочерней строки встаёт под подписью родителя. */
+        &__toggle,
+        &__toggle-space {
+            display: inline-flex;
+            flex-shrink: 0;
+            block-size: var(--rt-input-icon-size);
+            inline-size: var(--rt-input-icon-size);
+        }
+
+        &__toggle {
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            cursor: pointer;
+        }
+
         /* Отметка выбранного пункта — у mat-select первого кита; свой вид её не рисует. */
         &__check {
             display: var(--rt-select-check-display);
@@ -280,5 +312,8 @@
             color: var(--rt-input-color-text-placeholder);
             font-style: italic;
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-select-radius');
     }
 }

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

@@ -1,20 +1,19 @@
 # `rt-skeleton`
 
 ```html
-<rt-skeleton shape="rectangle" size="md" width="240px" height="16px" borderRadius="xl" [animation]="true" />
+<rt-skeleton shape="rectangle" size="md" width="240px" height="16px" radius="full" [animation]="true" />
 ```
 
-| вход           | тип                                            | умолчание          |
-| -------------- | ---------------------------------------------- | ------------------ |
-| `shape`        | `'rectangle' \| 'circle' \| 'square'`          | `'rectangle'`      |
-| `size`         | `'sm' \| 'md' \| 'lg'`                         | `'md'`             |
-| `width`        | `string` (любая CSS-длина)                     | `'100%'`           |
-| `height`       | `string`                                       | `'10px'`           |
-| `borderRadius` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| null` | `null` (по фигуре) |
-| `animation`    | `boolean`                                      | `true`             |
+| вход        | тип                                   | умолчание          |
+| ----------- | ------------------------------------- | ------------------ |
+| `shape`     | `'rectangle' \| 'circle' \| 'square'` | `'rectangle'`      |
+| `size`      | `'sm' \| 'md' \| 'lg'`                | `'md'`             |
+| `width`     | `string` (любая CSS-длина)            | `'100%'`           |
+| `height`    | `string`                              | `'10px'`           |
+| `radius`    | `TRtRadius \| null` — шаг общей шкалы | `null` (по фигуре) |
+| `animation` | `boolean`                             | `true`             |
 
-Шкала размеров: `sm` 10px, `md` 15px, `lg` 20px. Шкала скруглений: `xs` 2, `sm` 4, `md` 6,
-`lg` 10, `xl` 999px.
+Шкала размеров: `sm` 10px, `md` 15px, `lg` 20px. Скругление — шаг общей шкалы кита, вход `radius`.
 
 ## Главное, что нужно знать
 
@@ -28,11 +27,10 @@
 - **Умолчание высоты — 10px, хотя умолчание размера — `md` (15px).** Расхождение намеренное:
   полоска текста тоньше шага размера. Прямоугольник слушается `height`, круг и квадрат — нет.
 - Круг и квадрат берут сторону из `size` и **игнорируют** `width`/`height`.
-- **`borderRadius: null` значит «по фигуре», а не «без скругления»:** прямоугольник берёт `xl`,
-  квадрат — `sm` (пилюля из квадрата не квадрат). Заданное значение перебивает умолчание у
-  обоих. Умолчанием нельзя держать сам `xl` — тогда явный `xl` неотличим от невыставленного, и
-  квадрату приходится прибивать `sm` жёстко, молча теряя вход.
-- Круг — единственное исключение: он всегда `50%`, потому что круг и есть это скругление.
+- **`radius: null` значит «по фигуре», а не «без скругления»:** прямоугольник и квадрат берут `sm`,
+  как в макете. Названный шаг перебивает умолчание у обоих.
+- Круг — единственное исключение: он всегда круглый, и шаг его не меняет — круг и есть это
+  скругление.
 - `animation` принимает голый атрибут (`animation` без значения = `true`).
 - Мерцание снимается у пользователей с `prefers-reduced-motion` — правило в SCSS.
 

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-skeleton {
         --rt-skeleton-wave-duration: 2.5s;
@@ -24,9 +26,13 @@
         }
 
         &--square {
-            border-radius: 0;
+            border-radius: var(--rt-skeleton-radius);
         }
 
+        /* Шаг входа `radius` переназначает скругление прямоугольника и квадрата; круг берёт своё
+           свойство и шагом не задевается. */
+        @include kv.radius-steps('--rt-skeleton-radius');
+
         &--sm {
             min-width: 10px;
             min-height: 10px;

package/src/lib/components/skeleton-wrapper/CONTEXT.md

@@ -6,12 +6,12 @@
 <rt-skeleton-wrapper width="240px" height="16px" [isLoading]="!tour()">{{ tour()?.title }}</rt-skeleton-wrapper>
 ```
 
-| вход                                            | тип                                           | умолчание |
-| ----------------------------------------------- | --------------------------------------------- | --------- |
-| `isLoading`                                     | `boolean`                                     | `false`   |
-| `width`                                         | `string`                                      | `'100%'`  |
-| `height`                                        | `string`                                      | `'15px'`  |
-| `shape` / `size` / `borderRadius` / `animation` | как у [`rt-skeleton`](../skeleton/CONTEXT.md) |           |
+| вход                                      | тип                                           | умолчание |
+| ----------------------------------------- | --------------------------------------------- | --------- |
+| `isLoading`                               | `boolean`                                     | `false`   |
+| `width`                                   | `string`                                      | `'100%'`  |
+| `height`                                  | `string`                                      | `'15px'`  |
+| `shape` / `size` / `radius` / `animation` | как у [`rt-skeleton`](../skeleton/CONTEXT.md) |           |
 
 ## Главное, что нужно знать
 

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-split-button — основной CTA + каретка с меню второстепенных действий.
        ViewEncapsulation.None: селекторы префиксованы `.rt-split-button`. Меню
@@ -9,6 +11,10 @@
 
         display: inline-flex;
 
+        /* Шаг входа `radius` переназначает скругление обеих кнопок контрола: лицо и каретка —
+           одна поверхность. */
+        @include kv.radius-steps('--rt-btn-radius', '> .rt-split-button__control > .rt-button');
+
         /* Контрол — origin popover'а (width="trigger" берёт его ширину) и flex-ряд
            лица + каретки. */
         &__control {

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-stepper — линейный прогресс-степпер в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stepper` висит
@@ -122,5 +124,8 @@
                 }
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление точек шагов. */
+        @include kv.radius-steps('--rt-stepper-radius', '> .rt-stepper');
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-table — common/ui таблица поверх cdk-table. ViewEncapsulation.None:
        классы доступны без scope-attrs, токены --rt-* наследуются. */
@@ -276,6 +278,13 @@
                 flex-direction: column;
                 gap: var(--rt-space-sm);
             }
+
+            /* Фон у каждой карточки свой, а хост без фона: иначе скруглённый угол карточки
+               стоит на белом квадрате хоста, и на странице другого цвета угол видно. Пустая
+               таблица карточек не рисует и держит свою панель заглушки. */
+            &:not(.rt-table--empty) {
+                background: transparent;
+            }
         }
 
         &__card {
@@ -334,6 +343,9 @@
                 width: 80%;
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление карточки узкого вида; у широкого вида углов нет. */
+        @include kv.radius-steps('--rt-table-card-radius');
     }
 
     /* В тёмной теме таблица сливается с фоном контента (bg-page), а не поднимается

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

@@ -1,19 +1,18 @@
 # `rt-tag`
 
 ```html
-<rt-tag value="Активен" severity="success" shape="pill" appearance="solid" icon="check" [closable]="true" (closed)="onClosed($event)" />
+<rt-tag value="Активен" severity="success" appearance="solid" icon="check" [closable]="true" (closed)="onClosed($event)" />
 ```
 
-| вход               | тип                                                                        | умолчание      |
-| ------------------ | -------------------------------------------------------------------------- | -------------- |
-| `value`            | `string`                                                                   | **обязателен** |
-| `severity`         | `'info' \| 'success' \| 'warning' \| 'danger' \| 'secondary' \| 'neutral'` | `'neutral'`    |
-| `size`             | `'sm' \| 'md' \| 'lg'`                                                     | `'md'`         |
-| `shape`            | `'pill' \| 'square'`                                                       | `'pill'`       |
-| `appearance`       | `'solid' \| 'outlined'`                                                    | `'solid'`      |
-| `radius`           | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full' \| null`                         | `null`         |
-| `icon` / `iconEnd` | `IRtIcon.Name \| null`                                                     | `null`         |
-| `closable`         | `boolean`                                                                  | `false`        |
+| вход               | тип                                                                        | умолчание       |
+| ------------------ | -------------------------------------------------------------------------- | --------------- |
+| `value`            | `string`                                                                   | **обязателен**  |
+| `severity`         | `'info' \| 'success' \| 'warning' \| 'danger' \| 'secondary' \| 'neutral'` | `'neutral'`     |
+| `size`             | `'sm' \| 'md' \| 'lg'`                                                     | `'md'`          |
+| `appearance`       | `'solid' \| 'outlined'`                                                    | `'solid'`       |
+| `radius`           | `TRtRadius \| null` — шаг общей шкалы                                      | `null` → `full` |
+| `icon` / `iconEnd` | `IRtIcon.Name \| null`                                                     | `null`          |
+| `closable`         | `boolean`                                                                  | `false`         |
 
 | выход    | тип          |
 | -------- | ------------ |
@@ -37,8 +36,8 @@
   12 пикселей, `md` — 16, `lg` — 20. Кегль, названный отдельно, оставил бы отступы от другой
   ступени, и ряд пилюль перестал бы выстраиваться.
 
-- `radius` перебивает скругление, заданное формой. Без него класс скругления не выводится
-  вовсе — радиус берётся из `shape`.
+- `radius` — шаг общей шкалы кита, он ложится на хост атрибутом. Без него пилюля скруглена
+  полностью.
 - Палитра дублируется атрибутом `data-severity` — по нему тег находят проверки и внешние стили,
   не завязываясь на BEM-класс.
 - Подпись крестика для скринридера берётся из словаря кита (`uiRemove`). Без
@@ -48,8 +47,8 @@
 
 - `value` — обязательный вход: тег без текста не бывает. Иконка без текста — это
   [`rt-icon-button`](../icon-button/CONTEXT.md), а не тег.
-- Модификаторы выводятся BEM-директивами: `rt-tag--severity--success`, `rt-tag--shape--square`,
-  булев `closable` даёт `rt-tag--closable` без значения.
+- Модификаторы выводятся BEM-директивами: `rt-tag--severity--success`, булев `closable` даёт
+  `rt-tag--closable` без значения.
 
 ## Рядом
 

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-tag — status pill в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
@@ -13,7 +15,7 @@
         max-width: 100%;
 
         .rt-tag {
-            --rt-tag-radius: var(--rt-radius-md);
+            --rt-tag-radius: var(--rt-radius-full);
             --rt-tag-border-width: var(--rt-border-width-thin);
 
             display: inline-flex;
@@ -48,35 +50,6 @@
                 gap: var(--rt-space-2);
             }
 
-            &--shape--pill {
-                --rt-tag-radius: var(--rt-radius-full);
-            }
-
-            &--shape--square {
-                --rt-tag-radius: var(--rt-radius-sm);
-            }
-
-            /* Явный radius переопределяет shape — правила идут позже по порядку. */
-            &--radius--none {
-                --rt-tag-radius: var(--rt-radius-none);
-            }
-
-            &--radius--sm {
-                --rt-tag-radius: var(--rt-radius-sm);
-            }
-
-            &--radius--md {
-                --rt-tag-radius: var(--rt-radius-md);
-            }
-
-            &--radius--lg {
-                --rt-tag-radius: var(--rt-radius-lg);
-            }
-
-            &--radius--full {
-                --rt-tag-radius: var(--rt-radius-full);
-            }
-
             &--severity--info {
                 background: var(--rt-color-state-info-bg);
                 color: var(--rt-color-state-info);
@@ -137,5 +110,8 @@
                 margin-inline-start: var(--rt-space-0-5);
             }
         }
+
+        /* Шаг входа `radius` переназначает собственное свойство пилюли. */
+        @include kv.radius-steps('--rt-tag-radius', '> .rt-tag');
     }
 }

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

@@ -1,5 +1,9 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-textarea {
+        --rt-textarea-radius: var(--rt-input-radius);
+
         display: block;
         width: 100%;
 
@@ -16,7 +20,7 @@
             box-sizing: border-box;
             padding: var(--rt-textarea-padding-y) var(--rt-input-padding-x);
             border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-            border-radius: var(--rt-input-radius);
+            border-radius: var(--rt-textarea-radius);
             background-color: var(--rt-input-color-bg);
             color: var(--rt-input-color-text);
 
@@ -76,5 +80,8 @@
                 color: var(--rt-field-value-empty-color);
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-textarea-radius');
     }
 }

package/src/lib/components/thread-list/rt-thread-list.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-thread-list {
         --rt-thread-list-border-width: var(--rt-border-width-thin);
@@ -253,5 +255,8 @@
                 inline-size: 48px;
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление карточки беседы. */
+        @include kv.radius-steps('--rt-thread-list-card-radius');
     }
 }

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-toggle-button-group — segmented control. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс
@@ -26,9 +28,9 @@
             --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
             --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
             --rt-toggle-button-group-track-padding: 4px;
-            --rt-toggle-button-group-track-radius: 8px;
+            --rt-toggle-button-group-track-radius: var(--rt-radius-md);
             --rt-toggle-button-group-btn-padding: 0 8px;
-            --rt-toggle-button-group-btn-radius: 8px;
+            --rt-toggle-button-group-btn-radius: var(--rt-radius-ms);
             --rt-toggle-button-group-btn-gap: 4px;
             --rt-toggle-button-group-btn-font-size: 12px;
             --rt-toggle-button-group-btn-line-height: 14px;
@@ -98,9 +100,7 @@
             /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
             &--md {
                 --rt-toggle-button-group-height: 40px;
-                --rt-toggle-button-group-track-radius: 10px;
                 --rt-toggle-button-group-btn-padding: 0 14px;
-                --rt-toggle-button-group-btn-radius: 10px;
                 --rt-toggle-button-group-btn-gap: 6px;
                 --rt-toggle-button-group-btn-font-size: 14px;
                 --rt-toggle-button-group-btn-line-height: 16px;
@@ -108,9 +108,7 @@
 
             &--lg {
                 --rt-toggle-button-group-height: 50px;
-                --rt-toggle-button-group-track-radius: 12px;
                 --rt-toggle-button-group-btn-padding: 0 20px;
-                --rt-toggle-button-group-btn-radius: 12px;
                 --rt-toggle-button-group-btn-gap: 8px;
                 --rt-toggle-button-group-btn-font-size: 16px;
                 --rt-toggle-button-group-btn-line-height: 18px;
@@ -120,6 +118,9 @@
                 opacity: 0.5;
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление дорожки; сегменты держат своё. */
+        @include kv.radius-steps('--rt-toggle-button-group-track-radius', '> .rt-toggle-button-group');
     }
 
     /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */