@rt-tools/ui-kit-v2 0.17.0 → 0.19.0

package/src/lib/components/action-bar/rt-action-bar.component.scss

@@ -4,22 +4,36 @@
     /* rt-action-bar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-action-bar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
+    /* Свойства полосы приложение задаёт на любом предке, хоть на корне страницы: на самой полосе
+       объявлены только умолчания с приставкой `-default`, а читается свойство с запасным значением.
+       Объявленное на полосе под публичным именем перебило бы правило предка — так было до RT-2619. */
     .rt-action-bar {
-        --rt-action-bar-radius: var(--rt-radius-lg);
-        --rt-action-bar-shadow: var(--rt-shadow-card);
-        --rt-action-bar-bg: var(--rt-color-bg-inverse);
-        --rt-action-bar-color: var(--rt-color-text-inverse);
-        --rt-action-bar-padding: var(--rt-space-2) var(--rt-space-4);
-        --rt-action-bar-gap: var(--rt-space-4);
-        --rt-action-bar-font-size: var(--rt-text-sm);
-        --rt-action-bar-counter-weight: var(--rt-font-weight-medium);
-        --rt-action-bar-action-radius: var(--rt-radius-md);
-        --rt-action-bar-action-padding-block: var(--rt-space-1);
-        --rt-action-bar-action-padding-inline: var(--rt-space-2);
-        --rt-action-bar-action-weight: var(--rt-font-weight-medium);
-        --rt-action-bar-action-bg-hover: color-mix(in srgb, var(--rt-action-bar-color) 16%, transparent);
-        --rt-action-bar-action-color-danger: var(--rt-color-action-danger-on-surface);
-        --rt-action-bar-action-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-action-bar-radius-default: var(--rt-radius-lg);
+        --rt-action-bar-shadow-default: var(--rt-shadow-card);
+        --rt-action-bar-bg-default: var(--rt-color-bg-inverse);
+        --rt-action-bar-color-default: var(--rt-color-text-inverse);
+        --rt-action-bar-padding-default: var(--rt-space-2) var(--rt-space-4);
+        --rt-action-bar-gap-default: var(--rt-space-4);
+        --rt-action-bar-font-size-default: var(--rt-text-sm);
+        --rt-action-bar-counter-weight-default: var(--rt-font-weight-medium);
+        --rt-action-bar-counter-font-size-default: 1em;
+        --rt-action-bar-action-radius-default: var(--rt-radius-md);
+        --rt-action-bar-action-padding-block-default: var(--rt-space-1);
+        --rt-action-bar-action-padding-inline-default: var(--rt-space-2);
+        --rt-action-bar-action-weight-default: var(--rt-font-weight-medium);
+        --rt-action-bar-action-height-default: auto;
+        --rt-action-bar-action-font-size-default: 1em;
+        --rt-action-bar-action-bg-hover-default: color-mix(
+            in srgb,
+            var(--rt-action-bar-color, var(--rt-action-bar-color-default)) 16%,
+            transparent
+        );
+        --rt-action-bar-action-color-danger-default: var(--rt-color-action-danger-on-surface);
+        --rt-action-bar-action-focus-shadow-default: var(--rt-shadow-focus-ring);
+        --rt-action-bar-icon-size-default: var(--rt-size-4);
+        --rt-action-bar-icon-gap-default: var(--rt-space-2);
+        --rt-action-bar-close-size-default: var(--rt-control-height-sm);
+        --rt-action-bar-close-icon-size-default: var(--rt-size-4);
 
         // Предел ширины стоит и на самом элементе. Содержащий блок полосы — этот элемент, и
         // без предела он растёт по содержимому: сто процентов считались бы тогда от выросшего,
@@ -29,16 +43,17 @@
         max-width: 100%;
         box-sizing: border-box;
         align-items: center;
-        padding: var(--rt-action-bar-padding);
-        border-radius: var(--rt-action-bar-radius);
-        background: var(--rt-action-bar-bg);
-        box-shadow: var(--rt-action-bar-shadow);
-        color: var(--rt-action-bar-color);
-        font-size: var(--rt-action-bar-font-size);
-        gap: var(--rt-action-bar-gap);
+        padding: var(--rt-action-bar-padding, var(--rt-action-bar-padding-default));
+        border-radius: var(--rt-action-bar-radius, var(--rt-action-bar-radius-default));
+        background: var(--rt-action-bar-bg, var(--rt-action-bar-bg-default));
+        box-shadow: var(--rt-action-bar-shadow, var(--rt-action-bar-shadow-default));
+        color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));
+        font-size: var(--rt-action-bar-font-size, var(--rt-action-bar-font-size-default));
+        gap: var(--rt-action-bar-gap, var(--rt-action-bar-gap-default));
 
         &__counter {
-            font-weight: var(--rt-action-bar-counter-weight);
+            font-size: var(--rt-action-bar-counter-font-size, var(--rt-action-bar-counter-font-size-default));
+            font-weight: var(--rt-action-bar-counter-weight, var(--rt-action-bar-counter-weight-default));
             white-space: nowrap;
         }
 
