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

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

@@ -9,17 +9,27 @@
 ```
 
 Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md)
-(`size`, `disabled`, `controlId`, `ariaLabel`, `clearable`, `bordered`):
+(`size`, `disabled`, `controlId`, `ariaLabel`, `clearable`, `clearTabbable`, `bordered`):
 
-| вход                     | тип                                                  | умолчание |
-| ------------------------ | ---------------------------------------------------- | --------- |
-| `type`                   | `'text' \| 'password' \| 'email' \| 'time' \| 'url'` | `'text'`  |
-| `placeholder`            | `string`                                             | `''`      |
-| `iconLeft` / `iconRight` | `IRtIcon.Name \| null`                               | `null`    |
-| `passwordToggle`         | `boolean`                                            | `false`   |
-| `autocomplete`           | `string \| null`                                     | `null`    |
+| вход                                   | тип                                                  | умолчание |
+| -------------------------------------- | ---------------------------------------------------- | --------- |
+| `type`                                 | `'text' \| 'password' \| 'email' \| 'time' \| 'url'` | `'text'`  |
+| `placeholder`                          | `string`                                             | `''`      |
+| `iconLeft` / `iconRight`               | `IRtIcon.Name \| null`                               | `null`    |
+| `iconLeftAction` / `iconRightAction`   | `boolean`                                            | `false`   |
+| `iconLeftTooltip` / `iconRightTooltip` | `string \| null`                                     | `null`    |
+| `floatingLabel`                        | `string \| null`                                     | `null`    |
+| `passwordToggle`                       | `boolean`                                            | `false`   |
+| `autocomplete`                         | `string \| null`                                     | `null`    |
+| `maxlength`                            | `number \| null`                                     | `null`    |
 
-Значение — `string`.
+| выход                              | тип          |
+| ---------------------------------- | ------------ |
+| `iconLeftClick` / `iconRightClick` | `MouseEvent` |
+| `cleared`                          | `void`       |
+
+Значение — `string`. `maxlength` уходит атрибутом на поле: браузер не даёт набрать больше, а
+значение из кода не режет, поэтому проверка формы остаётся за приложением.
 
 ## Главное, что нужно знать
 
@@ -27,8 +37,19 @@
 переключателем крестика не будет: показать оба некуда.
 
 Крестик показывается при выполнении трёх условий сразу: `clearable` (по умолчанию включён),
-в поле есть значение, поле не отключено. Из таб-порядка он исключён (`tabindex="-1"`) — до
-вспомогательного аффорданса не должны доходить табом.
+в поле есть значение, поле не отключено. Из порядка Tab он исключён, пока поле не попросит
+`clearTabbable`. После сброса приходит `cleared` — когда пустое значение уже ушло в форму.
+
+Размер, цвет, подложку и отступы крестика задают свойства `--rt-input-clear-*`. В своём виде кита
+крестик без подложки; под материальным набором это крестик первого кита: кнопка 19 px на круглой
+серой подложке, значок 12 px, 8 px от края. Поле с `clearable` несёт класс `rt-input--clearable`.
+
+**Иконка с `iconLeftAction` или `iconRightAction` становится кнопкой.** Она берёт фокус с
+клавиатуры, нажимается мышью, Enter и пробелом и показывает подсказку из `iconLeftTooltip`. Без
+входа иконка остаётся картинкой.
+
+**`floatingLabel` — подпись на рамке.** Пустое поле в покое показывает подпись на месте подсказки,
+значение или фокус поднимают её на рамку, и рамка под ней разрывается. Высота поля не меняется.
 
 ## Как этим пользоваться
 
@@ -42,6 +63,19 @@
   компонента: `[readonly]` стоит на поле-обёртке. Пустое значение в этом режиме рисуется прочерком.
 - Подсветка ошибки (`rt-input--invalid`) включается сама после касания — см. основу полей.
 
+**Кнопка-значок отключается своим входом.** `iconLeftDisabled` и `iconRightDisabled` отключают
+только кнопку, поле остаётся доступным; подсказка кнопки остаётся и объясняет почему.
+
+**Под материальным набором кнопка-значок не выше поля без рамки.** Ширину и высоту внутренней
+кнопки поле под набором ограничивает `min()` от размера кнопки и своей высоты: низкое поле плотности
+или своей высоты приложения не растёт до высоты кнопки. Свой вид кита держит размер кнопки, и малое
+поле с крестиком в нём 34 px, как до набора.
+
+## Межбуквенный интервал
+
+Значение берёт интервал из ручки `--rt-input-letter-spacing`, общей для поля, числа, выбора и
+текста. Кит её не объявляет: без неё интервал `normal`.
+
 ## Рядом
 
 - [`rt-field`](../field/CONTEXT.md) — подпись, звёздочка, текст ошибки, режим чтения.

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

@@ -0,0 +1,192 @@
+@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-input {
+        /* Подпись на рамке. Лежит поверх поля и в поток не входит — высота поля от неё не меняется.
+           В покое стоит на месте подсказки (за левой иконкой, если она есть), при значении или
+           фокусе поднимается на верхнюю рамку и разрывает её своей подложкой. Клик проходит
+           сквозь подпись: поле фокусирует обработчик mousedown хоста. */
+        &--with-icon-left {
+            --rt-input-floating-label-rest-start: calc(
+                var(--rt-input-floating-label-start) + var(--rt-input-icon-size) + var(--rt-input-gap)
+            );
+        }
+
+        /* Обведённое поле материального набора прозрачное, и подпись на рамке подложки не имеет:
+           рамка под ней разорвана, как у поля Material. `:where` держит силу правила на уровне вида,
+           и залитый вид ниже его перекрывает. */
+        &#{$preset-weak} {
+            --rt-input-floating-label-bg: transparent;
+
+            /* Подпись на рамке начинается за скруглением угла: на изгибе верхней рамки нет, и
+               подпись легла бы на него без просвета слева. Скругление «таблетки» больше поля —
+               берётся половина высоты. */
+            --rt-input-floating-label-raised-start: max(
+                var(--rt-input-floating-label-start),
+                calc(min(var(--rt-input-box-radius), var(--rt-input-height) / 2) + var(--rt-space-2))
+            );
+        }
+
+        /* Значок слева в наборе стоит в 12 px от края поля и в 4 px от текста — подпись в покое
+           встаёт туда же, где начинается текст. Кнопка-значок стоит на месте значка. */
+        &--with-icon-left#{$preset-weak}:has(> .rt-input__icon-left) {
+            --rt-input-floating-label-rest-start: calc(
+                var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge) + var(--rt-input-icon-size) + var(--rt-space-1)
+            );
+        }
+
+        &--appearance--fill,
+        &--appearance--pill {
+            --rt-input-floating-label-bg: var(--rt-color-bg-surface-subtle-2);
+        }
+
+        /* У залитого поля скругление малое, и подпись встаёт у начала поля, как прежде. */
+        &--appearance--fill {
+            --rt-input-floating-label-raised-start: var(--rt-input-floating-label-start);
+        }
+
+        /* Подпись на рамке рисует только материальный набор: свой вид кита держит поле прежним — с
+           подсказкой и без подписи. Имя контролу подпись даёт в обоих видах. */
+        &__floating-label {
+            position: absolute;
+            top: 50%;
+            left: var(--rt-input-floating-label-rest-start);
+            display: none;
+            overflow: hidden;
+            max-width: calc(100% - var(--rt-input-floating-label-rest-start) - var(--rt-input-padding-x));
+            color: var(--rt-input-floating-label-color);
+            pointer-events: none;
+            text-overflow: ellipsis;
+            transform: translateY(-50%);
+            transform-origin: left center;
+            transition:
+                top var(--rt-input-floating-label-duration) ease,
+                left var(--rt-input-floating-label-duration) ease,
+                font-size var(--rt-input-floating-label-duration) ease,
+                color var(--rt-input-floating-label-duration) ease;
+            white-space: nowrap;
+        }
+
+        &#{$preset} &__floating-label {
+            display: block;
+        }
+
+        /* Пока подпись лежит на месте подсказки, подсказка не рисуется: они легли бы друг на друга. */
+        &--floating#{$preset}:not(.rt-input--filled, :focus-within) &__field::placeholder {
+            color: transparent;
+        }
+
+        &--filled &__floating-label,
+        &:focus-within &__floating-label {
+            top: 0;
+            left: var(--rt-input-floating-label-raised-start);
+            max-width: calc(100% - var(--rt-input-floating-label-raised-start) - var(--rt-input-floating-label-start));
+            padding: 0 var(--rt-space-1);
+            margin-left: calc(-1 * var(--rt-space-1));
+            background-color: var(--rt-input-floating-label-bg);
+            font-size: var(--rt-input-floating-label-font-size);
+            line-height: 1;
+        }
+
+        &:focus-within &__floating-label {
+            color: var(--rt-input-floating-label-color-focus);
+        }
+
+        &--invalid &__floating-label {
+            color: var(--rt-input-floating-label-color-error);
+        }
+
+        /* Залитое поле материального набора — как поле Material: оно выше, и поднятая подпись
+           уменьшается и встаёт внутрь поля над значением, а не на рамку. Пустое поле держит подпись
+           на месте подсказки размером со значение. Свой вид кита не меняется. */
+        &--floating#{$preset}.rt-input--appearance--fill,
+        &--floating#{$preset}.rt-input--appearance--pill {
+            --rt-input-height: var(--rt-input-fill-floating-height);
+        }
+
+        /* Подпись в покое — строкой Material, значение — ниже середины, под поднятой подписью:
+           при 52 px текст начинается в 22 px от верха строкой в 24 px. */
+        &--floating#{$preset}.rt-input--appearance--fill .rt-input__floating-label,
+        &--floating#{$preset}.rt-input--appearance--pill .rt-input__floating-label {
+            line-height: var(--rt-leading-tight);
+        }
+
+        &--floating#{$preset}.rt-input--appearance--fill .rt-input__field,
+        &--floating#{$preset}.rt-input--appearance--pill .rt-input__field {
+            align-self: stretch;
+            padding: calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-edge)) 0
+                calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-border-width));
+            line-height: var(--rt-leading-normal);
+        }
+
+        &--floating#{$preset}.rt-input--appearance--fill.rt-input--filled .rt-input__floating-label,
+        &--floating#{$preset}.rt-input--appearance--fill:focus-within .rt-input__floating-label,
+        &--floating#{$preset}.rt-input--appearance--pill.rt-input--filled .rt-input__floating-label,
+        &--floating#{$preset}.rt-input--appearance--pill:focus-within .rt-input__floating-label {
+            top: calc(var(--rt-input-height) / 2 - var(--rt-space-5) - var(--rt-input-edge));
+            left: var(--rt-input-floating-label-rest-start);
+            padding: 0;
+            margin-left: 0;
+            background-color: transparent;
+            transform: none;
+        }
+
+        /* Разрыв рамки под подписью в материальном наборе. Рамку поля рисует слой поверх него, и
+           разрыв режется в этом слое: вырезать рамку самого поля нельзя — подпись лежит внутри
+           него и обрезалась бы вместе с рамкой. Залитый вид, «таблетка» и чтение рамки на
+           верху не имеют. */
+        &--floating#{$preset}:not(.rt-input--appearance--fill, .rt-input--appearance--pill, .rt-input--readonly) {
+            border-color: transparent;
+            box-shadow: none;
+
+            &:before {
+                position: absolute;
+                border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+                border-radius: inherit;
+                content: '';
+                inset: calc(-1 * var(--rt-input-border-width));
+                pointer-events: none;
+            }
+
+            &:where(:hover:not(:has(:disabled))):before {
+                border-color: var(--rt-input-color-border-hover);
+            }
+
+            &:focus-within:before {
+                border-color: var(--rt-input-color-border-focus);
+                box-shadow: var(--rt-input-focus-shadow);
+            }
+
+            &.rt-input--invalid:before {
+                border-color: var(--rt-input-color-border-error);
+            }
+
+            &.rt-input--invalid:focus-within:before {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
+
+            &.rt-input--borderless:not(:focus-within, .rt-input--invalid):before {
+                border-color: transparent;
+            }
+
+            &.rt-input--filled:before,
+            &:focus-within:before {
+                clip-path: polygon(
+                    0 0,
+                    var(--rt-input-notch-start) 0,
+                    var(--rt-input-notch-start) var(--rt-input-notch-depth),
+                    calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) var(--rt-input-notch-depth),
+                    calc(var(--rt-input-notch-start) + var(--rt-input-notch-width)) 0,
+                    100% 0,
+                    100% 100%,
+                    0 100%
+                );
+            }
+        }
+    }
+}

package/src/lib/components/input/rt-input-icons.scss

@@ -0,0 +1,105 @@
+@layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
+    /* Значки, кнопки-значки и крестик очистки — отдельный лист стилей компонента: одним листом с
+       остальными правилами он перешёл бы порог в 8 КБ на лист, который Angular по умолчанию ставит
+       приложению. Лист подключается после основного. */
+    .rt-input {
+        /* Под набором кнопка-значок в поле не выше поля без рамки: иначе низкое поле плотности или
+           своей высоты приложения вырастает до высоты кнопки. Свой вид кита держит прежний размер
+           кнопки: малое поле с кнопкой в нём 34 px, как до набора. Свой размер кнопки приложения
+           остаётся в силе, пока помещается. */
+        &#{$preset-weak} &__icon-left .rt-icon-button,
+        &#{$preset-weak} &__icon-right .rt-icon-button {
+            width: min(
+                var(--rt-icon-button-size, var(--rt-icon-button-size-step)),
+                calc(var(--rt-input-height) - 2 * var(--rt-input-border-width))
+            );
+            height: min(
+                var(--rt-icon-button-size, var(--rt-icon-button-size-step)),
+                calc(var(--rt-input-height) - 2 * var(--rt-input-border-width))
+            );
+        }
+
+        /* Размер и цвет значка приходят от самого значка встроенным стилем и правилом не перебиваются.
+           Нижняя граница размер расширяет, а приглушённый тон значок берёт из свойства, которое читает
+           его встроенный стиль: так набор оформления даёт значку поля вид первого кита, не трогая входов
+           значка. По умолчанию оба равны нынешним, и вид не меняется. */
+        &__icon-left,
+        &__icon-right {
+            --rt-icon-color-muted: var(--rt-input-icon-color);
+            --rt-icon-step-sm: var(--rt-input-icon-size);
+
+            min-width: var(--rt-input-icon-size);
+            min-height: var(--rt-input-icon-size);
+        }
+
+        /* Крестик очистки берёт размер, значок и цвет из своих свойств поля тем же путём. Набор
+           оформления даёт ему вид крестика первого кита: 19 px, значок 12 px, в 8 px от края поля.
+           Свой вид кита держит прежние 32 px. */
+        &__clear {
+            --rt-icon-color-muted: var(--rt-input-clear-color);
+            --rt-icon-step-sm: var(--rt-input-clear-icon-size);
+
+            margin-inline-start: var(--rt-input-clear-offset-start);
+        }
+
+        /* Поле с крестиком очистки в наборе — как поле Material с крестиком: справа от текста 4 px, и у
+           пустого поля текст идёт до них, а не до 16 px. Поле со значком справа и поле только для
+           чтения держат свой отступ. */
+        &--clearable#{$preset-weak}:not(.rt-input--with-icon-right, .rt-input--readonly) {
+            padding-right: calc(var(--rt-space-1) - var(--rt-input-edge));
+        }
+
+        &#{$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:last-child {
+            margin-inline-end: var(--rt-input-clear-offset-end);
+        }
+
+        /* Значок в материальном наборе стоит, как у поля Material: 12 px от края поля и 4 px до
+           текста, текст после значка слева — с 40 px. Кнопка-значок стоит так же: её значок — на
+           месте простого значка, а сама кнопка шире значка и выходит за него поровну в обе стороны. */
+        &--with-icon-left#{$preset-weak}:has(> .rt-input__icon-left) {
+            padding-left: calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge));
+
+            > .rt-input__icon-left {
+                margin-right: calc(var(--rt-space-1) - var(--rt-input-gap));
+            }
+        }
+
+        &--with-icon-right#{$preset-weak}:has(> .rt-input__icon-right) {
+            padding-right: calc(var(--rt-space-2) + var(--rt-space-1) - var(--rt-input-edge));
+
+            > .rt-input__icon-right {
+                margin-left: calc(var(--rt-space-1) - var(--rt-input-gap));
+            }
+        }
+
+        /* Свес кнопки-значка за её значок — по половине разницы с каждой стороны: на него кнопка
+           сдвигается наружу, и значок встаёт на место простого значка. */
+        &#{$preset-weak} > &__icon-left .rt-icon-button,
+        &#{$preset-weak} > &__icon-right .rt-icon-button {
+            --rt-input-icon-button-width: min(
+                var(--rt-icon-button-size, var(--rt-icon-button-size-step)),
+                calc(var(--rt-input-height) - 2 * var(--rt-input-border-width))
+            );
+            --rt-input-icon-overhang: calc((var(--rt-input-icon-button-width) - var(--rt-input-icon-size)) / 2);
+
+            margin-inline: calc(-1 * var(--rt-input-icon-overhang));
+        }
+    }
+}

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

@@ -1,14 +1,43 @@
 @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 {
         --rt-input-box-radius: var(--rt-input-radius);
         --rt-input-fill-radius: var(--rt-radius-sm);
         --rt-input-toggle-radius: var(--rt-radius-sm);
+        --rt-input-floating-label-color: var(--rt-input-color-text-placeholder);
+        --rt-input-floating-label-color-focus: var(--rt-input-color-border-focus);
+        --rt-input-floating-label-color-error: var(--rt-input-color-border-error);
+        --rt-input-floating-label-bg: var(--rt-input-color-bg);
+        --rt-input-floating-label-font-size: var(--rt-text-xs);
+        --rt-input-floating-label-start: var(--rt-input-padding-x);
+        --rt-input-floating-label-rest-start: var(--rt-input-floating-label-start);
+        --rt-input-floating-label-raised-start: var(--rt-input-floating-label-start);
+
+        /* Разрыв рамки под подписью: его начало в слое рамки, глубина — толщина рамки фокуса.
+           Ширину подписи ставит компонент замером; до замера разрыва нет. */
+        --rt-input-notch-start: calc(var(--rt-input-floating-label-raised-start) - var(--rt-space-1) + var(--rt-input-border-width));
+        --rt-input-notch-depth: calc(2 * var(--rt-input-border-width));
+        --rt-input-notch-width: 0px;
+
+        /* Высота залитого поля Material с подписью: подпись лежит внутри поля над значением. Она
+           равна средней высоте поля — под набором это высота Material при выбранной плотности. */
+        --rt-input-fill-floating-height: var(--rt-input-height-md);
+        --rt-input-color-border-hover: var(--rt-color-text-primary);
+        --rt-input-floating-label-duration: var(--rt-duration-fast);
+
+        /* Боковая рамка поля: от неё отсчитываются значок слева и подпись. У залитого поля
+           материального набора боковой рамки нет. */
+        --rt-input-edge: var(--rt-input-border-width);
 
         position: relative;
         display: inline-flex;
         width: 100%;
+        min-width: var(--rt-input-min-width);
         min-height: var(--rt-input-height);
         box-sizing: border-box;
         align-items: center;
@@ -30,6 +59,13 @@
             outline-offset: var(--rt-input-focus-outline-offset);
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. `:where` держит
+           силу правила на уровне вида, и фокус, ошибка, залитый вид и «без рамки» его перекрывают;
+           отключённое поле наведения не показывает. */
+        &#{$preset-weak}:where(:hover:not(:has(:disabled))) {
+            border-color: var(--rt-input-color-border-hover);
+        }
+
         /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
            ниже по source-order и перекрывают её своей рамкой. */
         &--borderless {
@@ -41,6 +77,9 @@
            Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
            перекрывают его рамку. */
         &--appearance--fill {
+            --rt-input-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-fill-radius) var(--rt-input-fill-radius) 0 0;
             border-bottom-color: var(--rt-color-field-fill-underline);
@@ -72,19 +111,66 @@
             }
         }
 
+        /* Фокус залитого поля: в материальном наборе — черта снизу вдвое толще, а не кольцо по
+           периметру. Своим видом кита назначения равны общим, и фокус не меняется. */
+        &--appearance--fill:focus-within {
+            box-shadow: var(--rt-input-fill-focus-shadow);
+        }
+
+        &--appearance--fill.rt-input--invalid:focus-within {
+            box-shadow: var(--rt-input-fill-focus-shadow-error);
+        }
+
+        /* Отключённое поле своим видом кита тускнеет целиком; материальный набор вместо этого красит
+           рамку, текст и подсказку, как поле Material. Своим видом цвета равны обычным. Рамку
+           недействительного, залитого, безрамочного поля и поля только для чтения правило не трогает. */
         &--disabled {
+            color: var(--rt-input-color-text-disabled);
             cursor: not-allowed;
-            opacity: var(--rt-input-disabled-opacity);
+            opacity: var(--rt-input-disabled-field-opacity);
+        }
+
+        &--disabled:not(
+                .rt-input--invalid,
+                .rt-input--appearance--fill,
+                .rt-input--appearance--pill,
+                .rt-input--borderless,
+                .rt-input--readonly
+            ) {
+            border-color: var(--rt-input-color-border-disabled);
+        }
+
+        /* Отключённое залитое поле в наборе залито, как поле Material: on-surface 4 %. Своим видом
+           заливка прежняя. */
+        &--appearance--fill.rt-input--disabled {
+            background-color: var(--rt-input-fill-color-bg-disabled);
         }
 
+        &--disabled &__field::placeholder {
+            color: var(--rt-input-color-placeholder-disabled);
+        }
+
+        /* Ступень размера — высота поля целиком: по ней считаются и кнопки-значки внутри. */
         &--size--sm {
+            --rt-input-height: var(--rt-input-height-sm);
+
             min-height: var(--rt-input-height-sm);
         }
 
         &--size--lg {
+            --rt-input-height: var(--rt-input-height-lg);
+
             min-height: var(--rt-input-height-lg);
         }
 
+        /* Текст поля Material начинается в 16 px от внешнего края поля, рамка входит в этот отступ.
+           Своим видом кита отступ считается от рамки. Поле только для чтения ниже снимает отступ. */
+        &#{$preset-weak} {
+            --rt-input-floating-label-start: calc(var(--rt-input-padding-x) - var(--rt-input-edge));
+
+            padding-inline: calc(var(--rt-input-padding-x) - var(--rt-input-edge));
+        }
+
         /* Read-only: контрол превращается в плоский текст — снимаем рамку/фон/паддинги,
            чтобы значение читалось как обычный текст под label'ом rt-field. */
         &--readonly {
@@ -110,8 +196,12 @@
             padding: 0;
             border: none;
             background: transparent;
+            caret-color: var(--rt-input-caret-color);
             color: inherit;
             font: inherit;
+
+            /* Межбуквенный интервал значения — ручка приложения: кит её не объявляет, без неё normal. */
+            letter-spacing: var(--rt-input-letter-spacing, normal);
             outline: none;
 
             &::placeholder {
@@ -130,18 +220,6 @@
             flex-shrink: 0;
         }
 
-        /* Размер и цвет значка приходят от самого значка встроенным стилем и правилом не перебиваются.
-           Нижняя граница размер расширяет, а приглушённый тон значок берёт из свойства, которое читает
-           его встроенный стиль: так набор оформления даёт значку поля вид первого кита, не трогая входов
-           значка. По умолчанию оба равны нынешним, и вид не меняется. */
-        &__icon-left,
-        &__icon-right {
-            --rt-icon-color-muted: var(--rt-input-icon-color);
-
-            min-width: var(--rt-input-icon-size);
-            min-height: var(--rt-input-icon-size);
-        }
-
         &__toggle {
             display: inline-flex;
             flex-shrink: 0;

package/src/lib/components/input-number/CONTEXT.md

@@ -46,6 +46,13 @@
 - **Крестик обнуляет поле, а не опустошает его** (`0,00`): у числового поля ноль осмыслен.
   При нуле крестик не показывается — обнулять больше нечего.
 - Префикс спрятан от скринридера: валюту он прочитает из подписи поля.
+- Под материальным набором подпись вмещающего `rt-field` ложится внутрь поля: на место подсказки
+  в покое и на рамку при значении или фокусе. Признак — `fieldLabelInside` основы полей.
+
+## Межбуквенный интервал
+
+Значение берёт интервал из ручки `--rt-input-letter-spacing`, общей с полем, выбором и текстом.
+Кит её не объявляет: без неё интервал `normal`.
 
 ## Рядом