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

package/src/lib/components/date-picker/rt-date-picker.component.scss

@@ -1,5 +1,8 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-date-picker {
+        --rt-date-picker-radius: var(--rt-input-radius);
         --rt-date-picker-fill-radius: var(--rt-radius-sm);
 
         position: relative;
@@ -10,7 +13,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-date-picker-radius);
         background-color: var(--rt-input-color-bg);
         color: var(--rt-input-color-text);
         cursor: text;
@@ -91,14 +94,27 @@
             color: inherit;
             font: inherit;
             outline: none;
+            text-overflow: ellipsis;
 
             &:disabled {
                 cursor: not-allowed;
             }
         }
 
-        &__clear {
+        &__clear,
+        &__open {
             flex-shrink: 0;
         }
+
+        /* Поверхность панели в поповере: она рисуется в CDK Overlay, вне поддерева блока. */
+        &__popup {
+            border: var(--rt-overlay-select-panel-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-overlay-select-radius);
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-overlay-select-shadow);
+        }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-date-picker-radius');
     }
 }

package/src/lib/components/date-range/CONTEXT.md

@@ -0,0 +1,53 @@
+# `rt-date-range`
+
+```html
+<rt-field label="Период">
+    <rt-date-range min="2026-01-01" max="2026-12-31" [formControl]="period" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход          | тип                             | умолчание   |
+| ------------- | ------------------------------- | ----------- |
+| `min` / `max` | `string \| null` (`YYYY-MM-DD`) | `null`      |
+| `appearance`  | `'outline' \| 'fill'`           | `'outline'` |
+
+Значение — пара дней `{ start, end }` в форме `YYYY-MM-DD`, оба края включены, `start` не позже
+`end`; пусто — `null`. Половина диапазона в форму не попадает никогда.
+
+## Главное, что нужно знать
+
+**Панель — два месяца рядом и быстрые варианты слева.** Кнопка в конце поля открывает
+`rt-date-range-panel`. Первый клик ставит начало, наведение рисует будущий диапазон, второй клик —
+конец; клик раньше начала ставит дни по порядку. Варианты «Сегодня», «Вчера», «Последние 7 и 30
+дней», «Этот месяц» и «Прошлый месяц» заполняют черновик. Подвал показывает даты и число дней,
+«Сбросить» очищает черновик, «Применить» пишет значение. Договорённость —
+`docs/specs/ui-kit-v2/date-range/`.
+
+**Текст в поле — две даты в порядке языка интерфейса через тире.** Под `ru` это
+«12.10.2026 — 15.10.2026». Набранный текст читается так же; нечитаемый или лежащий за границами
+оставляет значение прежним и помечает поле ошибкой.
+
+**Сетка, текст даты и язык — те же, что у поля даты.** Месяцы рисует
+[`rt-calendar`](../calendar/CONTEXT.md), текст даты пишет логика поля даты, язык берётся из
+`RT_KIT_LOCALE`. Своя арифметика — только диапазона, в `rt-date-range.logic.ts`.
+
+## Края
+
+- «Этот месяц» — с первого дня месяца по сегодня, «Прошлый месяц» — весь, последние 7 и 30 дней
+  кончаются сегодня.
+- Вариант, не лежащий в `min`/`max` целиком, выключен; дни за границами выключены, листание
+  останавливается на месяце границы.
+- Клавиши в месяцах — как у панели поля даты; Enter на дне выбирает его, как клик.
+- Число дней в итоге берёт форму множественного числа локали: подписи кита `uiDaysOne`,
+  `uiDaysFew`, `uiDaysMany`, `uiDaysOther`.
+- На узком экране панель встаёт в нижнюю шторку: один месяц, варианты строкой сверху с прокруткой
+  вбок, дни под палец, в итоге только число дней. Признак узкого экрана даёт
+  `BreakpointsService.narrow`.
+- В плоском режиме чтения диапазон пишется по локали через `Intl.DateTimeFormat`; пусто — прочерк.
+
+## Рядом
+
+- [`rt-date-picker`](../date-picker/CONTEXT.md) — одна дата, время или дата со временем.
+- [`rt-calendar`](../calendar/CONTEXT.md) — сетка месяцев, на которой стоит панель.

package/src/lib/components/date-range/panel/rt-date-range-panel.component.scss

@@ -0,0 +1,103 @@
+@layer rt-kit.components {
+    /* rt-date-range-panel — ViewEncapsulation.None: правила таргетируют BEM-класс блока, класс ставит host. */
+
+    .rt-date-range-panel {
+        /* Размер дня в шторке: под палец. */
+        --rt-date-range-panel-sheet-day-size: calc(var(--rt-size-10) + var(--rt-size-1));
+
+        /* Толщина черты между вариантами и месяцами и над подвалом. */
+        --rt-date-range-panel-divider-width: var(--rt-border-width-thin);
+
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-4);
+        gap: var(--rt-space-4);
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-lg);
+            font-weight: var(--rt-font-weight-semibold);
+            text-align: center;
+        }
+
+        &__body {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--rt-space-4);
+        }
+
+        /* Варианты стоят колонкой слева, отделённые от месяцев чертой. */
+        &__presets {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: column;
+            align-self: stretch;
+            padding-right: var(--rt-space-4);
+            border-right: var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-1);
+        }
+
+        /* Вариант в колонке — строка текста, прижатая влево, а не кнопка по центру. */
+        &__preset {
+            justify-content: flex-start;
+            white-space: nowrap;
+        }
+
+        /* Свойство ставится на сам узел календаря — корень его блока объявляет своё. */
+        & &__calendar {
+            --rt-calendar-day-justify: center;
+            --rt-calendar-column-gap: 0;
+            --rt-calendar-range-inner-radius: 0;
+
+            flex: 1 1 auto;
+            min-inline-size: calc(var(--rt-size-10) * 14 + var(--rt-space-6));
+        }
+
+        &__footer {
+            display: flex;
+            align-items: center;
+            padding-top: var(--rt-space-2);
+            border-top: var(--rt-date-range-panel-divider-width) solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-2);
+        }
+
+        &__summary {
+            flex: 1 1 auto;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        /* Нижняя шторка: варианты строкой сверху с прокруткой вбок, один месяц, дни под палец. */
+        &--sheet {
+            padding-inline: 0;
+        }
+
+        &--sheet &__body {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        &--sheet &__presets {
+            flex-direction: row;
+            padding-right: 0;
+            padding-bottom: var(--rt-space-1);
+            border-right: none;
+            gap: var(--rt-space-2);
+            overflow-x: auto;
+            overscroll-behavior-x: contain;
+            scrollbar-width: none;
+        }
+
+        &--sheet &__preset {
+            flex: 0 0 auto;
+        }
+
+        &--sheet &__calendar {
+            --rt-calendar-month-count: 1;
+            --rt-calendar-day-size: var(--rt-date-range-panel-sheet-day-size);
+
+            min-inline-size: 0;
+        }
+    }
+}

package/src/lib/components/date-range/rt-date-range.component.scss

@@ -0,0 +1,120 @@
+@use '../../../styles/mixins' as kv;
+
+@layer rt-kit.components {
+    .rt-date-range {
+        --rt-date-range-radius: var(--rt-input-radius);
+        --rt-date-range-fill-radius: var(--rt-radius-sm);
+
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        min-height: var(--rt-input-height);
+        box-sizing: border-box;
+        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-date-range-radius);
+        background-color: var(--rt-input-color-bg);
+        color: var(--rt-input-color-text);
+        cursor: text;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-input-line-height);
+        transition: var(--rt-input-transition);
+
+        &:focus-within {
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: var(--rt-input-focus-outline-offset);
+        }
+
+        /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+           ниже по source-order и перекрывают её своей рамкой. */
+        &--borderless {
+            border-color: transparent;
+        }
+
+        /* Вид «fill» — залитое поле с чертой снизу, как у материального поля первого кита: скругление
+           у него своё и малое — скругление поля бывает «таблеткой», а у залитого поля низ прямой.
+           Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
+           перекрывают его рамку. */
+        &--appearance--fill {
+            border-color: transparent;
+            border-radius: var(--rt-date-range-fill-radius) var(--rt-date-range-fill-radius) 0 0;
+            border-bottom-color: var(--rt-color-field-fill-underline);
+            background-color: var(--rt-color-bg-surface-subtle-2);
+        }
+
+        &--invalid {
+            border-color: var(--rt-input-color-border-error);
+
+            &:focus-within {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
+        }
+
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+        }
+
+        &--size--sm {
+            min-height: var(--rt-input-height-sm);
+        }
+
+        &--size--lg {
+            min-height: var(--rt-input-height-lg);
+        }
+
+        /* Read-only: дата как плоский текст — снимаем рамку/фон/паддинги. */
+        &--readonly {
+            padding-right: 0;
+            padding-left: 0;
+            border-color: transparent;
+            background-color: transparent;
+            cursor: default;
+        }
+
+        &__readonly {
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
+
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
+        }
+
+        &__field {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            outline: none;
+            text-overflow: ellipsis;
+
+            &:disabled {
+                cursor: not-allowed;
+            }
+        }
+
+        &__clear,
+        &__open {
+            flex-shrink: 0;
+        }
+
+        /* Поверхность панели в поповере: она рисуется в CDK Overlay, вне поддерева блока. */
+        &__popup {
+            border: var(--rt-overlay-select-panel-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-overlay-select-radius);
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-overlay-select-shadow);
+        }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-date-range-radius');
+    }
+}

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-dialog — styled frame модалки поверх CDK Overlay.
        ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
@@ -9,6 +11,9 @@
        становится: рамка должна быть прямым flex-ребёнком overlay-панели. */
     rt-dialog {
         display: contents;
+
+        /* Шаг входа `radius` переназначает скругление рамки. */
+        @include kv.radius-steps('--rt-dialog-radius', '> .rt-dialog');
     }
 
     /* Size tokens — sm/md/lg.

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-empty-state — заглушка пустого состояния в common/ui (ViewEncapsulation.None).
        Селектор bare `.rt-empty-state` (класс на host) — `:host` в None light-DOM не матчит.
@@ -72,5 +74,8 @@
 
             margin-top: var(--rt-space-sm);
         }
+
+        /* Шаг входа `radius` переназначает скругление подложки значка. */
+        @include kv.radius-steps('--rt-empty-state-icon-radius');
     }
 }

package/src/lib/components/file-card/rt-file-card.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-file-card — ViewEncapsulation.None, плоский `.rt-file-card` (как rt-file-input/rt-icon).
        Host-класс ставится через @Component host:{class}. */
@@ -112,5 +114,8 @@
         &__action {
             flex-shrink: 0;
         }
+
+        /* Шаг входа `radius` переназначает скругление карточки; значок держит своё. */
+        @include kv.radius-steps('--rt-file-card-radius');
     }
 }

package/src/lib/components/file-drop/rt-file-drop.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-file-drop — зона перетаскивания файлов в common/ui (ViewEncapsulation.None).
        Селектор bare `.rt-file-drop` (класс на host) — `:host` в None light-DOM не матчит.
@@ -113,6 +115,9 @@
             font-size: var(--rt-text-sm);
             opacity: 0.8;
         }
+
+        /* Шаг входа `radius` переназначает скругление зоны. */
+        @include kv.radius-steps('--rt-file-drop-radius');
     }
 
     /* Сжатый вид подсказки. Слова подсказки пишет сам кит, и на низкой области они не

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-header {
         --rt-header-radius: var(--rt-radius-lg);
@@ -58,6 +60,9 @@
             flex: 1 0 0;
             align-items: center;
         }
+
+        /* Шаг входа `radius` переназначает скругление нижних углов. */
+        @include kv.radius-steps('--rt-header-radius');
     }
 
     /* dark override: подложка обвязки — своё назначение, а не ступень шкалы. */

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

@@ -12,7 +12,7 @@
 | `size`                                          | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                     | `'md'`                       |
 | `iconSize`                                      | `IRtIcon.Size \| null`                                                      | `null` → от размера кнопки   |
 | `iconColor`                                     | `IRtIcon.Color`                                                             | `'current'`                  |
-| `shape`                                         | `'circle' \| 'square'`                                                      | `'square'`                   |
+| `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                       | `null` → `md`                |
 | `type`                                          | `'button' \| 'submit'`                                                      | `'button'`                   |
 | `tooltip`                                       | `string`                                                                    | `''` (пусто → подсказки нет) |
 | `tabIndex`                                      | `number`                                                                    | `0`                          |

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-icon-button — иконочная кнопка в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-icon-button` висит
@@ -19,19 +21,9 @@
         --rt-icon-button-color: var(--rt-color-text-primary);
 
         .rt-icon-button {
-            --rt-icon-button-circle-radius: var(--rt-radius-full);
-            --rt-icon-button-square-radius: var(--rt-radius-md);
-
-            /* Промежуточные формы делят расстояние от квадрата до круга на три равные
-               части, а не берут свою долю стороны. Доля, взятая сама по себе, промахивается
-               мимо квадрата: у него радиус в 8 пикселей, а это от четверти стороны на
-               кнопке в 32 пикселя до восьмой на кнопке в 64 — ближняя ступень сливается с
-               ним на одних размерах и отрывается на других. Отсчёт от самого квадрата
-               держит шаг ровным на всём ряду: 8 → 12 → 16 → 20 на кнопке в 40 пикселей. */
-            --rt-icon-button-rounded-sm-radius: calc(var(--rt-icon-button-square-radius) + (50% - var(--rt-icon-button-square-radius)) / 3);
-            --rt-icon-button-rounded-lg-radius: calc(
-                var(--rt-icon-button-square-radius) + (50% - var(--rt-icon-button-square-radius)) * 2 / 3
-            );
+            /* Скругление по умолчанию — скруглённый квадрат; круг и любой другой шаг даёт вход
+               `radius`. */
+            --rt-icon-button-radius: var(--rt-radius-md);
             --rt-icon-button-indicator-radius: var(--rt-radius-full);
             --rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);
 
@@ -58,6 +50,7 @@
             justify-content: center;
             padding: 0;
             border: 0;
+            border-radius: var(--rt-icon-button-radius);
             background-color: var(--rt-icon-button-bg);
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
@@ -86,22 +79,6 @@
                 --rt-icon-button-size: var(--rt-control-height-2xl);
             }
 
-            &--circle {
-                border-radius: var(--rt-icon-button-circle-radius);
-            }
-
-            &--rounded-sm {
-                border-radius: var(--rt-icon-button-rounded-sm-radius);
-            }
-
-            &--rounded-lg {
-                border-radius: var(--rt-icon-button-rounded-lg-radius);
-            }
-
-            &--square {
-                border-radius: var(--rt-icon-button-square-radius);
-            }
-
             /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
                тени покоя, и кнопка без подъёма под указателем не меняется. */
             &:hover:not(:disabled) {
@@ -212,6 +189,9 @@
                 pointer-events: none;
             }
         }
+
+        /* Шаг входа `radius` переназначает собственное свойство кнопки. */
+        @include kv.radius-steps('--rt-icon-button-radius', '> .rt-icon-button');
     }
 
     @keyframes rt-icon-button-spin {

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

@@ -1,5 +1,8 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-input {
+        --rt-input-box-radius: var(--rt-input-radius);
         --rt-input-fill-radius: var(--rt-radius-sm);
         --rt-input-toggle-radius: var(--rt-radius-sm);
 
@@ -11,7 +14,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-input-box-radius);
         background-color: var(--rt-input-color-bg);
         color: var(--rt-input-color-text);
         cursor: text;
@@ -144,5 +147,8 @@
                 outline-offset: var(--rt-input-focus-outline-offset);
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-input-box-radius');
     }
 }

package/src/lib/components/input-number/rt-input-number.component.scss

@@ -1,5 +1,8 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-input-number {
+        --rt-input-number-radius: var(--rt-input-radius);
         --rt-input-number-fill-radius: var(--rt-radius-sm);
 
         position: relative;
@@ -10,7 +13,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-input-number-radius);
         background-color: var(--rt-input-color-bg);
         color: var(--rt-input-color-text);
         cursor: text;
@@ -113,5 +116,8 @@
             color: var(--rt-color-text-muted);
             user-select: none;
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-input-number-radius');
     }
 }

package/src/lib/components/markdown-text/rt-markdown-text.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-markdown-text {
         --rt-markdown-text-radius: var(--rt-radius-sm);
@@ -126,5 +128,8 @@
             color: var(--rt-color-text-link);
             text-decoration: underline;
         }
+
+        /* Шаг входа `radius` переназначает скругление блоков кода. */
+        @include kv.radius-steps('--rt-markdown-text-radius');
     }
 }

package/src/lib/components/menu/rt-menu-item.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-menu-item — пункт меню rt-menu. ViewEncapsulation.None.
        Host (`<rt-menu-item>`) несёт класс блока и сам является кликабельной зоной. */
@@ -87,5 +89,8 @@
                 background: transparent;
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление пункта. */
+        @include kv.radius-steps('--rt-menu-item-radius');
     }
 }

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

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

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-money-list — финансовый блок на подложке (ViewEncapsulation.None).
        Селектор bare `.rt-money-list` (класс на host). */
@@ -11,5 +13,8 @@
         border-radius: var(--rt-money-list-radius);
         background: var(--rt-color-bg-subtle);
         gap: var(--rt-space-xs);
+
+        /* Шаг входа `radius` переназначает скругление списка. */
+        @include kv.radius-steps('--rt-money-list-radius');
     }
 }

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

@@ -8,11 +8,12 @@
 
 Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
 
-| вход          | тип                                                                          | умолчание               |
-| ------------- | ---------------------------------------------------------------------------- | ----------------------- |
-| `options`     | `ReadonlyArray<{ label, value, disabled? }>` (тот же тип, что у `rt-select`) | `[]`                    |
-| `placeholder` | `string`                                                                     | `''` → `uiSelectValues` |
-| `maxChips`    | `number`                                                                     | `3`                     |
+| вход          | тип                                                                                     | умолчание               |
+| ------------- | --------------------------------------------------------------------------------------- | ----------------------- |
+| `options`     | `ReadonlyArray<{ label, value, disabled?, children? }>` (тот же тип, что у `rt-select`) | `[]`                    |
+| `placeholder` | `string`                                                                                | `''` → `uiSelectValues` |
+| `maxChips`    | `number`                                                                                | `3`                     |
+| `iconLeft`    | `IRtIcon.Name \| null` (тот же вход, что у `rt-select`)                                 | `null`                  |
 
 Значение — `ReadonlyArray<TValue>`. Отдельного выхода выбора нет: значение едет только формой.
 
@@ -41,6 +42,12 @@
 Как у [`rt-select`](../select/CONTEXT.md), с одним отличием: `Enter`/`Space` **переключают**
 подсвеченную опцию, оставляя список открытым.
 
+## Дерево опций
+
+Опции с `children` рисуются деревом. Клик по ветке выбирает все её включённые листья или снимает
+их, если выбраны все; значение самой ветки в выбор не пишется. Флажок ветки выводится из листьев:
+включён, промежуточный или выключен. Договорённость — `docs/specs/ui-kit-v2/option-tree/`.
+
 ## Рядом
 
 - [`rt-select`](../select/CONTEXT.md) — одно значение.