@rt-tools/ui-kit-v2 0.11.0 → 0.12.0

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

@@ -1,6 +1,8 @@
 @layer rt-kit.components {
     .rt-select {
+        --rt-select-fill-radius: var(--rt-radius-sm);
         --rt-select-caret-transition-duration: var(--rt-duration-fast);
+        --rt-select-own-outline-width: var(--rt-border-width-medium);
 
         position: relative;
         display: block;
@@ -13,6 +15,17 @@
             border-color: transparent;
         }
 
+        /* Вид «fill» — залитое поле с чертой снизу, как у материального поля первого кита: скругление
+           у него своё и малое — скругление поля бывает «таблеткой», а у залитого поля низ прямой.
+           Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
+           перекрывают его рамку. */
+        &--appearance--fill &__trigger {
+            border-color: transparent;
+            border-radius: var(--rt-select-fill-radius) var(--rt-select-fill-radius) 0 0;
+            border-bottom-color: var(--rt-color-field-fill-underline);
+            background-color: var(--rt-color-bg-surface-subtle-2);
+        }
+
         &__trigger {
             display: flex;
             width: 100%;
@@ -49,10 +62,48 @@
             }
         }
 
+        /* Свой указатель потребителя: полевой вид кнопки снимается — ground, рамка, высота и
+           отступы. Останется он — значок или метка потребителя окажутся внутри чужого поля, и
+           вход теряет смысл. Поведение при этом на кнопке, снимается только вид.
+
+           Ширина входит в полевой вид наравне с рамкой: поле берёт всю ширину хозяина, а разметка
+           потребителя уже. В покое этого не видно — фон и рамка сняты, — а на нажатии полевое
+           кольцо обводит кнопку, и она оказывается шире нарисованного: 240 точек против метки в
+           134. Поэтому кнопка меряется своим содержимым, а полевые состояния — кольцо на фокусе и
+           рамка открытого списка — на своём указателе не рисуются вовсе. Открытость потребитель
+           рисует сам: обстановка шаблона несёт её признаком. */
+        &__trigger--own {
+            width: auto;
+            min-height: 0;
+            padding: 0;
+            border-color: transparent;
+            background-color: transparent;
+
+            &:focus {
+                border-color: transparent;
+                box-shadow: none;
+            }
+
+            /* Ход клавишами остаётся видимым: снять полевое кольцо значит снять единственную
+               примету фокуса. Обводка идёт по содержимому кнопки — кнопка теперь по нему и
+               меряется. :focus-visible, а не :focus: щелчку мышью примета не нужна, её даёт
+               разметка потребителя. */
+            &:focus-visible {
+                outline: var(--rt-select-own-outline-width) solid var(--rt-input-color-border-focus);
+                outline-offset: var(--rt-input-focus-outline-offset);
+            }
+        }
+
         &--open &__trigger {
             border-color: var(--rt-input-color-border-focus);
         }
 
+        /* Рамка открытого списка — тот же полевой вид, только приходит позже. Правило выше бьёт
+           объявление у --own по силе, поэтому снимается отдельной строкой. */
+        &--open &__trigger--own {
+            border-color: transparent;
+        }
+
         &--invalid &__trigger {
             border-color: var(--rt-input-color-border-error);
 
@@ -61,6 +112,16 @@
             }
         }
 
+        /* Рамка ошибки — тоже полевой вид. Неверность своего указателя потребитель показывает
+           своей разметкой: чужая красная рамка легла бы вокруг его метки. */
+        &--invalid &__trigger--own {
+            border-color: transparent;
+
+            &:focus {
+                box-shadow: none;
+            }
+        }
+
         &--disabled {
             opacity: var(--rt-input-disabled-opacity);
         }
@@ -118,18 +179,48 @@
             transform: rotate(180deg);
         }
 
