@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,33 @@
+:host {
+    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;
+        }
+
+        &__label {
+            color: var(--rt-counter-row-label-color);
+            font-size: var(--rt-counter-row-label-font-size);
+            font-weight: var(--rt-font-weight-medium);
+        }
+
+        &__hint {
+            color: var(--rt-counter-row-hint-color);
+            font-size: var(--rt-counter-row-hint-font-size);
+        }
+    }
+}
+
+// Линия разделяет соседние строки, а не обводит каждую: рамка на всех дала бы
+// лишние границы сверху у первой и снизу у последней
+:host(:not(:first-of-type)) {
+    border-top: var(--rt-border-width-thin) solid var(--rt-counter-row-color-border);
+}

package/src/lib/components/date-picker/rt-date-picker.component.scss

@@ -0,0 +1,89 @@
+.rt-date-picker {
+    position: relative;
+    display: inline-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: text;
+    font-size: var(--rt-input-font-size);
+    gap: var(--rt-space-sm);
+    line-height: var(--rt-input-line-height);
+    transition: var(--rt-input-transition);
+
+    &:focus-within {
+        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);
+    }
+
+    /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+       ниже по source-order и перекрывают её своей рамкой. */
+    &--borderless {
+        border-color: transparent;
+    }
+
+    &--invalid {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus-within {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    &--size--sm {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    /* Read-only: дата как плоский текст — снимаем рамку/фон/паддинги. */
+    &--readonly {
+        padding-right: 0;
+        padding-left: 0;
+        border-color: transparent;
+        background-color: transparent;
+        cursor: default;
+    }
+
+    &__readonly {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &__field {
+        min-width: 0;
+        flex: 1 1 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        outline: none;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__clear {
+        flex-shrink: 0;
+    }
+}

package/src/lib/components/delta-view/rt-delta-view.component.scss

@@ -0,0 +1,31 @@
+.rt-delta-view {
+    display: block;
+
+    p,
+    ul,
+    ol,
+    blockquote,
+    pre,
+    h1,
+    h2,
+    h3 {
+        margin: 0;
+    }
+
+    ul,
+    ol {
+        padding-inline-start: var(--rt-space-lg);
+    }
+
+    blockquote {
+        border-inline-start: 1px solid var(--rt-color-border-default);
+        color: var(--rt-color-text-muted);
+        padding-inline-start: var(--rt-space-sm);
+    }
+
+    pre {
+        margin: 0;
+        font-family: monospace;
+        white-space: pre-wrap;
+    }
+}

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

@@ -0,0 +1,8 @@
+/* rt-detail-list — контейнер read-only строк деталей (ViewEncapsulation.None).
+   Селектор bare `.rt-detail-list` (класс на host). */
+
+.rt-detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-space-md);
+}

package/src/lib/components/detail-list/rt-detail-row.component.scss

@@ -0,0 +1,21 @@
+/* rt-detail-row — stacked строка «лейбл + значение» (ViewEncapsulation.None).
+   Селектор bare `.rt-detail-row` (класс на host). Типографика лейбла и значения
+   берётся из тех же `--rt-field-*` токенов, что и `rt-field`, — read-only строка
+   и редактируемое поле в одной секции выглядят одинаково. */
+
+.rt-detail-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-field-gap);
+
+    &__label {
+        color: var(--rt-field-label-color);
+        font-size: var(--rt-field-label-font-size);
+        font-weight: var(--rt-field-label-font-weight);
+    }
+
+    &__value {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+    }
+}

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

