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

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

@@ -0,0 +1,203 @@
+@layer rt-kit.components {
+    /* rt-side-menu-sub-item — строка подменю бокового меню. ViewEncapsulation.None.
+       Host несёт класс блока; строка — ссылка или кнопка папки. */
+
+    .rt-side-menu-sub-item {
+        --rt-side-menu-sub-item-radius: var(--rt-radius-full);
+        --rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);
+
+        /* Маркер совпадения поиска — жёлтая подложка с тёмной подписью в обеих темах, как у первого кита. */
+        --rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);
+        --rt-side-menu-sub-item-match-color: var(--rt-neutral-950);
+        --rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);
+
+        display: block;
+
+        &__row {
+            /* Глубину вложения ставит шаблон на саму строку; здесь — значение строки верхнего уровня. */
+            --rt-side-menu-sub-item-depth: 0;
+
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-control-height-md);
+            box-sizing: border-box;
+            align-items: center;
+            border: 0;
+            border-radius: var(--rt-side-menu-sub-item-radius);
+            background: transparent;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-sm);
+            padding-block: var(--rt-space-2);
+            padding-inline: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);
+            text-align: start;
+            text-decoration: none;
+            transition: background-color var(--rt-side-menu-sub-item-transition-duration) ease;
+
+            &:hover,
+            &:active,
+            &--highlighted {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-focus-ring-width) * -1);
+            }
+
+            /* Активна строка со ссылкой; у папки активность видна по её раскрытым пунктам. */
+            &--active {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        &__icon {
+            flex-shrink: 0;
+            color: inherit;
+        }
+
+        /* Свой значок приложения: коробка держит размер значка строки и её цвет, рисунок внутри
+           занимает её целиком и красится через currentColor. */
+        &__own-icon {
+            --rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);
+
+            display: inline-flex;
+            width: var(--rt-side-menu-sub-item-own-icon-size);
+            height: var(--rt-side-menu-sub-item-own-icon-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            color: inherit;
+            line-height: 1;
+
+            > * {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        /* Подпись режется многоточием, полное имя — в подсказке. */
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__part {
+            color: inherit;
+        }
+
+        &__match {
+            border-radius: var(--rt-side-menu-sub-item-match-radius);
+            background: var(--rt-side-menu-sub-item-match-bg);
+            color: var(--rt-side-menu-sub-item-match-color);
+        }
+
+        /* Кнопка потребителя — круг, как у первого кита: рамка круга прозрачна в покое и
+           проявляется под указателем. Рамка — обводкой, а не границей: граница раздвинула бы
+           кнопку, и «+» ушёл бы со столбца шевронов. */
+        &__action {
+            --rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);
+            --rt-side-menu-sub-item-action-radius: var(--rt-radius-full);
+
+            flex-shrink: 0;
+            border-radius: var(--rt-side-menu-sub-item-action-radius);
+            outline: var(--rt-side-menu-sub-item-action-ring-width) solid transparent;
+            outline-offset: calc(var(--rt-side-menu-sub-item-action-ring-width) * -1);
+
+            &:hover {
+                outline-color: var(--rt-color-border-strong);
+            }
+        }
+
+        /* Кнопка избранного: звезда у пункта раздела и «убрать» у строки блока. Закрашенная звезда
+           видна всегда — выбранное читается с одного взгляда; остальные — под наведением и фокусом
+           клавиатуры своей строки, а где указатель не умеет наводиться, — всегда. Прячется
+           прозрачностью: кнопка остаётся на месте и в порядке Tab. */
+        &__favorite {
+            flex-shrink: 0;
+            opacity: 0;
+
+            &--on {
+                --rt-icon-button-color: var(--rt-color-action-primary);
+
+                opacity: 1;
+            }
+
+            /* Корзина под указателем и под фокусом клавиатуры краснеет: нажатие убирает пункт. */
+            @media (hover: hover) {
+                &--remove:hover {
+                    --rt-icon-button-color: var(--rt-color-state-danger);
+                }
+            }
+
+            &--remove:has(:focus-visible) {
+                --rt-icon-button-color: var(--rt-color-state-danger);
+            }
+
+            @media (hover: none) {
+                opacity: 1;
+            }
+        }
+
+        &__row:hover &__favorite,
+        &__row:focus-visible &__favorite,
+        &__row:has(:focus-visible) &__favorite {
+            opacity: 1;
+        }
+
+        /* Папка — раскрывающаяся панель кита в простом виде. Её заголовок оформлен как строка со
+           ссылкой: те же высота, скругление, отступ глубины и подсветка ходьбы стрелками; шеврон
+           панели стоит в столбце кнопок строк, и «+» соседних строк с ним на одной вертикали.
+           Свойства переназначены правилом двух классов: так они сильнее значений самой панели,
+           объявленных на том же узле, а вложенная папка объявляет свои заново. */
+        &__folder.rt-expansion-panel {
+            --rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);
+            --rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-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: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));
+            --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);
+            --rt-expansion-panel-header-bg: transparent;
+        }
+
+        &__folder--highlighted.rt-expansion-panel {
+            --rt-expansion-panel-header-bg: var(--rt-color-bg-hover);
+        }
+
+        &__children {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    /* Меню с `favoriteActionsReserve="none"`: кнопка избранного, ждущая наведения, в покое не
+       занимает ширины, и подпись идёт до края или до кнопки потребителя; отступ ряда перед ней
+       снимается тоже. Закрашенная звезда и экран без наведения держат место: там кнопка видна
+       всегда. Сжата, а не снята с раскладки: остаётся в порядке Tab. */
+    @media (hover: hover) {
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on) {
+            overflow: hidden;
+            width: 0;
+            margin-inline-start: calc(var(--rt-space-sm) * -1);
+        }
+
+        /* Возврат места — прямым правилом, а не отрицанием в правиле выше: `:hover` внутри
+           `:not()` рядом с `:has()` браузер при наведении не пересчитывал, и кнопка оставалась
+           без ширины под указателем. */
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite {
+            overflow: visible;
+            width: auto;
+            margin-inline-start: 0;
+        }
+    }
+}

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

