@rt-tools/ui-kit-v2 0.15.0 → 0.17.0

package/src/lib/components/menu/rt-menu-item.component.scss

@@ -51,6 +51,23 @@
             max-height: var(--rt-menu-item-icon-size);
             flex-shrink: 0;
             color: var(--rt-color-text-muted);
+
+            /* Свой значок приложения: коробка значка держит размер и цвет тона, а рисунок внутри
+               занимает её целиком и красится через currentColor. */
+            &--own {
+                display: inline-flex;
+                width: var(--rt-menu-item-icon-size);
+                height: var(--rt-menu-item-icon-size);
+                align-items: center;
+                justify-content: center;
+                font-size: var(--rt-menu-item-icon-size);
+                line-height: 1;
+
+                > * {
+                    max-width: 100%;
+                    max-height: 100%;
+                }
+            }
         }
 
         &__label {
@@ -58,6 +75,31 @@
             white-space: nowrap;
         }
 
+        /* Пункт-ссылка: кликабельной зоной и узлом фокуса служит ссылка внутри, поэтому поля и
+           раскладка пункта переезжают на неё, а хост остаётся рамкой подсветки. */
+        &--link {
+            padding: 0;
+        }
+
+        &__link {
+            display: flex;
+            min-width: 0;
+            min-height: var(--rt-menu-item-min-height);
+            box-sizing: border-box;
+            flex: 1 1 auto;
+            align-items: center;
+            padding: var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);
+            border-radius: var(--rt-menu-item-radius);
+            color: inherit;
+            gap: var(--rt-space-sm);
+            text-decoration: none;
+
+            &:focus-visible {
+                background: var(--rt-color-bg-hover);
+                outline: none;
+            }
+        }
+
         &--current {
             background: var(--rt-menu-item-current-bg);
         }

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

@@ -25,7 +25,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-pagination-arrow-size);
+            --rt-icon-button-size-step: var(--rt-pagination-arrow-size);
             --rt-icon-button-radius: var(--rt-pagination-arrow-radius);
             --rt-icon-button-shadow: var(--rt-pagination-arrow-shadow);
         }

package/src/lib/components/scroll-area/CONTEXT.md

@@ -46,6 +46,8 @@
 - Нажатие на значок уводит тело к самому низу и в содержимое под значком не уходит.
 - Полоса не ловит указатель — нажатия по списку под ней проходят насквозь; значок ловит сам.
 - Перекрасить растушёвку можно свойством `--rt-scroll-area-hint-color` на блоке.
+- Отступы и фоны шапки, тела и подвала — свойства блока `--rt-scroll-area-*-padding` и
+  `--rt-scroll-area-*-bg`; фоны по умолчанию прозрачные.
 
 ## Договорённость
 

package/src/lib/components/scroll-area/rt-scroll-area.component.scss

@@ -1,8 +1,22 @@
 @layer rt-kit.components {
+    /* Фон хоста — с нулевой специфичностью. Хост области часто сам элемент чужого блока со своим
+       фоном (столбец бокового меню), и правило той же силы перебивало его порядком в файле:
+       столбец терял подложку. Под `:where` любое правило по классу сильнее. */
+    :where(.rt-scroll-area) {
+        background: var(--rt-scroll-area-bg);
+    }
+
     .rt-scroll-area {
         --rt-scroll-area-hint-height: var(--rt-space-10);
         --rt-scroll-area-hint-color: var(--rt-color-bg-surface);
         --rt-scroll-area-hint-radius: var(--rt-radius-full);
+        --rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);
+        --rt-scroll-area-body-padding: var(--rt-space-4);
+        --rt-scroll-area-footer-padding: var(--rt-space-4);
+        --rt-scroll-area-bg: transparent;
+        --rt-scroll-area-header-bg: transparent;
+        --rt-scroll-area-body-bg: transparent;
+        --rt-scroll-area-footer-bg: transparent;
 
         // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а
         // полоса обязана дойти до содержимого подвала.
@@ -15,7 +29,8 @@
 
         &__header {
             flex: 0 0 auto;
-            padding: var(--rt-space-2) var(--rt-space-4);
+            padding: var(--rt-scroll-area-header-padding);
+            background: var(--rt-scroll-area-header-bg);
         }
 
         &__body {
@@ -23,13 +38,15 @@
             overflow: auto;
             flex: 1 1 auto;
             flex-direction: column;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-body-padding);
+            background: var(--rt-scroll-area-body-bg);
             min-block-size: 0;
         }
 
         &__footer {
             flex: 0 0 auto;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-footer-padding);
