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

package/src/lib/components/expansion-panel/CONTEXT.md

@@ -10,14 +10,15 @@
 </rt-expansion-panel>
 ```
 
-| вход         | тип                            | умолчание |
-| ------------ | ------------------------------ | --------- |
-| `expanded`   | `boolean` (model)              | `false`   |
-| `disabled`   | `boolean`                      | `false`   |
-| `hideToggle` | `boolean`                      | `false`   |
-| `appearance` | `IRtExpansionPanel.Appearance` | `'card'`  |
-| `headerId`   | `string \| null`               | `null`    |
-| `ariaLabel`  | `string \| null`               | `null`    |
+| вход              | тип                            | умолчание |
+| ----------------- | ------------------------------ | --------- |
+| `expanded`        | `boolean` (model)              | `false`   |
+| `disabled`        | `boolean`                      | `false`   |
+| `hideToggle`      | `boolean`                      | `false`   |
+| `appearance`      | `IRtExpansionPanel.Appearance` | `'card'`  |
+| `headerId`        | `string \| null`               | `null`    |
+| `ariaLabel`       | `string \| null`               | `null`    |
+| `preserveContent` | `boolean`                      | `false`   |
 
 Выход — `expandedChange`, половина двусторонней привязки.
 
@@ -35,11 +36,34 @@
 `interpolate-size`, уход доигрывает класс `rt-expansion-panel__body--leaving` через `animate.leave`.
 Браузер без `interpolate-size` показывает тело сразу.
 
+**Действия заголовка — узел с `rtExpansionPanelActions`.** Он стоит в строке заголовка вне кнопки,
+и нажатие по нему панель не раскрывает. Шеврон тогда выходит из кнопки и встаёт после действий.
+
+**Группа — `rtExpansionPanelGroup` на обёртке.** Раскрытие панели сворачивает остальные панели
+обёртки, и вложенные в обёртки владельца тоже; `multi` это отключает. Панель встаёт в группу сама,
+по токену `RT_EXPANSION_PANEL_GROUP`, и закрывает токен для своего тела: панель в теле панели в
+группу не входит. Действия заголовка и ленивое тело ищутся на любой глубине, в обёртке владельца
+тоже, но берутся только свои: директива запоминает ближайшую панель по `RT_EXPANSION_PANEL_OWNER`,
+и шаблон вложенной панели остаётся ей.
+
+**`preserveContent` прячет свёрнутое тело, а не убирает.** Тело получает модификатор `--collapsed`
+и `inert`, высота уходит в ноль. Ленивое тело создаётся при первом раскрытии.
+
 ## Края
 
 - Размеры заголовка и тела — свойства `--rt-expansion-panel-*`. Владелец переназначает их правилом
   двух классов на хосте: одного класса мало, он равен по силе объявлению самой панели на том же
   узле. Вложенная панель объявляет свои значения заново и чужих не наследует.
+- Высоту строки и размер шрифта тела задают `--rt-expansion-panel-body-line-height` и
+  `--rt-expansion-panel-body-font-size`. Панель их не объявляет: пока набор оформления их не дал,
+  тело наследует оба значения, как прежде. Поэтому их можно задать и на предке, а не только на хосте.
+- `--rt-expansion-panel-box-sizing` (по умолчанию `border-box`) задаёт box-sizing самой панели.
+  С `content-box` хост шириной во весь контейнер вылезает за него на ширину своей рамки, если
+  приложение её дало.
+- `--rt-expansion-panel-body-box-sizing` задаёт box-sizing тела. Панель его не объявляет, и тело
+  наследует значение от хоста. Потомкам тела оно достаётся, только если сброс стилей приложения
+  наследует box-sizing: так набор Material даёт телу `content-box`, кружок радио со своей рамкой
+  снова занимает 20 px, а хост остаётся во всю ширину контейнера.
 - `headerId` нужен владельцу, который нажимает заголовок по своему номеру: боковое меню ищет строки
   по id.
 - Id тела берётся из счётчика на экземпляр: две панели на странице не ссылаются на чужое тело.

package/src/lib/components/expansion-panel/rt-expansion-panel.component.scss

@@ -24,10 +24,12 @@
         --rt-expansion-panel-chevron-color: var(--rt-color-text-muted);
         --rt-expansion-panel-body-padding-inline: var(--rt-space-lg);
         --rt-expansion-panel-body-padding-end: var(--rt-space-md);
+        --rt-expansion-panel-actions-gap: var(--rt-space-xs);
+        --rt-expansion-panel-box-sizing: border-box;
 
         display: block;
         width: 100%;
-        box-sizing: border-box;
+        box-sizing: var(--rt-expansion-panel-box-sizing);
         border-radius: var(--rt-expansion-panel-radius);
         background: var(--rt-expansion-panel-bg);
         box-shadow: var(--rt-expansion-panel-shadow);
@@ -47,6 +49,43 @@
             --rt-expansion-panel-body-padding-end: var(--rt-space-0);
         }
 
+        /* Строка заголовка. Без действий в ней одна кнопка, и строка ничего не рисует сама. */
+        &__head {
+            display: flex;
+            align-items: center;
+            border-radius: var(--rt-expansion-panel-header-radius);
+            transition: background-color var(--rt-expansion-panel-duration) ease;
+        }
+
+        /* С действиями подложку наведения рисует вся строка: действия и шеврон — части заголовка.
+           Кнопка уступает им край строки, и её правый отступ переходит к строке. */
+        &--with-actions &__head {
+            background: var(--rt-expansion-panel-header-bg);
+            gap: var(--rt-expansion-panel-header-gap);
+            padding-inline-end: var(--rt-expansion-panel-header-padding-end);
+
+            &:hover {
+                background: var(--rt-expansion-panel-header-hover-bg);
+            }
+        }
+
+        &--with-actions &__header {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding-inline-end: var(--rt-space-0);
+
+            &:hover:not(:disabled) {
+                background: transparent;
+            }
+        }
+
+        &__actions {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            gap: var(--rt-expansion-panel-actions-gap);
+        }
+
         /* Заголовок во всю ширину: нажатие принимает вся строка, а не один шеврон. */
         &__header {
             display: flex;
@@ -97,15 +136,29 @@
             &--open {
                 transform: rotate(180deg);
             }
+
+            /* Шеврон после действий стоит вне кнопки и нажимается сам. */
+            &--outside {
+                cursor: pointer;
+                margin-inline-start: 0;
+            }
         }
 
         /* Раскрытие и сворачивание — высотой от нуля до своей и обратно. Высота «auto» становится
            величиной, между которой можно вести движение, через `interpolate-size`; браузер без него
-           показывает и убирает тело сразу. */
+           показывает и убирает тело сразу.
+           Высота строки и размер шрифта тела объявлены без значения по умолчанию: оба наследуются,
+           и необъявленное свойство оставляет телу наследованное, как было. Набор оформления даёт
+           свои, когда строкам внутри нужна высота строки образца. box-sizing тела тоже не объявлен
+           и по умолчанию наследуется от хоста: набор даёт телу content-box, не трогая хост с его
+           шириной во весь контейнер. */
         &__body {
             overflow: hidden;
             height: auto;
+            box-sizing: var(--rt-expansion-panel-body-box-sizing, inherit);
+            font-size: var(--rt-expansion-panel-body-font-size);
             interpolate-size: allow-keywords;
+            line-height: var(--rt-expansion-panel-body-line-height);
             padding-block-end: var(--rt-expansion-panel-body-padding-end);
             padding-inline: var(--rt-expansion-panel-body-padding-inline);
             transition:
@@ -122,6 +175,18 @@
                 padding-block-end: 0;
             }
 
+            /* Сохранённое тело свёрнутой панели: высота уходит в ноль, содержимое остаётся в разметке
+               со своим состоянием. Скрытость убирает его из порядка фокуса и от чтения с экрана. */
+            &--collapsed {
+                height: 0;
+                padding-block-end: 0;
+                transition:
+                    height var(--rt-expansion-panel-duration) ease,
+                    padding-block-end var(--rt-expansion-panel-duration) ease,
+                    visibility 0s linear var(--rt-expansion-panel-duration);
+                visibility: hidden;
+            }
+
             @media (prefers-reduced-motion: reduce) {
                 transition: none;
             }

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

@@ -83,6 +83,49 @@
   видимыми — по ним читается, чего ждут.
 - Текст пояснения (`help`) живёт в поповере и до наведения не отрисован.
 
+## Плотность материального набора
+
+**Высоту поля под набором задают назначения, а не компонент.** Набор ставит
+`--rt-input-height-md` в 56 px и `--rt-input-font-size` в 16 px. Атрибут `data-rt-density`
+(`0` … `-5`) ставит наследуемый шаг `--rt-input-density`, а высоту из шага считает набор на своём
+узле: атрибут на корне доходит и до поля со своим признаком набора. Узел с атрибутом ниже узла с
+набором пересчитывает высоту сам правилами `src/styles/_density.scss`: ссылка вычисляется там, где
+объявлена. Своя высота приложения `--rt-input-height-app` стоит в той же формуле первой и сильнее
+шага.
+Высоты залитых полей (`--rt-field-fill-height`, `--rt-input-fill-floating-height`,
+`--rt-select-fill-floating-height`) ссылаются на ту же среднюю высоту и идут за плотностью.
+Правила плотности стоят вне слоёв: назначения набора тоже вне слоёв, и в слое атрибут на том же
+узле, что признак набора, проигрывал бы им.
+
+**Подпись внутрь кладёт только контрол с местом подсказки.** Его признак — `fieldLabelInside` у
+основы полей; поле ставит модификатор `--label-inside`. Ступень `size` контрола становится высотой
+поля, иначе подпись маленького поля легла бы на нижнюю рамку.
+
+**Рамку при наведении рисует каждый контрол сам.** Правило стоит только под набором, под `:where`
+— на уровне вида. Свойство цвета у каждого блока своё (`--rt-<блок>-color-border-hover`): общее
+назначение вычислилось бы на корне и перекрасило бы поля с местной рамкой — поиск списка,
+пагинацию.
+
+**Признак набора на самом поле действует так же, как на предке.** Правила подписи внутри лежат в
+своём листе `rt-field-label-inside.scss` под одним селектором: `:is()` ловит набор и на предке, и на
+самом поле. Пара селекторов удвоила бы блок, и лист перешёл бы порог в 8 КБ, на котором падает
+сборка приложения.
+
+**Залитое поле под набором сверено с полем Material измерением.** Значение стоит в `h/2 − 4` от
+верха строкой 24 px, поднятая подпись — в `h/2 − 20`: при 52 px это 22 и 6. Правила значения поле
+пишет на `.rt-input__field` и `.rt-select__label` внутри себя, для своей подписи контрола — те же
+числа в его листе подписи. Боковая рамка залитого вида — назначение `--rt-input-fill-edge`, черта
+фокуса — `--rt-input-fill-focus-shadow`: своим видом кита они равны общим, и вид не меняется.
+
+## Межбуквенный интервал
+
+Подпись поля берёт интервал из ручки `--rt-field-label-letter-spacing`, значения полей — из
+`--rt-input-letter-spacing`. Кит их не объявляет. Без них подпись поля и значение выбора наследуют
+интервал от приложения, как раньше, а поле ввода, число и текст держат `normal` браузера.
+
+Высота строки подсказки и ошибки своим видом кита наследуется от приложения; свойство
+`--rt-field-messages-line-height` действует только под материальным набором.
+
 ## Рядом
 
 - [`RtFormControlBase`](../form-control/CONTEXT.md) — что именно поле читает у контрола.

package/src/lib/components/field/rt-field-label-inside.scss

@@ -0,0 +1,179 @@
+@layer rt-kit.components {
+    /* Подпись внутри поля под материальным набором — отдельный лист стилей компонента. Одним листом с
+       остальными правилами он перешёл бы порог в 8 КБ на лист, который Angular по умолчанию ставит
+       приложению, и сборка потребителя упала бы. Лист подключается вторым, после основного. */
+
+    /* Контролы залитого вида: подпись материального набора у них лежит внутри поля, а не на рамке. */
+    $filled-controls: '.rt-input--appearance--fill, .rt-input--appearance--pill, .rt-select--appearance--fill, .rt-input-number--appearance--fill, .rt-input-number--appearance--pill, .rt-textarea--appearance--fill';
+
+    /* Залитые поля ввода, числа и выбора, у которых значение стоит строкой Material под поднятой подписью. */
+    $fill-fields: '#{$filled-controls}';
+    $fill-values: '.rt-input--appearance--fill .rt-input__field, .rt-input--appearance--pill .rt-input__field, .rt-select--appearance--fill .rt-select__label, .rt-input-number--appearance--fill .rt-input-number__field, .rt-input-number--appearance--pill .rt-input-number__field';
+
+    /* Верхняя рамка у залитого поля — своя, у «таблетки» — общая. */
+    $pill-values: '.rt-input--appearance--pill .rt-input__field, .rt-input-number--appearance--pill .rt-input-number__field';
+
+    .rt-field {
+        /* Материальный набор кладёт подпись внутрь контрола, как поле Material: пустое поле без
+           фокуса держит её на месте подсказки, значение или фокус её поднимают. У обведённого поля
+           она встаёт на верхнюю рамку, и рамка под ней разорвана; у залитого — внутрь поля над
+           значением. Подпись выходит из потока. Поле только для чтения и поле в загрузке рамки ввода
+           не имеют — у них подпись остаётся над значением. Обрезка подписи повторяет подпись на
+           рамке у самого поля ввода. Внутрь ложится только подпись поля с местом подсказки — ввода,
+           текста, числа и выбора: над палитрой, списком и выбором файла она остаётся сверху.
+           Признак набора действует и на предке, и на самом поле — одним селектором: пара селекторов
+           удвоила бы весь блок в собранном листе, а лист компонента держится под 8 КБ. */
+        &--label-inside:is(.rt-preset-material *, [data-preset='material'] *, .rt-preset-material, [data-preset='material']) {
+            /* Текст поля Material и подпись над ним стоят в 16 px от внешнего края поля — и у
+               обведённого, и у залитого: рамка входит в этот отступ. */
+            --rt-field-floating-start: var(--rt-input-padding-x);
+
+            position: relative;
+            isolation: isolate;
+
+            &:has(.rt-input--with-icon-left) {
+                --rt-field-floating-rest-start: calc(var(--rt-field-floating-start) + var(--rt-input-icon-size) + var(--rt-input-gap));
+            }
+
+            /* Значок слева стоит в 12 px от края поля и в 4 px от текста, как у поля Material, —
+               подпись в покое встаёт туда, где начинается текст. Кнопка-значок стоит там же. */
+            &:has(.rt-input--with-icon-left > .rt-input__icon-left) {
+                --rt-field-floating-rest-start: calc(var(--rt-space-2) + var(--rt-space-1) + var(--rt-input-icon-size) + var(--rt-space-1));
+            }
+
+            /* Отказ и подсказка под полем начинаются от текста поля, вплотную к нему. */
+            .rt-field__messages {
+                margin-top: calc(-1 * var(--rt-field-gap));
+                padding-inline: var(--rt-input-padding-x);
+            }
+
+            /* Вход `size` у контрола меняет его высоту своей ступенью, а подпись поля считает место
+               от высоты поля: ступень контрола становится высотой поля, иначе подпись маленького
+               поля легла бы на его нижнюю рамку. */
+            &:has(.rt-input--size--sm, .rt-select--size--sm, .rt-input-number--size--sm) {
+                --rt-input-height: var(--rt-input-height-sm);
+            }
+
+            &:has(.rt-input--size--lg, .rt-select--size--lg, .rt-input-number--size--lg) {
+                --rt-input-height: var(--rt-input-height-lg);
+            }
+
+            .rt-field__label-row {
+                position: absolute;
+                z-index: var(--rt-field-floating-z);
+                top: calc(var(--rt-input-height) / 2);
+                left: var(--rt-field-floating-rest-start);
+                max-width: calc(100% - 2 * var(--rt-field-floating-start));
+                pointer-events: none;
+                transform: translateY(-50%);
+                transition:
+                    top var(--rt-field-floating-duration) ease,
+                    left var(--rt-field-floating-duration) ease;
+            }
+
+            .rt-field__label {
+                overflow: hidden;
+                color: var(--rt-input-color-text-placeholder);
+                font-size: var(--rt-input-font-size);
+                font-weight: inherit;
+                text-overflow: ellipsis;
+                transition:
+                    font-size var(--rt-field-floating-duration) ease,
+                    color var(--rt-field-floating-duration) ease;
+                white-space: nowrap;
+            }
+
+            /* Кнопка справки остаётся нажимаемой и в подписи, лежащей поверх поля. */
+            .rt-field__help {
+                pointer-events: auto;
+            }
+
+            /* Пока подпись лежит на месте подсказки, подсказка контрола не рисуется; у поля без
+               подписи подсказка видна. */
+            &:has(.rt-field__label-row):not(.rt-field--filled, :focus-within) {
+                ::placeholder,
+                .rt-select__label--placeholder {
+                    color: transparent;
+                }
+            }
+
+            &.rt-field--filled .rt-field__label-row,
+            &:focus-within .rt-field__label-row {
+                top: 0;
+                left: var(--rt-field-raised-start);
+                max-width: calc(100% - var(--rt-field-raised-start) - var(--rt-field-floating-start));
+                padding: 0 var(--rt-space-1);
+                margin-left: calc(-1 * var(--rt-space-1));
+                line-height: 1;
+            }
+
+            /* Разрыв рамки под поднятой подписью: зона контрола вырезает у себя полосу толщиной в
+               рамку фокуса шириной в подпись. Поле в наборе прозрачное, поэтому вырезается только
+               рамка, а под ней виден тот же фон, что вокруг поля. */
+            &.rt-field--filled:not(:has(#{$filled-controls})) .rt-field__control,
+            &:focus-within:not(:has(#{$filled-controls})) .rt-field__control {
+                clip-path: polygon(
+                    0 0,
+                    var(--rt-field-notch-start) 0,
+                    var(--rt-field-notch-start) var(--rt-field-notch-depth),
+                    calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) var(--rt-field-notch-depth),
+                    calc(var(--rt-field-notch-start) + var(--rt-field-notch-width)) 0,
+                    100% 0,
+                    100% 100%,
+                    0 100%
+                );
+            }
+
+            /* Залитое поле Material выше обведённого, и поднятая подпись лежит внутри него, над
+               значением: рамки сверху у залитого поля нет. */
+            &:has(#{$filled-controls}) {
+                --rt-input-height: var(--rt-field-fill-height);
+            }
+
+            /* Подпись в покое — строкой Material; значение — ниже середины, под поднятой подписью:
+               при 52 px текст начинается в 22 px от верха строкой в 24 px. Поле без подписи места под
+               неё не держит, и значение стоит посередине, как у поля Material без mat-label. */
+            &:has(#{$fill-fields}) .rt-field__label {
+                line-height: var(--rt-leading-tight);
+            }
+
+            &:has(.rt-field__label-row) :is(#{$fill-values}) {
+                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);
+            }
+
+            &:has(.rt-field__label-row) :is(#{$pill-values}) {
+                padding-top: calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-border-width));
+            }
+
+            &.rt-field--filled:has(#{$filled-controls}) .rt-field__label-row,
+            &:focus-within:has(#{$filled-controls}) .rt-field__label-row {
+                top: calc(var(--rt-input-height) / 2 - var(--rt-space-5));
+                left: var(--rt-field-floating-rest-start);
+                padding: 0;
+                margin-left: 0;
+                transform: none;
+            }
+
+            &.rt-field--filled .rt-field__label,
+            &:focus-within .rt-field__label {
+                font-size: var(--rt-text-xs);
+            }
+
+            &:focus-within .rt-field__label {
+                color: var(--rt-input-color-border-focus);
+            }
+
+            &.rt-field--invalid .rt-field__label {
+                color: var(--rt-input-color-border-error);
+            }
+
+            /* Подпись отключённого поля — цвета отключённого текста, как у поля Material. */
+            &:has(.rt-input--disabled, .rt-select--disabled, .rt-input-number--disabled, .rt-textarea--disabled) .rt-field__label {
+                color: var(--rt-input-color-placeholder-disabled);
+            }
+        }
+    }
+}

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

@@ -1,5 +1,28 @@
 @layer rt-kit.components {
     .rt-field {
+        --rt-field-floating-start: calc(var(--rt-input-padding-x) + var(--rt-input-border-width));
+        --rt-field-floating-rest-start: var(--rt-field-floating-start);
+        --rt-field-floating-duration: var(--rt-duration-fast);
+
+        /* Поднятая подпись начинается за скруглением угла: на изгибе верхней рамки ещё нет, и
+           разрыв там не виден — подпись легла бы на изгиб без просвета слева. */
+        --rt-field-raised-start: max(
+            var(--rt-field-floating-start),
+            calc(min(var(--rt-input-radius), var(--rt-input-height) / 2) + var(--rt-space-2))
+        );
+        --rt-field-notch-start: calc(var(--rt-field-raised-start) - var(--rt-space-1));
+        --rt-field-notch-depth: calc(2 * var(--rt-input-border-width));
+
+        /* Ширину подписи на рамке ставит компонент замером; до замера разрыва нет. */
+        --rt-field-notch-width: 0px;
+
+        /* Высота залитого поля Material: подпись лежит внутри поля над значением. Она равна средней
+           высоте поля — под набором это высота Material при выбранной плотности. */
+        --rt-field-fill-height: var(--rt-input-height-md);
+
+        /* Ярус подписи над контролом — внутри поля: `isolation` не пускает её над страницей. */
+        --rt-field-floating-z: var(--rt-z-sticky);
+
         display: flex;
         flex-direction: column;
         gap: var(--rt-field-gap);
@@ -14,12 +37,23 @@
             color: var(--rt-field-label-color);
             font-size: var(--rt-field-label-font-size);
             font-weight: var(--rt-field-label-font-weight);
+
+            /* Межбуквенный интервал подписи — ручка приложения: кит её не объявляет, без неё интервал
+               наследуется от приложения, как раньше. */
+            letter-spacing: var(--rt-field-label-letter-spacing, inherit);
         }
 
         &__required {
+            margin-left: var(--rt-field-required-gap);
             color: var(--rt-field-required-color);
         }
 
+        /* Недействительное поле красит звёздочку цветом ошибки. Своим видом кита она красная и так;
+           материальный набор красит её цветом подписи и до ошибки. */
+        &--invalid &__required {
+            color: var(--rt-field-error-color);
+        }
+
         /* Зона значения: проецируемый контрол или read-only текст. Задаёт размер/цвет
            значения, чтобы оно было крупнее и контрастнее muted-лейбла. Нативные
            <input> у rt-контролов задают свой font-size сами и это не переопределяют —
@@ -47,13 +81,28 @@
         /* Зона сообщений под контролом. С резервом (reserveHintSpace) hint и ошибка
            кладутся в одну ячейку грида: скрытый hint продолжает задавать высоту, и
            подмена сообщения не двигает форму ни вниз, ни вверх. Без hint высоту
-           держит min-height в одну строку — считаем по error-шрифту, он крупнее. */
+           держит min-height в одну строку — считаем по error-шрифту, он крупнее.
+           Под набором это строка подсказки Material: своя высота строки и отступ над ней. Отступ
+           есть, только когда строке есть что держать: резерв или сообщение. Своим видом кита
+           строка прежняя. Строка считается в `border-box`, и отступ входит в её наименьшую высоту: так
+           она та же и у приложения, которое ставит `border-box` всем узлам своим правилом вне слоёв. */
         &__messages {
             display: grid;
+            box-sizing: border-box;
+
+            /* Своим видом высота строки наследуется от приложения, как раньше: правило стоит только под набором. */
+            &:is(.rt-preset-material *, [data-preset='material'] *) {
+                line-height: var(--rt-field-messages-line-height);
+            }
+
+            &--reserved,
+            &:has(> *) {
+                padding-top: var(--rt-field-messages-padding-top);
+            }
 
             &--reserved {
                 font-size: var(--rt-field-error-font-size);
-                min-block-size: 1lh;
+                min-block-size: calc(1lh + var(--rt-field-messages-padding-top));
 
                 > * {
                     grid-area: 1 / 1;

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

@@ -4,21 +4,21 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" variant="danger" size="md" (clicked)="remove()" />
 ```
 
