@rt-tools/ui-kit-v2 0.8.1 → 0.11.0

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

@@ -13,5 +13,8 @@
             height: 100%;
             fill: currentcolor;
         }
+
+        /* Набор рисунков стилями не выбирается: ссылку на символ спрайта CSS подменить нечем.
+           Признак набора компонент читает у разметки над собой — см. rt-icon.component.ts. */
     }
 }

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

@@ -21,8 +21,27 @@
         .rt-icon-button {
             --rt-icon-button-circle-radius: var(--rt-radius-full);
             --rt-icon-button-square-radius: var(--rt-radius-md);
+
+            /* Промежуточные формы делят расстояние от квадрата до круга на три равные
+               части, а не берут свою долю стороны. Доля, взятая сама по себе, промахивается
+               мимо квадрата: у него радиус в 8 пикселей, а это от четверти стороны на
+               кнопке в 32 пикселя до восьмой на кнопке в 64 — ближняя ступень сливается с
+               ним на одних размерах и отрывается на других. Отсчёт от самого квадрата
+               держит шаг ровным на всём ряду: 8 → 12 → 16 → 20 на кнопке в 40 пикселей. */
+            --rt-icon-button-rounded-sm-radius: calc(var(--rt-icon-button-square-radius) + (50% - var(--rt-icon-button-square-radius)) / 3);
+            --rt-icon-button-rounded-lg-radius: calc(
+                var(--rt-icon-button-square-radius) + (50% - var(--rt-icon-button-square-radius)) * 2 / 3
+            );
             --rt-icon-button-indicator-radius: var(--rt-radius-full);
             --rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);
+
+            /* Тень покоя — ручка для потребителя, как `--rt-btn-shadow` у обычной кнопки; у
+               кнопки-значка её не было вовсе, и приподнять её было нечем. По умолчанию тени
+               нет: у первого кита её нет ни у одной кнопки — подъём там несёт круглая кнопка
+               действия, а не кнопка. Дающему ей значение: кольцо фокуса ниже объявляет
+               `box-shadow` целиком и тень покоя на это время снимает — списком они встанут
+               только тогда, когда покой перестанет быть `none`. */
+            --rt-icon-button-shadow: var(--rt-shadow-none);
             --rt-icon-button-transition-duration: var(--rt-duration-fast);
 
             position: relative;
@@ -34,9 +53,12 @@
             padding: 0;
             border: 0;
             background: transparent;
+            box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
-            transition: background-color var(--rt-icon-button-transition-duration) ease;
+            transition:
+                background-color var(--rt-icon-button-transition-duration) ease,
+                box-shadow var(--rt-icon-button-transition-duration) ease;
 
             &--sm {
                 --rt-icon-button-size: var(--rt-control-height-sm);
@@ -62,6 +84,14 @@
                 border-radius: var(--rt-icon-button-circle-radius);
             }
 
+            &--rounded-sm {
+                border-radius: var(--rt-icon-button-rounded-sm-radius);
+            }
+
+            &--rounded-lg {
+                border-radius: var(--rt-icon-button-rounded-lg-radius);
+            }
+
             &--square {
                 border-radius: var(--rt-icon-button-square-radius);
             }

package/src/lib/components/page-header/CONTEXT.md

