@rt-tools/ui-kit-v2 0.33.0 → 0.34.1

package/src/lib/components/input-number/rt-input-number.component.scss

@@ -1,9 +1,17 @@
 @use '../../../styles/mixins' as kv;
 
 @layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset: ':is(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
     .rt-input-number {
         --rt-input-number-radius: var(--rt-input-radius);
         --rt-input-number-fill-radius: var(--rt-radius-sm);
+        --rt-input-number-color-border-hover: var(--rt-color-text-primary);
+
+        /* Толщина боковой рамки: от неё под материальным набором считается отступ текста. */
+        --rt-input-number-edge: var(--rt-input-border-width);
 
         position: relative;
         display: inline-flex;
@@ -29,6 +37,12 @@
             outline-offset: var(--rt-input-focus-outline-offset);
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. `:where` держит
+           силу правила на уровне вида, и фокус, ошибка, залитый вид и «без рамки» его перекрывают. */
+        &#{$preset-weak}:where(:hover:not(:has(:disabled))) {
+            border-color: var(--rt-input-number-color-border-hover);
+        }
+
         /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
            ниже по source-order и перекрывают её своей рамкой. */
         &--borderless {
@@ -40,6 +54,9 @@
            Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
            перекрывают его рамку. */
         &--appearance--fill {
+            --rt-input-number-edge: var(--rt-input-fill-edge);
+
+            border-width: var(--rt-input-fill-edge) var(--rt-input-fill-edge) var(--rt-input-border-width);
             border-color: transparent;
             border-radius: var(--rt-input-number-fill-radius) var(--rt-input-number-fill-radius) 0 0;
             border-bottom-color: var(--rt-color-field-fill-underline);
@@ -69,9 +86,40 @@
             }
         }
 
+        /* Фокус залитого поля: в материальном наборе — черта снизу вдвое толще, как у поля ввода. */
+        &--appearance--fill:focus-within {
+            box-shadow: var(--rt-input-fill-focus-shadow);
+        }
+
+        &--appearance--fill.rt-input-number--invalid:focus-within {
+            box-shadow: var(--rt-input-fill-focus-shadow-error);
+        }
+
+        /* Отключённое поле в материальном наборе не тускнеет, а красит рамку, текст и подсказку —
+           как поле ввода. Своим видом цвета равны обычным. */
         &--disabled {
+            color: var(--rt-input-color-text-disabled);
             cursor: not-allowed;
-            opacity: var(--rt-input-disabled-opacity);
+            opacity: var(--rt-input-disabled-field-opacity);
+        }
+
+        /* Отключённое залитое поле в наборе залито, как поле Material: on-surface 4 %. */
+        &--appearance--fill.rt-input-number--disabled {
+            background-color: var(--rt-input-fill-color-bg-disabled);
+        }
+
+        &--disabled:not(
+                .rt-input-number--invalid,
+                .rt-input-number--appearance--fill,
+                .rt-input-number--appearance--pill,
+                .rt-input-number--borderless,
+                .rt-input-number--readonly
+            ) {
+            border-color: var(--rt-input-color-border-disabled);
+        }
+
+        &--disabled &__field::placeholder {
+            color: var(--rt-input-color-placeholder-disabled);
         }
 
         &--size--sm {
@@ -82,6 +130,12 @@
             min-height: var(--rt-input-height-lg);
         }
 
