@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,95 @@
+/* rt-tag — status pill в common/ui (Emulated encapsulation; :host обязательно). */
+
+:host {
+    display: inline-flex;
+
+    .rt-tag {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--rt-space-1) var(--rt-space-2);
+        border-radius: var(--rt-radius-md);
+        background: var(--rt-neutral-100);
+        color: var(--rt-neutral-700);
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-1);
+        line-height: var(--rt-leading-tight);
+
+        &--shape--pill {
+            border-radius: var(--rt-radius-full);
+        }
+
+        &--shape--square {
+            border-radius: var(--rt-radius-sm);
+        }
+
+        /* Явный radius переопределяет shape — правила идут позже по порядку. */
+        &--radius--none {
+            border-radius: var(--rt-radius-none);
+        }
+
+        &--radius--sm {
+            border-radius: var(--rt-radius-sm);
+        }
+
+        &--radius--md {
+            border-radius: var(--rt-radius-md);
+        }
+
+        &--radius--lg {
+            border-radius: var(--rt-radius-lg);
+        }
+
+        &--radius--full {
+            border-radius: var(--rt-radius-full);
+        }
+
+        &--severity--info {
+            background: var(--rt-color-state-info-bg);
+            color: var(--rt-color-state-info);
+        }
+
+        &--severity--success {
+            background: var(--rt-color-state-success-bg);
+            color: var(--rt-color-state-success);
+        }
+
+        &--severity--warning {
+            background: var(--rt-color-state-warning-bg);
+            color: var(--rt-color-state-warning);
+        }
+
+        &--severity--danger {
+            background: var(--rt-color-state-danger-bg);
+            color: var(--rt-color-state-danger);
+        }
+
+        &--severity--secondary,
+        &--severity--neutral {
+            background: var(--rt-color-bg-subtle);
+            color: var(--rt-color-text-primary);
+        }
+
+        /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
+           После severity-блоков — иначе их `background` перебил бы transparent. */
+        &--appearance--outlined {
+            border: var(--rt-border-width-thin) solid currentcolor;
+            background: transparent;
+        }
+
+        &__icon {
+            flex-shrink: 0;
+        }
+
+        &__icon-end {
+            flex-shrink: 0;
+        }
+
+        &__text {
+            line-height: var(--rt-leading-none);
+        }
+
+        &__close {
+            margin-inline-start: var(--rt-space-0-5);
+        }
+    }
+}

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