+        /* Под материальным набором стрелка — залитый треугольник mat-select первого кита, 10 на 5 px,
+           и открытое поле его не переворачивает. Свой вид кита остаётся с шевроном. Размер значок
+           ставит себе встроенным стилем, поэтому треугольник задан пределами, а не шириной. */
+        :is(.rt-preset-material, [data-preset='material']) &__chevron {
+            max-width: 10px;
+            max-height: 5px;
+            background-color: currentcolor;
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
+            transform: none;
+
+            svg {
+                display: none;
+            }
+        }
+
         /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK,
            здесь только chrome. Глобальный класс (ViewEncapsulation.None). */
         &__panel {
             /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
                объявляется на ней самой — с корня блока оно бы не докатилось. */
-            --rt-select-panel-shadow: var(--rt-shadow-md);
+            --rt-select-panel-shadow: var(--rt-overlay-select-shadow);
+            --rt-select-panel-radius: var(--rt-overlay-select-radius);
+            --rt-select-option-font-size: var(--rt-overlay-select-option-font-size);
+            --rt-select-selected-bg: var(--rt-overlay-select-selected-bg);
+            --rt-select-selected-weight: var(--rt-overlay-select-selected-weight);
+            --rt-select-check-display: var(--rt-overlay-select-check-display);
+            --rt-select-option-min-height: var(--rt-overlay-select-option-min-height);
+            --rt-select-panel-border-width: var(--rt-overlay-select-panel-border-width);
+
+            /* Предел высоты по умолчанию — предел кита: длинный список прокручивается внутри
+               панели, а не уходит за нижний край экрана. Вход `panelMaxHeight` ставит свой
+               предел на саму панель, а `none` снимает его для короткого списка. */
+            --rt-select-panel-max-height: var(--rt-input-panel-max-height);
 
+            /* Ширина берётся от коробки наложения: её нижнюю границу ставит указатель,
+               а выше она растёт по содержимому. Без этой строки панель мерилась бы
+               содержимым внутри коробки и не дотягивалась до ширины поля. */
             width: 100%;
-            max-height: var(--rt-input-panel-max-height);
+            max-height: var(--rt-select-panel-max-height);
             box-sizing: border-box;
-            border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
-            border-radius: var(--rt-input-radius);
+            border: var(--rt-select-panel-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-select-panel-radius);
             background-color: var(--rt-color-bg-surface);
             box-shadow: var(--rt-select-panel-shadow);
             overflow-y: auto;
@@ -147,10 +238,16 @@
         }
 
         &__option {
+            display: flex;
+            min-height: var(--rt-select-option-min-height);
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: space-between;
             padding: var(--rt-space-sm) var(--rt-space-md);
             color: var(--rt-color-text-primary);
             cursor: pointer;
-            font-size: var(--rt-input-font-size);
+            font-size: var(--rt-select-option-font-size);
+            gap: var(--rt-space-sm);
 
             &:hover,
             &--active {
@@ -158,8 +255,8 @@
             }
 
             &--selected {
-                background-color: var(--rt-color-action-primary-subtle);
-                font-weight: var(--rt-font-weight-semibold);
+                background-color: var(--rt-select-selected-bg);
+                font-weight: var(--rt-select-selected-weight);
             }
 
             &--disabled {
@@ -172,6 +269,12 @@
             }
         }
 