@@ -6,16 +6,20 @@
 <rt-page-header ariaLabel="Разделы" [items]="sections()" [user]="user()" (itemClick)="go($event)" (userClick)="openProfile()" />
 ```
 
-| вход        | тип                         | умолчание          |
-| ----------- | --------------------------- | ------------------ |
-| `items`     | `ReadonlyArray<Item>`       | `[]`               |
-| `user`      | `{ name, avatar? } \| null` | `null`             |
-| `userTitle` | `string`                    | `''`               |
-| `userMenu`  | `TemplateRef \| null`       | `null`             |
-| `ariaLabel` | `string`                    | `''` → `uiMainNav` |
+| вход                  | тип                         | умолчание          |
+| --------------------- | --------------------------- | ------------------ |
+| `items`               | `ReadonlyArray<Item>`       | `[]`               |
+| `user`                | `{ name, avatar? } \| null` | `null`             |
+| `userTitle`           | `string`                    | `''`               |
+| `userMenu`            | `TemplateRef \| null`       | `null`             |
+| `ariaLabel`           | `string`                    | `''` → `uiMainNav` |
+| `stickyCompact`       | `boolean`                   | `false`            |
+| `compactVisibleCount` | `number`                    | `2`                |
 
 Выходы: `itemClick`, `userClick`.
 
+Слоты сжатой полосы: `[rtCompactLeft]`, `[rtCompactCenter]`, `[rtCompactRight]`.
+
 ## Главное, что нужно знать
 
 **Пункт с `route` — это ссылка, пункт с `columns` — кнопка.** Второму некуда вести: он
@@ -25,6 +29,14 @@
 **Узкая разметка отдельная**, а не свёрнутая стилями: те же разделы доступны через кнопку-бургер
 (`header-nav-burger`), и оба варианта живут в DOM одновременно.
 
+**С `stickyCompact` шапка липнет к верху окна и, прилипнув, сжимается в полосу** высотой 46:
+слева кнопка «ещё» (`header-compact-more`) и круги первых разделов с иконкой
+(`header-compact-section`), дальше три слота потребителя. Число кругов — `compactVisibleCount`;
+раздел без иконки в круг не попадает. «Ещё» открывает ту же панель, что и бургер. Прилипание
+ловит наблюдатель пересечения: верх шапки стоит на пиксель выше края, и, прилипнув, она теряет
+его из видимой области — так работает и внутри прокручиваемого контейнера. Без входа разметка и
+поведение прежние.
+
 ## Края
 
 - `unread: true` у пункта рисует отдельную точку.

package/src/lib/components/page-header/rt-page-header-compact.scss

@@ -0,0 +1,149 @@
+@layer rt-kit.components {
+    /* Сжатая полоса шапки: та же плашка, прилипшая к верху и сжатая по макету до 46px.
+       Слева стопка кругов с шагом в половину круга — «ещё» поверх остальных, — дальше три
+       слота потребителя. Своей ширины у полосы нет: она заполняет хост. */
+    .rt-page-header {
+        --rt-nav-compact-height: 46px;
+        --rt-nav-compact-circle-size: var(--rt-size-6);
+        --rt-nav-compact-circle-overlap: calc(var(--rt-nav-compact-circle-size) / 2);
+        --rt-nav-compact-circle-ring-width: var(--rt-border-width-thick);
+        --rt-nav-compact-circle-radius: var(--rt-radius-full);
+        --rt-nav-compact-circle-color-bg: var(--rt-neutral-100);
+        --rt-nav-compact-circle-color-bg-active: var(--rt-nav-item-color-bg-active);
+        --rt-nav-compact-color-bg: var(--rt-color-bg-surface);
+        --rt-nav-compact-stack-depth: 16; /* круг с индексом 0 лежит выше всех, следующие — ниже */
+
+        /* Верх на пиксель выше края: прилипнув, шапка теряет его из видимой области, и по
+           этому наблюдатель пересечения узнаёт о прилипании. Иначе сравнивать нечего — у края
+           прокручиваемого контейнера липкий узел стоит там же, где стоял в потоке. */
+        &--sticky {
+            position: sticky;
+            z-index: var(--rt-z-sticky);
+            top: -1px;
+        }
+
+        &__compact {
+            display: none;
+            min-width: 0;
+            min-height: var(--rt-nav-compact-height);
+            flex: 1 1 auto;
+            align-items: center;
+            gap: var(--rt-space-4);
+        }
+
+        /* Сжатое состояние: широкий ряд, бургер и блок пользователя уходят, полоса встаёт на
+           их место. Скругление снимается — полоса лежит по краю окна, а не в теле страницы. */
+        &--is-compact {
+            min-height: var(--rt-nav-compact-height);
+            padding: 0 var(--rt-space-5);
+            border-radius: 0;
+            background-color: var(--rt-nav-compact-color-bg);
+
+            > :not(.rt-page-header__compact) {
+                display: none;
+            }
+
+            .rt-page-header__compact {
+                display: flex;
+            }
+        }
+
+        /* Стопка — свой контекст наложения: номера кругов сравниваются только между собой. */
+        &__compact-stack {
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            isolation: isolate;
+        }
+
+        /* Порядок в стопке: чем правее круг, тем ниже он лежит. Индекс приходит из разметки,
+           «ещё» стоит первым и без индекса — поверх всех. */
+        &__compact-circle {
+            --rt-nav-compact-index: 0;
+
+            position: relative;
+            z-index: calc(var(--rt-nav-compact-stack-depth) - var(--rt-nav-compact-index));
+            display: inline-flex;
+            width: var(--rt-nav-compact-circle-size);
+            height: var(--rt-nav-compact-circle-size);
+            box-sizing: border-box;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            border-radius: var(--rt-nav-compact-circle-radius);
+            background-color: var(--rt-nav-compact-circle-color-bg);
+            box-shadow: 0 0 0 var(--rt-nav-compact-circle-ring-width) var(--rt-nav-compact-color-bg);
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            text-decoration: none;
+            transition: color var(--rt-nav-header-transition-duration) linear;
+
+            & + & {
+                margin-left: calc(-1 * var(--rt-nav-compact-circle-overlap));
+            }
+
+            &:hover {
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &:active {
+                color: var(--rt-nav-item-color-pressed);
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            /* Круг с фокусом поднимается над соседями: иначе кольцо фокуса режется следующим. */
+            &:focus-visible {
+                z-index: calc(var(--rt-nav-compact-stack-depth) + 1);
+                outline: 2px dashed var(--rt-nav-color-focus);
+                outline-offset: 2px;
+            }
+
+            &--is-active,
+            &--is-open {
+                background-color: var(--rt-nav-compact-circle-color-bg-active);
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &--disabled,
+            &:disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: not-allowed;
+            }
+        }
+
+        &__compact-marker {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            border-radius: var(--rt-nav-marker-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
+
+        &__compact-slot {
+            display: flex;
+            min-width: 0;
+            align-items: center;
+
+            &--left {
+                flex: 0 1 auto;
+            }
+
+            &--center {
+                flex: 1 1 auto;
+                justify-content: center;
+            }
+
+            &--right {
+                flex: 0 0 auto;
+                margin-left: auto;
+            }
+        }
+    }
+}

package/src/lib/components/ripple/rt-ripple.directive.scss

@@ -0,0 +1,46 @@
+@layer rt-kit.components {
+    /* Позиции здесь нет намеренно. Блок висит на каждой кнопке кита, и `position: relative`,
+       поставленный всем подряд, меняет растеризацию у восемнадцати кадров витрины, ничего не
+       двигая в раскладке. Позицию ставит сама директива — тому элементу, который нажали, и
+       только если он до сих пор `static`. */
+    .rt-ripple {
+        --rt-ripple-color: currentcolor;
+        --rt-ripple-opacity: 0.24;
+        --rt-ripple-duration: 550ms;
+        --rt-ripple-radius: var(--rt-radius-full);
+    }
+
+    /* Обрезает волну по форме элемента. Отдельным слоем, а не overflow на самом
+       элементе: у кнопки-значка метка вынесена за край, и она была бы срезана. */
+    .rt-ripple__area {
+        position: absolute;
+        overflow: hidden;
+        border-radius: inherit;
+        inset: 0;
+        pointer-events: none;
+    }
+
+    .rt-ripple__wave {
+        position: absolute;
+        border-radius: var(--rt-ripple-radius);
+        animation: rt-ripple-spread var(--rt-ripple-duration) ease-out forwards;
+        background-color: var(--rt-ripple-color);
+        opacity: var(--rt-ripple-opacity);
+        transform: scale(0);
+    }
+
+    /* Волна гаснет вместе с остальным движением: тот, кто попросил систему не
+       двигать интерфейс, получает подсветку без расхождения круга. */
+    @media (prefers-reduced-motion: reduce) {
+        .rt-ripple__wave {
+            animation-duration: 1ms;
+        }
+    }
+
+    @keyframes rt-ripple-spread {
+        to {
+            opacity: 0;
+            transform: scale(1);
+        }
+    }
+}

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

@@ -9,9 +9,9 @@
         overflow: hidden;
         background: linear-gradient(
             90deg,
-            var(--rt-color-bg-subtle) 0%,
-            var(--rt-color-border-default) 50%,
-            var(--rt-color-bg-subtle) 100%
+            var(--rt-color-skeleton-base) 0%,
+            var(--rt-color-skeleton-wave) 50%,
+            var(--rt-color-skeleton-base) 100%
         );
         background-size: 200% 100%;
 

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

@@ -30,6 +30,8 @@
 | `titleTemplate`                   | `TemplateRef \| null`                         | `null`                |
 | `icon` / `iconColor`              | `IRtIcon.Name \| null` / `IRtTabs.TitleColor` | `null` / `'current'`  |
 | `badge`                           | `string \| number \| null`                    | `null`                |
+| `badgeTitle`                      | `string` — подсказка при наведении на метку   | `''`                  |
+| `badgeAriaLabel`                  | `string` — подпись метки для чтения с экрана  | `''`                  |
 | `disabled` / `hidden` / `invalid` | `boolean`                                     | `false`               |
 | `invalidMessage`                  | `string`                                      | `''` → `uiTabInvalid` |
 
@@ -57,5 +59,7 @@
 
 - `hidden` убирает вкладку из шапки целиком; `disabled` оставляет её видимой, но некликабельной.
 - У невалидной вкладки появляется подсказка с текстом `invalidMessage`.
+- Метка без `badgeTitle` и `badgeAriaLabel` рисуется как прежде: голое значение, без подсказки и
+  без подписи. Подсказка метки — своя, на самой метке: подсказка кнопки занята неверной вкладкой.
 - Стрелки прокрутки шапки есть в разметке всегда — показывает их модификатор `--visible`,
   который выставляется по замеру ширины после отрисовки.

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

@@ -13,7 +13,7 @@
     (openInNewTab)="openInTab($event)"
     (searchChange)="search($event)"
     (loadMore)="next()">
-    <ng-template rtThreadListRow let-row>…</ng-template>
+    <ng-template let-row [rtThreadListRow]="rows()">…</ng-template>
     <ng-template rtThreadListFilters>…</ng-template>
 </rt-thread-list>
 ```
