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

package/src/lib/components/table/stories/component/test-table-pinned.component.scss

@@ -0,0 +1,76 @@
+@layer rt-kit.components {
+    /* Кадры закреплённой колонки: сетка два в ряд, как в макете. Ширина контейнера — 375, таблица
+       шире него, поэтому контейнер прокручивается вбок. Ширины колонок взяты из макета. */
+    .app-table-pinned {
+        display: grid;
+        gap: var(--rt-space-6) var(--rt-space-12);
+        grid-template-columns: repeat(2, 375px);
+
+        &__frame {
+            margin: 0;
+            background: var(--rt-color-bg-page);
+            color: var(--rt-color-text-primary);
+        }
+
+        &__caption {
+            margin-bottom: calc(var(--rt-space-1) * 3);
+            font-size: var(--rt-text-sm);
+        }
+
+        &__scroller {
+            width: 375px;
+            overflow-x: auto;
+            scrollbar-width: none;
+        }
+
+        /* Колонки макета — 150, 140, 140 и 130 вместе с отступами ячейки по 20 с боков и линией
+           между колонками: ячейка кита считает ширину без них, а слитая граница отдаёт каждой соседней
+           ячейке по половине пикселя. Поэтому здесь стоит ширина содержимого. Без фиксированной
+           раскладки таблица делит место по содержимому. */
+        &__table {
+            min-width: 560px;
+            table-layout: fixed;
+
+            .cdk-column-guest {
+                width: 109.5px;
+            }
+
+            .cdk-column-dates,
+            .cdk-column-status {
+                width: 99px;
+            }
+
+            .cdk-column-sum {
+                width: 89.5px;
+            }
+        }
+
+        /* Строка итога: цвет строки задаёт приложение тем же свойством, что берёт закреплённая ячейка. */
+        &__footer {
+            --rt-table-row-bg: var(--rt-color-bg-surface-subtle);
+
+            /* Ячейки итога кит не оформляет: высота, отступы и нижняя линия взяты у обычной ячейки
+               таблицы. */
+            .cdk-footer-cell {
+                height: calc(50px - 2 * var(--rt-space-2) - var(--rt-table-border-width));
+                padding: var(--rt-space-2) var(--rt-space-5);
+                border-bottom: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
+            }
+        }
+
+        /* Имя гостя обрезается многоточием, как в макете; полное имя — в подсказке ячейки. Обрезает
+           вложенный элемент, а не сама ячейка: закреплённая ячейка рисует тень за своим краем, и её
+           собственный overflow: hidden эту тень срезает. */
+        &__guest {
+            display: block;
+            overflow: hidden;
+            max-width: 110px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__total {
+            font-weight: var(--rt-font-weight-semibold);
+        }
+    }
+}

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

@@ -31,22 +31,24 @@
 
 ## `[rtTab]`
 
-| вход                              | тип                                           | умолчание             |
-| --------------------------------- | --------------------------------------------- | --------------------- |
-| `rtTab`                           | `IRtTabs.Id` — идентификатор вкладки          | `''`                  |
-| `label`                           | `string`                                      | `''`                  |
-| `titleTemplate`                   | `TemplateRef \| null`                         | `null`                |
-| `icon` / `iconColor`              | `IRtIcon.Name \| null` / `IRtTabs.TitleColor` | `null` / `'current'`  |
-| `badge`                           | `string \| number \| null`                    | `null`                |
-| `badgeTitle`                      | `string` — подсказка при наведении на метку   | `''`                  |
-| `badgeAriaLabel`                  | `string` — подпись метки для чтения с экрана  | `''`                  |
-| `disabled` / `hidden` / `invalid` | `boolean`                                     | `false`               |
-| `invalidMessage`                  | `string`                                      | `''` → `uiTabInvalid` |
-| `glyph`                           | `string \| null` — значок Material            | `null`                |
-| `tooltip`                         | `string` — подсказка, и у отключённой         | `''`                  |
-| `closable`                        | `boolean`                                     | `false`               |
-| `closeTooltip`                    | `string` — подсказка крестика                 | `''`                  |
-| `closeTooltipPlacement`           | `IRtTooltip.Placement \| null`                | `null`                |
+| вход                              | тип                                               | умолчание             |
+| --------------------------------- | ------------------------------------------------- | --------------------- |
+| `rtTab`                           | `IRtTabs.Id` — идентификатор вкладки              | `''`                  |
+| `label`                           | `string`                                          | `''`                  |
+| `titleTemplate`                   | `TemplateRef \| null`                             | `null`                |
+| `icon` / `iconColor`              | `IRtIcon.Name \| null` / `IRtTabs.TitleColor`     | `null` / `'current'`  |
+| `badge`                           | `string \| number \| null`                        | `null`                |
+| `badgeTitle`                      | `string` — подсказка при наведении на метку       | `''`                  |
+| `badgeAriaLabel`                  | `string` — подпись метки для чтения с экрана      | `''`                  |
+| `badgePosition`                   | `IRtTabs.BadgePosition` — `'overlay'` над иконкой | `'inline'`            |
+| `iconFill`                        | `boolean` — иконка залита                         | `false`               |
+| `disabled` / `hidden` / `invalid` | `boolean`                                         | `false`               |
+| `invalidMessage`                  | `string`                                          | `''` → `uiTabInvalid` |
+| `glyph`                           | `string \| null` — значок Material                | `null`                |
+| `tooltip`                         | `string` — подсказка, и у отключённой             | `''`                  |
+| `closable`                        | `boolean`                                         | `false`               |
+| `closeTooltip`                    | `string` — подсказка крестика                     | `''`                  |
+| `closeTooltipPlacement`           | `IRtTooltip.Placement \| null`                    | `null`                |
 
 ## Главное, что нужно знать
 

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

@@ -351,6 +351,13 @@
             flex-shrink: 0;
         }
 
