@rt-tools/ui-kit-v2 0.1.0

package/src/lib/components/rich-editor/rt-rich-editor.component.scss

@@ -0,0 +1,71 @@
+// Базовая тема Quill (snow) подключена глобально в project.json приложения (styles).
+// Здесь — только перекрытие цветов на семантические --rt-* токены (dark-aware):
+// нативный snow светлый (иконки #444, границы #ccc) и в тёмной теме не читается.
+.rt-rich-editor {
+    // Хост — flex-колонка (тулбар над контейнером). min-block-size:0 позволяет
+    // ужиматься ниже интринзик-высоты Quill, когда редактор — flex-item в
+    // height-ограниченном родителе (композер в fill-режиме): без этого контейнер
+    // с фиксированной высотой вываливается за ужатый хост и перекрывает соседей.
+    display: flex;
+    flex-direction: column;
+    min-block-size: 0;
+
+    .ql-toolbar.ql-snow,
+    .ql-container.ql-snow {
+        border-color: var(--rt-color-border-default);
+    }
+
+    .ql-toolbar.ql-snow {
+        flex: 0 0 auto;
+        border-start-end-radius: var(--rt-radius-md);
+        border-start-start-radius: var(--rt-radius-md);
+    }
+
+    // Native snow задаёт контейнеру Helvetica 13px — возвращаем шрифт приложения.
+    // flex:1 + min-block-size:0 + overflow держат зону ввода внутри хоста —
+    // при нехватке высоты контент скроллится, а не наезжает на контролы.
+    .ql-container.ql-snow {
+        flex: 1 1 auto;
+        border-end-end-radius: var(--rt-radius-md);
+        border-end-start-radius: var(--rt-radius-md);
+        font-family: inherit;
+        font-size: inherit;
+        min-block-size: 0;
+        overflow-y: auto;
+    }
+
+    .ql-editor {
+        background-color: var(--rt-color-bg-surface-subtle);
+        color: var(--rt-color-text-default);
+        min-block-size: 96px;
+    }
+
+    .ql-editor.ql-blank:before {
+        color: var(--rt-color-text-muted);
+        font-style: normal;
+    }
+
+    // Иконки тулбара — приглушённый цвет по умолчанию (native #444 в dark не виден).
+    .ql-snow .ql-stroke {
+        stroke: var(--rt-color-text-muted);
+    }
+
+    .ql-snow .ql-fill {
+        fill: var(--rt-color-text-muted);
+    }
+
+    .ql-snow .ql-picker {
+        color: var(--rt-color-text-muted);
+    }
+
+    // Активная/наведённая кнопка — акцентный цвет.
+    .ql-snow .ql-toolbar button:hover .ql-stroke,
+    .ql-snow button.ql-active .ql-stroke {
+        stroke: var(--rt-color-text-link);
+    }
+
+    .ql-snow .ql-toolbar button:hover .ql-fill,
+    .ql-snow button.ql-active .ql-fill {
+        fill: var(--rt-color-text-link);
+    }
+}

package/src/lib/components/section-nav/rt-section-nav.component.scss

@@ -0,0 +1,52 @@
+.rt-section-nav {
+    display: flex;
+    gap: var(--rt-space-md);
+
+    &__tile {
+        display: flex;
+        min-width: 0;
+        flex: 1 0 0;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-md);
+        border: 0;
+        border-radius: var(--rt-radius-xl);
+        background: transparent;
+        box-shadow: none;
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        gap: var(--rt-space-2-5);
+        transition:
+            background var(--rt-duration-fast) ease,
+            box-shadow var(--rt-duration-fast) ease;
+
+        &:not(.rt-section-nav__tile--active):hover {
+            background: var(--rt-color-bg-surface-subtle);
+            box-shadow: var(--rt-shadow-card-soft);
+        }
+
+        &--active {
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-shadow-card-soft);
+            cursor: default;
+        }
+    }
+
+    &__icon {
+        color: inherit;
+    }
+
+    &__label {
+        color: inherit;
+        font-family: var(--rt-font-family-sans);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-bold);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+    }
+}
+
+:host-context([data-theme='dark']) .rt-section-nav__tile--active {
+    background: var(--rt-blue-900);
+}

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

