@rt-tools/ui-kit-v2 0.1.0 → 0.4.0

package/src/lib/components/photo-viewer/rt-photo-viewer.component.scss

@@ -1,112 +1,113 @@
-:host {
+/* rt-photo-viewer — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-photo-viewer` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+.rt-photo-viewer {
     display: block;
     width: 100vw;
     height: 100vh;
     height: 100dvh;
     background: var(--rt-color-bg-inverse);
 
-    .rt-photo-viewer {
-        // Обёртка существует ради ловушки фокуса и повторяет размеры хоста:
-        // display: contents ломает ловушку — ей нужен настоящий бокс
-        &__surface {
-            position: absolute;
-            inset: 0;
-        }
+    // Обёртка существует ради ловушки фокуса и повторяет размеры хоста:
+    // display: contents ломает ловушку — ей нужен настоящий бокс
+    &__surface {
+        position: absolute;
+        inset: 0;
+    }
 
-        &__bar {
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            right: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: var(--rt-space-4) var(--rt-space-5);
-            color: var(--rt-color-text-inverse);
-            gap: var(--rt-space-4);
-        }
+    &__bar {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--rt-space-4) var(--rt-space-5);
+        color: var(--rt-color-text-inverse);
+        gap: var(--rt-space-4);
+    }
 
-        &__counter {
-            font-size: var(--rt-text-sm);
-            font-variant-numeric: tabular-nums;
-        }
+    &__counter {
+        font-size: var(--rt-text-sm);
+        font-variant-numeric: tabular-nums;
+    }
 
-        &__track {
-            display: flex;
-            overflow: auto hidden;
-            width: 100%;
-            height: 100%;
+    &__track {
+        display: flex;
+        overflow: auto hidden;
+        width: 100%;
+        height: 100%;
 
-            // Свайп, инерцию и прилипание кадра даёт браузер
-            scroll-snap-type: x mandatory;
-            scrollbar-width: none;
-        }
+        // Свайп, инерцию и прилипание кадра даёт браузер
+        scroll-snap-type: x mandatory;
+        scrollbar-width: none;
+    }
 
-        &__slide {
+    &__slide {
+        display: flex;
+        flex: 0 0 100%;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-10) var(--rt-space-4);
+        margin: 0;
+        scroll-snap-align: center;
+
+        picture {
             display: flex;
-            flex: 0 0 100%;
+            width: 100%;
+            height: 100%;
             align-items: center;
             justify-content: center;
-            padding: var(--rt-space-10) var(--rt-space-4);
-            margin: 0;
-            scroll-snap-align: center;
-
-            picture {
-                display: flex;
-                width: 100%;
-                height: 100%;
-                align-items: center;
-                justify-content: center;
-            }
         }
+    }
 
-        // Кадры вертикальные, поэтому ограничение по высоте важнее, чем по ширине
-        &__image {
-            display: block;
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-        }
+    // Кадры вертикальные, поэтому ограничение по высоте важнее, чем по ширине
+    &__image {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
 
-        // Панель правки: светлая полоса поверх тёмного просмотра — она рабочая
-        // область, а не часть кадра
-        &__panel {
-            position: absolute;
-            z-index: 1;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            padding: var(--rt-space-4) var(--rt-space-5);
-            background: var(--rt-color-bg-surface);
-            color: var(--rt-color-text-primary);
-        }
+    // Панель правки: светлая полоса поверх тёмного просмотра — она рабочая
+    // область, а не часть кадра
+    &__panel {
+        position: absolute;
+        z-index: 1;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding: var(--rt-space-4) var(--rt-space-5);
+        background: var(--rt-color-bg-surface);
+        color: var(--rt-color-text-primary);
+    }
 
-        /* TODO: отрефакторить это дерьмо */
-        &__bar rt-icon-button,
-        &__arrow-prev,
-        &__arrow-next {
-            --rt-icon-button-color: var(--rt-color-text-inverse);
-            --rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
+    /* TODO: отрефакторить это дерьмо */
+    &__bar rt-icon-button,
+    &__arrow-prev,
+    &__arrow-next {
+        --rt-icon-button-color: var(--rt-color-text-inverse);
+        --rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
 
-            border-radius: var(--rt-radius-md);
-            background: color-mix(in srgb, var(--rt-color-bg-inverse) 55%, transparent);
-        }
+        border-radius: var(--rt-radius-md);
+        background: color-mix(in srgb, var(--rt-color-bg-inverse) 55%, transparent);
+    }
 
-        &__arrow-prev,
-        &__arrow-next {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-        }
+    &__arrow-prev,
+    &__arrow-next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 
-        &__arrow-prev {
-            left: var(--rt-space-3);
-        }
+    &__arrow-prev {
+        left: var(--rt-space-3);
+    }
 
-        &__arrow-next {
-            right: var(--rt-space-3);
-        }
+    &__arrow-next {
+        right: var(--rt-space-3);
     }
 
     // С панелью кадру нужно место под неё, иначе низ снимка уходит под полосу
@@ -117,15 +118,13 @@
     }
 
     @media (width <= 700px) {
-        .rt-photo-viewer {
-            &__arrow-prev,
-            &__arrow-next {
-                display: none;
-            }
-
-            &__slide {
-                padding: var(--rt-space-12) 0;
-            }
+        &__arrow-prev,
+        &__arrow-next {
+            display: none;
+        }
+
+        &__slide {
+            padding: var(--rt-space-12) 0;
         }
     }
 }

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