-| вход                                            | тип                                                                           | умолчание                    |
-| ----------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------- |
-| `icon`                                          | `IRtIcon.Name \| null` — нужен он или `glyph`; без обоих показывает вложенное | `null`                       |
-| `glyph`                                         | `string \| null` — имя Material, как `glyph` у `rt-icon`                      | `null`                       |
-| `ariaLabel`                                     | `string`                                                                      | **обязателен**               |
-| `variant`                                       | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'success' \| 'warning'`   | `'ghost'`                    |
-| `size`                                          | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                      | `'md'`                       |
-| `iconSize`                                      | `IRtIcon.Size \| null`                                                        | `null` → от размера кнопки   |
-| `iconColor`                                     | `IRtIcon.Color`                                                               | `'current'`                  |
-| `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                         | `null` → `md`                |
-| `type`                                          | `'button' \| 'submit'`                                                        | `'button'`                   |
-| `tooltip`                                       | `string`                                                                      | `''` (пусто → подсказки нет) |
-| `tooltipHideOnClick`                            | `boolean` — `false` у переключателя: подсказка остаётся после клика           | `true`                       |
-| `tabIndex`                                      | `number`                                                                      | `0`                          |
-| `loading` / `disabled` / `active` / `indicator` | `boolean`                                                                     | `false`                      |
+| вход                                            | тип                                                                           | умолчание                          |
+| ----------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------- |
+| `icon`                                          | `IRtIcon.Name \| null` — нужен он или `glyph`; без обоих показывает вложенное | `null`                             |
+| `glyph`                                         | `string \| null` — имя Material, как `glyph` у `rt-icon`                      | `null`                             |
+| `ariaLabel`                                     | `string`                                                                      | **обязателен**                     |
+| `variant`                                       | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'success' \| 'warning'`   | `'ghost'`                          |
+| `size`                                          | `'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                      | `'md'`                             |
+| `iconSize`                                      | `IRtIcon.Size \| null`                                                        | `null` → от размера кнопки         |
+| `iconColor`                                     | `IRtIcon.Color`                                                               | `'current'`                        |
+| `radius`                                        | `TRtRadius \| null` — шаг общей шкалы                                         | `null` → `md`                      |
+| `type`                                          | `'button' \| 'submit'`                                                        | `'button'`                         |
+| `tooltip`                                       | `string`                                                                      | `''` (пусто → подсказки нет)       |
+| `tooltipHideOnClick`                            | `boolean` — `false` у переключателя: подсказка остаётся после клика           | из `provideRtKit`, без него `true` |
+| `tabIndex`                                      | `number`                                                                      | `0`                                |
+| `loading` / `disabled` / `active` / `indicator` | `boolean`                                                                     | `false`                            |
 
 | выход     | тип          |
 | --------- | ------------ |
