@rt-tools/ui-kit-v2 0.32.0 → 0.34.0

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

@@ -0,0 +1,54 @@
+@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 {
+        /* Боковая рамка и отступ текста от внешнего края поля. Под материальным набором отступ — 16 px
+           от внешнего края, как у поля Material; своим видом кита он считается от рамки. */
+        --rt-select-edge: var(--rt-input-border-width);
+        --rt-select-text-inset: calc(var(--rt-input-padding-x) + var(--rt-select-edge));
+
+        &--appearance--fill {
+            --rt-select-edge: var(--rt-input-fill-edge);
+        }
+
+        &#{$preset-weak} {
+            --rt-select-text-inset: var(--rt-input-padding-x);
+        }
+
+        &#{$preset-weak} &__trigger {
+            padding-inline: calc(var(--rt-select-text-inset) - var(--rt-select-edge));
+        }
+
+        /* Отключённый выбор в материальном наборе не тускнеет, а красит рамку, текст и подсказку —
+           как поле ввода. Своим видом цвета равны обычным. */
+        &--disabled &__trigger {
+            color: var(--rt-input-color-text-disabled);
+        }
+
+        &--disabled &__label--placeholder {
+            color: var(--rt-input-color-placeholder-disabled);
+        }
+
+        /* Свой указатель (`rtSelectTrigger`) рамки не имеет и отключённым её не получает. Условие стоит
+           в `:where`, чтобы сила правила осталась прежней. */
+        &--disabled:not(.rt-select--invalid, .rt-select--appearance--fill, .rt-select--borderless)
+            &__trigger:where(:not(.rt-select__trigger--own)) {
+            border-color: var(--rt-input-color-border-disabled);
+        }
+
+        /* Треугольник отключённого выбора — цвета отключённого текста, как стрелка mat-select. */
+        &--disabled#{$preset} &__chevron {
+            --rt-icon-color-muted: var(--rt-input-color-placeholder-disabled);
+        }
+
+        /* Выбранное значение, нарисованное шаблоном строки, стоит в строке подписи по верху, а не по
+           базовой линии: иначе строка подписи вырастает на 4 px, и поле выбора выше поля Material. */
+        &#{$preset} &__label > &__option-content {
+            vertical-align: top;
+        }
+    }
+}

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

