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

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

@@ -24,6 +24,12 @@
 **Отметки всплывающего окна уходят только по «Применить».** «Отмена», `Escape` и щелчок мимо
 снимают их, значение остаётся прежним.
 
+**Вид приглашения, очистки, поиска и пустого результата задаёт приложение входами.** Значок и вид
+кнопки приглашения — `invitationButtonIcon` и `invitationButtonAppearance`, значок очистки —
+`clearIcon`, вид поля поиска окна — `searchAppearance`, подпись пустого результата —
+`emptyResultsText`; у поля строк вид поля новой строки — `fieldAppearance`. Цвет кнопки «Добавить»
+— ручка `--rt-dynamic-selector-list-add-color`: кнопку проецируют оба поля, и вид у неё разный.
+
 **Поле строк срезает пробелы по краям и не добавляет пустое и повторное.** Повтор сравнивается
 точно, с учётом регистра.
 
@@ -37,6 +43,18 @@
 - Приглашение (`invitation`) встаёт вместо полосы кнопок; его кнопка открывает тот же выбор.
   `listActionsShown = false` убирает сброс и очистку, оставляя кнопку добавления;
   `removeShown = false` убирает корзину строк.
+  Рисунок приглашения — значок кита `invitationIcon` или имя Material `invitationGlyph`; при обоих
+  рисуется значок кита.
+- Подпись поля — обёртка `rt-field` с `label`, как у любого поля кита. У поля строк она ведёт к полю
+  новой строки, пока оно открыто.
+- Выбранное без формы — вход `chosenEntities`: непустой список с другими ключами становится и
+  значением, и списком для «Сбросить»; эхо выбора от родителя ничего не меняет.
+- `titleWrap="false"` — название строки одной строкой с многоточием и подсказкой при обрезке.
+- Подпись самого поля новой строки — вход `fieldLabel`: поле встаёт в `rt-field` с этой подписью.
+  Без подписи обёртки нет, и поле стоит как раньше.
+- Вид кнопки приглашения, значок очистки, вид поиска, подпись пустого результата и перенос названия
+  строки приложение задаёт один раз — `provideRtKit({ components: { dynamicSelector: { … } } })`.
+  Вход на месте сильнее, без настроек остаются умолчания кита.
 - Правки в своём шаблоне строки — `extraChanged`: сброс и очистка включены при прежних ключах и
   сообщают `listReset` и `listCleared`, значение сброс тогда не трогает.
 - Начальный запрос окна — `searchTerm`, событием поиска он не уходит. Открыто ли окно — сигнал

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

@@ -9,6 +9,10 @@
         --rt-dynamic-selector-list-divider-width: var(--rt-border-width-thin);
         --rt-dynamic-selector-list-drag-shadow: var(--rt-shadow-md);
         --rt-dynamic-selector-list-drag-duration: var(--rt-duration-base);
+        --rt-dynamic-selector-list-row-padding-x: var(--rt-space-sm);
+        --rt-dynamic-selector-list-add-font-weight: var(--rt-font-weight-medium);
+        --rt-dynamic-selector-list-add-indent: 0;
+        --rt-dynamic-selector-list-reset-color: var(--rt-color-text-primary);
 
         display: flex;
         flex-direction: column;
@@ -25,7 +29,7 @@
             min-height: var(--rt-control-height-lg);
             box-sizing: border-box;
             align-items: center;
-            padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-sm);
+            padding: var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-space-2xs) var(--rt-dynamic-selector-list-row-padding-x);
             border-radius: var(--rt-dynamic-selector-list-row-radius);
             background: var(--rt-dynamic-selector-list-row-bg);
             color: var(--rt-color-text-primary);
@@ -44,6 +48,13 @@
             flex: 1 1 auto;
             font-size: var(--rt-text-md);
             overflow-wrap: anywhere;
