@rt-tools/ui-kit-v2 0.39.0 → 0.39.2

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

@@ -41,6 +41,14 @@
             /* Межбуквенный интервал подписи — ручка приложения: кит её не объявляет, без неё интервал
                наследуется от приложения, как раньше. */
             letter-spacing: var(--rt-field-label-letter-spacing, inherit);
+
+            /* Подпись своим видом кита стоит строкой в свой кегль, как в макете поля: 14 при
+               кегле 14. Высота строки приложения дала бы 17, и поле вышло бы выше кадра. Под
+               материальным набором подпись лежит и внутри поля, и там высота строки прежняя:
+               признак набора стоит и на предке, и на самом поле, а подпись — потомок обоих. */
+            &:not(:is(.rt-preset-material *, [data-preset='material'] *)) {
+                line-height: var(--rt-field-label-line-height);
+            }
         }
 
         &__required {
@@ -95,6 +103,12 @@
                 line-height: var(--rt-field-messages-line-height);
             }
 
+            /* Своим видом кита строка подсказки — полторы высоты кегля, как в макете поля: 18 при
+               кегле 12. Высота строки приложения давала 14,5, и поле выходило ниже кадра. */
+            &:not(:is(.rt-preset-material *, [data-preset='material'] *)) {
+                line-height: var(--rt-leading-normal);
+            }
+
             &--reserved,
             &:has(> *) {
                 padding-top: var(--rt-field-messages-padding-top);

package/src/lib/components/form-control/CONTEXT.md

@@ -8,14 +8,19 @@
 
 Общие входы, которые получает каждый наследник:
 
-| вход        | тип                    | умолчание |
-| ----------- | ---------------------- | --------- |
-| `size`      | `'sm' \| 'md' \| 'lg'` | `'md'`    |
-| `disabled`  | `boolean`              | `false`   |
-| `controlId` | `string \| null`       | `null`    |
-| `ariaLabel` | `string \| null`       | `null`    |
-| `clearable` | `boolean`              | `true`    |
-| `bordered`  | `boolean`              | `true`    |
+| вход            | тип                    | умолчание                                                |
+| --------------- | ---------------------- | -------------------------------------------------------- |
+| `size`          | `'sm' \| 'md' \| 'lg'` | `'md'`                                                   |
+| `disabled`      | `boolean`              | `false`                                                  |
+| `controlId`     | `string \| null`       | `null`                                                   |
+| `ariaLabel`     | `string \| null`       | `null`                                                   |
+| `clearable`     | `boolean`              | `true`                                                   |
+| `clearTabbable` | `boolean`              | `formControl.clearTabbable` настроек кита, иначе `false` |
+| `bordered`      | `boolean`              | `true`                                                   |
+
+Крестик очистки идёт по Tab, когда поле или настройки кита (`provideRtKit`, узел `formControl`)
+просят об этом; вход на самом поле сильнее настроек. Шаблон наследника ставит крестику
+`[tabindex]="clearTabIndex()"`, а не постоянный `-1`.
 
 ## Главное, что нужно знать
 

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

@@ -204,6 +204,10 @@
             letter-spacing: var(--rt-input-letter-spacing, normal);
             outline: none;
 
+            /* Длинное значение и подсказка, не влезшие в поле, кончаются многоточием, как в макете
+               поля, а не обрезаются посреди знака. */
+            text-overflow: ellipsis;
+
             &::placeholder {
                 color: var(--rt-input-color-text-placeholder);
                 opacity: 1;

package/src/lib/components/input-number/CONTEXT.md

@@ -16,6 +16,8 @@
 | `min` / `max`       | `number \| null`       | `null` (сторона не ограничена) |
 | `minFractionDigits` | `number`               | `0`                            |
 | `maxFractionDigits` | `number`               | `2`                            |
+| `step`              | `number`               | `1`                            |
+| `stepper`           | `boolean`              | `true`                         |
 
 Значение — `number | null`.
 
@@ -46,6 +48,12 @@
 - **Крестик обнуляет поле, а не опустошает его** (`0,00`): у числового поля ноль осмыслен.
   При нуле крестик не показывается — обнулять больше нечего.
 - Префикс спрятан от скринридера: валюту он прочитает из подписи поля.
+- **Стрелки шага** стоят последними, после крестика: верхняя прибавляет `step`, нижняя вычитает.
+  Клавиши «вверх» и «вниз» делают то же и без стрелок. Пустое поле шагает от нуля, результат
+  зажимается в `min` и `max` и округляется до знаков шага. Стрелка к достигнутой границе и обе
+  стрелки выключенного поля гаснут. Стрелки не берут остановку таба и не забирают фокус у поля.
+  Обе рисуют один значок `chevron-up`, нижняя — перевёрнутым: `chevron-down` набора в 12 px
+  кладёт плечи неровно. В поле `sm` столбец 16×24 и значок 10 px, в `md` и `lg` — 20×32 и 12 px.
 - Под материальным набором подпись вмещающего `rt-field` ложится внутрь поля: на место подсказки
   в покое и на рамку при значении или фокусе. Признак — `fieldLabelInside` основы полей.
 

package/src/lib/components/input-number/rt-input-number.component.scss

@@ -9,6 +9,7 @@
         --rt-input-number-radius: var(--rt-input-radius);
         --rt-input-number-fill-radius: var(--rt-radius-sm);
         --rt-input-number-color-border-hover: var(--rt-color-text-primary);
+        --rt-input-number-step-radius: var(--rt-radius-sm);
 
         /* Толщина боковой рамки: от неё под материальным набором считается отступ текста. */
         --rt-input-number-edge: var(--rt-input-border-width);
@@ -183,6 +184,55 @@
             flex-shrink: 0;
         }
 
+        /* Стрелки шага — столбец двух кнопок в конце поля, после крестика. */
+        &__stepper {
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+        }
+
+        /* В поле sm стрелки мельче, как в макете: кнопки 16×12, столбец 16×24. */
+        &--size--sm &__step {
+            width: var(--rt-size-4);
+            height: var(--rt-size-3);
+        }
+
+        &__step {
+            display: inline-flex;
+            width: var(--rt-size-5);
+            height: var(--rt-size-4);
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: none;
+            border-radius: var(--rt-input-number-step-radius);
+            background: transparent;
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-color-bg-hover);
+                color: var(--rt-color-text-primary);
+            }
+
+            /* Стрелка у границы и в выключенном поле гаснет: состояние ниже наведения. */
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                cursor: not-allowed;
+            }
+        }
+
+        /* Значок берёт цвет кнопки и не перехватывает нажатие. */
+        &__step-icon {
+            pointer-events: none;
+
+            /* Нижняя стрелка — та же верхняя, перевёрнутая: `chevron-down` набора в растре 12 px
+               кладёт одно плечо темнее другого, и пара читается как стрелки разного размера. */
+            &--flipped {
+                transform: rotate(180deg);
+            }
+        }
+
         /* Текстовый префикс (напр. «₽»): приглушён, неинтерактивен. */
         &__prefix {
             color: var(--rt-color-text-muted);

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

@@ -25,7 +25,7 @@
 
 ## Края
 
-- Иконка подставляется по палитре (`info` → `ico-info`, `success` → `check`,
+- Иконка подставляется по палитре (`info` → `info-circle`, `success` → `check`,
   `warning` → `ico-warning`, `danger` → `ico-error`). У `secondary` и `neutral` иконки нет —
   они не сообщают об исходе.
 - Заданная иконка перебивает умолчание; `hideIcon` гасит любую.

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

@@ -48,9 +48,10 @@
                 color: var(--rt-color-text-primary);
             }
 
+            /* Значок стоит у верхнего края текста без своего отступа, как в макете сообщения:
+               отступ сверху делал плашку на точку выше строки текста. */
             &__icon {
                 flex-shrink: 0;
-                margin-block-start: var(--rt-space-0-5);
             }
 
             &__body {

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

@@ -186,6 +186,27 @@
             flex-shrink: 0;
         }
 
+        /* Крестик в порядке обхода — соседняя кнопка поверх своего места в строке указателя, как у
+           выбора: место держит пустая ячейка размером с крестик, и чипы не заходят под него. */
+        &__clear-slot {
+            width: var(--rt-control-height-sm);
+            height: var(--rt-control-height-sm);
+            flex-shrink: 0;
+        }
+
+        /* Отступ считается от края хоста, а рамка стоит на кнопке внутри: её толщина входит в отступ,
+           иначе крестик на пиксель правее своего места. */
+        &__clear--outside {
+            position: absolute;
+            top: 50%;
+            right: calc(var(--rt-input-border-width) + var(--rt-input-padding-x) + var(--rt-size-4) + var(--rt-space-sm));
+            transform: translateY(-50%);
+        }
+
+        &--readonly &__clear--outside {
+            display: none;
+        }
+
         &__chevron {
             flex-shrink: 0;
             transition: transform var(--rt-multiselect-caret-transition-duration) ease;

package/src/lib/components/service-block/stories/component/test-service-block-panel.component.scss

@@ -0,0 +1,29 @@
+@layer rt-kit.components {
+    /* Панель занимает всю высоту окна истории, как в кадре: без заданной высоты она схлопнулась бы
+       по содержимому, и подвал встал бы сразу под последним полем. Селектор на элемент длиннее
+       правила кита `rt-aside .rt-aside`: оба стоят в одном слое, и решает специфичность. */
+    app-service-block-panel rt-aside .rt-aside {
+        height: 100vh;
+    }
+
+    /* Раздел адреса извещений, как в одобренном макете: заголовок 16 со строкой 24, промежуток 12,
+       отступ 8 сверху сверх промежутка формы. Готовые части кита дают другие числа: у
+       `rt-aside-section` и словаря формы колонка идёт шагом 16, а строка `rt-form__title` — 1,35,
+       то есть 21,6. Взятые как есть, они сдвинули бы одобренный кадр, поэтому класс свой и живёт
+       только в истории. Раздел с шагом 12 в ките — решение о виде кита, оно за владельцем. */
+    .app-service-block-panel-webhook {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding-top: var(--rt-space-sm);
+        gap: calc(var(--rt-space-sm) + var(--rt-space-xs));
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-normal);
+        }
+    }
+}

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