+        /* Текст поля Material начинается в 16 px от внешнего края поля, рамка входит в этот отступ.
+           Своим видом кита отступ считается от рамки. Поле только для чтения ниже снимает отступ. */
+        &#{$preset-weak} {
+            padding-inline: calc(var(--rt-input-padding-x) - var(--rt-input-number-edge));
+        }
+
         /* Read-only: плоский текст вместо input — снимаем рамку/фон/паддинги. */
         &--readonly {
             padding-right: 0;
@@ -108,6 +162,9 @@
             background: transparent;
             color: inherit;
             font: inherit;
+
+            /* Межбуквенный интервал значения — ручка приложения: кит её не объявляет, без неё normal. */
+            letter-spacing: var(--rt-input-letter-spacing, normal);
             outline: none;
 
             &::placeholder {

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

@@ -92,6 +92,7 @@ Ctrl/Cmd-click, Shift-click и средняя кнопка открывают н
 - Отключённый пункт не выбирается и меню не закрывает: он выпадает из таб-порядка (`tabindex`
   снимается) и помечается `aria-disabled`.
 - Enter и Space на пункте работают как клик.
+- `Escape` закрывает только меню и не доходит до боковой панели или окна под ним.
 - Пункты для хода стрелками меню берёт из разметки панели, а не запросом компонентов: таблица
   кладёт их шаблоном приложения, и запрос содержимого меню их не видит.
 - Панель объявлена `role="menu"`, пункт — `role="menuitem"`.

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

@@ -40,7 +40,8 @@
 ## Клавиатура
 
 Как у [`rt-select`](../select/CONTEXT.md), с одним отличием: `Enter`/`Space` **переключают**
-подсвеченную опцию, оставляя список открытым.
+подсвеченную опцию, оставляя список открытым. `Escape` закрывает только список и не доходит до
+боковой панели или окна под ним.
 
 ## Дерево опций
 

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

@@ -5,6 +5,7 @@
         --rt-multiselect-radius: var(--rt-input-radius);
         --rt-multiselect-caret-transition-duration: var(--rt-duration-fast);
         --rt-multiselect-own-outline-width: var(--rt-border-width-medium);
+        --rt-multiselect-color-border-hover: var(--rt-color-text-primary);
 
         position: relative;
         display: block;
@@ -53,6 +54,12 @@
             }
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. Сила правила —
+           на уровне кнопки, поэтому фокус, открытый список, ошибка и «без рамки» его перекрывают. */
+        :where(.rt-preset-material, [data-preset='material']) &__trigger:where(:hover:not(:disabled)) {
+            border-color: var(--rt-multiselect-color-border-hover);
+        }
+
         /* Свой указатель потребителя: полевой вид кнопки снимается — ground, рамка, высота и
            отступы. Останется он — значок или метка потребителя окажутся внутри чужого поля, и
            вход теряет смысл. Поведение при этом на кнопке, снимается только вид.

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

@@ -32,6 +32,9 @@
 
 ## Края
 
+- Размер шрифта значения «на странице» — ручка `--rt-pagination-field-font-size`. Без неё значение
+  берёт размер поля `--rt-input-font-size`, под материальным набором 16px; `var(--rt-text-sm)` ровняет
+  его с номерами страниц.
 - Во время загрузки заблокированы и номера, и стрелки — иначе второй клик ушёл бы поверх ещё
   не пришедшего ответа.
 - Полоса номеров показывает первую, последнюю и по одному соседу открытой страницы; между ними —

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

@@ -118,6 +118,13 @@
             gap: var(--rt-pagination-per-page-gap);
         }
 
+        /* Размер шрифта значения «на странице» — ручка приложения: кит её не объявляет, без неё
+           значение остаётся размером поля. Не через --rt-input-font-size: свойство, читающее само
+           себя запасным, браузер считает недействительным. */
+        &__per-page .rt-select__trigger {
+            font-size: var(--rt-pagination-field-font-size, var(--rt-input-font-size));
+        }
+
         // Свой вид переносит подпись: на узком экране поле иначе уходит за край. Материальный набор
         // держит её в строку, как первый кит.
         &__per-page-label {

package/src/lib/components/progress-bar/CONTEXT.md

@@ -0,0 +1,22 @@
+# `rt-progress-bar`
+
+```html
+<rt-progress-bar ariaLabel="Обновление набора данных" color="success" [value]="percent()" />
+```
+
+| вход        | тип                                | умолчание       |
+| ----------- | ---------------------------------- | --------------- |
+| `mode`      | `'determinate' \| 'indeterminate'` | `'determinate'` |
+| `value`     | `number`                           | `0`             |
+| `color`     | `IRtProgressBar.Color`             | `'primary'`     |
+| `ariaLabel` | `string \| null`                   | `null`          |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Доля зажата в 0–100 одним местом — `clampProgress`.** Ширина заполнения и `aria-valuenow`
+берут одно и то же число и разойтись не могут.
+
+**Живая доля — просто сигнал на входе.** Заполнение идёт за ним движением ширины; полоса в
+уведомлении получает долю из потока задачи.

package/src/lib/components/progress-bar/rt-progress-bar.component.scss

@@ -0,0 +1,77 @@
+@layer rt-kit.components {
+    /* rt-progress-bar — полоса прогресса. ViewEncapsulation.None: хост — дорожка, внутри заполнение. */
+    .rt-progress-bar {
+        --rt-progress-bar-height: var(--rt-size-1);
+        --rt-progress-bar-radius: var(--rt-radius-full);
+        --rt-progress-bar-track: var(--rt-color-border-default);
+        --rt-progress-bar-fill: var(--rt-color-action-primary);
+        --rt-progress-bar-duration: var(--rt-duration-base);
+        --rt-progress-bar-sweep-duration: var(--rt-duration-slower);
+
+        position: relative;
+        display: block;
+        overflow: hidden;
+        width: 100%;
+        height: var(--rt-progress-bar-height);
+        border-radius: var(--rt-progress-bar-radius);
+        background: var(--rt-progress-bar-track);
+
+        &__fill {
+            position: absolute;
+            display: block;
+            border-radius: inherit;
+            background: var(--rt-progress-bar-fill);
+            inset-block: 0;
+            inset-inline-start: 0;
+            transition: width var(--rt-progress-bar-duration) ease-out;
+        }
+
+        /* Без доли бежит отрезок в треть дорожки: от левого края за правый, по кругу. */
+        &--indeterminate &__fill {
+            width: 35%;
+            animation: rt-progress-bar-sweep calc(var(--rt-progress-bar-sweep-duration) * 3) ease-in-out infinite;
+        }
+
+        &--color--secondary {
+            --rt-progress-bar-fill: var(--rt-color-action-secondary);
+        }
+
+        &--color--info {
+            --rt-progress-bar-fill: var(--rt-color-action-info);
+        }
+
+        &--color--success {
+            --rt-progress-bar-fill: var(--rt-color-action-success);
+        }
+
+        &--color--warning {
+            --rt-progress-bar-fill: var(--rt-color-action-warning);
+        }
+
+        &--color--danger {
+            --rt-progress-bar-fill: var(--rt-color-action-danger);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            &__fill {
+                transition: none;
+            }
+
+            /* Без движения полоса без доли стоит залитой целиком: «идёт работа» читается и так. */
+            &--indeterminate &__fill {
+                width: 100%;
+                animation: none;
+            }
+        }
+    }
+
+    @keyframes rt-progress-bar-sweep {
+        from {
+            inset-inline-start: -35%;
+        }
+
+        to {
+            inset-inline-start: 100%;
+        }
+    }
+}

package/src/lib/components/radio-button/CONTEXT.md

@@ -37,6 +37,15 @@
   Для таблицы и списков — вход `checked`.
 - Кружок без подписи получает имя через `ariaLabel`.
 
+## Группа
+
+`<rt-radio-group ariaLabel="Город" orientation="vertical">` объявляет `role="radiogroup"` вокруг
+радиокнопок. Стрелки выбирают следующую доступную радиокнопку по кругу и переводят на неё фокус.
+Tab останавливается в группе один раз: на выбранной, без выбора — на первой доступной.
+
+Радиокнопки записываются в группу сами, через её токен, поэтому радиокнопка внутри своей обёртки
+приложения тоже ходит стрелками. Порядок обхода — порядок в разметке, а не порядок записи.
+
 ## Рядом
 
 - [`rt-checkbox`](../checkbox/CONTEXT.md) — независимый выбор «да / нет».

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

@@ -0,0 +1,13 @@
+@layer rt-kit.components {
+    .rt-radio-group {
+        --rt-radio-group-gap: var(--rt-space-2);
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-radio-group-gap);
+
+        &--horizontal {
+            flex-flow: row wrap;
+        }
+    }
+}

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

@@ -15,10 +15,16 @@
 | `iconLeft`          | `IRtIcon.Name \| null`                                  | `null`            |
 | `filter`            | `boolean`                                               | `false`           |
 | `filterPlaceholder` | `string`                                                | `''` → `uiSearch` |
+| `floatingLabel`     | `string \| null`                                        | `null`            |
 
 | выход             | тип              |
 | ----------------- | ---------------- |
 | `selectionChange` | `TValue \| null` |
+| `cleared`         | `void`           |
+
+Своя разметка строки — шаблон `<ng-template rtSelectOption let-option let-selected="selected">`.
+Она встаёт на место подписи пункта и ею же поле рисует выбранное значение: цветная метка из списка
+остаётся в поле после выбора. Стрелка ветки, галочка, выбор и клавиши остаются у кита.
 
 ## Главное, что нужно знать
 
@@ -48,6 +54,12 @@
 
 ## Края
 
+- `floatingLabel` кладёт подпись на место подсказки пустого поля и поднимает её на рамку, когда
+  значение выбрано или список открыт. Рамка под поднятой подписью разрывается. Подпись вместе с
+  выбранным значением называет кнопку скринридеру, если своего `ariaLabel` нет.
+- С `clearTabbable` крестик — соседняя кнопка поверх своего места в строке, а не кнопка внутри
+  кнопки: вложенную скринридер не объявляет, а её Enter открывал бы список.
+- `Escape` в открытом списке закрывает только список и не доходит до слоя под ним.
 - Закрытие списка помечает контрол тронутым и сбрасывает строку фильтра.
 - `FormControl.disable()` **закрывает уже раскрытый** список — иначе панель висела бы над
   контролом, которым уже нельзя пользоваться.
@@ -58,6 +70,22 @@
 - Высота панели упирается в предел кита `--rt-input-panel-max-height`, длинный список
   прокручивается внутри. Вход `panelMaxHeight` ставит свой предел, `none` снимает его.
 
+**Под набором крестик не выше поля без рамки, наименьшая ширина — свойство.** Как у поля ввода:
+ступень `size` ставит `--rt-input-height`, и под материальным набором крестик и его место в строке
+считаются от неё; свой вид кита держит размер кнопки. Наименьшая ширина —
+`--rt-input-min-width`, по умолчанию её нет.
+
+**Под материальным набором текст стоит в 16 px от внешнего края, а отключённый выбор не тускнеет.**
+Рамка у отключённого выбора — `on-surface` 12 %, текст, подсказка и стрелка — 38 %. Эти правила
+лежат в четвёртом листе стилей компонента: с ними основной лист перешёл бы порог в 8 КБ.
+
+## Межбуквенный интервал
+
+Выбранное значение берёт интервал из ручки `--rt-input-letter-spacing`, общей с полем, числом и
+текстом. Кит её не объявляет: без неё значение наследует интервал от приложения, как раньше.
+
+Отключённый выбор со своим указателем (`rtSelectTrigger`) рамки не получает ни в одном наборе.
+
 ## Рядом
 
 - [`rt-multiselect`](../multiselect/CONTEXT.md) — тот же список, но с несколькими значениями.

package/src/lib/components/select/rt-select-clear.scss

@@ -0,0 +1,88 @@
+@layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset: ':is(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
+    /* Крестик — его размер и порядок обхода (`clearTabbable`) — отдельный лист стилей компонента:
+       основной лист стоит у порога в 8 КБ, который Angular по умолчанию ставит приложению. Крестик
+       не выше поля без рамки. Крестик в порядке обхода — соседняя
+       кнопка поверх своего места в строке указателя: место держит пустая ячейка той же ширины, и
+       подпись выбора не заходит под крестик. */
+    .rt-select {
+        --rt-select-chevron-width: var(--rt-size-4);
+
+        /* Ступень размера — высота поля целиком: по ней считаются и крестик, и его место. */
+        &--size--sm {
+            --rt-input-height: var(--rt-input-height-sm);
+        }
+
+        &--size--lg {
+            --rt-input-height: var(--rt-input-height-lg);
+        }
+
+        /* Размер, значок и цвет крестика — свойства поля ввода: набор оформления даёт крестику
+           выбора тот же вид первого кита. */
+        &__clear {
+            --rt-icon-color-muted: var(--rt-input-clear-color);
+            --rt-icon-step-sm: var(--rt-input-clear-icon-size);
+        }
+
+        /* Под набором крестик не выше поля без рамки — как у поля ввода. Свой вид кита держит
+           прежний размер кнопки: малое поле с крестиком в нём 34 px, как до набора. Свой размер
+           приложение задаёт свойством `--rt-input-clear-size`. */
+        &#{$preset-weak} &__clear .rt-icon-button {
+            width: min(var(--rt-input-clear-size), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)));
+            height: min(var(--rt-input-clear-size), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)));
+        }
+
+        & &__clear .rt-icon-button {
+            --rt-icon-button-radius: var(--rt-input-clear-radius);
+            --rt-icon-button-bg-variant: var(--rt-input-clear-bg);
+            --rt-icon-button-color-bg-hover: var(--rt-input-clear-bg-hover);
+        }
+
+        &__clear-slot {
+            width: var(--rt-input-clear-size);
+            height: var(--rt-input-clear-size);
+            flex-shrink: 0;
+        }
+
+        &#{$preset-weak} &__clear-slot {
+            width: min(var(--rt-input-clear-size), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)));
+            height: min(var(--rt-input-clear-size), calc(var(--rt-input-height) - 2 * var(--rt-input-border-width)));
+        }
+
+        &__clear--outside {
+            position: absolute;
+            top: 50%;
+            right: calc(var(--rt-select-text-inset) + var(--rt-select-chevron-width) + var(--rt-space-sm));
+            transform: translateY(-50%);
+        }
+
+        &--readonly &__clear--outside {
+            display: none;
+        }
+
+        /* Под материальным набором стрелка — залитый треугольник mat-select первого кита, 10 на 5 px.
+           Открытое поле переворачивает его, как mat-select, правилом `--open` основного листа. Свой вид кита
+           остаётся с шевроном. Размер значок ставит себе встроенным стилем, поэтому треугольник задан
+           пределами, а не шириной. */
+        &#{$preset} &__chevron {
+            --rt-icon-color-muted: var(--rt-input-icon-color);
+
+            max-width: 10px;
+            max-height: 5px;
+            background-color: currentcolor;
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
+
+            svg {
+                display: none;
+            }
+        }
+
+        /* Под материальным набором стрелка — треугольник шириной 10 px, а не значок. */
+        &#{$preset} {
+            --rt-select-chevron-width: 10px;
+        }
+    }
+}