+
+            // Название одной строкой: длинное режется многоточием, а полный текст даёт подсказка.
+            &--nowrap {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
 
         &__field {
@@ -69,6 +80,23 @@
             min-width: 0;
             flex: 1 1 auto;
             align-items: center;
+            padding-inline-start: var(--rt-dynamic-selector-list-add-indent);
+        }
+
+        // Кнопку «Добавить» проецируют два хозяина, и вид у неё разный: у выбора вторичный, у
+        // ввода основной. Поэтому цвет — ручка потребителя: не задан — кнопка остаётся своего цвета.
+        &__add .rt-button {
+            color: var(--rt-dynamic-selector-list-add-color, var(--rt-btn-color));
+            font-weight: var(--rt-dynamic-selector-list-add-font-weight);
+        }
+
+        // Значок «Сбросить» красится цветом кнопки; выключенная кнопка остаётся приглушённой.
+        &__reset.rt-icon-button {
+            --rt-icon-button-color: var(--rt-dynamic-selector-list-reset-color);
+        }
+
+        &__clear {
+            flex: none;
         }
 
         // Строка в полёте живёт у конца страницы, вне блока: свойства объявлены на ней самой.

package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss

@@ -4,42 +4,63 @@
     /* rt-dynamic-selector-popup — панель выбора в CDK Overlay. ViewEncapsulation.None.
        Размер и вид сняты с кадров первого кита: 20rem на 30rem, поверхность с рамкой и тенью. */
 
+    /* Свойства окна приложение задаёт на любом предке — на панели оверлея или на своём контейнере:
+       на самом окне объявлены только умолчания с приставкой `-default`, а читается свойство с
+       запасным значением. Объявленное на окне под публичным именем перебило бы правило предка. */
     .rt-dynamic-selector-popup {
-        --rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);
-        --rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));
-        --rt-dynamic-selector-popup-radius: var(--rt-radius-md);
-        --rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);
-        --rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);
+        --rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);
+        --rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));
+        --rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);
+        --rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);
+        --rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);
+        --rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);
+        --rt-dynamic-selector-popup-min-height-default: 0;
+        --rt-dynamic-selector-popup-padding-default: var(--rt-space-md);
+        --rt-dynamic-selector-popup-foot-border-width-default: var(
+            --rt-dynamic-selector-popup-border-width,
+            var(--rt-dynamic-selector-popup-border-width-default)
+        );
+        --rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);
+
+        /* Кнопки «Отмена» и «Применить» по умолчанию той же высоты и кегля, что кнопка кита среднего шага. */
+        --rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);
+        --rt-dynamic-selector-popup-button-font-size-default: 0.95rem;
+
+        /* Заглушка «ничего не нашлось» по умолчанию повторяет свойства самой заглушки. */
+        --rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);
+        --rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);
+        --rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);
+        --rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);
+        --rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);
 
         display: flex;
-        width: var(--rt-dynamic-selector-popup-width);
+        width: var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));
         max-width: calc(100vw - var(--rt-space-md) * 2);
-        max-height: var(--rt-dynamic-selector-popup-max-height);
+        min-height: var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));
+        max-height: var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));
         box-sizing: border-box;
         flex-direction: column;
-        border: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-dynamic-selector-popup-radius);
-        background: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-dynamic-selector-popup-shadow);
+        border: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+            var(--rt-color-border-subtle);
+        border-radius: var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));
+        background: var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));
+        box-shadow: var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));
         color: var(--rt-color-text-primary);
         gap: var(--rt-space-sm);
-        padding-block: var(--rt-space-md);
+        padding-block: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
 
         &__head {
             display: flex;
             flex-direction: column;
             gap: var(--rt-space-sm);
-            padding-inline: var(--rt-space-md);
-        }
-
-        &__search {
-            display: block;
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
         }
 
         &__controls {
             display: flex;
             flex-direction: column;
-            border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+            border-bottom: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+                var(--rt-color-border-subtle);
 
             /* Строка переключателя и «Выбрать все» — два разных решения; при зазоре 2xs флажок
                прилипал к переключателю и читался его частью. */
@@ -84,8 +105,11 @@
             display: block;
         }
 
+        // Тело окна — загрузка, список или пустой результат — занимает высоту, которую оставили шапка и
+        // футер: при заданной наименьшей высоте окна футер стоит у нижней кромки, а не под коротким телом.
         &__state {
             display: flex;
+            flex: 1 1 auto;
             align-items: center;
             justify-content: center;
             padding: var(--rt-space-md);
@@ -97,7 +121,7 @@
             flex: 1 1 auto;
             flex-direction: column;
             overflow-y: auto;
-            padding-inline: var(--rt-space-md);
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
         }
 
         // Шаг строки снят с первого кита: флажок и по отступу сверху и снизу — около 36px.
