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

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

@@ -23,6 +23,10 @@
 **Панель рисует само меню.** У поповера кита оформления нет, и голые пункты меню в попапе шапки
 легли бы прямо поверх страницы. Стили без инкапсуляции: попап живёт в перекрытии у конца `<body>`.
 
+**В панели поповера меню не выше свободного места и прокручивается.** На низком экране — телефон
+боком, невысокое окно — нижние пункты уходили за край. Шапка открывает меню с подгонкой под окно, а
+меню в панели ужимается до её высоты; вне панели оно рисуется во весь рост.
+
 **Тему переключает `ThemeService`**, как у `rt-theme-toggle`: значок показывает тему, к которой
 переведёт нажатие.
 

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

@@ -16,6 +16,17 @@
         box-shadow: var(--rt-profile-menu-shadow);
         gap: var(--rt-space-2);
 
+        /* В панели поповера меню ужимается до свободного места под именем, а пункты прокручиваются
+           внутри него: на низком экране — телефон боком, невысокое окно — нижние пункты уходили за
+           край экрана, и до «Выйти» было не дотянуться. Вне панели меню рисуется как раньше.
+           По горизонтали прокрутки нет: строки выступают в поле отступа, и прокручиваемый блок
+           прибавлял к ним правый отступ — меню ездило вбок на 8 точек. */
+        .rt-popover-panel > & {
+            overflow: hidden auto;
+            min-height: 0;
+            max-height: 100%;
+        }
+
         &__user {
             display: flex;
             flex-direction: column;

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

@@ -25,6 +25,7 @@
 | `scrollStep`        | `'fixed' \| 'page' \| 'third'` | `'fixed'`      |
 | `animationDuration` | `string \| number \| null`     | `null`         |
 | `preserveContent`   | `boolean`                      | `false`        |
+| `dense`             | `boolean`                      | `false`        |
 
 Выходы: `activeIdChange: IRtTabs.Id`, `tabClose: IRtTabs.Id` — просьба закрыть вкладку с `closable`.
 

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

@@ -2,6 +2,11 @@
     .rt-tabs {
         --rt-tabs-border-width: var(--rt-border-width-thin);
         --rt-tabs-transition-duration: var(--rt-duration-fast);
+        --rt-tabs-list-align: stretch;
+        --rt-tabs-list-border-color: var(--rt-color-border-default);
+        --rt-tabs-list-min-height: auto;
+        --rt-tabs-list-padding-inline: 0;
+        --rt-tabs-content-padding-top: var(--rt-space-md);
 
         display: flex;
         -webkit-tap-highlight-color: transparent;
@@ -40,13 +45,13 @@
             position: relative;
             display: flex;
             box-sizing: border-box;
-            align-items: var(--rt-tabs-list-align, stretch);
-            border-bottom: var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color, var(--rt-color-border-default));
+            align-items: var(--rt-tabs-list-align);
+            border-bottom: var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);
             margin: 0;
-            min-block-size: var(--rt-tabs-list-min-height, auto);
+            min-block-size: var(--rt-tabs-list-min-height);
             -ms-overflow-style: none;
             overflow-x: auto;
-            padding-inline: var(--rt-tabs-list-padding-inline, 0);
+            padding-inline: var(--rt-tabs-list-padding-inline);
             scrollbar-width: none;
             white-space: nowrap;
 
@@ -185,7 +190,7 @@
             min-height: 0;
             flex: 1 1 auto;
             flex-direction: column;
-            padding-top: var(--rt-tabs-content-padding-top, var(--rt-space-md));
+            padding-top: var(--rt-tabs-content-padding-top);
             gap: var(--rt-space-md);
             line-height: var(--rt-leading-relaxed);
 

package/src/lib/components/thread-list/rt-thread-list-messenger.scss