package/src/lib/components/select/rt-select-floating-label.scss

@@ -0,0 +1,155 @@
+@layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset: ':is(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
+    /* Подпись на рамке и разрыв рамки под ней — отдельный лист стилей компонента. Одним листом с
+       остальными правилами он перешёл бы порог в 8 КБ на лист, который Angular по умолчанию ставит
+       приложению, и сборка потребителя упала бы. Лист подключается вторым, после основного. */
+    .rt-select {
+        /* Подпись на рамке — как у поля ввода. Лежит поверх кнопки и в поток не входит, поэтому
+           высота поля от неё не меняется. Пока ничего не выбрано и список закрыт, стоит на месте
+           подсказки; при выбранном значении или открытом списке поднимается на верхнюю рамку. Клик
+           проходит сквозь подпись в кнопку. */
+        &--with-icon-left {
+            --rt-select-floating-label-rest-start: calc(
+                var(--rt-select-floating-label-start) + var(--rt-input-icon-size) + var(--rt-space-sm)
+            );
+        }
+
+        /* Обведённое поле материального набора прозрачное, и подпись на рамке подложки не имеет:
+           рамка под ней разорвана, как у поля Material. `:where` держит силу правила на уровне вида,
+           и залитый вид ниже его перекрывает. */
+        &#{$preset-weak} {
+            --rt-select-floating-label-bg: transparent;
+
+            /* Подпись на рамке начинается за скруглением угла: на изгибе верхней рамки нет, и
+               подпись легла бы на него без просвета слева. Скругление «таблетки» больше поля —
+               берётся половина высоты. */
+            --rt-select-floating-label-raised-start: max(
+                var(--rt-select-floating-label-start),
+                calc(min(var(--rt-select-radius), var(--rt-input-height) / 2) + var(--rt-space-2))
+            );
+        }
+
+        /* У залитого поля скругление малое, и подпись встаёт у начала поля, как прежде. */
+        &--appearance--fill {
+            --rt-select-floating-label-bg: var(--rt-color-bg-surface-subtle-2);
+            --rt-select-floating-label-raised-start: var(--rt-select-floating-label-start);
+        }
+
+        /* Подпись на рамке рисует только материальный набор: свой вид кита держит поле прежним — с
+           подсказкой и без подписи. Имя контролу подпись даёт в обоих видах. */
+        &__floating-label {
+            position: absolute;
+            top: 50%;
+            left: var(--rt-select-floating-label-rest-start);
+            display: none;
+            overflow: hidden;
+            max-width: calc(100% - var(--rt-select-floating-label-rest-start) - var(--rt-input-padding-x));
+            color: var(--rt-select-floating-label-color);
+            font-size: var(--rt-input-font-size);
+            line-height: var(--rt-input-line-height);
+            pointer-events: none;
+            text-overflow: ellipsis;
+            transform: translateY(-50%);
+            transition:
+                top var(--rt-select-floating-label-duration) ease,
+                left var(--rt-select-floating-label-duration) ease,
+                font-size var(--rt-select-floating-label-duration) ease,
+                color var(--rt-select-floating-label-duration) ease;
+            white-space: nowrap;
+        }
+
+        &#{$preset} &__floating-label {
+            display: block;
+        }
+
+        /* Пока подпись лежит на месте подсказки, подсказка не рисуется: они легли бы друг на друга. */
+        &--floating#{$preset}:not(.rt-select--filled, .rt-select--open) &__label--placeholder {
+            color: transparent;
+        }
+
+        &--filled &__floating-label,
+        &--open &__floating-label {
+            top: 0;
+            left: var(--rt-select-floating-label-raised-start);
+            max-width: calc(100% - var(--rt-select-floating-label-raised-start) - var(--rt-select-floating-label-start));
+            padding: 0 var(--rt-space-1);
+            margin-left: calc(-1 * var(--rt-space-1));
+            background-color: var(--rt-select-floating-label-bg);
+            font-size: var(--rt-select-floating-label-font-size);
+            line-height: 1;
+        }
+
+        &--open &__floating-label {
+            color: var(--rt-select-floating-label-color-focus);
+        }
+
+        &--invalid &__floating-label {
+            color: var(--rt-select-floating-label-color-error);
+        }
+
+        /* Залитое поле материального набора — как поле Material: оно выше, и поднятая подпись
+           уменьшается и встаёт внутрь поля над значением, а не на рамку. Пустое поле держит подпись
+           на месте подсказки размером со значение. Свой вид кита не меняется. */
+        &--floating#{$preset}.rt-select--appearance--fill {
+            --rt-input-height: var(--rt-select-fill-floating-height);
+        }
+
+        /* Подпись в покое — строкой Material, значение — ниже середины, под поднятой подписью:
+           при 52 px текст начинается в 22 px от верха строкой в 24 px. */
+        &--floating#{$preset}.rt-select--appearance--fill .rt-select__floating-label {
+            line-height: var(--rt-leading-tight);
+        }
+
+        &--floating#{$preset}.rt-select--appearance--fill .rt-select__label {
+            align-self: stretch;
+            padding-top: calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-fill-edge));
+            padding-bottom: calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));
+            line-height: var(--rt-leading-normal);
+        }
+
+        &--floating#{$preset}.rt-select--appearance--fill.rt-select--filled .rt-select__floating-label,
+        &--floating#{$preset}.rt-select--appearance--fill.rt-select--open .rt-select__floating-label {
+            top: calc(var(--rt-input-height) / 2 - var(--rt-space-5));
+            left: var(--rt-select-floating-label-rest-start);
+            padding: 0;
+            margin-left: 0;
+            background-color: transparent;
+            transform: none;
+        }
+
+        /* Разрыв рамки под поднятой подписью в материальном наборе. Подпись лежит рядом с кнопкой,
+           а не в ней, поэтому разрыв режется прямо в рамке кнопки. У залитого вида рамки сверху нет. */
+        &--floating#{$preset}:not(.rt-select--appearance--fill) {
+            &.rt-select--filled .rt-select__trigger,
+            &.rt-select--open .rt-select__trigger {
+                clip-path: polygon(
+                    0 0,
+                    var(--rt-select-notch-start) 0,
+                    var(--rt-select-notch-start) var(--rt-select-notch-depth),
+                    calc(var(--rt-select-notch-start) + var(--rt-select-notch-width)) var(--rt-select-notch-depth),
+                    calc(var(--rt-select-notch-start) + var(--rt-select-notch-width)) 0,
+                    100% 0,
+                    100% 100%,
+                    0 100%
+                );
+            }
+        }
+
+        /* Фокус залитого поля: в материальном наборе — черта снизу вдвое толще, а не кольцо по
+           периметру. Своим видом кита назначения равны общим, и фокус не меняется. */
+        &--appearance--fill &__trigger:not(.rt-select__trigger--own):focus {
+            box-shadow: var(--rt-input-fill-focus-shadow);
+        }
+
+        &--appearance--fill.rt-select--invalid &__trigger:not(.rt-select__trigger--own):focus {
+            box-shadow: var(--rt-input-fill-focus-shadow-error);
+        }
+
+        &--readonly &__floating-label {
+            display: none;
+        }
+    }
+}