@@ -106,7 +130,8 @@
             padding-block: var(--rt-space-sm);
 
             &--separated {
-                border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+                border-bottom: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+                    var(--rt-color-border-subtle);
                 margin-block-end: var(--rt-space-2xs);
                 padding-block-end: var(--rt-space-sm);
             }
@@ -129,18 +154,44 @@
         }
 
         &__empty {
-            display: block;
-            padding-inline: var(--rt-space-md);
+            flex: 1 1 auto;
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
+        }
+
+        /* Свойства заглушки переставляются правилом из двух классов: объявление самой заглушки
+           стоит на том же элементе, и одним классом его не перебить. */
+        &__empty.rt-empty-state {
+            --rt-empty-state-icon-size: var(
+                --rt-dynamic-selector-popup-empty-icon-size,
+                var(--rt-dynamic-selector-popup-empty-icon-size-default)
+            );
+            --rt-empty-state-icon-wrap-bg: var(
+                --rt-dynamic-selector-popup-empty-icon-wrap-bg,
+                var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default)
+            );
+            --rt-empty-state-title-size: var(
+                --rt-dynamic-selector-popup-empty-text-size,
+                var(--rt-dynamic-selector-popup-empty-text-size-default)
+            );
+            --rt-empty-state-title-weight: var(
+                --rt-dynamic-selector-popup-empty-text-weight,
+                var(--rt-dynamic-selector-popup-empty-text-weight-default)
+            );
+            --rt-empty-state-title-color: var(
+                --rt-dynamic-selector-popup-empty-text-color,
+                var(--rt-dynamic-selector-popup-empty-text-color-default)
+            );
         }
 
         &__foot {
             display: flex;
             align-items: center;
             justify-content: flex-end;
-            border-top: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+            border-top: var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid
+                var(--rt-color-border-subtle);
             gap: var(--rt-space-sm);
             padding-block-start: var(--rt-space-sm);
-            padding-inline: var(--rt-space-md);
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
 
             &--nav {
                 justify-content: space-between;
@@ -151,7 +202,7 @@
         &__nav {
             overflow: hidden;
             min-width: 0;
-            color: var(--rt-color-text-link);
+            color: var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));
             font-size: var(--rt-text-sm);
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -166,5 +217,13 @@
             flex: 0 0 auto;
             gap: var(--rt-space-sm);
         }
+
+        &__actions .rt-button {
+            --rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));
+            --rt-btn-font-size: var(
+                --rt-dynamic-selector-popup-button-font-size,
+                var(--rt-dynamic-selector-popup-button-font-size-default)
+            );
+        }
     }
 }

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

@@ -34,7 +34,8 @@
 - Слот действия существует всегда, даже пустым; прячет его `: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-*`. Под
+  `--rt-empty-state-title-weight`, `--rt-empty-state-title-color`,
+  `--rt-empty-state-description-size`. Список ставит им назначения `--rt-list-empty-*`. Под
   материальным набором его заглушка рисуется как у первого кита: значок 48px без круга, заголовок
   32px весом 400.
 

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

@@ -13,6 +13,8 @@
         --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);
+        --rt-empty-state-title-color: var(--rt-color-text-primary);
+        --rt-empty-state-description-size: var(--rt-text-sm);
         --rt-empty-state-frame-width: var(--rt-border-width-medium);
         --rt-empty-state-frame-color: var(--rt-color-border-strong);
         --rt-empty-state-frame-radius: var(--rt-radius-lg);
@@ -62,7 +64,7 @@
 
         &__title {
             margin: 0;
-            color: var(--rt-color-text-primary);
+            color: var(--rt-empty-state-title-color);
             font-size: var(--rt-empty-state-title-size);
             font-weight: var(--rt-empty-state-title-weight);
         }
@@ -71,7 +73,7 @@
             max-width: 320px;
             margin: 0;
             color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-sm);
+            font-size: var(--rt-empty-state-description-size);
             line-height: var(--rt-leading-normal);
         }
 

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

