@rt-tools/ui-kit-v2 0.10.0 → 0.12.0

package/src/lib/components/data-list/CONTEXT.md

@@ -0,0 +1,122 @@
+# `rt-data-list<ENTITY, SORT, KEY>`
+
+Список записей первого кита во втором: полоса действий сверху, [`rt-data-table`](../data-table/CONTEXT.md)
+посередине, полоса страниц снизу. Список ничего не решает сам — он собирает семейство таблицы с
+поиском, отбором, страницами и настройкой колонок и отдаёт приложению каждое нажатие. Material тут
+нет вовсе: всё, что первый кит рисовал им, рисуют части кита.
+
+```html
+<rt-data-list
+    rtDataListSelectors
+    tableConfigStorageKey="orders"
+    [entities]="rows()"
+    [pageModel]="page()"
+    [currentSortModel]="sort()"
+    [filterModel]="filters()"
+    [isFiltersShown]="true"
+    [loading]="loading()"
+    [fetching]="fetching()"
+    (searchChange)="onSearch($event)"
+    (pageModelChange)="onPage($event)"
+    (sortChange)="onSort($event)"
+    (filterChange)="onFilter($event)"
+    (refresh)="reload()">
+    <ng-template rtDataListRowActions let-row>
+        <rt-menu-item label="Открыть" icon="ico-eye" (selected)="open(row)" />
+    </ng-template>
+</rt-data-list>
+```
+
+| вход                    | тип                  | умолчание      |
+| ----------------------- | -------------------- | -------------- |
+| `tableConfigStorageKey` | `string`             | **обязателен** |
+| `entities`              | `ENTITY[]`           | **обязателен** |
+| `pageModel`             | `IPageModel`         | **обязателен** |
+| `currentSortModel`      | `ISortModel \| null` | **обязателен** |
+| `filterModel`           | `IFilterModel[]`     | `[]`           |
+| `searchTerm`            | `string \| null`     | `''`           |
+| `keyExp`                | `keyof ENTITY`       | `'id'`         |
+| `loading`               | `boolean`            | `false`        |
+| `fetching`              | `boolean`            | `false`        |
+| `isFiltersShown`        | `boolean`            | `false`        |
+| `isTableRowsClickable`  | `boolean`            | `false`        |
+| `isRefreshButtonShown`  | `boolean`            | `true`         |
+
+| выход                | тип                      |
+| -------------------- | ------------------------ |
+| `searchChange`       | `string`                 |
+| `pageModelChange`    | `Partial<IPageModel>`    |
+| `sortChange`         | `ISortModel`             |
+| `filterChange`       | `IFilterModel[]`         |
+| `refresh`            | `void`                   |
+| `clearFiltersAction` | `void`                   |
+| `rowClick`           | `{ row: ENTITY, event }` |
+| `rowDoubleClick`     | `ENTITY`                 |
+
+## Главное, что нужно знать
+
+**Своего состояния список не ведёт вовсе.** Страницу, порядок, условия отбора и набранное в поиске
+он просит у приложения и рисует то, что придёт обратно. Поэтому список ничего не «применяет»: ответ
+всегда за приложением, и оно же решает, ходить ли за ним на сервер.
+
+**Службу настроек колонок объявляет приложение,** а не список: `RtDataTableConfigService` приложение
+и создаёт, и наполняет колонками. Список её только читает и пишет в неё то, что человек сохранил в
+боковой панели настройки. Так одна и та же настройка достаётся таблице, панели и приложению.
+
+**Выбор записей ведёт директива `rtDataListSelectors`**, а рисуют его полоса действий и таблица.
+Под «отметить все» отмечаются и те страницы, которые ещё не приходили: пришедшая страница отмечается
+сама, снятая запись уходит в исключения и приходит неотмеченной каждый раз. Приложение читает и
+отмеченные записи, и исключения — действие над всеми записями оно отправляет как «все, кроме этих».
+Разведённый вид выключается входом `isMultiSelectExtendedMod`.
+
+**Две загрузки выглядят по-разному.** Первая (`loading`) заменяет список крутилкой: показывать
+нечего. Дозагрузка (`fetching`) оставляет строки на месте и кладёт крутилку поверх них с подложкой —
+человек видит, что список тот же, а не новый.
+
+**Заглушку показывают только без строк и без условий отбора.** Пустой ответ на заданное условие —
+это не пустой список, и тогда видны таблица со строкой отбора и «снять отбор» в полосе действий.
+
+**Панель настройки колонок поднимает служба боковых панелей кита.** Второе нажатие при открытой
+панели ничего не открывает: у первого кита настройку сохраняла та панель, что закрылась последней.
+
+## Части семейства
+
+| Часть                            | Что делает                                                   |
+| -------------------------------- | ------------------------------------------------------------ |
+| `rt-data-list-toolbar`           | поиск, «отметить все» или счётчик, снятие отбора, обновление |
+| `rt-data-list-settings-aside`    | боковая панель настройки колонок и полос прокрутки           |
+| `rtDataListSelectors`            | отметки по страницам, исключения, счётчик отмеченных         |
+| `rtDataListToolbarSelectors`     | селекторы приложения слева в полосе действий                 |
+| `rtDataListToolbarActions`       | действия приложения справа в полосе действий                 |
+| `rtDataListCustomCells`          | шаблоны ячеек приложения: они уезжают в таблицу              |
+| `rtDataListRowActions`           | пункты меню строки                                           |
+| `rtDataListAdditionalRowActions` | действия рядом с кнопкой меню строки                         |
+
+## Края
+
+- Вход `isPaginationShown="false"` убирает полосу страниц из разметки; включённая полоса рисуется
+  по своим правилам. В первом ките вход ничего не менял.
+- Полоса страниц исчезает сама, пока все записи помещаются на самую маленькую страницу.
+- Флажок страницы после смены строк остаётся тем, каким был на прежней странице: его пересчитывает
+  директива выбора, когда страница приходит.
+- Выбор полос прокрутки общий на всю страницу: список ставит их размер на корень страницы, и
+  сохранённый одним списком выбор достаётся каждому списку рядом — так было в первом ките. Уходя,
+  список снимает эти свойства с корня.
+- Исключения не уходят вместе с отметками: `clearSelectedList()` снимает отметки, а исключения
+  очищает отдельная просьба `clearExcludedList()`. «Отметить все», поставленное заново, начинает
+  без исключений прошлого раза.
+- Поле поиска следует за входом `searchTerm`, и непустой поиск приложения держит поле видимым и на
+  заглушке. Значение, равное последнему отправленному, поле не трогает: запоздалое эхо ответа
+  сервера или адресной строки не стирает дописанное человеком.
+- Список и таблица читают базу браузера через `IDBStorageService` из `@rt-tools/core`. Без
+  `provideRtIDBStorage()` в провайдерах приложения страница пустая, а в консоли стоит
+  `NG0201: No provider found for _IDBStorageService`.
+- Шаблон значка `rtDataTableIcon` ставится прямо внутри списка и уезжает в таблицу без обёртки.
+- Отступы вокруг тулбара и под содержимым — имена `--rt-list-toolbar-padding-top`,
+  `--rt-list-toolbar-padding-bottom`, `--rt-list-toolbar-gap` и `--rt-list-content-padding-bottom`.
+  Под материальным набором тулбар стоит в 16px от верха и в 16px от таблицы, как в первом ките;
+  нижний отступ содержимого там 0, и приложение ставит его этим именем. Отступ стоит внутри
+  прокрутки таблицы: таблица сама прокручивается, и отступ уходит вниз вместе со строками.
+- Место под заглушку пустого списка и под крутилку — имена `--rt-list-placeholder-min-height` и
+  `--rt-list-placeholder-grow`: в компактной секции приложение ставит `0`, и заглушка не тянется на
+  всю высоту.

