@rt-tools/ui-kit-v2 0.11.0 → 0.12.0

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

@@ -5,16 +5,27 @@
     .rt-menu-item {
         --rt-menu-item-radius: var(--rt-radius-sm);
         --rt-menu-item-transition-duration: var(--rt-duration-fast);
+        --rt-menu-item-weight: var(--rt-overlay-menu-item-weight);
+        --rt-menu-item-danger-color: var(--rt-overlay-menu-danger-color);
+        --rt-menu-item-current-bg: var(--rt-overlay-menu-current-bg);
+        --rt-menu-item-min-height: var(--rt-overlay-menu-item-min-height);
+        --rt-menu-item-padding-y: var(--rt-overlay-menu-item-padding-y);
+        --rt-menu-item-padding-x: var(--rt-overlay-menu-item-padding-x);
+        --rt-menu-item-icon-size: var(--rt-overlay-menu-item-icon-size);
+        --rt-menu-item-danger-label-color: var(--rt-overlay-menu-danger-label-color);
+        --rt-menu-item-success-color: var(--rt-color-state-success-text);
 
         display: flex;
         width: 100%;
+        min-height: var(--rt-menu-item-min-height);
         box-sizing: border-box;
         align-items: center;
-        padding: var(--rt-space-sm) var(--rt-space-md);
+        padding: var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);
         border-radius: var(--rt-menu-item-radius);
         color: var(--rt-color-text-primary);
         cursor: pointer;
         font-size: var(--rt-text-sm);
+        font-weight: var(--rt-menu-item-weight);
         gap: var(--rt-space-sm);
         text-align: start;
         transition: background-color var(--rt-menu-item-transition-duration) ease;
@@ -28,7 +39,14 @@
             outline: none;
         }
 
+        /* Значок кит рисует размером sm строкой стиля. Границы размера её перебивают: нижняя — когда
+           больше, верхняя — когда меньше. Так набор растит значок пункта до значка первого кита и
+           ужимает значок компактного пункта. */
         &__icon {
+            min-width: var(--rt-menu-item-icon-size);
+            max-width: var(--rt-menu-item-icon-size);
+            min-height: var(--rt-menu-item-icon-size);
+            max-height: var(--rt-menu-item-icon-size);
             flex-shrink: 0;
             color: var(--rt-color-text-muted);
         }
@@ -38,11 +56,25 @@
             white-space: nowrap;
         }
 
+        &--current {
+            background: var(--rt-menu-item-current-bg);
+        }
+
         &--danger {
-            color: var(--rt-color-state-error-text);
+            color: var(--rt-menu-item-danger-label-color);
+
+            .rt-menu-item__icon {
+                color: var(--rt-menu-item-danger-color);
+            }
+        }
+
+        /* Подпись и значок — текстовой ступенью успеха: сам статус как текст 14px порога
+           контраста не берёт ни в одном наборе. */
+        &--success {
+            color: var(--rt-menu-item-success-color);
 
             .rt-menu-item__icon {
-                color: var(--rt-color-state-error-text);
+                color: var(--rt-menu-item-success-color);
             }
         }
 

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

@@ -10,18 +10,28 @@
         &__panel {
             /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
                объявляется на ней самой — с корня блока оно бы не докатилось. */
-            --rt-menu-panel-radius: var(--rt-radius-md);
+            --rt-menu-panel-radius: var(--rt-overlay-menu-radius);
             --rt-menu-panel-border-width: var(--rt-border-width-thin);
-            --rt-menu-panel-shadow: var(--rt-shadow-lg);
+            --rt-menu-panel-shadow: var(--rt-overlay-menu-shadow);
+            --rt-menu-panel-bg: var(--rt-overlay-menu-bg);
+            --rt-menu-panel-padding-y: var(--rt-overlay-menu-padding-y);
+            --rt-menu-panel-min-width: var(--rt-overlay-menu-min-width);
 
             display: flex;
-            min-width: 180px;
+            min-width: var(--rt-menu-panel-min-width);
             flex-direction: column;
-            padding: var(--rt-space-xs);
+            padding: var(--rt-menu-panel-padding-y) var(--rt-space-xs);
             border: var(--rt-menu-panel-border-width) solid var(--rt-color-border-subtle);
             border-radius: var(--rt-menu-panel-radius);
-            background: var(--rt-color-bg-surface);
+            background: var(--rt-menu-panel-bg);
             box-shadow: var(--rt-menu-panel-shadow);
+
+            /* Компактная панель переназначает пунктам высоту и размер значка: пункт читает их из
+               этих имён, а панель лежит над пунктами. */
+            &--size--sm {
+                --rt-overlay-menu-item-min-height: var(--rt-overlay-menu-sm-item-min-height);
+                --rt-overlay-menu-item-icon-size: var(--rt-overlay-menu-sm-item-icon-size);
+            }
         }
     }
 }

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