@@ -53,36 +68,46 @@
 
         &__action {
             display: flex;
+            min-height: var(--rt-action-bar-action-height, var(--rt-action-bar-action-height-default));
+            box-sizing: border-box;
             align-items: center;
-            padding: var(--rt-action-bar-action-padding-block) var(--rt-action-bar-action-padding-inline);
+            padding: var(--rt-action-bar-action-padding-block, var(--rt-action-bar-action-padding-block-default))
+                var(--rt-action-bar-action-padding-inline, var(--rt-action-bar-action-padding-inline-default));
             border: 0;
-            border-radius: var(--rt-action-bar-action-radius);
+            border-radius: var(--rt-action-bar-action-radius, var(--rt-action-bar-action-radius-default));
             background: transparent;
             color: inherit;
             cursor: pointer;
             font-family: inherit;
-            font-size: inherit;
+            font-size: var(--rt-action-bar-action-font-size, var(--rt-action-bar-action-font-size-default));
 
             // Нажатие в этом ките набрано средним начертанием — так набрана кнопка кита, и
             // действие полосы такое же нажатие. Первый кит ставил здесь шестьсот.
-            font-weight: var(--rt-action-bar-action-weight);
-            gap: var(--rt-space-2);
+            font-weight: var(--rt-action-bar-action-weight, var(--rt-action-bar-action-weight-default));
+            gap: var(--rt-action-bar-icon-gap, var(--rt-action-bar-icon-gap-default));
 
             &:hover {
-                background: var(--rt-action-bar-action-bg-hover);
+                background: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));
             }
 
             &:focus-visible {
-                box-shadow: var(--rt-action-bar-action-focus-shadow);
+                box-shadow: var(--rt-action-bar-action-focus-shadow, var(--rt-action-bar-action-focus-shadow-default));
                 outline: none;
             }
 
             &--danger {
-                color: var(--rt-action-bar-action-color-danger);
+                color: var(--rt-action-bar-action-color-danger, var(--rt-action-bar-action-color-danger-default));
             }
         }
 
+        // Значок ставит свой размер строкой стиля, и свойство полосы берёт верх через min и max —
+        // так же делает заглушка пустого состояния. Глиф шрифта Material без пары в наборе кита
+        // держит кегль своего шага: его значок пишет строкой стиля на самом глифе.
         &__action-icon {
+            min-width: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            max-width: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            min-height: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
+            max-height: var(--rt-action-bar-icon-size, var(--rt-action-bar-icon-size-default));
             flex: none;
         }
 