@@ -0,0 +1,54 @@
+# `[rtPopover]`
+
+Примитив плавающей панели поверх CDK Overlay. На нём стоят
+[`rt-select`](../select/CONTEXT.md), [`rt-multiselect`](../multiselect/CONTEXT.md),
+[`rt-autocomplete`](../autocomplete/CONTEXT.md) и пояснение в [`rt-field`](../field/CONTEXT.md).
+
+```html
+<button type="button" rtPopoverTrigger="click" rtPopoverWidth="trigger" [rtPopover]="tpl">Открыть</button>
+<ng-template #tpl><div>Содержимое панели</div></ng-template>
+```
+
+| вход (алиас)                            | тип                              | умолчание |
+| --------------------------------------- | -------------------------------- | --------- |
+| `rtPopover`                             | `TemplateRef \| null`            | `null`    |
+| `rtPopoverTrigger`                      | `'click' \| 'hover' \| 'manual'` | `'click'` |
+| `rtPopoverWidth`                        | `'trigger' \| 'auto'`            | `'auto'`  |
+| `rtPopoverAlign`                        | `'start' \| 'end'`               | `'start'` |
+| `rtPopoverFitViewport`                  | `boolean`                        | `false`   |
+| `rtPopoverOffsetY` / `rtPopoverOffsetX` | `number`                         | `4` / `0` |
+| `rtPopoverPanelClass`                   | `string`                         | `''`      |
+| `rtPopoverContext`                      | `unknown`                        | `null`    |
+| `rtPopoverDisabled`                     | `boolean`                        | `false`   |
+
+Выходы: `rtPopoverOpened`, `rtPopoverClosed`. Публичное API: `open()`, `close()`, `toggle()`,
+`isOpen()` — работают **во всех режимах**; `trigger` определяет только автоматические слушатели.
+
+## Главное, что нужно знать
+
+**Панель живёт в оверлее CDK, а не внутри host-элемента.** Поэтому её не режет `overflow: hidden`
+предков (таблицы, асайды, карточки) — но и искать её в разметке компонента бесполезно: в тестах
+она ищется по документу.
+
+**Вложенная панель не считается «кликом снаружи».** Панель, открытая из нашей (список
+`rt-select`, календарь, вложенное меню), лежит в DOM рядом, отдельным оверлеем. Без этой проверки
+меню профиля закрывалось бы, стоило потянуться к списку языков, а выбранное значение не доходило
+бы до обработчика. Вложенность определяется порядком панелей в контейнере оверлеев: открытая позже
+считается вложенной.
+
+## Как этим пользоваться
+
+- `manual` — для контролов со своим жестом (поле с подсказками открывает панель по набору текста).
+- `hover` держит панель открытой при переходе курсора на неё: закрытие отложено на 100 мс, и
+  наведение на панель отсрочку гасит.
+- `fitViewport` **выключен по умолчанию**: панель стоит там, куда её ставит привязка к триггеру,
+  даже если часть ушла за экран. Включать для широких и высоких панелей, иначе их содержимое
+  остаётся недостижимым.
+- `rtPopoverPanelClass` добавляется **к** базовому `rt-popover-panel`, а не вместо него.
+- Escape и клик мимо закрывают панель во всех режимах.
+
+## Рядом
+
+- [`[rtTooltip]`](../tooltip/CONTEXT.md) — та же механика, но для короткой подсказки.
+- [`[rtConfirm]`](../confirm-popover/CONTEXT.md) — панель подтверждения.
+- [`rt-menu`](../menu/CONTEXT.md) — меню действий (на CDK-оверлее напрямую).

