@rt-tools/ui-kit-v2 0.14.0 → 0.16.0

package/src/lib/components/image-cropper/rt-image-cropper.component.scss

@@ -0,0 +1,220 @@
+@layer rt-kit.components {
+    /* rt-image-cropper — обрезка изображения (ViewEncapsulation.None). Где лежат картинка и
+       рамка, считает компонент и кладёт на host пикселями поля; здесь только то, как они
+       выглядят. */
+
+    .rt-image-cropper {
+        --rt-image-cropper-height: calc(var(--rt-size-20) * 4);
+        --rt-image-cropper-radius: var(--rt-radius-md);
+        --rt-image-cropper-frame-radius: var(--rt-radius-none);
+        --rt-image-cropper-field-bg: var(--rt-color-bg-subtle);
+        --rt-image-cropper-shade: var(--rt-overlay-black-50);
+        --rt-image-cropper-rim-width: var(--rt-border-width-thin);
+        --rt-image-cropper-rim-color: var(--rt-overlay-white-50);
+        --rt-image-cropper-dash-style: none;
+        --rt-image-cropper-dash-color: transparent;
+        --rt-image-cropper-dash-opacity: 1;
+        --rt-image-cropper-handle-size: var(--rt-size-3);
+        --rt-image-cropper-handle-bg: var(--rt-color-action-on-primary);
+        --rt-image-cropper-handle-border: var(--rt-color-border-strong);
+        --rt-image-cropper-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-image-cropper-text-color: var(--rt-color-text-muted);
+        --rt-image-cropper-disabled-opacity: 0.5;
+
+        /* Где лежат картинка и рамка, компонент ставит на host пикселями поля; здесь — значения
+           до первого замера, чтобы у каждого свойства было объявление. */
+        --rt-image-cropper-image-x: 0;
+        --rt-image-cropper-image-y: 0;
+        --rt-image-cropper-image-width: 0;
+        --rt-image-cropper-image-height: 0;
+        --rt-image-cropper-frame-x: 0;
+        --rt-image-cropper-frame-y: 0;
+        --rt-image-cropper-frame-width: 0;
+        --rt-image-cropper-frame-height: 0;
+
+        /* Поле берёт ширину своей коробки: в ячейке, которая центрирует содержимое, блок без
+           ширины схлопнулся бы в ноль. */
+        display: block;
+        width: 100%;
+
+        &__field {
+            position: relative;
+            overflow: hidden;
+            height: var(--rt-image-cropper-height);
+            border-radius: var(--rt-image-cropper-radius);
+            background: var(--rt-image-cropper-field-bg);
+            user-select: none;
+        }
+
+        &__spinner {
+            position: absolute;
+            inset: 50% auto auto 50%;
+            translate: -50% -50%;
+        }
+
+        &__placeholder,
+        &__refusal {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-md);
+            margin: 0;
+            color: var(--rt-image-cropper-text-color);
+            inset: 0;
+            text-align: center;
+        }
+
+        &__image {
+            position: absolute;
+            top: var(--rt-image-cropper-image-y);
+            left: var(--rt-image-cropper-image-x);
+            width: var(--rt-image-cropper-image-width);
+            max-width: none;
+            height: var(--rt-image-cropper-image-height);
+            image-orientation: from-image;
+            pointer-events: none;
+        }
+
+        &__frame {
+            position: absolute;
+            top: var(--rt-image-cropper-frame-y);
+            left: var(--rt-image-cropper-frame-x);
+            width: var(--rt-image-cropper-frame-width);
+            height: var(--rt-image-cropper-frame-height);
+            box-sizing: border-box;
+            border: var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-rim-color);
+            border-radius: var(--rt-image-cropper-frame-radius);
+            cursor: move;
+
+            /* Затемнение всего, что вне рамки: обводка шире любого поля, а поле его обрезает.
+               Обводка повторяет скругление, поэтому в круглом виде светлое место — круг. */
+            outline: 100vmax solid var(--rt-image-cropper-shade);
+            touch-action: none;
+
+            /* Пунктир поверх светлой линии рамки; в своём наборе его нет, материальный рисует
+               его, как обрезка первого кита. */
+            &:after {
+                position: absolute;
+                border: var(--rt-image-cropper-rim-width) var(--rt-image-cropper-dash-style) var(--rt-image-cropper-dash-color);
+                border-radius: inherit;
+                content: '';
+                inset: calc(-1 * var(--rt-image-cropper-rim-width));
+                opacity: var(--rt-image-cropper-dash-opacity);
+                pointer-events: none;
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-image-cropper-focus-shadow);
+            }
+        }
+
+        &__handle {
+            position: absolute;
+            width: var(--rt-image-cropper-handle-size);
+            height: var(--rt-image-cropper-handle-size);
+            box-sizing: border-box;
+            border: var(--rt-image-cropper-rim-width) solid var(--rt-image-cropper-handle-border);
+            background: var(--rt-image-cropper-handle-bg);
+            touch-action: none;
+
+            &:focus-visible {
+                box-shadow: var(--rt-image-cropper-focus-shadow);
+                outline: none;
+            }
+
+            &--side--nw {
+                top: 0;
+                left: 0;
+                cursor: nwse-resize;
+            }
+
+            &--side--n {
+                top: 0;
+                left: 50%;
+                cursor: ns-resize;
+                translate: -50% 0;
+            }
+
+            &--side--ne {
+                top: 0;
+                left: 100%;
+                cursor: nesw-resize;
+                translate: -100% 0;
+            }
+
+            &--side--e {
+                top: 50%;
+                left: 100%;
+                cursor: ew-resize;
+                translate: -100% -50%;
+            }
+
+            &--side--se {
+                top: 100%;
+                left: 100%;
+                cursor: nwse-resize;
+                translate: -100% -100%;
+            }
+
+            &--side--s {
+                top: 100%;
+                left: 50%;
+                cursor: ns-resize;
+                translate: -50% -100%;
+            }
+
+            &--side--sw {
+                top: 100%;
+                left: 0;
+                cursor: nesw-resize;
+                translate: 0 -100%;
+            }
+
+            &--side--w {
+                top: 50%;
+                left: 0;
+                cursor: ew-resize;
+                translate: 0 -50%;
+            }
+        }
+
+        /* Материальный набор повторяет обрезку первого кита: поле без подложки и скругления,
+           светлая вуаль вокруг рамки, пунктир по рамке и мелкие тёмные ручки. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-image-cropper-radius: var(--rt-radius-none);
+            --rt-image-cropper-field-bg: transparent;
+            --rt-image-cropper-shade: var(--rt-overlay-white-25);
+            --rt-image-cropper-dash-style: dashed;
+            --rt-image-cropper-dash-color: var(--rt-mat-dark-40);
+            --rt-image-cropper-dash-opacity: 0.75;
+            --rt-image-cropper-handle-size: var(--rt-size-2);
+            --rt-image-cropper-handle-bg: var(--rt-mat-dark-40);
+            --rt-image-cropper-handle-border: var(--rt-overlay-white-50);
+
+            @media (pointer: coarse) {
+                --rt-image-cropper-handle-size: var(--rt-size-6);
+            }
+        }
+
+        &--round {
+            --rt-image-cropper-frame-radius: var(--rt-radius-full);
+        }
+
+        /* Недоступность ниже вида: она отменяет курсоры и приглушает картинку при любом виде. */
+        &--disabled &__frame,
+        &--disabled &__handle {
+            cursor: default;
+        }
+
+        &--disabled &__handle,
+        &--disabled &__image {
+            opacity: var(--rt-image-cropper-disabled-opacity);
+        }
+
+        /* Палец крупнее указателя: ручки растут по способу нажатия, а не по ширине экрана. */
+        @media (pointer: coarse) {
+            --rt-image-cropper-handle-size: var(--rt-size-6);
+        }
+    }
+}