@@ -0,0 +1,13 @@
+/* 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);
+
+    &:empty {
+        display: none;
+    }
+}

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

@@ -0,0 +1,21 @@
+/* rt-dialog-header — заголовок модалки. ViewEncapsulation.None.
+   Селекторы префиксованы `.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);
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-xl);
+    }
+
+    &__close {
+        margin-inline-start: auto;
+    }
+}

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

@@ -0,0 +1,62 @@
+/* rt-dialog — styled frame модалки поверх CDK Overlay.
+   ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
+   Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
+
+:host {
+    display: contents;
+}
+
+/* Size tokens — sm/md/lg.
+   Component-локальные tokens для backdrop/shadow держим в :root, чтобы
+   feature-консьюмеры могли переопределить per-instance через --rt-dialog-*. */
+:root {
+    --rt-dialog-width-sm: 460px;
+    --rt-dialog-width-md: 660px;
+    --rt-dialog-width-lg: 860px;
+    --rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);
+    --rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);
+    --rt-dialog-backdrop-blur: 5px;
+}
+
+.rt-dialog {
+    display: flex;
+    overflow: hidden;
+    width: var(--rt-dialog-width, var(--rt-dialog-width-md));
+    max-width: 90dvw;
+    max-height: 90dvh;
+    flex-direction: column;
+    padding: 0;
+    border: none;
+    border-radius: var(--rt-radius-xl, 15px);
+    background: var(--rt-color-bg-surface);
+    box-shadow: var(--rt-dialog-shadow);
+    color: var(--rt-color-text-primary);
+
+    &--size--sm {
+        width: var(--rt-dialog-width, var(--rt-dialog-width-sm));
+    }
+
+    &--size--md {
+        width: var(--rt-dialog-width, var(--rt-dialog-width-md));
+    }
+
+    &--size--lg {
+        width: var(--rt-dialog-width, var(--rt-dialog-width-lg));
+    }
+}
+
+/* CDK Overlay backdrop + panel classes, выставляемые RtDialogService.
+   Live в global scope — overlay-container — sibling от <body>,
+   encapsulation не работает. */
+.rt-dialog-backdrop {
+    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+    -webkit-backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
+    backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
+    background: var(--rt-dialog-backdrop-bg);
+}
+
+.rt-dialog-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

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

@@ -0,0 +1,22 @@
+.rt-download-link {
+    display: inline-flex;
+
+    &__button {
+        display: inline-flex;
+        align-items: center;
+        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);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-leading-snug);
+    }
+
+    &__icon {
+        color: var(--rt-color-text-link);
+    }
+}

package/src/lib/components/empty-state/rt-empty-state.component.scss

@@ -0,0 +1,58 @@
+/* rt-empty-state — заглушка пустого состояния в common/ui (ViewEncapsulation.None).
+   Селектор bare `.rt-empty-state` (класс на host) — `:host` в None light-DOM не матчит.
+   Палитра приглушённая (как rt-note), центрированная вертикальная стопка. */
+
+.rt-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rt-space-xl) var(--rt-space-lg);
+    gap: var(--rt-space-sm);
+    text-align: center;
+
+    /* Слот иллюстрации (проецируемая графика вместо иконки) — скрыт, если пуст. */
+    &__illustration {
+        &:empty {
+            display: none;
+        }
+
+        margin-bottom: var(--rt-space-xs);
+    }
+
+    &__icon-wrap {
+        display: flex;
+        width: 64px;
+        height: 64px;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--rt-radius-full);
+        margin-bottom: var(--rt-space-xs);
+        background: var(--rt-color-bg-subtle);
+        color: var(--rt-color-text-muted);
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-md);
+        font-weight: var(--rt-font-weight-medium);
+    }
+
+    &__description {
+        max-width: 320px;
+        margin: 0;
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        line-height: var(--rt-leading-normal);
+    }
+
+    /* Слот действия скрыт, если ничего не спроецировано (пустой div). */
+    &__action {
+        &:empty {
+            display: none;
+        }
+
+        margin-top: var(--rt-space-sm);
+    }
+}

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

@@ -0,0 +1,78 @@
+.rt-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-field-gap);
+
+    &__label-row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rt-field-label-help-gap);
+    }
+
+    &__label {
+        color: var(--rt-field-label-color);
+        font-size: var(--rt-field-label-font-size);
+        font-weight: var(--rt-field-label-font-weight);
+    }
+
+    &__required {
+        color: var(--rt-field-required-color);
+    }
+
+    /* Зона значения: проецируемый контрол или read-only текст. Задаёт размер/цвет
+       значения, чтобы оно было крупнее и контрастнее muted-лейбла. Нативные
+       <input> у rt-контролов задают свой font-size сами и это не переопределяют —
+       подхватывают только проецируемые элементы (напр. read-only <p>). */
+    &__control {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+    }
+
+    &__help {
+        display: inline-flex;
+        padding: 0;
+        border: none;
+        margin: 0;
+        background: none;
+        cursor: help;
+    }
+
+    &__help-popover {
+        display: block;
+        max-width: 240px;
+        font-size: var(--rt-field-hint-font-size);
+    }
+
+    /* Зона сообщений под контролом. С резервом (reserveHintSpace) hint и ошибка
+       кладутся в одну ячейку грида: скрытый hint продолжает задавать высоту, и
+       подмена сообщения не двигает форму ни вниз, ни вверх. Без hint высоту
+       держит min-height в одну строку — считаем по error-шрифту, он крупнее. */
+    &__messages {
+        display: grid;
+
+        &--reserved {
+            font-size: var(--rt-field-error-font-size);
+            min-block-size: 1lh;
+
+            > * {
+                grid-area: 1 / 1;
+            }
+        }
+    }
+
+    &__hint {
+        color: var(--rt-field-hint-color);
+        font-size: var(--rt-field-hint-font-size);
+
+        /* Место под собой держит, глазу не мешает — только так высота зоны
+           остаётся равной большему из двух сообщений. */
+        &--hidden {
+            visibility: hidden;
+        }
+    }
+
+    &__error {
+        color: var(--rt-field-error-color);
+        font-size: var(--rt-field-error-font-size);
+    }
+}