package/src/lib/components/rich-editor/CONTEXT.md

@@ -0,0 +1,36 @@
+# `rt-rich-editor`
+
+Поле ввода с форматированием поверх Quill. Значение — модель Quill (`IQuillDelta`), а не HTML.
+
+```html
+<rt-field label="Описание">
+    <rt-rich-editor placeholder="Опишите задачу" toolbar="full" [formControl]="description" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход          | тип                    | умолчание |
+| ------------- | ---------------------- | --------- |
+| `placeholder` | `string`               | `''`      |
+| `toolbar`     | `IRtRichEditorToolbar` | `'full'`  |
+
+Выход: `enterPressed` — Enter без Shift (перенос при этом гасится).
+
+## Главное, что нужно знать
+
+**Quill грузится динамическим импортом** и создаётся только после первой отрисовки — чтобы не
+тянуть его в основную сборку приложения. Отсюда два следствия:
+
+- значение, пришедшее из формы **до** готовности редактора, откладывается и применяется при его
+  создании — оно не теряется;
+- в тестах модуль подменяется (`jest.mock('quill', …)`): сам Quill в jsdom не поднимается.
+
+**Пустой текст пишет в форму `null`, а не пустой набор операций.** Так «пусто» отличимо от
+«есть форматирование без текста» — на этом стоит проверка обязательности поля.
+
+## Рядом
+
+- [`rt-delta-view`](../delta-view/CONTEXT.md) — показ той же модели без редактирования.
+- [`rt-message-composer`](../message-composer/CONTEXT.md) — использует редактор в режиме
+  форматирования.

package/src/lib/components/section-nav/CONTEXT.md

@@ -0,0 +1,27 @@
+# `rt-section-nav`
+
+Плитки разделов: иконка, подпись, подсветка текущего.
+
+```html
+<rt-section-nav [items]="sections()" (itemSelect)="goTo($event)" />
+```
+
+| вход    | тип                                      | умолчание      |
+| ------- | ---------------------------------------- | -------------- |
+| `items` | `readonly { id, icon, label, active }[]` | **обязателен** |
+
+| выход        | тип                              |
+| ------------ | -------------------------------- |
+| `itemSelect` | `string` — идентификатор раздела |
+
+## Главное, что нужно знать
+
+**Активность приходит снаружи, в самом наборе.** Нажатие только просит открыть раздел; подсветку
+двигает уже новый набор, пришедший после перехода. Компонент состояния не держит.
+
+## Края
+
+- Плитка — настоящая `<button>`: до неё доходят клавиатурой.
+- Активная плитка помечена тремя способами: модификатором, `data-active` и `aria-current="page"`.
+- Идентификатор дублируется атрибутом `data-key`.
+- Пустой набор рисует пустую навигацию.

package/src/lib/components/section-nav/rt-section-nav.component.scss

@@ -1,3 +1,6 @@
+/* rt-section-nav — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-section-nav` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
 .rt-section-nav {
     display: flex;
     gap: var(--rt-space-md);
@@ -47,6 +50,9 @@
     }
 }
 