@@ -101,11 +126,25 @@
         // белому, и крестика не было видно ни в одном кадре. Своё свойство блока перебивают —
         // так делает просмотр фотографии, где кнопка стоит на снимке.
         &__close {
-            --rt-icon-button-color: var(--rt-action-bar-color);
-            --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover);
+            --rt-icon-button-color: var(--rt-action-bar-color, var(--rt-action-bar-color-default));
+            --rt-icon-button-color-bg-hover: var(--rt-action-bar-action-bg-hover, var(--rt-action-bar-action-bg-hover-default));
 
             flex: none;
             margin-left: auto;
+
+            // Размер кнопки — шаг самой иконочной кнопки: `--rt-icon-button-size` — ручка приложения,
+            // и кит её не объявляет. Шаг объявлен на внутренней кнопке правилом из двух классов,
+            // поэтому здесь три: хост с классом элемента и внутренняя кнопка.
+            &.rt-icon-button .rt-icon-button {
+                --rt-icon-button-size-step: var(--rt-action-bar-close-size, var(--rt-action-bar-close-size-default));
+            }
+
+            .rt-icon {
+                min-width: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                max-width: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                min-height: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+                max-height: var(--rt-action-bar-close-icon-size, var(--rt-action-bar-close-icon-size-default));
+            }
         }
 
         // Меню рисуется в оверлее, вне полосы: объявление на полосе до него не доходит, и раньше
@@ -115,14 +154,23 @@
         &__menu {
             --rt-action-bar-menu-radius-default: var(--rt-radius-md);
             --rt-action-bar-menu-shadow-default: var(--rt-shadow-card);
+            --rt-action-bar-menu-padding-default: var(--rt-space-2);
+            --rt-action-bar-menu-gap-default: 0;
+            --rt-action-bar-menu-item-font-size-default: var(--rt-text-sm);
 
             display: flex;
             flex-direction: column;
-            padding: var(--rt-space-2);
+            padding: var(--rt-action-bar-menu-padding, var(--rt-action-bar-menu-padding-default));
             border-radius: var(--rt-action-bar-menu-radius, var(--rt-action-bar-menu-radius-default));
             background: var(--rt-action-bar-menu-bg, var(--rt-color-bg-surface));
             box-shadow: var(--rt-action-bar-menu-shadow, var(--rt-action-bar-menu-shadow-default));
             color: var(--rt-action-bar-menu-color, var(--rt-color-text-primary));
+            gap: var(--rt-action-bar-menu-gap, var(--rt-action-bar-menu-gap-default));
+
+            // Кегль пункта у пункта меню свой; меню полосы переназначает его правилом большей силы.
+            .rt-menu-item {
+                font-size: var(--rt-action-bar-menu-item-font-size, var(--rt-action-bar-menu-item-font-size-default));
+            }
         }
 
         // Полоса живёт на нижней кромке, и пальцу нужно место, которое занимают подписи. Решает

package/src/lib/components/ai-run-status/CONTEXT.md