@@ -1,15 +1,39 @@
 @use '../../../styles/mixins' as kv;
 
 @layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
     .rt-select {
         --rt-select-radius: var(--rt-input-radius);
         --rt-select-fill-radius: var(--rt-radius-sm);
         --rt-select-caret-transition-duration: var(--rt-duration-fast);
         --rt-select-own-outline-width: var(--rt-border-width-medium);
+        --rt-select-floating-label-color: var(--rt-input-color-text-placeholder);
+        --rt-select-floating-label-color-focus: var(--rt-input-color-border-focus);
+        --rt-select-floating-label-color-error: var(--rt-input-color-border-error);
+        --rt-select-floating-label-bg: var(--rt-input-color-bg);
+        --rt-select-floating-label-font-size: var(--rt-text-xs);
+        --rt-select-floating-label-start: var(--rt-input-padding-x);
+        --rt-select-floating-label-rest-start: var(--rt-select-floating-label-start);
+        --rt-select-floating-label-raised-start: var(--rt-select-floating-label-start);
+
+        /* Разрыв рамки кнопки под подписью: начало, глубина — толщина рамки фокуса. Ширину подписи
+           ставит компонент замером; до замера разрыва нет. */
+        --rt-select-notch-start: calc(var(--rt-select-floating-label-raised-start) - var(--rt-space-1));
+        --rt-select-notch-depth: calc(2 * var(--rt-input-border-width));
+        --rt-select-notch-width: 0px;
+
+        /* Высота залитого поля Material с подписью: подпись лежит внутри поля над значением. Она
+           равна средней высоте поля — под набором это высота Material при выбранной плотности. */
+        --rt-select-fill-floating-height: var(--rt-input-height-md);
+        --rt-select-color-border-hover: var(--rt-color-text-primary);
+        --rt-select-floating-label-duration: var(--rt-duration-fast);
 
         position: relative;
         display: block;
         width: 100%;
+        min-width: var(--rt-input-min-width);
 
         /* bordered=false: снимаем только resting-рамку триггера. Объявлено ДО блока
            __trigger — его :focus и правила --open/--invalid/--readonly __trigger
@@ -23,6 +47,7 @@
            Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
            перекрывают его рамку. */
         &--appearance--fill &__trigger {
+            border-width: var(--rt-input-fill-edge) var(--rt-input-fill-edge) var(--rt-input-border-width);
             border-color: transparent;
             border-radius: var(--rt-select-fill-radius) var(--rt-select-fill-radius) 0 0;
             border-bottom-color: var(--rt-color-field-fill-underline);
@@ -65,6 +90,13 @@
             }
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. Сила правила —
+           на уровне кнопки, поэтому фокус, открытый список, ошибка, залитый вид и «без рамки»
+           его перекрывают. */
+        &#{$preset-weak} &__trigger:where(:hover:not(:disabled)) {
+            border-color: var(--rt-select-color-border-hover);
+        }
+
         /* Свой указатель потребителя: полевой вид кнопки снимается — ground, рамка, высота и
            отступы. Останется он — значок или метка потребителя окажутся внутри чужого поля, и
            вход теряет смысл. Поведение при этом на кнопке, снимается только вид.
@@ -129,8 +161,15 @@
             }
         }
 
+        /* Отключённый выбор своим видом кита тускнеет целиком; цвета материального набора — в листе
+           `rt-select-material.scss`. */
         &--disabled {
-            opacity: var(--rt-input-disabled-opacity);
+            opacity: var(--rt-input-disabled-field-opacity);
+        }
+
+        /* Отключённый залитый выбор в наборе залит, как поле Material: on-surface 4 %. */
+        &--disabled.rt-select--appearance--fill &__trigger {
+            background-color: var(--rt-input-fill-color-bg-disabled);
         }
 
         /* Read-only: триггер остаётся в DOM (нужен для viewChild.required popover'а),
@@ -164,6 +203,10 @@
             overflow: hidden;
             min-width: 0;
             flex: 1 1 auto;
+
+            /* Межбуквенный интервал значения — ручка приложения: кит её не объявляет. Без неё подпись
+               наследует интервал кнопки, как раньше; поле ввода, число и текст получают normal от браузера. */
+            letter-spacing: var(--rt-input-letter-spacing, inherit);
             text-overflow: ellipsis;
             white-space: nowrap;
 
@@ -186,21 +229,6 @@
             transform: rotate(180deg);
         }
 
-        /* Под материальным набором стрелка — залитый треугольник mat-select первого кита, 10 на 5 px,
-           и открытое поле его не переворачивает. Свой вид кита остаётся с шевроном. Размер значок
-           ставит себе встроенным стилем, поэтому треугольник задан пределами, а не шириной. */
-        :is(.rt-preset-material, [data-preset='material']) &__chevron {
-            max-width: 10px;
-            max-height: 5px;
-            background-color: currentcolor;
-            clip-path: polygon(0 0, 100% 0, 50% 100%);
-            transform: none;
-
-            svg {
-                display: none;
-            }
-        }
-
         /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK,
            здесь только chrome. Глобальный класс (ViewEncapsulation.None). */
         &__panel {
@@ -286,6 +314,16 @@
             flex: 1 1 auto;
         }
 
+        /* Разметка строки от потребителя: занимает место подписи и выстраивает своё в ряд — метка
+           перед текстом встаёт по центру строки. */
+        &__option-content {
+            display: inline-flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            align-items: center;
+            gap: var(--rt-space-sm);
+        }
+
         /* Стрелка ветки и пустое место под неё у листа: шаг отступа равен их ширине с зазором,
            и стрелка дочерней строки встаёт под подписью родителя. */
         &__toggle,

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