-:host-context([data-theme='dark']) .rt-section-nav__tile--active {
+/* Тёмная тема: активная плитка на тёмной поверхности берёт свой фон.
+   Раньше правило было записано через `:host-context`, который под None не
+   совпадает ни с чем, — тема задаётся атрибутом на предке, и им же адресуется. */
+[data-theme='dark'] .rt-section-nav__tile--active {
     background: var(--rt-blue-900);
 }

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

@@ -0,0 +1,54 @@
+# `rt-select<TValue>`
+
+```html
+<rt-field label="Город">
+    <rt-select placeholder="Выберите" [formControl]="city" [options]="cities" [filter]="true" (selectionChange)="onPicked($event)" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход                | тип                                          | умолчание         |
+| ------------------- | -------------------------------------------- | ----------------- |
+| `options`           | `ReadonlyArray<{ label, value, disabled? }>` | `[]`              |
+| `placeholder`       | `string`                                     | `''`              |
+| `iconLeft`          | `IRtIcon.Name \| null`                       | `null`            |
+| `filter`            | `boolean`                                    | `false`           |
+| `filterPlaceholder` | `string`                                     | `''` → `uiSearch` |
+
+| выход             | тип              |
+| ----------------- | ---------------- |
+| `selectionChange` | `TValue \| null` |
+
+## Главное, что нужно знать
+
+**Подпись выбранного берётся из `options`, а не хранится.** В значении лежит только `value`;
+если набор опций пришёл позже или сменился, подпись перерисуется сама. Значение, которого нет в
+наборе, покажется пустой строкой.
+
+**`selectionChange` — это не дубль формы.** Форма получает значение через
+`ControlValueAccessor`; отдельный выход нужен там, где на выбор надо среагировать (перезагрузить
+зависимый список), не подписываясь на `valueChanges` всей формы. Очистка крестиком тоже
+поднимает его — со значением `null`.
+
+## Клавиатура
+
+- Закрытый список раскрывают `ArrowDown`, `ArrowUp`, `Enter`, `Space` — и сразу подсвечивают
+  первую доступную опцию.
+- Стрелки **перешагивают отключённые опции** и заворачиваются по кругу.
+- `Enter`/`Space` выбирают подсвеченную, `Escape` закрывает без выбора.
+- Опции не фокусируются поодиночке: подсвеченная называется скринридеру через
+  `aria-activedescendant` на триггере.
+
+## Края
+
+- Закрытие списка помечает контрол тронутым и сбрасывает строку фильтра.
+- `FormControl.disable()` **закрывает уже раскрытый** список — иначе панель висела бы над
+  контролом, которым уже нельзя пользоваться.
+- Пустой набор опций рисует строку `uiNoOptions`.
+- Ширина панели равна ширине триггера (`rtPopoverWidth="trigger"`).
+
+## Рядом
+
+- [`rt-multiselect`](../multiselect/CONTEXT.md) — тот же список, но с несколькими значениями.
+- [`rt-autocomplete`](../autocomplete/CONTEXT.md) — когда набор ищут на сервере.

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

@@ -0,0 +1,41 @@
+# `rt-skeleton`
+
+```html
+<rt-skeleton shape="rectangle" size="md" width="240px" height="16px" borderRadius="xl" [animation]="true" />
+```
+
+| вход           | тип                                            | умолчание          |
+| -------------- | ---------------------------------------------- | ------------------ |
+| `shape`        | `'rectangle' \| 'circle' \| 'square'`          | `'rectangle'`      |
+| `size`         | `'sm' \| 'md' \| 'lg'`                         | `'md'`             |
+| `width`        | `string` (любая CSS-длина)                     | `'100%'`           |
+| `height`       | `string`                                       | `'10px'`           |
+| `borderRadius` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| null` | `null` (по фигуре) |
+| `animation`    | `boolean`                                      | `true`             |
+
+Шкала размеров: `sm` 10px, `md` 15px, `lg` 20px. Шкала скруглений: `xs` 2, `sm` 4, `md` 6,
+`lg` 10, `xl` 999px.
+
+## Главное, что нужно знать
+
+**Напрямую его почти не ставят.** Условную отрисовку делает
+[`rt-skeleton-wrapper`](../skeleton-wrapper/CONTEXT.md): он решает, что показать — заглушку или
+проекцию, — и пробрасывает сюда все эти входы. Прямой `rt-skeleton` уместен там, где заглушка
+рисуется без пары «загрузка/контент»: сетка карточек-призраков, макет страницы.
+
+## Края
+
+- **Умолчание высоты — 10px, хотя умолчание размера — `md` (15px).** Расхождение намеренное:
+  полоска текста тоньше шага размера. Прямоугольник слушается `height`, круг и квадрат — нет.
+- Круг и квадрат берут сторону из `size` и **игнорируют** `width`/`height`.
+- **`borderRadius: null` значит «по фигуре», а не «без скругления»:** прямоугольник берёт `xl`,
+  квадрат — `sm` (пилюля из квадрата не квадрат). Заданное значение перебивает умолчание у
+  обоих. Умолчанием нельзя держать сам `xl` — тогда явный `xl` неотличим от невыставленного, и
+  квадрату приходится прибивать `sm` жёстко, молча теряя вход.
+- Круг — единственное исключение: он всегда `50%`, потому что круг и есть это скругление.
+- `animation` принимает голый атрибут (`animation` без значения = `true`).
+- Мерцание снимается у пользователей с `prefers-reduced-motion` — правило в SCSS.
+
+## Рядом
+
+- [`rt-skeleton-wrapper`](../skeleton-wrapper/CONTEXT.md) — обёртка «загрузка ↔ контент».

package/src/lib/components/skeleton-wrapper/CONTEXT.md

@@ -0,0 +1,24 @@
+# `rt-skeleton-wrapper`
+
+Обёртка «загрузка ↔ содержимое»: показывает заглушку или проекцию.
+
+```html
+<rt-skeleton-wrapper width="240px" height="16px" [isLoading]="!tour()">{{ tour()?.title }}</rt-skeleton-wrapper>
+```
+
+| вход                                            | тип                                           | умолчание |
+| ----------------------------------------------- | --------------------------------------------- | --------- |
+| `isLoading`                                     | `boolean`                                     | `false`   |
+| `width`                                         | `string`                                      | `'100%'`  |
+| `height`                                        | `string`                                      | `'15px'`  |
+| `shape` / `size` / `borderRadius` / `animation` | как у [`rt-skeleton`](../skeleton/CONTEXT.md) |           |
+
+## Главное, что нужно знать
+
+**Умолчание — «загрузка закончилась».** Обёртку часто ставят на путь, где данные уже есть,
+поэтому `isLoading` по умолчанию `false`.
+
+**Подмена полная**: пока идёт загрузка, проекция не отрисована вовсе — не спрятана, а
+отсутствует. Значит внутрь можно смело класть выражения по ещё не пришедшим данным.
+
+Высота по умолчанию здесь **15px**, а у самого `rt-skeleton` — 10px.

package/src/lib/components/skeleton-wrapper/rt-skeleton-wrapper.component.scss

@@ -1,4 +1,8 @@
-:host {
+/* rt-skeleton-wrapper — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
+   `.rt-skeleton-wrapper` — сам хост: своей разметки блока нет, внутри либо
+   rt-skeleton, либо спроецированное содержимое. */
+
+.rt-skeleton-wrapper {
     display: inline-flex;
     width: 100%;
 }

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

@@ -0,0 +1,39 @@
+# `rt-spinner`
+
+```html
+<rt-spinner color="primary" [diameter]="32" />
+```
+
+| вход       | тип                                      | умолчание   |
+| ---------- | ---------------------------------------- | ----------- |
+| `diameter` | `number \| string` (px)                  | `32`        |
+| `color`    | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
+
+Выходов нет. Собственной разметки нет — кольцо рисуется на host-е.
+
+## Главное, что нужно знать
+
+**Спиннер не решает, показывать ли себя.** Ни условной отрисовки, ни подложки внутри нет: и то,
+и другое — дело вмещающего. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
+подменяет им иконку.
+
+Диаметр едет свойством оформления `--rt-spinner-diameter`, а не классом, — поэтому размер
+задаётся произвольным числом, а не шкалой.
+
+## Как этим пользоваться
+
+- `on-primary` — для спиннера поверх залитой основной палитрой поверхности (кнопка, баннер).
+- `neutral` — для тонких строчных индикаторов рядом с текстом.
+- Host объявлен `role="status"` с `aria-live="polite"`: скринридер сообщит о появлении, не
+  перебивая чтение. Отдельной подписи компонент не даёт — если состояние важно назвать словами,
+  положи текст рядом.
+
+## Края
+
+- Вращение выключается у пользователей с `prefers-reduced-motion`. Проверять это в спеке нечем —
+  правило живёт в SCSS.
+
+## Рядом
+
+- [`rt-skeleton`](../skeleton/CONTEXT.md) — заглушка формы контента вместо кольца; для списков
+  и карточек она честнее спиннера.

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

@@ -0,0 +1,39 @@
+# `rt-split-button`
+
+Кнопка основного действия с прикреплённым меню дополнительных.
+
+```html
+<rt-split-button
+    label="Сохранить"
+    [menuItems]="[{ value: 'draft', label: 'Сохранить черновик' }]"
+    [loading]="saving()"
+    (faceClick)="save()"
+    (itemSelect)="run($event)" />
+```
+
+| вход                   | тип                                             | умолчание              |
+| ---------------------- | ----------------------------------------------- | ---------------------- |
+| `label`                | `string`                                        | **обязателен**         |
+| `menuItems`            | `readonly { value, label, icon?, disabled? }[]` | **обязателен**         |
+| `theme` / `size`       | как у [`[rtButton]`](../button/CONTEXT.md)      | `'primary'` / `'md'`   |
+| `menuAriaLabel`        | `string`                                        | `''` → `uiMoreActions` |
+| `loading` / `disabled` | `boolean`                                       | `false`                |
+
+Выходы: `faceClick`, `itemSelect` (значение пункта).
+
+## Главное, что нужно знать
+
+**Поповер висит на всём контроле, а не на узкой каретке.** Так ширина меню равна ширине кнопки, а
+левый край совпадает — иначе панель уезжала бы за экран.
+
+**Нажатие основной кнопки меню не открывает**, и наоборот: это два независимых действия.
+
+## Края
+
+- `loading` и `disabled` блокируют обе части и запрещают открытие меню.
+- Отключённый пункт не выбирается и меню не закрывает.
+- Значение пункта продублировано атрибутом `data-value`.
+
+## Рядом
+
+- [`rt-menu`](../menu/CONTEXT.md) — меню без основного действия.

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

@@ -57,8 +57,21 @@
         list-style: none;
     }
 
+    /* Ширину пункту задаёт панель, а не его текст: `width="trigger"` держит её равной
+       кнопке. Пункт длиннее обязан обрезаться, иначе лейбл вылезает за скруглённую
+       рамку панели и висит в воздухе. Многоточие требует блочного лейбла: у
+       `inline-flex` `text-overflow` не работает — текст внутри становится анонимным
+       flex-элементом, и обрезка проходит без знака. */
     &__menu-item.rt-button {
+        overflow: hidden;
         width: 100%;
         justify-content: flex-start;
+
+        .rt-button__label {
+            display: block;
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+        }
     }
 }

