@rt-tools/ui-kit-v2 0.38.0 → 0.39.1

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

@@ -101,4 +101,7 @@
   [`rt-menu`](../menu/CONTEXT.md) в строке.
 - Отбор колонки объявляется полем `filter` в `columnsConfig`, и ряд отбора таблица рисует сама —
   см. раздел выше. Колонка без `filter` не отбирает вовсе. Строк таблица не сужает.
+- Отбор и сортировку считает общее ядро таблиц `@rt-tools/ui-kit-v2/table-core`, то же, что у
+  `rt-data-table`. Таблица передаёт ему свой режим: пустым считается только `''`, а третье нажатие
+  на шапку снимает порядок.
 - Спеки логики лежат рядом: сортировка и предикат действий строки проверены отдельно.

package/src/lib/components/table/copy-cell/CONTEXT.md

@@ -0,0 +1,32 @@
+# `rt-copy-cell`
+
+Значение с кнопкой копирования. Кнопка рисует `ico-copy`, после нажатия на две секунды — `check`.
+
+```html
+<rt-copy-cell [value]="row.id">{{ row.id }}</rt-copy-cell>
+<rt-copy-cell framed>https://example.com/hook</rt-copy-cell>
+```
+
+| вход            | тип                     | умолчание |
+| --------------- | ----------------------- | --------- |
+| `value`         | `string \| number`      | `null`    |
+| `variant`       | `IRtIconButton.Variant` | `'ghost'` |
+| `revealOnHover` | `boolean`               | `true`    |
+| `framed`        | `boolean`               | `false`   |
+
+## Главное, что нужно знать
+
+**В таблице кнопка появляется при наведении на строку.** Вне таблицы строки для наведения нет,
+и `revealOnHover="false"` держит кнопку видимой всегда.
+
+**`framed` ставит ячейку в рамку поля ввода.** Фон, рамка и радиус поля, значение кеглем поля,
+отступ слева как у текста поля, кнопка видна всегда и прижата к правому краю рамки. Так адрес для
+копирования стоит в форме панели подключения службы. Длинное значение в рамке переносится на
+следующую строку, а не обрезается: на телефоне адрес идёт в две строки.
+
+**Обрезанное значение показывает подсказку целиком.** Обрезка меряется в минуту наведения; в
+рамке значение не обрезается.
+
+## Рядом
+
+- [`rt-table`](../CONTEXT.md) — таблица, где ячейка живёт по умолчанию.

package/src/lib/components/table/copy-cell/rt-copy-cell.component.scss

@@ -38,6 +38,32 @@
         &--static &__button {
             opacity: 1;
         }
