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

package/src/lib/components/delta-view/CONTEXT.md

@@ -28,4 +28,4 @@
 
 ## Рядом
 
-- [`rt-rich-editor`](../rich-editor/CONTEXT.md) — редактор, который эту модель производит.
+- [`rt-rich-editor`](../../../rich-editor/lib/components/rich-editor/CONTEXT.md) — редактор, который эту модель производит.

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

@@ -34,6 +34,10 @@ ref.afterClosed().subscribe((ok?: boolean): void => …);
 
 ## Главное, что нужно знать
 
+**Окно берёт материальный набор от кнопки в фокусе.** Панель лежит в конце страницы, вне
+контейнера с признаком набора, и класс набора получает, если признак стоит над узлом в фокусе в
+минуту открытия. Открытая не по нажатию — через `panelClass` приложения.
+
 **Прокрутка страницы блокируется на время диалога** (`scrollStrategies.block()`), а окно
 объявлено `role="dialog"` с `aria-modal="true"`.
 

package/src/lib/components/dynamic-list/CONTEXT.md

@@ -0,0 +1,90 @@
+# `rt-dynamic-list`
+
+```html
+<rt-dynamic-list
+    [pageModel]="page()"
+    [showRefresh]="true"
+    [showClearFilters]="true"
+    [filtered]="hasFilters()"
+    (searchChange)="onSearch($event)"
+    (refreshed)="reload()"
+    (pageChange)="onPage($event)">
+    <ng-container *rtDynamicListSelectors>
+        <rt-select [options]="stages()" />
+    </ng-container>
+
+    <rt-table [rows]="rows()" />
+</rt-dynamic-list>
+```
+
+| вход                 | тип                  | умолчание |
+| -------------------- | -------------------- | --------- |
+| `pageModel`          | `IPageModel \| null` | `null`    |
+| `loading`            | `boolean`            | `false`   |
+| `fetching`           | `boolean`            | `false`   |
+| `empty`              | `boolean`            | `false`   |
+| `filtered`           | `boolean`            | `false`   |
+| `showSearch`         | `boolean`            | `true`    |
+| `showRefresh`        | `boolean`            | `false`   |
+| `showClearFilters`   | `boolean`            | `false`   |
+| `showColumnSettings` | `boolean`            | `false`   |
+| `selectable`         | `boolean`            | `false`   |
+| `allSelected`        | `boolean`            | `false`   |
+| `someSelected`       | `boolean`            | `false`   |
+| `selectAllDisabled`  | `boolean`            | `false`   |
+| `selectedCount`      | `number`             | `0`       |
+| `emptyTitle`         | `string`             | `''`      |
+| `emptyDescription`   | `string \| null`     | `null`    |
+| `searchTerm`         | `string \| null`     | `''`      |
+
+Выходы: `searchChange`, `refreshed`, `filtersCleared`, `columnSettingsOpened`, `pageChange`,
+`perPageChange`, `allSelectedChange`. Стороны панели объявляются двумя директивами:
+`rtDynamicListSelectors` и `rtDynamicListActions`.
+
+## Главное, что нужно знать
+
+**Записи проецируются, а не приходят входом.** Таблица между панелью и страницами — потребителя:
+его колонки, его ячейки, его действия строки. Семья стоит вокруг и в неё не заглядывает.
+
+**Незаказанное действие не рисуется вовсе, а выключенное держит место.** Экран без обновления не
+показывает кнопку обновления; кнопка сброса отбора стоит и выключена, пока сбрасывать нечего, —
+это разные утверждения, и оба сделаны намеренно.
+
+**Пустых мест два.** Раздел без записей и отбор, ничего не нашедший, говорят человеку разное: из
+второго ему дают дорогу назад — сброс того, что он поставил.
+
+**Поиск не ходит наружу на каждое нажатие.** Значение сперва устаивается — готовым оператором
+ожидания кита, тем же, что стоит в списке переписок.
+
+**Полоса страниц рисуется, пока записей больше наименьшего размера страницы.** Это правило самой
+полосы: под списком из трёх записей она шум, а выбравший крупный размер, при котором всё легло на
+одну страницу, иначе не вернул бы размер поменьше.
+
+**Поле поиска следует за входом `searchTerm`, но эхо своего же поиска не ставит.** Новое значение
+потребителя ставится в поле, а значение, равное последнему отправленному, поле не трогает: ответ
+сервера или адресной строки, пришедший позже, не стирает дописанное человеком.
+
+**`filtersCleared` значит, что снят и поиск.** Сброс отбора очищает поле молча, отдельного пустого
+`searchChange` нет: потребитель по `filtersCleared` сам сбрасывает свой поиск и запрашивает список
+один раз.
+
+**Флажок «выбрать все» стоит, пока выбор включён, и счётчик встаёт рядом с ним.** Выбрав что-то,
+человек сохраняет способ снять весь выбор одним нажатием.
+
+**Полоса панели переносит непоместившееся сама.** Поиск уходит на свою строку, когда рядом с
+действиями ему места нет: без этого список раздался бы шире хозяина и уехал за его край.
+
+**Ниже порога кита поиск занимает всю строку.** Порог — 1080 точек, объявлен медиазапросом по
+общему файлу порогов. Ни описанием, ни входом его не включить: он виден только на кадре.
+
+## Как этим пользоваться
+
+- Высоту списка задаёт потребитель: он берёт сто процентов своего хоста.
+- Настройка колонок открывается потребителем: семья только говорит о нажатии.
+- Подписи приходят из словаря кита — `provideRtKitLabels`.
+- Расстояния и ширину поиска переопределяют свойствами блока — `--rt-dynamic-list-gap`,
+  `--rt-dynamic-list-search-width`.
+
+## Договорённость
+
+`docs/specs/ui-kit-v2/dynamic-list/` — восемь правил и сценарии `SC-UKV-165`…`SC-UKV-174`.

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