@@ -54,6 +54,8 @@
 - `iconSize` нужен, когда крупная кнопка должна остаться крупной (в неё целятся пальцем), а
   иконка во весь диаметр выглядит тяжеловесно.
 - Модификаторы в камелкейсе конвертируются в дефис: `indicator` → `rt-icon-button--has-indicator`.
+- Кольцо фокуса не рисуется при фокусе от мыши и касания, как у `rtButton`: `CdkMonitorFocus` на
+  `<button>` внутри ставит классы `cdk-*-focused`, и правило кольца их читает.
 
 ## Рядом
 

package/src/lib/components/icon-button/rt-icon-button.component.scss

@@ -183,7 +183,9 @@
                 }
             }
 
-            &:focus-visible {
+            /* Фокус от мыши и касания кольца не рисует, как у Material: браузер ставит `:focus-visible` и
+               на фокус из кода после нажатия мышью — окно открылось кликом и перевело фокус на кнопку. */
+            &:focus-visible:not(.cdk-mouse-focused, .cdk-touch-focused) {
                 box-shadow: var(--rt-icon-button-focus-shadow);
                 outline: 2px solid transparent;
                 outline-offset: 2px;

package/src/lib/components/inline-edit/rt-inline-edit.component.scss

@@ -59,10 +59,10 @@
 
             /* Плашка-поле приложения: светлая подложка, рамка, текст и значок — основной цвет темы. */
             --rt-inline-edit-chip-field-bg: var(--rt-mat-neutral-5);
-            --rt-inline-edit-chip-field-color: var(--mat-sys-primary, var(--rt-color-action-primary));
-            --rt-inline-edit-chip-field-icon-color: var(--mat-sys-primary, var(--rt-color-action-primary));
-            --rt-inline-edit-chip-field-border-color: var(--mat-sys-primary-fixed-dim, var(--rt-brand-200));
-            --rt-inline-edit-chip-field-border-color-focus: var(--mat-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-color: var(--rt-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-icon-color: var(--rt-sys-primary, var(--rt-color-action-primary));
+            --rt-inline-edit-chip-field-border-color: var(--rt-sys-primary-fixed-dim, var(--rt-brand-200));
+            --rt-inline-edit-chip-field-border-color-focus: var(--rt-sys-primary, var(--rt-color-action-primary));
         }
 
         /* Значение в покое: подпись режется многоточием, полный текст — в подсказке. */