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

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

@@ -9,11 +9,6 @@
     rt-icon-button {
         display: inline-flex;
 
-        /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя.
-           Ряд берётся из общей шкалы высот контролов: иконочная кнопка стоит в строке
-           рядом с кнопкой и полем и обязана совпадать с ними по высоте. */
-        --rt-icon-button-size: var(--rt-control-height-md);
-
         /* Цвет иконки объявлен здесь, а не приходил бы запасным значением на месте
            обращения: запасное переживает смену темы — переопределять нечего. Своё
            свойство блока перебивает тот, кому нужен другой цвет: так делает просмотр
@@ -38,20 +33,26 @@
             --rt-icon-button-color-hover: var(--rt-icon-button-color);
             --rt-icon-button-transition-duration: var(--rt-duration-fast);
 
-            /* Заливка покоя — своим свойством: неактивная кнопка берёт из неё долю, которую задаёт
-               набор оформления. */
-            --rt-icon-button-bg: transparent;
+            /* Размер и заливка покоя — частные шаги: их пишут модификаторы размера и вида, а кнопка
+               читает их под публичными `--rt-icon-button-size` и `--rt-icon-button-bg`. Публичные
+               кнопка не объявляет, поэтому значение на теге `<rt-icon-button>` или выше доходит до
+               неё; раньше модификатор объявлял публичное свойство на самой кнопке и перебивал тег.
+               Компоненты кита, которым нужен свой размер кнопки, тоже пишут шаг, а не публичное
+               свойство: последнее слово остаётся за приложением.
+               Ряд размеров — из общей шкалы высот контролов: кнопка стоит в строке рядом с полем. */
+            --rt-icon-button-bg-variant: transparent;
+            --rt-icon-button-size-step: var(--rt-control-height-md);
 
             position: relative;
             display: inline-flex;
-            width: var(--rt-icon-button-size);
-            height: var(--rt-icon-button-size);
+            width: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
+            height: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
             align-items: center;
             justify-content: center;
             padding: 0;
             border: 0;
             border-radius: var(--rt-icon-button-radius);
-            background-color: var(--rt-icon-button-bg);
+            background-color: var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
@@ -59,24 +60,34 @@
                 background-color var(--rt-icon-button-transition-duration) ease,
                 box-shadow var(--rt-icon-button-transition-duration) ease;
 
+            /* Два шага меньше `sm` — для плотных строк. У шкалы нет ступени 22px, и ступень ради одной
+               кнопки легла бы мимо её сетки в 4px: шаг `xs` записан на месте. */
+            &--2xs {
+                --rt-icon-button-size-step: var(--rt-size-5);
+            }
+
+            &--xs {
+                --rt-icon-button-size-step: 22px;
+            }
+
             &--sm {
-                --rt-icon-button-size: var(--rt-control-height-sm);
+                --rt-icon-button-size-step: var(--rt-control-height-sm);
             }
 
             &--md {
-                --rt-icon-button-size: var(--rt-control-height-md);
+                --rt-icon-button-size-step: var(--rt-control-height-md);
             }
 
             &--lg {
-                --rt-icon-button-size: var(--rt-control-height-lg);
+                --rt-icon-button-size-step: var(--rt-control-height-lg);
             }
 
             &--xl {
-                --rt-icon-button-size: var(--rt-control-height-xl);
+                --rt-icon-button-size-step: var(--rt-control-height-xl);
             }
 
             &--2xl {
-                --rt-icon-button-size: var(--rt-control-height-2xl);
+                --rt-icon-button-size-step: var(--rt-control-height-2xl);
             }
 
             /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
@@ -85,9 +96,11 @@
                 box-shadow: var(--rt-icon-button-shadow-hover);
             }
 
+            /* Заливка под указателем читается под ручкой `--rt-icon-button-bg-hover`; без неё каждый
+               вид берёт свою, как прежде. */
             &--ghost {
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                     color: var(--rt-icon-button-color-hover);
                 }
 
@@ -97,22 +110,22 @@
             }
 
             &--primary {
-                --rt-icon-button-bg: var(--rt-color-action-primary);
+                --rt-icon-button-bg-variant: var(--rt-color-action-primary);
 
                 color: var(--rt-color-action-on-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-color-action-primary-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover));
                 }
             }
 
             &--secondary {
-                --rt-icon-button-bg: var(--rt-color-bg-surface-subtle);
+                --rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);
 
                 color: var(--rt-color-text-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
             }
 
@@ -120,7 +133,7 @@
                 color: var(--rt-color-state-danger);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -132,7 +145,7 @@
                 color: var(--rt-color-state-success);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -144,7 +157,7 @@
                 color: var(--rt-color-state-warning);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -157,7 +170,11 @@
                встроенным стилем, и правилом его не перебить. Заливка остаётся долей заливки покоя: по умолчанию
                вся, и свой вид прежний. */
             &:disabled {
-                background-color: color-mix(in srgb, var(--rt-icon-button-bg) var(--rt-icon-button-disabled-fill), transparent);
+                background-color: color-mix(
+                    in srgb,
+                    var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),
+                    transparent
+                );
                 cursor: not-allowed;
                 opacity: var(--rt-icon-button-disabled-opacity);
 