@@ -0,0 +1,36 @@
+# `rt-ai-run-status`
+
+```html
+<rt-ai-run-status [state]="run.state" [label]="run.label" [meta]="run.meta" [steps]="run.steps" [(expanded)]="stepsOpen" />
+```
+
+| вход       | тип                           | умолчание                     |
+| ---------- | ----------------------------- | ----------------------------- |
+| `state`    | `IRtAiRunStatus.State`        | обязателен                    |
+| `label`    | `string`                      | обязателен                    |
+| `meta`     | `string`                      | `''` — не рисуется            |
+| `steps`    | `readonly IRtTimeline.Step[]` | `[]` — строку нельзя раскрыть |
+| `expanded` | `boolean` (`model`)           | `false`                       |
+
+Выход: `expandedChange` — от `model` раскрытия.
+
+Спек — `docs/specs/ui-kit-v2/ai-run-status/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Строка презентационная.** Состояние, подпись, мета и шаги приходят готовыми: разбор потока
+событий модели и подсчёт времени — дело приложения.
+
+**С шагами вся строка — кнопка.** Без шагов кнопки нет, строка объявляется `role="status"`.
+`aria-expanded` и `aria-controls` стоят на кнопке, `id` — на ленте шагов.
+
+## Края
+
+- Блик подписи — градиент, обрезанный по тексту, и он бежит анимацией. При
+  `prefers-reduced-motion` анимации нет, подпись стоит цветом `--rt-ai-run-status-shimmer-from`.
+- `expanded` при пустом `steps` ничего не раскрывает: список рисуется только при шагах.
+
+## Рядом
+
+- [`rt-timeline`](../timeline/CONTEXT.md) — лента шагов под строкой.
+- [`rt-spinner`](../spinner/CONTEXT.md) — крутилка состояния `running`.

package/src/lib/components/ai-run-status/rt-ai-run-status.component.scss

@@ -0,0 +1,119 @@
+@layer rt-kit.components {
+    /* rt-ai-run-status — строка хода работы ассистента. ViewEncapsulation.None.
+       Класс блока висит и на хосте, и на корне шаблона, поэтому правила вложены в хост. */
+
+    rt-ai-run-status {
+        display: block;
+
+        .rt-ai-run-status {
+            --rt-ai-run-status-radius: var(--rt-radius-sm);
+            --rt-ai-run-status-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-ai-run-status-shimmer-duration: var(--rt-duration-slower);
+            --rt-ai-run-status-shimmer-from: var(--rt-color-text-muted);
+            --rt-ai-run-status-shimmer-to: var(--rt-color-action-primary-on-surface);
+
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+
+            &__row {
+                display: inline-flex;
+                align-items: center;
+                align-self: flex-start;
+                padding: var(--rt-space-2xs) 0;
+                border: 0;
+                border-radius: var(--rt-ai-run-status-radius);
+                margin: 0;
+                background: transparent;
+                color: inherit;
+                font: inherit;
+                gap: var(--rt-space-sm);
+                text-align: start;
+            }
+
+            button.rt-ai-run-status__row {
+                cursor: pointer;
+
+                &:focus-visible {
+                    box-shadow: var(--rt-ai-run-status-focus-shadow);
+                    outline: 2px solid transparent;
+                    outline-offset: 2px;
+                }
+
+                &:hover .rt-ai-run-status__chevron {
+                    color: var(--rt-color-text-primary);
+                }
+            }
+
+            &__mark {
+                display: inline-flex;
+                flex: none;
+                align-items: center;
+                justify-content: center;
+                block-size: 16px;
+                inline-size: 16px;
+            }
+
+            &__label {
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                line-height: var(--rt-leading-snug);
+
+                &--state--running {
+                    animation: rt-ai-run-status-shimmer var(--rt-ai-run-status-shimmer-duration) linear infinite;
+                    background: linear-gradient(
+                        90deg,
+                        var(--rt-ai-run-status-shimmer-from) 0%,
+                        var(--rt-ai-run-status-shimmer-to) 50%,
+                        var(--rt-ai-run-status-shimmer-from) 100%
+                    );
+                    background-clip: text;
+                    background-size: 200% 100%;
+                    color: transparent;
+                }
+
+                &--state--stopped {
+                    color: var(--rt-color-text-muted);
+                }
+
+                &--state--failed {
+                    color: var(--rt-color-action-danger-on-surface);
+                }
+            }
+
+            &__meta {
+                flex: none;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                line-height: var(--rt-leading-snug);
+            }
+
+            &__chevron {
+                flex: none;
+                color: var(--rt-color-text-muted);
+            }
+
+            &__steps {
+                padding-inline-start: var(--rt-space-2xs);
+            }
+        }
+    }
+
+    @keyframes rt-ai-run-status-shimmer {
+        0% {
+            background-position: 100% 0;
+        }
+
+        100% {
+            background-position: -100% 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-ai-run-status__label--state--running {
+            animation: none;
+            background: none;
+            color: var(--rt-ai-run-status-shimmer-from);
+        }
+    }
+}

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

@@ -35,6 +35,7 @@ ref.afterClosed().subscribe((result?: ITour): void => …);
 | `closeOnBackdropClick` / `closeOnEscape` | `true`; второе — из настроек кита         |
 | `backdropClass` / `panelClass`           | `rt-aside-backdrop` / `rt-aside-overlay`  |
 | `injector`                               | корневой — уничтожение хозяина закрывает  |
+| `disposeOnNavigation`                    | `true` — переход по адресу снимает        |
 
 ## Главное, что нужно знать
 

package/src/lib/components/aside/header/rt-aside-header.component.scss

@@ -2,12 +2,15 @@
     /* rt-aside-header — заголовок side-sheet'а. ViewEncapsulation.None.
        Селекторы префиксованы `.rt-aside-header`. */
 
+    /* Свойства шапки — рукоятки приложения: каждое читается как `--rt-aside-header-*` с любого
+       предка (панели оверлея, своего контейнера), а на самом блоке стоит только умолчание под
+       `-default`. Значение, объявленное на блоке под публичным именем, перебило бы предка. */
     .rt-aside-header {
-        --rt-aside-header-title-size: var(--rt-text-xl);
-        --rt-aside-header-title-weight: var(--rt-font-weight-bold);
-        --rt-aside-header-subtitle-size: var(--rt-text-sm);
-        --rt-aside-header-gap: var(--rt-space-sm);
-        --rt-aside-header-min-height: auto;
+        --rt-aside-header-title-size-default: var(--rt-text-xl);
+        --rt-aside-header-title-weight-default: var(--rt-font-weight-bold);
+        --rt-aside-header-subtitle-size-default: var(--rt-text-sm);
+        --rt-aside-header-gap-default: var(--rt-space-sm);
+        --rt-aside-header-min-height-default: auto;
 
         /* Отступ шапки — ручка приложения; без неё общий инсет панели. */
         padding: var(--rt-aside-header-inset, var(--rt-aside-inset));
@@ -15,15 +18,28 @@
         &__content {
             display: flex;
             min-width: 0;
-            min-height: var(--rt-aside-header-min-height);
+            min-height: var(--rt-aside-header-min-height, var(--rt-aside-header-min-height-default));
             align-items: center;
-            gap: var(--rt-aside-header-gap);
+            gap: var(--rt-aside-header-gap, var(--rt-aside-header-gap-default));
         }
 
+        /* Кнопка «назад» — шаг `sm` кнопки и значка. Размеры кнопки и значка — рукоятки
+           `--rt-aside-header-back-size` и `--rt-aside-header-back-icon-size` с любого предка; без них
+           стоят те же шаги. Значок читает свою ступень `sm` на этом узле: ступень, заданная
+           приложением выше, сюда не доходит — у кнопки «назад» своя рукоятка. */
         &__back {
+            --rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));
+
             flex-shrink: 0;
         }
 
+        /* Шаг кнопки переназначается на её внутреннем узле: модификатор размера объявляет его там
+           же. Вес селектора выше модификатора, а публичная `--rt-icon-button-size` по-прежнему
+           важнее шага. */
+        & &__back .rt-icon-button {
+            --rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm));
+        }
+
         /* Колонка overline + title. flex/min-width живут здесь, чтобы ellipsis
            у title работал и в двухстрочном варианте. */
         &__heading {
@@ -49,8 +65,8 @@
             min-width: 0;
             margin: 0;
             color: var(--rt-color-text-primary);
-            font-size: var(--rt-aside-header-title-size);
-            font-weight: var(--rt-aside-header-title-weight);
+            font-size: var(--rt-aside-header-title-size, var(--rt-aside-header-title-size-default));
+            font-weight: var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));
 
             /* Высота строки — ручка приложения; без неё наследуется, как было. */
             line-height: var(--rt-aside-header-title-leading, inherit);
@@ -71,7 +87,7 @@
         &__subtitle {
             margin: 0;
             color: var(--rt-color-text-muted);
-            font-size: var(--rt-aside-header-subtitle-size);
+            font-size: var(--rt-aside-header-subtitle-size, var(--rt-aside-header-subtitle-size-default));
             line-height: var(--rt-leading-snug);
         }
 
@@ -98,7 +114,7 @@
            не занимает. */
         &__row {
             min-width: 0;
-            margin-top: var(--rt-aside-header-gap);
+            margin-top: var(--rt-aside-header-gap, var(--rt-aside-header-gap-default));
 
             &:empty {
                 display: none;

package/src/lib/components/copy-value/CONTEXT.md

@@ -0,0 +1,31 @@
+# `rt-copy-value`
+
+```html
+<rt-copy-value label="Reference" copyLabel="Copy reference" [value]="error.referenceId" />
+```
+
+| вход        | тип      | умолчание                    |
+| ----------- | -------- | ---------------------------- |
+| `value`     | `string` | обязателен                   |
+| `label`     | `string` | `''` — не рисуется           |
+| `copyLabel` | `string` | `''` → переведённое `uiCopy` |
+
+Выход: `copiedValue` — значение, ушедшее в буфер.
+
+Спек — `docs/specs/ui-kit-v2/copy-value/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Копируется ровно `value`.** Отображаемое и копируемое совпадают: значение стоит на подложке
+целиком, длинное обрезается многоточием, но в буфер уходит полностью.
+
+## Края
+
+- После нажатия подпись кнопки две секунды «Copied», иконка — галочка; таймер гасится при
+  уничтожении.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- [`rt-copy-cell`](../table/copy-cell/rt-copy-cell.component.ts) — копирование в ячейке таблицы,
+  с кнопкой по наведению и проекцией содержимого.

