@rt-tools/ui-kit-v2 0.23.3 → 0.23.4

package/src/lib/components/bottom-sheet/rt-bottom-sheet.component.scss

@@ -27,13 +27,15 @@
             transition: opacity var(--rt-bottom-sheet-transition-duration) ease;
         }
 
+        /* Предел высоты панели — `--rt-bottom-sheet-max-height`, умолчание `80vh`; свойство приходит
+           от предка или с тега листа. */
         &__panel {
             position: absolute;
             right: 0;
             bottom: 0;
             left: 0;
             display: flex;
-            max-height: 80vh;
+            max-height: var(--rt-bottom-sheet-max-height, 80vh);
             flex-direction: column;
             border-radius: var(--rt-bottom-sheet-radius) var(--rt-bottom-sheet-radius) 0 0;
             background: var(--rt-color-bg-surface);
@@ -65,6 +67,38 @@
             font-weight: var(--rt-font-weight-semibold);
         }
 
+        /* Тело — единственная прокручиваемая зона: панель упирается в предел высоты, а ручка,
+           шапка и подвал остаются на месте. `min-height: 0` обязателен — без него элемент флекса
+           не сжимается ниже своего содержимого, и прокрутка не включается. Колонка флекса
+           сохраняет раскладку содержимого прежней: до тела оно стояло прямо в колонке панели. */
+        &__body {
+            display: flex;
+            min-width: 0;
+            min-height: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+
+        /* Подвал не прокручивается: кнопки стоят внизу при любой длине тела. Нижний отступ
+           прибавляет вырез экрана, иначе кнопки уходят под полосу жестов телефона. Без
+           спроецированного подвала элемент пуст и места не занимает. Спроецированное встаёт в
+           строку с зазором и переносится, когда не помещается в ширину; прижать кнопки вправо — `margin-inline-start: auto` у первой. */
+        &__footer {
+            display: flex;
+            flex-shrink: 0;
+            flex-wrap: wrap;
+            align-items: center;
+            padding: var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));
+            border-top: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+            gap: var(--rt-space-2);
+
+            &:empty {
+                display: none;
+            }
+        }
+
         &--open {
             pointer-events: auto;
 

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

@@ -0,0 +1,37 @@
+# `rt-breadcrumbs`
+
+```html
+<rt-breadcrumbs look="heading" [back]="true" [crumbs]="crumbs()">
+    <rt-tag>черновик</rt-tag>
+</rt-breadcrumbs>
+```
+
+| вход        | тип                               | умолчание  |
+| ----------- | --------------------------------- | ---------- |
+| `crumbs`    | `readonly IRtBreadcrumbs.Crumb[]` | обязателен |
+| `look`      | `'inline' \| 'heading'`           | `'inline'` |
+| `back`      | `boolean`                         | `false`    |
+| `separator` | `string`                          | `'/'`      |
+
+Описание правил — `docs/specs/ui-kit-v2/breadcrumbs/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Цепочку отдаёт приложение.** Последнее звено — открытая страница: ссылка у него не рисуется.
+Маршрутов компонент не читает: имя открытой записи приходит с ответом сервера, и знает его только
+страница.
+
+**Свёртка — чистая функция.** `rtBreadcrumbsFold` раскладывает предков на голову, свёрнутое и хвост;
+компонент только зовёт её с признаком узкого экрана от `BreakpointsService`.
+
+## Края
+
+- Кнопка «назад» рисуется по просьбе и только при наличии предка: ведёт к последнему из них.
+- В виде `heading` строки пути нет, пока нет предков; черта после последнего предка скрыта.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+- Цвета, кегль, зазоры и кнопка «назад» — свойства `--rt-breadcrumbs-*` на корне блока. Материальный
+  набор переназначает шесть из них в том же файле стилей, вид кита от этого не меняется.
+
+## Рядом
+
+- [`rt-menu`](../menu/rt-menu.component.ts) — меню свёрнутой середины пути.

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

@@ -0,0 +1,205 @@
+@layer rt-kit.components {
+    /* rt-breadcrumbs — путь до открытой страницы. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте.
+       Цвета, кегль, зазоры и заголовок — свойства блока: приложение перекрашивает крошки, не трогая
+       общих шагов кита. Умолчания — прежние шаги, вид без свойств не меняется. */
+
+    .rt-breadcrumbs {
+        --rt-breadcrumbs-back-radius: var(--rt-radius-full);
+        --rt-breadcrumbs-duration: var(--rt-duration-fast);
+        --rt-breadcrumbs-gap: var(--rt-space-xs);
+        --rt-breadcrumbs-font-size: var(--rt-text-sm);
+        --rt-breadcrumbs-font-weight: var(--rt-font-weight-medium);
+        --rt-breadcrumbs-line-height: var(--rt-leading-snug);
+        --rt-breadcrumbs-link-color: var(--rt-color-text-muted);
+        --rt-breadcrumbs-link-color-hover: var(--rt-color-text-primary);
+        --rt-breadcrumbs-link-radius: var(--rt-radius-xs);
+        --rt-breadcrumbs-separator-color: var(--rt-color-text-disabled);
+        --rt-breadcrumbs-separator-gap: var(--rt-space-xs);
+        --rt-breadcrumbs-current-color: var(--rt-color-text-primary);
+        --rt-breadcrumbs-current-min: var(--rt-size-30);
+        --rt-breadcrumbs-back-size: var(--rt-control-height-sm);
+        --rt-breadcrumbs-back-icon-size: var(--rt-size-5);
+        --rt-breadcrumbs-back-color: var(--rt-color-text-primary);
+        --rt-breadcrumbs-back-bg-hover: var(--rt-color-bg-hover);
+        --rt-breadcrumbs-heading-gap: var(--rt-space-sm);
+        --rt-breadcrumbs-heading-offset: var(--rt-space-xs);
+        --rt-breadcrumbs-title-color: var(--rt-color-text-primary);
+        --rt-breadcrumbs-title-font-size: var(--rt-text-2xl);
+        --rt-breadcrumbs-title-font-weight: var(--rt-font-weight-bold);
+        --rt-breadcrumbs-title-line-height: var(--rt-leading-tight);
+
+        display: block;
+        min-inline-size: 0;
+
+        /* Под пальцем кнопка «назад» крупнее: размер переназначается свойством, а не правилом. */
+        @media (pointer: coarse) {
+            --rt-breadcrumbs-back-size: var(--rt-control-height-lg);
+        }
+
+        /* Материальный набор повторяет крошки приложения: звенья, разделитель и кнопка «назад»
+           стоят через 8px, предки и разделитель — цвета вторичного текста темы Material
+           (on-surface-variant), без темы — приглушённого текста кита; кнопка «назад» — круглая 40px
+           со значком 24px. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-breadcrumbs-gap: var(--rt-size-2);
+            --rt-breadcrumbs-separator-gap: var(--rt-size-2);
+            --rt-breadcrumbs-link-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));
+            --rt-breadcrumbs-separator-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));
+            --rt-breadcrumbs-back-size: var(--rt-size-10);
+            --rt-breadcrumbs-back-icon-size: var(--rt-size-6);
+
+            @media (pointer: coarse) {
+                --rt-breadcrumbs-back-size: var(--rt-control-height-lg);
+            }
+        }
+
+        &__row {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-breadcrumbs-gap);
+            min-inline-size: 0;
+        }
+
+        /* Длинный путь не уводит страницу вбок: он едет внутри своей строки, без полосы прокрутки —
+           вести по ней некуда, а место она занимает. */
+
+        /* Прокручиваемая строка обрезает и кольцо фокуса: внутренние поля шириной в кольцо дают ему
+           место, а такие же отрицательные поля снаружи оставляют раскладку прежней. */
+        &__list {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-focus-ring-width);
+            margin: calc(-1 * var(--rt-focus-ring-width));
+            list-style: none;
+            min-inline-size: 0;
+            overflow-x: auto;
+            scrollbar-width: none;
+
+            /* Начало пути уехало влево: край строки гаснет, чтобы обрезка читалась как продолжение. */
+            &--clipped {
+                mask-image: linear-gradient(to right, transparent, black var(--rt-space-lg));
+            }
+        }
+
+        /* Предки помещаются рядом с текущим звеном, урезанным до порога: звено сжимается с
+           многоточием, и раздел остаётся на виду. Порог — --rt-breadcrumbs-current-min, его читает
+           замер строки. */
+        &__list--fitted > &__item:last-child {
+            flex: 0 1 auto;
+            min-inline-size: 0;
+        }
+
+        /* Звенья держат свою ширину, и лишнее уезжает влево — строка стоит в конце. Многоточие
+           получает только текущее звено, которое одно шире строки. */
+        &__item {
+            display: flex;
+            flex: none;
+            align-items: center;
+            white-space: nowrap;
+
+            &:last-child {
+                max-inline-size: 100%;
+            }
+        }
+
+        &__link,
+        &__separator,
+        &__current {
+            font-size: var(--rt-breadcrumbs-font-size);
+            font-weight: var(--rt-breadcrumbs-font-weight);
+            line-height: var(--rt-breadcrumbs-line-height);
+        }
+
+        &__link {
+            border-radius: var(--rt-breadcrumbs-link-radius);
+            color: var(--rt-breadcrumbs-link-color);
+            text-decoration: none;
+            transition: color var(--rt-breadcrumbs-duration) linear;
+
+            &:hover {
+                color: var(--rt-breadcrumbs-link-color-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+        }
+
+        /* Кнопка меню шире своего значка на собственные поля: без поправки зазор вокруг «…» вдвое
+           шире зазора между звеньями. */
+        &__fold {
+            display: inline-flex;
+            margin-inline: calc(-1 * var(--rt-space-sm));
+        }
+
+        &__separator {
+            color: var(--rt-breadcrumbs-separator-color);
+            margin-inline: var(--rt-breadcrumbs-separator-gap);
+        }
+
+        /* Текущее звено обрезается многоточием, а полный текст даёт подсказка над обрезанным. */
+        &__current {
+            overflow: hidden;
+            color: var(--rt-breadcrumbs-current-color);
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+        }
+
+        &__back {
+            display: inline-flex;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+
+            --rt-icon-step-md: var(--rt-breadcrumbs-back-icon-size);
+
+            border-radius: var(--rt-breadcrumbs-back-radius);
+            block-size: var(--rt-breadcrumbs-back-size);
+            color: var(--rt-breadcrumbs-back-color);
+            inline-size: var(--rt-breadcrumbs-back-size);
+            transition: background-color var(--rt-breadcrumbs-duration) linear;
+
+            &:hover {
+                background-color: var(--rt-breadcrumbs-back-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+        }
+
+        /* Заголовок — последнее звено, он стоит строкой ниже, и черта после последнего предка
+           висела бы в конце строки пути. */
+        &--heading &__item:last-child &__separator {
+            display: none;
+        }
+
+        &__heading {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            gap: var(--rt-breadcrumbs-heading-gap);
+            min-inline-size: 0;
+        }
+
+        &__row + &__heading {
+            margin-block-start: var(--rt-breadcrumbs-heading-offset);
+        }
+
+        &__title {
+            overflow: hidden;
+            margin: 0;
+            color: var(--rt-breadcrumbs-title-color);
+            font-size: var(--rt-breadcrumbs-title-font-size);
+            font-weight: var(--rt-breadcrumbs-title-font-weight);
+            line-height: var(--rt-breadcrumbs-title-line-height);
+            max-inline-size: 100%;
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+# `rt-carousel`
+
+```html
+<rt-carousel [cards]="row.roles" />
+```
+
+| вход        | тип                                                         | умолчание |
+| ----------- | ----------------------------------------------------------- | --------- |
+| `cards`     | `readonly IRtCarousel.Card[] \| null` — `{ label, color? }` | `[]`      |
+| `labelCase` | `'as-is' \| 'title'` — `title` пишет «AI» как «Ai»          | `'as-is'` |
+
+Выходов нет: стопка только показывает подписи.
+
+Договорённость — `docs/specs/ui-kit-v2/carousel/`.
+
+## Главное, что нужно знать
+
+**Карточки наезжают одна на другую.** Каждая после первой ложится на левую соседку на половину
+ширины, так стопка помещается в узкую ячейку таблицы. Подпись урезается многоточием.
+
+**Открытая карточка показывает подпись целиком.** Под указателем и в фокусе карточка приподнимается,
+растёт до всей подписи и встаёт поверх соседей, а следующие отходят в сторону. Каждая карточка стоит
+в порядке Tab, касание на сенсорном экране фокусирует её и открывает так же. Хост держит ширину
+свёрнутой стопки, а открытая карточка выходит за него поверх: ячейка таблицы не растягивается.
+
+**Цвет и тон считает чистая логика.** `rt-carousel.logic.ts` приводит цвет к `#rrggbb` и выбирает тон
+подписи по яркости: `0.299·R + 0.587·G + 0.114·B` выше 186 — тёмная, иначе светлая. Карточка без
+цвета или с чужой записью остаётся на фоне кита.
+
+## Края
+
+- Пустой вход и `null` не рисуют ни одной карточки.
+- Хост — список `role="list"`, карточки — `role="listitem"`: нажатие на карточку ничего не делает.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+- Тон — два постоянных шага, а не цвета темы: на цвете карточки контраст держится и в тёмной теме.
+- Размеры, наезд, подъём, сдвиг, скругление, тень, кегль, регистр и длительность — свойства
+  `--rt-carousel-*` на корне блока. Материальный набор переназначает их в том же файле стилей.
+- С `prefers-reduced-motion` карточки двигаются без перехода.
+
+## Рядом
+
+- [`rt-tag`](../tag/CONTEXT.md) — одна метка из палитры важности, без своего цвета и без наезда.

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

@@ -0,0 +1,117 @@
+@layer rt-kit.components {
+    /* rt-carousel — стопка цветных карточек. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте. Карточки наезжают на
+       левую соседку; открытая — под указателем или в фокусе — встаёт поверх, растёт до всей подписи,
+       а следующие отходят. Размеры, наезд, подъём, сдвиг, скругление, тень, кегль, регистр и
+       длительность — свойства блока: приложение переназначает их своим правилом на блок, а
+       материальный набор — в этом же файле. */
+
+    .rt-carousel {
+        /* Число карт ставит сам компонент стилем хоста, и он перекрывает это значение; здесь оно
+           объявлено, чтобы у ширины закрытой стопки было значение и до первой отрисовки. */
+        --rt-carousel-count: 0;
+        --rt-carousel-card-width: var(--rt-size-16);
+        --rt-carousel-card-padding-inline: var(--rt-space-2);
+        --rt-carousel-card-radius: var(--rt-radius-ms);
+        --rt-carousel-card-shadow: var(--rt-shadow-sm);
+        --rt-carousel-card-bg: var(--rt-color-bg-subtle);
+        --rt-carousel-card-color: var(--rt-color-text-primary);
+        --rt-carousel-tone-dark: var(--rt-neutral-950);
+        --rt-carousel-tone-light: var(--rt-neutral-0);
+        --rt-carousel-overlap: calc(var(--rt-size-16) / 2);
+        --rt-carousel-lift: var(--rt-space-1);
+        --rt-carousel-shift: var(--rt-space-4);
+        --rt-carousel-label-size: var(--rt-text-xs);
+        --rt-carousel-label-weight: var(--rt-font-weight-medium);
+        --rt-carousel-label-height: var(--rt-size-6);
+        --rt-carousel-label-transform: none;
+        --rt-carousel-duration: var(--rt-duration-base);
+
+        /* Ширина хоста — свёрнутая стопка: число карточек ставит компонент. Открытая карточка и
+           отошедшие соседки выходят за неё поверх, и ячейка таблицы под стопкой не растягивается. */
+        display: inline-flex;
+        align-items: center;
+        inline-size: calc(
+            var(--rt-carousel-count) * var(--rt-carousel-card-width) - max(var(--rt-carousel-count) - 1, 0) * var(--rt-carousel-overlap)
+        );
+        isolation: isolate;
+
+        /* Материальный набор повторяет стопку приложения: карточки с малым скруглением и большой
+           тенью, тёмная подпись цвета текста Material, подпись обычного начертания с заглавной
+           буквы каждого слова, движение медленнее. Шага 300 у начертания в ките нет — ближайший
+           обычный. */
+        :is(.rt-preset-material, [data-preset='material']) & {
+            --rt-carousel-card-radius: var(--rt-radius-sm);
+            --rt-carousel-card-shadow: var(--rt-shadow-lg);
+            --rt-carousel-tone-dark: var(--rt-mat-neutral-100);
+            --rt-carousel-label-weight: var(--rt-font-weight-regular);
+            --rt-carousel-label-transform: capitalize;
+            --rt-carousel-duration: calc(var(--rt-duration-base) * 1.5);
+        }
+
+        /* Заливку карточки ставит шаблон из её цвета; без цвета остаётся фон кита. */
+        &__card {
+            --rt-carousel-card-fill: var(--rt-carousel-card-bg);
+
+            position: relative;
+            display: flex;
+            box-sizing: border-box;
+            flex-shrink: 0;
+            border-radius: var(--rt-carousel-card-radius);
+            background: var(--rt-carousel-card-fill);
+            box-shadow: var(--rt-carousel-card-shadow);
+            color: var(--rt-carousel-card-color);
+            inline-size: var(--rt-carousel-card-width);
+            min-inline-size: var(--rt-carousel-card-width);
+            outline: 2px solid transparent;
+            padding-inline: var(--rt-carousel-card-padding-inline);
+            transition: transform var(--rt-carousel-duration) ease-out;
+
+            & + & {
+                margin-inline-start: calc(-1 * var(--rt-carousel-overlap));
+            }
+
+            /* Тон подписи — два постоянных шага: на цвете карточки он не зависит от темы. */
+            &--tone--dark {
+                color: var(--rt-carousel-tone-dark);
+            }
+
+            &--tone--light {
+                color: var(--rt-carousel-tone-light);
+            }
+
+            /* Касание фокусирует карточку, поэтому открывает её и обычный фокус, не только с клавиши. */
+            &:is(:hover, :focus, :focus-visible) {
+                z-index: 1;
+                inline-size: max-content;
+                transform: translateY(calc(-1 * var(--rt-carousel-lift)));
+
+                ~ .rt-carousel__card {
+                    transform: translateX(var(--rt-carousel-shift));
+                }
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                transition: none;
+            }
+        }
+
+        /* Подпись урезается многоточием; целиком её показывает открытая карточка. */
+        &__label {
+            overflow: hidden;
+            font-size: var(--rt-carousel-label-size);
+            font-weight: var(--rt-carousel-label-weight);
+            inline-size: 100%;
+            line-height: var(--rt-carousel-label-height);
+            text-align: center;
+            text-overflow: ellipsis;
+            text-transform: var(--rt-carousel-label-transform);
+            white-space: nowrap;
+        }
+    }
+}

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

@@ -30,6 +30,9 @@
   в один внутренний сигнал, поэтому ведут себя одинаково.
 - Проекция не видна скринридеру как имя контрола: если подпись важна для AT, задай `ariaLabel`.
 - `inputId` кладётся на кнопку — по нему связывается внешний `<label for>`.
+- Размер и рамку квадрата задают `--rt-checkbox-box-size` и `--rt-checkbox-box-border-color` на
+  хосте `rt-checkbox`. Окружение перекрывает их классом на том же хосте. Так дерево выбора в
+  материальном виде ставит квадрат 16px с серой рамкой, а сам флажок держит 18px и рамку кита.
 
 ## Рядом
 

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

@@ -6,7 +6,13 @@
        и на `<rt-checkbox>`, и на корне шаблона, поэтому правила блока вложены в хост —
        так они достаются только корню шаблона. */
 
+    /* Размер и рамка квадрата объявлены на хосте, а не на кнопке внутри: окружение перекрывает их
+       классом на том же хосте. Так дерево выбора в материальном виде ставит квадрат 16px с серой
+       рамкой приложения; сам флажок держит прежние 18px и рамку кита. */
     rt-checkbox {
+        --rt-checkbox-box-size: calc(var(--rt-size-4) + var(--rt-space-0-5));
+        --rt-checkbox-box-border-color: var(--rt-color-border-strong);
+
         display: inline-block;
 
         /* Шаг входа `radius` переназначает скругление квадрата, кольцо фокуса держит своё. */
@@ -52,12 +58,12 @@
 
         &__box {
             display: inline-flex;
-            width: 18px;
-            height: 18px;
+            width: var(--rt-checkbox-box-size);
+            height: var(--rt-checkbox-box-size);
             flex-shrink: 0;
             align-items: center;
             justify-content: center;
-            border: var(--rt-input-border-width) solid var(--rt-color-border-strong);
+            border: var(--rt-input-border-width) solid var(--rt-checkbox-box-border-color);
             border-radius: var(--rt-checkbox-box-radius);
             background: var(--rt-color-bg-surface);
             transition:

package/src/lib/components/color-palette/CONTEXT.md

@@ -0,0 +1,49 @@
+# `rt-color-palette`
+
+```html
+<rt-field label="Цвет роли">
+    <rt-color-palette formControlName="color" [colors]="themeColors" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md): из общих палитра читает
+`disabled`, `controlId` и `ariaLabel`, а размер, кнопку очистки и рамку не рисует.
+
+| вход            | тип                 | умолчание                       |
+| --------------- | ------------------- | ------------------------------- |
+| `colors`        | `readonly string[]` | `[]` → восемнадцать цветов кита |
+| `readonly`      | `boolean`           | `false`                         |
+| `customAllowed` | `boolean`           | `true`                          |
+| `channels`      | `boolean`           | `false` → без полей R, G, B     |
+
+Выходов нет: значение уходит в форму — `#rrggbb` строчными или `null`.
+
+Договорённость — `docs/specs/ui-kit-v2/color-palette/`.
+
+## Главное, что нужно знать
+
+**Значение одно по форме.** Форма может записать `#ABC`, `00FF00` или `red`; поле держит `#aabbcc`,
+`#00ff00` и «цвет не выбран». Чужой цвет, которого нет в наборе, рисуется ещё одним образцом в конце.
+
+**Образцы — группа переключателей.** В порядке Tab стоит один образец — выбранный, а без выбора
+первый. Стрелки выбирают соседний по кругу, Home и End — крайние, и фокус идёт за выбором.
+
+**Свой цвет меняет только «Применить».** Панель `rt-color-picker` открывается кнопкой своего цвета
+на плавающей панели кита и начинает с текущего цвета. «Отмена», Escape и нажатие мимо закрывают её
+без изменений. Площадь, полосу и градиенты строит чистая логика `rt-color-palette.logic.ts`.
+
+## Края
+
+- Только для чтения — один образец текущего цвета; пустое значение — образец с одной рамкой.
+- Отключённая палитра не берёт ни нажатия, ни клавиши, образцы приглушены.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+- Размеры, зазоры, кольцо и рамки — свойства `--rt-color-palette-*` на корне блока. Материальный
+  набор переназначает их в том же файле стилей: круги без рамки, полое кольцо, рост под указателем.
+  Свой образец в обоих наборах стоит последним в сетке, а кнопка своего цвета — строкой под ней.
+- Панель выбора живёт в оверлее и объявляет свои свойства на себе: свойства палитры до неё не
+  доходят. Материальный набор доходит классом набора на панели оверлея.
+
+## Рядом
+
+- [`rt-field`](../field/CONTEXT.md) — подпись, подсказка и ошибка вокруг палитры.
+- [`rt-popover`](../popover/CONTEXT.md) — плавающая панель своего цвета.