@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/src/lib/components/inline-edit/CONTEXT.md

@@ -0,0 +1,41 @@
+# `rt-inline-edit`
+
+```html
+<rt-inline-edit placeholder="Название отчёта" [value]="report.name" (saved)="rename($event)" />
+```
+
+Входы — `value`, `placeholder`, `look`, `size`, `fieldLabel`, `disabled`, `saving`, `allowEmpty`,
+`closeOnSave`, `blurAction`, `fieldIcon`, `truncate` и двусторонний `editing`. Выходы — `saved` и `cancelled`.
+
+Описание — `docs/specs/ui-kit-v2/inline-edit/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Значение принадлежит приложению.** Компонент отдаёт новое выходом и сам его не хранит: в покое
+всегда видно то, что пришло во вход `value`.
+
+**Черновик — в форме, а не в двусторонней привязке.** Форма пишет значение в поле в том же проходе
+отрисовки; двусторонняя привязка писала его тиком позже, и выделение текста при открытии заставало
+пустое поле.
+
+**Что сохранять, решает чистая функция.** `inlineEditOutcome` обрезает черновик, отказывает пустому
+и закрывает поле без события, если черновик равен значению. `inlineEditLeaves` отличает уход фокуса
+от перехода на свои кнопки.
+
+## Края
+
+- Открытие входом `editing` ведёт себя как нажатие: черновик берёт значение, фокус встаёт в поле.
+- Escape гасится в поле и не закрывает окно или панель вокруг.
+- Пока `saving`, ни Escape, ни уход фокуса, ни кнопки поле не закрывают.
+- Погашенное на время сохранения поле роняет фокус в никуда. Отметка `#focusInside` помнит, что он
+  был внутри, и после отказа или закрытия фокус возвращается; ушедший на другой элемент не трогается.
+- Плашка-поле `look="chip-field"` — отдельная ветка шаблона: тот же черновик в форме, но без покоя,
+  кнопок и `editing`. Ширину ей задаёт невидимая копия текста в одной клетке с полем. Enter и Escape
+  сохраняют сами и снимают фокус под отметкой `#chipLeaving`, чтобы уход не сохранил второй раз.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+- Цвета, зазоры и плашка — свойства `--rt-inline-edit-*` на корне блока. Материальный набор
+  переназначает пять из них в том же файле стилей, вид кита от этого не меняется.
+
+## Рядом
+
+- `rt-dynamic-input` с `editable` — правка строк списка выбора, своя внутри списка.

package/src/lib/components/inline-edit/rt-inline-edit.component.scss