package/src/lib/components/image-upload/CONTEXT.md

@@ -0,0 +1,65 @@
+# `rt-image-upload`
+
+Загрузчик одного изображения: логотип, аватар, обложка. Одно место, в котором по очереди стоят зона
+загрузки, обрезка и сама картинка.
+
+```html
+<rt-image-upload
+    downloadable
+    fileName="logo.png"
+    tooltip="Логотип. Нажмите, чтобы заменить"
+    [imageUrl]="logoUrl"
+    (imageChanged)="upload($event)" />
+```
+
+| вход            | тип                                 | умолчание                    |
+| --------------- | ----------------------------------- | ---------------------------- |
+| `imageUrl`      | `string \| null`                    | `null`                       |
+| `fileName`      | `string`                            | `'image'`                    |
+| `tooltip`       | `string`                            | `''` → `uiImageUploadChange` |
+| `downloadable`  | `boolean`                           | `false`                      |
+| `downloadShape` | `'circle' \| 'square'`              | `'circle'`                   |
+| `autoApply`     | `boolean`                           | `false`                      |
+| `loading`       | `boolean`                           | `false`                      |
+| `disabled`      | `boolean`                           | `false`                      |
+| `ratio`         | `number \| null`                    | `null`                       |
+| `round`         | `boolean`                           | `false`                      |
+| `format`        | `'png' \| 'jpeg' \| 'webp' \| null` | `null`                       |
+| `quality`       | `number`                            | `92`                         |
+
+Выходы: `imageChanged` (`File`), `downloaded`.
+
+## Главное, что нужно знать
+
+**Место одно, и в нём одно состояние.** Загрузка приложения важнее всего, выбранный файл важнее
+картинки, картинка важнее зоны загрузки. Картинка стоит на месте зоны, а не под ней.
+
+**Нажатие на картинку выбирает другой файл**, а выбранный открывает обрезку. «Отмена» возвращает
+прежнюю картинку, «Применить» ставит результат и отдаёт файл в `imageChanged`.
+
+**Картинка — адрес.** Приложение даёт свой; адрес применённого файла загрузчик делает сам и отпускает,
+когда картинку сменили или компонент ушёл. Новый `imageUrl` от приложения снова берёт верх.
+
+**`autoApply` убирает кнопки:** каждый результат обрезки сразу становится картинкой и уходит
+приложению, а обрезка остаётся открытой.
+
+## Оформление снаружи
+
+Свойства блока: `--rt-image-upload-image-max-height`, `--rt-image-upload-image-radius`,
+`--rt-image-upload-hover-opacity`, `--rt-image-upload-focus-shadow`,
+`--rt-image-upload-download-overhang`, `--rt-image-upload-download-bg`,
+`--rt-image-upload-download-radius`. Они объявлены на самом блоке, поэтому переопределяются
+правилом на `.rt-image-upload`, а не на `:root`. Зона загрузки берёт свойства
+`--rt-empty-state-frame-*`, обрезка — `--rt-image-cropper-*`.
+
+## Края
+
+- Брошенный файл не-изображение пропускается, зона остаётся как была.
+- Недоступный загрузчик не берёт файлов и не открывает выбор; скачивание остаётся.
+- Обрезка, не прочитавшая файл, закрывается, как по «Отмене».
+
+## Рядом
+
+- [`rt-image-cropper`](../image-cropper/CONTEXT.md) — обрезка сама по себе, без выбора файла.
+- [`rt-file-drop`](../file-drop/CONTEXT.md) и [`rt-empty-state`](../empty-state/CONTEXT.md) — из них
+  собрана зона загрузки.

