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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/CONTEXT.md

@@ -0,0 +1,49 @@
+# Компоненты `@rt-tools/ui-kit-v2`
+
+72 семейства, каждое — своя директория с одинаковым устройством:
+
+```
+tag/
+  index.ts                  # баррель семейства
+  rt-tag.component.ts       # компонент
+  rt-tag.component.html
+  rt-tag.component.scss
+  rt-tag.model.ts           # неймспейс IRtTag с union-типами входов
+  rt-tag.component.spec.ts  # проверки
+  CONTEXT.md                # контракт, края, чем отличается от соседей
+  stories/                  # витрина
+```
+
+**У каждого семейства есть свой CONTEXT.md** — читать надо его, а не этот файл: здесь только
+карта и то, что верно для всех.
+
+## Что верно для всех компонентов
+
+- **Селектор `rt-*`**, `OnPush`, только сигнальные входы и выходы (`input()` / `output()`), без
+  `@Input`/`@Output`.
+- **Разметка размечена BEM-директивами** `rtBlock` / `rtElem` / `[rtMod]` из `@rt-tools/core`.
+  Модификатор `{ severity: 'info' }` даёт класс `rt-tag--severity--info`, булев `{ closable: true }` —
+  `rt-tag--closable`, камелкейс превращается в дефис (`hasIndicator` → `--has-indicator`).
+- **Точки для проверок помечены `qa-dataid`** — по нему компонент находят и спеки, и e2e.
+- **Подписи, которые кит рисует сам**, живут в неймспейсе `rtKit` и приходят через
+  `provideRtKitTranslations()`. Свой текст почти везде перебивает переведённый; пустая строка
+  равна отсутствию входа.
+- **Цвета и размеры — только токены `--rt-*`**, ни одного HEX в компонентных стилях.
+
+## Карта
+
+| задача                   | компонент                                                                                                                         |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
+| иконка, кольцо, заглушка | `icon`, `spinner`, `skeleton`, `skeleton-wrapper`                                                                                 |
+| статус, счётчик, метка   | `tag`, `live-badge`, `info-item`, `stat-tile`, `delta-view`                                                                       |
+| кнопки                   | `button` (директива), `icon-button`, `split-button`, `toggle-button-group`                                                        |
+| поля ввода               | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `file-input`, `rich-editor`           |
+| списки выбора            | `select`, `multiselect`, `autocomplete`, `filter-control`                                                                         |
+| обёртка поля             | `field`, `form-control` (основа)                                                                                                  |
+| плавающие панели         | `popover`, `tooltip`, `confirm-popover`, `menu`, `toast`                                                                          |
+| окна и панели            | `dialog`, `aside`, `aside-section`, `bottom-sheet`, `welcome-dialog`, `photo-viewer`                                              |
+| каркас страницы          | `container`, `workspace`, `workspace-details`, `header`, `page-header`, `toolbar`, `section-nav`                                  |
+| данные                   | `table`, `pagination`, `thread-list`, `detail-list`, `money-list`, `bar-list`, `timeline`, `night-grid`, `calendar`               |
+| переписка                | `chat`, `message`, `message-composer`                                                                                             |
+| файлы                    | `file-card`, `file-list`, `file-drop`, `download-link`                                                                            |
+| прочее                   | `card`, `note`, `empty-state`, `tabs`, `stepper`, `logo`, `theme-toggle`, `notifications-bell`, `collapsible-text`, `counter-row` |

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