+
+        /* framed — ячейка в рамке поля ввода на всю ширину формы: фон, рамка и радиус поля,
+           отступ слева как у текста поля, кнопка прижата к правому краю рамки. */
+        &--framed {
+            display: flex;
+            width: 100%;
+            box-sizing: border-box;
+            padding: var(--rt-space-1) var(--rt-space-1) var(--rt-space-1) var(--rt-input-padding-x);
+            border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-input-radius);
+            background-color: var(--rt-input-color-bg);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-sm);
+            line-height: var(--rt-leading-normal);
+        }
+
+        /* В рамке значение переносится, а не обрезается: адрес в форме читают целиком, и на
+           телефоне он идёт в две строки, как в эталоне панели подключения. Без переноса строка
+           значения распирала форму шире панели. */
+        &--framed &__content {
+            flex: 1 1 auto;
+            overflow-wrap: anywhere;
+            text-overflow: clip;
+            white-space: normal;
+        }
     }
 
     /* Reveal при наведении/фокусе на всю строку rt-table — привычное поведение

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

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

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

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

package/src/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/styles/_form.scss

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

package/src/styles/_semantic.scss

@@ -398,6 +398,7 @@
     --rt-field-gap: var(--rt-space-xs);
     --rt-field-label-font-size: var(--rt-text-sm);
     --rt-field-label-font-weight: var(--rt-font-weight-medium);
+    --rt-field-label-line-height: var(--rt-leading-none);
     --rt-field-label-color: var(--rt-color-text-muted);
     --rt-field-label-help-gap: var(--rt-space-xs);
     --rt-field-hint-font-size: var(--rt-text-xs);
@@ -407,7 +408,7 @@
     --rt-field-messages-padding-top: 0px;
     --rt-field-error-color: var(--rt-color-state-danger);
     --rt-field-required-color: var(--rt-color-state-danger);
-    --rt-field-required-gap: var(--rt-space-1);
+    --rt-field-required-gap: var(--rt-space-0-5);
     --rt-field-value-font-size: var(--rt-text-sm);
     --rt-field-value-color: var(--rt-color-text-primary);
     --rt-field-value-empty-color: var(--rt-color-text-muted);

package/styles/tokens.css

@@ -808,6 +808,7 @@
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -817,7 +818,7 @@
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -1842,6 +1843,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -1851,7 +1853,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -2379,6 +2381,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -2388,7 +2391,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -3065,6 +3068,7 @@ html.rt-theme-dark {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -3074,7 +3078,7 @@ html.rt-theme-dark {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -3877,6 +3881,7 @@ html.rt-theme-dark .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -3886,7 +3891,7 @@ html.rt-theme-dark .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -4874,6 +4879,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -4883,7 +4889,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -5685,6 +5691,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -5694,7 +5701,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -6493,6 +6500,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-gap: var(--rt-space-xs);
   --rt-field-label-font-size: var(--rt-text-sm);
   --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-line-height: var(--rt-leading-none);
   --rt-field-label-color: var(--rt-color-text-muted);
   --rt-field-label-help-gap: var(--rt-space-xs);
   --rt-field-hint-font-size: var(--rt-text-xs);
@@ -6502,7 +6510,7 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-field-messages-padding-top: 0px;
   --rt-field-error-color: var(--rt-color-state-danger);
   --rt-field-required-color: var(--rt-color-state-danger);
-  --rt-field-required-gap: var(--rt-space-1);
+  --rt-field-required-gap: var(--rt-space-0-5);
   --rt-field-value-font-size: var(--rt-text-sm);
   --rt-field-value-color: var(--rt-color-text-primary);
   --rt-field-value-empty-color: var(--rt-color-text-muted);
@@ -7638,6 +7646,15 @@ html.rt-theme-dark.rt-preset-material {
   .rt-form .rt-tabs__content {
     gap: var(--rt-space-xl);
   }
+  /* Блок службы, стоящий прямо в форме, отбивается от следующего раздела шагом строк: на
+     макете панели подключения поле под чертой блока стоит на 16 при любой ширине. Источник
+     промежутка остаётся один, зазор формы, а блок снимает с него разницу между шагом разделов
+     и шагом строк. Разница есть только шире порога панели: на узком экране зазор формы и так 16. */
+  @media (width > 768px) {
+    .rt-form > .rt-service-block {
+      margin-bottom: calc(var(--rt-space-md) - var(--rt-space-xl));
+    }
+  }
   /* На узком экране панель занимает весь экран, и ритм разделов сжимается вдвое. Порог тот же,
      что у самой панели. Ритм строк не трогается: строки и на узком идут тем же шагом. */
   @media (width <= 768px) {
@@ -7665,7 +7682,9 @@ html.rt-theme-dark.rt-preset-material {
     --rt-btn-padding: 0 1.25rem;
     --rt-btn-gap: 0.5rem;
     --rt-btn-radius: var(--rt-radius-control);
-    --rt-btn-border-width: var(--rt-border-width-thin);
+    /* Рамка есть только у кнопки в рамке, как в макете кнопок: у залитой и текстовой
+       её нет, и подпись стоит на отступе от края, а не на отступе плюс рамка. */
+    --rt-btn-border-width: 0px;
     --rt-btn-transition-duration: var(--rt-duration-fast);
     --rt-btn-focus-shadow: var(--rt-shadow-focus-ring);
     --rt-btn-font-size: 0.95rem;
@@ -7818,6 +7837,7 @@ html.rt-theme-dark.rt-preset-material {
        свойствами — на графите слабый оттенок не виден, и тёмная тема их поднимает. */
   }
   .rt-button--outlined {
+    --rt-btn-border-width: var(--rt-border-width-thin);
     --rt-btn-bg: transparent;
     --rt-btn-bg-hover: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-hover), transparent);
     --rt-btn-bg-active: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-active), transparent);

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>;
 }
 /**
  * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и