package/src/lib/components/image-upload/rt-image-upload.component.scss

@@ -0,0 +1,77 @@
+@layer rt-kit.components {
+    /* rt-image-upload — одно место загрузчика (ViewEncapsulation.None, класс блока на host).
+       Место берёт ширину коробки: обрезка внутри меряет поле по ней. */
+
+    .rt-image-upload {
+        --rt-image-upload-image-max-height: var(--rt-size-100);
+        --rt-image-upload-image-radius: var(--rt-radius-md);
+        --rt-image-upload-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-image-upload-hover-opacity: 0.85;
+        --rt-image-upload-download-overhang: var(--rt-space-sm);
+        --rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);
+        --rt-image-upload-download-radius: var(--rt-radius-md);
+
+        display: block;
+        width: 100%;
+
+        &__loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-xl);
+        }
+
+        &__actions {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: var(--rt-space-sm);
+            gap: var(--rt-space-sm);
+        }
+
+        /* Кнопка скачивания заходит за правый верхний угол картинки, как у первого кита: у превью
+           отступ вокруг картинки, а кнопка стоит в углу превью и накрывает край картинки. */
+        &__preview {
+            position: relative;
+            display: inline-block;
+            max-width: 100%;
+            box-sizing: border-box;
+            padding: var(--rt-image-upload-download-overhang);
+        }
+
+        &__download {
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-radius: var(--rt-image-upload-download-radius);
+            /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+            -webkit-backdrop-filter: blur(8px);
+            backdrop-filter: blur(8px);
+            background: var(--rt-image-upload-download-bg);
+
+            &--round {
+                --rt-image-upload-download-radius: var(--rt-radius-full);
+            }
+        }
+
+        &__image {
+            display: block;
+            max-width: 100%;
+            max-height: var(--rt-image-upload-image-max-height);
+            border-radius: var(--rt-image-upload-image-radius);
+            object-fit: contain;
+
+            &--active {
+                cursor: pointer;
+
+                &:hover {
+                    opacity: var(--rt-image-upload-hover-opacity);
+                }
+
+                &:focus-visible {
+                    box-shadow: var(--rt-image-upload-focus-shadow);
+                    outline: none;
+                }
+            }
+        }
+    }
+}

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