@@ -0,0 +1,123 @@
+@use '../../../styles/breakpoints' as bp;
+
+@layer rt-kit.components {
+    .rt-dynamic-list {
+        --rt-dynamic-list-gap: var(--rt-space-4);
+        --rt-dynamic-list-search-width: var(--rt-size-64);
+        --rt-dynamic-list-veil-bg: var(--rt-color-bg-surface);
+
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        block-size: 100%;
+        gap: var(--rt-dynamic-list-gap);
+        inline-size: 100%;
+        min-block-size: 0;
+
+        &__loader {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-8);
+        }
+
+        // Вертушка подгрузки стоит над нарисованным: записи остаются на месте, и человек видит,
+        // что список тот же самый, а не подменённый. Над шапкой таблицы потребителя её держит
+        // замкнутый ярус области записей: шапка со своим ярусом sticky поднимается только внутри
+        // него.
+        &__veil {
+            position: absolute;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: color-mix(in srgb, var(--rt-dynamic-list-veil-bg) 60%, transparent);
+            inset: 0;
+        }
+
+        // Полоса панели: отбор слева, действия и поиск справа. Переносится, когда не влезает —
+        // судьба непоместившегося названа здесь, у самой полосы.
+        &__toolbar {
+            display: flex;
+            flex: 0 0 auto;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-2);
+            min-inline-size: 0;
+        }
+
+        &__selectors {
+            display: flex;
+            flex: 0 1 auto;
+            align-items: center;
+            gap: var(--rt-space-2);
+            min-inline-size: 0;
+        }
+
+        &__counter {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        // Панель переносит поиск на свою строку, когда он не влезает рядом с действиями. Судьба
+        // непоместившегося названа здесь, а не оставлена на волю потребителя: без переноса список
+        // раздаётся шире хозяина и уезжает за его край — медиазапрос этого не ловит, ширина там
+        // своя, а не оконная.
+        &__right {
+            display: flex;
+            flex: 1 1 auto;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: flex-end;
+            gap: var(--rt-space-2);
+            min-inline-size: 0;
+        }
+
+        &__actions {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: var(--rt-space-1);
+        }
+
+        // Поле поиска ужимается вместе с панелью: ширина названа потолком, а не размером. Жёсткая
+        // ширина выталкивала бы действия за край у потребителя с узкой панелью, и никакой запрос
+        // этого не поймал бы — ширина там своя, а не оконная.
+        &__search {
+            flex: 1 1 auto;
+            max-inline-size: var(--rt-dynamic-list-search-width);
+            min-inline-size: 0;
+        }
+
+        // Свой ярус: что бы потребитель ни поднял внутри таблицы, над вертушкой подгрузки оно не встанет.
+        &__content {
+            display: flex;
+            overflow: auto;
+            flex: 1 1 auto;
+            flex-direction: column;
+            isolation: isolate;
+            min-block-size: 0;
+        }
+
+        &__empty {
+            flex: 1 1 auto;
+        }
+
+        &__pagination {
+            flex: 0 0 auto;
+        }
+
+        // Узкий экран объявлен запросом, а не условием в разметке. Порог тот же, о котором
+        // отвечает служба порогов кита, и берётся он из общего файла порогов.
+        @media (width <= #{bp.$rt-bp-lg}) {
+            &__right {
+                flex-wrap: wrap;
+            }
+
+            &__search {
+                max-inline-size: none;
+            }
+        }
+    }
+}

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