@@ -29,6 +29,9 @@
 - Значение всегда заменяется новым массивом, прежний не правится: форма видит новую ссылку.
 - `null` в форме читается как пустой выбор.
 - Закрытие панели помечает контрол тронутым; `FormControl.disable()` закрывает раскрытую панель.
+- Ширина панели не меньше ширины триггера и дальше растёт по содержимому; высота упирается в
+  предел кита, длинный список прокручивается внутри. Задаётся входами `panelWidth` и
+  `panelMaxHeight` (`none` снимает предел) — так же, как у `rt-select`.
 - Подпись фишки берётся из `options` пайпом `rtMultiselectLabel`; для значения вне набора
   подставляется его строковое представление.
 - Отключённые опции не выбираются, пустой набор даёт `uiNoOptions`.

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

@@ -1,6 +1,7 @@
 @layer rt-kit.components {
     .rt-multiselect {
         --rt-multiselect-caret-transition-duration: var(--rt-duration-fast);
+        --rt-multiselect-own-outline-width: var(--rt-border-width-medium);
 
         position: relative;
         display: block;
@@ -49,10 +50,48 @@
             }
         }
 
+        /* Свой указатель потребителя: полевой вид кнопки снимается — ground, рамка, высота и
+           отступы. Останется он — значок или метка потребителя окажутся внутри чужого поля, и
+           вход теряет смысл. Поведение при этом на кнопке, снимается только вид.
+
+           Ширина входит в полевой вид наравне с рамкой: поле берёт всю ширину хозяина, а разметка
+           потребителя уже. В покое этого не видно — фон и рамка сняты, — а на нажатии полевое
+           кольцо обводит кнопку, и она оказывается шире нарисованного. Поэтому кнопка меряется
+           своим содержимым, а полевые состояния — кольцо на фокусе и рамка открытого списка — на
+           своём указателе не рисуются вовсе. Открытость потребитель рисует сам: обстановка шаблона
+           несёт её признаком. */
+        &__trigger--own {
+            width: auto;
+            min-height: 0;
+            padding: 0;
+            border-color: transparent;
+            background-color: transparent;
+
+            &:focus {
+                border-color: transparent;
+                box-shadow: none;
+            }
+
+            /* Ход клавишами остаётся видимым: снять полевое кольцо значит снять единственную
+               примету фокуса. Обводка идёт по содержимому кнопки — кнопка теперь по нему и
+               меряется. :focus-visible, а не :focus: щелчку мышью примета не нужна, её даёт
+               разметка потребителя. */
+            &:focus-visible {
+                outline: var(--rt-multiselect-own-outline-width) solid var(--rt-input-color-border-focus);
+                outline-offset: var(--rt-input-focus-outline-offset);
+            }
+        }
+
         &--open &__trigger {
             border-color: var(--rt-input-color-border-focus);
         }
 
+        /* Рамка открытого списка — тот же полевой вид, только приходит позже. Правило выше бьёт
+           объявление у --own по силе, поэтому снимается отдельной строкой. */
+        &--open &__trigger--own {
+            border-color: transparent;
+        }
+
         &--invalid &__trigger {
             border-color: var(--rt-input-color-border-error);
 
@@ -61,6 +100,16 @@
             }
         }
 
+        /* Рамка ошибки — тоже полевой вид. Неверность своего указателя потребитель показывает
+           своей разметкой: чужая красная рамка легла бы вокруг его метки. */
+        &--invalid &__trigger--own {
+            border-color: transparent;
+
+            &:focus {
+                box-shadow: none;
+            }
+        }
+
         &--disabled {
             opacity: var(--rt-input-disabled-opacity);
         }
@@ -141,8 +190,16 @@
                объявляется на ней самой — с корня блока оно бы не докатилось. */
             --rt-multiselect-panel-shadow: var(--rt-shadow-md);
 