@@ -22,6 +22,11 @@
 `filtersActive`. Выходы: `selectRow`, `openInNewTab`, `searchChange`, `loadMore`.
 
 Строка обязана иметь `id`, `hasUnread` и (необязательно) `overdue` — это всё, что список о ней знает.
+Номер строки — число или строка: у записей домена ключ не всегда числовой. Тем же типом приходит
+`activeId` и уходят `selectRow` и `openInNewTab`.
+
+Тот же массив строк передаётся входом `[rtThreadListRow]` в шаблон строки: из него выводится тип
+`row`. Без этого входа строгая сборка приложения отказывает — атрибут без значения приходит строкой.
 
 ## Главное, что нужно знать
 

package/src/styles/_form.scss

@@ -0,0 +1,240 @@
+@use './breakpoints' as bp;
+
+/* Словарь формы панели: раздел, колонка контролов, строка контрола, элемент в ряду. Объявлен
+   классами, а не компонентом, поэтому доехать до потребителя может только через агрегатор
+   стилей. Иерархия одна на кит: до неё каждое приложение заводило свою, и одно имя значило в
+   двух деревьях разное — `controls` было и колонкой контролов раздела, и полосой кнопок внизу
+   панели.
+
+   Блок формы объявляется ровно один раз на панель и стоит НАД полосой вкладок: вкладки лежат
+   внутри формы, а не наоборот. Носителем бывает и `<form>`, и `<div>` — форма Angular и блок
+   формы разные вещи, и `[formGroup]` законно живёт ниже, обёрткой над одной строкой контрола.
+
+   Промежуток задаёт контейнер своим зазором, а своего отступа нет ни у одного элемента. Так у
+   каждого промежутка один источник: зазор не достаётся первому ребёнку, не складывается с
+   зазором зоны содержимого панели и действует на проецируемое содержимое наравне со своей
+   разметкой — а правило соседства знает только те имена, которые перечислены в нём самом. */
+
+@layer rt-kit.components {
+    .rt-form {
+        display: flex;
+        width: 100%;
+        flex: 1 1 100%;
+        flex-direction: column;
+        gap: var(--rt-space-xl);
+
+        /* Раздел: смысловая группа полей. Вкладывается в себя — цвет внутри сезона остаётся
+           разделом, а не заводит третье имя. */
+        &__item {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            gap: var(--rt-space-xl);
+        }
+
+        /* Колонка контролов раздела: всё, что в разделе выстроено сверху вниз. Её зазор — ритм
+           строк, и он же отбивает заголовок раздела от первой строки. */
+        &__controls {
+            position: relative;
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
+
+        /* Заголовок раздела и описание под ним. Оба живут внутри колонки контролов: подпись
+           принадлежит столбцу, а не разделу целиком. */
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__title-descr {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            line-height: var(--rt-leading-normal);
+        }
+
+        /* Строка контрола: один ряд колонки. Поле занимает строку целиком — иначе каждый
+           потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. */
+        &__control-item {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: flex-start;
+            gap: var(--rt-space-xl);
+
+            /* Поле, стоящее в строке одно, занимает её целиком. Без этого оно получает ширину
+               по содержимому и обрывается посреди строки, оставляя справа пустое место. */
+            > rt-field {
+                min-width: 0;
+                flex: 1 1 auto;
+            }
+        }
+
+        /* Строка, разведённая по краям: подпись у начала, значение у конца. Так стоит
+           карточка просмотра — записи в ней показывают, а не правят. */
+        &__control-item--split {
+            justify-content: space-between;
+        }
+
+        /* Строка колонкой: подпись сверху, контрол под ней. Берётся там, где подпись рядом с
+           контролом не встаёт — в узкой панели три состояния права рядом с его именем
+           переносились бы по слогам. */
+        &__control-item--stack {
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--rt-space-xs);
+        }
+
+        /* Элемент в ряду: два и больше контролов, стоящих рядом в одной строке. Нулевая нижняя
+           граница ширины обязательна: без неё длинное значение не даёт строке перенестись, и
+           соседи сжимаются до столбика по одной букве. */
+        &__control-sub-item {
+            display: flex;
+            min-width: 0;
+            align-items: center;
+            justify-content: flex-start;
+
+            /* Поле внутри элемента ряда занимает его целиком. Без этого элемент растянут своим
+               видом, а поле в нём стоит по ширине содержимого: в панели внешней брони шесть
+               полей занимали меньше половины своей колонки. */
+            > rt-field {
+                min-width: 0;
+                flex: 1 1 auto;
+            }
+        }
+
+        /* Подпись в паре «подпись — значение»: приглушённый цвет отличает её от значения. */
+        &__control-sub-item--label {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        /* Значение рядом с подписью: длинное переносится в любом месте — адрес почты и имя
+           процедуры по словам не переносятся. */
+        &__control-sub-item--value {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            overflow-wrap: anywhere;
+        }
+
+        /* Элемент, делящий ширину строки поровну с соседями: пара дат встаёт одной ширины, а не
+           по ширине своего содержимого. */
+        &__control-sub-item--grow {
+            flex: 1;
+        }
+
+        /* Значение снятой записи: адреса, которого больше нет. */
+        &__control-sub-item--gone {
+            color: var(--rt-color-text-muted);
+        }
+
+        /* Приписка о неудаче: приёмник запрос не принял. */
+        &__control-sub-item--warning {
+            color: var(--rt-color-state-warning);
+        }
+
+        /* Подпись над контролом — там, где своей подписи у контрола нет. */
+        &__label {
+            display: block;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+        }
+
+        /* Ссылка на связанную запись: обычная ссылка с иконкой перехода. */
+        &__related {
+            display: inline-flex;
+            align-items: center;
+            align-self: flex-start;
+            color: var(--rt-color-text-link);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-xs);
+        }
+
+        /* Полоса меток записи: их бывает много, и в одну строку они не влезают. */
+        &__tags {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            gap: var(--rt-space-xs);
+        }
+
+        /* Строки одной службы в общей рамке: ключей у службы бывает два, и рамка на каждом
+           читалась бы как две разные карточки. */
+        &__framed-list {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-radius-md);
+
+            > * + * {
+                border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+            }
+        }
+
+        /* Длинное тело запроса или ответа: по словам оно не переносится и прокручивается внутри
+           своего блока, чтобы не растягивать панель. */
+        &__code {
+            overflow: auto;
+            padding: var(--rt-space-xs);
+            border-radius: var(--rt-radius-sm);
+            margin: 0;
+            background: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xs);
+            max-block-size: 12rem;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+        }
+
+        /* Просмотр готового документа: лист виден целиком, рамка отделяет его от полей. */
+        &__preview {
+            width: 100%;
+            height: 460px;
+            flex-shrink: 0;
+            border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-radius-sm);
+        }
+
+        /* Запись внутри общей рамки: свой внутренний отступ и ритм строк. Без него строки
+           записей лежат вплотную к рамке и к соседней записи, и перечень читается сплошной
+           лентой слов. */
+        &__framed-item {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            gap: var(--rt-space-xs);
+        }
+
+        /* Маячок догрузки в конце списка: он невидим и только отмечает низ, до которого
+           дочитали. */
+        &__sentinel {
+            block-size: 1px;
+        }
+
+        /* Зона содержимого вкладки внутри формы: разделы лежат в ней, и ритм у них тот же, что
+           у разделов вне вкладок. Своим зазором зона вкладок отбивает произвольное содержимое,
+           и разделы формы получали от неё чужой шаг — панель с вкладками и панель без них
+           показывали одни и те же разделы по-разному. */
+        .rt-tabs__content {
+            gap: var(--rt-space-xl);
+        }
+    }
+
+    /* На узком экране панель занимает весь экран, и ритм разделов сжимается вдвое. Порог тот же,
+       что у самой панели. Ритм строк не трогается: строки и на узком идут тем же шагом. */
+    @media (width <= #{bp.$rt-bp-md}) {
+        .rt-form,
+        .rt-form__item,
+        .rt-form .rt-tabs__content {
+            gap: var(--rt-space-md);
+        }
+    }
+}