@@ -44,6 +44,8 @@
 | `confirmTitle`                        | `string \| null`                     | `null`                            |
 | `confirmLabel` / `confirmCancelLabel` | `string`                             | `''` → словарь кита               |
 | `confirmTone`                         | `'danger' \| 'warning' \| 'primary'` | `'danger'`                        |
+| `link`                                | `RouterLink['routerLink']`           | `null`                            |
+| `fill`                                | `boolean`                            | `false`                           |
 
 | выход      | тип    |
 | ---------- | ------ |
@@ -60,6 +62,30 @@
 `confirmMessage` открывает `rt-menu-confirm-dialog`, и `selected` приходит **только** после
 подтверждения.
 
+**Пункт-ссылка ведёт на страницу приложения.** Вход `link` принимает команды маршрута, как
+`routerLink`, и пункт рисует внутри себя ссылку с адресом. Enter и клик переходят по ней, а
+Ctrl/Cmd-click, Shift-click и средняя кнопка открывают новую вкладку или окно силами браузера.
+Меню закрывается во всех этих случаях. Подтверждение у пункта-ссылки не спрашивается: переход
+случается раньше, чем диалог успел бы спросить согласия.
+
+**Свой значок пункта — шаблон `rtMenuItemIcon`.** Значок, которого нет ни в наборе кита, ни в
+перечне имён Material, приложение кладёт внутрь пункта в `<ng-template rtMenuItemIcon>`. Кит
+ставит его на место значка пункта его размером и красит цветом тона, в том числе у опасного
+пункта и пункта-согласия; рисунок берёт цвет через `currentColor`. Свой значок сильнее `icon` и
+`glyph`. Имя Material без пары и без своего значка рисует пункт без значка и в режиме
+разработки пишет об этом предупреждение в консоль.
+
+```html
+<rt-menu-item label="Сделать активным" (selected)="activate()">
+    <ng-template rtMenuItemIcon><svg viewBox="0 0 24 24">…</svg></ng-template>
+</rt-menu-item>
+```
+
+**Залитый значок пункта — вход `fill`.** Он уходит в `fill` значка: в материальном наборе пункт
+рисует залитый рисунок, как пункты меню первого кита, а свой набор рисует значок одним рисунком.
+Без входа значок контурный. Свой значок `rtMenuItemIcon` приложение рисует само, и заливка его не
+касается.
+
 ## Края
 
 - Отключённый пункт не выбирается и меню не закрывает: он выпадает из таб-порядка (`tabindex`
@@ -68,6 +94,7 @@
 - Пункты для хода стрелками меню берёт из разметки панели, а не запросом компонентов: таблица
   кладёт их шаблоном приложения, и запрос содержимого меню их не видит.
 - Панель объявлена `role="menu"`, пункт — `role="menuitem"`.
+- У пункта-ссылки роль пункта меню и фокус несёт ссылка внутри, а хост объявлен `role="none"`.
 
 ## Рядом
 

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

@@ -51,6 +51,23 @@
             max-height: var(--rt-menu-item-icon-size);
             flex-shrink: 0;
             color: var(--rt-color-text-muted);
+
+            /* Свой значок приложения: коробка значка держит размер и цвет тона, а рисунок внутри
+               занимает её целиком и красится через currentColor. */
+            &--own {
+                display: inline-flex;
+                width: var(--rt-menu-item-icon-size);
+                height: var(--rt-menu-item-icon-size);
+                align-items: center;
+                justify-content: center;
+                font-size: var(--rt-menu-item-icon-size);
+                line-height: 1;
+
+                > * {
+                    max-width: 100%;
+                    max-height: 100%;
+                }
+            }
         }
 
         &__label {
@@ -58,6 +75,31 @@
             white-space: nowrap;
         }
 