@@ -0,0 +1,78 @@
+.rt-textarea {
+    display: block;
+    width: 100%;
+
+    /* bordered=false: снимаем только resting-рамку контрола. Объявлено ДО блока
+       __control — его focus-visible (равная специфичность) и правило
+       --invalid __control идут ниже по source-order и перекрывают рамку. */
+    &--borderless &__control {
+        border-color: transparent;
+    }
+
+    &__control {
+        width: 100%;
+        min-height: var(--rt-textarea-min-height);
+        box-sizing: border-box;
+        padding: var(--rt-textarea-padding-y) var(--rt-input-padding-x);
+        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);
+        color: var(--rt-input-color-text);
+
+        /* textarea не наследует font-family от body на UA-defaults (browser даёт
+           monospace) — задаём inherit явно, иначе шрифт отваливается. */
+        font-family: inherit;
+        font-size: var(--rt-input-font-size);
+        line-height: var(--rt-textarea-line-height);
+        transition: var(--rt-input-transition);
+
+        &::placeholder {
+            color: var(--rt-input-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &:focus-visible {
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: var(--rt-input-focus-outline-offset);
+        }
+
+        &:disabled {
+            background-color: var(--rt-input-color-bg-disabled);
+            cursor: not-allowed;
+        }
+    }
+
+    &--size--sm &__control {
+        min-height: var(--rt-textarea-min-height-sm);
+    }
+
+    &--size--lg &__control {
+        min-height: var(--rt-textarea-min-height-lg);
+    }
+
+    &--invalid &__control {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus-visible {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    /* Read-only: многострочное значение как плоский текст (переносы сохраняем). */
+    &__readonly {
+        display: block;
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+        white-space: pre-wrap;
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+}

package/src/lib/components/theme-toggle/rt-theme-toggle.component.scss

@@ -0,0 +1,3 @@
+:host {
+    display: inline-flex;
+}

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

@@ -0,0 +1,248 @@
+.rt-thread-list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-block-size: 0;
+
+    // Фикс-высота 56px держит верхнюю «полку» списка на одном бейзлайне с хедером
+    // чата (rt-toolbar dense) и хедером колонки деталей — иначе низы трёх колонок
+    // расходятся и верхний край воркспейса читается рваным.
+    &__head {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        block-size: 56px;
+        border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
+        gap: var(--rt-space-2);
+        padding-inline: var(--rt-space-4);
+    }
+
+    &__search {
+        flex: 1 1 auto;
+        max-inline-size: 400px;
+        min-inline-size: 0;
+    }
+
+    &__filter-trigger {
+        flex: 0 0 auto;
+    }
+
+    &__filters-panel {
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-3);
+        gap: var(--rt-space-2);
+        min-inline-size: 220px;
+    }
+
+    &__rows {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        min-block-size: 0;
+        overflow-y: auto;
+    }
+
+    &__row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--rt-space-2-5) var(--rt-space-4);
+        border: none;
+        background: none;
+
+        // Прозрачная левая полоса зарезервирована на всех строках, чтобы окраска
+        // у выбранной не сдвигала контент.
+        border-inline-start: 3px solid transparent;
+        cursor: pointer;
+
+        // `<button>` не наследует шрифт из UA-стилей — без этого строки списка
+        // рендерятся системным Arial ~13.33px вместо Montserrat 14px, как везде.
+        font-family: inherit;
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-3);
+        inline-size: 100%;
+        text-align: start;
+
+        &:hover {
+            background: var(--rt-color-bg-subtle);
+        }
+
+        // Выбранная строка: брендовый фон + акцентная левая полоса. Раньше делила
+        // `--rt-color-bg-subtle` с :hover — выбор был неотличим от наведения.
+        &--active,
+        &--active:hover {
+            background: var(--rt-color-state-info-bg);
+            border-inline-start-color: var(--rt-color-action-primary);
+        }
+
+        // Непрочитанное видно независимо от шаблона строки: жирный заголовок
+        // работает только со штатной разметкой, а точку у левого края и более
+        // плотный фон получает любой потребитель, включая собственные шаблоны.
+        &--unread {
+            position: relative;
+            background: var(--rt-color-bg-subtle);
+            border-inline-start-color: var(--rt-color-action-primary);
+
+            .rt-thread-list__row-title {
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
+            &:before {
+                position: absolute;
+                border-radius: var(--rt-radius-full);
+                background: var(--rt-color-action-primary);
+                block-size: var(--rt-space-1-5);
+                content: '';
+                inline-size: var(--rt-space-1-5);
+                inset-block-start: 50%;
+                inset-inline-start: var(--rt-space-1-5);
+                transform: translateY(-50%);
+            }
+        }
+
+        // Выбранная переписка важнее непрочитанной: иначе открытый тред с новым
+        // сообщением сливается с остальными непрочитанными в списке.
+        &--active,
+        &--active:hover {
+            background: var(--rt-color-state-info-bg);
+        }
+
+        &--overdue {
+            .rt-thread-list__row-time {
+                color: var(--rt-color-state-error-text);
+            }
+        }
+    }
+
+    &__row-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-0-5);
+        min-inline-size: 0;
+    }
+
+    &__row-title {
+        overflow: hidden;
+        color: var(--rt-color-text-primary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__row-id {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+    }
+
+    &__row:hover .rt-copy-cell__button,
+    &__row:focus-within .rt-copy-cell__button {
+        opacity: 1;
+    }
+
+    &__row-subtitle {
+        overflow: hidden;
+        color: var(--rt-color-text-muted);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__row-meta {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--rt-space-1-5);
+    }
+
+    &__row-time {
+        color: var(--rt-color-text-muted);
+        white-space: nowrap;
+    }
+
+    &__row-tag {
+        padding: var(--rt-space-0-5) var(--rt-space-1-5);
+        border-radius: var(--rt-radius-sm);
+        background: var(--rt-color-state-warning-surface);
+        color: var(--rt-color-state-warning-text);
+        font-size: var(--rt-text-xs);
+        white-space: nowrap;
+    }
+
+    &__row-dot {
+        display: inline-block;
+        border-radius: var(--rt-radius-full);
+        background: var(--rt-color-text-link);
+        block-size: 6px;
+        inline-size: 6px;
+    }
+
+    &__row-skeleton {
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-2-5) var(--rt-space-4);
+        gap: var(--rt-space-1-5);
+    }
+
+    &__row-loader {
+        display: flex;
+        justify-content: center;
+        padding: var(--rt-space-2) var(--rt-space-4);
+    }
+
+    &__load-anchor {
+        block-size: 1px;
+    }
+
+    &__empty {
+        padding: var(--rt-space-6) var(--rt-space-4);
+    }
+
+    // Иллюстрация пустого состояния: стопка декоративных строк-превью тредов
+    // (аватар + две «полоски» текста), средняя со сдвигом — намёк на список чатов.
+    &__empty-preview {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-1);
+    }
+
+    &__empty-card {
+        display: flex;
+        align-items: center;
+        padding: var(--rt-space-2);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-radius-lg);
+        background: var(--rt-color-bg-surface-subtle);
+        gap: var(--rt-space-2);
+
+        &--offset {
+            transform: translateX(20px);
+        }
+    }
+
+    &__empty-avatar {
+        display: grid;
+        flex: 0 0 auto;
+        border-radius: var(--rt-radius-full);
+        background: var(--rt-color-text-muted);
+        block-size: 24px;
+        color: var(--rt-color-bg-surface);
+        inline-size: 24px;
+        place-items: center;
+    }
+
+    &__empty-lines {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-1-5);
+    }
+
+    &__empty-line {
+        border-radius: var(--rt-radius-full);
+        background: var(--rt-color-border-strong);
+        block-size: 6px;
+        inline-size: 112px;
+
+        &--short {
+            inline-size: 48px;
+        }
+    }
+}

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