package/src/styles/_index.scss

@@ -8,6 +8,12 @@
 
 @forward './primitives';
 @forward './semantic';
+
+// Материальный набор стоит между назначениями и тёмной темой: у признака набора и признака
+// тёмной темы на корне одинаковая специфичность, и порядок здесь — единственное, чем тёмная
+// тема выигрывает у набора.
+@forward './preset-material';
+
 @forward './theme-dark';
 @forward './theme-dark-rules';
 @forward './scrollbar';
@@ -18,7 +24,17 @@
 // этого не видят — истории у экрана входа нет.
 @forward './login';
 
+// Словарь формы панели: раздел, колонка контролов, строка контрола, элемент в ряду. Он тоже
+// объявлен классами, а не компонентом, и другого пути к потребителю у него нет. Без этой строки
+// приложение размечает панель именами, которым ни одно правило не отвечает, — то есть заводит
+// раскладку у себя, ради чего словарь и переехал в кит.
+@forward './form';
+
 // Стили директивы кнопки: своего представления у директивы нет, поэтому её `.scss` не
 // подключён ни одним `styleUrl`. Без этой строки потребитель, взявший `tokens.css` по
 // инструкции README, получает `rtButton`, нарисованный браузерной кнопкой.
 @forward '../lib/components/button/rt-button.directive';
+
+// Стили волны нажатия — по той же причине: директива своего представления не имеет.
+// Без этой строки узел волны ставится в разметку и остаётся невидимым.
+@forward '../lib/components/ripple/rt-ripple.directive';