@@ -172,6 +189,15 @@
                 outline-offset: 2px;
             }
 
+            /* Своё содержимое вместо значка по имени: встаёт по центру и берёт цвет кнопки. */
+            &__content {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                color: inherit;
+                line-height: 1;
+            }
+
             &__spinner {
                 --rt-icon-button-spin-duration: 1s;
 

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

@@ -0,0 +1,54 @@
+# `rt-image-cropper`
+
+Обрезка изображения. Исходник вписан в поле целиком, поверх — рамка с восемью ручками; компонент
+отдаёт файл, вырезанный рамкой.
+
+```html
+<rt-image-cropper round format="webp" [file]="photo" [ratio]="1" [quality]="85" (cropped)="save($event.file)" (loadFailed)="warn()" />
+```
+
+| вход          | тип                                 | умолчание                          |
+| ------------- | ----------------------------------- | ---------------------------------- |
+| `placeholder` | `string`                            | `''` → `uiImageCropperPlaceholder` |
+| `file`        | `Blob \| null`                      | `null`                             |
+| `ratio`       | `number \| null`                    | `null`                             |
+| `round`       | `boolean`                           | `false`                            |
+| `minSize`     | `number`                            | `16`                               |
+| `format`      | `'png' \| 'jpeg' \| 'webp' \| null` | `null`                             |
+| `quality`     | `number`                            | `92`                               |
+| `disabled`    | `boolean`                           | `false`                            |
+
+Выходы: `cropped` (`{ file, frame }`), `loadFailed`.
+
+## Главное, что нужно знать
+
+**Рамка живёт в пикселях исходника, а не поля.** Поле меняется с окном, исходник — нет; `frame` в
+результате — прямоугольник в пикселях исходника.
+
+**Результат приходит после прочтения исходника и после каждого законченного изменения.** Во время
+перетаскивания — ни одного: один жест — один файл. Каждая стрелка — законченное изменение.
+
+**Круглый вид — только маска на экране.** Результат остаётся квадратом, который режет рамка:
+скругляет картинку приложение там, где её показывает.
+
+**Без выбранного формата берётся формат исходника**, а если он не png, jpeg или webp — png.
+
+**Поворот снимка по EXIF делает браузер.** Размеры, которые видит компонент, уже повёрнутые.
+
+**В материальном наборе обрезка выглядит как в первом ките.** Поле без подложки и скругления,
+вокруг рамки светлая вуаль, по рамке пунктир, ручки мелкие и тёмные. Свой набор держит тёмную
+вуаль и крупные белые ручки.
+
+## Края
+
+- Рамка не выходит за исходник и не становится меньше `minSize`; исходник меньше `minSize` не
+  выпускает рамку за край.
+- Смена `ratio` или `round` ставит рамку заново — наибольшую по центру.
+- Исходник, который не прочитался, показывает отказ и поднимает `loadFailed`; рамки нет.
+- Недоступная обрезка показывает рамку и не меняет её ни указателем, ни клавишами.
+- Высота поля — свойство `--rt-image-cropper-height`.
+
+## Рядом
+
+- [`rt-file-drop`](../file-drop/CONTEXT.md) — приём файла перетаскиванием.
+- [`rt-file-input`](../file-input/CONTEXT.md) — выбор файла кнопкой.

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,70 @@
+# `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'`                   |
+| `downloadIconSize` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| null` | `null` → по размеру кнопки   |
+| `chooseAppearance` | `'filled' \| 'outlined' \| 'text'`                      | `'outlined'`                 |
+| `chooseIcon`       | `string \| null`                                        | `'ico-upload'`               |
+| `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-download-size` (размер кнопки скачивания,
+по умолчанию шаг `--rt-control-height-md`), `--rt-image-upload-download-blur` (размытие под ней,
+8px). Они объявлены на самом блоке, поэтому переопределяются
+правилом на `.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,89 @@
+@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);
+        --rt-image-upload-download-blur: 8px;
+        --rt-image-upload-download-size: var(--rt-control-height-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);
+
+            /* На верх строки: на базовой линии под картинкой оставался зазор под нижние выносные. */
+            vertical-align: top;
+        }
+
+        &__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(var(--rt-image-upload-download-blur));
+            backdrop-filter: blur(var(--rt-image-upload-download-blur));
+            background: var(--rt-image-upload-download-bg);
+
+            &--round {
+                --rt-image-upload-download-radius: var(--rt-radius-full);
+            }
+
+            /* Размер отдаётся кнопке её частным шагом, а не публичным `--rt-icon-button-size`: так
+               последнее слово остаётся за приложением. Шаг кнопка объявляет на корне своего
+               шаблона, а не на хосте, поэтому правило адресует тот же корень. */
+            .rt-icon-button {
+                --rt-icon-button-size-step: var(--rt-image-upload-download-size);
+            }
+        }
+
+        &__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"`.
 
 ## Рядом