@rt-tools/ui-kit-v2 0.41.0 → 0.43.0

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

@@ -0,0 +1,81 @@
+@layer rt-kit.components {
+    /* Содержимое страницы кадров: таблица в окне с прокруткой и подвал пагинации под ней. */
+    .app-page-table {
+        display: flex;
+        height: 100%;
+        min-height: 0;
+        flex-direction: column;
+
+        &__window {
+            overflow: auto hidden;
+            min-height: 0;
+            flex: 1 1 0;
+        }
+
+        /* Подвал кадров: высота 40, кнопки и поле 32, подпись в одну строку. */
+        &__pagination {
+            --rt-pagination-padding-y: var(--rt-space-1);
+            --rt-pagination-padding-x: var(--rt-space-1);
+            --rt-pagination-box-size: var(--rt-control-height-sm);
+            --rt-pagination-field-height: var(--rt-control-height-sm);
+            --rt-pagination-per-page-label-white-space: nowrap;
+
+            flex: none;
+        }
+
+        @media (width > 768px) {
+            &__table {
+                min-width: 1570px;
+                table-layout: fixed;
+            }
+
+            &__table th {
+                box-sizing: border-box;
+            }
+
+            /* Длинное значение в широкой таблице кадров — в одну строку с многоточием. */
+            &__table td {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            /* Ширины колонок кадров: в сумме 1570. */
+            .cdk-column-dates {
+                width: 230px;
+            }
+
+            .cdk-column-place {
+                width: 170px;
+            }
+
+            .cdk-column-guest {
+                width: 180px;
+            }
+
+            .cdk-column-contact {
+                width: 200px;
+            }
+
+            .cdk-column-party {
+                width: 110px;
+            }
+
+            .cdk-column-source {
+                width: 130px;
+            }
+
+            .cdk-column-status {
+                width: 190px;
+            }
+
+            .cdk-column-payment {
+                width: 170px;
+            }
+
+            .cdk-column-sum {
+                width: 190px;
+            }
+        }
+    }
+}

package/src/lib/components/page-header/user/rt-page-header-user.component.scss

@@ -0,0 +1,6 @@
+@layer rt-kit.components {
+    /* Кнопка стоит в ряду шапки прямым участником: своего места у этой части нет. */
+    .rt-page-header-user {
+        display: contents;
+    }
+}

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

@@ -14,6 +14,32 @@
 
 Выходов нет — шаги переключает потребитель. Описание шага необязательно.
 
+Полоса тянется по ширине места, от узкой панели в 280 px до любой. Шагов сколько угодно, текущий —
+любой.
+
+## Цвета
+
+Цвета — ручки потребителя `--rt-stepper-*`: кит их не объявляет, приложение задаёт их правилом на
+`rt-stepper` или на любом родителе. Пока не задано, работает запасное значение — токен темы.
+Объявить их на хосте нельзя: объявление на хосте перебило бы значение, унаследованное от родителя.
+
+| свойство                              | что красит                    | умолчание                     |
+| ------------------------------------- | ----------------------------- | ----------------------------- |
+| `--rt-stepper-track-color`            | трек и будущие точки          | `--rt-color-stepper-track`    |
+| `--rt-stepper-progress-color`         | заполнение и пройденные точки | `--rt-color-stepper-progress` |
+| `--rt-stepper-current-color`          | текущая точка                 | `--rt-color-stepper-current`  |
+| `--rt-stepper-label-color`            | подпись текущего шага         | `--rt-stepper-current-color`  |
+| `--rt-stepper-description-color`      | описание под полосой          | `--rt-color-text-primary`     |
+| `--rt-stepper-point-shadow`           | ореол текущей точки           | `--rt-shadow-step-indicator`  |
+| `--rt-stepper-inset`                  | отступ трека, точек и подписи | `0`                           |
+| `--rt-stepper-line-color`             | линия между метками списка    | `--rt-color-border-default`   |
+| `--rt-stepper-step-label-color`       | подпись шага в списке         | `--rt-color-text-primary`     |
+| `--rt-stepper-step-description-color` | описание шага в списке        | `--rt-color-text-muted`       |
+| `--rt-stepper-mark-<состояние>-bg`    | фон метки списка              | по состоянию                  |
+| `--rt-stepper-mark-<состояние>-color` | цифра метки списка            | по состоянию                  |
+
+Состояния метки: `complete`, `current`, `upcoming`, `neutral`.
+
 ## Вертикальный список
 
 `orientation="vertical"` рисует `<ol>`: метка с номером, подпись, описание, линия между метками.
@@ -36,8 +62,14 @@
 - Описание разбивается на абзацы по пустой строке (`\n\n`); пустое описание не создаёт абзаца.
 - Точки спрятаны от скринридера — прогресс он читает с самой полосы: `role="progressbar"`,
   `aria-valuemin/max/now` и `aria-valuetext` с подписью текущего шага.
-- Подпись текущего шага прижимается к началу, центру или концу полосы в зависимости от того,
-  где стоит шаг.
+- Подпись текущего шага стоит в отрезке полосы: на первом шаге вся полоса и прижим к началу, на
+  последнем — к концу, на среднем отрезок с центром на доле шага шириной в два расстояния до
+  ближнего края. Текущая точка шире соседних, поэтому её центр отходит от центра отрезка не больше
+  чем на 4 px. Если такой отрезок уже половины полосы, подпись берёт всю полосу и прижимается к
+  ближнему краю. За полосу подпись не выходит, длинная переносится и растит полосу вниз. Так же
+  собран макет.
+- Ореол текущей точки на первом и последнем шаге выходит за полосу на 4 px. Родитель, который
+  обрезает содержимое, задаёт `--rt-stepper-inset` не меньше 4 px.
 
 ## Рядом
 

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

@@ -1,81 +1,96 @@
 @use '../../../styles/mixins' as kv;
 
 @layer rt-kit.components {
-    /* rt-stepper — линейный прогресс-степпер в common/ui. ViewEncapsulation.None.
+    /* rt-stepper — полоса прогресса по шагам и вертикальный список. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stepper` висит
        и на `<rt-stepper>`, и на корне шаблона, поэтому правила блока вложены в хост —
        так они достаются только корню шаблона. */
 
     rt-stepper {
+        /* Цвета степпера переопределяются свойствами `--rt-stepper-*` на `rt-stepper` или на родителе.
+           Здесь они не объявляются: объявление на хосте перебило бы значение, унаследованное от
+           родителя. Умолчание — запасное значение в месте использования, токен темы. */
         display: block;
 
         .rt-stepper {
             --rt-stepper-radius: var(--rt-radius-full);
-            --rt-stepper-point-shadow: var(--rt-shadow-step-indicator);
+            --rt-stepper-halo: var(--rt-stepper-point-shadow, var(--rt-shadow-step-indicator));
             --rt-stepper-transition-duration: var(--rt-duration-fast);
 
             display: flex;
             flex-direction: column;
             gap: var(--rt-space-4);
 
+            /* Подпись над полосой, под ней полоса с точками. Подпись в несколько строк
+               растит полосу вниз, точки и описание сдвигаются за ней. Отступ точек от краёв
+               задаёт приложение: трек, точки и подпись сдвигаются внутрь на одно расстояние. Ореол текущей точки выходит за полосу на 4 px, и родитель,
+               который обрезает содержимое, даёт отступ не меньше. */
             &__rail {
-                position: relative;
-                block-size: 39px;
+                display: flex;
+                flex-direction: column;
+                padding-inline: var(--rt-stepper-inset, 0);
             }
 
+            /* Отрезок подписи (`margin-inline-start` и `inline-size`) задаётся инлайном:
+               по центру над точкой, на крайних шагах — вся полоса и прижим к краю. */
             &__label {
-                position: absolute;
                 margin: 0;
-                color: var(--rt-color-stepper-current);
+                color: var(--rt-stepper-label-color, var(--rt-stepper-current-color, var(--rt-color-stepper-current)));
                 font-size: var(--rt-text-xs);
                 font-weight: var(--rt-font-weight-regular);
-                inset-block-start: 0;
                 letter-spacing: var(--rt-letter-spacing-wide);
-                line-height: var(--rt-leading-none);
-                transition: left var(--rt-stepper-transition-duration) ease-out;
-                white-space: nowrap;
+                line-height: var(--rt-leading-normal);
+                overflow-wrap: anywhere;
+                transition:
+                    margin-inline-start var(--rt-stepper-transition-duration) ease-out,
+                    inline-size var(--rt-stepper-transition-duration) ease-out;
 
-                /* Подпись висит над активной точкой (`left` задаётся инлайном):
-                   на крайних шагах прижимаем к краю точки, иначе центрируем. */
                 &--anchor--start {
-                    transform: translateX(0);
+                    text-align: start;
                 }
 
                 &--anchor--center {
-                    transform: translateX(-50%);
+                    text-align: center;
                 }
 
                 &--anchor--end {
-                    transform: translateX(-100%);
+                    text-align: end;
                 }
             }
 
+            /* Полоса 21 px: 5 px просвета под подписью и 16 px под точки, точки прижаты к низу.
+               Подпись в 18 px и полоса дают те же 39 px, что и макет. */
             &__track-band {
-                position: absolute;
+                position: relative;
                 display: flex;
-                align-items: center;
-                block-size: 16px;
-                inset-block-end: 0;
-                inset-inline: 0;
+                align-items: flex-end;
+                block-size: 21px;
+            }
+
+            /* Линия идёт от центра первой точки до центра последней: отступ — половина малой точки.
+               Заполнение считается в долях этой линии и кончается в центре текущей точки. */
+            &__line {
+                position: absolute;
+                block-size: 2px;
+                inset-block-end: 7px;
+                inset-inline: 4px;
             }
 
             &__track,
             &__progress {
                 position: absolute;
                 border-radius: var(--rt-stepper-radius);
-                block-size: 2px;
-                inset-block-start: 50%;
+                inset-block: 0;
                 inset-inline-start: 0;
-                transform: translateY(-50%);
             }
 
             &__track {
-                background: var(--rt-color-stepper-track);
+                background: var(--rt-stepper-track-color, var(--rt-color-stepper-track));
                 inset-inline-end: 0;
             }
 
             &__progress {
-                background: var(--rt-color-stepper-progress);
+                background: var(--rt-stepper-progress-color, var(--rt-color-stepper-progress));
                 transition: width var(--rt-stepper-transition-duration) ease-out;
             }
 
@@ -92,7 +107,7 @@
 
             &__point {
                 border-radius: var(--rt-stepper-radius);
-                background: var(--rt-color-stepper-track);
+                background: var(--rt-stepper-track-color, var(--rt-color-stepper-track));
                 block-size: 8px;
                 inline-size: 8px;
                 transition:
@@ -101,20 +116,20 @@
                     background var(--rt-stepper-transition-duration) ease-out;
 
                 &--complete {
-                    background: var(--rt-color-stepper-progress);
+                    background: var(--rt-stepper-progress-color, var(--rt-color-stepper-progress));
                 }
 
                 &--current {
-                    background: var(--rt-color-stepper-current);
+                    background: var(--rt-stepper-current-color, var(--rt-color-stepper-current));
                     block-size: 16px;
-                    box-shadow: var(--rt-stepper-point-shadow);
+                    box-shadow: var(--rt-stepper-halo);
                     inline-size: 16px;
                 }
             }
 
             &__description {
                 margin: 0;
-                color: var(--rt-color-text-primary);
+                color: var(--rt-stepper-description-color, var(--rt-color-text-primary));
                 font-size: var(--rt-text-xs);
                 letter-spacing: var(--rt-letter-spacing-wide);
                 line-height: var(--rt-leading-snug);
@@ -130,10 +145,9 @@
         &.rt-stepper--vertical > .rt-stepper {
             --rt-stepper-mark-size: var(--rt-size-6);
             --rt-stepper-mark-font-size: var(--rt-text-xs);
-            --rt-stepper-mark-bg: var(--rt-color-text-muted);
-            --rt-stepper-mark-color: var(--rt-color-text-inverse);
+            --rt-stepper-mark-bg: var(--rt-stepper-mark-neutral-bg, var(--rt-color-text-muted));
+            --rt-stepper-mark-color: var(--rt-stepper-mark-neutral-color, var(--rt-color-text-inverse));
             --rt-stepper-line-width: var(--rt-border-width-thin);
-            --rt-stepper-line-color: var(--rt-color-border-default);
             --rt-stepper-item-gap: var(--rt-space-6);
 
             padding: 0;
@@ -155,28 +169,33 @@
                 /* Линия от метки до метки следующего шага, с просветом у обеих. */
                 &:not(:last-child):after {
                     position: absolute;
-                    background: var(--rt-stepper-line-color);
+                    background: var(--rt-stepper-line-color, var(--rt-color-border-default));
                     content: '';
                     inline-size: var(--rt-stepper-line-width);
                     inset-block: calc(var(--rt-stepper-mark-size) + var(--rt-space-1)) var(--rt-space-1);
                     inset-inline-start: calc((var(--rt-stepper-mark-size) - var(--rt-stepper-line-width)) / 2);
                 }
 
-                /* Цифра пройденного шага — цвет, обратный тексту: прогресс в тёмной теме светлый. */
                 &--state--complete {
-                    --rt-stepper-mark-bg: var(--rt-color-stepper-progress);
-                    --rt-stepper-mark-color: var(--rt-color-text-inverse);
+                    --rt-stepper-mark-bg: var(
+                        --rt-stepper-mark-complete-bg,
+                        var(--rt-stepper-progress-color, var(--rt-color-stepper-progress))
+                    );
+                    --rt-stepper-mark-color: var(--rt-stepper-mark-complete-color, var(--rt-color-text-inverse));
                 }
 
                 /* Янтарь текущего шага один в обеих темах, и цифра на нём одна — тёмная. */
                 &--state--current {
-                    --rt-stepper-mark-bg: var(--rt-color-stepper-current);
-                    --rt-stepper-mark-color: var(--rt-neutral-950);
+                    --rt-stepper-mark-bg: var(
+                        --rt-stepper-mark-current-bg,
+                        var(--rt-stepper-current-color, var(--rt-color-stepper-current))
+                    );
+                    --rt-stepper-mark-color: var(--rt-stepper-mark-current-color, var(--rt-neutral-950));
                 }
 
                 &--state--upcoming {
-                    --rt-stepper-mark-bg: var(--rt-color-stepper-track);
-                    --rt-stepper-mark-color: var(--rt-color-text-primary);
+                    --rt-stepper-mark-bg: var(--rt-stepper-mark-upcoming-bg, var(--rt-stepper-track-color, var(--rt-color-stepper-track)));
+                    --rt-stepper-mark-color: var(--rt-stepper-mark-upcoming-color, var(--rt-color-text-primary));
                 }
             }
 
@@ -204,7 +223,7 @@
             }
 
             .rt-stepper__step-label {
-                color: var(--rt-color-text-primary);
+                color: var(--rt-stepper-step-label-color, var(--rt-color-text-primary));
                 font-size: var(--rt-text-sm);
                 line-height: var(--rt-leading-snug);
                 overflow-wrap: anywhere;
@@ -212,7 +231,7 @@
 
             .rt-stepper__step-description {
                 margin: 0;
-                color: var(--rt-color-text-muted);
+                color: var(--rt-stepper-step-description-color, var(--rt-color-text-muted));
                 font-size: var(--rt-text-xs);
                 line-height: var(--rt-leading-snug);
             }

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

@@ -22,10 +22,14 @@
 | `headerOnly`        | `boolean`                      | `false`        |
 | `activation`        | `'auto' \| 'manual'`           | `'auto'`       |
 | `scrollArrows`      | `'overlay' \| 'inline'`        | `'overlay'`    |
+| `arrowLook`         | `'block' \| 'compact'`         | `'block'`      |
 | `scrollStep`        | `'fixed' \| 'page' \| 'third'` | `'fixed'`      |
+| `overflow`          | `'scroll' \| 'more'`           | `'scroll'`     |
+| `moreLimit`         | `number`                       | `10`           |
 | `animationDuration` | `string \| number \| null`     | `null`         |
 | `preserveContent`   | `boolean`                      | `false`        |
 | `dense`             | `boolean`                      | `false`        |
+| `closeOn`           | `'all' \| 'selected'`          | `'all'`        |
 
 Выходы: `activeIdChange: IRtTabs.Id`, `tabClose: IRtTabs.Id` — просьба закрыть вкладку с `closable`.
 
@@ -47,6 +51,8 @@
 | `glyph`                           | `string \| null` — значок Material                | `null`                |
 | `tooltip`                         | `string` — подсказка, и у отключённой             | `''`                  |
 | `closable`                        | `boolean`                                         | `false`               |
+| `pinned`                          | `boolean`                                         | `false`               |
+| `contextMenu`                     | `TemplateRef<ContextMenuContext> \| null`         | `null`                |
 | `closeTooltip`                    | `string` — подсказка крестика                     | `''`                  |
 | `closeTooltipPlacement`           | `IRtTooltip.Placement \| null`                    | `null`                |
 
@@ -98,7 +104,8 @@
   кнопку по `data-tabid`. Нажатие в любом месте обёртки выбирает вкладку, крестик своё нажатие
   дальше не пускает.
 - Крестик стоит в таб-порядке только у вкладки в фокусе. Его имя — `closeTooltip` или
-  переведённое `uiClose`. На вкладке закрывает и `Delete`. Фокус после закрытия с клавиатуры
+  переведённое `uiClose`. На вкладке закрывает и `Delete`, но только там, где крестик виден: при
+  `closeOn="selected"` — на выбранной. Фокус после закрытия с клавиатуры
   встаёт на активную вкладку.
 - У крестика своя подсказка `closeTooltip`; пока указатель на нём, подсказка вкладки пуста. Вид
   крестика — свойства `--rt-tab-item-close-*` на `.rt-tab-item`; размер иконки идёт через шаг `xs`
@@ -118,5 +125,27 @@
 - `preserveContent`: тело создаётся при первом открытии вкладки и дальше живёт; неактивное скрыто
   (`hidden`, `inert`, `aria-hidden`, вне таб-порядка) с якорем `tabs-panel-idle`. Уходит при смене
   живое тело прежней вкладки. Тело вкладки, убранной из набора, уничтожается вместе с ней.
+- `overflow="more"`: полоса не прокручивается, лишние вкладки уходят в меню «Ещё» в конце ряда.
+  Вкладка меню остаётся в разметке скрытой: ряд читает её ширину при каждом пересчёте. Выбранная
+  вкладка всегда в ряду, из меню она встаёт последней и вытесняет соседа. Подбор ряда решает чистая
+  функция `rtTabsFitRow`. Вертикальная полоса режима не знает и остаётся как есть.
+- `moreLimit` (по умолчанию 10): в ряду режима «Ещё» не больше стольких вкладок вместе с
+  закреплёнными, даже если места больше. Выбранная из меню или новая встаёт на место последней,
+  прежняя последняя уходит в меню. Закреплённые, занявшие весь предел, пропускают выбранную после
+  себя: в ряду тогда на одну вкладку больше предела. Крестик строки меню виден под указателем, при
+  фокусе и всегда на экране без наведения. Растянутые вкладки (`stretch`) ряд меряет по содержимому,
+  поэтому на широкой полосе они возвращаются из меню. Вкладка в фокусе, ушедшая в меню, отдаёт
+  таб-порядок выбранной. Отключённая строка меню ничего не выбирает и меню не закрывает. Строка
+  вкладки с `titleTemplate` рисует этот шаблон; опустевшее меню закрывается само.
+- Меню «Ещё» и меню по правой кнопке работают с клавиатуры, как `rt-menu`: директива
+  `rtTabsMenuKeys` ставит фокус на первый пункт, водит его стрелками, Home и End и возвращает туда,
+  откуда меню открыли. Клавиша меню и Shift+F10 открывают меню вкладки под ней.
+- `pinned`: вкладка рисует значок `pin`, если своей иконки нет, стоит первой и в меню не уходит.
+  Закрывается она как обычная: крестик задаёт `closable`.
 - `scrollArrows="inline"`: при переполнении обе стрелки стоят по краям, полоса между ними уже;
   стрелка, в сторону которой прокручивать некуда, бледная и не нажимается.
+- Стрелка по умолчанию (`arrowLook="block"`) — квадрат во всю высоту полосы, как до вертикальной
+  шапки. `arrowLook="compact"` — кнопка 24 (`__arrow`) в своём месте у края (`__rest`); поверх
+  вкладок под ней текст гаснет в цвет `--rt-tabs-arrow-fade`. Скругление, фон, цвет и тень
+  компактной кнопки задают свойства `--rt-tabs-arrow-*`. Стили стрелок лежат в `rt-tabs-arrows.scss`: основной файл вкладок упирается
+  в бюджет стилей компонента приложений.

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

@@ -0,0 +1,140 @@
+@layer rt-kit.components {
+    /* Стрелки прокрутки полосы вкладок. Свой файл: правила вкладок упираются в бюджет стилей
+       компонента у приложений, которые собирают кит из исходников.
+
+       `__rest` — место стрелки у края полосы, `__arrow` — значок в нём. Базовый вид — квадрат во всю
+       высоту полосы. Компактный (`arrowLook="compact"`) — кнопка `__arrow`, её скругление, фон и цвет
+       потребитель задаёт свойствами `--rt-tabs-arrow-*` на `rt-tabs`. */
+    .rt-tabs {
+        --rt-tabs-arrow-size: var(--rt-size-6);
+        --rt-tabs-arrow-inset: var(--rt-space-1);
+        --rt-tabs-arrow-radius: var(--rt-radius-sm);
+        --rt-tabs-arrow-shadow: var(--rt-shadow-sm);
+        --rt-tabs-arrow-bg: var(--rt-color-bg-surface);
+        --rt-tabs-arrow-bg-hover: var(--rt-color-bg-hover);
+        --rt-tabs-arrow-color: var(--rt-color-text-muted);
+        --rt-tabs-arrow-color-hover: var(--rt-color-text-primary);
+        --rt-tabs-arrow-fade: var(--rt-color-bg-surface);
+
+        &__rest {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            bottom: 0;
+            display: flex;
+            width: var(--rt-control-height-lg);
+            align-items: center;
+            justify-content: center;
+            background-color: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+            transition: color var(--rt-tabs-transition-duration) linear;
+            visibility: hidden;
+
+            &:hover {
+                color: var(--rt-color-text-primary);
+            }
+
+            &--before {
+                left: 0;
+                border-right: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            }
+
+            &--after {
+                right: 0;
+                border-left: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            }
+
+            &--visible {
+                visibility: visible;
+            }
+        }
+
+        /* В базовом виде у значка своей коробки нет: он стоит в месте стрелки, как до компактного вида. */
+        &__arrow {
+            display: contents;
+        }
+
+        /* Стрелки в своих местах: при переполнении обе стоят по краям, полоса между ними уже.
+           Стрелка в сторону, куда прокручивать некуда, бледнеет и не нажимается. Черта снизу
+           продолжает черту полосы под стрелками. */
+        &__tab-list-wrapper--inline {
+            align-items: stretch;
+
+            .rt-tabs__rest {
+                position: static;
+                display: none;
+                flex-shrink: 0;
+                border: 0;
+                border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+                background-color: transparent;
+            }
+
+            &.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest {
+                display: flex;
+                visibility: visible;
+            }
+
+            .rt-tabs__rest--inactive {
+                color: var(--rt-color-text-disabled);
+                cursor: default;
+                pointer-events: none;
+            }
+        }
+
+        /* Компактный вид. Поверх вкладок кнопка лежит у края полосы и чуть заходит на крайнюю
+           вкладку, а под ней текст вкладки гаснет в цвет полосы — `--rt-tabs-arrow-fade`. */
+        &__tab-list-wrapper--compact {
+            .rt-tabs__rest {
+                width: auto;
+                border: 0;
+                padding-inline: var(--rt-tabs-arrow-inset);
+            }
+
+            .rt-tabs__rest--before {
+                background: linear-gradient(to right, var(--rt-tabs-arrow-fade) 70%, transparent);
+            }
+
+            .rt-tabs__rest--after {
+                background: linear-gradient(to left, var(--rt-tabs-arrow-fade) 70%, transparent);
+            }
+
+            .rt-tabs__arrow {
+                display: flex;
+                width: var(--rt-tabs-arrow-size);
+                height: var(--rt-tabs-arrow-size);
+                flex: none;
+                align-items: center;
+                justify-content: center;
+                border-radius: var(--rt-tabs-arrow-radius);
+                background-color: var(--rt-tabs-arrow-bg);
+                box-shadow: var(--rt-tabs-arrow-shadow);
+                color: var(--rt-tabs-arrow-color);
+                transition:
+                    color var(--rt-tabs-transition-duration) linear,
+                    background-color var(--rt-tabs-transition-duration) linear;
+            }
+
+            .rt-tabs__rest:hover .rt-tabs__arrow {
+                background-color: var(--rt-tabs-arrow-bg-hover);
+                color: var(--rt-tabs-arrow-color-hover);
+            }
+
+            /* Рядом с вкладками тени у кнопки нет: она не лежит поверх. */
+            &.rt-tabs__tab-list-wrapper--inline {
+                .rt-tabs__rest {
+                    border-bottom: var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);
+                    background: none;
+                }
+
+                .rt-tabs__arrow {
+                    box-shadow: none;
+                }
+
+                .rt-tabs__rest--inactive .rt-tabs__arrow {
+                    color: var(--rt-color-text-disabled);
+                }
+            }
+        }
+    }
+}