package/src/lib/components/copy-value/rt-copy-value.component.scss

@@ -0,0 +1,39 @@
+@layer rt-kit.components {
+    /* rt-copy-value — значение с кнопкой копирования. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте. */
+
+    .rt-copy-value {
+        --rt-copy-value-radius: var(--rt-radius-sm);
+
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rt-space-sm);
+        max-inline-size: 100%;
+        min-inline-size: 0;
+
+        &__label {
+            flex: none;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__value {
+            overflow: hidden;
+            padding: var(--rt-space-2xs) var(--rt-space-xs);
+            border-radius: var(--rt-copy-value-radius);
+            background: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+            line-height: var(--rt-leading-snug);
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__button {
+            flex: none;
+        }
+    }
+}

package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss

@@ -136,11 +136,11 @@
         --rt-data-list-settings-aside-header-height: 96px;
 
         .rt-aside-header {
-            --rt-aside-header-title-size: var(--rt-text-2xl);
-            --rt-aside-header-title-weight: var(--rt-font-weight-semibold);
-            --rt-aside-header-subtitle-size: var(--rt-text-md);
-            --rt-aside-header-gap: var(--rt-space-md);
-            --rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height);
+            --rt-aside-header-title-size-default: var(--rt-text-2xl);
+            --rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);
+            --rt-aside-header-subtitle-size-default: var(--rt-text-md);
+            --rt-aside-header-gap-default: var(--rt-space-md);
+            --rt-aside-header-min-height-default: var(--rt-data-list-settings-aside-header-height);
         }
 
         /* Кнопка «назад» — круглая `mat-icon-button` первого кита, как и кнопки подвала панели. */

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

