@rt-tools/ui-kit 0.4.0 → 0.5.1

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
   "dependencies": {
     "tslib": "^2.8.0",
-    "@rt-tools/core": "^0.3.1",
-    "@rt-tools/store": "^0.3.1",
-    "@rt-tools/utils": "^0.3.1"
+    "@rt-tools/core": "^0.4.0",
+    "@rt-tools/store": "^0.3.2",
+    "@rt-tools/utils": "^0.4.0"
   },
   "peerDependencies": {
-    "@rt-tools/core": "^0.3.1",
-    "@rt-tools/store": "^0.3.1",
-    "@rt-tools/utils": "^0.3.1",
-    "@angular/animations": "^22.0.0",
+    "@rt-tools/core": "^0.4.0",
+    "@rt-tools/store": "^0.3.2",
+    "@rt-tools/utils": "^0.4.0",
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",
     "@angular/compiler": "^22.0.0",

package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss

@@ -8,3 +8,50 @@
     inset: var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom)
         var(--rt-action-bar-container-left);
 }
+
+// Выезд панели: снизу, с проскоком выше места и возвратом — тем же порядком долей, каким он шёл
+// прежде. Проскок и делает движение живым, а не равномерным.
+@keyframes rtui-action-bar-enter {
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    30% {
+        opacity: 1;
+        transform: translateY(-15px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// Уход панели: тот же путь в обратную сторону, и проскок стоит ближе к концу.
+@keyframes rtui-action-bar-leave {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    70% {
+        opacity: 1;
+        transform: translateY(-15px);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+}
+
+.rtui-action-bar-container__bar {
+    animation: rtui-action-bar-enter 300ms;
+}
+
+.rtui-action-bar-container__bar--leaving {
+    // `forwards`: панель держится за нижней кромкой до того мига, когда её снимет разметка.
+    // Без него она возвращается на место в конце ухода и успевает мигнуть на своём месте.
+    animation: rtui-action-bar-leave 300ms forwards;
+}

package/src/lib/ui-kit/action-bar/stories/component/test-action-bar.component.scss

@@ -0,0 +1,15 @@
+:host {
+    display: block;
+
+    .stand {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+
+        &__log {
+            color: var(--rt-text-neutral-secondary);
+            font-size: 0.875rem;
+        }
+    }
+}

package/src/lib/ui-kit/aside/components/container/aside-container.component.scss

@@ -4,7 +4,10 @@
         --rt-scrollable-content-padding: 0;
         --rt-scrollable-footer-padding: 0;
 
-        // TODO: fix styles affect x-scroll
+        // Направление тела решает, куда тянется его единственный ребёнок — содержимое панели.
+        // При `row` он растягивается по высоте зоны: 305 против 290 при замере, и форма,
+        // рассчитанная на всю высоту, стоит на месте. При `column` он растянулся бы по ширине
+        // переполнения — 589 против видимых 525 — и уехал бы за правый край вместе с фоном.
         --rt-scrollable-content-flex-direction: row;
 
         @supports (height: 100dvh) {

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -74,6 +74,10 @@ $aside: (
     tab-badge-incorrect: (
         color: var(--rt-text-accent-danger),
     ),
+    slide: (
+        duration: 200ms,
+        timing: ease-in,
+    ),
 );
 
 // NOTE: emitted at :root on purpose (ViewEncapsulation.None): consumers override
@@ -91,6 +95,26 @@ $aside: (
     --rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons);
 }
 
+// SLIDE
+// Шторка выезжает из-за своей кромки и уходит туда же. Начальное положение задаёт сторона,
+// конечное — модификатор открытия: он объявлен ниже и потому перебивает сторону.
+.rtui-aside-panel {
+    display: block;
+    transition: transform var(--rt-aside-slide-duration) var(--rt-aside-slide-timing);
+}
+
+.rtui-aside-panel--left {
+    transform: translateX(-100%);
+}
+
+.rtui-aside-panel--right {
+    transform: translateX(100%);
+}
+
+.rtui-aside-panel--open {
+    transform: translateX(0);
+}
+
 // BADGE
 .icon-badge {
     position: absolute !important;

package/src/lib/ui-kit/popover/stories/component/test-popover.component.scss

@@ -0,0 +1,32 @@
+:host {
+    position: relative;
+    display: block;
+    min-height: 12rem;
+
+    .body {
+        max-width: 20rem;
+        padding: 0.75rem 1rem;
+        border: 1px solid var(--rt-border-neutral-default);
+        border-radius: 0.5rem;
+        background-color: var(--rt-bg-base-base);
+
+        &__title {
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+        &__list {
+            margin: 0 0 0.5rem;
+            padding-left: 1rem;
+        }
+    }
+
+    /*
+     * Класс от потребителя садится на хост слоя привязкой — правило целит в сам хост, а не
+     * внутрь него: инкапсуляция дальше хоста дочернего компонента не пускает.
+     */
+    rtui-popover-container.popover-accent {
+        outline: 2px solid var(--rt-border-accent-primary);
+        outline-offset: 0.25rem;
+    }
+}

package/src/lib/ui-kit/scrollable/scrollable-container.component.scss

@@ -24,9 +24,22 @@ $scrollable: (
         padding: 1rem,
         background-color: var(--rt-bg-base-base),
     ),
+    // Признак непоказанного снизу: полоса растушёвки у нижнего края и значок поверх неё.
+    scroll-hint: (
+            height: 2.5rem,
+            icon-size: 1.25rem,
+            // Цвет растушёвки ведёт выбранная цветовая схема: мягкая заливка акцента берётся
+            // из рядов роли, которые схема и переопределяет, а светлую и тёмную темы токен
+            // разводит сам. Взятый нейтральным фоном, цвет стоял бы одним и тем же во всех
+            // схемах. Потребитель, которому нужен свой, переназначает это свойство.
+            color: var(--rt-bg-accent-primary-subtle),
+        ),
 );
 
 :host {
+    // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а полоса
+    // обязана дойти до содержимого подвала.
+    position: relative;
     display: var(--rt-scrollable-host-display);
     width: var(--rt-scrollable-host-width);
     height: var(--rt-scrollable-host-height);
@@ -58,5 +71,49 @@ $scrollable: (
             padding: var(--rt-scrollable-footer-padding);
             background-color: var(--rt-scrollable-footer-background-color);
         }
+
+        // Полоса стоит поверх стыка списка и подвала и не ловит указатель: под ней живой список,
+        // и перехваченное нажатие уводило бы человека мимо пункта. Значок ловит его сам — иначе
+        // подсказку не прочитать. Места в колонке полоса не занимает: занятое, оно отодвинуло бы
+        // последний пункт от края у каждого потребителя области.
+        // Подъём над низом области приходит замером — это высота подвала без верхнего отступа:
+        // ровно там начинается его содержимое, и до него полоса и доходит. Оборванная у края
+        // списка, она оставляла до разделителя полосу чистого фона.
+        &__scroll-hint {
+            position: absolute;
+            z-index: 1;
+            right: 0;
+            left: 0;
+            display: flex;
+            height: var(--rt-scrollable-scroll-hint-height);
+            align-items: flex-end;
+            justify-content: center;
+
+            // Растушёвка красится фоном темы, а не уходит в `transparent`: прозрачный — это
+            // чёрный с нулевой прозрачностью, и на тёмной теме такой градиент идёт через грязь.
+            // Начало берётся тем же цветом с нулевой прозрачностью — переход остаётся чистым в
+            // обеих темах, а потребитель, перекрасивший область, получает свой цвет даром.
+            background: linear-gradient(
+                to bottom,
+                rgb(from var(--rt-scrollable-scroll-hint-color) r g b / 0%),
+                var(--rt-scrollable-scroll-hint-color)
+            );
+            pointer-events: none;
+        }
+
+        // Значок сидит на своей подложке: без неё он ложится поверх растворяющегося содержимого
+        // и читается как его часть — на кадре его не отличить от полустёртого пункта.
+        &__scroll-hint-icon {
+            display: flex;
+            width: var(--rt-scrollable-scroll-hint-icon-size);
+            height: var(--rt-scrollable-scroll-hint-icon-size);
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-radius-full);
+            background-color: var(--rt-bg-base-base);
+            color: var(--rt-text-base-secondary);
+            font-size: var(--rt-scrollable-scroll-hint-icon-size);
+            pointer-events: auto;
+        }
     }
 }

package/src/lib/ui-kit/scrollable/stories/component/test-scrollable.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: block;
+
+    .stand {
+        height: 24rem;
+        border: 1px solid var(--rt-border-neutral-default);
+    }
+
+    .title {
+        font-weight: 500;
+    }
+
+    .row {
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--rt-border-neutral-default);
+    }
+}

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -19,13 +19,52 @@ $side-menu: (
     ),
     sub-menu: (
         width: 15rem,
+        // Скругление правых углов панели. Число здесь, а не в теме: тем же числом отступает от
+        // угла прокручиваемый список — иначе полоса прокрутки, идущая до самого низа, срезается
+        // скруглением, и её нижний конец выглядит обрубленным.
+        // Число, а не ступень скругления кита: то имя объявлено обоими китами, и стили, подключённые
+        // позже, перебивали бы его молча.
+        radius: 1rem,
+        // Ширина подменю на время набора запроса: тот же предел, до которого его растягивает тяга.
+        held-width: 30rem,
+        // Поле поиска ниже полного роста поля формы: в шапке подменю оно стоит рядом с кнопкой
+        // значка, и полная высота поднимала бы шапку выше двух строк списка.
+        search-height: 2.5rem,
     ),
     sub-menu-item: (
         width: 13.75rem,
         title-font-size: 0.85rem,
     ),
+    // Полоса прокрутки списков меню. Системная занимает у узкой панели заметную долю ширины и
+    // выглядит в каждой системе по-своему; здесь она узкая, с плоской дорожкой и скруглённым
+    // ползунком. Значения взяты с образца, показанного владельцем: полоса в два пикселя, дорожка
+    // светло-серая, ползунок серый со скруглением малой ступени. Цвета берутся токенами — они же
+    // разводят светлую и тёмную тему.
+    scrollbar: (
+            width: 0.125rem,
+            thumb-radius: var(--rt-radius-xs),
+            track-color: var(--rt-bg-base-strong),
+            thumb-color: var(--rt-bg-base-emphasis-soft),
+        ),
+    // Ручка тяги: видимая полоса и зона, которой она захватывается курсором, — два разных числа.
+    // Пока они были одним, попасть в четыре пикселя удавалось не с первого раза, а промах мимо
+    // ручки попадает в панель подменю — то есть вместо тяги человек нажимает пункт. Зона шире
+    // втрое и стоит по центру прежнего места: видимое от этого не двигается ни на пиксель.
+    resizer: (
+            width: 0.25rem,
+            grab-width: 0.75rem,
+            hover-color: var(--rt-border-neutral-default),
+        ),
 );
 
