@rt-tools/ui-kit-v2 0.1.0 → 0.3.0

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

@@ -1,3 +1,8 @@
+/* Панель и backdrop правой sidenav — тот же overlay, что у rt-aside, и правила у
+   них общие. Контейнер подключает их сам: rt-aside tree-shake'тся, когда его не
+   взял ни один маршрут, а панель контейнер держит в persistent-режиме. */
+@use '../aside/rt-aside-overlay';
+
 .rt-container {
     display: grid;
     min-height: 100%;
@@ -85,70 +90,7 @@
     }
 }
 
-/* Backdrop + overlay панели CDK Overlay (persistent attach режим).
-   Cc-container владеет CDK Overlay для правой sidenav — стили глобальные
-   (ViewEncapsulation.None), живут тут чтобы не зависеть от подгрузки rt-aside
-   компонента (он tree-shake'тся когда не used active route'ом).
-
-   Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
-   CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при
-   attach; при persistent overlay backdrop должен оставаться скрытым пока aside
-   не открыт. Два класса > одиночный — наш opacity:0 побеждает. */
-.cdk-overlay-backdrop.rt-aside-backdrop {
-    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
-    background: rgb(0 0 0 / 45%);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--rt-duration-base) ease;
-
-    &.rt-aside-backdrop--visible {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
-
-.rt-aside-overlay {
-    height: 100dvh;
-    transition: transform var(--rt-duration-base) ease;
-}
-
-/* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
-   и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
-   выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
-   чтобы правило не зависело от порядка, в котором браузер получил стили панели и
-   стили контейнера. */
-.rt-aside-overlay:not(.rt-aside-overlay--open) {
-    pointer-events: none;
-}
-
-/* Стартовое положение за краем экрана не анимируется: переход из него начинается,
-   как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
-.rt-aside-overlay.rt-aside-overlay--entering {
-    transition: none;
-}
-
-.rt-aside-overlay--position-right.rt-aside-overlay--entering,
-.rt-aside-overlay--position-right.rt-aside-overlay--leaving {
-    transform: translateX(100%);
-}
-
-.rt-aside-overlay--position-left.rt-aside-overlay--entering,
-.rt-aside-overlay--position-left.rt-aside-overlay--leaving {
-    transform: translateX(-100%);
-}
-
-.rt-aside-overlay--position-right.rt-aside-overlay--open,
-.rt-aside-overlay--position-left.rt-aside-overlay--open {
-    transform: translateX(0);
-}
-
 @media (width <= 768px) {
-    .rt-aside-overlay {
-        width: 100dvw;
-    }
-
     // Opt-in: левый sidenav сворачивается в нижний ряд grid'а (таб-бар).
     // Контент занимает всю ширину и скроллится в своём `1fr` над баром —
     // бар остаётся видимым без position:fixed и без привязки к его высоте.
@@ -167,9 +109,3 @@
         }
     }
 }
-
-@media (prefers-reduced-motion: reduce) {
-    .rt-aside-overlay {
-        transition: none;
-    }
-}

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

@@ -0,0 +1,40 @@
+# `rt-counter`
+
+Счётчик «− N +» для целых величин: гости, места, единицы.
+
+```html
+<rt-counter ariaLabel="Гостей" [formControl]="guests" [min]="1" [max]="4" [step]="1" />
+```
+
+| вход                              | тип                | умолчание                     |
+| --------------------------------- | ------------------ | ----------------------------- |
+| `ariaLabel`                       | `string \| null`   | `null`                        |
+| `min`                             | `number \| string` | `0`                           |
+| `max`                             | `number \| string` | `Number.MAX_SAFE_INTEGER`     |
+| `step`                            | `number \| string` | `1`                           |
+| `decreaseLabel` / `increaseLabel` | `string`           | `''` → переведённые умолчания |
+| `disabled`                        | `boolean`          | `false`                       |
+
+Значение — `number` через `ControlValueAccessor`.
+
+## Главное, что нужно знать
+
+**Значение с клавиатуры не вводится — только шагами.** Поэтому здесь нет ни маски, ни дробной
+части, ни кнопки очистки. Если число нужно набирать, это
+[`rt-input-number`](../input-number/CONTEXT.md), а не счётчик.
+
+**Границы держатся и при записи из формы.** `control.setValue(99)` при `max=4` даст 4, а `null` —
+нижнюю границу. Иначе кнопки блокировались бы по состоянию, которого на экране нет.
+
+## Как этим пользоваться
+
+- Шаг, упирающийся в границу, не перепрыгивает её, а останавливается на ней; если значение при
+  этом не изменилось, наружу не уходит ни `change`, ни `touched`.
+- Подписи кнопок для скринридера берутся из словаря кита и перекрываются поштучно — форма знает,
+  что именно считает («Убрать гостя» вместо «Уменьшить»).
+- Host объявлен `role="group"` с `aria-label`, значение помечено `aria-live="polite"`: скринридер
+  называет назначение счётчика и проговаривает новое число.
+
+## Рядом
+
+- [`rt-input-number`](../input-number/CONTEXT.md) — когда число набирают.

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

@@ -1,15 +1,16 @@
-:host {
+/* rt-counter — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-counter` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+.rt-counter {
     display: inline-flex;
     align-items: center;
     gap: var(--rt-counter-gap);
 
-    .rt-counter {
-        &__value {
-            min-width: var(--rt-counter-value-min-width);
-            color: var(--rt-counter-value-color);
-            font-size: var(--rt-counter-value-font-size);
-            font-variant-numeric: tabular-nums;
-            text-align: center;
-        }
+    &__value {
+        min-width: var(--rt-counter-value-min-width);
+        color: var(--rt-counter-value-color);
+        font-size: var(--rt-counter-value-font-size);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
     }
 }

package/src/lib/components/counter-row/CONTEXT.md

@@ -0,0 +1,24 @@
+# `rt-counter-row`
+
+Строка «подпись + контрол» для настроек и форм бронирования.
+
+```html
+<rt-counter-row label="Гостей" hint="Не больше четырёх">
+    <rt-counter [formControl]="guests" [max]="4" />
+</rt-counter-row>
+```
+
+| вход    | тип      | умолчание      |
+| ------- | -------- | -------------- |
+| `label` | `string` | **обязателен** |
+| `hint`  | `string` | `''`           |
+
+Контрол приходит проекцией. Выходов нет.
+
+## Главное, что нужно знать
+
+**Строка не знает, что именно считают.** Внутрь кладут [`rt-counter`](../counter/CONTEXT.md),
+[`rt-toggle-switch`](../toggle-switch/CONTEXT.md), [`rt-select`](../select/CONTEXT.md) — что
+угодно. Отсюда и имя входа: строка отвечает только за подпись и раскладку.
+
+Пустое пояснение равно отсутствию входа — `[hint]="maybeEmpty()"` безопасно.

package/src/lib/components/counter-row/rt-counter-row.component.scss

@@ -1,33 +1,34 @@
-:host {
+/* rt-counter-row — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-counter-row` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+.rt-counter-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--rt-counter-row-padding-y) 0;
     gap: var(--rt-counter-row-gap);
 
-    .rt-counter-row {
-        &__text {
-            display: flex;
-            flex-direction: column;
-            gap: var(--rt-space-2xs);
-            text-align: start;
-        }
+    // Линия разделяет соседние строки, а не обводит каждую: рамка на всех дала бы
+    // лишние границы сверху у первой и снизу у последней
+    &:not(:first-of-type) {
+        border-top: var(--rt-border-width-thin) solid var(--rt-counter-row-color-border);
+    }
 
-        &__label {
-            color: var(--rt-counter-row-label-color);
-            font-size: var(--rt-counter-row-label-font-size);
-            font-weight: var(--rt-font-weight-medium);
-        }
+    &__text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-2xs);
+        text-align: start;
+    }
 
-        &__hint {
-            color: var(--rt-counter-row-hint-color);
-            font-size: var(--rt-counter-row-hint-font-size);
-        }
+    &__label {
+        color: var(--rt-counter-row-label-color);
+        font-size: var(--rt-counter-row-label-font-size);
+        font-weight: var(--rt-font-weight-medium);
     }
-}
 
-// Линия разделяет соседние строки, а не обводит каждую: рамка на всех дала бы
-// лишние границы сверху у первой и снизу у последней
-:host(:not(:first-of-type)) {
-    border-top: var(--rt-border-width-thin) solid var(--rt-counter-row-color-border);
+    &__hint {
+        color: var(--rt-counter-row-hint-color);
+        font-size: var(--rt-counter-row-hint-font-size);
+    }
 }

package/src/lib/components/date-picker/CONTEXT.md

@@ -0,0 +1,41 @@
+# `rt-date-picker`
+
+```html
+<rt-field label="Дата заезда">
+    <rt-date-picker type="date" min="2026-01-01" max="2026-12-31" [formControl]="checkIn" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход          | тип                                    | умолчание |
+| ------------- | -------------------------------------- | --------- |
+| `type`        | `'date' \| 'time' \| 'datetime-local'` | `'date'`  |
+| `min` / `max` | `string \| null` (ISO)                 | `null`    |
+
+Значение — **строка ISO**, ровно та, что отдаёт нативное поле (`2026-03-15`, `09:30`,
+`2026-03-15T09:30`).
+
+## Главное, что нужно знать
+
+**Своего календаря кит не везёт — рисует его браузер.** Отсюда всё остальное: раскладка,
+формат ввода и клавиатура всегда совпадают с системными, а вид поля на разных платформах
+отличается. Если нужен единый календарь во всех браузерах, этот компонент не подойдёт.
+
+**Значение — строка, а не `Date`.** Разбор и часовые пояса остаются на стороне потребителя;
+компонент не трогает ни то, ни другое.
+
+## Края
+
+- В плоском режиме чтения (включает [`rt-field`](../field/CONTEXT.md)) значение переписывается
+  на язык интерфейса через `Intl.DateTimeFormat`: `2026-03-15` → `15 мар. 2026 г.` под `ru`.
+- Нераспознанная строка в этом режиме показывается **как есть**, а не исчезает: значение может
+  прийти из формы, минуя нативное поле.
+- Пустое значение рисуется прочерком.
+- `min`/`max` уезжают на нативное поле; проверку выхода за границы делает браузер, отдельного
+  валидатора здесь нет.
+
+## Рядом
+
+- [`rt-input`](../input/CONTEXT.md) с `type="time"` — когда нужно только время без обёртки.
+- [`rt-calendar`](../calendar/CONTEXT.md) — календарь-витрина, а не поле ввода.

package/src/lib/components/delta-view/CONTEXT.md

@@ -0,0 +1,31 @@
+# `rt-delta-view`
+
+Только показ содержимого редактора: превращает модель Quill в разметку.
+
+```html
+<rt-delta-view [delta]="message.delta" />
+```
+
+| вход    | тип                   | умолчание |
+| ------- | --------------------- | --------- |
+| `delta` | `IQuillDelta \| null` | `null`    |
+
+Выходов нет. Своего шаблона у компонента нет — разметка строится в DOM напрямую.
+
+## Главное, что нужно знать
+
+**Разметка собирается вручную, а не через `innerHTML`.** Каждый узел создаётся отдельно, поэтому
+в вывод не попадёт ничего, кроме поддержанного набора: жирный, курсив, подчёркнутый,
+зачёркнутый, списки и блок кода. Это и есть защита — чужой HTML из модели не отрисуется.
+
+**Соседние строки списка склеиваются в один `<ul>`/`<ol>`.** Каждая строка приходит своей
+операцией; без склейки получился бы список из одного пункта на строку.
+
+## Края
+
+- `null` очищает разметку целиком — состояние «нечего показывать».
+- Смена значения перерисовывает содержимое полностью, а не дописывает.
+
+## Рядом
+
+- [`rt-rich-editor`](../rich-editor/CONTEXT.md) — редактор, который эту модель производит.

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

@@ -0,0 +1,29 @@
+# `rt-detail-list` + `rt-detail-row`
+
+Вертикальный перечень «ключ → значение» для асайдов и карточек.
+
+```html
+<rt-detail-list>
+    <rt-detail-row label="Тариф">Базовый</rt-detail-row>
+    <rt-detail-row label="Владелец" [loading]="!user()">{{ user()?.name }}</rt-detail-row>
+</rt-detail-list>
+```
+
+`rt-detail-list` — чистая раскладка, входов нет.
+
+| вход `rt-detail-row` | тип       | умолчание |
+| -------------------- | --------- | --------- |
+| `label`              | `string`  | `''`      |
+| `loading`            | `boolean` | `false`   |
+
+Значение приходит проекцией.
+
+## Главное, что нужно знать
+
+**Во время загрузки подменяется только значение** — подпись остаётся, по ней читается, чего ждут.
+Заглушка узкая (180 px), под значение, а не под всю строку.
+
+## Рядом
+
+- [`rt-info-item`](../info-item/CONTEXT.md) — одиночная пара «подпись: значение» в строку.
+- [`rt-money-list`](../money-list/CONTEXT.md) — то же, но для сумм с итогом.

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

@@ -0,0 +1,50 @@
+# `rt-dialog` + `RtDialogService`
+
+Модальное окно по центру. Открывается **сервисом**, а не разметкой.
+
+```typescript
+const ref: RtDialogRef<boolean> = this.#dialog.open(ConfirmComponent, { data: { id }, closeOnEscape: true });
+ref.afterClosed().subscribe((ok?: boolean): void => …);
+```
+
+```html
+<rt-dialog width="360px" ariaLabel="Удаление">
+    <rt-dialog-header title="Удалить запись?" />
+    <p>Действие необратимо.</p>
+    <rt-dialog-footer>…</rt-dialog-footer>
+</rt-dialog>
+```
+
+| вход `rt-dialog` | тип                    | умолчание                             |
+| ---------------- | ---------------------- | ------------------------------------- |
+| `size`           | `'sm' \| 'md' \| 'lg'` | `'md'`                                |
+| `width`          | `string \| null`       | `null` (свойство `--rt-dialog-width`) |
+| `ariaLabel`      | `string \| null`       | `null`                                |
+
+| вход `rt-dialog-header` | тип       | умолчание      |
+| ----------------------- | --------- | -------------- |
+| `title`                 | `string`  | **обязателен** |
+| `closable`              | `boolean` | `true`         |
+
+| настройка `open()`                       | умолчание                                  |
+| ---------------------------------------- | ------------------------------------------ |
+| `data`                                   | `null` — доезжает токеном `RT_DIALOG_DATA` |
+| `closeOnBackdropClick` / `closeOnEscape` | `true`                                     |
+| `backdropClass` / `panelClass`           | `rt-dialog-backdrop` / `rt-dialog-overlay` |
+
+## Главное, что нужно знать
+
+**Прокрутка страницы блокируется на время диалога** (`scrollStrategies.block()`), а окно
+объявлено `role="dialog"` с `aria-modal="true"`.
+
+`RtDialogRef.disableClose` держит окно и под кликом по подложке, и под Escape — ставится самим
+содержимым, когда закрывать нельзя.
+
+**Крестик в шапке ищет `RtDialogRef` необязательным инжектом.** Поэтому `rt-dialog-header` можно
+поставить и вне диалога — нажатие просто ничего не сделает, а не упадёт.
+
+## Рядом
+
+- [`rt-aside`](../aside/CONTEXT.md) — немодальная панель сбоку.
+- [`[rtConfirm]`](../confirm-popover/CONTEXT.md) — подтверждение без модалки.
+- [`rt-welcome-dialog`](../welcome-dialog/CONTEXT.md) — готовое приветственное окно.

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

@@ -2,7 +2,11 @@
    ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
    Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
 
-:host {
+/* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-dialog`
+   висит и на `<rt-dialog>`, и на рамке внутри него, поэтому правила рамки
+   вложены в хост — так они достаются только рамке. Сам хост боксом не
+   становится: рамка должна быть прямым flex-ребёнком overlay-панели. */
+rt-dialog {
     display: contents;
 }
 
@@ -18,7 +22,7 @@
     --rt-dialog-backdrop-blur: 5px;
 }
 