@@ -0,0 +1,173 @@
+.rt-select {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    /* bordered=false: снимаем только resting-рамку триггера. Объявлено ДО блока
+       __trigger — его :focus и правила --open/--invalid/--readonly __trigger
+       (равная специфичность) идут ниже по source-order и перекрывают рамку. */
+    &--borderless &__trigger {
+        border-color: transparent;
+    }
+
+    &__trigger {
+        display: flex;
+        width: 100%;
+        min-height: var(--rt-input-height);
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-input-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);
+        cursor: pointer;
+
+        /* Триггер — нативный <button>: без явного наследования берёт UA-шрифт
+           (Arial), а не Montserrat от body. */
+        font-family: inherit;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-input-line-height);
+        text-align: start;
+        transition: var(--rt-input-transition);
+
+        // :focus (не :focus-visible) — триггер это <button>, у которого
+        // :focus-visible не срабатывает на клик мышью; кольцо нужно и при клике.
+        &:focus {
+            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 {
+            cursor: not-allowed;
+        }
+    }
+
+    &--open &__trigger {
+        border-color: var(--rt-input-color-border-focus);
+    }
+
+    &--invalid &__trigger {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    /* Read-only: триггер остаётся в DOM (нужен для viewChild.required popover'а),
+       но скрыт — значение показывает плоский текст __readonly. */
+    &--readonly &__trigger {
+        display: none;
+    }
+
+    /* Read-only: выбранный label как плоский текст. */
+    &__readonly {
+        display: inline-flex;
+        min-height: var(--rt-input-height);
+        align-items: center;
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &--size--sm &__trigger {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg &__trigger {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    &__label {
+        overflow: hidden;
+        min-width: 0;
+        flex: 1 1 auto;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--placeholder {
+            color: var(--rt-input-color-text-placeholder);
+        }
+    }
+
+    &__icon-left,
+    &__clear {
+        flex-shrink: 0;
+    }
+
+    &__chevron {
+        flex-shrink: 0;
+        transition: transform var(--rt-duration-fast) ease;
+    }
+
+    &--open &__chevron {
+        transform: rotate(180deg);
+    }
+
+    /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK,
+       здесь только chrome. Глобальный класс (ViewEncapsulation.None). */
+    &__panel {
+        width: 100%;
+        max-height: var(--rt-input-panel-max-height);
+        box-sizing: border-box;
+        border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-input-radius);
+        background-color: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-shadow-md);
+        overflow-y: auto;
+    }
+
+    &__filter {
+        padding: var(--rt-space-sm);
+        border-block-end: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
+    }
+
+    &__list {
+        padding: var(--rt-space-2xs) 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    &__option {
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        font-size: var(--rt-input-font-size);
+
+        &:hover,
+        &--active {
+            background-color: var(--rt-color-bg-hover);
+        }
+
+        &--selected {
+            background-color: var(--rt-color-action-primary-subtle);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    &__empty {
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        color: var(--rt-input-color-text-placeholder);
+        font-style: italic;
+    }
+}

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

@@ -0,0 +1,56 @@
+.rt-skeleton {
+    --rt-skeleton-wave-duration: 2.5s;
+
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    background: linear-gradient(90deg, var(--rt-color-bg-subtle) 0%, var(--rt-color-border-default) 50%, var(--rt-color-bg-subtle) 100%);
+    background-size: 200% 100%;
+
+    &--rectangle {
+        border-radius: var(--rt-radius-sm);
+    }
+
+    &--circle {
+        border-radius: var(--rt-radius-full);
+    }
+
+    &--square {
+        border-radius: 0;
+    }
+
+    &--sm {
+        min-width: 10px;
+        min-height: 10px;
+    }
+
+    &--md {
+        min-width: 15px;
+        min-height: 15px;
+    }
+
+    &--lg {
+        min-width: 20px;
+        min-height: 20px;
+    }
+
+    &--animated {
+        animation: rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite;
+    }
+}
+
+@keyframes rt-skeleton-wave {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-skeleton--animated {
+        animation: none;
+    }
+}

package/src/lib/components/skeleton-wrapper/rt-skeleton-wrapper.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: inline-flex;
+    width: 100%;
+}

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

@@ -0,0 +1,42 @@
+.rt-spinner {
+    --rt-spinner-diameter: 32px;
+    --rt-spinner-border-width: 3px;
+    --rt-spinner-track-color: var(--rt-color-border-subtle);
+    --rt-spinner-progress-color: var(--rt-color-action-primary);
+    --rt-spinner-rotation-duration: 1s;
+    --rt-spinner-rotation-duration-reduced: 4s;
+
+    display: inline-block;
+    width: var(--rt-spinner-diameter);
+    height: var(--rt-spinner-diameter);
+    box-sizing: border-box;
+    border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
+    border-radius: var(--rt-radius-full);
+    border-right-color: var(--rt-spinner-progress-color);
+    animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+
+    &--primary {
+        --rt-spinner-progress-color: var(--rt-color-action-primary);
+    }
+
+    &--neutral {
+        --rt-spinner-progress-color: var(--rt-color-text-primary);
+    }
+
+    &--on-primary {
+        --rt-spinner-track-color: rgb(255 255 255 / 30%);
+        --rt-spinner-progress-color: var(--rt-color-action-on-primary);
+    }
+}
+
+@keyframes rt-spinner-rotate {
+    to {
+        transform: rotate(1turn);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-spinner {
+        animation-duration: var(--rt-spinner-rotation-duration-reduced);
+    }
+}

package/src/lib/components/split-button/rt-split-button.component.scss

@@ -0,0 +1,64 @@
+/* rt-split-button — основной CTA + каретка с меню второстепенных действий.
+   ViewEncapsulation.None: селекторы префиксованы `.rt-split-button`. Меню
+   рендерится в CDK Overlay, поэтому `__menu` стилизуется глобально (вне host'а). */
+
+.rt-split-button {
+    display: inline-flex;
+
+    /* Контрол — origin popover'а (width="trigger" берёт его ширину) и flex-ряд
+       лица + каретки. */
+    &__control {
+        display: inline-flex;
+        width: 100%;
+        align-items: stretch;
+    }
+
+    /* Лицо и каретка сшиты в один контрол: смежные углы выпрямлены,
+       каретку отделяет тонкий делитель. */
+    &__face.rt-button {
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+    }
+
+    &__toggle.rt-button {
+        min-width: 0;
+        border-end-start-radius: 0;
+        border-inline-start: var(--rt-border-width-thin) solid color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
+        border-start-start-radius: 0;
+        padding-inline: var(--rt-space-sm);
+
+        /* Шеврон наследует цвет текста кнопки: svg `.rt-button__icon` без
+           `fill: currentColor` тянет дефолтный чёрный, не цвет лейбла. */
+        .rt-button__icon {
+            fill: currentcolor;
+            transition: transform var(--rt-duration-fast) ease;
+        }
+    }
+
+    /* Открытое меню — шеврон смотрит вверх (как у select/multiselect). */
+    &--open &__toggle.rt-button .rt-button__icon {
+        transform: rotate(180deg);
+    }
+
+    /* Меню (overlay). width="trigger" задаёт ширину панели = ширине контрола,
+       поэтому меню тянется на 100% и box-sizing учитывает падинг. */
+    &__menu {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-space-2xs);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-radius-md);
+        margin: 0;
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-shadow-lg);
+        gap: var(--rt-space-2xs);
+        list-style: none;
+    }
+
+    &__menu-item.rt-button {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}

package/src/lib/components/stat-tile/rt-stat-tile.component.scss

@@ -0,0 +1,108 @@
+/* rt-stat-tile — KPI-плитка в common/ui (Emulated encapsulation; :host обязательно).
+
+   Рамку и фон плитка не рисует: плитки стоят рядом внутри одной карточки, а
+   разделители между ними — забота контейнера. */
+
+:host {
+    display: block;
+
+    .rt-stat-tile {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        gap: var(--rt-space-2);
+
+        &__head {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-1);
+        }
+
+        &__label {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__hint {
+            color: var(--rt-color-text-muted);
+            cursor: help;
+        }
+
+        &__value-row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-3);
+        }
+
+        &__value {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-3xl);
+            font-weight: var(--rt-font-weight-bold);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__delta {
+            display: inline-flex;
+            align-items: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-bold);
+            gap: var(--rt-space-1);
+            line-height: var(--rt-leading-none);
+
+            &--direction--up {
+                color: var(--rt-color-state-success);
+            }
+
+            &--direction--down {
+                color: var(--rt-color-state-danger);
+            }
+        }
+
+        &__year {
+            flex: 0 0 auto;
+            padding: var(--rt-space-0-5) var(--rt-space-1-5);
+            border-radius: var(--rt-radius-sm);
+            background: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+            white-space: nowrap;
+
+            &--direction--up {
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
+
+            &--direction--down {
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
+        }
+
+        &__baseline {
+            overflow: hidden;
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* Вторичная метрика прижата к низу: строки «было …» может не быть,
+           и без прижатия плитки в ряду разъезжались бы по базовой линии. */
+        &__secondary {
+            overflow: hidden;
+            margin: 0;
+            margin-top: auto;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

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

@@ -0,0 +1,117 @@
+/* rt-stepper — линейный прогресс-степпер в common/ui (Emulated; :host обязателен). */
+
+:host {
+    display: block;
+
+    .rt-stepper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-3);
+
+        &__rail {
+            position: relative;
+            block-size: 39px;
+        }
+
+        &__label {
+            position: absolute;
+            margin: 0;
+            color: var(--rt-color-stepper-current);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+            inset-block-start: 0;
+            letter-spacing: var(--rt-letter-spacing-wide);
+            line-height: var(--rt-leading-none);
+            transition: left var(--rt-duration-fast) ease-out;
+            white-space: nowrap;
+
+            /* Подпись висит над активной точкой (`left` задаётся инлайном):
+               на крайних шагах прижимаем к краю точки, иначе центрируем. */
+            &--anchor--start {
+                transform: translateX(0);
+            }
+
+            &--anchor--center {
+                transform: translateX(-50%);
+            }
+
+            &--anchor--end {
+                transform: translateX(-100%);
+            }
+        }
+
+        &__track-band {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            block-size: 16px;
+            inset-block-end: 0;
+            inset-inline: 0;
+        }
+
+        &__track,
+        &__progress {
+            position: absolute;
+            border-radius: var(--rt-radius-full);
+            block-size: 2px;
+            inset-block-start: 50%;
+            inset-inline-start: 0;
+            transform: translateY(-50%);
+        }
+
+        &__track {
+            background: var(--rt-color-stepper-track);
+            inset-inline-end: 0;
+        }
+
+        &__progress {
+            background: var(--rt-color-stepper-progress);
+            transition: width var(--rt-duration-fast) ease-out;
+        }
+
+        &__points {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0;
+            margin: 0;
+            inline-size: 100%;
+            list-style: none;
+        }
+
+        &__point {
+            border-radius: var(--rt-radius-full);
+            background: var(--rt-color-stepper-track);
+            block-size: 8px;
+            inline-size: 8px;
+            transition:
+                inline-size var(--rt-duration-fast) ease-out,
+                block-size var(--rt-duration-fast) ease-out,
+                background var(--rt-duration-fast) ease-out;
+
+            &--complete {
+                background: var(--rt-color-stepper-progress);
+            }
+
+            &--current {
+                background: var(--rt-color-stepper-current);
+                block-size: 16px;
+                box-shadow: var(--rt-shadow-step-indicator);
+                inline-size: 16px;
+            }
+        }
+
+        &__description {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xs);
+            letter-spacing: var(--rt-letter-spacing-wide);
+            line-height: var(--rt-leading-snug);
+
+            & + & {
+                margin-block-start: var(--rt-space-2-5);
+            }
+        }
+    }
+}