+        /* Отметка выбранного пункта — у mat-select первого кита; свой вид её не рисует. */
+        &__check {
+            display: var(--rt-select-check-display);
+            flex-shrink: 0;
+        }
+
         &__empty {
             padding: var(--rt-space-sm) var(--rt-space-md);
             color: var(--rt-input-color-text-placeholder);

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

@@ -14,6 +14,47 @@
 </table>
 ```
 
+## Колонка действий строки
+
+Колонка «…» объявлена в разметке самой таблицы, а не приходит от потребителя, и в реестр
+`CdkTable` она вносится вручную в `ngOnInit` — тем же приёмом, каким это делает `CdkTextColumn`
+самого CDK. Запрос к разметке взят статическим намеренно: сигнальный резолвится после первой
+отрисовки строк, а колонка обязана попасть в реестр до неё. Ячейки колонки получают своё
+объявление тем же вызовом: без ручного присвоения CDK падает на разборе шаблона ячейки.
+
+## Строка отбора
+
+Ряд отбора рисует сама таблица, по полю `filter` в `columnsConfig`, и только когда его просят
+входом `showFilters`. Ячейку рисует [`rt-table-filter-header`](./filter-header/CONTEXT.md), набор
+ячеек собирает `filterCellsOf` — по списку показанных колонок, а не по тем, у кого есть отбор:
+колонка без отбора держит своё место пустой ячейкой, иначе ячейки съехали бы под соседние колонки.
+
+Ряд стоит строкой таблицы под шапкой, а не частью ячейки шапки: шапку колонки объявляет
+потребитель разметкой колонки, и вставить туда свою ячейку таблице некуда.
+
+**В карточном виде ряда нет.** Карточный вид гасит строки таблицы поимённо, и строка отбора
+скрыта тем же правилом: столбцов там не остаётся вовсе. Чем отбирать на узком показе — работа
+своя, она стоит открытым вопросом в `docs/specs/ui-kit-v2/table-filter/`.
+
+Набор условий таблица у себя не держит: он приходит входом `filters` и уходит выходом
+`filtersChange` целиком, а строки сужает потребитель.
+
+## Состояния показа
+
+Что таблица рисует, решают вместе `[loading]`, `[fetching]` и число строк источника.
+
+| Состояние                  | Что на экране                                                               |
+| -------------------------- | --------------------------------------------------------------------------- |
+| первая загрузка, строк нет | шапка и N строк-заглушек по `[columns]`                                     |
+| догрузка, строки есть      | прежние строки на месте, поверх них закреплённое наложение с бегунком       |
+| загрузки нет, строк нет    | пустое место: шаблон `#rtTableEmpty` или `rt-empty-state` по входам подписи |
+| загрузки нет, строки есть  | обычный показ строк                                                         |
+
+Наложение бегунка закреплено относительно ближайшего предка с прокруткой, поэтому бегунок виден
+в середине окна, а не уезжает с таблицей. Строки-заглушки читают `[columns]` — тот же список имён,
+что стоит в объявлении строки CDK: разбирать внутренности CDK ради их числа дороже, чем назвать
+список входом.
+
 | вход                                | тип                           | умолчание     |
 | ----------------------------------- | ----------------------------- | ------------- |
 | `columns`                           | `ReadonlyArray<string>`       | `[]`          |
@@ -27,9 +68,11 @@
 | `emptyMessage` / `emptyDescription` | `string` / `string \| null`   | `''` / `null` |
 | `emptyIcon`                         | `IRtIcon.Name \| null`        | `'inbox'`     |
 | `showRowActions`                    | `boolean`                     | `false`       |
+| `showFilters`                       | `boolean`                     | `false`       |
+| `filters`                           | `ReadonlyArray<IFilterModel>` | `[]`          |
 | `sort`                              | `ISortModel<string> \| null`  | `null`        |
 
-Выход: `sortChange`.
+Выходы: `sortChange`, `filtersChange`.
 
 ## Главное, что нужно знать
 
@@ -50,4 +93,6 @@
 - Пустой набор рисует заглушку с переведённым `uiNoData`; свой текст перебивает её.
 - Колонка `rtRowActions` добавляется китом сама, когда включён `showRowActions`, и рисует
   [`rt-menu`](../menu/CONTEXT.md) в строке.
+- Отбор колонки объявляется полем `filter` в `columnsConfig`, и ряд отбора таблица рисует сама —
+  см. раздел выше. Колонка без `filter` не отбирает вовсе. Строк таблица не сужает.
 - Спеки логики лежат рядом: сортировка и предикат действий строки проверены отдельно.

package/src/lib/components/table/filter-header/CONTEXT.md

@@ -0,0 +1,64 @@
+# `rt-table-filter-header`
+
+Отбор в шапке столбца: вид сравнения слева, поле значения рядом, очистка — там, где есть что
+очищать. Стоит в своей ячейке строки отбора, у того же ключа колонки, что в `cdkColumnDef` и в
+`[columnsConfig]`.
+
+**Зовёт его таблица, а не потребитель.** Строку отбора [`rt-table`](../CONTEXT.md) рисует сама по
+полю `filter` в настройке колонок — руками в шапку колонки его писать не нужно. Разметка ниже
+показывает, что таблица собирает в каждой ячейке той строки.
+
+```html
+<th rtElem="filter-cell">
+    <rt-table-filter-header propertyName="title" [filter]="config.filter" [filters]="filters()" (filtersChange)="filters.set($event)" />
+</th>
+```
+
+| вход           | тип                               | умолчание    |
+| -------------- | --------------------------------- | ------------ |
+| `propertyName` | `string`                          | обязательный |
+| `filter`       | `IRtTable.ColumnFilter \| null`   | `null`       |
+| `filters`      | `readonly IFilterModel<string>[]` | `[]`         |
+
+Выход: `filtersChange`.
+
+## Главное, что нужно знать
+
+**Вид отбора объявляет колонка, а не угадывает значение.** `kind` решает, какую готовую часть
+кита позвать: `text` — [`rt-input`](../../input/CONTEXT.md), `number` —
+[`rt-input-number`](../../input-number/CONTEXT.md), `select` —
+[`rt-select`](../../select/CONTEXT.md) по набору `options`, `date` —
+[`rt-date-picker`](../../date-picker/CONTEXT.md). Своих полей ячейка не рисует ни одного.
+
+**Колонка без `filter` не отбирает вовсе** и не рисует ничего: вход необязателен, и обещание
+держит кит, а не каждый потребитель по-своему.
+
+**Наружу уходит весь набор условий, а не одно изменившееся.** Потребитель спрашивает сервер
+набором; получив одно условие, он держал бы вторую копию набора — две копии расходятся молча.
+
+**Строк ячейка не отбирает.** Она сообщает, чего от списка хотят; список принадлежит тому, кто
+его держит.
+
+**Набранное уходит наружу по уходу из поля и по Enter, выбранное — сразу.** Набор условий,
+уходящий на каждый знак, спрашивает сервер по букве: ответы возвращаются вперемешку, и список
+показывает ответ на значение, которое человек уже сменил. У выбора из списка и у даты
+недописанного состояния нет вовсе, поэтому ждать у них нечего.
+
+## Края
+
+- Пустое поле несёт подсказку из словаря кита: `uiFilterValue` у текста и числа, `uiFilterChoose`
+  у списка. Поле даты подсказку не берёт — формат рисует сам браузер.
+- Пустое значение снимает колонку с отбора и не едет наружу пустым условием.
+- Повтор того же значения и смена вида сравнения без значения не сообщают ничего: прежний набор
+  приходит обратно тем же объектом, и по этому признаку видно, что менять было нечего.
+- Дата хранится строкой и сверяется строкой: `Date` не равен строке никогда, и без приведения
+  повторный выбор той же даты каждый раз считался бы новым значением.
+- Виды сравнения колонка сужает входом `operators` и называет начальный входом `startOperator`;
+  молчит — разрешены все семь, начальный «Равно».
+- Ширину ячейка берёт от шапки колонки: меряйся она содержимым, пустой список в ней схлопнулся
+  бы до одной галочки.
+
+## Рядом
+
+- [`rt-table`](../CONTEXT.md) — таблица, чей `columnsConfig` объявляет отбор колонки.
+- [`rt-table-sort-header`](../sort-header/CONTEXT.md) — соседний по шапке: порядок строк.

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

@@ -0,0 +1,76 @@
+@layer rt-kit.components {
+    /* rt-table-filter-header — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-table-filter-header` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+    .rt-table-filter-header {
+        --rt-table-filter-header-radius: var(--rt-radius-sm);
+        --rt-table-filter-header-operator-color: var(--rt-color-text-muted);
+        --rt-table-filter-header-operator-color-set: var(--rt-color-text-primary);
+        --rt-table-filter-header-operator-bg-hover: var(--rt-color-bg-subtle);
+        --rt-table-filter-header-operator-focus-shadow: var(--rt-shadow-focus-ring);
+
+        // Ширина — от шапки колонки, а не от содержимого: ячейка, меряющая себя содержимым,
+        // отдаёт полю ровно столько, сколько поле попросило само, и выбор из списка с пустым
+        // значением схлопывается до одной галочки. Так же устроена та же ячейка первого кита.
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        align-items: center;
+        gap: var(--rt-space-1);
+
+        // Кнопка вида сравнения — подпись словом, а не значком: значок сравнения читается
+        // догадкой, и семь догадок подряд человек не держит в голове.
+        &__operator {
+            padding: var(--rt-space-0-5) var(--rt-space-1);
+            border: 0;
+            border-radius: var(--rt-table-filter-header-radius);
+            background: transparent;
+            color: var(--rt-table-filter-header-operator-color);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--rt-text-xs);
+            white-space: nowrap;
+
+            &:hover {
+                background: var(--rt-table-filter-header-operator-bg-hover);
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-table-filter-header-operator-focus-shadow);
+                outline: none;
+            }
+
+            // Заданный отбор виден по самой кнопке: колонка, которая сузила список, должна
+            // отличаться от той, которая не сужала, и без значения в поле тоже.
+            &--set {
+                color: var(--rt-table-filter-header-operator-color-set);
+                font-weight: var(--rt-font-weight-medium);
+            }
+        }
+
+        // Поле берёт остаток места: шапка колонки у́же любого поля, и без этого поле выдавило бы
+        // кнопку вида сравнения за край ячейки.
+        &__value {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &__clear {
+            flex: none;
+        }
+
+        // Список рисуется в слое CDK, вне хоста: токены хоста туда не наследуются, поэтому
+        // ручки меню объявлены на самой панели списка.
+        &__operators {
+            --rt-table-filter-header-menu-radius: var(--rt-radius-md);
+            --rt-table-filter-header-menu-shadow: var(--rt-shadow-card);
+
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-1);
+            border-radius: var(--rt-table-filter-header-menu-radius);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-table-filter-header-menu-shadow);
+        }
+    }
+}

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

@@ -15,6 +15,7 @@
 
         .cdk-header-cell,
         .cdk-cell,
+        &__filter-cell,
         &__skeleton-cell {
             position: relative;
             height: 50px;
@@ -44,6 +45,7 @@
         /* Левый периметр не рисуем — первая колонка без левой грани. */
         .cdk-header-cell:first-child,
         .cdk-cell:first-child,
+        &__filter-cell:first-child,
         &__skeleton-cell:first-child {
             border-left: none;
         }
@@ -65,6 +67,31 @@
            (rtElem="table-scroll", overflow-x), без border/padding. Плавающая кнопка
            не занимает места в раскладке — поэтому горизонтальный скролл не уводит её
            из вьюпорта. Компаунд с .cdk-cell держит специфичность выше базовой ячейки. */
+
+        /* Ряд отбора — строка таблицы под шапкой. Своё правило нужно ему и затем, чтобы
+           карточный вид ниже было чем перебить: там столбцов нет вовсе. */
+        &__filter-row {
+            display: table-row;
+        }
+
+        /* Строка отбора стоит второй строкой шапки и оформляется как шапка: иначе поля
+           отбора читаются как первая строка данных. Ячейка пустой колонки держит своё
+           место и не рисует ничего — её ширину задаёт колонка выше. */
+        &__filter-cell {
+            height: auto;
+            background: var(--rt-color-bg-surface);
+            padding-block: var(--rt-space-1);
+            vertical-align: middle;
+        }
+
+        /* Ячейка колонки действий в строке отбора — нулевая, как её шапка: иначе поля и рамка
+           дали бы колонке ширину, а плавающая кнопка места в раскладке не занимает. */
+        &__filter-cell--actions {
+            width: 0;
+            padding: 0;
+            border: none;
+        }
+
         &__actions-header.cdk-header-cell {
             width: 0;
             padding: 0;
@@ -233,10 +260,14 @@
             min-width: 0;
             max-width: 100%;
 
+            /* Ряд отбора скрыт здесь же, где строки таблицы: в карточном виде столбцов нет
+               вовсе, и ряд ячеек над списком карточек читается обрывком другой разметки.
+               Отбор на узком показе — работа своя, она названа открытым вопросом описания. */
             .cdk-header-row,
             .cdk-row,
             .rt-table__skeleton-row,
-            .rt-table__empty-row {
+            .rt-table__empty-row,
+            .rt-table__filter-row {
                 display: none;
             }
 

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

@@ -8,6 +8,7 @@
 | ------------------ | -------------------------------------------------------------------------- | -------------- |
 | `value`            | `string`                                                                   | **обязателен** |
 | `severity`         | `'info' \| 'success' \| 'warning' \| 'danger' \| 'secondary' \| 'neutral'` | `'neutral'`    |
+| `size`             | `'sm' \| 'md' \| 'lg'`                                                     | `'md'`         |
 | `shape`            | `'pill' \| 'square'`                                                       | `'pill'`       |
 | `appearance`       | `'solid' \| 'outlined'`                                                    | `'solid'`      |
 | `radius`           | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full' \| null`                         | `null`         |
@@ -28,6 +29,14 @@
 
 ## Как этим пользоваться
 
+- **Подпись, которой не хватило места, урезается и получает подсказку с целым значением.** Своей
+  подсказки писать не надо: её ставит готовая директива кита. Подсказки нет, пока подпись влезает —
+  над целым значением она ничего не сказала бы.
+
+- **`size` двигает отступы, кегль и значок разом.** Своего входа у значка нет: `sm` даёт значок
+  12 пикселей, `md` — 16, `lg` — 20. Кегль, названный отдельно, оставил бы отступы от другой
+  ступени, и ряд пилюль перестал бы выстраиваться.
+
 - `radius` перебивает скругление, заданное формой. Без него класс скругления не выводится
   вовсе — радиус берётся из `shape`.
 - Палитра дублируется атрибутом `data-severity` — по нему тег находят проверки и внешние стили,

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

@@ -7,11 +7,17 @@
     rt-tag {
         display: inline-flex;
 
+        /* Предел стоит и на хосте, и на пилюле внутри. Вмещающий блок пилюли — сам хост, и без
+           предела на нём он растёт по содержимому: «сто процентов» пилюли считаются тогда от
+           разросшегося хоста, и метка вылезает за место, которое ей дали. */
+        max-width: 100%;
+
         .rt-tag {
             --rt-tag-radius: var(--rt-radius-md);
             --rt-tag-border-width: var(--rt-border-width-thin);
 
             display: inline-flex;
+            max-width: 100%;
             align-items: center;
             padding: var(--rt-space-1) var(--rt-space-2);
             border-radius: var(--rt-tag-radius);
@@ -21,6 +27,27 @@
             gap: var(--rt-space-1);
             line-height: var(--rt-leading-tight);
 
+            /* Ступени размера: отступы, кегль и просвет между частями двигаются вместе. `md`
+               повторяет то, чем метка рисовалась до появления ступеней, и вид без входа не
+               меняется ни на пиксель. */
+            &--size--sm {
+                padding: var(--rt-space-0-5) 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);
+                font-size: var(--rt-text-sm);
+                gap: var(--rt-space-1);
+            }
+
+            &--size--lg {
+                padding: var(--rt-space-2) var(--rt-space-4);
+                font-size: var(--rt-text-md);
+                gap: var(--rt-space-2);
+            }
+
             &--shape--pill {
                 --rt-tag-radius: var(--rt-radius-full);
             }
@@ -91,8 +118,19 @@
                 flex-shrink: 0;
             }
 
+            /* Пилюля берёт ширину, которую даёт ей место, и не растёт за неё: подпись приходит
+               от потребителя, укоротить её он не может. Что не влезло — многоточие, и рядом с
+               ним подсказка: усечение без неё читается как целое значение. */
             &__text {
+                overflow: hidden;
+
+                /* Без нулевого минимума ширины элемент гибкой раскладки не сжимается ниже своего
+                   содержимого, и многоточие не появляется вовсе: пилюля просто вылезает за место.
+                   Проверка этого не ловит — раскладки в ней нет, и переполнение в ней подменено. */
+                min-width: 0;
                 line-height: var(--rt-leading-none);
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             &__close {

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

@@ -35,4 +35,4 @@
 
 ## Рядом
 
-- [`rt-rich-editor`](../rich-editor/CONTEXT.md) — когда нужна разметка внутри текста.
+- [`rt-rich-editor`](../../../rich-editor/lib/components/rich-editor/CONTEXT.md) — когда нужна разметка внутри текста.

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

@@ -20,3 +20,6 @@
 
 **Без единого слота панель не рисуется вовсе** — ни одного узла в DOM. Необъявленный слот тоже
 не создаёт пустой полосы: пустая полоса занимала бы место и растягивала соседние.
+
+**Отступ полосы сверху и снизу — свойства блока** `--rt-toolbar-padding-top` и
+`--rt-toolbar-padding-bottom`, по умолчанию 8px. Список ставит им свои имена.

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

@@ -1,5 +1,9 @@
 @layer rt-kit.components {
     .rt-toolbar {
+        /* Отступ полосы сверху и снизу — свойства блока: обёртка переставляет их снаружи. */
+        --rt-toolbar-padding-top: var(--rt-space-2);
+        --rt-toolbar-padding-bottom: var(--rt-space-2);
+
         display: block;
 
         &__bars {
@@ -8,7 +12,7 @@
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
-            padding: var(--rt-space-2) 0;
+            padding: var(--rt-toolbar-padding-top) 0 var(--rt-toolbar-padding-bottom);
             gap: var(--rt-space-2);
         }
 
@@ -40,7 +44,10 @@
             &--right {
                 // Прижатие к правому краю даже когда right — единственный бар
                 // (нет left/center, которые бы вытолкнули его через space-between).
-                flex: 0 0 auto;
+                // Бар сжимается, когда места меньше, чем контента, но не уже своего наименьшего
+                // содержимого: не сжимаясь, он в узкой колонке выходил за край тулбара на соседей
+                // (поиск списка — на 197 px), а сжатый до нуля выталкивал за край кнопку.
+                flex: 0 1 auto;
                 margin-left: auto;
                 gap: var(--rt-space-sm);
             }

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

@@ -5,10 +5,10 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
 ```
 
-| вход                 | тип                           | умолчание |
-| -------------------- | ----------------------------- | --------- |
-| `rtTooltip`          | `string \| null \| undefined` | `''`      |
-| `rtTooltipPlacement` | `'top' \| 'bottom'`           | `'top'`   |
+| вход                 | тип                           | умолчание                                       |
+| -------------------- | ----------------------------- | ----------------------------------------------- |
+| `rtTooltip`          | `string \| null \| undefined` | `''`                                            |
+| `rtTooltipPlacement` | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 

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

@@ -3,8 +3,8 @@
        Тёмная инверсная подложка (theme-aware пара bg-inverse / text-inverse). */
 
     .rt-tooltip {
-        --rt-tooltip-radius: var(--rt-radius-sm);
-        --rt-tooltip-shadow: var(--rt-shadow-md);
+        --rt-tooltip-radius: var(--rt-overlay-tooltip-radius);
+        --rt-tooltip-shadow: var(--rt-overlay-tooltip-shadow);
 
         display: block;
         max-width: 240px;

package/src/{lib → rich-editor/lib}/components/chat/CONTEXT.md

@@ -43,4 +43,4 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 - Режим `formatting` подменяет простое поле [`rt-rich-editor`](../rich-editor/CONTEXT.md);
   тот грузит Quill динамическим импортом.
 - Неотправленное сообщение (`status: 'failed'`) получает кнопку повтора.
-- Файлы можно бросать прямо в ленту — чат обёрнут в [`rt-file-drop`](../file-drop/CONTEXT.md).
+- Файлы можно бросать прямо в ленту — чат обёрнут в [`rt-file-drop`](../../../../lib/components/file-drop/CONTEXT.md).