@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,366 @@
+.rt-chat {
+    display: flex;
+    flex-direction: column;
+
+    // Встроенная drop-обёртка несёт колоночную раскладку чата (тред/композер
+    // стопкой) и служит позиционным якорем для drag-оверлея. Тред/композер
+    // проецируются внутрь, BEM-контекст `rt-chat` сохраняется (DI декларации).
+    > .rt-file-drop {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: var(--rt-space-3);
+        min-block-size: 0;
+    }
+
+    // Полноэкранный режим — overlay поверх страницы. Чат заполняет вьюпорт как
+    // flex-колонка: скроллится только тред, а композер и футер (доменные действия
+    // потребителя) остаются прижаты к низу и всегда видны. Раньше overflow-y был
+    // на всём чате — тред рос на все сообщения и выталкивал композер за экран.
+    // Собственный фон нужен только здесь: в обычном режиме фон даёт потребитель.
+    &--expanded {
+        position: fixed;
+        z-index: var(--rt-z-modal);
+        box-sizing: border-box;
+        padding: var(--rt-space-md);
+        background: var(--rt-color-bg-surface);
+        inset: 0;
+    }
+
+    &--expanded > .rt-file-drop {
+        block-size: 100%;
+
+        // На широких экранах чат не растягивается на весь вьюпорт: тред и
+        // композер иначе разрежены. Свыше 1440px фиксируем колонку по центру.
+        @media (width >= 1441px) {
+            inline-size: 1000px;
+            margin-inline: auto;
+            max-inline-size: 100%;
+        }
+    }
+
+    &--expanded &__thread-viewport {
+        flex: 1 1 auto;
+        min-block-size: 0;
+    }
+
+    &--expanded &__thread {
+        max-height: none;
+    }
+
+    // Fill-режим: чат занимает всю высоту контейнера, тред растягивается на
+    // свободное место, композер остаётся прижатым к низу.
+    &--fill {
+        block-size: 100%;
+    }
+
+    &--fill &__thread-viewport {
+        flex: 1 1 auto;
+        min-block-size: 0;
+    }
+
+    &--fill &__thread {
+        max-height: none;
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-family: var(--rt-font-family-sans);
+        font-size: var(--rt-text-md);
+        font-weight: var(--rt-font-weight-bold);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+    }
+
+    &__thread-viewport {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        // Пузыри меряют максимальную ширину в процентах от треда: без contain
+        // длинное неразрывное слово сначала распирает тред, и только потом от
+        // него считаются проценты — лента уезжает по горизонтали.
+        contain: inline-size;
+        min-block-size: 0;
+    }
+
+    &__thread {
+        display: flex;
+        max-height: 280px;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: var(--rt-space-4);
+        min-block-size: 0;
+        overflow-y: auto;
+
+        &--frozen {
+            overflow-y: hidden;
+        }
+    }
+
+    &__thread-overlay {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: color-mix(in srgb, var(--rt-color-bg-surface) 60%, transparent);
+        inset: 0;
+    }
+
+    &__footer-slot {
+        display: flex;
+        flex-direction: column;
+
+        &:empty {
+            display: none;
+        }
+
+        &--blocked {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+
+    // Строка сообщения — общий hover-контейнер пузыря и боковой кнопки удаления.
+    // Ховер отслеживается по всей строке, поэтому переход курсора с текста на
+    // кнопку (она снаружи пузыря) непрерывен: кнопка не пропадает в зазоре.
+    &__message-row {
+        display: flex;
+        max-width: min(80%, 480px);
+        align-items: center;
+
+        // Входящие — влево, свои — вправо. max-width на строке: пузырь + кнопка
+        // вместе не растягиваются через весь тред.
+        align-self: flex-start;
+        gap: var(--rt-space-1-5);
+
+        &--own {
+            align-self: flex-end;
+        }
+
+        // Кнопка проявляется по наведению/фокусу в пределах всей строки.
+        &:hover .rt-chat__message-delete,
+        &:focus-within .rt-chat__message-delete {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    &__message {
+        display: flex;
+        min-width: 0;
+
+        // grow:0 — пузырь обнимает контент (короткие не растягиваются); shrink:1 +
+        // min-width:0 — длинный текст переносится внутри строки, не распирая её.
+        flex: 0 1 auto;
+        flex-direction: column;
+        padding: var(--rt-space-2-5);
+
+        // Срезанный угол со стороны автора заменяет «хвостик» пузыря: направление
+        // видно даже когда соседние сообщения одного цвета идут подряд.
+        border-radius: var(--rt-radius-lg) var(--rt-radius-lg) var(--rt-radius-lg) 0;
+        background: var(--rt-chat-bubble-in-bg);
+        gap: var(--rt-space-2-5);
+
+        &--own {
+            border-radius: var(--rt-radius-lg) var(--rt-radius-lg) 0 var(--rt-radius-lg);
+            background: var(--rt-chat-bubble-own-bg);
+        }
+
+        // Удалённое сообщение остаётся в ленте, но приглушено и с пунктиром.
+        &--deleted {
+            border: var(--rt-border-width-thin) dashed var(--rt-color-border-default);
+            background: transparent;
+        }
+    }
+
+    &__message-author {
+        margin: 0;
+        color: var(--rt-chat-bubble-in-author);
+        font-size: var(--rt-text-2xs);
+        font-weight: var(--rt-font-weight-bold);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+    }
+
+    &__message--own &__message-author {
+        color: var(--rt-chat-bubble-own-author);
+    }
+
+    &__message-text {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+        line-height: var(--rt-leading-snug);
+        white-space: pre-wrap;
+
+        // Плейсхолдер удалённого сообщения — курсив, приглушённый цвет.
+        &--deleted {
+            color: var(--rt-color-text-muted);
+            font-style: italic;
+        }
+    }
+
+    // Боковая кнопка удаления: flex-сосед пузыря (не наезжает на текст), место
+    // под неё зарезервировано всегда (opacity, не display) — тред не «прыгает»
+    // при наведении. Проявляется по ховеру строки (см. `&__message-row`).
+    &__message-delete {
+        flex: 0 0 auto;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--rt-duration-fast) ease;
+    }
+
+    &__message-attachment {
+        display: block;
+    }
+
+    &__message-footer {
+        display: flex;
+        align-items: center;
+        gap: var(--rt-space-1);
+    }
+
+    &__message-date {
+        color: var(--rt-chat-bubble-date);
+        font-size: var(--rt-text-xs);
+        line-height: var(--rt-leading-none);
+    }
+
+    // Пер-месседж статус своего сообщения: часы / двойной чек / «!»+retry.
+    // sending и sent приглушены — цветом выделены только два состояния, о
+    // которых стоит знать: прочитано (синий) и не ушло (красный).
+    &__message-status {
+        display: inline-flex;
+        align-items: center;
+        color: var(--rt-color-text-muted);
+        gap: var(--rt-space-0-5);
+
+        &--status--read {
+            color: var(--rt-chat-status-read);
+        }
+
+        &--status--failed {
+            color: var(--rt-color-state-danger);
+        }
+    }
+
+    &__status-icon {
+        font-size: var(--rt-text-sm);
+    }
+
+    // Скелетон-пузырь повторяет геометрию `&__message`, чтобы подмена на реальное
+    // сообщение не сдвигала тред.
+    &__message-skeleton {
+        display: flex;
+        max-width: min(80%, 480px);
+        flex-direction: column;
+        align-self: flex-start;
+        padding: var(--rt-space-2-5);
+        border-radius: var(--rt-radius-lg) var(--rt-radius-lg) var(--rt-radius-lg) 0;
+        background: var(--rt-chat-bubble-in-bg);
+        gap: var(--rt-space-1);
+
+        &--own {
+            align-self: flex-end;
+            border-radius: var(--rt-radius-lg) var(--rt-radius-lg) 0 var(--rt-radius-lg);
+            background: var(--rt-chat-bubble-own-bg);
+        }
+    }
+
+    &__skeleton-line {
+        display: block;
+    }
+
+    // Кнопка-ссылка (привязка Telegram) внутри пузыря сообщения — прижата влево
+    // под текстом. Класс — на span'е, а не на rtButton: host-class rt-button затёр
+    // бы rtElem. Вид (outlined) даёт сам rtButton.
+    &__message-deeplink {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: var(--rt-space-1);
+    }
+
+    // Композер (и note-замена) отбиваем от ленты сильнее общего gap'а, чтобы поле
+    // ввода визуально отделялось от последнего сообщения.
+    &__composer,
+    &__composer-rich,
+    &__reply-block {
+        margin-top: var(--rt-space-3);
+    }
+
+    &__composer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-2-5);
+    }
+
+    &__composer-files {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--rt-space-2);
+    }
+
+    // Поле ввода — одна рамка на скрепку и текст: скрепка снаружи читалась бы
+    // как отдельное действие, а не как часть сообщения. Геометрия взята из
+    // input-токенов, поэтому поле совпадает с остальными контролами формы.
+    &__composer-field {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+        border-radius: var(--rt-input-radius);
+        background-color: var(--rt-input-color-bg);
+        gap: var(--rt-space-1);
+        min-block-size: var(--rt-input-height);
+        padding-inline: var(--rt-input-padding-x);
+        transition: var(--rt-input-transition);
+
+        // Подсветка на всём поле, а не на textarea: рамка принадлежит обёртке.
+        &:focus-within {
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+        }
+
+        &--attach {
+            padding-inline-start: var(--rt-space-1);
+        }
+    }
+
+    &__composer-input {
+        // Именно content-box: cdkTextareaAutosize задаёт height по высоте строк,
+        // не прибавляя вертикальные поля. С глобальным border-box поле выходит
+        // ровно на одну строку меньше, и текст режется нижней границей.
+        box-sizing: content-box;
+        flex: 1 1 auto;
+        border: 0;
+        background: transparent;
+        color: var(--rt-input-color-text);
+        font-family: inherit;
+        font-size: var(--rt-input-font-size);
+        inline-size: 100%;
+        line-height: var(--rt-textarea-line-height);
+        padding-block: var(--rt-space-2);
+        resize: none;
+
+        &::placeholder {
+            color: var(--rt-input-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &:focus-visible {
+            outline: none;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__composer-send {
+        inline-size: 100%;
+    }
+}

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

@@ -0,0 +1,57 @@
+:host {
+    display: inline-block;
+}
+
+.rt-checkbox {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    gap: var(--rt-space-sm);
+    text-align: start;
+
+    &:focus-visible {
+        border-radius: var(--rt-radius-sm);
+        box-shadow: var(--rt-shadow-focus-ring);
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    &__box {
+        display: inline-flex;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        border: var(--rt-input-border-width) solid var(--rt-color-border-strong);
+        border-radius: var(--rt-radius-sm);
+        background: var(--rt-color-bg-surface);
+        transition:
+            background var(--rt-duration-fast) ease,
+            border-color var(--rt-duration-fast) ease;
+    }
+
+    &--checked &__box,
+    &--indeterminate &__box {
+        border-color: var(--rt-color-action-primary);
+        background: var(--rt-color-action-primary);
+    }
+
+    &__label {
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        user-select: none;
+
+        &:empty {
+            display: none;
+        }
+    }
+}

package/src/lib/components/collapsible-text/rt-collapsible-text.component.scss

@@ -0,0 +1,43 @@
+.rt-collapsible-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-space-sm);
+
+    &__text {
+        display: block;
+
+        &--clamped {
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    &__paragraph {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-family: var(--rt-font-family-sans);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+
+        & + & {
+            margin-top: var(--rt-space-sm);
+        }
+    }
+
+    &__toggle {
+        align-self: flex-start;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--rt-color-text-link);
+        cursor: pointer;
+        font-family: var(--rt-font-family-sans);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-medium);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+    }
+}

package/src/lib/components/confirm-popover/rt-confirm-popover.component.scss

@@ -0,0 +1,36 @@
+/* rt-confirm-popover — панель подтверждения в CDK Overlay. ViewEncapsulation.None.
+   Селекторы префиксованы `.rt-confirm-popover`. */
+
+.rt-confirm-popover {
+    display: flex;
+    width: 280px;
+    max-width: 280px;
+    flex-direction: column;
+    padding: var(--rt-space-md);
+    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+    border-radius: var(--rt-radius-md);
+    background: var(--rt-color-bg-surface);
+    box-shadow: var(--rt-shadow-lg);
+    gap: var(--rt-space-sm);
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-semibold);
+    }
+
+    &__message {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        line-height: var(--rt-leading-normal);
+    }
+
+    &__actions {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--rt-space-sm);
+        margin-block-start: var(--rt-space-xs);
+    }
+}

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