+        /* Пункт-ссылка: кликабельной зоной и узлом фокуса служит ссылка внутри, поэтому поля и
+           раскладка пункта переезжают на неё, а хост остаётся рамкой подсветки. */
+        &--link {
+            padding: 0;
+        }
+
+        &__link {
+            display: flex;
+            min-width: 0;
+            min-height: var(--rt-menu-item-min-height);
+            box-sizing: border-box;
+            flex: 1 1 auto;
+            align-items: center;
+            padding: var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);
+            border-radius: var(--rt-menu-item-radius);
+            color: inherit;
+            gap: var(--rt-space-sm);
+            text-decoration: none;
+
+            &:focus-visible {
+                background: var(--rt-color-bg-hover);
+                outline: none;
+            }
+        }
+
         &--current {
             background: var(--rt-menu-item-current-bg);
         }

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

@@ -0,0 +1,38 @@
+# `rt-side-menu`
+
+Боковая навигация: полоса пунктов и подменю раздела рядом. Перенос бокового меню первого кита. Это
+не `rt-menu`: то выпадающее меню действий, и одно другое не заменяет.
+
+```html
+<rt-side-menu menuId="main" [menuItems]="sections()" [activeMenuIds]="activeIds()" />
+```
+
+Входы, выходы и оси — в `Overview.mdx` рядом. Договорённость о поведении — описание второго кита,
+поддомен бокового меню.
+
+## Главное, что нужно знать
+
+**Активность приходит снаружи.** Меню не держит адрес само: какие пункты активны, говорит
+`activeMenuIds`, и подсветку двигает новый набор после перехода.
+
+**Режим и ширину подменю хранит сервис, а не меню.** `provideRtSideMenuSettings()` включает
+хранение под номером меню; без провайдера меню ничего не помнит, и режим с шириной приходят
+входами. Вход важнее сохранённого.
+
+**Значок вне набора — шаблон `rtSideMenuIcon`.** Имя Material первого кита меню переводит парой
+из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты; без
+шаблона на его месте пусто, а в режиме разработки консоль называет такое имя.
+
+**Раздел и запрос меню держит само.** Их не задать входом: раздел открывает нажатие или наведение
+на пункт полосы, запрос — набор в поле.
+
+## Края
+
+- Незакреплённая панель стоит над страницей и закрывается уходом указателя. Если человек взялся за
+  поле поиска, её закрывает только нажатие снаружи.
+- Закреплённая панель стоит в потоке рядом с полосой, у неё есть ручка ширины.
+- На узком экране закрепления нет: меню рисует один столбец с кнопкой «назад».
+- Столбец узкого экрана шириной `--rt-side-menu-mobile-width`, 15rem, как меню телефона первого кита:
+  длинная подпись режется многоточием и не раздувает меню. Строки стоят в 8 пикселях от края,
+  подпись — с 56.
+- Отказ хранилища меню не останавливает.

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