+            background: var(--rt-scroll-area-footer-bg);
         }
 
         // Полоса стоит поверх стыка тела и подвала и не ловит указатель: под ней живой список,

package/src/lib/components/side-menu/CONTEXT.md

@@ -0,0 +1,43 @@
+# `rt-side-menu`
+
+Боковая навигация: полоса пунктов и подменю раздела рядом. Перенос бокового меню первого кита. Это
+не `rt-menu`: то выпадающее меню действий, и одно другое не заменяет.
+
+```html
+<rt-side-menu menuId="main" [menuItems]="sections()" [activeMenuIds]="activeIds()" />
+```
+
+Входы, выходы и оси — в `Overview.mdx` рядом. Договорённость о поведении — описание второго кита,
+поддомен бокового меню.
+
+## Главное, что нужно знать
+
+**Активность приходит снаружи.** Меню не держит адрес само: какие пункты активны, говорит
+`activeMenuIds`, и подсветку двигает новый набор после перехода.
+
+**Режим и ширину подменю хранит сервис, а не меню.** `provideRtSideMenuSettings()` включает
+хранение под номером меню; без провайдера меню ничего не помнит, и режим с шириной приходят
+входами. Вход важнее сохранённого. `pinShown="false"` убирает кнопку закрепления, и сохранённое
+закрепление тогда не читается: иначе человек не открепил бы меню.
+
+**Подсказки строк подменю гасит `subMenuTooltipsShown="false"`.** Имена кнопок для чтения экрана
+остаются.
+
+**Значок вне набора — шаблон `rtSideMenuIcon`.** Имя Material первого кита меню переводит парой
+из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты и кнопки строк;
+контекст — строка (`$implicit`), имя (`icon`) и место (`slot`: `'icon'` или `'iconButton'`). Без
+шаблона на его месте пусто, а в режиме разработки консоль называет такое имя.
+
+**Раздел и запрос меню держит само.** Их не задать входом: раздел открывает нажатие или наведение
+на пункт полосы, запрос — набор в поле.
+
+## Края
+
+- Незакреплённая панель стоит над страницей и закрывается уходом указателя. Если человек взялся за
+  поле поиска, её закрывает только нажатие снаружи.
+- Закреплённая панель стоит в потоке рядом с полосой, у неё есть ручка ширины.
+- На узком экране закрепления нет: меню рисует один столбец с кнопкой «назад».
+- Столбец узкого экрана шириной `--rt-side-menu-mobile-width`, 15rem, как меню телефона первого кита:
+  длинная подпись режется многоточием и не раздувает меню. Строки стоят в 8 пикселях от края,
+  подпись — с 56.
+- Отказ хранилища меню не останавливает.

package/src/lib/components/side-menu/favorites/rt-side-menu-favorites.component.scss