@@ -2,6 +2,8 @@
 // Лежит отдельно от стилей списка, чтобы оба файла уместились в предел длины.
 @layer rt-kit.components {
     .rt-thread-list--messenger {
+        --rt-thread-list-row-radius: var(--rt-radius-lg);
+
         padding: calc(var(--rt-space-1) * 1.5) var(--rt-space-2) 0;
         gap: var(--rt-space-0-5);
 
@@ -24,7 +26,7 @@
         // Выбор и непрочитанное видны по фону и по счётчику шаблона: левой полосы и точки нет
         .rt-thread-list__row {
             padding: calc(var(--rt-space-2) + var(--rt-space-0-5)) calc(var(--rt-space-2) + var(--rt-space-1));
-            border-radius: var(--rt-radius-lg);
+            border-radius: var(--rt-thread-list-row-radius);
             border-inline-start: none;
             gap: calc(var(--rt-space-2) + var(--rt-space-1));
 

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -19,6 +19,7 @@
     rt-toggle-button-group {
         --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
         --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+        --rt-toggle-button-group-active-shadow: var(--rt-shadow-sm);
         --rt-toggle-button-group-height: 30px;
         --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
         --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
@@ -88,7 +89,7 @@
                 // Выбранный сегмент — плашка над дорожкой: тень RT/Shadow/sm, как в макете сегмента
                 &--active {
                     background-color: var(--rt-toggle-button-group-active-bg);
-                    box-shadow: var(--rt-shadow-sm);
+                    box-shadow: var(--rt-toggle-button-group-active-shadow);
                     color: var(--rt-color-text-primary);
                 }
 

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

@@ -10,11 +10,15 @@
 </rt-toolbar>
 ```
 
-| вход    | тип       | умолчание |
-| ------- | --------- | --------- |
-| `dense` | `boolean` | `false`   |
+| вход            | тип       | умолчание |
+| --------------- | --------- | --------- |
+| `dense`         | `boolean` | `false`   |
+| `filtersActive` | `boolean` | `false`   |
 
-Выходов нет.
+| выход          | когда                                          |
+| -------------- | ---------------------------------------------- |
+| `filtersApply` | нажата «Применить» панели отборов, она закрыта |
+| `filtersReset` | нажата «Сбросить» панели отборов, она открыта  |
 
 ## Главное, что нужно знать
 
@@ -37,3 +41,16 @@
 **Плотная полоса остаётся строкой на любой ширине, и её левая часть сжимается.** Длинный
 заголовок в ней переносится по словам и не выходит за правый край. Кнопки справа держат свою
 ширину. Обычная полоса левую часть не сжимает: на узком экране она стекает в колонку.
+
+**Отборы списка объявляются слотом `rtToolbarFilters`, и на узком месте они уходят за кнопку.** На
+широком месте слот стоит в левой части после её содержимого. На узком месте
+(`BreakpointsService.narrow`) вместо полей рисуется кнопка фильтров, первой в ряду кнопок правой
+части; ниже 768 этот ряд начинается от левого края. Вход `filtersActive` ставит точку в угол значка.
+Кнопка открывает панель `RtToolbarFiltersAsideComponent` службой боковых панелей. «Сбросить»
+сообщает `filtersReset`, и панель остаётся открытой; «Применить» сообщает `filtersApply` и
+закрывает её. Контекст шаблона — место, где он нарисован: `bar` или `panel`. Хозяин панели —
+инжектор полосы: уничтожение полосы закрывает панель, и расширение места тоже — иначе поля отборов
+стояли бы в полосе и в панели сразу; фокус из закрытой так панели уходит в левую секцию полосы.
+Второе нажатие кнопки, пока панель открыта, ничего не открывает. Панель держит фокус
+(`trapFocus`) и объявлена модальным диалогом (`modal`), а имя кнопки при `filtersActive` говорит
+скринридеру, что отбор включён.

package/src/lib/components/toolbar/filters-aside/rt-toolbar-filters-aside.component.scss

@@ -0,0 +1,22 @@
+@layer rt-kit.components {
+    /* rt-toolbar-filters-aside — панель отборов полосы на узком экране. ViewEncapsulation.None. */
+    .rt-toolbar-filters-aside {
+        --rt-toolbar-filters-aside-gap: var(--rt-space-md);
+
+        /* Поля отборов — одно под другим во всю ширину тела панели. */
+        &__fields {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-toolbar-filters-aside-gap);
+
+            // Блок получает начальный фокус панели как место, а не как элемент управления: рамки нет
+            &:focus {
+                outline: none;
+            }
+
+            > * {
+                width: 100%;
+            }
+        }
+    }
+}

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

@@ -83,6 +83,12 @@
                 gap: var(--rt-space-sm);
             }
         }
+
+        /* Кнопка фильтров узкого места — первая в ряду кнопок и не сжимается: точка включённого
+           отбора выступает за её угол, и полоса её не режет — у секций нет своего overflow. */
+        &__filters-trigger {
+            flex-shrink: 0;
+        }
     }
 
     // Плотная полоса не стекает в колонку, и длинный заголовок левой зоны ей некуда деть: зона
@@ -119,5 +125,11 @@
                 margin-left: 0;
             }
         }
+
+        // Отборы ушли за кнопку: она открывает ряд кнопок полосы у левого края, как в макете
+        // «Телефон · Toolbar · фильтры за кнопкой».
+        .rt-toolbar--filters-collapsed:not(.rt-toolbar--dense) .rt-toolbar__bar--right {
+            justify-content: flex-start;
+        }
     }
 }

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

@@ -36,18 +36,21 @@
         }
 
         &__aside {
-            // Вкладки панели прижаты к своей линии того же цвета, низ полки вровень с низом шапки переписки
-            --rt-tabs-list-min-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
-            --rt-tabs-list-align: flex-end;
-            --rt-tabs-list-padding-inline: var(--rt-space-1);
-            --rt-tabs-list-border-color: var(--rt-color-border-strong);
-            --rt-tabs-content-padding-top: 0;
-
             display: flex;
             flex: 0 0 var(--rt-workspace-aside-size, 360px);
             flex-direction: column;
             border-inline-start: var(--rt-workspace-border-width) solid var(--rt-color-border-strong);
             min-inline-size: 0;
+
+            // Вкладки панели прижаты к своей линии того же цвета, низ полки вровень с низом шапки переписки.
+            // Значения ставятся на сами вкладки: у них свои по умолчанию, и наследование их не перебьёт
+            .rt-tabs {
+                --rt-tabs-list-min-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
+                --rt-tabs-list-align: flex-end;
+                --rt-tabs-list-padding-inline: var(--rt-space-1);
+                --rt-tabs-list-border-color: var(--rt-color-border-strong);
+                --rt-tabs-content-padding-top: 0;
+            }
         }
 
         &__handle {
@@ -174,6 +177,7 @@
         // Карточки: у каждой колонки своя рамка и скругление, зазор между ними держит ручка
         &--cards {
             --rt-workspace-card-gap: var(--rt-space-4);
+            --rt-workspace-card-radius: var(--rt-radius-xl);
 
             gap: 0;
 
@@ -182,7 +186,7 @@
             .rt-workspace__aside {
                 overflow: hidden;
                 border: var(--rt-workspace-border-width) solid var(--rt-color-border-subtle);
-                border-radius: var(--rt-radius-xl);
+                border-radius: var(--rt-workspace-card-radius);
                 background: var(--rt-color-bg-surface);
             }
 

package/src/lib/components/workspace-details/rt-workspace-details.component.scss

@@ -1,6 +1,7 @@
 @layer rt-kit.components {
     .rt-workspace-details {
         --rt-workspace-details-border-width: var(--rt-border-width-thin);
+        --rt-workspace-details-tabs-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
 
         display: flex;
         flex-direction: column;
@@ -29,7 +30,7 @@
             // Низ полки вкладок стоит на одной линии с низом шапки переписки
             .rt-tabs__header {
                 align-items: flex-end;
-                block-size: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
+                block-size: var(--rt-workspace-details-tabs-height);
                 border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
                 padding-inline: var(--rt-space-lg);
             }

package/src/rich-editor/lib/components/chat/rt-chat-messenger.scss

@@ -2,6 +2,8 @@
 // Лежит отдельно от стилей чата, чтобы оба файла уместились в предел длины.
 @layer rt-kit.components {
     .rt-chat {
+        --rt-chat-day-label-radius: var(--rt-radius-full);
+
         &__day[hidden] {
             display: none;
         }
@@ -19,7 +21,7 @@
 
         &__day-label {
             padding: var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));
-            border-radius: var(--rt-radius-full);
+            border-radius: var(--rt-chat-day-label-radius);
             background: var(--rt-color-bg-surface);
             color: var(--rt-color-text-muted);
             font-size: var(--rt-text-xs);
@@ -34,6 +36,10 @@
         // время и знак доставки справа внизу
         &--messenger {
             --rt-chat-bubble-radius: var(--rt-radius-xl);
+            --rt-chat-bubble-corner-radius: var(--rt-radius-sm);
+            --rt-chat-messenger-border-width: var(--rt-border-width-thin);
+            --rt-chat-messenger-panel-radius: var(--rt-radius-lg);
+            --rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);
             --rt-chat-bubble-own-bg: var(--rt-color-action-primary);
             --rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);
 
@@ -46,7 +52,7 @@
                 --rt-toolbar-padding-top: 0;
                 --rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));
 
-                border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+                border-block-end: var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);
 
                 .rt-toolbar__bar--left {
                     gap: calc(var(--rt-space-2) + var(--rt-space-1));
@@ -56,7 +62,7 @@
             // Реплики прижаты к низу ленты, к полю ответа: короткий разговор не висит под шапкой
             .rt-chat__thread {
                 padding: var(--rt-space-5) var(--rt-space-6);
-                border-radius: var(--rt-radius-lg);
+                border-radius: var(--rt-chat-messenger-panel-radius);
                 background: var(--rt-color-bg-surface);
                 gap: var(--rt-space-1);
 
@@ -67,7 +73,8 @@
 
             .rt-chat__message {
                 padding: var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);
-                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-radius-sm);
+                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius)
+                    var(--rt-chat-bubble-corner-radius);
                 gap: var(--rt-space-0-5);
             }
 
@@ -79,7 +86,8 @@
             }
 
             .rt-chat__message--own {
-                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-radius-sm) var(--rt-chat-bubble-radius);
+                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius)
+                    var(--rt-chat-bubble-radius);
                 box-shadow: none;
             }
 
@@ -122,10 +130,10 @@
                 display: flex;
                 align-items: center;
                 padding: var(--rt-space-0-5);
-                border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-                border-radius: var(--rt-radius-lg);
+                border: var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);
+                border-radius: var(--rt-chat-messenger-panel-radius);
                 background: var(--rt-color-bg-surface);
-                box-shadow: var(--rt-shadow-sm);
+                box-shadow: var(--rt-chat-messenger-actions-shadow);
                 gap: var(--rt-space-0-5);
             }
 

package/types/rt-tools-ui-kit-v2-aside.d.ts

@@ -35,7 +35,8 @@ export type TRtAsideContentLayout = 'default' | 'tabs';
  * обводка фокуса поля срезалась краем такого мини-скроллера.
  *
  * Семантика — `role="complementary"` (mirror rt-dialog имеет `role="dialog"`,
- * aside — другая роль, side-sheet не обязательно блокирующий).
+ * aside — другая роль, side-sheet не обязательно блокирующий). Панель, которая блокирует
+ * страницу и держит фокус, включает вход `modal`: рамка объявлена `role="dialog"` с `aria-modal`.
  *
  * `ViewEncapsulation.None` — стили префиксованы `.rt-aside`, чтобы соседние
  * rt-aside-header / rt-aside-footer работали с одним BEM-блоком без
@@ -59,6 +60,8 @@ export declare class RtAsideComponent {
    * элемент под Tab, а когда панель уходит или вход гаснет, возвращается туда, где стоял.
    */
   readonly trapFocus: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Панель блокирует страницу: рамка объявлена скринридеру модальным диалогом. */
+  readonly modal: InputSignalWithTransform<boolean, BooleanInput>;
   /** Идёт запрос: панель накрыта слоем с крутилкой и помечена занятой. */
   readonly pending: InputSignalWithTransform<boolean, BooleanInput>;
   constructor();
@@ -94,6 +97,11 @@ export declare class RtAsideComponent {
       "required": false;
       "isSignal": true;
     };
+    "modal": {
+      "alias": "modal";
+      "required": false;
+      "isSignal": true;
+    };
     "pending": {
       "alias": "pending";
       "required": false;
@@ -429,9 +437,20 @@ export declare class RtAsideFooterComponent {
   #private;
   protected readonly buttons: Signal<readonly RtButtonDirective[]>;
   protected readonly hosts: Signal<readonly ElementRef<HTMLElement>[]>;
+  /**
+   * На телефоне кнопка слота `[asideDismiss]` читается «Закрыть»: так она названа у всех панелей.
+   * `false` оставляет подпись потребителя — у панели фильтров эта кнопка «Сбросить», а не выход.
+   */
+  readonly phoneCloseLabel: InputSignalWithTransform<boolean, boolean | string>;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideFooterComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {
+    "phoneCloseLabel": {
+      "alias": "phoneCloseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
 }
 /**
  * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и

package/types/rt-tools-ui-kit-v2-core.d.ts

@@ -670,6 +670,7 @@ export declare const RT_KIT_LABELS_EN: {
   readonly uiFilterStartsWith: "Starts with";
   readonly uiFilterValue: "Filter value";
   readonly uiFilters: "Filters";
+  readonly uiFiltersActive: "Filters, applied";
   readonly uiForward: "Forward";
   readonly uiHide: "Hide";
   readonly uiHideColumn: "Hide column";

package/types/rt-tools-ui-kit-v2-page-header.d.ts

@@ -215,6 +215,11 @@ export declare class RtPageHeaderComponent {
   protected readonly userAvatar: Signal<string>;
   /** Узкий вьюпорт (≤1080px): инлайн-навигация прячется, показывается гамбургер. */
   protected readonly isNarrow: Signal<boolean>;
+  /**
+   * Подложка меню профиля: на узком экране та же, что у меню разделов из бургера, на широком её
+   * нет — меню там открывается наведением. Поповер читает класс при первом открытии.
+   */
+  protected readonly userMenuBackdropClass: Signal<string>;
   /**
    * id раскрытых разделов-аккордеонов в мобильной панели. Ключ — только раздел:
    * группы внутри раскрытого раздела показаны сразу, и совпасть идентификаторам

package/types/rt-tools-ui-kit-v2-popover.d.ts

@@ -26,7 +26,8 @@ export declare namespace IRtPopover {
  * Триггеры:
  * - `click` (default) — toggle по клику на host; outside-click закрывает.
  * - `hover` — открытие на `mouseenter`, закрытие с grace-периодом на `mouseleave`
- *   (наведение на панель удерживает её открытой).
+ *   (наведение на панель удерживает её открытой). Наведение судится только мышиное:
+ *   касание и перо открывают панель нажатием.
  * - `manual` — авто-listener'ы не вешаются; host сам зовёт `open()/close()`.
  *   Используется form-control'ами с собственным жестом (autocomplete — открытие
  *   по набору текста).
@@ -80,6 +81,7 @@ export declare class RtPopoverDirective implements OnDestroy {
   close(): void;
   toggle(): void;
   protected onHostClick(): void;
+  protected onHostPointerEnter(event: PointerEvent): void;
   protected onHostMouseEnter(): void;
   protected onHostMouseLeave(event: MouseEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtPopoverDirective, never>;

package/types/rt-tools-ui-kit-v2-profile-menu.d.ts

@@ -2,6 +2,7 @@ import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
 import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
 import { IRtIcon, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+import * as i1 from "@angular/cdk/scrolling";
 /**
  * Модель `<rt-profile-menu>`: один корневой неймспейс с префиксом `I`.
  */
@@ -99,5 +100,9 @@ export declare class RtProfileMenuComponent {
     "changePassword": "changePassword";
     "localeChange": "localeChange";
     "signOut": "signOut";
-  }, never, never, true, never>;
+  }, never, never, true, [{
+    directive: typeof i1.CdkScrollable;
+    inputs: {};
+    outputs: {};
+  }]>;
 }

package/types/rt-tools-ui-kit-v2-toolbar.d.ts

@@ -1,5 +1,19 @@
 import * as i0 from "@angular/core";
-import { InputSignalWithTransform, Signal, TemplateRef } from "@angular/core";
+import { InputSignalWithTransform, OutputEmitterRef, Signal, TemplateRef } from "@angular/core";
+export declare namespace IRtToolbar {
+  /** Где нарисован слот отборов: в полосе широкого экрана или в панели узкого. */
+  type TFiltersPlace = 'bar' | 'panel';
+  /** Контекст шаблона `rtToolbarFilters`: полю в панели нужна подпись над ним, полю в полосе — нет. */
+  interface IFiltersContext {
+    $implicit: TFiltersPlace;
+  }
+  /** Данные панели отборов: шаблон слота и два нажатия подвала. */
+  interface IFiltersPanelData {
+    template: TemplateRef<IFiltersContext>;
+    reset: () => void;
+    apply: () => void;
+  }
+}
 /**
  * Маркер-директива для контента в левой секции тулбара.
  *
@@ -48,7 +62,35 @@ export declare class RtToolbarRightDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarRightDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<RtToolbarRightDirective, "[rtToolbarRight]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Маркер-директива для отборов списка. На широком экране они стоят в левой секции после её
+ * содержимого, на узком — за кнопкой фильтров, которая открывает панель отборов. Контекст шаблона
+ * — место, где он нарисован: `bar` или `panel`.
+ *
+ * @example
+ * ```html
+ * <rt-toolbar [filtersActive]="hasFilter()" (filtersReset)="reset()">
+ *     <ng-template rtToolbarFilters let-place>
+ *         <rt-select [label]="place === 'panel' ? 'Статус' : null" … />
+ *     </ng-template>
+ * </rt-toolbar>
+ * ```
+ */
+export declare class RtToolbarFiltersDirective {
+  static ngTemplateContextGuard(_directive: RtToolbarFiltersDirective, context: unknown): context is IRtToolbar.IFiltersContext;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarFiltersDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtToolbarFiltersDirective, "[rtToolbarFilters]", never, {}, {}, never, never, true, never>;
+}
 export declare class RtToolbarComponent {
+  #private;
+  protected readonly filtersLabel: Signal<string>;
+  /** Имя кнопки для скринридера: точку в углу он не видит, и включённый отбор назван словами. */
+  protected readonly filtersAriaLabel: Signal<string>;
+  protected readonly filtersTpl: Signal<TemplateRef<IRtToolbar.IFiltersContext> | undefined>;
+  /** Отборы ушли за кнопку: они объявлены, а место узкое. */
+  protected readonly collapsed: Signal<boolean>;
+  /** Отборы стоят в левой секции: они объявлены, а место широкое. */
+  protected readonly filtersInBar: Signal<boolean>;
   protected readonly leftTpl: Signal<TemplateRef<unknown> | undefined>;
   protected readonly centerTpl: Signal<TemplateRef<unknown> | undefined>;
   protected readonly rightTpl: Signal<TemplateRef<unknown> | undefined>;
@@ -58,6 +100,14 @@ export declare class RtToolbarComponent {
    * ≤768px, что для узкой шапки (напр. rt-chat) неверно.
    */
   readonly dense: InputSignalWithTransform<boolean, boolean | string>;
+  /** Включён хотя бы один отбор: кнопка фильтров узкого экрана несёт точку в углу значка. */
+  readonly filtersActive: InputSignalWithTransform<boolean, boolean | string>;
+  /** Нажата «Применить» панели отборов; панель после этого закрыта. */
+  readonly filtersApply: OutputEmitterRef<void>;
+  /** Нажата «Сбросить» панели отборов; панель остаётся открытой. */
+  readonly filtersReset: OutputEmitterRef<void>;
+  constructor();
+  protected openFilters(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<RtToolbarComponent, "rt-toolbar", never, {
     "dense": {
@@ -65,5 +115,32 @@ export declare class RtToolbarComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, ["leftTpl", "centerTpl", "rightTpl"], never, true, never>;
+    "filtersActive": {
+      "alias": "filtersActive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "filtersApply": "filtersApply";
+    "filtersReset": "filtersReset";
+  }, ["filtersTpl", "leftTpl", "centerTpl", "rightTpl"], never, true, never>;
+}
+/**
+ * Панель отборов полосы `rt-toolbar` на узком экране.
+ *
+ * Её поднимает кнопка фильтров полосы службой боковых панелей кита. В теле — слот
+ * `rtToolbarFilters` с контекстом `panel`; шапка — заголовок «Фильтры» и стрелка возврата, без
+ * надзаголовка и действий; подвал — «Сбросить» и «Применить» по краям. «Сбросить» сообщает о себе
+ * и оставляет панель открытой, «Применить» сообщает и закрывает, стрелка закрывает молча.
+ */
+export declare class RtToolbarFiltersAsideComponent {
+  #private;
+  protected readonly data: IRtToolbar.IFiltersPanelData;
+  protected readonly title: Signal<string>;
+  protected readonly resetLabel: Signal<string>;
+  protected readonly applyLabel: Signal<string>;
+  protected onReset(): void;
+  protected onApply(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtToolbarFiltersAsideComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtToolbarFiltersAsideComponent, "rt-toolbar-filters-aside", never, {}, {}, never, never, true, never>;
 }