@@ -0,0 +1,126 @@
+@layer rt-kit.components {
+    /* rt-side-menu-favorites — блок избранного вверху подменю. ViewEncapsulation.None.
+       Блок — раскрывающаяся панель кита, оформленная как папка подменю; строки — те же подпункты,
+       что в списке. */
+
+    .rt-side-menu-favorites {
+        --rt-side-menu-favorites-radius: var(--rt-radius-full);
+        --rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);
+
+        display: block;
+
+        /* Блок отделён от списка раздела чертой: без неё строка избранного и строка того же пункта
+           в списке стоят подряд и читаются как повтор. Свёрнутый блок держит черту так же. */
+        &:has(.rt-side-menu-favorites__panel) {
+            border-bottom: var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);
+            margin-block-end: var(--rt-space-sm);
+            padding-block-end: var(--rt-space-sm);
+        }
+
+        /* Заголовок панели — как у папки подменю. Звезда стоит левее подписей строк, почти у края,
+           как у первого кита: так рядом со столбцом шевронов умещается и число строк. Свойства
+           переназначены правилом двух классов: так они сильнее значений самой панели на том же узле. */
+        &__panel.rt-expansion-panel {
+            --rt-expansion-panel-duration: var(--rt-duration-fast);
+            --rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);
+            --rt-expansion-panel-header-min-height: var(--rt-control-height-md);
+            --rt-expansion-panel-header-padding-block: var(--rt-space-2);
+            --rt-expansion-panel-header-padding-start: var(--rt-space-1);
+            --rt-expansion-panel-header-padding-end: var(--rt-space-sm);
+            --rt-expansion-panel-header-gap: var(--rt-space-sm);
+            --rt-expansion-panel-header-font-size: var(--rt-text-sm);
+        }
+
+        /* Звезда стоит на месте значка папки и красится цветом темы, как закрашенные звёзды списка. */
+        &__star {
+            flex-shrink: 0;
+            color: var(--rt-color-action-primary);
+        }
+
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__list {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__item {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+    }
+
+    /* Строка и ручка объявлены вне корня блока: строку в руке CDK выносит в конец страницы, и правило
+       из корня до неё не доходит. */
+    .rt-side-menu-favorites__row {
+        display: flex;
+        align-items: center;
+
+        &.cdk-drag-preview {
+            --rt-side-menu-favorites-preview-radius: var(--rt-radius-full);
+            --rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);
+
+            border-radius: var(--rt-side-menu-favorites-preview-radius);
+            box-shadow: var(--rt-side-menu-favorites-preview-shadow);
+        }
+
+        /* Фон строки в руке — на строке внутри превью, а не на самом превью: CDK выносит превью в
+           верхний слой как `popover` и ставит ему встроенный прозрачный фон, который правило
+           класса не перебивает. */
+        &.cdk-drag-preview .rt-side-menu-favorites__item {
+            min-width: 0;
+            flex: 1 1 auto;
+            border-radius: var(--rt-side-menu-favorites-preview-radius);
+            background: var(--rt-color-bg-surface);
+        }
+
+        &.cdk-drag-placeholder {
+            opacity: 0;
+        }
+    }
+
+    /* Ручка видна так же, как «убрать»: под наведением и фокусом клавиатуры своей строки, а где
+       указатель не умеет наводиться, — всегда. Прячется прозрачностью: остаётся в порядке Tab. */
+    .rt-side-menu-favorites__handle {
+        flex-shrink: 0;
+        cursor: grab;
+        opacity: 0;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        @media (hover: none) {
+            opacity: 1;
+        }
+    }
+
+    .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,
+    .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,
+    .rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle {
+        opacity: 1;
+    }
+
+    /* Меню с `favoriteActionsReserve="none"`: ручка, ждущая наведения, в покое не занимает ширины. */
+    @media (hover: hover) {
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle {
+            overflow: hidden;
+            width: 0;
+            margin-inline-start: calc(var(--rt-space-sm) * -1);
+        }
+
+        /* Возврат места — прямым правилом: отрицание с `:has()` браузер при наведении не пересчитывал. */
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle {
+            overflow: visible;
+            width: auto;
+            margin-inline-start: 0;
+        }
+    }
+}