@@ -0,0 +1,175 @@
+.rt-container {
+    display: grid;
+    min-height: 100%;
+    flex: 1 1 auto;
+    background-color: var(--rt-color-bg-page, #f5f5f5);
+    color: var(--rt-color-text-primary, #222);
+    grid-template: 'header header' auto 'left-sidenav toolbar' auto 'left-sidenav content' 1fr / auto 1fr;
+
+    &__header {
+        // Хедер закреплён вверху: при скролле документа (высота контейнера не
+        // ограничена вьюпортом) grid-строка header уезжала бы вверх. sticky top:0
+        // держит её на месте. z-index:1 — выше later-DOM контента, но ниже CDK
+        // overlay асайдов (1000). Работает благодаря `html { overflow-x: clip }`
+        // (clip, в отличие от hidden, не создаёт scroll-контейнер и не ломает sticky).
+        position: sticky;
+        z-index: 1;
+        top: 0;
+        display: block;
+        grid-area: header;
+
+        // Обёртка прозрачна: спроецированный хедер даёт собственный фон. Свой
+        // bg-surface здесь протекал бы за скруглёнными нижними углами хедера —
+        // в тёмной теме это давало серые «уголки» (surface ≠ фон хедера).
+    }
+
+    &__left-sidenav {
+        display: block;
+        padding: var(--rt-space-md);
+        border-right: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        background-color: var(--rt-color-bg-surface, #fff);
+        grid-area: left-sidenav;
+    }
+
+    &__toolbar {
+        display: flex;
+        align-items: center;
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        background-color: var(--rt-color-bg-surface, #fff);
+        grid-area: toolbar;
+
+        &--slot--left {
+            justify-content: flex-start;
+        }
+
+        &--slot--center {
+            justify-content: center;
+        }
+
+        &--slot--right {
+            justify-content: flex-end;
+        }
+    }
+
+    &__content {
+        display: flex;
+        overflow: auto;
+        min-height: 0;
+        flex-direction: column;
+        grid-area: content;
+    }
+}
+
+/* App-shell раскладка (opt-in `height="viewport"`): контейнер жёстко равен
+   вьюпорту, документ не скроллится вовсе — скроллятся зоны внутри, каждая сама.
+   В дефолтном `auto` контейнер не ограничен вьюпортом (растёт под контент), из-за
+   чего `&__content { overflow: auto }` никогда не переполняется: скролл забирает
+   документ и утаскивает нав-рейл вместе со списком и лентой чата одним движением.
+   `min-block-size` сбрасываем — иначе `min-height: 100%` спорит с фиксированной
+   высотой, если родитель окажется выше вьюпорта. */
+.rt-container--viewport {
+    block-size: 100dvh;
+    min-block-size: 0;
+
+    /* Content перестаёт быть скролл-владельцем: он клипает, а скроллит то, что
+       внутри (список диалогов, лента чата) — у каждой зоны свой overflow. */
+    .rt-container__content {
+        overflow: hidden;
+    }
+
+    /* Нав-рейлу высоты вьюпорта хватает, скролла на нём быть не должно. `auto`,
+       а не `hidden`: в низком окне пункты меню иначе стали бы недостижимы. */
+    .rt-container__left-sidenav {
+        overflow: auto;
+    }
+}
+
+/* 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 и без привязки к его высоте.
+    .rt-container--mobile-left-bottom {
+        grid-template:
+            'header' auto
+            'toolbar' auto
+            'content' 1fr
+            'left-sidenav' auto
+            / 1fr;
+
+        .rt-container__left-sidenav {
+            padding: 0;
+            border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+            border-right: none;
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-aside-overlay {
+        transition: none;
+    }
+}

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

@@ -0,0 +1,15 @@
+:host {
+    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;
+        }
+    }
+}