package/src/lib/components/file-card/rt-file-card.component.scss

@@ -0,0 +1,96 @@
+/* rt-file-card — ViewEncapsulation.None, плоский `.rt-file-card` (как rt-file-input/rt-icon).
+   Host-класс ставится через @Component host:{class}. */
+.rt-file-card {
+    /* Дефолт = md; перезаписывается модификаторами sm/lg ниже. Размеры иконки
+       типа и кнопок действий сюда не входят — они задаются входами дочерних
+       компонентов и маппятся в .ts. */
+    --rt-file-card-padding-block: var(--rt-space-sm);
+    --rt-file-card-padding-inline: var(--rt-space-md);
+    --rt-file-card-gap: var(--rt-space-sm);
+    --rt-file-card-title-size: var(--rt-text-md);
+    --rt-file-card-name-size: var(--rt-text-sm);
+    --rt-file-card-badge-size: var(--rt-text-xs);
+
+    display: flex;
+    align-items: center;
+    padding: var(--rt-file-card-padding-block) var(--rt-file-card-padding-inline);
+    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+    border-radius: var(--rt-radius-lg);
+    background-color: var(--rt-color-bg-surface);
+    gap: var(--rt-file-card-gap);
+
+    &--sm {
+        --rt-file-card-padding-block: var(--rt-space-xs);
+        --rt-file-card-padding-inline: var(--rt-space-sm);
+        --rt-file-card-gap: var(--rt-space-xs);
+        --rt-file-card-title-size: var(--rt-text-xs);
+        --rt-file-card-name-size: var(--rt-text-2xs);
+        --rt-file-card-badge-size: var(--rt-text-2xs);
+    }
+
+    &--md {
+        --rt-file-card-padding-block: var(--rt-space-sm);
+        --rt-file-card-padding-inline: var(--rt-space-md);
+        --rt-file-card-gap: var(--rt-space-sm);
+        --rt-file-card-title-size: var(--rt-text-md);
+        --rt-file-card-name-size: var(--rt-text-sm);
+        --rt-file-card-badge-size: var(--rt-text-xs);
+    }
+
+    &--lg {
+        --rt-file-card-padding-block: var(--rt-space-md);
+        --rt-file-card-padding-inline: var(--rt-space-lg);
+        --rt-file-card-gap: var(--rt-space-md);
+        --rt-file-card-title-size: var(--rt-text-lg);
+        --rt-file-card-name-size: var(--rt-text-md);
+        --rt-file-card-badge-size: var(--rt-text-sm);
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    &__text {
+        display: flex;
+
+        /* min-width:0 нужен, чтобы дочерние с ellipsis могли сжиматься в flex-строке */
+        min-width: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: var(--rt-space-2xs);
+    }
+
+    &__title {
+        overflow: hidden;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-file-card-title-size);
+        font-weight: var(--rt-font-weight-semibold);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__name {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-file-card-name-size);
+    }
+
+    &__meta {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--rt-space-xs);
+    }
+
+    &__size {
+        padding: var(--rt-space-2xs) var(--rt-space-sm);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-radius-full);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-file-card-badge-size);
+        white-space: nowrap;
+    }
+
+    &__action {
+        flex-shrink: 0;
+    }
+}

package/src/lib/components/file-drop/rt-file-drop.component.scss