@@ -0,0 +1,95 @@
+/* rt-timeline — вертикальный таймлайн-степпер в common/ui (Emulated; :host обязателен). */
+
+:host {
+    display: block;
+
+    .rt-timeline {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        &__item {
+            display: flex;
+            gap: var(--rt-space-sm);
+
+            // Последний шаг без линии — не растягиваем хвост под ним.
+            &:last-child {
+                .rt-timeline__body {
+                    padding-block-end: 0;
+                }
+            }
+        }
+
+        &__rail {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            inline-size: 16px;
+        }
+
+        &__dot {
+            box-sizing: border-box;
+            flex: none;
+            border-radius: var(--rt-radius-full);
+            background: var(--rt-color-stepper-track);
+            block-size: 10px;
+            inline-size: 10px;
+            margin-block-start: var(--rt-space-xs);
+
+            &--status--complete {
+                background: var(--rt-color-stepper-progress);
+            }
+
+            &--status--current {
+                background: var(--rt-color-stepper-current);
+                block-size: 14px;
+                box-shadow: var(--rt-shadow-step-indicator);
+                inline-size: 14px;
+                margin-block-start: var(--rt-space-2xs);
+            }
+
+            &--status--pending {
+                border: var(--rt-border-width-thin) solid var(--rt-color-stepper-track);
+                background: transparent;
+            }
+        }
+
+        // Соединительная линия тянется от точки вниз до следующего шага.
+        &__line {
+            flex: 1 1 auto;
+            background: var(--rt-color-stepper-track);
+            inline-size: 2px;
+            margin-block-start: var(--rt-space-2xs);
+        }
+
+        &__body {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+            padding-block-end: var(--rt-space-md);
+        }
+
+        &__label {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__meta {
+            display: inline-flex;
+            flex-wrap: wrap;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            gap: var(--rt-space-xs);
+            line-height: var(--rt-leading-snug);
+        }
+
+        // Точка-разделитель между временем и инициатором.
+        &__actor:before {
+            content: '·';
+            margin-inline-end: var(--rt-space-xs);
+        }
+    }
+}