-.rt-dialog {
+rt-dialog .rt-dialog {
     display: flex;
     overflow: hidden;
     width: var(--rt-dialog-width, var(--rt-dialog-width-md));

package/src/lib/components/download-link/CONTEXT.md

@@ -0,0 +1,26 @@
+# `rt-download-link`
+
+```html
+<rt-download-link label="Договор.pdf" (downloadClick)="save(file)" />
+```
+
+| вход    | тип      | умолчание      |
+| ------- | -------- | -------------- |
+| `label` | `string` | **обязателен** |
+
+| выход           | тип    |
+| --------------- | ------ |
+| `downloadClick` | `void` |
+
+## Главное, что нужно знать
+
+**Это кнопка, а не ссылка.** Адреса компонент не знает и ничего не скачивает — качает
+потребитель по событию. Так работают и подписанные ссылки с коротким сроком жизни, и выгрузки,
+которые сначала надо построить.
+
+## Как этим пользоваться
+
+- Подпись для скринридера собирается из переведённой формулировки и имени файла
+  (`rtKit.uiDownloadFile` с подстановкой `{{name}}`) — на экране видно имя, а вслух читается
+  «Download: Договор.pdf».
+- Для перечня вложений есть [`rt-file-list`](../file-list/CONTEXT.md); эта кнопка — одиночная.

package/src/lib/components/empty-state/CONTEXT.md

@@ -0,0 +1,35 @@
+# `rt-empty-state`
+
+```html
+<rt-empty-state icon="folder" title="Файлов нет" description="Прикрепите первый документ">
+    <img rtEmptyIllustration src="/img/empty.svg" alt="" />
+    <button rtButton (click)="attach()">Прикрепить</button>
+</rt-empty-state>
+```
+
+| вход          | тип                    | умолчание |
+| ------------- | ---------------------- | --------- |
+| `icon`        | `IRtIcon.Name \| null` | `null`    |
+| `title`       | `string`               | `''`      |
+| `description` | `string \| null`       | `null`    |
+
+Выходов нет. Два слота проекции:
+
+- `[rtEmptyIllustration]` — картинка над иконкой;
+- слот по умолчанию — действие (кнопка).
+
+## Главное, что нужно знать
+
+**Каждая часть необязательна.** Пустой `title` не создаёт пустой строки в раскладке, `null`-иконка
+и `null`-описание просто не рисуются. Заглушка без единого входа — законное состояние: остаётся
+только слот действия.
+
+## Как этим пользоваться
+
+- Иконка рисуется крупной (`xl`, 32px) и приглушённой: это заглушка, а не аффорданс. Кликабельным
+  должно быть проецируемое действие.
+- Слот действия существует всегда, даже пустым; прячет его `:empty` в стилях.
+
+## Рядом
+
+- [`rt-note`](../note/CONTEXT.md) — когда объяснить нужно, а места под заглушку нет.

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

@@ -0,0 +1,72 @@
+# `rt-field`
+
+Обёртка единой анатомии поля: подпись сверху, контрол посередине, подсказка или ошибка снизу.
+
+```html
+<rt-field label="Имя" hint="Как в паспорте" help="Совпадает с документом" [errors]="{ required: 'Без имени не пустим' }">
+    <rt-input [formControl]="name" />
+</rt-field>
+
+<rt-field label="Комментарий">
+    <rt-textarea [formControl]="comment" />
+    <span rtFieldHint>
+        Не короче
+        <strong>трёх</strong>
+        символов
+    </span>
+</rt-field>
+```
+
+| вход               | тип                            | умолчание |
+| ------------------ | ------------------------------ | --------- |
+| `label`            | `string`                       | `''`      |
+| `hint`             | `string`                       | `''`      |
+| `help`             | `string`                       | `''`      |
+| `errors`           | `Record<validatorKey, string>` | `{}`      |
+| `readonly`         | `boolean`                      | `false`   |
+| `loading`          | `boolean`                      | `false`   |
+| `hideRequiredMark` | `boolean`                      | `false`   |
+| `reserveHintSpace` | `boolean`                      | `false`   |
+
+## Главное, что нужно знать
+
+**Поле само находит контрол** через `contentChild(RtFormControlBase)` — достаточно положить любой
+контрол кита внутрь. Дальше оно:
+
+- выдаёт контролу авто-идентификатор (`rt-field-N`) и связывает с ним `<label for>`, если у
+  контрола нет своего `controlId`;
+- рисует «\*», если у контрола есть валидатор обязательности (обнаруживается сам, входа для этого
+  нет);
+- показывает текст ошибки и включает режим плоского чтения.
+
+Всё это работает только для контролов кита. Обычный `<input>` внутрь класть можно, но подписи,
+звёздочки и ошибки он не получит.
+
+## Ошибки
+
+Показывается **одно** сообщение — первого сработавшего валидатора. Текст берётся так:
+
+1. `errors[имяВалидатора]`, переданный формой;
+2. переведённое умолчание кита (`required`, `email`, `minlength`, `maxlength`, `min`, `max`,
+   `pattern`);
+3. пусто, если валидатор незнаком и своего текста нет.
+
+Ошибка появляется только после касания или правки контрола — это решает сам контрол, а не поле.
+
+## Подсказка
+
+- Строковый `[hint]` — обычный случай.
+- Проекция `[rtFieldHint]` — когда подсказке нужна разметка; она **важнее** строкового входа.
+- Без резерва подсказка уступает место ошибке. С `reserveHintSpace` она остаётся в потоке, но
+  прячется от скринридера (`aria-hidden`), а высота строки перестаёт скакать при появлении ошибки.
+
+## Края
+
+- `hideRequiredMark` нужен формам, где обязательны все поля и звёздочка становится шумом.
+- `loading` оборачивает **только зону контрола** в заглушку; подпись и подсказка остаются
+  видимыми — по ним читается, чего ждут.
+- Текст пояснения (`help`) живёт в поповере и до наведения не отрисован.
+
+## Рядом
+
+- [`RtFormControlBase`](../form-control/CONTEXT.md) — что именно поле читает у контрола.

package/src/lib/components/file-card/CONTEXT.md

@@ -0,0 +1,28 @@
+# `rt-file-card`
+
+Карточка файла: иконка по типу, имя, размер и необязательные действия.
+
+```html
+<rt-file-card name="Договор.pdf" size="md" showDownload showRemove [sizeBytes]="204800" (download)="save()" (removed)="detach()" />
+```
+
+| вход                                         | тип                    | умолчание      |
+| -------------------------------------------- | ---------------------- | -------------- |
+| `name`                                       | `string`               | **обязателен** |
+| `sizeBytes`                                  | `number \| null`       | `null`         |
+| `size`                                       | `'sm' \| 'md' \| 'lg'` | `'md'`         |
+| `showDownload` / `showRename` / `showRemove` | `boolean`              | `false`        |
+| `disabled`                                   | `boolean`              | `false`        |
+
+Выходы: `download`, `rename`, `removed`.
+
+## Главное, что нужно знать
+
+**Иконка и заголовок выводятся из имени файла.** Расширение выбирает иконку (незнакомое даёт
+общую), а заголовок — это имя без расширения с заменёнными `_` и `-` на пробелы. Отдельных
+входов для них нет.
+
+**Длинное имя обрезается в середине**, чтобы расширение осталось видно: `очень-длинн...pdf`.
+
+**Без входов действий карточка немая** — ни одной кнопки. Она бывает просто вложением, которое
+показывают.

package/src/lib/components/file-drop/CONTEXT.md

@@ -0,0 +1,39 @@
+# `rt-file-drop`
+
+Область приёма файлов перетаскиванием. Оборачивает любое содержимое и показывает подсказку
+поверх него.
+
+```html
+<rt-file-drop accept=".pdf" [zones]="zones" (filesDropped)="attach($event)" (zoneFilesDropped)="attachTo($event)">
+    <app-form />
+</rt-file-drop>
+```
+
+| вход           | тип               | умолчание                        |
+| -------------- | ----------------- | -------------------------------- |
+| `disabled`     | `boolean`         | `false`                          |
+| `overlayLabel` | `string`          | `''` → `rtKit.uiFileDropOverlay` |
+| `zones`        | `readonly Zone[]` | `[]`                             |
+| `accept`       | `string`          | `''`                             |
+
+Выходы: `filesDropped` (`File[]`), `zoneFilesDropped` (`{ zoneId, files }`), `draggingChange`.
+
+## Главное, что нужно знать
+
+**С зонами общее событие сброса не поднимается** — зона обязана быть названа. Без зон, наоборот,
+приходит только `filesDropped`.
+
+**Уход курсора гасит подсказку не сразу** (80 мс). Без задержки рамка мерцала бы при переходе
+между дочерними элементами области.
+
+**Файлы не того типа отсекаются по `accept`**, и пустой после фильтра сброс события не поднимает.
+
+## Края
+
+- Зона выбирается долей от высоты области. Пока высоты нет (первый кадр, скрытая вкладка),
+  выбор детерминирован — первая зона, а не отказ: файл терять нельзя.
+- Отключённая область не показывает подсказку и не принимает файлы.
+
+## Рядом
+
+- [`rt-file-input`](../file-input/CONTEXT.md) — выбор файлов кнопкой.