@rt-tools/ui-kit-v2 0.8.0 → 0.10.0

package/styles/tokens.css

@@ -21,10 +21,10 @@
    Кит его за потребителя не подключает: редактор текста опционален, и тянуть его тему в
    пакет значило бы отдать её всем. */
 @layer rt-kit.vendor, rt-kit.base, rt-kit.components;
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
-/* Ступени шкал — значения, из которых слой назначений выбирает. Единственное место кита, где
-   код цвета и размер числом законны по определению. */
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+/* The scale steps — the values the assignment layer chooses from. The only place in the kit where
+   a colour code and a size as a number are lawful by definition. */
 :root {
   /* Neutral scale — серая, без цветности.
 
@@ -282,16 +282,78 @@
   --rt-bp-md: 768px;
   --rt-bp-lg: 1080px;
   --rt-bp-xl: 1380px;
+  /* Материальный набор: нейтральный ряд первого кита */
+  --rt-mat-neutral-0: #fff;
+  --rt-mat-neutral-5: #f5f6f8;
+  --rt-mat-neutral-10: #f3f3f3;
+  --rt-mat-neutral-15: #eee;
+  --rt-mat-neutral-20: #e8e8e8;
+  --rt-mat-neutral-25: #e0e0e0;
+  --rt-mat-neutral-30: #d1d1d1;
+  --rt-mat-neutral-35: #ccc;
+  --rt-mat-neutral-40: #a3a3a3;
+  --rt-mat-neutral-60: #747474;
+  --rt-mat-neutral-80: #323033;
+  --rt-mat-neutral-100: #181818;
+  /* Материальный набор: синий — действие, ссылка, кольцо фокуса */
+  --rt-mat-blue-20: #eaedfc;
+  --rt-mat-blue-40: #b3ceef;
+  --rt-mat-blue-60: #6d96e8;
+  --rt-mat-blue-80: #4285f4;
+  --rt-mat-blue-100: #4284d7;
+  /* Материальный набор: красный — опасное действие и ошибка */
+  --rt-mat-red-10: #fdedee;
+  --rt-mat-red-20: #efc0c1;
+  --rt-mat-red-40: #f7b9bb;
+  --rt-mat-red-60: #e88487;
+  --rt-mat-red-80: #df6064;
+  --rt-mat-red-100: #eb5055;
+  /* Материальный набор: оранжевый — предупреждение */
+  --rt-mat-orange-5: #f6e4d9;
+  --rt-mat-orange-10: #e8cbbf;
+  --rt-mat-orange-20: #e1ba9e;
+  --rt-mat-orange-40: #e4a985;
+  --rt-mat-orange-60: #f1a05d;
+  --rt-mat-orange-70: #f2994a;
+  --rt-mat-orange-80: #ee7a34;
+  --rt-mat-orange-100: #ef7128;
+  /* Материальный набор: зелёный — успех */
+  --rt-mat-green-10: #e5f8f4;
+  --rt-mat-green-20: #baf4e0;
+  --rt-mat-green-40: #5dbfbc;
+  --rt-mat-green-60: #46c4c0;
+  --rt-mat-green-80: #21b18e;
+  --rt-mat-green-100: #01af8d;
+  /* Материальный набор: марка первого кита и подложка его обвязки */
+  --rt-mat-navy-100: #0d1c2b;
+  /* Прозрачные оттенки считаются от своих ступеней, а не повторяют их коды цвета. */
+  --rt-mat-overlay-black-4: color-mix(in srgb, var(--rt-mat-neutral-100) 4%, transparent);
+  --rt-mat-overlay-black-32: color-mix(in srgb, var(--rt-mat-neutral-100) 32%, transparent);
+  --rt-mat-overlay-blue-8: color-mix(in srgb, var(--rt-mat-blue-100) 8%, transparent);
+  --rt-mat-overlay-blue-24: color-mix(in srgb, var(--rt-mat-blue-100) 24%, transparent);
+  /* Наведение и нажатие первый кит считает от своей ступени тем же приёмом — подмешивая
+     чёрное. Ступени здесь считаются так же, а не подбираются на глаз: иначе перекрашенная
+     марка перестанет темнеть под курсором вместе с остальным. */
+  --rt-mat-blue-hover: color-mix(in srgb, var(--rt-mat-blue-100) 90%, #000);
+  --rt-mat-blue-active: color-mix(in srgb, var(--rt-mat-blue-100) 80%, #000);
+  --rt-mat-green-hover: color-mix(in srgb, var(--rt-mat-green-80) 90%, #000);
+  --rt-mat-green-active: color-mix(in srgb, var(--rt-mat-green-80) 80%, #000);
+  --rt-mat-orange-hover: color-mix(in srgb, var(--rt-mat-orange-80) 90%, #000);
+  --rt-mat-orange-active: color-mix(in srgb, var(--rt-mat-orange-80) 80%, #000);
+  --rt-mat-red-hover: color-mix(in srgb, var(--rt-mat-red-100) 90%, #000);
+  --rt-mat-red-active: color-mix(in srgb, var(--rt-mat-red-100) 80%, #000);
+  --rt-mat-neutral-hover: color-mix(in srgb, var(--rt-mat-neutral-60) 90%, #000);
+  --rt-mat-neutral-active: color-mix(in srgb, var(--rt-mat-neutral-60) 80%, #000);
 }
 
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
-/* Назначения светлой темы.
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+/* The light theme's assignments.
 
-   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
-   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
-   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
-   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
+   The body is carried into an @mixin for the same reason as the dark theme's: the set is needed not
+   only on `:root` but on a separate container too. Without that the light half of the
+   pair «light ↔ dark» cannot be shown while the application stands in the dark theme —
+   the container would inherit the dark values, and both halves would show the same. */
 :root {
   /* Background */
   --rt-color-bg-page: var(--rt-neutral-50);
@@ -404,16 +466,6 @@
   --rt-shadow-focus-ring-danger:
       0 0 0 var(--rt-focus-ring-offset) var(--rt-color-bg-surface),
       0 0 0 calc(var(--rt-focus-ring-offset) + var(--rt-focus-ring-width)) var(--rt-focus-ring-color-danger);
-  /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
-     в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
-  --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
-  --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
-  --rt-color-stepper-track: var(--rt-gray-350);
-  --rt-color-stepper-progress: var(--rt-color-action-primary);
-  /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
-  --rt-shadow-step-indicator: 0 0 0 4px var(--rt-color-stepper-current-subtle);
-  /* Status-dot ring — halo вокруг точки «объект занят сейчас». */
-  --rt-shadow-status-dot: 0 0 0 3px var(--rt-color-state-success-bg);
   /* State */
   --rt-color-state-success: var(--rt-success-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-success-bg: var(--rt-success-50);
@@ -427,6 +479,16 @@
   --rt-color-state-error-text: var(--rt-danger-600);
   --rt-color-state-info: var(--rt-info-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-info-bg: var(--rt-info-50);
+  /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
+     в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
+  --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
+  --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
+  --rt-color-stepper-track: var(--rt-gray-350);
+  --rt-color-stepper-progress: var(--rt-color-action-primary);
+  /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
+  --rt-shadow-step-indicator: 0 0 0 4px var(--rt-color-stepper-current-subtle);
+  /* Status-dot ring — halo вокруг точки «объект занят сейчас». */
+  --rt-shadow-status-dot: 0 0 0 3px var(--rt-color-state-success-bg);
   /* Chat — пузыри переписки. Входящее и своё различаются фоном, а не рамкой:
      рамка на каждом пузыре дробит ленту. Отметка прочтения синяя — единственный
      цветной элемент подвала пузыря, остальные статусы приглушены. */
@@ -439,6 +501,11 @@
   /* Special — Auth surface (gradient bg + transparent card в dark) */
   --rt-color-bg-page-auth: var(--rt-neutral-50);
   --rt-color-bg-surface-auth-card: var(--rt-neutral-0);
+  /* Skeleton (rt-skeleton) — заглушка загрузки. Два конца перелива: покой и гребень
+     волны. Имена свои, а не роли подложки и рамки: в светлом наборе те ведут на одну краску,
+     и перелив между ними стоял ровной заливкой. */
+  --rt-color-skeleton-base: var(--rt-neutral-100);
+  --rt-color-skeleton-wave: var(--rt-neutral-50);
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -471,8 +538,12 @@
   /* Кап ширины одиночного контрола (input/select) в тулбарах list-страниц —
      внутри flex-баров контрол без ограничения растягивается на всю строку. */
   --rt-input-max-width: var(--rt-control-max-width);
+  /* Скругление контрола — назначение, а не ступень на месте. Кнопка, поле ввода и
+     всё, что стоит с ними в строке, берут его отсюда: набор оформления живёт слоем
+     назначений и до ступени, взятой компонентом напрямую, не достаёт. */
+  --rt-radius-control: var(--rt-radius-lg);
   /* Radius / spacing / border */
-  --rt-input-radius: var(--rt-radius-lg);
+  --rt-input-radius: var(--rt-radius-control);
   --rt-input-padding-x: var(--rt-space-4);
   --rt-input-padding-y: var(--rt-space-0);
   --rt-input-border-width: var(--rt-border-width-thin);
@@ -624,29 +695,119 @@
   --rt-field-value-empty-color: var(--rt-color-text-muted);
 }
 
-/* На тач-устройствах инпут не меньше 16px: WebKit (весь iOS, включая Chrome)
-   зумит страницу при фокусе на поле с font-size < 16px — отсюда горизонтальный
-   сдвиг вёрстки. Десктоп сохраняет плотный 14px. */
+/* On touch devices an input is not smaller than 16px: WebKit (all of iOS, Chrome included)
+   zooms the page on focusing a field with font-size < 16px — hence the horizontal
+   shift of the layout. The desktop keeps the dense 14px. */
 @media (pointer: coarse) {
   :root {
     --rt-input-font-size: var(--rt-text-md);
   }
 }
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
-/* Тёмная тема — переопределение назначений; ступени шкалы неизменны.
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+/* The material preset — a second layer of assignments: the kit drawn in the look of the first kit.
+
+   It does not touch the scale steps: a rewritten step would repaint the dark theme as well,
+   and the dark theme refers to those same steps. The values come from the material steps of the scale.
 
-   Тело вынесено в @mixin, чтобы тот же набор переопределений можно было
-   применить не только на html-уровне (тема приложения), но и к локальному
-   контейнеру (side-by-side light/dark в Storybook) — без дублирования значений.
+   The body is taken into a @mixin for the same reason as the dark theme's: the preset is needed not
+   only on `:root` but on a separate container too — otherwise two presets cannot be shown side by side.
+
+   The preset rule is declared before the dark theme on purpose: the root signs have equal
+   specificity, and the order in the file is the only thing by which the dark theme wins over the preset. */
+:root[data-preset=material],
+[data-preset=material],
+.rt-preset-material {
+  /* Подложки */
+  --rt-color-bg-page: var(--rt-mat-neutral-5);
+  --rt-color-bg-surface: var(--rt-mat-neutral-0);
+  --rt-color-bg-surface-subtle: var(--rt-mat-overlay-black-4);
+  --rt-color-bg-surface-subtle-2: var(--rt-mat-neutral-15);
+  --rt-color-bg-hover: var(--rt-mat-neutral-10);
+  --rt-color-bg-subtle: var(--rt-mat-neutral-10);
+  --rt-color-bg-overlay: var(--rt-mat-overlay-black-32);
+  --rt-color-bg-inverse: var(--rt-mat-neutral-100);
+  --rt-color-bg-nav: var(--rt-mat-navy-100); /* марка первого кита: обвязка тёмная в обоих наборах */
+  --rt-color-bg-page-auth: var(--rt-mat-neutral-5);
+  --rt-color-bg-surface-auth-card: var(--rt-mat-neutral-0);
+  /* Текст */
+  --rt-color-text-primary: var(--rt-mat-neutral-100);
+  --rt-color-text-muted: var(--rt-mat-neutral-60);
+  --rt-color-text-disabled: var(--rt-mat-neutral-40);
+  --rt-color-text-inverse: var(--rt-mat-neutral-0);
+  --rt-color-text-link: var(--rt-mat-blue-100);
+  --rt-color-text-link-hover: var(--rt-mat-blue-hover);
+  /* Рамки */
+  --rt-color-border-default: var(--rt-mat-neutral-25);
+  --rt-color-border-strong: var(--rt-mat-neutral-30);
+  --rt-color-border-subtle: var(--rt-mat-neutral-20);
+  --rt-color-border-focus: var(--rt-mat-blue-40); /* кольцо фокуса первого кита светлее его действия */
+  /* Действие: подложка, наведение, нажатие, подпись на них и цвет роли на поверхности */
+  --rt-color-action-primary: var(--rt-mat-blue-100);
+  --rt-color-action-primary-hover: var(--rt-mat-blue-hover);
+  --rt-color-action-primary-active: var(--rt-mat-blue-active);
+  --rt-color-action-primary-subtle: var(--rt-mat-overlay-blue-8);
+  --rt-color-action-primary-soft: var(--rt-mat-overlay-blue-24);
+  --rt-color-action-on-primary: var(--rt-mat-neutral-0);
+  --rt-color-action-secondary: var(--rt-mat-neutral-60);
+  --rt-color-action-secondary-hover: var(--rt-mat-neutral-hover);
+  --rt-color-action-secondary-active: var(--rt-mat-neutral-active);
+  --rt-color-action-on-secondary: var(--rt-mat-neutral-0);
+  --rt-color-action-secondary-on-surface: var(--rt-mat-neutral-60);
+  --rt-color-action-success: var(--rt-mat-green-80);
+  --rt-color-action-success-hover: var(--rt-mat-green-hover);
+  --rt-color-action-success-active: var(--rt-mat-green-active);
+  --rt-color-action-on-success: var(--rt-mat-neutral-0);
+  --rt-color-action-warning: var(--rt-mat-orange-80);
+  --rt-color-action-warning-hover: var(--rt-mat-orange-hover);
+  --rt-color-action-warning-active: var(--rt-mat-orange-active);
+  --rt-color-action-on-warning: var(--rt-mat-neutral-0);
+  --rt-color-action-danger: var(--rt-mat-red-100);
+  --rt-color-action-danger-hover: var(--rt-mat-red-hover);
+  --rt-color-action-danger-active: var(--rt-mat-red-active);
+  --rt-color-action-on-danger: var(--rt-mat-neutral-0);
+  --rt-color-action-info: var(--rt-mat-blue-100);
+  --rt-color-action-info-hover: var(--rt-mat-blue-hover);
+  --rt-color-action-info-active: var(--rt-mat-blue-active);
+  --rt-color-action-on-info: var(--rt-mat-neutral-0);
+  --rt-color-action-disabled: var(--rt-mat-neutral-25);
+  /* Состояния: цвет роли и её светлая подложка */
+  --rt-color-state-success: var(--rt-mat-green-100);
+  --rt-color-state-success-bg: var(--rt-mat-green-10);
+  --rt-color-state-warning: var(--rt-mat-orange-100);
+  --rt-color-state-warning-bg: var(--rt-mat-orange-5);
+  --rt-color-state-warning-text: var(--rt-mat-orange-100);
+  --rt-color-state-danger: var(--rt-mat-red-100);
+  --rt-color-state-danger-bg: var(--rt-mat-red-10);
+  --rt-color-state-error-text: var(--rt-mat-red-100);
+  --rt-color-state-info: var(--rt-mat-blue-100);
+  --rt-color-state-info-bg: var(--rt-mat-blue-20);
+  /* Рельса шагов */
+  --rt-color-stepper-track: var(--rt-mat-neutral-30);
+  /* Заглушка загрузки: краски те же, что набор давал ей прежде через подложку и
+     рамку, — вид под набором от разведения концов не поехал. */
+  --rt-color-skeleton-base: var(--rt-mat-neutral-10);
+  --rt-color-skeleton-wave: var(--rt-mat-neutral-25);
+  /* Кнопка и поле первого кита скруглены заметно сильнее: 1.5rem против 10px.
+     Значение снято числом — ссылки на токены первого кита во второй кит не едут. */
+  --rt-radius-control: 1.5rem;
+}
 
-   База (`rt-theme-dark-tokens`) — тёплый графит для приложений и всех
-   CDK-overlay'ев (асайды/диалоги/меню рендерятся на уровне body, вне
-   host-классов шеллов — поэтому графит держим на :root, иначе overlay'и
-   не наследовали бы палитру).
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+/* The dark theme — an override of the assignments; the scale steps are unchanging.
 
-   Значения ответов живут в источнике рядом со своим светлым назначением: забытая половина
-   пары видна там же, а не вылавливается сверкой двух файлов. */
+   The body is carried into an @mixin so that the same set of overrides could be
+   applied not only at the html level (the application's theme) but to a local
+   container too (side-by-side light/dark in Storybook) — without duplicating the values.
+
+   The base (`rt-theme-dark-tokens`) is warm graphite for the applications and all the
+   CDK overlays (asides/dialogs/menus are rendered at the body level, outside the
+   shells' host classes — so the graphite is held on :root, otherwise the overlays
+   would not inherit the palette).
+
+   The values of the answers live in the source next to their light assignment: a forgotten half of
+   a pair is visible right there rather than caught by matching two files. */
 :root[data-theme=dark],
 html.rt-theme-dark {
   /* Background — тёплый графит */
@@ -750,6 +911,9 @@ html.rt-theme-dark {
   /* Special — Auth surface (градиентный фон логина + прозрачная карточка). */
   --rt-color-bg-page-auth: linear-gradient(156deg, var(--rt-neutral-950) 12.68%, var(--rt-navy-900) 99.28%);
   --rt-color-bg-surface-auth-card: transparent;
+  /* Skeleton — заглушка загрузки: покой и гребень волны. */
+  --rt-color-skeleton-base: var(--rt-charcoal-950);
+  --rt-color-skeleton-wave: var(--rt-charcoal-border);
 }
 
 /* Правила тёмной темы, которые свойств не объявляют. Стоят отдельно от `_theme-dark.scss`:
@@ -774,6 +938,14 @@ html.rt-theme-dark {
   }
 }
 @layer rt-kit.base {
+  * {
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+  }
+  *:hover,
+  *:focus-within {
+    scrollbar-color: var(--rt-color-border-default) transparent;
+  }
   ::-webkit-scrollbar {
     width: 12px;
   }
@@ -783,6 +955,11 @@ html.rt-theme-dark {
   ::-webkit-scrollbar-thumb {
     border: var(--rt-border-width-thick) solid transparent;
     border-radius: var(--rt-radius-md);
+    background: transparent;
+    background-clip: content-box;
+  }
+  *:hover::-webkit-scrollbar-thumb,
+  *:focus-within::-webkit-scrollbar-thumb {
     background: var(--rt-color-border-default);
     background-clip: content-box;
   }
@@ -794,6 +971,15 @@ html.rt-theme-dark {
   ::-webkit-scrollbar-track:hover {
     border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
   }
+  @media (hover: none) {
+    * {
+      scrollbar-color: var(--rt-color-border-default) transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--rt-color-border-default);
+      background-clip: content-box;
+    }
+  }
 }
 @layer rt-kit.base {
   .login__viewport {
@@ -883,6 +1069,257 @@ html.rt-theme-dark {
     outline-offset: 2px;
   }
 }
+/* Словарь формы панели: раздел, колонка контролов, строка контрола, элемент в ряду. Объявлен
+   классами, а не компонентом, поэтому доехать до потребителя может только через агрегатор
+   стилей. Иерархия одна на кит: до неё каждое приложение заводило свою, и одно имя значило в
+   двух деревьях разное — `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);
+    /* Раздел: смысловая группа полей. Вкладывается в себя — цвет внутри сезона остаётся
+       разделом, а не заводит третье имя. */
+  }
+  .rt-form__item {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--rt-space-xl);
+  }
+  .rt-form {
+    /* Колонка контролов раздела: всё, что в разделе выстроено сверху вниз. Её зазор — ритм
+       строк, и он же отбивает заголовок раздела от первой строки. */
+  }
+  .rt-form__controls {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--rt-space-md);
+  }
+  .rt-form {
+    /* Заголовок раздела и описание под ним. Оба живут внутри колонки контролов: подпись
+       принадлежит столбцу, а не разделу целиком. */
+  }
+  .rt-form__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);
+  }
+  .rt-form__title-descr {
+    margin: 0;
+    color: var(--rt-color-text-muted);
+    font-size: var(--rt-text-sm);
+    line-height: var(--rt-leading-normal);
+  }
+  .rt-form {
+    /* Строка контрола: один ряд колонки. Поле занимает строку целиком — иначе каждый
+       потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. */
+  }
+  .rt-form__control-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--rt-space-xl);
+    /* Поле, стоящее в строке одно, занимает её целиком. Без этого оно получает ширину
+       по содержимому и обрывается посреди строки, оставляя справа пустое место. */
+  }
+  .rt-form__control-item > rt-field {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  .rt-form {
+    /* Строка, разведённая по краям: подпись у начала, значение у конца. Так стоит
+       карточка просмотра — записи в ней показывают, а не правят. */
+  }
+  .rt-form__control-item--split {
+    justify-content: space-between;
+  }
+  .rt-form {
+    /* Строка колонкой: подпись сверху, контрол под ней. Берётся там, где подпись рядом с
+       контролом не встаёт — в узкой панели три состояния права рядом с его именем
+       переносились бы по слогам. */
+  }
+  .rt-form__control-item--stack {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--rt-space-xs);
+  }
+  .rt-form {
+    /* Элемент в ряду: два и больше контролов, стоящих рядом в одной строке. Нулевая нижняя
+       граница ширины обязательна: без неё длинное значение не даёт строке перенестись, и
+       соседи сжимаются до столбика по одной букве. */
+  }
+  .rt-form__control-sub-item {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: flex-start;
+    /* Поле внутри элемента ряда занимает его целиком. Без этого элемент растянут своим
+       видом, а поле в нём стоит по ширине содержимого: в панели внешней брони шесть
+       полей занимали меньше половины своей колонки. */
+  }
+  .rt-form__control-sub-item > rt-field {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  .rt-form {
+    /* Подпись в паре «подпись — значение»: приглушённый цвет отличает её от значения. */
+  }
+  .rt-form__control-sub-item--label {
+    color: var(--rt-color-text-muted);
+    font-size: var(--rt-text-sm);
+  }
+  .rt-form {
+    /* Значение рядом с подписью: длинное переносится в любом месте — адрес почты и имя
+       процедуры по словам не переносятся. */
+  }
+  .rt-form__control-sub-item--value {
+    color: var(--rt-color-text-primary);
+    font-size: var(--rt-text-sm);
+    overflow-wrap: anywhere;
+  }
+  .rt-form {
+    /* Элемент, делящий ширину строки поровну с соседями: пара дат встаёт одной ширины, а не
+       по ширине своего содержимого. */
+  }
+  .rt-form__control-sub-item--grow {
+    flex: 1;
+  }
+  .rt-form {
+    /* Значение снятой записи: адреса, которого больше нет. */
+  }
+  .rt-form__control-sub-item--gone {
+    color: var(--rt-color-text-muted);
+  }
+  .rt-form {
+    /* Приписка о неудаче: приёмник запрос не принял. */
+  }
+  .rt-form__control-sub-item--warning {
+    color: var(--rt-color-state-warning);
+  }
+  .rt-form {
+    /* Подпись над контролом — там, где своей подписи у контрола нет. */
+  }
+  .rt-form__label {
+    display: block;
+    color: var(--rt-color-text-primary);
+    font-size: var(--rt-text-sm);
+    font-weight: var(--rt-font-weight-medium);
+  }
+  .rt-form {
+    /* Ссылка на связанную запись: обычная ссылка с иконкой перехода. */
+  }
+  .rt-form__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);
+  }
+  .rt-form {
+    /* Полоса меток записи: их бывает много, и в одну строку они не влезают. */
+  }
+  .rt-form__tags {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: var(--rt-space-xs);
+  }
+  .rt-form {
+    /* Строки одной службы в общей рамке: ключей у службы бывает два, и рамка на каждом
+       читалась бы как две разные карточки. */
+  }
+  .rt-form__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);
+  }
+  .rt-form__framed-list > * + * {
+    border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+  }
+  .rt-form {
+    /* Длинное тело запроса или ответа: по словам оно не переносится и прокручивается внутри
+       своего блока, чтобы не растягивать панель. */
+  }
+  .rt-form__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;
+  }
+  .rt-form {
+    /* Просмотр готового документа: лист виден целиком, рамка отделяет его от полей. */
+  }
+  .rt-form__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);
+  }
+  .rt-form {
+    /* Запись внутри общей рамки: свой внутренний отступ и ритм строк. Без него строки
+       записей лежат вплотную к рамке и к соседней записи, и перечень читается сплошной
+       лентой слов. */
+  }
+  .rt-form__framed-item {
+    display: flex;
+    flex-direction: column;
+    padding: var(--rt-space-sm) var(--rt-space-md);
+    gap: var(--rt-space-xs);
+  }
+  .rt-form {
+    /* Маячок догрузки в конце списка: он невидим и только отмечает низ, до которого
+       дочитали. */
+  }
+  .rt-form__sentinel {
+    block-size: 1px;
+  }
+  .rt-form {
+    /* Зона содержимого вкладки внутри формы: разделы лежат в ней, и ритм у них тот же, что
+       у разделов вне вкладок. Своим зазором зона вкладок отбивает произвольное содержимое,
+       и разделы формы получали от неё чужой шаг — панель с вкладками и панель без них
+       показывали одни и те же разделы по-разному. */
+  }
+  .rt-form .rt-tabs__content {
+    gap: var(--rt-space-xl);
+  }
+  /* На узком экране панель занимает весь экран, и ритм разделов сжимается вдвое. Порог тот же,
+     что у самой панели. Ритм строк не трогается: строки и на узком идут тем же шагом. */
+  @media (width <= 768px) {
+    .rt-form,
+    .rt-form__item,
+    .rt-form .rt-tabs__content {
+      gap: var(--rt-space-md);
+    }
+  }
+}
 @layer rt-kit.components {
   .rt-button {
     /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и
@@ -890,7 +1327,7 @@ html.rt-theme-dark {
     --rt-btn-height: var(--rt-control-height-md);
     --rt-btn-padding: 0 1.25rem;
     --rt-btn-gap: 0.5rem;
-    --rt-btn-radius: var(--rt-radius-lg);
+    --rt-btn-radius: var(--rt-radius-control);
     --rt-btn-border-width: var(--rt-border-width-thin);
     --rt-btn-transition-duration: var(--rt-duration-fast);
     --rt-btn-focus-shadow: var(--rt-shadow-focus-ring);
@@ -939,6 +1376,9 @@ html.rt-theme-dark {
   .rt-button:active:not(:disabled) {
     background: var(--rt-btn-bg-active);
   }
+  .rt-button--pressed {
+    background: var(--rt-btn-bg-active);
+  }
   .rt-button:focus-visible {
     box-shadow: var(--rt-btn-focus-shadow);
     outline: 2px solid transparent;
@@ -1169,3 +1609,45 @@ html.rt-theme-dark {
     }
   }
 }
+@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);
+    }
+  }
+}