@@ -0,0 +1,51 @@
+# `rt-aside` + `RtAsideService`
+
+Панель, выезжающая сбоку поверх страницы. Открывается **сервисом**, а не разметкой.
+
+```typescript
+readonly #aside: RtAsideService = inject(RtAsideService);
+
+const ref: RtAsideRef<ITour> = this.#aside.open(TourCardComponent, { data: tour, position: 'right' });
+ref.afterClosed().subscribe((result?: ITour): void => …);
+```
+
+```html
+<!-- внутри поднятого компонента -->
+<rt-aside size="md" ariaLabel="Карточка тура">
+    <rt-aside-header title="Тур в Сочи" />
+    <rt-aside-section heading="Клиент">…</rt-aside-section>
+    <rt-aside-footer>…</rt-aside-footer>
+</rt-aside>
+```
+
+| вход `rt-aside` | тип                    | умолчание   |
+| --------------- | ---------------------- | ----------- |
+| `size`          | `'sm' \| 'md' \| 'lg'` | `'md'`      |
+| `contentLayout` | `'default' \| 'tabs'`  | `'default'` |
+| `width`         | `string \| null`       | `null`      |
+| `ariaLabel`     | `string \| null`       | `null`      |
+
+| настройка `open()`                       | умолчание                                 |
+| ---------------------------------------- | ----------------------------------------- |
+| `data`                                   | `null` — доезжает токеном `RT_ASIDE_DATA` |
+| `position`                               | `'right'`                                 |
+| `closeOnBackdropClick` / `closeOnEscape` | `true`                                    |
+| `backdropClass` / `panelClass`           | `rt-aside-backdrop` / `rt-aside-overlay`  |
+
+## Главное, что нужно знать
+
+**Асайд объявлен `role="complementary"`, а не диалогом.** Он не модален: страница за ним
+остаётся видна, и это осознанный выбор — карточку смотрят, не теряя список.
+
+**Закрытие двухтактное.** `close(result)` отдаёт результат **сразу**, а панель убирает через
+200 мс — чтобы доиграла анимация ухода. В тестах это значит: подписчик получил значение, а
+`.rt-aside-overlay` ещё в документе. Повторный `close()` игнорируется.
+
+**`disableClose`** на `RtAsideRef` держит панель под кликом по подложке и под Escape — ставится
+самим содержимым, когда в форме есть несохранённое.
+
+## Рядом
+
+- [`rt-aside-section`](../aside-section/CONTEXT.md) — раздел внутри.
+- [`rt-bottom-sheet`](../bottom-sheet/CONTEXT.md) — то же на узком экране.
+- [`rt-dialog`](../dialog/CONTEXT.md) — когда нужна именно модальность.

package/src/lib/components/aside/_rt-aside-overlay.scss