@@ -4,17 +4,24 @@
 <rt-spinner color="primary" [diameter]="32" />
 ```
 
-| вход       | тип                                      | умолчание   |
-| ---------- | ---------------------------------------- | ----------- |
-| `diameter` | `number \| string` (px)                  | `32`        |
-| `color`    | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
-
-Выходов нет. Собственной разметки нет — кольцо рисуется на host-е.
+| вход         | тип                                      | умолчание   |
+| ------------ | ---------------------------------------- | ----------- |
+| `diameter`   | `number \| string` (px)                  | `32`        |
+| `color`      | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
+| `appearance` | `'border' \| 'arc'`                      | `'border'`  |
+| `overlay`    | `boolean`                                | `false`     |
+| `backdrop`   | `boolean` — только вместе с `overlay`    | `false`     |
+| `plate`      | `boolean`                                | `false`     |
+
+Выходов нет. Без `overlay`, `plate` и `arc` собственной разметки нет — кольцо рисуется на host-е,
+и так спиннер стоит в компонентах кита. Любой из этих входов включает внутреннюю разметку.
 
 ## Главное, что нужно знать
 
-**Спиннер не решает, показывать ли себя.** Ни условной отрисовки, ни подложки внутри нет: и то,
-и другое — дело вмещающего. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
+**Спиннер не решает, показывать ли себя.** Условной отрисовки внутри нет — это дело вмещающего.
+Подложку и накрытие блока он рисует по просьбе: `overlay` занимает позиционированного родителя,
+`backdrop` приглушает его содержимое. Слой оверлея — `sticky`, переназначается свойством
+`--rt-spinner-overlay-z`. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
 подменяет им иконку.
 
 Диаметр едет свойством оформления `--rt-spinner-diameter`, а не классом, — поэтому размер

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

@@ -7,15 +7,28 @@
         --rt-spinner-rotation-duration: 1s;
         --rt-spinner-rotation-duration-reduced: 4s;
         --rt-spinner-radius: var(--rt-radius-full);
+        --rt-spinner-overlay-z: var(--rt-z-sticky);
+        --rt-spinner-plate-size: calc(var(--rt-spinner-diameter) + 2 * var(--rt-space-2));
+        --rt-spinner-plate-bg: var(--rt-color-bg-surface);
+        --rt-spinner-plate-shadow: var(--rt-shadow-md);
+        --rt-spinner-plate-radius: var(--rt-radius-full);
+        --rt-spinner-backdrop-bg: color-mix(in srgb, var(--rt-color-bg-subtle) 85%, transparent);
+        --rt-spinner-arc-duration: 1.4s;
+        --rt-spinner-arc-duration-reduced: 5.6s;
 
-        display: inline-block;
-        width: var(--rt-spinner-diameter);
-        height: var(--rt-spinner-diameter);
-        box-sizing: border-box;
-        border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
-        border-radius: var(--rt-spinner-radius);
-        border-right-color: var(--rt-spinner-progress-color);
-        animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        /* Кольцо: border с одной цветной стороной и вращение. Его рисует host без новых режимов,
+           а в них — элемент `__ring` внутри, теми же правилами. */
+        &,
+        &__ring {
+            display: inline-block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            box-sizing: border-box;
+            border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
+            border-radius: var(--rt-spinner-radius);
+            border-right-color: var(--rt-spinner-progress-color);
+            animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        }
 
         &--primary {
             --rt-spinner-progress-color: var(--rt-color-action-primary);
@@ -29,6 +42,61 @@
             --rt-spinner-track-color: var(--rt-overlay-white-25);
             --rt-spinner-progress-color: var(--rt-color-action-on-primary);
         }
+
+        /* В новых режимах host — коробка, а кольцо внутри: border и вращение с host-а снимаются. */
+        &--framed {
+            display: inline-flex;
+            width: auto;
+            height: auto;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            border-radius: 0;
+            animation: none;
+        }
+
+        /* Слой — ступень sticky: выше закреплённых частей самого блока, ниже всего, что открывается
+           поверх страницы; приложение переназначает слой свойством `--rt-spinner-overlay-z`. Родитель
+           должен быть позиционирован — его спиннер не трогает. */
+        &--overlay {
+            position: absolute;
+            z-index: var(--rt-spinner-overlay-z);
+            display: flex;
+            inset: 0;
+        }
+
+        &--backdrop {
+            background: var(--rt-spinner-backdrop-bg);
+        }
+
+        &__plate {
+            display: inline-flex;
+            width: var(--rt-spinner-plate-size);
+            height: var(--rt-spinner-plate-size);
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-spinner-plate-radius);
+            background: var(--rt-spinner-plate-bg);
+            box-shadow: var(--rt-spinner-plate-shadow);
+        }
+
+        /* Дуга как у Material: контейнер вращается, а длина дуги растёт и сокращается. Дорожки нет. */
+        &__arc {
+            display: block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            animation: rt-spinner-rotate var(--rt-spinner-arc-duration) linear infinite;
+        }
+
+        &__arc-circle {
+            animation: rt-spinner-arc-dash var(--rt-spinner-arc-duration) ease-in-out infinite;
+            fill: none;
+            stroke: var(--rt-spinner-progress-color);
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+            stroke-linecap: round;
+            stroke-width: 4;
+        }
     }
 
     @keyframes rt-spinner-rotate {
@@ -37,9 +105,40 @@
         }
     }
 
+    /* Цикл Material — точка, длинная дуга, дуга уходит в точку — начат с длинной дуги. Движение то
+       же, а кадр с остановленным движением показывает дугу, а не точку. В середине дуга уже точка, и
+       переход к началу её длины глазу не виден. */
+    @keyframes rt-spinner-arc-dash {
+        0% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+
+        50% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -124;
+        }
+
+        50.01% {
+            stroke-dasharray: 1 200;
+            stroke-dashoffset: 0;
+        }
+
+        100% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+    }
+
     @media (prefers-reduced-motion: reduce) {
-        .rt-spinner {
+        .rt-spinner,
+        .rt-spinner__ring {
             animation-duration: var(--rt-spinner-rotation-duration-reduced);
         }
+
+        .rt-spinner__arc,
+        .rt-spinner__arc-circle {
+            animation-duration: var(--rt-spinner-arc-duration-reduced);
+        }
     }
 }

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

@@ -85,6 +85,12 @@
 колонки**: заголовки живут в шаблонах ячеек CDK, куда карточка не дотягивается. Осмысленные
 подписи даёт `columnsConfig`.
 
+**Карточка открывает запись так же, как строка.** Нажатие, Enter и пробел на карточке передаются
+спрятанной строке с тем же номером, и срабатывает её `(activated)` от `rtTableRow`: приложению не
+нужен второй обработчик. Нажатие по кнопке, ссылке, полю, `role="button"` или `role="switch"`
+внутри карточки открытием не считается. Карточка отзывается и берёт фокус клавишей Tab только при
+`clickable`.
+
 **Настройка колонок требует и `columnsConfig`, и `tableId`.** Выбор хранится в IndexedDB, и без
 идентификатора таблицы его некуда положить — поэтому `canConfigure()` останется `false`.
 

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

@@ -164,9 +164,11 @@
         }
 
         /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
-           table-семантику обеспечивает директива rtTableRow на самой строке. */
+           table-семантику обеспечивает директива rtTableRow на самой строке.
+           Карточка узкого экрана открывает запись так же, как строка: вид у неё тот же. */
         &--clickable {
-            .cdk-row {
+            .cdk-row,
+            .rt-table__card {
                 cursor: pointer;
 
                 &:focus-visible {

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

@@ -7,6 +7,11 @@
        так они достаются только корню шаблона. */
 
     rt-tag {
+        /* Скругление и толщина рамки объявлены на хосте: правило приложения на теге компонента
+           их переопределяет, а шаги входа `radius` стоят тоже на хосте. */
+        --rt-tag-radius: var(--rt-radius-full);
+        --rt-tag-border-width: var(--rt-border-width-thin);
+
         display: inline-flex;
 
         /* Предел стоит и на хосте, и на пилюле внутри. Вмещающий блок пилюли — сам хост, и без
@@ -14,73 +19,88 @@
            разросшегося хоста, и метка вылезает за место, которое ей дали. */
         max-width: 100%;
 
+        /* Цвета и отступы приложение задаёт ручками `--rt-tag-color-*` и `--rt-tag-padding-*`:
+           их кит не объявляет, а запасное значение — то, что дают палитра и ступень размера.
+           У интервала запасного нет нарочно: незаданная ручка даёт unset, то есть наследование
+           от родителя, как до ручки. Запасное normal обрывало его. */
         .rt-tag {
-            --rt-tag-radius: var(--rt-radius-full);
-            --rt-tag-border-width: var(--rt-border-width-thin);
+            --rt-tag-severity-bg: var(--rt-neutral-100);
+            --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);
 
             display: inline-flex;
             max-width: 100%;
             align-items: center;
-            padding: var(--rt-space-1) var(--rt-space-2);
+            padding: var(--rt-tag-padding-block, var(--rt-tag-size-padding-block))
+                var(--rt-tag-padding-inline, var(--rt-tag-size-padding-inline));
             border-radius: var(--rt-tag-radius);
-            background: var(--rt-neutral-100);
-            color: var(--rt-neutral-700);
+            background: var(--rt-tag-color-bg, var(--rt-tag-severity-bg));
+            color: var(--rt-tag-color-text, var(--rt-tag-severity-text));
             font-size: var(--rt-text-sm);
             gap: var(--rt-space-1);
+            letter-spacing: var(--rt-tag-letter-spacing);
             line-height: var(--rt-leading-tight);
 
             /* Ступени размера: отступы, кегль и просвет между частями двигаются вместе. `md`
                повторяет то, чем метка рисовалась до появления ступеней, и вид без входа не
                меняется ни на пиксель. */
             &--size--sm {
-                padding: var(--rt-space-0-5) var(--rt-space-1);
+                --rt-tag-size-padding-block: var(--rt-space-0-5);
+                --rt-tag-size-padding-inline: var(--rt-space-1);
+
                 font-size: var(--rt-text-xs);
                 gap: var(--rt-space-0-5);
             }
 
             &--size--md {
-                padding: var(--rt-space-1) var(--rt-space-2);
+                --rt-tag-size-padding-block: var(--rt-space-1);
+                --rt-tag-size-padding-inline: var(--rt-space-2);
+
                 font-size: var(--rt-text-sm);
                 gap: var(--rt-space-1);
             }
 
             &--size--lg {
-                padding: var(--rt-space-2) var(--rt-space-4);
+                --rt-tag-size-padding-block: var(--rt-space-2);
+                --rt-tag-size-padding-inline: var(--rt-space-4);
+
                 font-size: var(--rt-text-md);
                 gap: var(--rt-space-2);
             }
 
             &--severity--info {
-                background: var(--rt-color-state-info-bg);
-                color: var(--rt-color-state-info);
+                --rt-tag-severity-bg: var(--rt-color-state-info-bg);
+                --rt-tag-severity-text: var(--rt-color-state-info);
             }
 
             &--severity--success {
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+                --rt-tag-severity-bg: var(--rt-color-state-success-bg);
+                --rt-tag-severity-text: var(--rt-color-state-success);
             }
 
             &--severity--warning {
-                background: var(--rt-color-state-warning-bg);
-                color: var(--rt-color-state-warning);
+                --rt-tag-severity-bg: var(--rt-color-state-warning-bg);
+                --rt-tag-severity-text: var(--rt-color-state-warning);
             }
 
             &--severity--danger {
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+                --rt-tag-severity-bg: var(--rt-color-state-danger-bg);
+                --rt-tag-severity-text: var(--rt-color-state-danger);
             }
 
             &--severity--secondary,
             &--severity--neutral {
-                background: var(--rt-color-bg-subtle);
-                color: var(--rt-color-text-primary);
+                --rt-tag-severity-bg: var(--rt-color-bg-subtle);
+                --rt-tag-severity-text: var(--rt-color-text-primary);
             }
 
             /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
-               После severity-блоков — иначе их `background` перебил бы transparent. */
+               После severity-блоков — иначе их фон перебил бы transparent. */
             &--appearance--outlined {
-                border: var(--rt-tag-border-width) solid currentcolor;
-                background: transparent;
+                --rt-tag-severity-bg: transparent;
+
+                border: var(--rt-tag-border-width) solid var(--rt-tag-color-border, currentcolor);
             }
 
             &__icon {
@@ -111,7 +131,7 @@
             }
         }
 
-        /* Шаг входа `radius` переназначает собственное свойство пилюли. */
-        @include kv.radius-steps('--rt-tag-radius', '> .rt-tag');
+        /* Шаг входа `radius` переназначает собственное свойство пилюли на хосте. */
+        @include kv.radius-steps('--rt-tag-radius');
     }
 }

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

@@ -24,6 +24,7 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 | `duration`        | `number \| string` (мс)                                                                           | `4000`           |
 | `visibleToasts`   | `number \| string`                                                                                | `3`              |
 | `expand`          | `boolean`                                                                                         | `false`          |
+| `mode`            | `'stack' \| 'replace'`                                                                            | `'stack'`        |
 
 ## Главное, что нужно знать
 
@@ -42,12 +43,19 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `action` и `secondaryAction` рисуются кнопками внутри тоста и зовут переданные обработчики.
 - `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
 - Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
+- `duration` у самого тоста важнее срока тостера; `duration: null` держит тост до крестика.
+- `progress: true` рисует полосу срока; она встаёт тем же признаком `rt-toast--paused`, что и таймер.
+- `icon` у тоста важнее карты `RT_TOAST_SEVERITY_ICONS`; `icon: null` снимает значок.
+- `mode="replace"` помечает прежние тосты вытесненными, и они уходят той же анимацией, что по крестику.
 
 ## Края
 
 - **Нулевая длительность не значит «висит, пока не закроют».** `duration: 0` — это таймер на
   ноль миллисекунд: тост гасит себя сразу после первой отрисовки. Держать его открытым умеет
   только пауза таймера — признак `interacting` либо развёрнутая стопка.
+  Тост «до крестика» задаётся `duration: null`.
+- **Значок красится стилем, а не входом `color` значка.** Вход пишет цвет прямо в разметку, и
+  ручке `--rt-toast-icon-color` перебить его было бы нечем.
 - **В матрице каждому тосту ставится `[interacting]="true"`.** Иначе ячейки гаснут одна за
   другой, пока смотришь на показ, и кадр снимается с пустой сетки.