@@ -0,0 +1,274 @@
+@layer rt-kit.components {
+    /* rt-inline-edit — правка короткого значения на месте. ViewEncapsulation.None.
+       Host несёт класс блока; в покое — кнопка со значением, при правке — поле кита и две кнопки.
+       Высота покоя равна высоте поля: строка не прыгает при открытии.
+       Цвета, зазоры и плашка — свойства блока: приложение перекрашивает правку своим правилом на
+       блок. Умолчания — прежние ступени, вид без свойств не меняется. */
+
+    .rt-inline-edit {
+        --rt-inline-edit-height: var(--rt-input-height-sm);
+        --rt-inline-edit-field-width: var(--rt-size-64);
+        --rt-inline-edit-radius: var(--rt-radius-sm);
+        --rt-inline-edit-border-width: var(--rt-border-width-thin);
+        --rt-inline-edit-duration: var(--rt-duration-fast);
+        --rt-inline-edit-gap: var(--rt-space-2xs);
+        --rt-inline-edit-value-padding-x: var(--rt-space-xs);
+        --rt-inline-edit-value-gap: var(--rt-space-xs);
+        --rt-inline-edit-value-bg-hover: var(--rt-color-bg-hover);
+        --rt-inline-edit-empty-color: var(--rt-color-text-muted);
+        --rt-inline-edit-disabled-color: var(--rt-color-text-disabled);
+        --rt-inline-edit-pencil-color: var(--rt-color-text-muted);
+        --rt-inline-edit-chip-radius: var(--rt-radius-sm);
+        --rt-inline-edit-chip-bg: var(--rt-color-bg-subtle);
+        --rt-inline-edit-chip-color: var(--rt-color-text-primary);
+        --rt-inline-edit-chip-border-color: var(--rt-color-border-default);
+        --rt-inline-edit-chip-border-color-hover: var(--rt-color-action-primary-on-surface);
+        --rt-inline-edit-chip-font-size: var(--rt-text-xs);
+        --rt-inline-edit-chip-font-weight: var(--rt-font-weight-semibold);
+        --rt-inline-edit-chip-field-max-width: calc(var(--rt-size-64) + var(--rt-size-64) / 2);
+        --rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);
+        --rt-inline-edit-chip-field-color: var(--rt-inline-edit-chip-color);
+        --rt-inline-edit-chip-field-icon-color: var(--rt-inline-edit-pencil-color);
+        --rt-inline-edit-chip-field-border-color: var(--rt-inline-edit-chip-border-color);
+        --rt-inline-edit-chip-field-border-color-focus: var(--rt-inline-edit-chip-border-color-hover);
+
+        display: inline-flex;
+        min-width: 0;
+        max-width: 100%;
+        align-items: center;
+        gap: var(--rt-inline-edit-gap);
+        vertical-align: middle;
+
+        &--size-md {
+            --rt-inline-edit-height: var(--rt-input-height-md);
+        }
+
+        &--size-lg {
+            --rt-inline-edit-height: var(--rt-input-height-lg);
+        }
+
+        /* Материальный набор повторяет плашку приложения: скругление 6px, светлая серая подложка
+           и тонкая рамка без цвета действия. Цвет подписи остаётся основным — серый на серой
+           подложке не набирает 4.5 контраста для мелкого текста. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-inline-edit-chip-radius: var(--rt-radius-ms);
+            --rt-inline-edit-chip-bg: var(--rt-color-bg-surface-subtle-2);
+            --rt-inline-edit-chip-border-color: var(--rt-color-border-subtle);
+            --rt-inline-edit-chip-border-color-hover: var(--rt-color-border-strong);
+            --rt-inline-edit-value-padding-x: var(--rt-space-2);
+
+            /* Плашка-поле приложения: светлая подложка, рамка, текст и значок — основной цвет темы. */
+            --rt-inline-edit-chip-field-bg: var(--rt-mat-neutral-5);
+            --rt-inline-edit-chip-field-color: var(--mat-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-icon-color: var(--mat-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-border-color: var(--mat-sys-primary-fixed-dim, var(--rt-brand-200));
+            --rt-inline-edit-chip-field-border-color-focus: var(--mat-sys-primary, var(--rt-color-action-primary));
+        }
+
+        /* Значение в покое: подпись режется многоточием, полный текст — в подсказке. */
+        &__value {
+            display: inline-flex;
+            min-width: 0;
+            max-width: 100%;
+            min-height: var(--rt-inline-edit-height);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 0 var(--rt-inline-edit-value-padding-x);
+            border: var(--rt-inline-edit-border-width) solid transparent;
+            border-radius: var(--rt-inline-edit-radius);
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-inline-edit-value-gap);
+            text-align: start;
+            transition:
+                background-color var(--rt-inline-edit-duration) ease,
+                border-color var(--rt-inline-edit-duration) ease;
+
+            &:hover:not(:disabled) {
+                background: var(--rt-inline-edit-value-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+            }
+
+            &--empty {
+                color: var(--rt-inline-edit-empty-color);
+            }
+
+            &:disabled {
+                color: var(--rt-inline-edit-disabled-color);
+                cursor: default;
+            }
+        }
+
+        &__text {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__pencil {
+            flex-shrink: 0;
+            color: var(--rt-inline-edit-pencil-color);
+        }
+
+        &__field {
+            width: var(--rt-inline-edit-field-width);
+            min-width: 0;
+            flex: 0 1 auto;
+        }
+
+        &__save,
+        &__cancel {
+            flex-shrink: 0;
+        }
+
+        /* Плашка: светлая подложка, рамка, мелкий жирный шрифт — цвета нейтральной плашки rt-tag.
+           Цвет действия на этой подложке не набирает 4.5 контраста, поэтому он только у рамки при
+           наведении. Плашка только в покое — поле при правке читается полем в обоих видах. */
+        &--chip &__value {
+            border-color: var(--rt-inline-edit-chip-border-color);
+            border-radius: var(--rt-inline-edit-chip-radius);
+            background: var(--rt-inline-edit-chip-bg);
+            color: var(--rt-inline-edit-chip-color);
+            font-size: var(--rt-inline-edit-chip-font-size);
+            font-weight: var(--rt-inline-edit-chip-font-weight);
+
+            &:hover:not(:disabled) {
+                border-color: var(--rt-inline-edit-chip-border-color-hover);
+                background: var(--rt-inline-edit-chip-bg);
+            }
+        }
+
+        &--chip &__value--empty {
+            color: var(--rt-inline-edit-empty-color);
+        }
+
+        &--chip &__value:disabled {
+            color: var(--rt-inline-edit-disabled-color);
+        }
+
+        /* Плашка-поле: сама плашка — поле. Значок слева, рамка темнеет в фокусе; ширина идёт за
+           текстом до предела, длинный текст прокручивается в поле и целиком виден в подсказке. */
+        &__chip-field {
+            display: inline-flex;
+            min-width: 0;
+            max-width: min(100%, var(--rt-inline-edit-chip-field-max-width));
+            min-height: var(--rt-inline-edit-height);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 0 var(--rt-inline-edit-value-padding-x);
+            border: var(--rt-inline-edit-border-width) solid var(--rt-inline-edit-chip-field-border-color);
+            border-radius: var(--rt-inline-edit-chip-radius);
+            background: var(--rt-inline-edit-chip-field-bg);
+            color: var(--rt-inline-edit-chip-field-color);
+            cursor: text;
+            font-size: var(--rt-inline-edit-chip-font-size);
+            font-weight: var(--rt-inline-edit-chip-font-weight);
+            gap: var(--rt-inline-edit-value-gap);
+            transition: border-color var(--rt-inline-edit-duration) ease;
+
+            &:focus-within {
+                border-color: var(--rt-inline-edit-chip-field-border-color-focus);
+            }
+
+            &--disabled {
+                color: var(--rt-inline-edit-disabled-color);
+                cursor: default;
+            }
+        }
+
+        &__chip-icon {
+            flex-shrink: 0;
+            color: var(--rt-inline-edit-chip-field-icon-color);
+        }
+
+        &__chip-field--disabled &__chip-icon {
+            color: var(--rt-inline-edit-disabled-color);
+        }
+
+        /* Копия текста и поле лежат в одной клетке: копия задаёт ширину, поле её занимает. */
+        &__sizer {
+            display: inline-grid;
+            overflow: hidden;
+            min-width: 0;
+            grid-template-columns: minmax(0, auto);
+        }
+
+        &__mirror,
+        &__middle,
+        &__chip-input {
+            padding: 0;
+            font: inherit;
+            grid-area: 1 / 1;
+            letter-spacing: inherit;
+            white-space: pre;
+        }
+
+        &__mirror {
+            visibility: hidden;
+        }
+
+        /* Слой обрезки посередине лежит над полем, пока плашка не в фокусе: поле под ним держит
+           текст прозрачным. В фокусе слой прячется, и поле показывает текст целиком. */
+        &__middle {
+            display: flex;
+            overflow: hidden;
+            min-width: 0;
+            pointer-events: none;
+        }
+
+        &__head {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+        }
+
+        &__tail {
+            flex-shrink: 0;
+        }
+
+        /* Условие стоит фокусом, а не его отрицанием: витрина переписывает состояния в классы, и
+           отрицание там выполнялось бы всегда. */
+        &__middle ~ &__chip-input {
+            color: transparent;
+        }
+
+        &__chip-field:focus-within &__middle {
+            visibility: hidden;
+        }
+
+        &__chip-field:focus-within &__middle ~ &__chip-input {
+            color: inherit;
+        }
+
+        &__chip-input {
+            width: 100%;
+            min-width: var(--rt-space-xs);
+            border: 0;
+            background: transparent;
+            color: inherit;
+            outline: none;
+
+            &::placeholder {
+                color: var(--rt-inline-edit-empty-color);
+            }
+
+            &:disabled {
+                cursor: default;
+            }
+        }
+    }
+
+    /* Светлая подложка плашки-поля приложения в тёмной теме светлее страницы: там плашка берёт
+       подложку плашки набора, которую тёмная тема отвечает сама. */
+    [data-theme='dark'] :is(.rt-preset-material, [data-preset='material']) .rt-inline-edit,
+    :is(.rt-preset-material, [data-preset='material']) [data-theme='dark'] .rt-inline-edit,
+    html.rt-theme-dark :is(.rt-preset-material, [data-preset='material']) .rt-inline-edit {
+        --rt-inline-edit-chip-field-bg: var(--rt-inline-edit-chip-bg);
+    }
+}

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

@@ -46,6 +46,9 @@
   остаётся недостижимым.
 - `rtPopoverPanelClass` добавляется **к** базовому `rt-popover-panel`, а не вместо него.
 - Escape и клик мимо закрывают панель во всех режимах.
+- `rtPopoverPositions` даёт свои места вокруг host'а — первое главное, остальные запасные. Заданные
+  читаются при каждом открытии; без входа у панели прежние два места, под host'ом и над ним. Так
+  `rt-speed-menu` ставит действия по сторонам кнопки.
 
 ## Рядом
 

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

@@ -0,0 +1,32 @@
+# `rt-profile-menu`
+
+Содержимое попапа профиля в шапке `rt-page-header`: человек, организация, действия, язык и тема.
+
+```html
+<rt-profile-menu organizationChange="allowed" [userName]="name" [organizationName]="org" (signOut)="signOut()" />
+```
+
+| вход                 | тип                                    | умолчание  |
+| -------------------- | -------------------------------------- | ---------- |
+| `userName`           | `string`                               | `''`       |
+| `organizationName`   | `string`                               | `''`       |
+| `organizationChange` | `'hidden' \| 'denied' \| 'allowed'`    | `'hidden'` |
+| `passwordChange`     | `boolean`                              | `false`    |
+| `locales`            | `ReadonlyArray<IRtProfileMenu.Locale>` | `[]`       |
+| `locale`             | `string`                               | `''`       |
+| `signOutDisabled`    | `boolean`                              | `false`    |
+
+Выходы: `changeOrganization`, `changePassword`, `localeChange` (код языка), `signOut`.
+
+## Главное, что нужно знать
+
+**Панель рисует само меню.** У поповера кита оформления нет, и голые пункты меню в попапе шапки
+легли бы прямо поверх страницы. Стили без инкапсуляции: попап живёт в перекрытии у конца `<body>`.
+
+**Тему переключает `ThemeService`**, как у `rt-theme-toggle`: значок показывает тему, к которой
+переведёт нажатие.
+
+## Края
+
+- Пустое название организации убирает её строку, пустой список языков — переключатель языка.
+- Смена организации в режиме `denied` стоит приглушённой и объясняет причину подсказкой.

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

@@ -0,0 +1,104 @@
+@layer rt-kit.components {
+    /* rt-profile-menu — ViewEncapsulation.None: попап рисуется в перекрытии у конца `<body>`, и
+       правило по классу блока достаёт до него. Отсюда же красится круг под значком темы: он
+       рисуется разметкой `rt-menu-item`, и заскоупленное правило до чужого шаблона не дотянулось бы.
+       Подложку блок берёт у панели навигации кита, а тень своя: узкой панели нужен очерченный край. */
+
+    .rt-profile-menu {
+        display: flex;
+        min-width: var(--rt-profile-menu-min-width);
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-profile-menu-padding);
+        border: var(--rt-profile-menu-border-width) solid var(--rt-nav-panel-color-border);
+        border-radius: var(--rt-profile-menu-radius);
+        background-color: var(--rt-nav-panel-color-bg);
+        box-shadow: var(--rt-profile-menu-shadow);
+        gap: var(--rt-space-2);
+
+        &__user {
+            display: flex;
+            flex-direction: column;
+            padding-bottom: var(--rt-space-2);
+            gap: var(--rt-space-2);
+        }
+
+        &__avatar {
+            display: inline-flex;
+            width: var(--rt-profile-avatar-size);
+            height: var(--rt-profile-avatar-size);
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-profile-avatar-border-width) solid var(--rt-nav-header-color-bg);
+            border-radius: var(--rt-profile-avatar-radius);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-profile-avatar-font-size);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__name {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-tight);
+        }
+
+        // Название заведения и слово-пояснение стоят в одной строке: без него непонятно, что это за
+        // вторая строка под именем.
+        &__organization {
+            color: var(--rt-nav-panel-item-color);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-regular);
+            line-height: var(--rt-leading-tight);
+        }
+
+        &__organization-label {
+            color: var(--rt-nav-panel-group-color);
+        }
+
+        // Строки выступают за содержимое панели на половину её отступа: подсветка на наведении иначе
+        // упирается в рамку. Выступ и горизонтальный отступ строки — одно число, поэтому значок
+        // стоит на краю содержимого панели.
+        &__nav {
+            display: flex;
+            width: calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));
+            flex-direction: column;
+            margin-left: calc(-1 * var(--rt-profile-row-inset));
+        }
+
+        // Строки просторнее и крупнее пунктов обычного меню кита: их четыре, и они читаются как
+        // список действий, а не как выпадающее меню.
+        // Правила строк идут потомком блока: свои умолчания кит объявляет одним классом, и без
+        // лишнего веса исход решал бы порядок подключения стилей.
+        & &__item,
+        & &__theme {
+            border-radius: var(--rt-profile-item-radius);
+            color: var(--rt-nav-panel-item-color);
+            font-size: var(--rt-profile-item-font-size);
+            font-weight: var(--rt-profile-item-font-weight);
+            gap: var(--rt-profile-item-content-gap);
+        }
+
+        & &__item {
+            padding: var(--rt-profile-item-padding-y) var(--rt-profile-row-inset);
+        }
+
+        // Переключатель темы выделен из списка акцентом: значок садится в круг на подложке акцента,
+        // подпись красится им же. Круг набирается отступом по content-box — размер самого значка
+        // приходит инлайном от `rt-icon`.
+        & &__theme {
+            width: calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));
+            padding: var(--rt-profile-row-inset);
+            margin-left: calc(-1 * var(--rt-profile-row-inset));
+            color: var(--rt-color-action-primary);
+
+            .rt-menu-item__icon {
+                box-sizing: content-box;
+                padding: var(--rt-profile-theme-icon-padding);
+                border-radius: var(--rt-profile-theme-icon-radius);
+                background-color: var(--rt-color-action-primary-subtle);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+# `rt-speed-menu`
+
+```html
+<rt-speed-menu label="Масштаб" icon="zoom_in" [actions]="zoomActions" (actionSelect)="zoom($event)" />
+```
+
+Входы — `actions`, `icon`, `label`, `direction`, `size`, `variant`, `closeOnSelect` и `disabled`.
+Выходы — `actionSelect` и `openChange`.
+
+Описание — `docs/specs/ui-kit-v2/speed-menu/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Панель — `rtPopover` на кнопке меню.** Триггер у панели ручной: открывает и закрывает её кнопка.
+Места вокруг кнопки задаёт вход панели `rtPopoverPositions`; без него у панели прежние два места.
+
+**Клавиатуру узнают по счёту щелчков.** Нажатие с клавиатуры приходит с `detail` ноль, и тогда фокус
+встаёт на первое доступное действие. Мышиное нажатие оставляет фокус на кнопке.
+
+**Ходьбу по действиям решает чистая функция.** `speedMenuNextIndex` знает стрелки, Home и End;
+недоступные кнопки отбираются по нативному `disabled` кнопки кита.
+
+## Края
+
+- Escape и Tab в панели ловит сама панель: закрывает меню и ставит фокус на кнопку. Escape на кнопке
+  меню закрывает панель её собственным обработчиком.
+- Шаг входа действия задан правилами `nth-child` до восьми действий; девятое и дальше входят вместе
+  с восьмым.
+- Порядок входа считается с конца у столбца вверх и у ряда к началу: ближнее к кнопке там последнее.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- `rt-icon-button` — его вход `expanded` пишет `aria-expanded` кнопки меню.

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

@@ -0,0 +1,118 @@
+@layer rt-kit.components {
+    /* rt-speed-menu — быстрое меню у круглой кнопки. ViewEncapsulation.None.
+       Host несёт класс блока и кнопку меню; действия лежат в плавающей панели кита в конце
+       страницы, вне блока, поэтому свои свойства панель объявляет на себе. */
+
+    .rt-speed-menu {
+        --rt-speed-menu-shadow: var(--rt-shadow-md);
+
+        display: inline-flex;
+        vertical-align: middle;
+
+        /* Тень покоя кнопка-значок объявляет на своём корне, и ручку переписывает правило сильнее. */
+        &__trigger .rt-icon-button {
+            --rt-icon-button-shadow: var(--rt-speed-menu-shadow);
+        }
+    }
+
+    .rt-speed-menu__panel {
+        --rt-speed-menu-gap: var(--rt-space-sm);
+        --rt-speed-menu-inset: var(--rt-speed-menu-gap);
+        --rt-speed-menu-action-shadow: var(--rt-shadow-md);
+        --rt-speed-menu-action-shadow-hover: var(--rt-speed-menu-action-shadow);
+        --rt-speed-menu-action-bg: var(--rt-color-bg-surface);
+        --rt-speed-menu-action-color: var(--rt-color-text-primary);
+        --rt-speed-menu-action-radius: var(--rt-radius-full);
+        --rt-speed-menu-duration: var(--rt-duration-fast);
+        --rt-speed-menu-stagger: var(--rt-duration-fast);
+
+        display: flex;
+        align-items: center;
+        padding: var(--rt-speed-menu-inset);
+        gap: var(--rt-speed-menu-gap);
+
+        /* Материальный набор повторяет меню приложения — mat-mini-fab: круг цвета primary-container
+           темы со значком on-primary-container 24px, подъём 3 Material (под указателем — 4), действия
+           через 16px и в 28px от кнопки, вход 100 мс со сдвигом 50 мс. Без темы Material круг серый.
+           Значок действия кнопки меню `lg` — ступень `md`, и набор переписывает её размер.
+           Панель живёт в слое поверх страницы, и признак набора несёт сама подложка слоя. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-speed-menu-gap: var(--rt-size-4);
+            --rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));
+            --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-neutral-25));
+            --rt-speed-menu-action-color: var(--mat-sys-on-primary-container, var(--rt-color-text-primary));
+            --rt-icon-step-md: var(--rt-size-6);
+            --rt-speed-menu-action-shadow: var(--mat-sys-level3, var(--rt-mat-shadow-fab));
+            --rt-speed-menu-action-shadow-hover: var(--mat-sys-level4, var(--rt-mat-shadow-fab-hover));
+            --rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);
+            --rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12);
+        }
+
+        &--up,
+        &--down {
+            flex-direction: column;
+        }
+
+        &--start,
+        &--end {
+            flex-direction: row;
+        }
+    }
+
+    /* Подложка цвета поверхности: действие висит над картой или таблицей, а заливка второй палитры
+       кнопки-значка прозрачна. Наведение и недоступность кнопка рисует поверх подложки сама.
+       Действия входят по одному, ближнее к кнопке первым: в столбце вверх и в ряду к началу
+       ближнее — последнее, поэтому там шаг считается с конца. Вход — переход от начального стиля, а
+       не анимация по кадрам: браузер съёмки оставлял анимацию в первом кадре, и действия выходили
+       прозрачными; переход доводится до конца так же, как у раскрывающейся панели. */
+    .rt-speed-menu__action {
+        --rt-speed-menu-step: 0;
+
+        border-radius: var(--rt-speed-menu-action-radius);
+        background-color: var(--rt-speed-menu-action-bg);
+        opacity: 1;
+        transform: scale(1);
+        transition:
+            opacity var(--rt-speed-menu-duration) ease-out,
+            transform var(--rt-speed-menu-duration) ease-out;
+        transition-delay: calc(var(--rt-speed-menu-step) * var(--rt-speed-menu-stagger));
+
+        @starting-style {
+            opacity: 0;
+            transform: scale(0.5);
+        }
+    }
+
+    /* Цвет значка — свойство меню; по умолчанию тот же цвет текста, что ставит вид `secondary`. */
+    .rt-speed-menu__action .rt-icon-button {
+        --rt-icon-button-shadow: var(--rt-speed-menu-action-shadow);
+
+        color: var(--rt-speed-menu-action-color);
+
+        &:hover {
+            --rt-icon-button-shadow: var(--rt-speed-menu-action-shadow-hover);
+        }
+    }
+
+    /* Тёмная заливка материального действия: тема Material отвечает тёмным сама, без неё — тёмная
+       ступень первого кита. */
+    :root[data-theme='dark'] :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel,
+    html.rt-theme-dark :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel {
+        --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-dark-20));
+    }
+
+    @for $step from 1 through 7 {
+        .rt-speed-menu__panel--down .rt-speed-menu__action:nth-child(#{$step + 1}),
+        .rt-speed-menu__panel--end .rt-speed-menu__action:nth-child(#{$step + 1}),
+        .rt-speed-menu__panel--up .rt-speed-menu__action:nth-last-child(#{$step + 1}),
+        .rt-speed-menu__panel--start .rt-speed-menu__action:nth-last-child(#{$step + 1}) {
+            --rt-speed-menu-step: #{$step};
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-speed-menu__action {
+            transition: none;
+        }
+    }
+}

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

@@ -28,6 +28,9 @@
             --rt-tag-severity-text: var(--rt-neutral-700);
             --rt-tag-size-padding-block: var(--rt-space-1);
             --rt-tag-size-padding-inline: var(--rt-space-2);
+            --rt-tag-match-bg: var(--rt-yellow-400);
+            --rt-tag-match-color: var(--rt-neutral-950);
+            --rt-tag-match-radius: var(--rt-radius-xs);
 
             display: inline-flex;
             max-width: 100%;
@@ -126,6 +129,15 @@
                 white-space: nowrap;
             }
 
+            /* Найденное слово поиска — тем же цветом, что в подписи дерева и в поиске меню. */
+            &__part {
+                &--match {
+                    border-radius: var(--rt-tag-match-radius);
+                    background: var(--rt-tag-match-bg);
+                    color: var(--rt-tag-match-color);
+                }
+            }
+
             &__close {
                 margin-inline-start: var(--rt-space-0-5);
             }

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

@@ -52,3 +52,4 @@
 - Кнопка фильтров рисуется, только если объявлен шаблон `[rtThreadListFilters]`;
   `filtersActive` рисует на ней точку.
 - Собственное поле поиска можно заменить шаблоном `[rtThreadListSearch]`.
+- Поле поиска занимает всю шапку до кнопки фильтров, потолка ширины у него нет.

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

@@ -27,9 +27,10 @@
             padding-inline: var(--rt-space-4);
         }
 
+        // Поиск занимает всю шапку до кнопки фильтров: в широкой колонке потолок оставлял
+        // пустое место справа, и шапка читалась недорисованной
         &__search {
             flex: 1 1 auto;
-            max-inline-size: 400px;
             min-inline-size: 0;
         }