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

package/src/assets/icons-material/table.fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="M157-175q-29 0-50-21t-21-50v-469q0-29 21-50t50-21h91q29 0 49.5 21t20.5 50v469q0 29-20.5 50T248-175h-91Zm278 0q-28 0-49.5-21T364-246v-469q0-29 21.5-50t49.5-21h91q29 0 50 21t21 50v469q0 29-21 50t-50 21h-91Zm278 0q-29 0-50-21t-21-50v-469q0-29 21-50t50-21h91q29 0 50 21t21 50v469q0 29-21 50t-50 21h-91Z" />
+</svg>

package/src/assets/icons-material/table.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
     <path
         fill="currentColor"
-        d="M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z" />
+        d="M86-269v-422q0-39.19 27.61-67.09Q141.22-786 180-786h600q39.19 0 67.09 27.91Q875-730.19 875-691v422q0 38.78-27.91 66.39Q819.19-175 780-175H180q-38.78 0-66.39-27.61T86-269Zm94 0h137v-422H180v422Zm231 0h138v-422H411v422Zm232 0h137v-422H643v422Z" />
 </svg>

package/src/assets/icons-material/tag.fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="M880-381 580-81q-13.29 13.5-30.39 19.75Q532.5-55 514.25-55t-35.11-6.5Q462.29-68 449-81L83-447q-13-13-20.5-30.08T55-513v-299q0-38.78 27.32-66.39T148-906h300q18.33 0 35.52 7.37Q500.7-891.25 514-878l366 364q14.3 14.33 21.15 31.5 6.85 17.17 6.85 35.23 0 18.07-7 35.67T880-381ZM252.88-658Q273-658 288-673.03q15-15.03 15-35.35 0-20.33-14.88-35.47-14.88-15.15-35-15.15Q232-759 217-743.97q-15 15.03-15 35.35 0 20.33 14.88 35.47 14.88 15.15 36 15.15Z" />
+</svg>

package/src/assets/icons-material/tag.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
     <path
         fill="currentColor"
-        d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z" />
+        d="M880-381 580-81q-13.29 13.5-30.39 19.75Q532.5-55 514.25-55t-35.11-6.5Q462.29-68 449-81L83-447q-13-13-20.5-30.08T55-513v-299q0-38.78 27.32-66.39T148-906h300q18.33 0 35.52 7.37Q500.7-891.25 514-878l366 364q14.3 14.33 21.15 31.5 6.85 17.17 6.85 35.23 0 18.07-7 35.67T880-381ZM516-147l298-299-367.31-365H149v295.68L516-147ZM252.88-658Q273-658 288-673.03q15-15.03 15-35.35 0-20.33-14.88-35.47-14.88-15.15-35-15.15Q232-759 217-743.97q-15 15.03-15 35.35 0 20.33 14.88 35.47 14.88 15.15 36 15.15ZM481-479Z" />
 </svg>

package/src/assets/icons-material/trash.fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="M253-95q-39.46 0-67.23-27.47Q158-149.95 158-189v-553h-58v-94h231v-48h297v48h232v94h-58v553q0 39.05-27.77 66.53Q746.46-95 707-95H253Zm101-172h77v-399h-77v399Zm175 0h78v-399h-78v399Z" />
+</svg>

package/src/assets/icons-material/trash.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
     <path
         fill="currentColor"
-        d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
+        d="M253-95q-40.21 0-67.61-27.1Q158-149.2 158-189v-553h-58v-94h231v-48h297v48h232v94h-58v553q0 39.05-27.77 66.53Q746.46-95 707-95H253Zm454-647H253v553h454v-553ZM354-267h77v-399h-77v399Zm175 0h78v-399h-78v399ZM253-742v553-553Z" />
 </svg>

package/src/assets/icons-material/user-off.fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="m842-30-93-92H135v-120.79q0-44.21 22.63-77.63Q180.27-353.83 217-371q59.24-26 113.99-41 54.75-15 111.01-18L30-842l50-50L892-80l-50 50ZM742-371q35 15 57 44.5t25 70.5v8L674-398q17 5 34 12.5t34 14.5ZM561-511 322-751q20.76-44.64 64.38-68.82Q430-844 479.93-844q73.07 0 124.57 50.5T656-669.47q0 50.22-24.5 93.34Q607-533 561-511Z" />
+</svg>