@@ -0,0 +1,31 @@
+# `rt-dot-field`
+
+Фон из квадратных точек на сетке 10px, которые медленно плывут облаками. Заполняет
+позиционированного родителя и стоит под его содержимым.
+
+```html
+<rt-dot-field />
+```
+
+Входов и выходов нет. Цвет точек — CSS-свойство `color` хоста.
+
+## Главное, что нужно знать
+
+**Какая клетка горит, решают чистые функции в `rt-dot-field.logic.ts`.** Клетка горит там, где
+медленно движущийся шум проходит порог, а матрица Байера 4x4 сдвигает порог по клеткам: края
+облаков выходят рваными. В центре поля плотность ниже — там стоит карточка.
+
+**Рисует `RtDotFieldPainter`.** Кадр — раз в 90 мс, а не каждый кадр анимации: ступенчатое
+движение — часть облика. Цвет читается из вычисленного `color` холста на каждом кадре, поэтому
+точки идут за темой без кода: назначение темы — `light-dark()` или переопределение по флагу, а
+холст принимает только готовый цвет.
+
+**Запуск — в `afterNextRender`, остановка — при уходе компонента.** На сервере поле ничего не
+рисует.
+
+## Края
+
+- При `prefers-reduced-motion: reduce` рисуется один кадр, следующий не просится.
+- Холст без 2D-контекста (jsdom в спеках) ничего не рисует и `matchMedia` не спрашивает.
+- `viewChild` не принимает поле с решёткой, поэтому `canvas` объявлен `protected`.
+- Родитель задаёт `position: relative`, а своё содержимое ставит выше через `z-index: 1`.

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