@@ -0,0 +1,126 @@
+@layer rt-kit.components {
+    /* rt-side-menu-favorites — блок избранного вверху подменю. ViewEncapsulation.None.
+       Блок — раскрывающаяся панель кита, оформленная как папка подменю; строки — те же подпункты,
+       что в списке. */
+
+    .rt-side-menu-favorites {
+        --rt-side-menu-favorites-radius: var(--rt-radius-full);
+        --rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);
+
+        display: block;
+
+        /* Блок отделён от списка раздела чертой: без неё строка избранного и строка того же пункта
+           в списке стоят подряд и читаются как повтор. Свёрнутый блок держит черту так же. */
+        &:has(.rt-side-menu-favorites__panel) {
+            border-bottom: var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);
+            margin-block-end: var(--rt-space-sm);
+            padding-block-end: var(--rt-space-sm);
+        }
+
+        /* Заголовок панели — как у папки подменю. Звезда стоит левее подписей строк, почти у края,
+           как у первого кита: так рядом со столбцом шевронов умещается и число строк. Свойства
+           переназначены правилом двух классов: так они сильнее значений самой панели на том же узле. */
+        &__panel.rt-expansion-panel {
+            --rt-expansion-panel-duration: var(--rt-duration-fast);
+            --rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);
+            --rt-expansion-panel-header-min-height: var(--rt-control-height-md);
+            --rt-expansion-panel-header-padding-block: var(--rt-space-2);
+            --rt-expansion-panel-header-padding-start: var(--rt-space-1);
+            --rt-expansion-panel-header-padding-end: var(--rt-space-sm);
+            --rt-expansion-panel-header-gap: var(--rt-space-sm);
+            --rt-expansion-panel-header-font-size: var(--rt-text-sm);
+        }
+
+        /* Звезда стоит на месте значка папки и красится цветом темы, как закрашенные звёзды списка. */
+        &__star {
+            flex-shrink: 0;
+            color: var(--rt-color-action-primary);
+        }
+
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__list {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__item {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+    }
+
+    /* Строка и ручка объявлены вне корня блока: строку в руке CDK выносит в конец страницы, и правило
+       из корня до неё не доходит. */
+    .rt-side-menu-favorites__row {
+        display: flex;
+        align-items: center;
+
+        &.cdk-drag-preview {
+            --rt-side-menu-favorites-preview-radius: var(--rt-radius-full);
+            --rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);
+
+            border-radius: var(--rt-side-menu-favorites-preview-radius);
+            box-shadow: var(--rt-side-menu-favorites-preview-shadow);
+        }
+
+        /* Фон строки в руке — на строке внутри превью, а не на самом превью: CDK выносит превью в
+           верхний слой как `popover` и ставит ему встроенный прозрачный фон, который правило
+           класса не перебивает. */
+        &.cdk-drag-preview .rt-side-menu-favorites__item {
+            min-width: 0;
+            flex: 1 1 auto;
+            border-radius: var(--rt-side-menu-favorites-preview-radius);
+            background: var(--rt-color-bg-surface);
+        }
+
+        &.cdk-drag-placeholder {
+            opacity: 0;
+        }
+    }
+
+    /* Ручка видна так же, как «убрать»: под наведением и фокусом клавиатуры своей строки, а где
+       указатель не умеет наводиться, — всегда. Прячется прозрачностью: остаётся в порядке Tab. */
+    .rt-side-menu-favorites__handle {
+        flex-shrink: 0;
+        cursor: grab;
+        opacity: 0;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        @media (hover: none) {
+            opacity: 1;
+        }
+    }
+
+    .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,
+    .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,
+    .rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle {
+        opacity: 1;
+    }
+
+    /* Меню с `favoriteActionsReserve="none"`: ручка, ждущая наведения, в покое не занимает ширины. */
+    @media (hover: hover) {
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle {
+            overflow: hidden;
+            width: 0;
+            margin-inline-start: calc(var(--rt-space-sm) * -1);
+        }
+
+        /* Возврат места — прямым правилом: отрицание с `:has()` браузер при наведении не пересчитывал. */
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle {
+            overflow: visible;
+            width: auto;
+            margin-inline-start: 0;
+        }
+    }
+}

package/src/lib/components/side-menu/rt-side-menu.component.scss

