@rt-tools/ui-kit-v2 0.4.0 → 0.6.0

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

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

@@ -1,78 +1,80 @@
-.rt-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--rt-field-gap);
+@layer rt-kit.components {
+    .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-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);
-    }
+        &__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);
-    }
+        &__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);
-    }
+        /* Зона значения: проецируемый контрол или 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 {
+            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);
-    }
+        &__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;
+        /* Зона сообщений под контролом. С резервом (reserveHintSpace) hint и ошибка
+           кладутся в одну ячейку грида: скрытый hint продолжает задавать высоту, и
+           подмена сообщения не двигает форму ни вниз, ни вверх. Без hint высоту
+           держит min-height в одну строку — считаем по error-шрифту, он крупнее. */
+        &__messages {
+            display: grid;
 
-        &--reserved {
-            font-size: var(--rt-field-error-font-size);
-            min-block-size: 1lh;
+            &--reserved {
+                font-size: var(--rt-field-error-font-size);
+                min-block-size: 1lh;
 
-            > * {
-                grid-area: 1 / 1;
+                > * {
+                    grid-area: 1 / 1;
+                }
             }
         }
-    }
 
-    &__hint {
-        color: var(--rt-field-hint-color);
-        font-size: var(--rt-field-hint-font-size);
+        &__hint {
+            color: var(--rt-field-hint-color);
+            font-size: var(--rt-field-hint-font-size);
 
-        /* Место под собой держит, глазу не мешает — только так высота зоны
-           остаётся равной большему из двух сообщений. */
-        &--hidden {
-            visibility: hidden;
+            /* Место под собой держит, глазу не мешает — только так высота зоны
+               остаётся равной большему из двух сообщений. */
+            &--hidden {
+                visibility: hidden;
+            }
         }
-    }
 
-    &__error {
-        color: var(--rt-field-error-color);
-        font-size: var(--rt-field-error-font-size);
+        &__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

@@ -1,96 +1,102 @@
-/* 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);
+@layer rt-kit.components {
+    /* rt-file-card — ViewEncapsulation.None, плоский `.rt-file-card` (как rt-file-input/rt-icon).
+       Host-класс ставится через @Component host:{class}. */
+    .rt-file-card {
+        --rt-file-card-radius: var(--rt-radius-lg);
+        --rt-file-card-border-width: var(--rt-border-width-thin);
+        --rt-file-card-badge-radius: var(--rt-radius-full);
 
-    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 {
+        /* Дефолт = 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);
-    }
 
-    &--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);
-    }
+        display: flex;
+        align-items: center;
+        padding: var(--rt-file-card-padding-block) var(--rt-file-card-padding-inline);
+        border: var(--rt-file-card-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-file-card-radius);
+        background-color: var(--rt-color-bg-surface);
+        gap: var(--rt-file-card-gap);
 
-    &__icon {
-        flex-shrink: 0;
-    }
+        &--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);
+        }
 
-    &__text {
-        display: flex;
+        &--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);
+        }
 
-        /* min-width:0 нужен, чтобы дочерние с ellipsis могли сжиматься в flex-строке */
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        gap: var(--rt-space-2xs);
-    }
+        &--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);
+        }
 
-    &__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;
-    }
+        &__icon {
+            flex-shrink: 0;
+        }
 
-    &__name {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-file-card-name-size);
-    }
+        &__text {
+            display: flex;
 
-    &__meta {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        gap: var(--rt-space-xs);
-    }
+            /* min-width:0 нужен, чтобы дочерние с ellipsis могли сжиматься в flex-строке */
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+        }
 
-    &__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;
-    }
+        &__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-file-card-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-file-card-badge-radius);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-file-card-badge-size);
+            white-space: nowrap;
+        }
 
-    &__action {
-        flex-shrink: 0;
+        &__action {
+            flex-shrink: 0;
+        }
     }
 }

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

@@ -1,91 +1,97 @@
-/* rt-file-drop — зона перетаскивания файлов в common/ui (ViewEncapsulation.None).
-   Селектор bare `.rt-file-drop` (класс на host) — `:host` в None light-DOM не матчит.
-   Host — позиционный якорь для абсолютного оверлея, обрамляющего спроецированный
-   контент. Оверлей pointer-events:none — не перехватывает drag/drop. */
+@layer rt-kit.components {
+    /* 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%;
+    .rt-file-drop {
+        --rt-file-drop-radius: var(--rt-radius-lg);
+        --rt-file-drop-border-width: var(--rt-border-width-thin);
+        --rt-file-drop-transition-duration: var(--rt-duration-fast);
 
-    &__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%);
+        position: relative;
+        display: block;
+        height: 100%;
 
-        /* Отступ от краёв host'а — рамка-приглашение не прижата к границе зоны. */
-        inset: var(--rt-space-sm);
-        pointer-events: none;
+        &__overlay {
+            position: absolute;
+            z-index: 50;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-lg);
+            border-radius: var(--rt-file-drop-radius);
+            /* 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%);
 
-        /* Мультизонный режим: вертикальная стопка равных зон-целей. */
-        &--zoned {
-            flex-direction: column;
-            align-items: stretch;
-            padding: var(--rt-space-md);
-            gap: var(--rt-space-sm);
+            /* Отступ от краёв 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%;
+        &__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;
-    }
+            /* 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-file-drop-border-width) dashed var(--rt-color-action-on-primary);
+            border-radius: var(--rt-file-drop-radius);
+            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;
+        &__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-file-drop-border-width) dashed var(--rt-color-action-on-primary);
+            border-radius: var(--rt-file-drop-radius);
+            gap: var(--rt-space-2xs);
+            text-align: center;
+            transition:
+                border-color var(--rt-file-drop-transition-duration) ease,
+                background-color var(--rt-file-drop-transition-duration) ease;
 
-        /* Зона под курсором: акцентная сплошная рамка + лёгкая подсветка. */
-        &--active {
-            border-style: solid;
-            border-color: var(--rt-color-action-primary);
-            background: rgb(255 255 255 / 10%);
+            /* Зона под курсором: акцентная сплошная рамка + лёгкая подсветка. */
+            &--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);
-    }
+        &__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;
+        &__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

@@ -1,25 +1,27 @@
-.rt-file-input {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--rt-space-sm);
+@layer rt-kit.components {
+    .rt-file-input {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--rt-space-sm);
 
-    &--disabled {
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--disabled {
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    /* Список выбранных файлов — карточки rt-file-card внутри rt-file-list. */
-    &__list {
-        width: 100%;
-    }
+        /* Список выбранных файлов — карточки 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);
+        /* 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);
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
     }
 }