package/src/assets/icons-material/user-off.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="m842-30-93-92H135v-120.79q0-44.51 22.83-77.73Q180.66-353.73 217-371q59.24-26 113.99-41 54.75-15 111.01-18L30-842l50-50L892-80l-50 50ZM229-216h425L535-336q-13-1-27-1.5t-28-.5q-56 0-108.5 10.5t-110.07 38.34Q247-282.44 238-268.42q-9 14.01-9 29.42v23Zm513-155q35 15 57 44.5t25 70.5v8L674-398q17 5 34.14 12.39Q725.29-378.22 742-371ZM561-511l-77-77q32-2 54.5-25t22.5-56q0-33.64-23.36-57.32Q514.29-750 480-750q-33 0-56 22t-25 55l-77-78q20.76-44.64 64.21-68.82Q429.66-844 479.93-844q73.07 0 124.57 50.5T656-669.05q0 49.8-24.5 92.92Q607-533 561-511Zm93 295H229h425ZM442-631Z" />
+</svg>

package/src/assets/icons-material/user.fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path
+        fill="currentColor"
+        d="M479.8-494q-77.21 0-126-48.8-48.8-48.79-48.8-126 0-77.2 48.8-126.2 48.79-49 126-49 77.2 0 126.7 49T656-668.8q0 77.21-49.5 126Q557-494 479.8-494ZM135-122v-120.79q0-44.51 22.83-77.73Q180.66-353.73 217-371q69-31 133.46-46.5Q414.92-433 479.73-433q66.73 0 130.5 16Q674-401 742-371q37.61 15.96 60.8 49.48Q826-288 826-243.05V-122H135Z" />
+</svg>

package/src/assets/icons-material/user.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
     <path
         fill="currentColor"
-        d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" />
+        d="M479.8-494q-77.21 0-126-48.8-48.8-48.79-48.8-126 0-77.2 48.8-126.2 48.79-49 126-49 77.2 0 126.7 49T656-668.8q0 77.21-49.5 126Q557-494 479.8-494ZM135-122v-120.79q0-44.51 22.83-77.73Q180.66-353.73 217-371q69-31 133.46-46.5Q414.92-433 479.73-433q66.73 0 130.5 16 63.77 16 131.69 46.19 37.91 16.09 61 49.45Q826-288 826-243.05V-122H135Zm94-94h502v-23q0-15.35-9.5-29.32T698-289q-60-28-110.5-38.5-50.49-10.5-108-10.5-55.5 0-108 10.5t-110.07 38.34Q247-282.44 238-268.42q-9 14.01-9 29.42v23Zm250.8-372q35.2 0 58.2-22.85 23-22.84 23-58.11 0-35.69-22.8-58.37-22.79-22.67-58-22.67-35.2 0-58.2 22.72t-23 57.82q0 35.51 22.8 58.49 22.79 22.97 58 22.97Zm.2-81Zm0 453Z" />
 </svg>

package/src/lib/components/CONTEXT.md

@@ -1,6 +1,6 @@
 # Компоненты `@rt-tools/ui-kit-v2`
 