+            /* Предел высоты по умолчанию — предел кита: длинный список прокручивается внутри
+               панели, а не уходит за нижний край экрана. Вход `panelMaxHeight` ставит свой
+               предел на саму панель, а `none` снимает его для короткого списка. */
+            --rt-multiselect-panel-max-height: var(--rt-input-panel-max-height);
+
+            /* Ширина берётся от коробки наложения: её нижнюю границу ставит указатель,
+               а выше она растёт по содержимому. Без этой строки панель мерилась бы
+               содержимым внутри коробки и не дотягивалась до ширины поля. */
             width: 100%;
-            max-height: var(--rt-input-panel-max-height);
+            max-height: var(--rt-multiselect-panel-max-height);
             box-sizing: border-box;
             border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
             border-radius: var(--rt-input-radius);

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

@@ -13,6 +13,7 @@
 | ---------------- | ----------------------------------------------------- | --------------- |
 | `pageModel`      | `IPageModel` (`pageNumber`, `pageSize`, `totalCount`) | **обязателен**  |
 | `perPageOptions` | `ReadonlyArray<number>`                               | `[20, 50, 100]` |
+| `numbering`      | `'neighbours' \| 'seven'`                             | `'neighbours'`  |
 | `loading`        | `boolean`                                             | `false`         |
 
 | выход           | тип      |
@@ -34,7 +35,9 @@
 - Во время загрузки заблокированы и номера, и стрелки — иначе второй клик ушёл бы поверх ещё
   не пришедшего ответа.
 - Полоса номеров показывает первую, последнюю и по одному соседу открытой страницы; между ними —
-  «…». При единственной странице номеров нет вовсе.
+  «…». При единственной странице номеров нет вовсе. `numbering="seven"` считает номера по семи
+  местам, как первый кит: `1 2 3 … 11 12 13` у краёв, одна страница — номер 1 между стрелками.
+  Так её просит список под материальным набором.
 - Узкая и широкая разметки живут в DOM **одновременно** (`pagination-compact` и
   `pagination-nav`): какую показать, решает медиазапрос, а не условная отрисовка.
 - **У пустого набора нет своего вида строки диапазона — бар при нём спрятан целиком.** Ветка на

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

@@ -1,22 +1,35 @@
 @layer rt-kit.components {
     .rt-pagination {
-        --rt-pagination-page-radius: var(--rt-radius-md);
+        --rt-pagination-page-radius: var(--rt-pagination-box-radius);
         --rt-pagination-page-border-width: var(--rt-border-width-thin);
         --rt-pagination-focus-shadow: var(--rt-shadow-focus-ring);
         --rt-pagination-transition-duration: var(--rt-duration-fast);
 
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: var(--rt-space-4) var(--rt-space-xs);
+        justify-content: var(--rt-pagination-justify);
+        padding: var(--rt-pagination-padding-y) var(--rt-pagination-padding-x);
 
         // Адаптив завязан на собственную ширину компонента, а не на viewport:
         // в узком контейнере (зажатая таблица / aside) числовая полоса прячется,
         // показывается compact-форма «‹ Стр. N из M ›».
         container-type: inline-size;
-        gap: var(--rt-space-md);
+        gap: var(--rt-pagination-gap);
+
+        // Стрелки — кнопки-значки кита; ячейкой полосы их делают её имена: размер, скругление,
+        // рамка тенью и цвет значка. Свой вид оставляет их прежними кнопками-значками.
+        rt-icon-button {
+            --rt-icon-button-color: var(--rt-pagination-arrow-color);
+        }
+
+        .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-shadow: var(--rt-pagination-arrow-shadow);
+        }
 
         &__range {
+            display: var(--rt-pagination-range-display);
             color: var(--rt-color-text-muted);
             font-size: var(--rt-text-sm);
             white-space: nowrap;
@@ -25,7 +38,7 @@
         &__nav {
             display: flex;
             align-items: center;
-            gap: var(--rt-space-xs);
+            gap: var(--rt-pagination-nav-gap);
         }
 
         // Compact-форма по умолчанию скрыта — показывается только в узком контейнере.
@@ -42,14 +55,18 @@
         }
 
         &__page {
-            min-width: var(--rt-space-xl);
-            height: var(--rt-space-xl);
+            min-width: var(--rt-pagination-box-size);
+            height: var(--rt-pagination-box-size);
             padding: 0 var(--rt-space-sm);
-            border: var(--rt-pagination-page-border-width) solid var(--rt-color-border-default);
+            border: var(--rt-pagination-page-border-width) solid var(--rt-pagination-box-color-border);
             border-radius: var(--rt-pagination-page-radius);
             background: transparent;
-            color: var(--rt-color-text-primary);
+            color: var(--rt-pagination-box-color-text);
             cursor: pointer;
+
+            // Кнопке браузер даёт свой шрифт, а не шрифт страницы.
+            font: inherit;
+            font-size: var(--rt-text-sm);
             transition:
                 background-color var(--rt-pagination-transition-duration) ease,
                 border-color var(--rt-pagination-transition-duration) ease,
@@ -67,9 +84,10 @@
             }
 
             &--current {
-                border-color: var(--rt-color-border-strong);
-                background: var(--rt-color-bg-surface-subtle);
-                font-weight: var(--rt-font-weight-semibold);
+                border-color: var(--rt-pagination-box-current-color-border);
+                background: var(--rt-pagination-box-current-color-bg);
+                color: var(--rt-pagination-box-current-color-text);
+                font-weight: var(--rt-pagination-box-current-font-weight);
             }
 
             &:disabled {
@@ -83,15 +101,27 @@
             color: var(--rt-color-text-muted);
         }
 
+        // Поле размера — выпадающий список кита; высоту, скругление, рамку и отступ ему дают имена
+        // полосы через свойства поля.
         &__per-page {
+            --rt-input-height: var(--rt-pagination-field-height);
+            --rt-input-radius: var(--rt-pagination-field-radius);
+            --rt-input-color-border: var(--rt-pagination-field-color-border);
+            --rt-input-padding-x: var(--rt-pagination-field-padding-x);
+            --rt-input-color-bg: var(--rt-pagination-field-color-bg);
+            --rt-input-color-text: var(--rt-pagination-field-color-text);
+
             display: flex;
             align-items: center;
-            gap: var(--rt-space-sm);
+            gap: var(--rt-pagination-per-page-gap);
         }
 
+        // Свой вид переносит подпись: на узком экране поле иначе уходит за край. Материальный набор
+        // держит её в строку, как первый кит.
         &__per-page-label {
             color: var(--rt-color-text-muted);
             font-size: var(--rt-text-sm);
+            white-space: var(--rt-pagination-per-page-label-white-space);
         }
     }
 

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