@@ -0,0 +1,91 @@
+/* rt-file-drop — зона перетаскивания файлов в common/ui (ViewEncapsulation.None).
+   Селектор bare `.rt-file-drop` (класс на host) — `:host` в None light-DOM не матчит.
+   Host — позиционный якорь для абсолютного оверлея, обрамляющего спроецированный
+   контент. Оверлей pointer-events:none — не перехватывает drag/drop. */
+
+.rt-file-drop {
+    position: relative;
+    display: block;
+    height: 100%;
+
+    &__overlay {
+        position: absolute;
+        z-index: 50;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-lg);
+        border-radius: var(--rt-radius-lg);
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+        -webkit-backdrop-filter: blur(4px);
+        backdrop-filter: blur(4px);
+        background: rgb(0 0 0 / 45%);
+
+        /* Отступ от краёв host'а — рамка-приглашение не прижата к границе зоны. */
+        inset: var(--rt-space-sm);
+        pointer-events: none;
+
+        /* Мультизонный режим: вертикальная стопка равных зон-целей. */
+        &--zoned {
+            flex-direction: column;
+            align-items: stretch;
+            padding: var(--rt-space-md);
+            gap: var(--rt-space-sm);
+        }
+    }
+
+    &__frame {
+        display: flex;
+        width: 100%;
+        height: 100%;
+
+        /* border-box: иначе height:100% + padding переполняет контейнер по
+           вертикали (flex-shrink ужимает только ширину) — зазор рамки сверху/снизу
+           выходит меньше, чем слева/справа. */
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-md);
+        border: var(--rt-border-width-thin) dashed var(--rt-color-action-on-primary);
+        border-radius: var(--rt-radius-lg);
+        gap: var(--rt-space-sm);
+        text-align: center;
+    }
+
+    &__zone {
+        display: flex;
+        min-height: 0;
+        box-sizing: border-box;
+        flex: 1 1 0;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-md);
+        border: var(--rt-border-width-thin) dashed var(--rt-color-action-on-primary);
+        border-radius: var(--rt-radius-lg);
+        gap: var(--rt-space-2xs);
+        text-align: center;
+        transition:
+            border-color var(--rt-duration-fast) ease,
+            background-color var(--rt-duration-fast) ease;
+
+        /* Зона под курсором: акцентная сплошная рамка + лёгкая подсветка. */
+        &--active {
+            border-style: solid;
+            border-color: var(--rt-color-action-primary);
+            background: rgb(255 255 255 / 10%);
+        }
+    }
+
+    &__label {
+        color: var(--rt-color-action-on-primary);
+        font-size: var(--rt-text-lg);
+        font-weight: var(--rt-font-weight-semibold);
+    }
+
+    &__sublabel {
+        color: var(--rt-color-action-on-primary);
+        font-size: var(--rt-text-sm);
+        opacity: 0.8;
+    }
+}

package/src/lib/components/file-input/rt-file-input.component.scss

@@ -0,0 +1,25 @@
+.rt-file-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--rt-space-sm);
+
+    &--disabled {
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    /* Список выбранных файлов — карточки rt-file-card внутри rt-file-list. */
+    &__list {
+        width: 100%;
+    }
+
+    /* Read-only: имена файлов как плоский текст. */
+    &__readonly {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+}

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

@@ -0,0 +1,8 @@
+/* rt-file-list — ViewEncapsulation.None, плоский `.rt-file-list`.
+   Host-класс ставится через @Component host:{class}. */
+.rt-file-list {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--rt-space-sm);
+}

package/src/lib/components/filter-control/rt-filter-control.component.scss

@@ -0,0 +1,20 @@
+.rt-filter-control {
+    display: inline-flex;
+
+    // узкий экран: контрол — компактный select с капом --rt-input-max-width
+    // (как строка поиска). В ряду тулбара (768–1080px) ширина по контенту.
+    @media (width <= 1080px) {
+        display: block;
+
+        .rt-select {
+            inline-size: 100%;
+            max-inline-size: var(--rt-input-max-width);
+        }
+    }
+
+    // стекнутый тулбар (≤768px): host занимает всю ширину столбца, select
+    // вытягивается ровно как строка поиска (width:100% до --rt-input-max-width).
+    @media (width <= 768px) {
+        inline-size: 100%;
+    }
+}