@@ -0,0 +1,88 @@
+/* Панель и backdrop CDK Overlay, в котором живёт rt-aside.
+
+   Оверлей-контейнер CDK — sibling от <body>, поэтому эти правила глобальны по
+   природе: инкапсуляции здесь нет ни при какой настройке компонента.
+
+   Овладеть ими может не только сам rt-aside: rt-container держит ту же панель в
+   persistent-режиме и должен рисовать её, даже когда rt-aside в сборку не попал.
+   Поэтому правила вынесены сюда и подключаются обоими — один текст, один набор
+   значений, и разойтись им негде. */
+
+/* Backdrop / длительность анимации — переопределяемые CSS-properties. */
+:root {
+    --rt-aside-animation-duration: 200ms;
+    --rt-aside-backdrop-bg: rgb(0 0 0 / 45%);
+    --rt-aside-backdrop-blur: 5px;
+}
+
+/* Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
+   CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при attach;
+   при persistent overlay (rt-container auto-attach) backdrop должен оставаться скрытым
+   пока aside не открыт. Два класса (.cdk-overlay-backdrop + .rt-aside-backdrop) — выше
+   specificity чем одиночный (.cdk-overlay-backdrop-showing), поэтому наш opacity:0
+   побеждает. */
+.cdk-overlay-backdrop.rt-aside-backdrop {
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+    -webkit-backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+    backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+    background: var(--rt-aside-backdrop-bg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--rt-aside-animation-duration) ease;
+
+    &.rt-aside-backdrop--visible {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
+.rt-aside-overlay {
+    height: 100dvh;
+    transition: transform var(--rt-aside-animation-duration) ease;
+}
+
+/* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
+   и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
+   выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
+   чтобы правило не зависело от порядка, в котором браузер получил стили панели и
+   стили контейнера. */
+.rt-aside-overlay:not(.rt-aside-overlay--open) {
+    pointer-events: none;
+}
+
+/* Стартовое положение за краем экрана не анимируется: переход из него начинается,
+   как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
+.rt-aside-overlay.rt-aside-overlay--entering {
+    transition: none;
+}
+
+/* Slide-in / slide-out states — переключаются сервисом через Renderer2 на host.
+   --entering: initial off-screen position; --open: in place; --leaving: off-screen exit. */
+.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 {
+        overflow: hidden;
+        width: 100dvw;
+        max-width: 100dvw;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-aside-overlay {
+        transition: none;
+    }
+}

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

@@ -1,20 +1,17 @@
 /* rt-aside — styled frame side-sheet (mirror rt-dialog с заменой токенов).
    ViewEncapsulation.None — селекторы префиксованы `.rt-aside`.
-   Видимость / backdrop / slide-in анимацию обеспечивает CDK Overlay через RtAsideService. */
+   Видимость / backdrop / slide-in анимацию обеспечивает CDK Overlay через RtAsideService.
 
-:host {
-    display: contents;
-}
+   Панель и backdrop самого overlay вынесены в отдельный кусок: тот же набор
+   правил нужен rt-container, который держит панель в persistent-режиме. */
 
-/* Size tokens — sm/md/lg (aside уже модалки чем rt-dialog).
-   Backdrop / animation duration — component-local, переопределяемые через CSS-properties. */
+@use './rt-aside-overlay';
+
+/* Size tokens — sm/md/lg (aside уже модалки чем rt-dialog). */
 :root {
     --rt-aside-width-sm: 400px;
     --rt-aside-width-md: 540px;
     --rt-aside-width-lg: 720px;
-    --rt-aside-animation-duration: 200ms;
-    --rt-aside-backdrop-bg: rgb(0 0 0 / 45%);
-    --rt-aside-backdrop-blur: 5px;
 
     /* Инсет панели: шапка, содержимое и футер отбиты от края одним и тем же
        значением, поэтому поля во всех панелях одной ширины. */
@@ -24,7 +21,15 @@
     --rt-aside-content-gap: var(--rt-space-md);
 }
 
-.rt-aside {
+/* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-aside`
+   висит и на `<rt-aside>`, и на рамке внутри него, поэтому правила рамки
+   вложены в хост. Сам хост боксом не становится: рамка должна быть прямым
+   flex-ребёнком overlay-панели. */
+rt-aside {
+    display: contents;
+}
+
+rt-aside .rt-aside {
     display: flex;
     width: var(--rt-aside-width, var(--rt-aside-width-md));
 
@@ -117,92 +122,12 @@
     }
 }
 
-/* CDK Overlay backdrop + panel классы, выставляемые RtAsideService.
-   Live в global scope — overlay-container — sibling от <body>,
-   encapsulation не работает. */
-
-/* Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
-   CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при attach;
-   при persistent overlay (rt-container auto-attach) backdrop должен оставаться скрытым
-   пока aside не открыт. Два класса (.cdk-overlay-backdrop + .rt-aside-backdrop) — выше
-   specificity чем одиночный (.cdk-overlay-backdrop-showing), поэтому наш opacity:0
-   побеждает. */
-.cdk-overlay-backdrop.rt-aside-backdrop {
-    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-    -webkit-backdrop-filter: blur(var(--rt-aside-backdrop-blur));
-    backdrop-filter: blur(var(--rt-aside-backdrop-blur));
-    background: var(--rt-aside-backdrop-bg);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--rt-aside-animation-duration) ease;
-
-    &.rt-aside-backdrop--visible {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
-
-.rt-aside-overlay {
-    height: 100dvh;
-    transition: transform var(--rt-aside-animation-duration) ease;
-}
-
-/* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
-   и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
-   выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
-   чтобы правило не зависело от порядка, в котором браузер получил стили панели и
-   стили контейнера. */
-.rt-aside-overlay:not(.rt-aside-overlay--open) {
-    pointer-events: none;
-}
-
-/* Стартовое положение за краем экрана не анимируется: переход из него начинается,
-   как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
-.rt-aside-overlay.rt-aside-overlay--entering {
-    transition: none;
-}
-
-/* Slide-in / slide-out states — переключаются сервисом через Renderer2 на host.
-   --entering: initial off-screen position; --open: in place; --leaving: off-screen exit. */
-.rt-aside-overlay--position-right.rt-aside-overlay--entering {
-    transform: translateX(100%);
-}
-
-.rt-aside-overlay--position-left.rt-aside-overlay--entering {
-    transform: translateX(-100%);
-}
-
-.rt-aside-overlay--position-right.rt-aside-overlay--open,
-.rt-aside-overlay--position-left.rt-aside-overlay--open {
-    transform: translateX(0);
-}
-
-.rt-aside-overlay--position-right.rt-aside-overlay--leaving {
-    transform: translateX(100%);
-}
-
-.rt-aside-overlay--position-left.rt-aside-overlay--leaving {
-    transform: translateX(-100%);
-}
-
 @media (width <= 768px) {
-    .rt-aside-overlay {
-        overflow: hidden;
-        width: 100dvw;
-        max-width: 100dvw;
-    }
-
-    .rt-aside,
-    .rt-aside--size--sm,
-    .rt-aside--size--md,
-    .rt-aside--size--lg {
+    rt-aside .rt-aside,
+    rt-aside .rt-aside--size--sm,
+    rt-aside .rt-aside--size--md,
+    rt-aside .rt-aside--size--lg {
         width: 100dvw;
         max-width: 100dvw;
     }
 }
-
-@media (prefers-reduced-motion: reduce) {
-    .rt-aside-overlay {
-        transition: none;
-    }
-}

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

@@ -0,0 +1,26 @@
+# `rt-aside-section`
+
+Раздел внутри асайда: необязательный заголовок и тело.
+
+```html
+<rt-aside-section heading="Контакты">
+    <rt-detail-list>…</rt-detail-list>
+</rt-aside-section>
+```
+
+| вход      | тип              | умолчание |
+| --------- | ---------------- | --------- |
+| `heading` | `string \| null` | `null`    |
+
+Выходов нет; содержимое приходит проекцией.
+
+## Главное, что нужно знать
+
+**Без заголовка пустой строки не появляется.** Разделы асайда часто идут подряд без подписей, и
+пустой заголовок добавлял бы им лишний отступ.
+
+Тело раздела рисуется всегда, даже пустым: прячут его стили.
+
+## Рядом
+
+- [`rt-aside`](../aside/CONTEXT.md) — сам асайд.

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

@@ -0,0 +1,58 @@
+# `rt-autocomplete<TItem>`
+
+Поле с подсказками. Ищет **потребитель** — компонент только сообщает, что набрано.
+
+```html
+<rt-autocomplete
+    [formControl]="city"
+    [suggestions]="found()"
+    [displayWith]="cityLabel"
+    [minLength]="2"
+    (complete)="search($event.query)"
+    (itemSelect)="onPicked($event)" />
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход           | тип                                         | умолчание            |
+| -------------- | ------------------------------------------- | -------------------- |
+| `suggestions`  | `ReadonlyArray<TItem>`                      | `[]`                 |
+| `displayWith`  | `(item: TItem \| null) => string`           | `String(item ?? '')` |
+| `placeholder`  | `string`                                    | `''`                 |
+| `minLength`    | `number`                                    | `1`                  |
+| `openOnFocus`  | `boolean`                                   | `false`              |
+| `iconLeft`     | `IRtIcon.Name \| null`                      | `null`               |
+| `itemTemplate` | `TemplateRef<{ $implicit: TItem }> \| null` | `null`               |
+
+| выход        | тип                        |
+| ------------ | -------------------------- |
+| `complete`   | `{ query, originalEvent }` |
+| `itemSelect` | `TItem`                    |
+
+Значение — `TItem | null` (объект, а не строка).
+
+## Главное, что нужно знать
+
+**Набор текста не пишет значение в форму.** В форме лежит объект, а набранная строка — это ещё
+не объект. Значение появляется только при выборе подсказки. Отсюда же следует, что «свободный
+ввод» этим компонентом не поддерживается: если пользователь набрал текст и ушёл, значение
+осталось прежним.
+
+**Задайте `displayWith`.** Без него подписи подсказок и текст в поле собираются через
+`String(item)`, и объект превращается в `[object Object]`. Функция нужна и для отрисовки
+подсказки, и для подстановки текста после выбора, и для плоского режима чтения.
+
+## Как этим пользоваться
+
+- Панель открывается, когда набрано не меньше `minLength` символов; более короткая строка
+  закрывает её и события не поднимает.
+- `openOnFocus` дополнительно запрашивает подсказки при фокусе — для списков «последнее
+  выбранное».
+- `itemTemplate` рисует свою разметку подсказки (иконка, две строки); контекст — `$implicit`.
+- Крестик очистки стирает и текст, и значение.
+- Клавиатура: `ArrowDown`/`ArrowUp` водят по подсказкам, `Enter` выбирает, `Escape` закрывает.
+  При закрытой панели клавиши ничего не делают.
+
+## Рядом
+
+- [`rt-select`](../select/CONTEXT.md) — когда набор известен заранее.

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

@@ -0,0 +1,27 @@
+# `rt-bar-list`
+
+Список долей с горизонтальными полосами: источники трафика, распределение по статусам.
+
+```html
+<rt-bar-list title="Источники" [rows]="[{ id: 'direct', title: 'Прямые заходы', meta: '1 240 визитов', value: '52%', sharePercent: 52 }]" />
+```
+
+| вход        | тип                                                        | умолчание               |
+| ----------- | ---------------------------------------------------------- | ----------------------- |
+| `rows`      | `ReadonlyArray<{ id, title, meta?, value, sharePercent }>` | **обязателен**          |
+| `title`     | `string`                                                   | `''`                    |
+| `emptyText` | `string`                                                   | `''` → `rtKit.uiNoData` |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**`value` и `sharePercent` — разные вещи.** Первое рисуется текстом справа (это может быть
+«52%», «1 240 ₽», «12 шт.»), второе задаёт ширину полосы. Считать проценты компонент не умеет —
+он их только показывает.
+
+## Края
+
+- Пустой набор подменяет список заглушкой с иконкой; свой текст перебивает переведённый.
+- Идентификатор строки дублируется атрибутом `data-id`.
+- Приписка `meta` рисуется, только когда передана.

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

@@ -1,6 +1,9 @@
-/* rt-bar-list — топ-N со шкалой доли в common/ui (Emulated encapsulation; :host обязательно). */
+/* rt-bar-list — топ-N со шкалой доли в common/ui. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-bar-list` висит
+   и на `<rt-bar-list>`, и на корне шаблона, поэтому правила блока вложены в хост —
+   так они достаются только корню шаблона. */
 
-:host {
+rt-bar-list {
     display: block;
 
     .rt-bar-list {

package/src/lib/components/bottom-sheet/CONTEXT.md

@@ -0,0 +1,54 @@
+# `rt-bottom-sheet`
+
+Лист, выезжающий снизу. Мобильная замена асайду и диалогу.
+
+```html
+<rt-bottom-sheet [open]="filtersOpen()" (openChange)="filtersOpen.set($event)">
+    <h2 sheetHeader>Фильтры</h2>
+    <rt-filter-control … />
+</rt-bottom-sheet>
+```
+
+| вход   | тип       | умолчание      |
+| ------ | --------- | -------------- |
+| `open` | `boolean` | **обязателен** |
+
+| выход        | тип                                          |
+| ------------ | -------------------------------------------- |
+| `openChange` | `boolean` (всегда `false` — просьба закрыть) |
+
+Слоты: `[sheetHeader]` — шапка; слот по умолчанию — содержимое.
+
+## Главное, что нужно знать
+
+**Лист не закрывает себя сам.** Состоянием владеет потребитель: клик по подложке и свайп вниз
+поднимают `openChange` со значением `false`, а закрыть должен тот, кто держит сигнал. Так лист
+можно не закрывать, если что-то не сохранено.
+
+**Закрытый лист остаётся в разметке.** Прячут его стили, а не `@if`: анимацию выезда и ухода
+рисует CSS, и исчезнувший из DOM узел анимировать было бы нечем. В тестах это значит, что
+`rt-bottom-sheet__panel` найдётся и у закрытого листа — смотреть надо на модификатор
+`rt-bottom-sheet--open` на host-е.
+
+**Раз лист остаётся в разметке, закрытым он помечается `inert`.** Прозрачность и
+`pointer-events` прячут его от глаза и мыши, но не убирают ни из порядка табуляции, ни из дерева
+доступности: без `inert` страница с закрытым листом держала бы в табуляции невидимую кнопку
+«Закрыть», а скринридер объявлял бы модальный диалог, которого не видно.
+
+## Свайп
+
+Порог — **80 px** (`DRAG_DISMISS_THRESHOLD_PX` в
+`rt-bottom-sheet.logic.ts`). Ровно на пороге лист остаётся
+открытым, закрывается только за ним. Вверх лист не тянется: отрицательный сдвиг обнуляется.
+После отпускания сдвиг сбрасывается независимо от исхода.
+
+## Края
+
+- Подложка — настоящая `<button>` с переведённой подписью, а не немой `div`: до неё доходят
+  клавиатурой и её называет скринридер.
+- Панель объявлена `role="dialog"` с `aria-modal="true"`.
+
+## Рядом
+
+- [`rt-aside`](../aside/CONTEXT.md) — то же на широком экране.
+- [`rt-dialog`](../dialog/CONTEXT.md) — модальное окно по центру.

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

@@ -1,71 +1,71 @@
-:host {
+/* rt-bottom-sheet — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-bottom-sheet` — сам хост (шаблон начинается с ng-container, класс и
+   модификатор `--open` ставит host). */
+
+.rt-bottom-sheet {
     position: fixed;
     z-index: 1000;
     inset: 0;
     pointer-events: none;
 
-    .rt-bottom-sheet {
-        &__backdrop {
-            position: absolute;
-            padding: 0;
-            border: none;
-            background: var(--rt-overlay-black-50);
-            cursor: pointer;
-            inset: 0;
-            opacity: 0;
-            transition: opacity var(--rt-duration-base) ease;
-        }
+    &__backdrop {
+        position: absolute;
+        padding: 0;
+        border: none;
+        background: var(--rt-overlay-black-50);
+        cursor: pointer;
+        inset: 0;
+        opacity: 0;
+        transition: opacity var(--rt-duration-base) ease;
+    }
 
-        &__panel {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            display: flex;
-            max-height: 80vh;
-            flex-direction: column;
-            border-radius: var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;
-            background: var(--rt-color-bg-surface);
-            box-shadow: var(--rt-shadow-card-soft);
-            transform: translateY(100%);
-            transition: transform var(--rt-duration-base) ease;
+    &__panel {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        max-height: 80vh;
+        flex-direction: column;
+        border-radius: var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-shadow-card-soft);
+        transform: translateY(100%);
+        transition: transform var(--rt-duration-base) ease;
 
-            &--dragging {
-                transition: none;
-            }
+        &--dragging {
+            transition: none;
         }
+    }
 
-        &__handle {
-            width: 40px;
-            height: 4px;
-            align-self: center;
-            border-radius: var(--rt-radius-xs);
-            margin: var(--rt-space-3) 0;
-            background: var(--rt-color-border-default);
-            cursor: grab;
-            touch-action: none;
-        }
+    &__handle {
+        width: 40px;
+        height: 4px;
+        align-self: center;
+        border-radius: var(--rt-radius-xs);
+        margin: var(--rt-space-3) 0;
+        background: var(--rt-color-border-default);
+        cursor: grab;
+        touch-action: none;
+    }
 
-        &__header {
-            display: flex;
-            justify-content: center;
-            padding: 0 var(--rt-space-5) var(--rt-space-3);
-            color: var(--rt-color-text-primary);
-            font-weight: var(--rt-font-weight-semibold);
-        }
+    &__header {
+        display: flex;
+        justify-content: center;
+        padding: 0 var(--rt-space-5) var(--rt-space-3);
+        color: var(--rt-color-text-primary);
+        font-weight: var(--rt-font-weight-semibold);
     }
 
-    &.rt-bottom-sheet--open {
+    &--open {
         pointer-events: auto;
 
-        .rt-bottom-sheet {
-            &__backdrop {
-                opacity: 1;
-            }
+        .rt-bottom-sheet__backdrop {
+            opacity: 1;
+        }
 
-            &__panel {
-                transform: translateY(0);
-            }
+        .rt-bottom-sheet__panel {
+            transform: translateY(0);
         }
     }
 }