@@ -29,6 +29,11 @@
 - Иконка рисуется крупной (`xl`, 32px) и приглушённой: это заглушка, а не аффорданс. Кликабельным
   должно быть проецируемое действие.
 - Слот действия существует всегда, даже пустым; прячет его `:empty` в стилях.
+- Размеры и подложка — свойства блока: `--rt-empty-state-icon-wrap-size`,
+  `--rt-empty-state-icon-wrap-bg`, `--rt-empty-state-icon-size`, `--rt-empty-state-title-size`,
+  `--rt-empty-state-title-weight`. Список ставит им назначения `--rt-list-empty-*`. Под
+  материальным набором его заглушка рисуется как у первого кита: значок 48px без круга, заголовок
+  32px весом 400.
 
 ## Рядом
 

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

@@ -4,7 +4,13 @@
        Палитра приглушённая (как rt-note), центрированная вертикальная стопка. */
 
     .rt-empty-state {
+        /* Свои свойства блока — круг под значком, значок и заголовок; обёртка переставляет их снаружи. */
         --rt-empty-state-icon-radius: var(--rt-radius-full);
+        --rt-empty-state-icon-wrap-size: var(--rt-size-16);
+        --rt-empty-state-icon-wrap-bg: var(--rt-color-bg-subtle);
+        --rt-empty-state-icon-size: var(--rt-size-8);
+        --rt-empty-state-title-size: var(--rt-text-md);
+        --rt-empty-state-title-weight: var(--rt-font-weight-medium);
 
         display: flex;
         flex-direction: column;
@@ -25,21 +31,29 @@
 
         &__icon-wrap {
             display: flex;
-            width: 64px;
-            height: 64px;
+            width: var(--rt-empty-state-icon-wrap-size);
+            height: var(--rt-empty-state-icon-wrap-size);
             align-items: center;
             justify-content: center;
             border-radius: var(--rt-empty-state-icon-radius);
             margin-bottom: var(--rt-space-xs);
-            background: var(--rt-color-bg-subtle);
+            background: var(--rt-empty-state-icon-wrap-bg);
             color: var(--rt-color-text-muted);
+
+            /* rt-icon ставит размер строкой стиля — свойство блока берёт верх через min и max. */
+            .rt-icon {
+                min-width: var(--rt-empty-state-icon-size);
+                max-width: var(--rt-empty-state-icon-size);
+                min-height: var(--rt-empty-state-icon-size);
+                max-height: var(--rt-empty-state-icon-size);
+            }
         }
 
         &__title {
             margin: 0;
             color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-md);
-            font-weight: var(--rt-font-weight-medium);
+            font-size: var(--rt-empty-state-title-size);
+            font-weight: var(--rt-empty-state-title-weight);
         }
 
         &__description {

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

@@ -24,6 +24,13 @@
         background-color: var(--rt-color-bg-surface);
         gap: var(--rt-file-card-gap);
 
+        /* Карточка берёт ширину места, которое ей дали, и не растёт за него. В ячейке сетки
+           элемент по умолчанию не ужимается ниже своего содержимого — min-inline-size снимает
+           этот пол, max-inline-size держит верх. Без пары карточка мерилась 613 при ячейке 272
+           и ложилась на соседнюю. */
+        max-inline-size: 100%;
+        min-inline-size: 0;
+
         &--sm {
             --rt-file-card-padding-block: var(--rt-space-xs);
             --rt-file-card-padding-inline: var(--rt-space-sm);
@@ -74,9 +81,16 @@
             white-space: nowrap;
         }
 
+        /* Имя приходит от потребителя, и его длину кит не выбирает. Без судьбы того, что не
+           влезло, имя переносилось на вторую строку, растило строку карточки и уезжало под
+           плашку веса: ни имени, ни веса было не прочесть. Одна строка с многоточием — то же,
+           что уже стоит у заголовка над ним; целое имя показывает подсказка. */
         &__name {
+            overflow: hidden;
             color: var(--rt-color-text-muted);
             font-size: var(--rt-file-card-name-size);
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         &__meta {

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

@@ -9,6 +9,13 @@
         --rt-file-drop-border-width: var(--rt-border-width-thin);
         --rt-file-drop-transition-duration: var(--rt-duration-fast);
 
+        /* Отступы рамки-приглашения и кегль подписи: на низкой области их перебивает запрос
+           о размере коробки, написанный ниже. Значения по умолчанию — те, что стояли тут
+           прямыми шагами, так что вид не сдвинулся. */
+        --rt-file-drop-frame-inset: var(--rt-space-lg);
+        --rt-file-drop-frame-padding: var(--rt-space-md);
+        --rt-file-drop-label-size: var(--rt-text-lg);
+
         position: relative;
         display: block;
         height: 100%;
@@ -16,15 +23,26 @@
         &__overlay {
             position: absolute;
             z-index: 50;
+
+            /* Оверлей — единица измерения для запроса о размере коробки. Признак стоит на нём,
+               а не на host'е: у host'а высота приходит от содержимого, и containment по обеим
+               осям схлопнул бы её в ноль. Оверлей же всегда меряется по host'у — размер у него
+               определён независимо от того, что внутри. Своих отступов у него поэтому нет:
+               запрос не достаёт до собственной коробки контейнера, и зазор рамки задан ей
+               самой. */
             display: flex;
+
+            /* Кит не рисует за пределами своей коробки: подпись, которой не хватило места даже
+               в сжатом виде, обрезается здесь, а не ложится на соседа потребителя. */
+            overflow: hidden;
             align-items: center;
             justify-content: center;
-            padding: var(--rt-space-lg);
             border-radius: var(--rt-file-drop-radius);
             /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
             -webkit-backdrop-filter: blur(4px);
             backdrop-filter: blur(4px);
             background: rgb(0 0 0 / 45%);
+            container-type: size;
 
             /* Отступ от краёв host'а — рамка-приглашение не прижата к границе зоны. */
             inset: var(--rt-space-sm);
@@ -40,20 +58,22 @@
         }
 
         &__frame {
+            position: absolute;
             display: flex;
-            width: 100%;
-            height: 100%;
 
-            /* border-box: иначе height:100% + padding переполняет контейнер по
-               вертикали (flex-shrink ужимает только ширину) — зазор рамки сверху/снизу
-               выходит меньше, чем слева/справа. */
+            /* border-box: иначе отступ рамки прибавлялся бы к её коробке и зазор сверху и
+               снизу выходил бы меньше, чем слева и справа. */
             box-sizing: border-box;
             align-items: center;
             justify-content: center;
-            padding: var(--rt-space-md);
+            padding: var(--rt-file-drop-frame-padding);
             border: var(--rt-file-drop-border-width) dashed var(--rt-color-action-on-primary);
             border-radius: var(--rt-file-drop-radius);
             gap: var(--rt-space-sm);
+
+            /* Зазор от краёв оверлея задан рамке, а не отступом оверлея: оверлей — контейнер
+               запроса, и до его собственной коробки запрос не достаёт, а до рамки достаёт. */
+            inset: var(--rt-file-drop-frame-inset);
             text-align: center;
         }
 
@@ -84,7 +104,7 @@
 
         &__label {
             color: var(--rt-color-action-on-primary);
-            font-size: var(--rt-text-lg);
+            font-size: var(--rt-file-drop-label-size);
             font-weight: var(--rt-font-weight-semibold);
         }
 
@@ -94,4 +114,20 @@
             opacity: 0.8;
         }
     }
+
+    /* Сжатый вид подсказки. Слова подсказки пишет сам кит, и на низкой области они не
+       помещаются в полный размер: подпись мерилась 84 при коробке 66 и торчала за верхнюю и
+       нижнюю границы разом. Обрезать её посередине слова нельзя — читатель не узнает, что
+       слово унесли, — поэтому уменьшаются отступы и кегль.
+
+       Запрос обращён к оверлею: признак `container-type: size` стоит на нём. Порог выбран по
+       измерению — при 66 подпись в полный размер не помещается, при 130 помещается вместе с
+       подписью зоны. */
+    @container (max-height: 6rem) {
+        .rt-file-drop__frame {
+            --rt-file-drop-frame-inset: var(--rt-space-2xs);
+            --rt-file-drop-frame-padding: var(--rt-space-2xs);
+            --rt-file-drop-label-size: var(--rt-text-xs);
+        }
+    }
 }

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