@@ -46,6 +46,11 @@
 **Раздел и запрос меню держит само.** Их не задать входом: раздел открывает нажатие или наведение
 на пункт полосы, запрос — набор в поле.
 
+**Поиск раскрывает и папку, совпавшую только по имени.** Строк в ней нет — в выдаче стоят только
+совпавшие, — но её заголовок раскрыт, как у папок с найденным внутри. Свёрнутый человеком блок
+избранного на время поиска стоит раскрытым и держит в заголовке число совпавших строк; со стёртым
+запросом он снова свёрнут.
+
 ## Края
 
 - Незакреплённая панель стоит над страницей и закрывается уходом указателя. Если человек взялся за

package/src/lib/components/speed-menu/rt-speed-menu.component.scss

@@ -39,11 +39,11 @@
         :is(.rt-preset-material, [data-preset='material']) & {
             --rt-speed-menu-gap: var(--rt-size-4);
             --rt-speed-menu-inset: calc(var(--rt-size-6) + var(--rt-size-1));
-            --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-neutral-25));
-            --rt-speed-menu-action-color: var(--mat-sys-on-primary-container, var(--rt-color-text-primary));
+            --rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-neutral-25));
+            --rt-speed-menu-action-color: var(--rt-sys-on-primary-container, var(--rt-color-text-primary));
             --rt-icon-step-md: var(--rt-size-6);
-            --rt-speed-menu-action-shadow: var(--mat-sys-level3, var(--rt-mat-shadow-fab));
-            --rt-speed-menu-action-shadow-hover: var(--mat-sys-level4, var(--rt-mat-shadow-fab-hover));
+            --rt-speed-menu-action-shadow: var(--rt-sys-level3, var(--rt-mat-shadow-fab));
+            --rt-speed-menu-action-shadow-hover: var(--rt-sys-level4, var(--rt-mat-shadow-fab-hover));
             --rt-speed-menu-duration: calc(var(--rt-duration-fast) * 5 / 6);
             --rt-speed-menu-stagger: calc(var(--rt-duration-fast) * 5 / 12);
         }