@@ -0,0 +1,42 @@
+# `rt-radio-button`
+
+```html
+<rt-radio-button label="Москва" [value]="moscow" [formControl]="city" />
+<rt-radio-button ariaLabel="Выбрать запись" [value]="row.id" [checked]="chosen() === row.id" (checkedChange)="chosen.set(row.id)" />
+```
+
+| вход          | тип               | умолчание |
+| ------------- | ----------------- | --------- |
+| `value`       | `unknown`         | —         |
+| `checked`     | `boolean \| null` | `null`    |
+| `disabled`    | `boolean`         | `false`   |
+| `card`        | `boolean`         | `false`   |
+| `label`       | `string`          | `''`      |
+| `description` | `string`          | `''`      |
+| `ariaLabel`   | `string \| null`  | `null`    |
+
+Выходы: `clickAction` — каждое нажатие указателем, `checkedChange` — радиокнопка стала выбранной.
+
+## Главное, что нужно знать
+
+**Выбрана та, чьё значение — сама модель, а не равное ей.** Две записи с одинаковым содержимым —
+два разных значения.
+
+**Выбор приходит двумя путями.** Форма пишет модель через `ControlValueAccessor`; без формы
+выбранность ставится входом `checked`, и он решает раньше модели. Не заданный `checked` — `null`.
+
+**Нажатие на выбранную ничего не меняет**, но помечает контрол тронутым и сообщается `clickAction`.
+Нажатие дальше радиокнопки не идёт. Выбор клавишей `clickAction` не сообщает.
+
+## Как этим пользоваться
+
+- Отключение приходит двумя путями — вход `[disabled]` и `FormControl.disable()`; недоступна, если
+  так сказал любой.
+- Несколько радиокнопок на одном поле формы: выбор одной снимает точку с прежней — каждая слушает
+  сам контрол, и только нынешний: сменённый `[formControl]` или `[formGroup]` прежний бросает.
+  Для таблицы и списков — вход `checked`.
+- Кружок без подписи получает имя через `ariaLabel`.
+
+## Рядом
+
+- [`rt-checkbox`](../checkbox/CONTEXT.md) — независимый выбор «да / нет».

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