+        /* Опора бейджа над иконкой: вкладка не знает, где иконка, и кружок ставится от её коробки. */
+        &__icon-box {
+            position: relative;
+            display: inline-flex;
+            flex-shrink: 0;
+        }
+
         &__badge {
             display: inline-flex;
             min-width: 18px;
@@ -364,6 +371,23 @@
             font-size: var(--rt-text-xs);
             font-weight: var(--rt-font-weight-medium);
             line-height: var(--rt-leading-none);
+
+            /* Кружок над правым верхним углом иконки, как `matBadge` у Material: из потока вынут, и
+               вкладка той же ширины, что без бейджа. Привязан правым краем — длинное число растёт
+               на иконку, а не на подпись. Сторона кружка — его полная ширина: поля внутри неё, иначе
+               однозначное число шире 16 px. */
+            &--overlay {
+                position: absolute;
+                top: calc(-1 * var(--rt-space-2));
+                right: calc(-1 * (var(--rt-space-1) + var(--rt-space-0-5)));
+                min-width: var(--rt-size-4);
+                height: var(--rt-size-4);
+                box-sizing: border-box;
+                padding: 0 var(--rt-space-1);
+                background-color: var(--rt-color-action-primary);
+                color: var(--rt-color-action-on-primary);
+                font-size: var(--rt-text-2xs);
+            }
         }
 
         /* Крестик закрываемой вкладки: подложка при наведении отделяет его от самой вкладки,
@@ -419,7 +443,7 @@
                 background-color: var(--rt-color-action-primary);
             }
 
-            .rt-tab-item__badge {
+            .rt-tab-item__badge:not(.rt-tab-item__badge--overlay) {
                 background-color: var(--rt-color-action-primary-soft);
                 color: var(--rt-color-action-primary);
             }

package/src/styles/_form.scss

@@ -231,6 +231,16 @@
         }
     }
 
+    /* Блок службы, стоящий прямо в форме, отбивается от следующего раздела шагом строк: на
+       макете панели подключения поле под чертой блока стоит на 16 при любой ширине. Источник
+       промежутка остаётся один, зазор формы, а блок снимает с него разницу между шагом разделов
+       и шагом строк. Разница есть только шире порога панели: на узком экране зазор формы и так 16. */
+    @media (width > #{bp.$rt-bp-md}) {
+        .rt-form > .rt-service-block {
+            margin-bottom: calc(var(--rt-space-md) - var(--rt-space-xl));
+        }
+    }
+
     /* На узком экране панель занимает весь экран, и ритм разделов сжимается вдвое. Порог тот же,
        что у самой панели. Ритм строк не трогается: строки и на узком идут тем же шагом. */
     @media (width <= #{bp.$rt-bp-md}) {

package/src/styles/_primitives.scss

@@ -275,6 +275,8 @@
     /* Alpha overlays — для backdrop'ов и focus-ring tint'ов. */
     --rt-overlay-black-4: rgb(0 0 0 / 4%);
     --rt-overlay-black-8: rgb(0 0 0 / 8%); /* наведение поверх приглушённой поверхности: она сама стоит на четырёх процентах */
+    --rt-overlay-black-16: rgb(0 0 0 / 16%); /* тень у края закреплённой колонки таблицы */
+    --rt-overlay-black-64: rgb(0 0 0 / 64%); /* та же тень на графите */
     --rt-overlay-white-4: rgb(255 255 255 / 4%);
     --rt-overlay-white-8: rgb(255 255 255 / 8%); /* то же на графите */
     --rt-overlay-white-25: rgb(250 250 250 / 25%); /* disabled-текст на графите */

package/src/styles/_semantic.scss

@@ -162,6 +162,15 @@
        уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
     --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
 
+    /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+       содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+    --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+
+    /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+       В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+       а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+    --rt-color-table-bg: var(--rt-color-bg-surface);
+
     /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
        а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
        остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -398,6 +407,7 @@
     --rt-field-gap: var(--rt-space-xs);
     --rt-field-label-font-size: var(--rt-text-sm);
     --rt-field-label-font-weight: var(--rt-font-weight-medium);
+    --rt-field-label-line-height: var(--rt-leading-none);
     --rt-field-label-color: var(--rt-color-text-muted);
     --rt-field-label-help-gap: var(--rt-space-xs);
     --rt-field-hint-font-size: var(--rt-text-xs);
@@ -407,7 +417,7 @@
     --rt-field-messages-padding-top: 0px;
     --rt-field-error-color: var(--rt-color-state-danger);
     --rt-field-required-color: var(--rt-color-state-danger);
-    --rt-field-required-gap: var(--rt-space-1);
+    --rt-field-required-gap: var(--rt-space-0-5);
     --rt-field-value-font-size: var(--rt-text-sm);
     --rt-field-value-color: var(--rt-color-text-primary);
     --rt-field-value-empty-color: var(--rt-color-text-muted);

package/src/styles/_theme-dark.scss

@@ -87,6 +87,8 @@
     /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
        выигрывала у материального набора и на этом имени. */
     --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+    --rt-color-table-pinned-shadow: var(--rt-overlay-black-64);
+    --rt-color-table-bg: var(--rt-color-bg-page);
     --rt-color-field-fill-underline: var(--rt-color-border-strong);
 
     /* Навигация — вся шкала серых разворачивается: подложка уходит глубже

package/styles/tokens.css

@@ -331,6 +331,8 @@
   /* Alpha overlays — для backdrop'ов и focus-ring tint'ов. */
   --rt-overlay-black-4: rgb(0 0 0 / 4%);
   --rt-overlay-black-8: rgb(0 0 0 / 8%); /* наведение поверх приглушённой поверхности: она сама стоит на четырёх процентах */
+  --rt-overlay-black-16: rgb(0 0 0 / 16%); /* тень у края закреплённой колонки таблицы */
+  --rt-overlay-black-64: rgb(0 0 0 / 64%); /* та же тень на графите */
   --rt-overlay-white-4: rgb(255 255 255 / 4%);
   --rt-overlay-white-8: rgb(255 255 255 / 8%); /* то же на графите */
   --rt-overlay-white-25: rgb(250 250 250 / 25%); /* disabled-текст на графите */
@@ -602,6 +604,13 @@
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -808,6 +817,7 @@
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -817,7 +827,7 @@
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -1379,6 +1389,8 @@ html.rt-theme-dark {
   /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
      выигрывала у материального набора и на этом имени. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-64);
+  --rt-color-table-bg: var(--rt-color-bg-page);
   --rt-color-field-fill-underline: var(--rt-color-border-strong);
   /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
      поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
@@ -1636,6 +1648,13 @@ html.rt-theme-dark {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -1842,6 +1861,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -1851,7 +1871,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -2173,6 +2193,13 @@ html.rt-theme-dark {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -2379,6 +2406,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -2388,7 +2416,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -2631,6 +2659,8 @@ html.rt-theme-dark {
   /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
      выигрывала у материального набора и на этом имени. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-64);
+  --rt-color-table-bg: var(--rt-color-bg-page);
   --rt-color-field-fill-underline: var(--rt-color-border-strong);
   /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
      поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
@@ -2859,6 +2889,13 @@ html.rt-theme-dark {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -3065,6 +3102,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -3074,7 +3112,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -3671,6 +3709,13 @@ html.rt-theme-dark .rt-preset-material {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -3877,6 +3922,7 @@ html.rt-theme-dark .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -3886,7 +3932,7 @@ html.rt-theme-dark .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -4397,6 +4443,8 @@ html.rt-theme-dark .rt-preset-material {
   /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
      выигрывала у материального набора и на этом имени. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-64);
+  --rt-color-table-bg: var(--rt-color-bg-page);
   --rt-color-field-fill-underline: var(--rt-color-border-strong);
   /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
      поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
@@ -4668,6 +4716,13 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -4874,6 +4929,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -4883,7 +4939,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -5479,6 +5535,13 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -5685,6 +5748,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -5694,7 +5758,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -6287,6 +6351,13 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
      серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
      уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  /* Table (rt-table) — тень у края закреплённой колонки, пока под ней есть прокрученное
+     содержимое. На графите тень гуще: шестнадцать процентов чёрного на нём не видны. */
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-16);
+  /* Table (rt-table) — подложка таблицы, её шапки, пустого состояния и закреплённых ячеек.
+     В тёмной теме таблица сливается с фоном контента, а не поднимается светлой плитой. Своё имя,
+     а не правило темы в компоненте: светлый кусок внутри тёмной страницы отвечает на него сам. */
+  --rt-color-table-bg: var(--rt-color-bg-surface);
   /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
      а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
      остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
@@ -6493,6 +6564,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -6502,7 +6574,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -7013,6 +7085,8 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
      выигрывала у материального набора и на этом имени. */
   --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+  --rt-color-table-pinned-shadow: var(--rt-overlay-black-64);
+  --rt-color-table-bg: var(--rt-color-bg-page);
   --rt-color-field-fill-underline: var(--rt-color-border-strong);
   /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
      поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
@@ -7638,6 +7712,15 @@ html.rt-theme-dark.rt-preset-material {
   .rt-form .rt-tabs__content {
     gap: var(--rt-space-xl);
   }
+  /* Блок службы, стоящий прямо в форме, отбивается от следующего раздела шагом строк: на
+     макете панели подключения поле под чертой блока стоит на 16 при любой ширине. Источник
+     промежутка остаётся один, зазор формы, а блок снимает с него разницу между шагом разделов
+     и шагом строк. Разница есть только шире порога панели: на узком экране зазор формы и так 16. */
+  @media (width > 768px) {
+    .rt-form > .rt-service-block {
+      margin-bottom: calc(var(--rt-space-md) - var(--rt-space-xl));
+    }
+  }
   /* На узком экране панель занимает весь экран, и ритм разделов сжимается вдвое. Порог тот же,
      что у самой панели. Ритм строк не трогается: строки и на узком идут тем же шагом. */
   @media (width <= 768px) {
@@ -7665,7 +7748,9 @@ html.rt-theme-dark.rt-preset-material {
     --rt-btn-padding: 0 1.25rem;
     --rt-btn-gap: 0.5rem;
     --rt-btn-radius: var(--rt-radius-control);
-    --rt-btn-border-width: var(--rt-border-width-thin);
+    /* Рамка есть только у кнопки в рамке, как в макете кнопок: у залитой и текстовой
+       её нет, и подпись стоит на отступе от края, а не на отступе плюс рамка. */
+    --rt-btn-border-width: 0px;
     --rt-btn-transition-duration: var(--rt-duration-fast);
     --rt-btn-focus-shadow: var(--rt-shadow-focus-ring);
     --rt-btn-font-size: 0.95rem;
@@ -7818,6 +7903,7 @@ html.rt-theme-dark.rt-preset-material {
        свойствами — на графите слабый оттенок не виден, и тёмная тема их поднимает. */
   }
   .rt-button--outlined {
+    --rt-btn-border-width: var(--rt-border-width-thin);
     --rt-btn-bg: transparent;
     --rt-btn-bg-hover: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-hover), transparent);
     --rt-btn-bg-active: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-active), transparent);