@@ -0,0 +1,20 @@
+@layer rt-kit.components {
+    .rt-dot-field {
+        --rt-dot-field-color: var(--rt-color-action-primary);
+        --rt-dot-field-opacity: 0.85;
+
+        position: absolute;
+        z-index: var(--rt-z-base);
+        display: block;
+        color: var(--rt-dot-field-color);
+        inset: 0;
+        opacity: var(--rt-dot-field-opacity);
+        pointer-events: none;
+
+        &__canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/lib/components/dot-field/stories/component/CONTEXT.md

@@ -0,0 +1,14 @@
+# `TestRtDotFieldComponent`
+
+Обёртка витрины для `rt-dot-field`. В пакет не уезжает.
+
+Рисует сцену так, как поле стоит на странице входа: позиционированный родитель с фоном страницы,
+поле под ним и карточка в центре поверх поля. Позиционированный родитель и карточка — забота
+страницы, поэтому они живут здесь, а не в компоненте.
+
+Вход `part` выбирает историю: `playground` — одна сцена, `presets` — сцена в обоих наборах, `themes` — в светлой и тёмной теме.
+Снимков у историй нет: поле движется.
+
+Стили обёртки лежат в каскадном слое кита под блоком `app-dot-field` на хосте. Контур, скругление и тень
+карточки идут своими свойствами `--rt-dot-field-story-card-*`: проверка токенов не принимает шаг шкалы
+прямо в свойстве.

package/src/lib/components/dot-field/stories/component/test-dot-field.component.scss

@@ -0,0 +1,31 @@
+@layer rt-kit.components {
+    /* Сцена страницы входа: позиционированный родитель поля и карточка поверх него. */
+    .app-dot-field {
+        --rt-dot-field-story-card-border-width: var(--rt-border-width-thin);
+        --rt-dot-field-story-card-radius: var(--rt-radius-md);
+        --rt-dot-field-story-card-shadow: var(--rt-shadow-card);
+
+        &__scene {
+            position: relative;
+            display: flex;
+            overflow: hidden;
+            width: 100%;
+            height: 22rem;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--rt-color-bg-page);
+        }
+
+        &__card {
+            position: relative;
+            z-index: 1;
+            padding: var(--rt-space-10) var(--rt-space-5);
+            border: var(--rt-dot-field-story-card-border-width) solid var(--rt-color-border-default);
+            border-radius: var(--rt-dot-field-story-card-radius);
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-dot-field-story-card-shadow);
+            color: var(--rt-color-text-primary);
+            font-family: var(--rt-font-family-sans);
+        }
+    }
+}