@@ -0,0 +1,105 @@
+@layer rt-kit.components {
+    /* rt-radio-button — радиокнопка. ViewEncapsulation.None, как у галочки: класс блока висит и на
+       хосте, и на корне шаблона, поэтому правила блока вложены в хост. Размеры образца лежат на
+       шкале кита: кружок 16px — ступень габарита, точка 6px округлена к ближней ступени 8px,
+       поля карточки 12 и 16px — к ступеням отступа 8 и 16px. Текст выравнивается по началу, что бы
+       ни стояло вокруг: ячейка, центрующая текст, уводила пояснение под середину подписи. */
+
+    rt-radio-button {
+        display: inline-block;
+    }
+
+    rt-radio-button .rt-radio-button {
+        --rt-radio-button-size: var(--rt-size-4);
+        --rt-radio-button-dot-size: var(--rt-size-2);
+        --rt-radio-button-rim-width: var(--rt-border-width-medium);
+        --rt-radio-button-round: var(--rt-radius-full);
+        --rt-radio-button-focus-radius: var(--rt-radius-sm);
+        --rt-radio-button-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-radio-button-card-radius: var(--rt-radius-md);
+        --rt-radio-button-card-border-width: var(--rt-border-width-thin);
+        --rt-radio-button-transition-duration: var(--rt-duration-fast);
+
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        gap: var(--rt-space-sm);
+        text-align: start;
+
+        &:focus-visible {
+            border-radius: var(--rt-radio-button-focus-radius);
+            box-shadow: var(--rt-radio-button-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
+
+        &__indicator {
+            display: inline-flex;
+            width: var(--rt-radio-button-size);
+            height: var(--rt-radio-button-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-radio-button-rim-width) solid var(--rt-color-border-strong);
+            border-radius: var(--rt-radio-button-round);
+            transition: border-color var(--rt-radio-button-transition-duration) ease;
+        }
+
+        &__dot {
+            width: var(--rt-radio-button-dot-size);
+            height: var(--rt-radio-button-dot-size);
+            border-radius: var(--rt-radio-button-round);
+            background: var(--rt-color-action-primary);
+        }
+
+        &__content {
+            display: flex;
+            min-width: 0;
+            flex: 1;
+            flex-direction: column;
+            gap: var(--rt-space-xs);
+        }
+
+        &__label {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            user-select: none;
+        }
+
+        &__description {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+        }
+
+        /* Элемент адресуется классом, а не вторым `&`: родитель составной, и второй `&`
+           развернулся бы в селектор вложенной радиокнопки — так уже промахнулась галочка. */
+        &--checked .rt-radio-button__indicator {
+            border-color: var(--rt-color-action-primary);
+        }
+
+        &--card {
+            flex-direction: row-reverse;
+            align-items: flex-start;
+            justify-content: space-between;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            border: var(--rt-radio-button-card-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-radio-button-card-radius);
+            transition: border-color var(--rt-radio-button-transition-duration) ease;
+        }
+
+        &--card .rt-radio-button__label {
+            font-weight: var(--rt-font-weight-medium);
+        }
+
+        &--card.rt-radio-button--checked {
+            border-color: var(--rt-color-action-primary);
+        }
+
+        /* Состояние стоит ниже вида: отключение гасит карточку и выбор, обратного не бывает. */
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-opacity-disabled);
+            pointer-events: none;
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+# `rt-scroll-area`
+
+```html
+<rt-scroll-area [isScrollHintShown]="true">
+    <ng-container *rtScrollAreaHeader>
+        <h3>Заявки смены</h3>
+    </ng-container>
+    <ng-container *rtScrollAreaContent>
+        @for (row of rows(); track row.id) {
+        <rt-info-item [title]="row.title" />
+        }
+    </ng-container>
+    <ng-container *rtScrollAreaFooter>
+        <span>Всего: {{ rows().length }}</span>
+    </ng-container>
+</rt-scroll-area>
+```
+
+| вход                | тип       | умолчание |
+| ------------------- | --------- | --------- |
+| `isScrollHintShown` | `boolean` | `false`   |
+
+Выходов нет. Части объявляются тремя директивами: `rtScrollAreaHeader`, `rtScrollAreaContent`,
+`rtScrollAreaFooter`.
+
+## Главное, что нужно знать
+
+**Необъявленная часть не рисуется вовсе.** Пустая шапка — это полоса отступа над списком, и
+высоту она забирает у тела. Подан только `rtScrollAreaContent` — в разметке будет одно тело.
+
+**Признак непоказанного снизу выключен по умолчанию.** Область рисуют десятки экранов, и признак,
+поставленный безусловно, сдвинул бы вид каждому. Включается входом.
+
+**Признак встаёт до первого движения руки.** Событие прокрутки приходит только после того, как
+кто-то прокрутил, а список не влезает уже на первой отрисовке: за размером тела и подвала следит
+наблюдатель. Наблюдатели живут, только пока признак включён: без входа область не следит ни за чем
+и раскладку не читает.
+
+**Полоса растушёвки доходит до содержимого подвала, а не до края тела.** Разделитель потребитель
+рисует первой строкой подвала, и подъём полосы область измеряет сама — это высота подвала без его
+верхнего отступа. Без подвала полоса стоит у самого низа.
+
+## Как этим пользоваться
+
+- Высоту области задаёт потребитель: она берёт сто процентов своего хоста.
+- Нажатие на значок уводит тело к самому низу и в содержимое под значком не уходит.
+- Полоса не ловит указатель — нажатия по списку под ней проходят насквозь; значок ловит сам.
+- Перекрасить растушёвку можно свойством `--rt-scroll-area-hint-color` на блоке.
+
+## Договорённость
+
+`docs/specs/ui-kit-v2/scroll-area/` — девять правил и сценарии `SC-UKV-148`…`SC-UKV-156`.

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

@@ -0,0 +1,69 @@
+@layer rt-kit.components {
+    .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);
+
+        // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а
+        // полоса обязана дойти до содержимого подвала.
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        block-size: 100%;
+        inline-size: 100%;
+        min-block-size: 0;
+
+        &__header {
+            flex: 0 0 auto;
+            padding: var(--rt-space-2) var(--rt-space-4);
+        }
+
+        &__body {
+            display: flex;
+            overflow: auto;
+            flex: 1 1 auto;
+            flex-direction: column;
+            padding: var(--rt-space-4);
+            min-block-size: 0;
+        }
+
+        &__footer {
+            flex: 0 0 auto;
+            padding: var(--rt-space-4);
+        }
+
+        // Полоса стоит поверх стыка тела и подвала и не ловит указатель: под ней живой список,
+        // и перехваченное нажатие уводило бы человека мимо пункта. Значок ловит его сам — иначе
+        // подсказку не прочитать. Места в колонке полоса не занимает: занятое, оно отодвинуло бы
+        // последний пункт от края у каждого потребителя области.
+        &__scroll-hint {
+            position: absolute;
+            z-index: 1;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+
+            // Растушёвка красится фоном темы, а не уходит в `transparent`: прозрачный — это
+            // чёрный с нулевой прозрачностью, и на тёмной теме такой градиент идёт через грязь.
+            // Начало берётся тем же цветом с нулевой прозрачностью — переход остаётся чистым в
+            // обеих темах, а потребитель, перекрасивший область, получает свой цвет даром.
+            background: linear-gradient(to bottom, rgb(from var(--rt-scroll-area-hint-color) r g b / 0%), var(--rt-scroll-area-hint-color));
+            block-size: var(--rt-scroll-area-hint-height);
+            inset-inline: 0;
+            pointer-events: none;
+        }
+
+        // Значок сидит на своей подложке: без неё он ложится поверх растворяющегося содержимого
+        // и читается как его часть — на кадре его не отличить от полустёртого пункта.
+        &__scroll-hint-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-scroll-area-hint-radius);
+            background-color: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+    }
+}

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