@@ -25,6 +25,7 @@
 | `errors`           | `Record<validatorKey, string>` | `{}`      |
 | `readonly`         | `boolean`                      | `false`   |
 | `loading`          | `boolean`                      | `false`   |
+| `required`         | `boolean`                      | `false`   |
 | `hideRequiredMark` | `boolean`                      | `false`   |
 | `reserveHintSpace` | `boolean`                      | `false`   |
 
@@ -35,8 +36,8 @@
 
 - выдаёт контролу авто-идентификатор (`rt-field-N`) и связывает с ним `<label for>`, если у
   контрола нет своего `controlId`;
-- рисует «\*», если у контрола есть валидатор обязательности (обнаруживается сам, входа для этого
-  нет);
+- рисует «\*», если у контрола есть валидатор обязательности (обнаруживается сам) или у поля стоит
+  вход `required`;
 - показывает текст ошибки и включает режим плоского чтения.
 
 Всё это работает только для контролов кита. Обычный `<input>` внутрь класть можно, но подписи,
@@ -53,6 +54,21 @@
 
 Ошибка появляется только после касания или правки контрола — это решает сам контрол, а не поле.
 
+## Обязательность без валидатора
+
+Шаблонная форма (`ngModel`) валидатора на контрол не кладёт, и обязательным поле само себя не
+объявит. Для неё у поля есть вход `required`:
+
+```html
+<rt-field label="Имя" required>
+    <rt-input [(ngModel)]="name" />
+</rt-field>
+```
+
+Поле рисует «\*». Тронутое и оставленное пустым краснеет с ошибкой `required`. Форму вход
+недействительной не делает: можно ли записать, решает сама форма. Рядом с валидатором формы вход
+ничего не меняет.
+
 ## Подсказка
 
 - Строковый `[hint]` — обычный случай.

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

@@ -4,19 +4,23 @@
 <rt-icon name="check" size="md" color="current" [rotate]="null" />
 ```
 
-| вход     | тип                                                                                 | умолчание   |
-| -------- | ----------------------------------------------------------------------------------- | ----------- |
-| `name`   | `IRtIcon.Name \| null` — литеральный union из `rt-icon-names.ts`; побеждает `glyph` | `null`      |
-| `glyph`  | `string \| null` — имя Material: пара кита или лигатура шрифта                      | `null`      |
-| `size`   | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number` — число в пикселях        | `'md'`      |
-| `color`  | `'current' \| 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | `'current'` |
-| `rotate` | `number \| string \| null`                                                          | `null`      |
-| `fill`   | `boolean` — залитый рисунок материального набора и заливка шрифта лигатуры          | `false`     |
-| `spin`   | `boolean` — вращение, медленнее при просьбе системы о меньшем движении              | `false`     |
+| вход            | тип                                                                                                                                                            | умолчание   |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `name`          | `IRtIcon.Name \| null` — литеральный union из `rt-icon-names.ts`; побеждает `glyph`                                                                            | `null`      |
+| `glyph`         | `string \| null` — имя Material: пара кита или лигатура шрифта                                                                                                 | `null`      |
+| `glyphStrategy` | `'map-first' \| 'font' \| null` — способ рисовать `glyph` у этого значка; `null` — настройка `provideRtIcons`                                                  | `null`      |
+| `size`          | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| number` — ступень берёт свойство `--rt-icon-step-*`, число — пиксели                       | `'md'`      |
+| `color`         | `'current' \| 'primary' \| 'muted' \| 'disabled' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` — кроме `current`, свойство `--rt-icon-color-*` | `'current'` |
+| `rotate`        | `number \| string \| null`                                                                                                                                     | `null`      |
+| `fill`          | `boolean` — залитый рисунок материального набора и заливка шрифта лигатуры                                                                                     | `false`     |
+| `spin`          | `boolean` — вращение, медленнее при просьбе системы о меньшем движении                                                                                         | `false`     |
 