+:host(.rtui-side-menu--pinned) {
+    // Полоса значков и закреплённое подменю стоят в ряд. Правило висит на модификаторе хоста, а
+    // не на самом хосте: поставленное безусловно, оно сдвинуло экраны каждого потребителя кита,
+    // где закрепления нет вовсе.
+    display: flex;
+    height: 100%;
+}
+
 :host {
     @each $element, $elements in $side-menu {
         @each $style-token, $value in $elements {
@@ -36,8 +75,37 @@ $side-menu: (
     // Hide drawer mask
     --mat-sidenav-scrim-color: transparent;
 
+    // Ширина, которой панель подменю стоит на экране: заданная оформлением потребителя либо
+    // раздвинутая тягой за край. Её знают трое — сама панель, ручка тяги и пункт внутри неё, —
+    // и выражение, повторённое у каждого, разъезжается на первой же правке одного из них.
+    --rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
+
+    // Правый край панели подменю на экране: отступ полосы значков плюс её показанная ширина.
+    // Тем же числом стоит ручка тяги, и повторённое у неё выражение разошлось бы с этим.
+    --rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width));
+
+    // Полоса прокрутки обоих списков меню — полосы значков и подменю. Оформляется здесь, а не у
+    // прокручиваемой области: вид остальных её экранов от этой правки не двигается. Правило
+    // пробивает инкапсуляцию, потому что прокручивается внутренний узел области, а полоса
+    // принадлежит ему; своего входа под вид полосы область не даёт.
+    ::ng-deep .rtui-scrollable__content {
+        &::-webkit-scrollbar {
+            width: var(--rt-side-menu-scrollbar-width);
+            height: var(--rt-side-menu-scrollbar-width);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: var(--rt-side-menu-scrollbar-track-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: var(--rt-side-menu-scrollbar-thumb-radius);
+            background: var(--rt-side-menu-scrollbar-thumb-color);
+        }
+    }
+
     .rtui-mobile-side-menu {
-        width: var(--rt-side-menu-sub-menu-width);
+        width: var(--rt-side-menu-sub-menu-shown-width);
 
         .rtui-mobile-side-menu-list {
             display: flex;
@@ -45,7 +113,7 @@ $side-menu: (
             flex-direction: column;
 
             &--scrollable {
-                width: fit-content;
+                min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
             }
 
             &__sub {
@@ -144,6 +212,44 @@ $side-menu: (
         }
     }
 
+    // Ручка тяги лежит вне ящика подменю и вне его контейнера: панель скруглена по правому краю
+    // и режет по этой дуге всё, что внутри неё, а положенное в контейнер рядом с панелью Material
+    // уносит в свою область содержимого. Снаружи ручка идёт от края экрана до края, и стоит она
+    // там, где кончается панель: отступ полосы значков плюс ширина самой панели.
+    .rtui-side-menu-resizer {
+        // Свес — половина лишней ширины, на которую зона захвата шире видимой полосы. Его
+        // используют два места: сам узел, сдвинутый влево на эту величину, и полоса внутри него,
+        // отступающая на неё же. Выражение, повторённое у обоих, расходится на первой же правке
+        // одного.
+        --rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);
+
+        // Отступ узла от правого края панели: своя ширина полосы плюс свес слева от неё.
+        --rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));
+
+        // Узел занимает зону захвата целиком и стоит так, чтобы прежняя полоса осталась на своём
+        // месте: лишняя ширина расходится поровну в обе стороны от неё.
+        position: fixed;
+        z-index: 3;
+        left: calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));
+        width: var(--rt-side-menu-resizer-grab-width);
+        cursor: col-resize;
+        inset-block: 0;
+
+        // Красится не сам узел, а полоса внутри него: закрашенная зона захвата стала бы втрое
+        // толще прежней линии и читалась бы другим оформлением, а не тем же с большей мишенью.
+        &:before {
+            position: absolute;
+            left: var(--rt-side-menu-resizer-overhang);
+            width: var(--rt-side-menu-resizer-width);
+            content: '';
+            inset-block: 0;
+        }
+
+        &:hover:before {
+            background-color: var(--rt-side-menu-resizer-hover-color);
+        }
+    }
+
     .rtui-sub-side-menu {
         position: fixed;
         top: 0;
@@ -160,21 +266,130 @@ $side-menu: (
             // Component-local elevation token for the slide-out sub-menu drawer.
             --rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);
 
-            width: var(--rt-side-menu-sub-menu-width);
+            position: relative;
+            width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
+            min-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
             height: 100%;
+            border-radius: 0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;
             border-left: 1px solid var(--rt-border-neutral-default);
             box-shadow: var(--rt-side-menu-sub-content-shadow);
 
+            // Список отступает от скруглённого угла на его же радиус. Панель обрезает всё, что в
+            // угол заходит, и полоса прокрутки, идущая по правому краю до самого низа, теряла в
+            // нём свой конец — выглядело это обрубленной полосой, а не скруглением панели.
+            rtui-scrollable {
+                // Отступ съедает высоту, а не прибавляет её: у области задан рост во всю панель,
+                // и без этого правила она вылезала бы за её нижний край на тот же радиус.
+                box-sizing: border-box;
+                padding-bottom: var(--rt-side-menu-sub-menu-radius);
+            }
+
             &__list {
                 width: 100%;
                 animation: fade-in-animation 0.15s ease-in-out 0.15s forwards;
                 opacity: 0;
 
+                // Список с боковой прокруткой не уже пункта — и не шире панели. Рост по
+                // содержимому раздувал бы его вместе с самой длинной подписью, и пункт уезжал
+                // бы за край панели вместо многоточия; прокрутка при этом остаётся при деле —
+                // она нужна там, где панель уже самого пункта.
                 &--scrollable {
-                    min-width: fit-content;
+                    min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
                 }
             }
+
+            &__empty {
+                padding: var(--rt-spacing-16);
+                color: var(--rt-text-base-secondary);
+                font-size: var(--rt-font-size-xs);
+            }
+        }
+
+        // Закреплённая шторка стоит в потоке рядом с полосой значков, а не поверх страницы:
+        // тень и перекрытие у постоянно открытой панели читаются как залипший оверлей.
+        // Пока человек работает с полем, подменю стоит во всю разрешённую ширину: отобранный
+        // список читают, а не разглядывают в узкой полосе. Раздвигает панель нижняя граница, а не
+        // ширина: ширину шторки Material держит своим кодом, и ни переход, ни кадры её не двигают.
+        &--held .rtui-sub-side-menu-content {
+            min-width: var(--rt-side-menu-sub-menu-held-width);
         }
+
+        &--pinned {
+            position: relative;
+            left: 0;
+            width: var(--rt-side-menu-sub-menu-shown-width);
+            height: 100%;
+            flex: 0 0 auto;
+
+            .rtui-sub-side-menu-content {
+                box-shadow: none;
+
+                // Появление списка рассчитано на выдвижение шторки. Закреплённая никуда не
+                // выезжает, и её список показан сразу — иначе он живёт под гашеной анимацией
+                // и не виден вовсе там, где движение выключено.
+                &__list {
+                    animation: none;
+                    opacity: 1;
+                }
+            }
+        }
+
+        .rtui-sub-side-menu-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-spacing-8);
+            gap: var(--rt-spacing-8);
+
+            // Поле рисует готовое кита. Своего у него остаётся место в ряду, форма пилюли и
+            // рост: в шапке подменю поле стоит рядом с кнопкой значка, и полная высота поля
+            // формы поднимала бы шапку выше строки списка. Скругление и высоту задают ручки
+            // самого поля, а не рамка поверх него.
+            &__search {
+                min-width: 0;
+                flex: 1 1 auto;
+
+                --mat-form-field-outlined-container-shape: var(--rt-radius-xl);
+                --mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);
+                --mat-form-field-container-vertical-padding: var(--rt-spacing-8);
+
+                // Готовое поле разводит значок и текст на шестнадцать пикселей — двенадцать
+                // справа от значка и четыре у самого префикса. В узкой панели это половина
+                // строки запроса, поэтому зазор сведён к одной ступени. Ручки под него у поля
+                // формы нет: правится сам отступ значка.
+                &::ng-deep .mat-mdc-form-field-icon-prefix > .mat-icon {
+                    padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-12);
+                }
+            }
+
+            // Кнопку рисует готовое кита; своего у неё остаётся место в ряду.
+            &__pin {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    // Узкая раскладка: подменю занимает экран целиком, и поле поиска стоит над списком.
+    // Рисует его то же готовое кита, что и на широком экране.
+    .rtui-side-menu-search {
+        width: 100%;
+        margin: var(--rt-spacing-8) 0;
+
+        --mat-form-field-outlined-container-shape: var(--rt-radius-xl);
+        --mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);
+        --mat-form-field-container-vertical-padding: var(--rt-spacing-8);
+
+        // Зазор между значком и запросом сведён к ступени по той же причине, что и на широком
+        // экране: готовое поле разводит их на шестнадцать пикселей.
+        &::ng-deep .mat-mdc-form-field-icon-prefix > .mat-icon {
+            padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-12);
+        }
+    }
+
+    .rtui-side-menu-empty {
+        padding: var(--rt-spacing-16);
+        color: var(--rt-text-base-secondary);
+        font-size: var(--rt-font-size-xs);
     }
 }
 

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -1,4 +1,11 @@
 :host {
+    // Хост пункта — блок шириной своего места. Строкой он не сжимается по ширине вовсе, и
+    // ограничение пункта внутри него ничего не решает: список растягивается по хосту, а хост —
+    // по самой длинной подписи. Тот же класс висит и на строке списка внутри, поэтому хост
+    // адресуется именем элемента.
+    display: block;
+    max-width: 100%;
+
     &::ng-deep {
         // Set expansion panel header padding
         .mat-expansion-indicator {
@@ -17,11 +24,22 @@
         --mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height);
     }
 
+    // Пункт занимает ширину панели и не больше её: панель знает, насколько широка, — её двигают
+    // тяга за край и работа с полем поиска, — а подпись, которая в эту ширину не влезла, уходит в
+    // многоточие. Своим числом верхний предел быть не может: панель, выросшая вдвое, держала бы
+    // подписи обрезанными при пустой полосе справа. Ширины места здесь тоже мало: список с
+    // боковой прокруткой сам растёт по содержимому, и пункт, отмеренный от него, раздувается
+    // вместе с подписью и уезжает за край панели. Число остаётся нижним пределом там, где
+    // прокрутка включена: сжатый пункт прокручивать нечем.
     .rtui-side-menu-sub-item {
-        max-width: var(--rt-side-menu-sub-menu-item-width);
+        max-width: 100%;
 
+        // Нижний предел ширины действует, пока для него есть место. Вложенный пункт стоит с
+        // отступом своего уровня, и предел, взятый числом, выносил бы его правый край за панель
+        // ровно на этот отступ: ширину такой пункт оправдывает, а человек видит строку, уходящую
+        // под край панели.
         &--fixed {
-            min-width: var(--rt-side-menu-sub-menu-item-width);
+            min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
         }
 
         .rtui-side-menu-sub-item-title {
@@ -36,6 +54,15 @@
                 white-space: nowrap;
             }
 
+            // Совпавший с запросом кусок подписи. Красится набором токенов, а не умолчанием
+            // разметки выделения браузера: то жёлтое и в тёмной теме читается как чужое.
+            &__match {
+                border-radius: var(--rt-radius-xs);
+                background-color: var(--rt-bg-accent-highlight);
+                color: var(--rt-text-accent-highlight);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
             .rtui-side-menu-sub-item-title-button {
                 display: flex;
                 align-items: center;
@@ -66,12 +93,16 @@
         border-radius: var(--rt-radius-xl);
         box-shadow: none;
 
+        // Нижний предел ширины действует, пока для него есть место. Вложенный пункт стоит с
+        // отступом своего уровня, и предел, взятый числом, выносил бы его правый край за панель
+        // ровно на этот отступ: ширину такой пункт оправдывает, а человек видит строку, уходящую
+        // под край панели.
         &--fixed {
-            min-width: var(--rt-side-menu-sub-menu-item-width);
+            min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
         }
 
         .rtui-side-menu-expand-sub-item-header {
-            max-width: var(--rt-side-menu-sub-menu-item-width);
+            max-width: 100%;
             padding: 0;
 
             &--activated {
@@ -87,6 +118,16 @@
                 font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
             }
 
+            // Отметка совпавшего — та же, что у пункта со ссылкой: заголовок раздела попадает
+            // в отобранный список наравне с ним, и разное оформление одного и того же читалось
+            // бы как разный смысл.
+            &__match {
+                border-radius: var(--rt-radius-xs);
+                background-color: var(--rt-bg-accent-highlight);
+                color: var(--rt-text-accent-highlight);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
             &:hover {
                 .rtui-side-menu-expand-sub-item-header__icon {
                     color: var(--mdc-list-list-item-hover-leading-icon-color);