@@ -42,8 +42,14 @@
                `box-shadow` целиком и тень покоя на это время снимает — списком они встанут
                только тогда, когда покой перестанет быть `none`. */
             --rt-icon-button-shadow: var(--rt-shadow-none);
+            --rt-icon-button-shadow-hover: var(--rt-icon-button-shadow);
+            --rt-icon-button-color-hover: var(--rt-icon-button-color);
             --rt-icon-button-transition-duration: var(--rt-duration-fast);
 
+            /* Заливка покоя — своим свойством: неактивная кнопка берёт из неё долю, которую задаёт
+               набор оформления. */
+            --rt-icon-button-bg: transparent;
+
             position: relative;
             display: inline-flex;
             width: var(--rt-icon-button-size);
@@ -52,7 +58,7 @@
             justify-content: center;
             padding: 0;
             border: 0;
-            background: transparent;
+            background-color: var(--rt-icon-button-bg);
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
@@ -96,9 +102,16 @@
                 border-radius: var(--rt-icon-button-square-radius);
             }
 
+            /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
+               тени покоя, и кнопка без подъёма под указателем не меняется. */
+            &:hover:not(:disabled) {
+                box-shadow: var(--rt-icon-button-shadow-hover);
+            }
+
             &--ghost {
                 &:hover:not(:disabled) {
                     background-color: var(--rt-icon-button-color-bg-hover);
+                    color: var(--rt-icon-button-color-hover);
                 }
 
                 &.rt-icon-button--active {
@@ -107,7 +120,8 @@
             }
 
             &--primary {
-                background-color: var(--rt-color-action-primary);
+                --rt-icon-button-bg: var(--rt-color-action-primary);
+
                 color: var(--rt-color-action-on-primary);
 
                 &:hover:not(:disabled) {
@@ -116,7 +130,8 @@
             }
 
             &--secondary {
-                background-color: var(--rt-color-bg-surface-subtle);
+                --rt-icon-button-bg: var(--rt-color-bg-surface-subtle);
+
                 color: var(--rt-color-text-primary);
 
                 &:hover:not(:disabled) {
@@ -160,9 +175,18 @@
                 }
             }
 
+            /* Цвет неактивной кнопки ставится рисунку значка: по умолчанию `currentcolor`, то есть цвет
+               значка, и свой вид остаётся прежним. Не самому значку — переданный цвет он ставит себе
+               встроенным стилем, и правилом его не перебить. Заливка остаётся долей заливки покоя: по умолчанию
+               вся, и свой вид прежний. */
             &:disabled {
+                background-color: color-mix(in srgb, var(--rt-icon-button-bg) var(--rt-icon-button-disabled-fill), transparent);
                 cursor: not-allowed;
-                opacity: 0.5;
+                opacity: var(--rt-icon-button-disabled-opacity);
+
+                .rt-icon svg {
+                    color: var(--rt-icon-button-disabled-color);
+                }
             }
 
             &:focus-visible {

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

@@ -1,5 +1,6 @@
 @layer rt-kit.components {
     .rt-input {
+        --rt-input-fill-radius: var(--rt-radius-sm);
         --rt-input-toggle-radius: var(--rt-radius-sm);
 
         position: relative;
@@ -15,7 +16,7 @@
         color: var(--rt-input-color-text);
         cursor: text;
         font-size: var(--rt-input-font-size);
-        gap: var(--rt-space-sm);
+        gap: var(--rt-input-gap);
         line-height: var(--rt-input-line-height);
         transition: var(--rt-input-transition);
 
@@ -32,6 +33,17 @@
             border-color: transparent;
         }
 
+        /* Вид «fill» — залитое поле с чертой снизу, как у материального поля первого кита: скругление
+           у него своё и малое — скругление поля бывает «таблеткой», а у залитого поля низ прямой.
+           Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
+           перекрывают его рамку. */
+        &--appearance--fill {
+            border-color: transparent;
+            border-radius: var(--rt-input-fill-radius) var(--rt-input-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);
 
@@ -98,6 +110,18 @@
             flex-shrink: 0;
         }
 
+        /* Размер и цвет значка приходят от самого значка встроенным стилем и правилом не перебиваются.
+           Нижняя граница размер расширяет, а приглушённый тон значок берёт из свойства, которое читает
+           его встроенный стиль: так набор оформления даёт значку поля вид первого кита, не трогая входов
+           значка. По умолчанию оба равны нынешним, и вид не меняется. */
+        &__icon-left,
+        &__icon-right {
+            --rt-icon-color-muted: var(--rt-input-icon-color);
+
+            min-width: var(--rt-input-icon-size);
+            min-height: var(--rt-input-icon-size);
+        }
+
         &__toggle {
             display: inline-flex;
             flex-shrink: 0;

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

@@ -1,5 +1,7 @@
 @layer rt-kit.components {
     .rt-input-number {
+        --rt-input-number-fill-radius: var(--rt-radius-sm);
+
         position: relative;
         display: inline-flex;
         width: 100%;
@@ -30,6 +32,17 @@
             border-color: transparent;
         }
 
+        /* Вид «fill» — залитое поле с чертой снизу, как у материального поля первого кита: скругление
+           у него своё и малое — скругление поля бывает «таблеткой», а у залитого поля низ прямой.
+           Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
+           перекрывают его рамку. */
+        &--appearance--fill {
+            border-color: transparent;
+            border-radius: var(--rt-input-number-fill-radius) var(--rt-input-number-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);
 

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

@@ -24,6 +24,13 @@
 | `align`     | `'start' \| 'end'` | `'end'`            |
 | `disabled`  | `boolean`          | `false`            |
 
+| выход          | тип       |
+| -------------- | --------- |
+| `openedChange` | `boolean` |
+
+`openedChange` приходит, когда панель открылась или закрылась — нажатием, выбором пункта,
+щелчком мимо или клавишей Escape. По нему таблица отмечает строку, чьё меню открыто.
+
 ## `rt-menu-item`
 
 | вход                                  | тип                                  | умолчание                         |
@@ -31,6 +38,7 @@
 | `label`                               | `string`                             | `''`                              |
 | `icon`                                | `IRtIcon.Name \| null`               | `null`                            |
 | `danger` / `disabled`                 | `boolean`                            | `false`                           |
+| `current`                             | `boolean`                            | `false`                           |
 | `tooltip`                             | `string`                             | — (через `[rtTooltip]` на host-е) |
 | `confirmMessage`                      | `string`                             | `''`                              |
 | `confirmTitle`                        | `string \| null`                     | `null`                            |
@@ -57,6 +65,8 @@
 - Отключённый пункт не выбирается и меню не закрывает: он выпадает из таб-порядка (`tabindex`
   снимается) и помечается `aria-disabled`.
 - Enter и Space на пункте работают как клик.
+- Пункты для хода стрелками меню берёт из разметки панели, а не запросом компонентов: таблица
+  кладёт их шаблоном приложения, и запрос содержимого меню их не видит.
 - Панель объявлена `role="menu"`, пункт — `role="menuitem"`.
 
 ## Рядом