@@ -98,7 +98,7 @@
        ступень первого кита. */
     :root[data-theme='dark'] :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel,
     html.rt-theme-dark :is(.rt-preset-material, [data-preset='material']) .rt-speed-menu__panel {
-        --rt-speed-menu-action-bg: var(--mat-sys-primary-container, var(--rt-mat-dark-20));
+        --rt-speed-menu-action-bg: var(--rt-sys-primary-container, var(--rt-mat-dark-20));
     }
 
     @for $step from 1 through 7 {

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

@@ -6,12 +6,20 @@
 <rt-stepper [steps]="[{ label: 'Заявка', description: 'Заполните данные' }, …]" [currentIndex]="1" />
 ```
 
-| вход           | тип                                 | умолчание |
-| -------------- | ----------------------------------- | --------- |
-| `steps`        | `readonly { label, description }[]` | `[]`      |
-| `currentIndex` | `number \| string`                  | `0`       |
+| вход           | тип                                 | умолчание      |
+| -------------- | ----------------------------------- | -------------- |
+| `steps`        | `readonly { label, description }[]` | `[]`           |
+| `currentIndex` | `number \| string`                  | `0`            |
+| `orientation`  | `'horizontal' \| 'vertical'`        | `'horizontal'` |
 
-Выходов нет — шаги переключает потребитель.
+Выходов нет — шаги переключает потребитель. Описание шага необязательно.
+
+## Вертикальный список
+
+`orientation="vertical"` рисует `<ol>`: метка с номером, подпись, описание, линия между метками.
+Номер ниже нуля даёт инструкцию: все метки нейтральные, `aria-current` нет ни у одного шага.
+Подпись можно заменить шаблоном `ng-template[rtStepLabel]`; в его контексте `$implicit` — шаг,
+`index` — номер с нуля. Полоса и её зажим номера к вертикальному списку не относятся.
 
 ## Главное, что нужно знать
 

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

@@ -125,6 +125,99 @@
             }
         }
 
+        /* Вертикальный список шагов: метка с номером, подпись справа, линия между метками. Номер
+           рисует метка, а не список: глобальный сброс у потребителя снимает нумерацию `<ol>`. */
+        &.rt-stepper--vertical > .rt-stepper {
+            --rt-stepper-mark-size: var(--rt-size-6);
+            --rt-stepper-mark-font-size: var(--rt-text-xs);
+            --rt-stepper-mark-bg: var(--rt-color-text-muted);
+            --rt-stepper-mark-color: var(--rt-color-text-inverse);
+            --rt-stepper-line-width: var(--rt-border-width-thin);
+            --rt-stepper-line-color: var(--rt-color-border-default);
+            --rt-stepper-item-gap: var(--rt-space-6);
+
+            padding: 0;
+            margin: 0;
+            gap: 0;
+            list-style: none;
+
+            .rt-stepper__item {
+                position: relative;
+                display: flex;
+                align-items: flex-start;
+                gap: var(--rt-space-4);
+                padding-block-end: var(--rt-stepper-item-gap);
+
+                &:last-child {
+                    padding-block-end: 0;
+                }
+
+                /* Линия от метки до метки следующего шага, с просветом у обеих. */
+                &:not(:last-child):after {
+                    position: absolute;
+                    background: var(--rt-stepper-line-color);
+                    content: '';
+                    inline-size: var(--rt-stepper-line-width);
+                    inset-block: calc(var(--rt-stepper-mark-size) + var(--rt-space-1)) var(--rt-space-1);
+                    inset-inline-start: calc((var(--rt-stepper-mark-size) - var(--rt-stepper-line-width)) / 2);
+                }
+
+                /* Цифра пройденного шага — цвет, обратный тексту: прогресс в тёмной теме светлый. */
+                &--state--complete {
+                    --rt-stepper-mark-bg: var(--rt-color-stepper-progress);
+                    --rt-stepper-mark-color: var(--rt-color-text-inverse);
+                }
+
+                /* Янтарь текущего шага один в обеих темах, и цифра на нём одна — тёмная. */
+                &--state--current {
+                    --rt-stepper-mark-bg: var(--rt-color-stepper-current);
+                    --rt-stepper-mark-color: var(--rt-neutral-950);
+                }
+
+                &--state--upcoming {
+                    --rt-stepper-mark-bg: var(--rt-color-stepper-track);
+                    --rt-stepper-mark-color: var(--rt-color-text-primary);
+                }
+            }
+
+            .rt-stepper__mark {
+                display: inline-flex;
+                flex: 0 0 auto;
+                align-items: center;
+                justify-content: center;
+                border-radius: var(--rt-stepper-radius);
+                background: var(--rt-stepper-mark-bg);
+                block-size: var(--rt-stepper-mark-size);
+                color: var(--rt-stepper-mark-color);
+                font-size: var(--rt-stepper-mark-font-size);
+                font-weight: var(--rt-font-weight-medium);
+                inline-size: var(--rt-stepper-mark-size);
+                line-height: 1;
+            }
+
+            .rt-stepper__body {
+                display: flex;
+                min-width: 0;
+                flex-direction: column;
+                gap: var(--rt-space-1);
+                padding-block-start: var(--rt-space-1);
+            }
+
+            .rt-stepper__step-label {
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                line-height: var(--rt-leading-snug);
+                overflow-wrap: anywhere;
+            }
+
+            .rt-stepper__step-description {
+                margin: 0;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                line-height: var(--rt-leading-snug);
+            }
+        }
+
         /* Шаг входа `radius` переназначает скругление точек шагов. */
         @include kv.radius-steps('--rt-stepper-radius', '> .rt-stepper');
     }

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

@@ -1,6 +1,7 @@
 # `rt-tabs` + `[rtTab]`
 
-Вкладки объявляются директивой на `<ng-template>` — содержимое неактивной вкладки не создаётся.
+Вкладки объявляются директивой на `<ng-template>` — содержимое неактивной вкладки не создаётся;
+с `preserveContent` тело открытой хоть раз вкладки живёт скрытым.
 
 ```html
 <rt-tabs stretch [activeId]="tab()" (activeIdChange)="tab.set($event)">
@@ -12,14 +13,20 @@
 
 ## `rt-tabs`
 
-| вход                | тип                          | умолчание      |
-| ------------------- | ---------------------------- | -------------- |
-| `activeId`          | `IRtTabs.Id \| null`         | `null`         |
-| `direction`         | `'horizontal' \| 'vertical'` | `'horizontal'` |
-| `stretch`           | `boolean`                    | `false`        |
-| `contentScrollable` | `boolean`                    | `true`         |
+| вход                | тип                            | умолчание      |
+| ------------------- | ------------------------------ | -------------- |
+| `activeId`          | `IRtTabs.Id \| null`           | `null`         |
+| `direction`         | `'horizontal' \| 'vertical'`   | `'horizontal'` |
+| `stretch`           | `boolean`                      | `false`        |
+| `contentScrollable` | `boolean`                      | `true`         |
+| `headerOnly`        | `boolean`                      | `false`        |
+| `activation`        | `'auto' \| 'manual'`           | `'auto'`       |
+| `scrollArrows`      | `'overlay' \| 'inline'`        | `'overlay'`    |
+| `scrollStep`        | `'fixed' \| 'page' \| 'third'` | `'fixed'`      |
+| `animationDuration` | `string \| number \| null`     | `null`         |
+| `preserveContent`   | `boolean`                      | `false`        |
 
-Выход: `activeIdChange: IRtTabs.Id`.
+Выходы: `activeIdChange: IRtTabs.Id`, `tabClose: IRtTabs.Id` — просьба закрыть вкладку с `closable`.
 
 ## `[rtTab]`
 
@@ -34,6 +41,11 @@
 | `badgeAriaLabel`                  | `string` — подпись метки для чтения с экрана  | `''`                  |
 | `disabled` / `hidden` / `invalid` | `boolean`                                     | `false`               |
 | `invalidMessage`                  | `string`                                      | `''` → `uiTabInvalid` |
+| `glyph`                           | `string \| null` — значок Material            | `null`                |
+| `tooltip`                         | `string` — подсказка, и у отключённой         | `''`                  |
+| `closable`                        | `boolean`                                     | `false`               |
+| `closeTooltip`                    | `string` — подсказка крестика                 | `''`                  |
+| `closeTooltipPlacement`           | `IRtTooltip.Placement \| null`                | `null`                |
 
 ## Главное, что нужно знать
 
@@ -52,8 +64,14 @@
 
 - Стрелки (влево/вправо, а в вертикальной раскладке вверх/вниз) перешагивают отключённые вкладки
   и заворачиваются по кругу; `Home`/`End` — к первой и последней.
-- В таб-порядке стоит **только активная** вкладка (`tabindex="0"`), остальные достаются стрелками.
+- `activation="manual"`: стрелки и `Home`/`End` только переводят фокус, вкладку открывают `Enter`
+  и `Space`. По умолчанию (`auto`) стрелка открывает вкладку сразу.
+- В таб-порядке стоит **одна** вкладка (`tabindex="0"`): активная, а в ручном режиме — та, на
+  которую перевели фокус. Остальные достаются стрелками.
 - Панель и вкладка связаны в обе стороны: `aria-controls` ↔ `aria-labelledby`.
+- Открытая панель стоит в таб-порядке (`tabindex="0"`): Tab с полосы попадает на неё. Вход
+  `contentTabIndex` задаёт другое значение, а `null` снимает атрибут, и Tab идёт с полосы сразу в
+  первое поле панели, как у `mat-tab-group`. Панель без полей тогда с клавиатуры не достать.
 
 ## Края
 
@@ -61,5 +79,35 @@
 - У невалидной вкладки появляется подсказка с текстом `invalidMessage`.
 - Метка без `badgeTitle` и `badgeAriaLabel` рисуется как прежде: голое значение, без подсказки и
   без подписи. Подсказка метки — своя, на самой метке: подсказка кнопки занята неверной вкладкой.
+- Отключённая вкладка помечена `aria-disabled`, не `disabled`: иначе на неё не навести, и её
+  подсказка не показалась бы. Клик по ней ничего не выбирает.
+- Вкладка — обёртка `.rt-tab-item` с `role="presentation"`. В ней кнопка `__trigger` с
+  `role="tab"` и рядом кнопка-крестик `__close`: кнопка в кнопке недопустима. Отступы несёт
+  `__trigger`, а правый отступ закрываемой вкладки входит в отступ крестика, поэтому вид прежний.
+  Кольцо фокуса вкладки рисует обёртка, у крестика оно своё.
+- Полоса выбранной вкладки и прокрутка к вкладке меряют обёртку по `data-tabitem`, фокус ищет
+  кнопку по `data-tabid`. Нажатие в любом месте обёртки выбирает вкладку, крестик своё нажатие
+  дальше не пускает.
+- Крестик стоит в таб-порядке только у вкладки в фокусе. Его имя — `closeTooltip` или
+  переведённое `uiClose`. На вкладке закрывает и `Delete`. Фокус после закрытия с клавиатуры
+  встаёт на активную вкладку.
+- У крестика своя подсказка `closeTooltip`; пока указатель на нём, подсказка вкладки пуста. Вид
+  крестика — свойства `--rt-tab-item-close-*` на `.rt-tab-item`; размер иконки идёт через шаг `xs`
+  самой иконки, её ширина задана стилем на теге.
+- `headerOnly` убирает панель и `aria-controls` у вкладок; выбор по-прежнему уходит в `activeIdChange`.
 - Стрелки прокрутки шапки есть в разметке всегда — показывает их модификатор `--visible`,
   который выставляется по замеру ширины после отрисовки.
+- Нажатие на стрелку плавно сдвигает полосу на 80 px, как до шага на страницу; `scrollStep="page"`
+  — на ширину видимой области, `"third"` — на её треть. Удержание дольше 300 мс прокручивает непрерывно. Вкладка, выбранная частично скрытой,
+  въезжает в видимую область так же плавно; длительность и кривая — `--rt-tabs-scroll-duration` и
+  `--rt-tabs-scroll-easing`, вход `animationDuration` их не трогает. Указатель, ушедший со стрелки до отпускания, полосу не сдвигает.
+- Смена вкладки движется: полоса — один элемент полосы вкладок, переезжает на новую вкладку; панель
+  прежней уходит, новая въезжает по направлению перехода. Длительности — токены
+  `--rt-tabs-indicator-duration` и `--rt-tabs-panel-duration` (своё умолчание панели — `0ms`, смена
+  на месте) или вход `animationDuration` для обоих; `prefers-reduced-motion` снимает движение.
+  Пока панель уходит, якорь `tabs-panel` стоит только на новой, у уходящей — `tabs-panel-leaving`.
+- `preserveContent`: тело создаётся при первом открытии вкладки и дальше живёт; неактивное скрыто
+  (`hidden`, `inert`, `aria-hidden`, вне таб-порядка) с якорем `tabs-panel-idle`. Уходит при смене
+  живое тело прежней вкладки. Тело вкладки, убранной из набора, уничтожается вместе с ней.
+- `scrollArrows="inline"`: при переполнении обе стрелки стоят по краям, полоса между ними уже;
+  стрелка, в сторону которой прокручивать некуда, бледная и не нажимается.