@@ -39,6 +39,9 @@
 - `Enter`/`Space` выбирают подсвеченную, `Escape` закрывает без выбора.
 - Опции не фокусируются поодиночке: подсвеченная называется скринридеру через
   `aria-activedescendant` на триггере.
+- Подсвеченная опция **прокручивается в видимую часть панели** (`block: 'nearest'`): у панели
+  предел высоты, а фокус на триггере, и сам браузер её не прокручивает. То же у `rt-multiselect` и
+  `rt-autocomplete`.
 
 ## Края
 
@@ -46,7 +49,11 @@
 - `FormControl.disable()` **закрывает уже раскрытый** список — иначе панель висела бы над
   контролом, которым уже нельзя пользоваться.
 - Пустой набор опций рисует строку `uiNoOptions`.
-- Ширина панели равна ширине триггера (`rtPopoverWidth="trigger"`).
+- Ширина панели не меньше ширины триггера и дальше растёт по содержимому
+  (`rtPopoverWidth="trigger-min"`); вход `panelWidth` возвращает прежнее `trigger` или пускает
+  панель по содержимому целиком.
+- Высота панели упирается в предел кита `--rt-input-panel-max-height`, длинный список
+  прокручивается внутри. Вход `panelMaxHeight` ставит свой предел, `none` снимает его.
 
 ## Рядом