@rt-tools/ui-kit-v2 0.39.1 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/date-picker/panel/rt-date-panel.component.scss

@@ -11,6 +11,9 @@
         /* Толщина черты над подвалом. */
         --rt-date-panel-divider-width: var(--rt-border-width-thin);
 
+        /* Рамка текущих месяца и года: тонкая линия цвета действия внутри ячейки. */
+        --rt-date-panel-current-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);
+
         /* Видимая высота колонки времени: семь ячеек с шестью зазорами, остальное прокручивается. */
         --rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);
 
@@ -46,7 +49,29 @@
             margin-bottom: var(--rt-space-4);
         }
 
+        /* Год в заголовке сетки месяцев — кнопка: открывает сетку годов. */
         &__year {
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border: none;
+            border-radius: var(--rt-date-panel-cell-radius);
+            background: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-weight: var(--rt-font-weight-semibold);
+
+            &:hover {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+        }
+
+        /* Подпись блока лет «2024 – 2035» над сеткой годов. */
+        &__span {
             color: var(--rt-color-text-primary);
             font-weight: var(--rt-font-weight-semibold);
         }
@@ -57,6 +82,24 @@
             grid-template-columns: repeat(3, 1fr);
         }
 
+        /* Ячейки сеток месяцев и годов — по ячейке периода макета; колонки времени не задеты. */
+        &__month-grid &__cell {
+            font-weight: var(--rt-font-weight-medium);
+
+            &:hover:not(:disabled, [aria-pressed='true']) {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &[data-current]:not([aria-pressed='true']) {
+                color: var(--rt-color-action-primary);
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                opacity: 1;
+            }
+        }
+
         &__time {
             display: flex;
             gap: var(--rt-space-1);
@@ -96,6 +139,11 @@
                 outline-offset: var(--rt-focus-ring-offset);
             }
 
+            /* Текущий год обведён тонкой линией цвета действия, как сегодняшний день календаря. */
+            &[data-current]:not([aria-pressed='true']) {
+                box-shadow: var(--rt-date-panel-current-ring);
+            }
+
             &[aria-pressed='true'] {
                 background: var(--rt-color-action-primary);
                 color: var(--rt-color-action-on-primary);
@@ -121,11 +169,12 @@
             justify-content: center;
         }
 
-        /* Нижняя шторка: дни и ячейки под палец, всё — в одну колонку на всю ширину. */
+        /* Нижняя шторка: дни и ячейки под палец, всё — в одну колонку. Тело шторки своих боковых
+           отступов не даёт, поэтому панель держит отступ шапки и подвала шторки, а не край экрана. */
         &--sheet {
             --rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));
 
-            padding-inline: 0;
+            padding-inline: var(--rt-space-5);
         }
 
         /* Календарь объявляет размер дня на корне своего блока, поэтому свойство ставится на сам

package/src/lib/components/date-range/panel/rt-date-range-panel.component.scss

@@ -8,6 +8,12 @@
         /* Толщина черты между вариантами и месяцами и над подвалом. */
         --rt-date-range-panel-divider-width: var(--rt-border-width-thin);
 
+        /* Скругление ячеек сеток и кнопки года. */
+        --rt-date-range-panel-cell-radius: var(--rt-radius-md);
+
+        /* Рамка текущих месяца и года: тонкая линия цвета действия внутри ячейки. */
+        --rt-date-range-panel-current-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);
+
         display: flex;
         flex-direction: column;
         padding: var(--rt-space-4);
@@ -54,6 +60,88 @@
             min-inline-size: calc(var(--rt-size-10) * 14 + var(--rt-space-6));
         }
 
+        /* Сетки месяцев и годов: на месте двух месяцев и той же ширины, четыре ячейки в ряд. */
+        &__grid {
+            flex: 1 1 auto;
+            min-inline-size: calc(var(--rt-size-10) * 14 + var(--rt-space-6));
+        }
+
+        &__grid-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: var(--rt-space-4);
+        }
+
+        /* Подсказка заголовка «2026 · выберите месяц»: год в ней — кнопка к сетке годов. */
+        &__hint {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        &__year {
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border: none;
+            border-radius: var(--rt-date-range-panel-cell-radius);
+            background: none;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+
+            &:hover {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+        }
+
+        &__cells {
+            display: grid;
+            gap: var(--rt-space-2);
+            grid-template-columns: repeat(4, 1fr);
+        }
+
+        &__cell {
+            border: none;
+            border-radius: var(--rt-date-range-panel-cell-radius);
+            background: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--rt-font-weight-medium);
+            min-block-size: calc(var(--rt-size-12) + var(--rt-space-2));
+
+            &:hover:not(:disabled, [aria-pressed='true']) {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+
+            /* Текущие месяц и год обведены тонкой линией цвета действия, как сегодняшний день. */
+            &[data-current]:not([aria-pressed='true']) {
+                box-shadow: var(--rt-date-range-panel-current-ring);
+                color: var(--rt-color-action-primary);
+            }
+
+            &[aria-pressed='true'] {
+                background: var(--rt-color-action-primary);
+                color: var(--rt-color-action-on-primary);
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                cursor: not-allowed;
+            }
+        }
+
         &__footer {
             display: flex;
             align-items: center;
@@ -68,9 +156,10 @@
             font-size: var(--rt-text-sm);
         }
 
-        /* Нижняя шторка: варианты строкой сверху с прокруткой вбок, один месяц, дни под палец. */
+        /* Нижняя шторка: варианты строкой сверху с прокруткой вбок, один месяц, дни под палец.
+           Тело шторки своих боковых отступов не даёт — панель держит отступ шапки и подвала шторки. */
         &--sheet {
-            padding-inline: 0;
+            padding-inline: var(--rt-space-5);
         }
 
         &--sheet &__body {
@@ -93,6 +182,10 @@
             flex: 0 0 auto;
         }
 
+        &--sheet &__grid {
+            min-inline-size: 0;
+        }
+
         &--sheet &__calendar {
             --rt-calendar-month-count: 1;
             --rt-calendar-day-size: var(--rt-date-range-panel-sheet-day-size);

package/src/lib/components/detail-list/CONTEXT.md

@@ -23,6 +23,9 @@
 **Во время загрузки подменяется только значение** — подпись остаётся, по ней читается, чего ждут.
 Заглушка узкая (180 px), под значение, а не под всю строку.
 
+**Значение сохраняет переносы из текста.** `\n` в значении даёт новую строку, длинный текст
+переносится по ширине. Приложение с `preserveWhitespaces: true` увидит и переносы из своего шаблона.
+
 ## Рядом
 
 - [`rt-info-item`](../info-item/CONTEXT.md) — одиночная пара «подпись: значение» в строку.

package/src/lib/components/detail-list/rt-detail-row.component.scss

@@ -20,6 +20,7 @@
             color: var(--rt-field-value-color);
             font-size: var(--rt-field-value-font-size);
             line-height: var(--rt-leading-normal);
+            white-space: pre-line;
         }
     }
 }

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/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`, и только когда его просят

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);
-        }
-    }
 }