package/src/lib/components/data-list/rt-data-list.component.scss

@@ -0,0 +1,57 @@
+@layer rt-kit.components {
+    /* rt-data-list — список записей первого кита. Полоса действий и полоса страниц стоят по краям,
+       таблица занимает остальное и прокручивается сама. Крутилка дозагрузки лежит поверх списка
+       ярусом sticky шкалы, а область таблицы замкнута в свой ярус: шапка таблицы стоит тем же
+       ярусом sticky и идёт в разметке позже, и без замыкания рисовалась бы поверх подложки. */
+
+    /* Ширина — вся колонка, как у хоста первого кита: без неё список в колонке с
+       `align-items: flex-start` сжимался до своего содержимого. */
+    .rt-data-list {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        flex-direction: column;
+
+        &__loading,
+        &__placeholder {
+            display: flex;
+            min-height: var(--rt-list-placeholder-min-height);
+            flex-grow: var(--rt-list-placeholder-grow);
+            align-items: center;
+            justify-content: center;
+        }
+
+        /* Заглушка пустого списка берёт размеры и подложку из назначений списка — их переставляет набор. */
+        &__placeholder .rt-empty-state {
+            --rt-empty-state-icon-wrap-size: var(--rt-list-empty-icon-wrap-size);
+            --rt-empty-state-icon-wrap-bg: var(--rt-list-empty-icon-wrap-bg);
+            --rt-empty-state-icon-size: var(--rt-list-empty-icon-size);
+            --rt-empty-state-title-size: var(--rt-list-empty-title-size);
+            --rt-empty-state-title-weight: var(--rt-list-empty-title-weight);
+        }
+
+        /* Крутилка дозагрузки: строки под ней остаются видны сквозь подложку. */
+        &__fetching {
+            position: absolute;
+            z-index: var(--rt-z-sticky);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: color-mix(in srgb, var(--rt-color-bg-page) 60%, transparent);
+            inset: 0;
+        }
+
+        /* Свой ярус: ярусы шапки и полосы действий таблицы считаются внутри него и над крутилкой
+           дозагрузки не поднимаются. */
+        &__content {
+            display: flex;
+            overflow: hidden;
+            min-height: 0;
+            flex-direction: column;
+            flex-grow: 1;
+            isolation: isolate;
+        }
+    }
+}