-72 семейства, каждое — своя директория с одинаковым устройством:
+73 семейства, каждое — своя директория с одинаковым устройством:
 
 ```
 tag/
@@ -32,18 +32,21 @@ tag/
 
 ## Карта
 
-| задача                   | компонент                                                                                                                         |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
-| иконка, кольцо, заглушка | `icon`, `spinner`, `skeleton`, `skeleton-wrapper`                                                                                 |
-| статус, счётчик, метка   | `tag`, `live-badge`, `info-item`, `stat-tile`, `delta-view`                                                                       |
-| кнопки                   | `button` (директива), `icon-button`, `split-button`, `toggle-button-group`                                                        |
-| поля ввода               | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `file-input`, `rich-editor`           |
-| списки выбора            | `select`, `multiselect`, `autocomplete`, `filter-control`                                                                         |
-| обёртка поля             | `field`, `form-control` (основа)                                                                                                  |
-| плавающие панели         | `popover`, `tooltip`, `confirm-popover`, `menu`, `toast`                                                                          |
-| окна и панели            | `dialog`, `aside`, `aside-section`, `bottom-sheet`, `welcome-dialog`, `photo-viewer`                                              |
-| каркас страницы          | `container`, `workspace`, `workspace-details`, `header`, `page-header`, `toolbar`, `section-nav`                                  |
-| данные                   | `table`, `pagination`, `thread-list`, `detail-list`, `money-list`, `bar-list`, `timeline`, `night-grid`, `calendar`               |
-| переписка                | `chat`, `message`, `message-composer`                                                                                             |
-| файлы                    | `file-card`, `file-list`, `file-drop`, `download-link`                                                                            |
-| прочее                   | `card`, `note`, `empty-state`, `tabs`, `stepper`, `logo`, `theme-toggle`, `notifications-bell`, `collapsible-text`, `counter-row` |
+| задача                   | компонент                                                                                                                                      |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| иконка, кольцо, заглушка | `icon`, `spinner`, `skeleton`, `skeleton-wrapper`                                                                                              |
+| статус, счётчик, метка   | `tag`, `live-badge`, `info-item`, `stat-tile`, `delta-view`                                                                                    |
+| кнопки                   | `button` (директива), `icon-button`, `split-button`, `toggle-button-group`                                                                     |
+| поля ввода               | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `file-input`, `rich-editor`                        |
+| списки выбора            | `select`, `multiselect`, `autocomplete`, `filter-control`                                                                                      |
+| обёртка поля             | `field`, `form-control` (основа)                                                                                                               |
+| плавающие панели         | `popover`, `tooltip`, `confirm-popover`, `menu`, `toast`                                                                                       |
+| окна и панели            | `dialog`, `aside`, `aside-section`, `bottom-sheet`, `welcome-dialog`, `photo-viewer`                                                           |
+| каркас страницы          | `container`, `workspace`, `workspace-details`, `header`, `page-header`, `toolbar`, `section-nav`                                               |
+| данные                   | `table`, `pagination`, `thread-list`, `detail-list`, `money-list`, `bar-list`, `timeline`, `night-grid`, `calendar`                            |
+| переписка                | `chat`, `message`, `message-composer`                                                                                                          |
+| файлы                    | `file-card`, `file-list`, `file-drop`, `download-link`                                                                                         |
+| прочее                   | `card`, `note`, `empty-state`, `tabs`, `stepper`, `logo`, `theme-toggle`, `notifications-bell`, `collapsible-text`, `accordion`, `counter-row` |
+
+`rich-editor`, `message-composer` и `chat` работают на quill и лежат во втором входе пакета —
+`@rt-tools/ui-kit-v2/rich-editor`, каталог `src/rich-editor/`. Основной вход их не отдаёт.

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

@@ -0,0 +1,31 @@
+# `rt-accordion`
+
+Список пунктов с заголовком-кнопкой и текстом под ней: вопросы с раскрывающимися ответами.
+
+```html
+<rt-accordion [items]="questions()" [openIndex]="null" />
+```
+
+| вход        | тип                            | умолчание      |
+| ----------- | ------------------------------ | -------------- |
+| `items`     | `readonly IRtAccordion.Item[]` | **обязателен** |
+| `openIndex` | `number \| null`               | `0`            |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Пункты раскрываются независимо.** Нажатие раскрывает или сворачивает один пункт, соседи остаются
+как были. Читающий сравнивает два ответа, и сворачивать первый при раскрытии второго нельзя.
+
+**Решение о раскрытии лежит в `rt-accordion.logic.ts`.** Набор раскрытых номеров — связанный
+сигнал компонента. Новый список пунктов начинает раскрытие заново с `openIndex`.
+
+## Края
+
+- `openIndex` вне списка, отрицательный или `null` оставляет все пункты свёрнутыми.
+- Панель свёрнутого пункта лежит в разметке с `hidden`. Поисковик страницы с отрисовкой на сервере
+  видит все ответы.
+- Id кнопок и панелей берутся из счётчика на экземпляр. Два аккордеона на странице не ссылаются на
+  чужие панели.
+- Заголовок и текст — строки. Разметку внутри пункта компонент не принимает.

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

@@ -0,0 +1,61 @@
+@layer rt-kit.components {
+    .rt-accordion {
+        --rt-accordion-border-width: var(--rt-border-width-thin);
+        --rt-accordion-duration: var(--rt-duration-fast);
+        --rt-accordion-focus-shadow: var(--rt-shadow-focus-ring);
+
+        display: block;
+        width: 100%;
+
+        &__item {
+            border-bottom: var(--rt-accordion-border-width) solid var(--rt-color-border-subtle);
+        }
+
+        &__heading {
+            margin: 0;
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__toggle {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-md) 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-md);
+            text-align: start;
+
+            &:focus-visible {
+                box-shadow: var(--rt-accordion-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+            }
+        }
+
+        &__chevron {
+            flex: none;
+            transition: transform var(--rt-accordion-duration);
+        }
+
+        &__text {
+            padding-bottom: var(--rt-space-md);
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-sm);
+            line-height: var(--rt-leading-normal);
+        }
+
+        &__item--open &__chevron {
+            transform: rotate(180deg);
+        }
+    }
+}

package/src/lib/components/action-bar/CONTEXT.md

@@ -0,0 +1,53 @@
+# `rt-action-bar`, `rt-action-bar-holder`
+
+```html
+<!-- список отмечает строки и пишет в службу; держатель рисует полосу над страницей -->
+<rt-action-bar-holder />
+```
+
+| вход     | тип                   | умолчание      |
+| -------- | --------------------- | -------------- |
+| `config` | `IRtActionBar.Config` | **обязателен** |
+
+| выход       | тип                   |
+| ----------- | --------------------- |
+| `actionRun` | `IRtActionBar.Action` |
+| `closed`    | `void`                |
+
+У держателя входов нет вовсе: настройку он читает у службы `RtActionBarService`.
+
+## Главное, что нужно знать
+
+**Полоса открывается счётом выбранного, а не своим признаком.** Два источника одного признака
+расходятся молча, и признак, оставшийся поднятым над опустевшим выбором, держал бы полосу над
+страницей, где ничего не выбрано.
+
+**Крестик ничего не закрывает.** Он сообщает наружу; выбранное отпускает держатель через службу,
+а список принадлежит потребителю.
+
+## Как этим пользоваться
+
+- **Служба объявляется на своём уровне, а не в корне.** Тот, кто отмечает строки, и тот, кто
+  рисует полосу, стоят на разной глубине одного экрана: `providers: [RtActionBarService]` идёт
+  туда, где живёт список.
+- **Действие с вложенным списком само не срабатывает** — оно заголовок группы. Нажатие раскрывает
+  список всплывающим слоем кита; нажатие пункта закрывает полосу так же, как обычное действие.
+- **Вид действия называется входом `look`, а не объектом стилей.** Палитра кита закрытая, и своего
+  цвета в настройку не передать.
+- **Подпись действия со значком снимает правило стиля по грубому указателю.** В разметке она стоит
+  всегда, и признак значка стоит модификатором — условие в шаблоне было бы оформлением, уехавшим
+  в код.
+
+## Края
+
+- Ноль выбранного показан числом: счётчик, прячущийся на нуле, дёргал бы ширину полосы ровно в
+  минуту её ухода.
+- Полоса остаётся в разметке на длительность ухода. Число одно на разметку и правило стиля и лежит
+  в `rt-action-bar.model.ts`.
+- Подпись действия не урезается. Ряд, не влезший в предел ширины, переносится; одно действие,
+  которое шире места и само по себе, переносит подпись внутри себя по границам слов.
+
+## Рядом
+
+- [`rt-toolbar`](../toolbar/CONTEXT.md) — полоса в потоке страницы, о выбранном ничего не знает.
+- [`rt-menu`](../menu/CONTEXT.md) — действия над одной записью.

package/src/lib/components/action-bar/rt-action-bar-holder.component.scss

@@ -0,0 +1,70 @@
+@layer rt-kit.components {
+    /* rt-action-bar-holder — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-action-bar-holder` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+    .rt-action-bar-holder {
+        // Номер слоя берётся шкалой: номер, написанный числом в файле компонента, ни в одну
+        // шкалу не попадает, и следующий узел над страницей возьмёт тот же, о том не узнав.
+        --rt-action-bar-holder-bottom: var(--rt-space-6);
+        --rt-action-bar-holder-inline: var(--rt-space-4);
+        --rt-action-bar-holder-enter-duration: 300ms;
+        --rt-action-bar-holder-leave-duration: 300ms;
+
+        position: fixed;
+        z-index: var(--rt-z-fixed);
+        display: flex;
+        justify-content: center;
+        inset: auto var(--rt-action-bar-holder-inline) var(--rt-action-bar-holder-bottom);
+        pointer-events: none;
+
+        // Полоса ловит нажатия, а держатель — нет: он тянется на всю ширину страницы, и без
+        // этого перекрыл бы всё, что лежит под ним по краям от полосы.
+        &__bar {
+            max-width: 100%;
+            animation: rt-action-bar-enter var(--rt-action-bar-holder-enter-duration);
+            pointer-events: auto;
+        }
+
+        // `forwards`: полоса держится за нижней кромкой до того мига, когда её снимет разметка.
+        // Без него она возвращается на место в конце ухода и успевает мигнуть на своём месте.
+        &__bar--leaving {
+            animation: rt-action-bar-leave var(--rt-action-bar-holder-leave-duration) forwards;
+        }
+    }
+
+    // Выезд полосы: снизу, с проскоком выше места и возвратом. Проскок и делает движение
+    // живым, а не равномерным; уход идёт тем же путём в обратную сторону.
+    @keyframes rt-action-bar-enter {
+        0% {
+            opacity: 0;
+            transform: translateY(100%);
+        }
+
+        30% {
+            opacity: 1;
+            transform: translateY(calc(var(--rt-space-4) * -1));
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes rt-action-bar-leave {
+        0% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        70% {
+            opacity: 1;
+            transform: translateY(calc(var(--rt-space-4) * -1));
+        }
+
+        100% {
+            opacity: 0;
+            transform: translateY(100%);
+        }
+    }
+}

package/src/lib/components/action-bar/rt-action-bar.component.scss

@@ -0,0 +1,122 @@
+@layer rt-kit.components {
+    /* rt-action-bar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-action-bar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+    .rt-action-bar {
+        --rt-action-bar-radius: var(--rt-radius-lg);
+        --rt-action-bar-shadow: var(--rt-shadow-card);
+        --rt-action-bar-action-radius: var(--rt-radius-md);
+        --rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 16%, transparent);
+        --rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);
+        --rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-action-bar-menu-radius: var(--rt-radius-md);
+        --rt-action-bar-menu-shadow: var(--rt-shadow-card);
+
+        // Предел ширины стоит и на самом элементе. Содержащий блок полосы — этот элемент, и
+        // без предела он растёт по содержимому: сто процентов считались бы тогда от выросшего,
+        // и полоса выехала бы за отведённое ей место.
+        display: flex;
+        width: max-content;
+        max-width: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-space-2) var(--rt-space-4);
+        border-radius: var(--rt-action-bar-radius);
+        background: var(--rt-color-bg-inverse);
+        box-shadow: var(--rt-action-bar-shadow);
+        color: var(--rt-color-text-inverse);
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-4);
+
+        &__counter {
+            font-weight: var(--rt-font-weight-medium);
+            white-space: nowrap;
+        }
+
+        // Ряд действий, не влезший в предел ширины полосы, переносится. Одно действие, которое
+        // шире места и само по себе, переносить некуда — у него переносится подпись.
+        &__actions {
+            display: flex;
+            min-width: 0;
+            flex-wrap: wrap;
+            gap: var(--rt-space-2);
+        }
+
+        &__action {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border: 0;
+            border-radius: var(--rt-action-bar-action-radius);
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+
+            // Нажатие в этом ките набрано средним начертанием — так набрана кнопка кита, и
+            // действие полосы такое же нажатие. Первый кит ставил здесь шестьсот.
+            font-weight: var(--rt-font-weight-medium);
+            gap: var(--rt-space-2);
+
+            &:hover {
+                background: var(--rt-action-bar-action-bg-hover);
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-action-bar-action-focus-shadow);
+                outline: none;
+            }
+
+            &--danger {
+                color: var(--rt-action-bar-action-color-danger);
+            }
+        }
+
+        &__action-icon {
+            flex: none;
+        }
+
+        // Подпись, не влезшую в место, полоса переносит внутри кнопки, а не режет и не прячет:
+        // предел ширины назван вместе с судьбой того, что в него не вошло. Перенос идёт по
+        // границам слов, и слово рубится только тогда, когда не влезает и оно одно: `anywhere`
+        // рубил бы и там, где есть куда перенести, — кадр показал «Скачат/ь» на месте в
+        // восемнадцать рем.
+        &__action-label {
+            overflow-wrap: break-word;
+            text-align: start;
+        }
+
+        // Кнопка кита красит значок цветом обычного текста, а полоса стоит на обратной
+        // поверхности: в светлой теме значок вышел тёмным по тёмному, в тёмной — светлым по
+        // белому, и крестика не было видно ни в одном кадре. Своё свойство блока перебивают —
+        // так делает просмотр фотографии, где кнопка стоит на снимке.
+        &__close {
+            --rt-icon-button-color: var(--rt-color-text-inverse);
+            --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);
+
+            flex: none;
+            margin-left: auto;
+        }
+
+        &__menu {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-2);
+            border-radius: var(--rt-action-bar-menu-radius);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-action-bar-menu-shadow);
+            color: var(--rt-color-text-primary);
+        }
+
+        // Полоса живёт на нижней кромке, и пальцу нужно место, которое занимают подписи. Решает
+        // это правило, а не условие в шаблоне: условие было бы оформлением, уехавшим в код.
+        // Подпись снимается только у действия, у которого есть значок, — действие, показанное
+        // ничем, нажать нарочно нельзя.
+        @media (pointer: coarse) {
+            .rt-action-bar__action--with-icon .rt-action-bar__action-label {
+                display: none;
+            }
+        }
+    }
+}

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

@@ -29,11 +29,15 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | ---------------------------------------- | ----------------------------------------- |
 | `data`                                   | `null` — доезжает токеном `RT_ASIDE_DATA` |
 | `position`                               | `'right'`                                 |
-| `closeOnBackdropClick` / `closeOnEscape` | `true`                                    |
+| `closeOnBackdropClick` / `closeOnEscape` | `true`; второе — из настроек кита         |
 | `backdropClass` / `panelClass`           | `rt-aside-backdrop` / `rt-aside-overlay`  |
 
 ## Главное, что нужно знать
 
+**Панель берёт материальный набор от кнопки в фокусе.** Панель лежит в конце страницы, вне
+контейнера с признаком набора, и класс набора получает, если признак стоит над узлом в фокусе в
+минуту открытия. Открытая не по нажатию — через `panelClass` приложения.
+
 **Асайд объявлен `role="complementary"`, а не диалогом.** Он не модален: страница за ним
 остаётся видна, и это осознанный выбор — карточку смотрят, не теряя список.
 

package/src/lib/components/aside/_rt-aside-overlay.scss

@@ -26,6 +26,15 @@
         transition: opacity var(--rt-aside-animation-duration) ease;
     }
 
+    /* Под материальным набором подложка первого кита — затемнение без размытия. Цвет объявлен
+       заново на самой подложке: на корне он вычислен по назначениям корня, а класс набора стоит
+       на подложке, которую открыл список первого кита. */
+    :is(.rt-preset-material, [data-preset='material']).cdk-overlay-backdrop.rt-aside-backdrop,
+    [data-preset='material'] .cdk-overlay-backdrop.rt-aside-backdrop {
+        --rt-aside-backdrop-bg: var(--rt-color-bg-overlay);
+        --rt-aside-backdrop-blur: 0;
+    }
+
     .rt-aside-overlay {
         height: 100dvh;
         transition: transform var(--rt-aside-animation-duration) ease;

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

@@ -3,13 +3,20 @@
        Селекторы префиксованы `.rt-aside-header`. */
 
     .rt-aside-header {
+        --rt-aside-header-title-size: var(--rt-text-xl);
+        --rt-aside-header-title-weight: var(--rt-font-weight-bold);
+        --rt-aside-header-subtitle-size: var(--rt-text-sm);
+        --rt-aside-header-gap: var(--rt-space-sm);
+        --rt-aside-header-min-height: auto;
+
         padding: var(--rt-aside-inset);
 
         &__content {
             display: flex;
             min-width: 0;
+            min-height: var(--rt-aside-header-min-height);
             align-items: center;
-            gap: var(--rt-space-sm);
+            gap: var(--rt-aside-header-gap);
         }
 
         &__back {
@@ -41,7 +48,8 @@
             min-width: 0;
             margin: 0;
             color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-xl);
+            font-size: var(--rt-aside-header-title-size);
+            font-weight: var(--rt-aside-header-title-weight);
 
             /* Ellipsis для длинного заголовка: skeleton-wrapper рендерит `{{ title }}`
                как ng-content внутри inline-flex; чтобы `text-overflow: ellipsis`
@@ -55,6 +63,14 @@
             }
         }
 
+        /* Подпись под заголовком переносится, а не режется: это фраза, а не имя. */
+        &__subtitle {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-aside-header-subtitle-size);
+            line-height: var(--rt-leading-snug);
+        }
+
         /* Ряд бэйджей под title — переносится на новую строку при нехватке ширины. */
         &__badges {
             display: flex;

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

@@ -44,7 +44,11 @@
         flex-direction: column;
         padding: 0;
         border: none;
-        background: var(--rt-color-bg-surface);
+
+        /* Фон панели — ручка приложения, как `--rt-aside-host-background-color` первого кита. Кит
+           её не объявляет: панель живёт в слое поверх страницы, и приложение задаёт фон с корня.
+           Без неё панель берёт фон поверхности, который материальный набор красит своим. */
+        background: var(--rt-aside-bg, var(--rt-color-bg-surface));
         color: var(--rt-color-text-primary);
 
         /* Header / footer всегда видны, контентная часть скроллится при overflow.

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

@@ -51,7 +51,8 @@
 - `itemTemplate` рисует свою разметку подсказки (иконка, две строки); контекст — `$implicit`.
 - Крестик очистки стирает и текст, и значение.
 - Клавиатура: `ArrowDown`/`ArrowUp` водят по подсказкам, `Enter` выбирает, `Escape` закрывает.
-  При закрытой панели клавиши ничего не делают.
+  При закрытой панели клавиши ничего не делают. Подсвеченная подсказка прокручивается в видимую
+  часть панели.
 
 ## Рядом
 

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

@@ -10,17 +10,17 @@
 <a rtButton label="На главную" [routerLink]="'/'"></a>
 ```
 
-| вход          | тип                                                                        | умолчание                  |
-| ------------- | -------------------------------------------------------------------------- | -------------------------- |
-| `label`       | `string \| null`                                                           | `null`                     |
-| `icon`        | `string \| null` (имя из набора `rt-icon`)                                 | `null`                     |
-| `iconPos`     | `'left' \| 'right'`                                                        | `'left'`                   |
-| `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                |
-| `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | `'filled'`                 |
-| `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | `'md'`                     |
-| `rounded`     | `boolean`                                                                  | `false`                    |
-| `loading`     | `boolean`                                                                  | `false`                    |
-| `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо |
+| вход          | тип                                                                        | умолчание                     |
+| ------------- | -------------------------------------------------------------------------- | ----------------------------- |
+| `label`       | `string \| null`                                                           | `null`                        |
+| `icon`        | `string \| null` (имя из набора `rt-icon`)                                 | `null`                        |
+| `iconPos`     | `'left' \| 'right'`                                                        | `'left'`                      |
+| `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                   |
+| `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'` |
+| `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`     |
+| `rounded`     | `boolean`                                                                  | настройки кита или `false`    |
+| `loading`     | `boolean`                                                                  | `false`                       |
+| `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо    |
 
 Своего выхода нет — клик слушается нативным `(click)` на самом элементе.