@@ -0,0 +1,303 @@
+@layer rt-kit.components {
+    /* rt-side-menu — боковая навигация. ViewEncapsulation.None.
+       Host несёт класс блока: полоса пунктов, рядом панель подменю. Незакреплённая панель стоит над
+       страницей, закреплённая — в потоке рядом с полосой и сдвигает страницу. */
+
+    .rt-side-menu {
+        --rt-side-menu-rail-width: 5.5rem;
+        --rt-side-menu-panel-width: 15rem;
+        --rt-side-menu-panel-held-width: 30rem;
+        --rt-side-menu-mobile-width: 15rem;
+        --rt-side-menu-panel-radius: var(--rt-radius-lg);
+        --rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);
+        --rt-side-menu-item-radius: var(--rt-radius-full);
+        --rt-side-menu-resizer-border-width: var(--rt-border-width-thick);
+        --rt-side-menu-panel-border-width: var(--rt-border-width-thin);
+        --rt-side-menu-transition-duration: var(--rt-duration-fast);
+
+        /* Натянутую рукой ширину ставит привязка хоста; без неё панель берёт ширину оформления. */
+        --rt-side-menu-panel-dragged-width: 0px;
+
+        /* Ширина панели: наибольшее из оформления и натянутой рукой. */
+        --rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));
+
+        position: relative;
+        display: flex;
+        height: 100%;
+        color: var(--rt-color-text-primary);
+
+        /* Полоса — область прокрутки, а та растягивает себя на всю ширину своим правилом того же
+           веса. Основа гибкой строки сильнее ширины, и полоса держит свою, в каком бы порядке ни
+           пришли стили. */
+        &__rail {
+            max-width: var(--rt-side-menu-rail-width);
+            height: 100%;
+            box-sizing: border-box;
+            flex: 0 0 var(--rt-side-menu-rail-width);
+            border-right: var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);
+            background: var(--rt-color-bg-surface);
+
+            /* Отступ области прокрутки оставлял подписи 56 пикселей из 88, и слово рвалось посреди. */
+            .rt-scroll-area__body {
+                padding-inline: var(--rt-space-1);
+            }
+        }
+
+        &__rail-list {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--rt-space-md);
+            padding-block: var(--rt-space-sm);
+        }
+
+        &__rail-item {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-1);
+            text-decoration: none;
+
+            &:focus-visible {
+                outline: none;
+
+                .rt-side-menu__rail-icon {
+                    outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                }
+            }
+
+            &:hover .rt-side-menu__rail-icon,
+            &:active .rt-side-menu__rail-icon {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &--active .rt-side-menu__rail-icon,
+            &--active:hover .rt-side-menu__rail-icon {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        &__rail-icon {
+            display: flex;
+            width: 3.5rem;
+            height: 2rem;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-side-menu-item-radius);
+            transition: background-color var(--rt-side-menu-transition-duration) ease;
+        }
+
+        &__rail-title {
+            max-width: 100%;
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            overflow-wrap: anywhere;
+            text-align: center;
+        }
+
+        &__backdrop {
+            position: fixed;
+            z-index: var(--rt-z-dropdown);
+            inset: 0;
+        }
+
+        &__panel {
+            position: absolute;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            left: var(--rt-side-menu-rail-width);
+            display: flex;
+            width: var(--rt-side-menu-panel-shown-width);
+            height: 100%;
+            box-sizing: border-box;
+            flex-direction: column;
+            border-radius: 0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;
+            border-left: var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-side-menu-panel-shadow);
+
+            &--held {
+                width: max(var(--rt-side-menu-panel-held-width), var(--rt-side-menu-panel-shown-width));
+            }
+
+            &--pinned {
+                --rt-side-menu-panel-radius: 0;
+                --rt-side-menu-panel-shadow: var(--rt-shadow-none);
+
+                position: relative;
+                left: 0;
+                flex-shrink: 0;
+            }
+        }
+
+        &__panel-head {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-sm);
+            gap: var(--rt-space-2);
+        }
+
+        &__search {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &__pin {
+            flex-shrink: 0;
+        }
+
+        &__panel-body {
+            min-height: 0;
+            flex: 1 1 auto;
+        }
+
+        &__sub-list {
+            display: flex;
+            flex-direction: column;
+            padding-block-end: var(--rt-space-sm);
+            padding-inline: var(--rt-space-2);
+        }
+
+        &__empty {
+            padding: var(--rt-space-md);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+        }
+
+        /* Ручка стоит у правого края закреплённой панели по всей её высоте. */
+        &__resizer {
+            position: absolute;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            bottom: 0;
+            left: calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));
+            width: var(--rt-space-sm);
+            cursor: col-resize;
+
+            &:before {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 50%;
+                border-left: var(--rt-side-menu-resizer-border-width) solid transparent;
+                content: '';
+            }
+
+            &:hover:before,
+            &:focus-visible:before {
+                border-left-color: var(--rt-color-border-strong);
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        /* Столбец узкого экрана держит свою ширину — как у меню телефона первого кита: без неё меню
+           растягивалось по самой длинной подписи, и строки не резались многоточием. Ширина — основой
+           гибкой строки, как у полосы: область прокрутки ставит себе ширину правилом того же веса.
+           Нулевой нижний предел не даёт самой длинной подписи раздуть основу. Уже экрана столбец не
+           бывает. */
+        &__mobile {
+            min-width: 0;
+            max-width: 100%;
+            height: 100%;
+            flex: 0 0 var(--rt-side-menu-mobile-width);
+            background: var(--rt-color-bg-surface);
+
+            /* Строки стоят в восьми пикселях от края столбца, как у меню телефона первого кита: отступ
+               области прокрутки отодвигал подложку активной строки на 24. */
+            .rt-scroll-area__body {
+                padding-inline: 0;
+            }
+        }
+
+        &__mobile-list,
+        &__mobile-sub {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-sm);
+            gap: var(--rt-space-1);
+        }
+
+        &__mobile-item,
+        &__back {
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-control-height-lg);
+            box-sizing: border-box;
+            align-items: center;
+            border: 0;
+            border-radius: var(--rt-side-menu-item-radius);
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+
+            /* Подпись с 56 пикселей от края столбца, как у первого кита: значок — с 24, зазор 12. В шкале
+               шага 12 нет, он собран из двух. */
+            gap: calc(var(--rt-space-sm) + var(--rt-space-xs));
+            padding-inline: var(--rt-space-md);
+            text-align: start;
+            text-decoration: none;
+
+            &:hover {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-focus-ring-width) * -1);
+            }
+
+            &--active {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        /* Свой значок приложения — в полосе и в списке телефона: коробка размера значка пункта,
+           рисунок внутри занимает её целиком и красится через currentColor. */
+        &__own-icon {
+            --rt-side-menu-own-icon-size: var(--rt-size-5);
+
+            display: inline-flex;
+            width: var(--rt-side-menu-own-icon-size);
+            height: var(--rt-side-menu-own-icon-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            color: inherit;
+            line-height: 1;
+
+            > * {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        &__mobile-icon,
+        &__back-icon,
+        &__mobile-chevron {
+            flex-shrink: 0;
+        }
+
+        &__mobile-title,
+        &__back-label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

package/src/lib/components/side-menu/stories/component/test-side-menu-cell.component.scss

@@ -0,0 +1,27 @@
+@layer rt-kit.components {
+    /* Коробка показа: даёт меню высоту и становится местом отсчёта для панели и подложки. Свойство
+       `contain` делает её содержащим блоком и для фиксированной подложки, и оно же обрезает. */
+    .app-side-menu-cell {
+        width: 36rem;
+
+        /* Половина темы уже 36rem: без предела коробка вылезала за её край, и край кадра резал
+           меню. Предел берёт ширину половины, а вне пары тем коробка остаётся в 36rem. */
+        max-width: 100%;
+        height: 24rem;
+        border: 1px dashed var(--rt-color-border-subtle);
+        background: var(--rt-color-bg-page);
+        contain: paint;
+
+        &__slot {
+            padding: var(--rt-space-sm) 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            text-align: center;
+        }
+
+        &__own-icon {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/lib/components/side-menu/stories/component/test-side-menu.component.scss

@@ -0,0 +1,39 @@
+@layer rt-kit.components {
+    /* Меню во всю высоту окна и с тенью у края, как в истории первого кита: подменю выезжает над
+       страницей, и край меню виден на любом фоне. */
+    .app-side-menu {
+        --rt-side-menu-story-shadow: var(--rt-shadow-lg);
+
+        display: flex;
+        width: fit-content;
+        height: 100vh;
+        box-shadow: var(--rt-side-menu-story-shadow);
+
+        /* Низкий экран первого кита: окно высотой 360. */
+        &--short {
+            height: 22.5rem;
+        }
+
+        &__header {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-md) 0;
+            border-bottom: 1px solid var(--rt-color-border-subtle);
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+        }
+
+        &__footer {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+            padding-top: calc(var(--rt-space-sm) + var(--rt-space-xs));
+            border-top: 1px solid var(--rt-color-border-subtle);
+            color: var(--rt-color-text-primary);
+            gap: var(--rt-space-sm);
+        }
+    }
+}