package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss

@@ -0,0 +1,256 @@
+@layer rt-kit.components {
+    /* rt-data-list-settings-aside — панель настройки колонок в виде первого кита: подпись под
+       заголовком, переключатель слева от своей подписи, колонки залитыми плашками с ручкой ✥ и
+       глазом через черты. Промежутки 8px и 16px — ступени sm и md шкалы. */
+
+    .rt-data-list-settings-aside {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-md);
+
+        &__switches {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
+
+        /* Слово рядом с переключателем: своего содержимого `rt-toggle-switch` не рисует — без
+           строки-соседа в панели стояли бы два переключателя без подписи. */
+        &__switch-row {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-md);
+        }
+
+        &__switch-label {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+        }
+
+        /* Подпись сохранения — прописными, подпись отмены — как написана: так подвал панели
+           рисует первый кит. */
+        &__save {
+            text-transform: uppercase;
+        }
+
+        &__columns {
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+            margin: 0;
+            gap: var(--rt-space-sm);
+            list-style: none;
+        }
+
+        /* Плашка колонки: залита, без рамки — так рисует список первого кита. Свои свойства она
+           объявляет на себе, а не на корне блока: тянутую плашку наложение переносит в конец
+           страницы, и с корня блока до неё ничего не дошло бы. */
+        &__column {
+            --rt-data-list-settings-aside-radius: var(--rt-radius-md);
+            --rt-data-list-settings-aside-divider-width: var(--rt-border-width-thin);
+            --rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-lg);
+            --rt-data-list-settings-aside-drag-duration: var(--rt-duration-base);
+            --rt-data-list-settings-aside-padding-start: 0;
+            --rt-data-list-settings-aside-padding-end: var(--rt-space-sm);
+            --rt-data-list-settings-aside-color: var(--rt-color-text-primary);
+
+            display: flex;
+            align-items: center;
+            border-radius: var(--rt-data-list-settings-aside-radius);
+            background-color: var(--rt-list-settings-item-bg);
+            color: var(--rt-data-list-settings-aside-color);
+            gap: var(--rt-space-sm);
+            padding-inline: var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end);
+
+            &--hidden {
+                --rt-data-list-settings-aside-color: var(--rt-color-text-muted);
+            }
+
+            /* Тянутая плашка лежит над страницей с тенью; место, откуда её взяли, пустеет, а
+               соседи съезжают плавно — как у списка первого кита. */
+            &.cdk-drag-preview {
+                box-sizing: border-box;
+                box-shadow: var(--rt-data-list-settings-aside-drag-shadow);
+            }
+
+            &.cdk-drag-placeholder {
+                opacity: 0;
+            }
+
+            &.cdk-drag-animating {
+                transition: transform var(--rt-data-list-settings-aside-drag-duration) ease-out;
+            }
+        }
+
+        &__columns.cdk-drop-list-dragging &__column:not(.cdk-drag-placeholder) {
+            transition: transform var(--rt-data-list-settings-aside-drag-duration) ease-out;
+        }
+
+        /* Ручка и черта справа от неё — одна кнопка: черта отделяет её от имени, как в первом
+           ките. Черта — рамка, а не полоса шириной в ступень рамки. */
+        &__handle {
+            display: inline-flex;
+            align-items: center;
+            align-self: stretch;
+            justify-content: center;
+            padding: 0 var(--rt-space-sm);
+            border: none;
+            border-right: var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);
+            background: transparent;
+            color: inherit;
+            cursor: grab;
+
+            &:disabled {
+                cursor: default;
+            }
+        }
+
+        &__column-label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__toggle {
+            border-left: var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);
+            padding-inline-start: var(--rt-space-sm);
+        }
+    }
+
+    /* Вид первого кита: панель открыта списком с материальным набором (класс набора стоит на
+       панели поверх страницы) или страница целиком под набором. Числа сняты с панели колонок
+       первого кита на его витрине: поля 32px, заголовок 24px, переключатели 48×24 через 32px,
+       плашки 48px, кнопки-таблетки 36px без черты над ними. Цвета переключателя даёт сам
+       материальный набор; здесь — размеры, которых у набора нет.
+
+       Свойства вложенных блоков переназначаются правилом той же цели и большей силы: каждый
+       блок объявляет свои на себе, и унаследованное значение до них не дошло бы. */
+    :is(.rt-preset-material, [data-preset='material']) .rt-data-list-settings-aside {
+        --rt-aside-inset: var(--rt-space-xl);
+        --rt-aside-content-gap: var(--rt-space-xl);
+        --rt-data-list-settings-aside-control-size: 36px;
+        --rt-data-list-settings-aside-back-icon-size: 24px;
+        --rt-data-list-settings-aside-header-height: 96px;
+
+        .rt-aside-header {
+            --rt-aside-header-title-size: var(--rt-text-2xl);
+            --rt-aside-header-title-weight: var(--rt-font-weight-semibold);
+            --rt-aside-header-subtitle-size: var(--rt-text-md);
+            --rt-aside-header-gap: var(--rt-space-md);
+            --rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height);
+        }
+
+        /* Кнопка «назад» — круглая `mat-icon-button` первого кита, как и кнопки подвала панели. */
+        .rt-aside-header__back .rt-icon-button {
+            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-color: var(--rt-list-settings-icon-color);
+            --rt-icon-button-square-radius: var(--rt-radius-full);
+        }
+
+        .rt-aside-header__back .rt-icon {
+            min-width: var(--rt-data-list-settings-aside-back-icon-size);
+            min-height: var(--rt-data-list-settings-aside-back-icon-size);
+        }
+
+        .rt-aside-footer {
+            --rt-aside-footer-border-width: 0;
+        }
+
+        .rt-aside-footer__content {
+            justify-content: flex-end;
+            gap: var(--rt-space-md);
+        }
+
+        .rt-aside-footer .rt-button {
+            --rt-btn-height: var(--rt-data-list-settings-aside-control-size);
+            --rt-btn-radius: var(--rt-radius-full);
+            --rt-btn-padding: 0 var(--rt-space-6);
+            --rt-btn-font-size: var(--rt-text-sm);
+        }
+
+        .rt-aside-footer .rt-button--text {
+            --rt-btn-padding: 0 var(--rt-space-sm);
+        }
+
+        .rt-toggle-switch {
+            --rt-toggle-track-width: 48px;
+            --rt-toggle-track-height: 24px;
+            --rt-toggle-thumb-size: 20px;
+            --rt-toggle-thumb-inset: 2px;
+            --rt-toggle-thumb-travel: 24px;
+        }
+
+        .rt-data-list-settings-aside__switches {
+            gap: var(--rt-space-xl);
+        }
+
+        .rt-data-list-settings-aside__switch-label {
+            color: var(--rt-color-text-muted);
+
+            &--on {
+                color: var(--rt-color-text-primary);
+            }
+        }
+    }
+
+    /* Плашка колонки в виде первого кита — и в панели, и тянутая: тянутая лежит в конце страницы
+       и несёт класс набора на себе, поэтому цель правила — сама плашка, а не панель вокруг. */
+    .rt-data-list-settings-aside__column:is(.rt-preset-material, .rt-preset-material *, [data-preset='material'] *) {
+        --rt-data-list-settings-aside-radius: var(--rt-list-settings-item-radius);
+        --rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-xl);
+        --rt-data-list-settings-aside-column-height: 48px;
+        --rt-data-list-settings-aside-control-size: 36px;
+        --rt-data-list-settings-aside-icon-size: 18px;
+        --rt-data-list-settings-aside-padding-start: var(--rt-space-xs);
+        --rt-data-list-settings-aside-padding-end: var(--rt-space-xs);
+        --rt-data-list-settings-aside-color: var(--rt-color-text-primary);
+
+        min-height: var(--rt-data-list-settings-aside-column-height);
+        font-size: var(--rt-text-md);
+
+        .rt-data-list-settings-aside__handle {
+            min-width: calc(var(--rt-data-list-settings-aside-control-size) + 2 * var(--rt-space-xs));
+            height: var(--rt-data-list-settings-aside-control-size);
+            align-self: center;
+            padding: 0 var(--rt-space-xs);
+            border-right-color: var(--rt-color-border-strong);
+            color: var(--rt-list-settings-icon-color);
+            margin-inline-end: var(--rt-space-xs);
+
+            .rt-icon {
+                min-width: var(--rt-data-list-settings-aside-icon-size);
+                min-height: var(--rt-data-list-settings-aside-icon-size);
+            }
+        }
+
+        .rt-data-list-settings-aside__column-label {
+            font-size: var(--rt-text-md);
+        }
+
+        .rt-data-list-settings-aside__toggle {
+            border-left: none;
+            padding-inline-start: 0;
+        }
+
+        .rt-data-list-settings-aside__toggle .rt-icon-button {
+            --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
+            --rt-icon-button-color: var(--rt-list-settings-icon-color);
+        }
+    }
+}
+
+/* rt-layer-outside: фон, цвет и поля тянутой плашки.
+
+   CDK кладёт тянутую плашку в конец страницы и в момент перетаскивания подключает свой слой
+   `cdk-resets` с `.cdk-drag-preview { background: none; color: inherit; padding: 0 }`. Слой
+   появляется на странице позже слоя кита и потому сильнее его: оставленные в слое, три свойства
+   ниже проигрывают, и плашка едет прозрачной, без полей. Размеры и тень остаются в слое — их
+   CDK не трогает. */
+.rt-data-list-settings-aside__column.cdk-drag-preview {
+    background-color: var(--rt-list-settings-item-bg);
+    color: var(--rt-data-list-settings-aside-color);
+    padding-inline: var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end);
+}

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