-Выходов нет. Размер и цвет едут инлайновым стилем host-а (`width`/`height`/`color`), не классом:
-`xs` 12px, `sm` 16px, `md` 20px, `lg` 24px, `xl` 32px, `2xl` 40px, или число пикселей. Лигатура
-глифа скрыта, пока шрифты страницы не готовы: её ждёт `RtIconFontService`.
+Выходов нет. Размер и цвет едут инлайновым стилем host-а (`width`/`height`/`color`), не классом.
+Ступень — свойство `--rt-icon-step-<ступень>`, по умолчанию `xs` 12px, `sm` 16px, `md` 20px,
+`lg` 24px, `xl` 32px, `2xl` 40px, `3xl` 48px, `4xl` 64px; число — пиксели. Цвет, кроме `current`, —
+свойство `--rt-icon-color-<цвет>` с ролью кита по умолчанию. Оси шрифта лигатуры — свойства
+`--rt-icon-glyph-weight`, `-grade`, `-opsz`. Лигатура глифа скрыта, пока шрифты страницы не готовы:
+её ждёт `RtIconFontService`.
 
 ## Главное, что нужно знать
 

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

@@ -19,15 +19,25 @@
 
         /* Лигатура шрифта Material Symbols для глифа без пары. Шрифт подключает приложение,
            семью можно переназначить свойством сверху. Размер шрифта — встроенным стилем, он равен
-           ширине значка. До готовности шрифтов лигатура скрыта: иначе на её месте видно слово. */
+           ширине значка. До готовности шрифтов лигатура скрыта: иначе на её месте видно слово.
+           Оси шрифта — вес, градация и оптический размер — приложение задаёт свойствами сверху,
+           заливка идёт от входа `fill` и переставляется модификатором. Оптический размер по
+           умолчанию — сторона значка: её пишет компонент встроенным стилем, как делал браузер. */
         &__glyph {
+            --rt-icon-glyph-fill: 0;
+            --rt-icon-glyph-opsz-auto: 24;
+
             display: block;
             overflow: hidden;
             width: 100%;
             font-family: var(--rt-icon-glyph-font, 'Material Symbols Outlined'), sans-serif;
             font-feature-settings: 'liga';
             font-style: normal;
-            font-variation-settings: 'FILL' 0;
+            font-variation-settings:
+                'FILL' var(--rt-icon-glyph-fill),
+                'wght' var(--rt-icon-glyph-weight, 400),
+                'GRAD' var(--rt-icon-glyph-grade, 0),
+                'opsz' var(--rt-icon-glyph-opsz, var(--rt-icon-glyph-opsz-auto));
             font-weight: var(--rt-font-weight-regular);
             letter-spacing: normal;
             line-height: 1;
@@ -36,7 +46,7 @@
             white-space: nowrap;
 
             &--filled {
-                font-variation-settings: 'FILL' 1;
+                --rt-icon-glyph-fill: 1;
             }
 
             &--pending {

package/src/lib/components/prompt-suggestion/CONTEXT.md

@@ -0,0 +1,29 @@
+# `rt-prompt-suggestion`
+
+```html
+@for (q of suggestions(); track q) {
+<rt-prompt-suggestion [label]="q" (picked)="ask($event)" />
+}
+```
+
+| вход       | тип       | умолчание  |
+| ---------- | --------- | ---------- |
+| `label`    | `string`  | обязателен |
+| `disabled` | `boolean` | `false`    |
+
+Выход: `picked` — текст вопроса.
+
+Спек — `docs/specs/ui-kit-v2/prompt-suggestion/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Карточка занимает всю ширину родителя**, стрелка прижата к правому краю. В столбце подсказок
+разной длины стрелки стоят на одной вертикали.
+
+## Края
+
+- Класс блока висит и на хосте, и на кнопке: правила вложены в селектор хоста.
+
+## Рядом
+
+- [`rt-empty-state`](../empty-state/CONTEXT.md) — пустой экран, на котором стоят подсказки.

package/src/lib/components/prompt-suggestion/rt-prompt-suggestion.component.scss

@@ -0,0 +1,58 @@
+@layer rt-kit.components {
+    /* rt-prompt-suggestion — карточка готового вопроса. ViewEncapsulation.None.
+       Класс блока висит и на хосте, и на кнопке шаблона, поэтому правила вложены в хост. */
+
+    rt-prompt-suggestion {
+        display: block;
+
+        .rt-prompt-suggestion {
+            --rt-prompt-suggestion-radius: var(--rt-radius-lg);
+            --rt-prompt-suggestion-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-prompt-suggestion-transition-duration: var(--rt-duration-fast);
+
+            display: flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            border: 0;
+            border-radius: var(--rt-prompt-suggestion-radius);
+            margin: 0;
+            background: var(--rt-color-bg-hover);
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            gap: var(--rt-space-sm);
+            inline-size: 100%;
+            line-height: var(--rt-leading-snug);
+            text-align: start;
+            transition: background-color var(--rt-prompt-suggestion-transition-duration) ease;
+
+            &:hover:not(:disabled) {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-prompt-suggestion-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                cursor: default;
+            }
+
+            &__label {
+                min-inline-size: 0;
+            }
+
+            &__arrow {
+                flex: none;
+                color: var(--rt-color-text-muted);
+            }
+        }
+    }
+}

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

@@ -82,6 +82,10 @@
             border-color: transparent;
             background-color: transparent;
 
+            /* Высота строки поля рассчитана на подпись поля, а здесь разметка потребителя: с ней
+               кнопка вырастала бы на пару точек и сдвигала панель. Строка остаётся прежней. */
+            line-height: var(--rt-leading-none);
+
             &:focus {
                 border-color: transparent;
                 box-shadow: none;

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

@@ -28,6 +28,10 @@
 Тот же массив строк передаётся входом `[rtThreadListRow]` в шаблон строки: из него выводится тип
 `row`. Без этого входа строгая сборка приложения отказывает — атрибут без значения приходит строкой.
 
+Действия строки — `<ng-template let-row [rtThreadListRowActions]="rows()">`: кнопки стоят поверх
+правого края строки, рядом с её кнопкой, а не внутри: вложенная кнопка в `<button>` недопустима и
+забирала бы клик выбора. Видны при наведении и фокусе. Без шаблона строка стоит без обёртки.
+
 ## Главное, что нужно знать
 
 **Ctrl/Cmd+клик просит открыть в новой вкладке, а не выбирает строку.** Список — это навигация,

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

@@ -125,6 +125,35 @@
             }
         }
 
+        // Действия строки стоят поверх правого края строки, а не внутри её кнопки: вложенная
+        // кнопка в `<button>` недопустима. Подложка повторяет фон строки, чтобы закрыть время.
+        &__row-wrap {
+            position: relative;
+
+            &:hover .rt-thread-list__row-actions,
+            &:focus-within .rt-thread-list__row-actions {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
+
+        &__row-actions {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            background: var(--rt-color-bg-subtle);
+            gap: var(--rt-space-1);
+            inset-block: 0;
+            inset-inline-end: 0;
+            opacity: 0;
+            padding-inline: var(--rt-space-2) var(--rt-space-4);
+            pointer-events: none;
+        }
+
+        &__row--active + .rt-thread-list__row-actions {
+            background: var(--rt-color-state-info-bg);
+        }
+
         &__row-body {
             display: flex;
             flex-direction: column;

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

@@ -23,3 +23,7 @@
 
 **Отступ полосы сверху и снизу — свойства блока** `--rt-toolbar-padding-top` и
 `--rt-toolbar-padding-bottom`, по умолчанию 8px. Список ставит им свои имена.
+
+**Плотная полоса остаётся строкой на любой ширине, и её левая часть сжимается.** Длинный
+заголовок в ней переносится по словам и не выходит за правый край. Кнопки справа держат свою
+ширину. Обычная полоса левую часть не сжимает: на узком экране она стекает в колонку.

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

@@ -65,6 +65,13 @@
         }
     }
 
+    // Плотная полоса не стекает в колонку, и длинный заголовок левой зоны ей некуда деть: зона
+    // сжимается, а заголовок переносится по словам. Правая зона с кнопками держит свою ширину
+    .rt-toolbar--dense .rt-toolbar__bar--left {
+        min-width: 0;
+        flex: 0 1 auto;
+    }
+
     // Мобилка: три зоны не влезают в строку — стекаем в колонку на всю ширину
     // (фильтр → поиск → действия), поиск растягивается. `--dense` (компактная
     // шапка вроде rt-chat) из стекинга исключён — остаётся в одну строку.