@rt-tools/ui-kit-v2 0.1.0 → 0.4.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/footer/rt-dialog-footer.component.scss

@@ -1,13 +1,24 @@
-/* rt-dialog-footer — footer-слот модалки. ViewEncapsulation.None. */
+/* rt-dialog-footer — footer-слот модалки. ViewEncapsulation.None.
 
-.rt-dialog-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--rt-space-lg);
-    border-block-start: 1px solid var(--rt-color-border-subtle);
-    gap: var(--rt-space-sm);
+   Хост адресуется по имени элемента, а не по классу блока: класс
+   `.rt-dialog-footer` висит и на `<rt-dialog-footer>`, и на `<footer>` внутри
+   него. Правило на голом классе доставалось обоим — кнопки прижимались к правому
+   краю не окна, а строки по содержимому, и разделитель рисовался дважды. Заодно
+   `:empty` теперь спрашивается у `<footer>`, а не у хоста: у хоста внутри всегда
+   лежит `<footer>`, и пустым он не бывал никогда. */
 
-    &:empty {
-        display: none;
+rt-dialog-footer {
+    display: contents;
+
+    .rt-dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: var(--rt-space-lg);
+        border-block-start: 1px solid var(--rt-color-border-subtle);
+        gap: var(--rt-space-sm);
+
+        &:empty {
+            display: none;
+        }
     }
 }

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

@@ -1,21 +1,33 @@
 /* rt-dialog-header — заголовок модалки. ViewEncapsulation.None.
-   Селекторы префиксованы `.rt-dialog-header`. */
+   Селекторы префиксованы `.rt-dialog-header`.
 
-.rt-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--rt-space-lg);
-    border-block-end: 1px solid var(--rt-color-border-subtle);
-    gap: var(--rt-space-sm);
+   Хост адресуется по имени элемента, а не по классу блока: класс
+   `.rt-dialog-header` висит и на `<rt-dialog-header>`, и на `<header>` внутри
+   него. Правило на голом классе доставалось обоим — хост становился flex-строкой,
+   а `<header>` внутри неё сжимался по содержимому: заголовок и крестик стояли
+   вплотную вместо краёв окна, и разделитель рисовался дважды, двумя линиями
+   разной длины. Хост боксом не становится: строка шапки должна быть прямым
+   flex-ребёнком рамки окна. */
 
-    &__title {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-xl);
-    }
+rt-dialog-header {
+    display: contents;
+
+    .rt-dialog-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--rt-space-lg);
+        border-block-end: 1px solid var(--rt-color-border-subtle);
+        gap: var(--rt-space-sm);
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xl);
+        }
 
-    &__close {
-        margin-inline-start: auto;
+        &__close {
+            margin-inline-start: auto;
+        }
     }
 }

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` |
+
+## Главное, что нужно знать
+
+**Это кнопка, а не ссылка.** Адреса компонент не знает и ничего не скачивает — качает
+потребитель по событию. Так работают и подписанные ссылки с коротким сроком жизни, и выгрузки,
+которые сначала надо построить.
+
+## Как этим пользоваться
+
+- Подпись для скринридера собирается из переведённой формулировки и имени файла
+  (`uiDownloadFile` с подстановкой `{{name}}`) — на экране видно имя, а вслух читается
+  «Download: Договор.pdf».
+- Для перечня вложений есть [`rt-file-list`](../file-list/CONTEXT.md); эта кнопка — одиночная.

package/src/lib/components/download-link/rt-download-link.component.scss

@@ -14,6 +14,19 @@
         font-weight: var(--rt-font-weight-medium);
         gap: var(--rt-space-sm);
         line-height: var(--rt-leading-snug);
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        /* Своей рамки у кнопки нет — она нарисована как ссылка, и умолчательный контур
+           браузер снимает вместе с рамкой. Без этого правила место фокуса с клавиатуры
+           не видно вовсе: кнопка выглядит одинаково выбранной и невыбранной. */
+        &:focus-visible {
+            border-radius: var(--rt-radius-sm);
+            box-shadow: var(--rt-shadow-focus-ring);
+            outline: none;
+        }
     }
 
     &__icon {

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) — когда объяснить нужно, а места под заглушку нет.