@@ -0,0 +1,128 @@
+@use '../../../../styles/breakpoints' as bp;
+
+@layer rt-kit.components {
+    /* rt-data-list-toolbar — панель действий списка первого кита. Промежутки 8px и 16px — ступени
+       sm и md шкалы, ширина поля поиска 240px — размер 60 шкалы. На узком экране поиск уходит на
+       свою строку: в ряд с кнопками он там не помещается. */
+
+    .rt-data-list-toolbar {
+        --rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);
+
+        display: block;
+        width: 100%;
+        margin-bottom: var(--rt-list-toolbar-gap);
+
+        // Отступы полосы берутся из имён списка: материальный набор даёт 16px сверху и 16px до таблицы.
+        .rt-toolbar {
+            --rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);
+            --rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom);
+        }
+
+        &__selectors {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-md);
+
+            .rt-checkbox {
+                --rt-checkbox-color-label: var(--rt-list-selector-label-color);
+            }
+        }
+
+        &__counter {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        &__right {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: flex-end;
+            gap: var(--rt-space-md);
+        }
+
+        // Кнопки действий — свои и приложения — берут вид из имён действий списка: материальный
+        // набор делает из них круглые кнопки действия первого кита, свой оставляет кнопками-значками.
+        // Значок растёт наименьшим размером: свой размер значок кнопки ставит в разметке.
+        &__actions {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-list-action-gap);
+
+            rt-icon-button {
+                --rt-icon-button-color: var(--rt-list-action-color);
+            }
+
+            .rt-icon-button {
+                --rt-icon-button-square-radius: var(--rt-list-action-radius);
+                --rt-icon-button-shadow: var(--rt-list-action-shadow);
+                --rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);
+                --rt-icon-button-color-hover: var(--rt-list-action-color-hover);
+                --rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover);
+            }
+
+            .rt-icon-button__icon {
+                min-width: var(--rt-list-action-icon-size);
+                min-height: var(--rt-list-action-icon-size);
+            }
+        }
+
+        /* Черта отделяет действия приложения от кнопок кита: это рамка, а не полоса шириной в
+           ступень рамки — ступени рамок размеров не задают. */
+        &__divider {
+            height: var(--rt-list-action-divider-height);
+            border-left: var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle);
+        }
+
+        // Правая часть тулбара списка занимает всё место после левой, а не ширину своего содержимого:
+        // у поиска содержимого для счёта нет (он сжимаемый), и по содержимому часть сжалась бы до
+        // кнопок. Общий тулбар кита правую часть не растягивает — это правило только списка.
+        .rt-toolbar__bar--right {
+            flex-grow: 1;
+        }
+
+        // Поиск стоит на своей ширине, пока ему хватает места, и уступает, когда не хватает:
+        // узкая колонка бывает и на широком окне, где запрос по ширине окна ниже не сработает.
+        // Своей наименьшей ширины у поиска нет: поле ввода внутри несёт собственную, и она держала
+        // правую часть тулбара на 256 px в колонке 222 px. Ширину решает место, а не содержимое.
+        // 240px — исходный размер во флексе, а не ширина: заданная ширина браузер считает наименьшим
+        // размером поля, и в колонке 322 px правая часть держала все 240 px и вылезала за край.
+        // Высоту, скругление и рамку поле поиска берёт из имён поиска списка: материальный набор
+        // делает из них поле Material первого кита, свой набор оставляет поле как есть.
+        &__search {
+            --rt-input-height-sm: var(--rt-list-search-height);
+            --rt-input-radius: var(--rt-list-search-radius);
+            --rt-input-color-border: var(--rt-list-search-color-border);
+            --rt-input-color-bg: var(--rt-list-search-color-bg);
+            --rt-input-padding-x: var(--rt-list-search-padding-x);
+            --rt-input-gap: var(--rt-list-search-gap);
+            --rt-input-font-size: var(--rt-list-search-font-size);
+            --rt-input-icon-size: var(--rt-list-search-icon-size);
+            --rt-input-icon-color: var(--rt-list-search-icon-color);
+            --rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);
+
+            min-width: 0;
+            flex: 0 1 var(--rt-list-search-width);
+            contain: inline-size;
+        }
+
+        // Залитое поле скругляется своим свойством, и объявлено оно на самом поле: имя поиска до
+        // него не доходило, и перекрашенное приложением скругление поиска залитому полю не
+        // доставалось. Под материальным набором оно берёт имя поиска — оба там 4px, так что
+        // без правки приложения вид не меняется. Свой вид кита держит у залитого поля малое
+        // скругление, отличное от скругления поиска.
+        :is(.rt-preset-material, [data-preset='material']) &__search .rt-input {
+            --rt-input-fill-radius: var(--rt-list-search-radius);
+        }
+
+        @media (width <= #{bp.$rt-bp-lg}) {
+            &__right {
+                flex-wrap: wrap;
+            }
+
+            &__search {
+                flex-basis: 100%;
+            }
+        }
+    }
+}