@@ -12,12 +12,13 @@
     [deltaSecondary]="{ percent: 8, label: 'к прошлому году' }" />
 ```
 
-| вход                              | тип                                     | умолчание       |
-| --------------------------------- | --------------------------------------- | --------------- |
-| `label` / `value`                 | `string`                                | **обязательны** |
-| `secondary`                       | `string \| null`                        | `null`          |
-| `hint`                            | `string \| null`                        | `null`          |
-| `deltaPrimary` / `deltaSecondary` | `{ percent, label, baseline? } \| null` | `null`          |
+| вход                              | тип                                            | умолчание       |
+| --------------------------------- | ---------------------------------------------- | --------------- |
+| `label` / `value`                 | `string`                                       | **обязательны** |
+| `secondary`                       | `string \| null`                               | `null`          |
+| `hint`                            | `string \| null`                               | `null`          |
+| `deltaPrimary` / `deltaSecondary` | `{ percent, unit?, label, baseline? } \| null` | `null`          |
+| `growthIsWorse`                   | `boolean`                                      | `false`         |
 
 Выходов нет.
 
@@ -29,6 +30,10 @@
 Знак и стрелка выводятся из числа: `> 0` — «+» и стрелка вверх, `< 0` — стрелка вниз. Дробная
 часть отделяется запятой.
 
+`unit: 'points'` пишет строку в процентных пунктах подписью `uiPercentagePoints` («+10 п.п.»),
+без `unit` — в процентах. `growthIsWorse` меняет цвета обеих строк местами, стрелка остаётся по
+знаку числа.
+
 **Значение базы уходит параметром подписи, а не подставляется в готовую строку.** Переводчик приложения
 интерполирует `{{value}}` в момент перевода, и к возвращённой строке подставлять уже нечего:
 `String.replace` после `translateSignal` не находил плейсхолдера, и от подписи оставалась одна

package/src/lib/components/stat-tile/rt-stat-tile.component.scss

@@ -99,6 +99,27 @@
                 white-space: nowrap;
             }
 
+            /* Рост хуже: цвета строк меняются местами, стрелки остаются по знаку числа. */
+            &--growth-worse {
+                .rt-stat-tile__delta--direction--up {
+                    color: var(--rt-color-state-danger);
+                }
+
+                .rt-stat-tile__delta--direction--down {
+                    color: var(--rt-color-state-success);
+                }
+
+                .rt-stat-tile__year--direction--up {
+                    background: var(--rt-color-state-danger-bg);
+                    color: var(--rt-color-state-danger);
+                }
+
+                .rt-stat-tile__year--direction--down {
+                    background: var(--rt-color-state-success-bg);
+                    color: var(--rt-color-state-success);
+                }
+            }
+
             /* Вторичная метрика прижата к низу: строки «было …» может не быть,
                и без прижатия плитки в ряду разъезжались бы по базовой линии. */
             &__secondary {

package/src/lib/components/stat-tile/stories/component/test-stat-tile-matrix.component.scss

@@ -0,0 +1,15 @@
+@layer rt-kit.components {
+    /* Ряд отчёта: плитки одной ширины в карточках, как их ставит приложение. */
+    .app-stat-tile-matrix {
+        &__report {
+            display: grid;
+            gap: var(--rt-space-4);
+            grid-template-columns: repeat(3, 17.5rem);
+        }
+
+        /* Хост карточки — сетка: так её статья тянется на высоту ряда, и карточки ряда равны. */
+        &__card {
+            display: grid;
+        }
+    }
+}

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

@@ -22,6 +22,26 @@
 отрисовки строк, а колонка обязана попасть в реестр до неё. Ячейки колонки получают своё
 объявление тем же вызовом: без ручного присвоения CDK падает на разборе шаблона ячейки.
 
+## Закреплённая колонка
+
+Колонку закрепляет потребитель атрибутом `sticky` или `stickyEnd` у своего `cdkColumnDef`;
+своего входа у таблицы для этого нет. Закреплённая ячейка не прозрачна: она кладёт цвет своей
+строки поверх подложки, поэтому колонки, уезжающие под неё при прокрутке вбок, не просвечивают.
+У края закрепления тень — пока под колонкой есть прокрученное содержимое.
+
+Свойства блока, которыми приложение меняет вид без своих правил:
+
+| Свойство                         | Что задаёт                                                                                                                                   | По умолчанию                              |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| `--rt-table-row-bg`              | цвет строки; его же берёт закреплённая ячейка. Наведение и проблемная строка переназначают его, строке итога приложение ставит своё значение | прозрачный                                |
+| `--rt-table-pinned-bg`           | подложка закреплённой ячейки под цветом строки                                                                                               | поверхность, в тёмной теме — фон страницы |
+| `--rt-table-pinned-shadow-color` | цвет тени у края закрепления                                                                                                                 | `--rt-color-table-pinned-shadow`          |
+| `--rt-table-pinned-shadow-width` | ширина тени                                                                                                                                  | `12px`                                    |
+
+Прокрутку вбок ведёт не таблица, а её контейнер у потребителя: таблица находит ближайшего
+предка, который прокручивается вбок, и по его положению ставит хосту модификаторы
+`rt-table--hidden-start` и `rt-table--hidden-end`.
+
 ## Строка отбора
 
 Ряд отбора рисует сама таблица, по полю `filter` в `columnsConfig`, и только когда его просят
@@ -101,4 +121,7 @@
   [`rt-menu`](../menu/CONTEXT.md) в строке.
 - Отбор колонки объявляется полем `filter` в `columnsConfig`, и ряд отбора таблица рисует сама —
   см. раздел выше. Колонка без `filter` не отбирает вовсе. Строк таблица не сужает.
+- Отбор и сортировку считает общее ядро таблиц `@rt-tools/ui-kit-v2/table-core`, то же, что у
+  `rt-data-table`. Таблица передаёт ему свой режим: пустым считается только `''`, а третье нажатие
+  на шапку снимает порядок.
 - Спеки логики лежат рядом: сортировка и предикат действий строки проверены отдельно.

package/src/lib/components/table/copy-cell/CONTEXT.md

@@ -0,0 +1,32 @@
+# `rt-copy-cell`
+
+Значение с кнопкой копирования. Кнопка рисует `ico-copy`, после нажатия на две секунды — `check`.
+
+```html
+<rt-copy-cell [value]="row.id">{{ row.id }}</rt-copy-cell>
+<rt-copy-cell framed>https://example.com/hook</rt-copy-cell>
+```
+
+| вход            | тип                     | умолчание |
+| --------------- | ----------------------- | --------- |
+| `value`         | `string \| number`      | `null`    |
+| `variant`       | `IRtIconButton.Variant` | `'ghost'` |
+| `revealOnHover` | `boolean`               | `true`    |
+| `framed`        | `boolean`               | `false`   |
+
+## Главное, что нужно знать
+
+**В таблице кнопка появляется при наведении на строку.** Вне таблицы строки для наведения нет,
+и `revealOnHover="false"` держит кнопку видимой всегда.
+
+**`framed` ставит ячейку в рамку поля ввода.** Фон, рамка и радиус поля, значение кеглем поля,
+отступ слева как у текста поля, кнопка видна всегда и прижата к правому краю рамки. Так адрес для
+копирования стоит в форме панели подключения службы. Длинное значение в рамке переносится на
+следующую строку, а не обрезается: на телефоне адрес идёт в две строки.
+
+**Обрезанное значение показывает подсказку целиком.** Обрезка меряется в минуту наведения; в
+рамке значение не обрезается.
+
+## Рядом
+
+- [`rt-table`](../CONTEXT.md) — таблица, где ячейка живёт по умолчанию.

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

@@ -38,6 +38,32 @@
         &--static &__button {
             opacity: 1;
         }
+
+        /* framed — ячейка в рамке поля ввода на всю ширину формы: фон, рамка и радиус поля,
+           отступ слева как у текста поля, кнопка прижата к правому краю рамки. */
+        &--framed {
+            display: flex;
+            width: 100%;
+            box-sizing: border-box;
+            padding: var(--rt-space-1) var(--rt-space-1) var(--rt-space-1) var(--rt-input-padding-x);
+            border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-input-radius);
+            background-color: var(--rt-input-color-bg);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-sm);
+            line-height: var(--rt-leading-normal);
+        }
+
+        /* В рамке значение переносится, а не обрезается: адрес в форме читают целиком, и на
+           телефоне он идёт в две строки, как в эталоне панели подключения. Без переноса строка
+           значения распирала форму шире панели. */
+        &--framed &__content {
+            flex: 1 1 auto;
+            overflow-wrap: anywhere;
+            text-overflow: clip;
+            white-space: normal;
+        }
     }
 
     /* Reveal при наведении/фокусе на всю строку rt-table — привычное поведение

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

@@ -7,20 +7,32 @@
     .rt-table {
         --rt-table-border-width: var(--rt-border-width-thin);
         --rt-table-card-radius: var(--rt-radius-md);
+        --rt-table-row-bg: transparent;
+        --rt-table-pinned-bg: var(--rt-color-table-bg);
+        --rt-table-pinned-shadow-color: var(--rt-color-table-pinned-shadow);
+        --rt-table-pinned-shadow-width: 12px;
 
         position: relative;
         display: table;
         width: 100%;
-        background: var(--rt-color-bg-surface);
+        background: var(--rt-color-table-bg);
         border-collapse: collapse;
         color: var(--rt-color-text-primary);
 
+        /* Строка в 50 по макету вместе с отступами и нижней линией. Высота стоит на строке, а не на
+           ячейке: высоту ячейки браузер считает по модели размеров страницы, и под сбросом
+           `box-sizing: border-box` у приложения строка выходила в 37. Ширину ячеек задают приложения. */
+        .cdk-header-row,
+        .cdk-row,
+        &__skeleton-row {
+            height: 50px;
+        }
+
         .cdk-header-cell,
         .cdk-cell,
         &__filter-cell,
         &__skeleton-cell {
             position: relative;
-            height: 50px;
             padding: var(--rt-space-2) var(--rt-space-5);
             border-bottom: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
 
@@ -55,7 +67,7 @@
         .cdk-header-cell {
             /* Верхняя грань таблицы — только у шапки (низ даёт border-bottom строк). */
             border-top: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
-            background: var(--rt-color-bg-surface);
+            background: var(--rt-color-table-bg);
             color: var(--rt-color-text-muted);
         }
 
@@ -146,23 +158,74 @@
             }
         }
 
+        /* Цвет строки — свойство строки, а не правило фона: его же берёт закреплённая ячейка.
+           Цвета наведения и проблемной строки полупрозрачны, поэтому закреплённая ячейка кладёт
+           цвет строки поверх непрозрачной подложки — иначе под ней просвечивали бы колонки,
+           уезжающие при прокрутке вбок. Строка итога получает свой цвет тем же свойством. */
+        .cdk-row,
+        .cdk-footer-row {
+            background: var(--rt-table-row-bg);
+        }
+
         .cdk-row {
             &:hover {
-                background: var(--rt-color-bg-hover);
+                --rt-table-row-bg: var(--rt-color-bg-hover);
             }
 
             /* Опт-ин подсветка проблемной строки (просрочка и т.п.): потребитель
                вешает класс `rt-table__row--danger` на строку. Составной селектор с
                `.cdk-row` нужен, чтобы danger-фон держался и при :hover. */
             &.rt-table__row--danger {
-                background: var(--rt-color-state-danger-bg);
+                --rt-table-row-bg: var(--rt-color-state-danger-bg);
 
                 &:hover {
-                    background: var(--rt-color-state-danger-bg);
+                    --rt-table-row-bg: var(--rt-color-state-danger-bg);
                 }
             }
         }
 
+        /* Закреплённая колонка: CDK ставит ячейке `position: sticky` и класс `cdk-table-sticky`.
+           Шапка уже залита поверхностью и правила не требует. */
+        .cdk-cell.cdk-table-sticky,
+        .cdk-footer-cell.cdk-table-sticky {
+            background: linear-gradient(var(--rt-table-row-bg), var(--rt-table-row-bg)), var(--rt-table-pinned-bg);
+        }
+
+        /* Тень у края: крайнюю ячейку закрепления CDK помечает классом `…-border-elem-<сторона>`.
+           Тень видна, пока под колонкой есть прокрученное содержимое — это говорят модификаторы
+           хоста `--hidden-start` и `--hidden-end`, которые таблица ставит по прокрутке. Без скрытого
+           края псевдоэлемента нет вовсе: невидимый, он всё равно выходил за край таблицы и давал
+           лишнюю прокрутку вбок. */
+        .cdk-table-sticky-border-elem-left,
+        .cdk-table-sticky-border-elem-right {
+            &:after {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: var(--rt-table-pinned-shadow-width);
+                pointer-events: none;
+            }
+        }
+
+        .cdk-table-sticky-border-elem-left:after {
+            left: 100%;
+            background: linear-gradient(to right, var(--rt-table-pinned-shadow-color), transparent);
+        }
+
+        .cdk-table-sticky-border-elem-right:after {
+            right: 100%;
+            background: linear-gradient(to left, var(--rt-table-pinned-shadow-color), transparent);
+        }
+
+        /* Начало и конец — логические края, а класс CDK называет физическую сторону: при письме
+           справа налево колонка у начала получает `…-right`. */
+        &--hidden-start:dir(ltr) .cdk-table-sticky-border-elem-left:after,
+        &--hidden-end:dir(ltr) .cdk-table-sticky-border-elem-right:after,
+        &--hidden-start:dir(rtl) .cdk-table-sticky-border-elem-right:after,
+        &--hidden-end:dir(rtl) .cdk-table-sticky-border-elem-left:after {
+            content: '';
+        }
+
         /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
            table-семантику обеспечивает директива rtTableRow на самой строке.
            Карточка узкого экрана открывает запись так же, как строка: вид у неё тот же. */
@@ -183,10 +246,15 @@
         }
 
         &--density--compact {
+            .cdk-header-row,
+            .cdk-row,
+            .rt-table__skeleton-row {
+                height: 36px;
+            }
+
             .cdk-header-cell,
             .cdk-cell,
             .rt-table__skeleton-cell {
-                height: 36px;
                 padding: var(--rt-space-xs) var(--rt-space-sm);
             }
         }
@@ -207,7 +275,7 @@
             /* Только нижняя грань — как у строк: верхнюю даёт border-bottom шапки
                (иначе двойная линия), боковые не рисуем (нет периметра). */
             border-bottom: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
-            background: var(--rt-color-bg-surface);
+            background: var(--rt-color-table-bg);
             color: var(--rt-color-text-muted);
             text-align: center;
         }
@@ -229,7 +297,7 @@
 
         &__overlay-backdrop {
             position: absolute;
-            background: var(--rt-color-bg-surface);
+            background: var(--rt-color-table-bg);
             inset: 0;
             opacity: 0.72;
         }
@@ -349,17 +417,4 @@
         /* Шаг входа `radius` переназначает скругление карточки узкого вида; у широкого вида углов нет. */
         @include kv.radius-steps('--rt-table-card-radius');
     }
-
-    /* В тёмной теме таблица сливается с фоном контента (bg-page), а не поднимается
-       на bg-surface — иначе список выпирает более светлой плитой над страницей. */
-    :root[data-theme='dark'] .rt-table,
-    html.rt-theme-dark .rt-table {
-        background: var(--rt-color-bg-page);
-
-        .cdk-header-cell,
-        .rt-table__empty,
-        .rt-table__overlay-backdrop {
-            background: var(--rt-color-bg-page);
-        }
-    }
 }