package/src/lib/components/stat-tile/CONTEXT.md

@@ -0,0 +1,35 @@
+# `rt-stat-tile`
+
+Плитка показателя: значение, изменение к периоду, база сравнения.
+
+```html
+<rt-stat-tile
+    label="Визиты"
+    value="1 240"
+    secondary="из них 300 новых"
+    hint="Считается по уникальным"
+    [deltaPrimary]="{ percent: 12.5, label: 'к прошлой неделе', baseline: '1 100' }"
+    [deltaSecondary]="{ percent: 8, label: 'к прошлому году' }" />
+```
+
+| вход                              | тип                                     | умолчание       |
+| --------------------------------- | --------------------------------------- | --------------- |
+| `label` / `value`                 | `string`                                | **обязательны** |
+| `secondary`                       | `string \| null`                        | `null`          |
+| `hint`                            | `string \| null`                        | `null`          |
+| `deltaPrimary` / `deltaSecondary` | `{ percent, label, baseline? } \| null` | `null`          |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**`percent: null` означает «сравнить не с чем» — и тогда изменение не рисуется вовсе.**
+Пустая плашка на его месте читалась бы как ноль. Ноль же — это `flat`: не рост и не падение.
+
+Знак и стрелка выводятся из числа: `> 0` — «+» и стрелка вверх, `< 0` — стрелка вниз. Дробная
+часть отделяется запятой.
+
+**Значение базы уходит параметром подписи, а не подставляется в готовую строку.** Переводчик приложения
+интерполирует `{{value}}` в момент перевода, и к возвращённой строке подставлять уже нечего:
+`String.replace` после `translateSignal` не находил плейсхолдера, и от подписи оставалась одна
+приставка («было», «was»). Параметр передан сигналом — смена базы переписывает строку.