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

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

@@ -1,8 +1,10 @@
-/* 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);
+@layer rt-kit.components {
+    /* 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

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

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

@@ -1,67 +1,73 @@
-.rt-header {
-    display: block;
-    height: 45px;
-    padding: 0 var(--rt-space-5);
-    background: var(--rt-color-bg-surface);
-    border-bottom-left-radius: var(--rt-radius-lg);
-    border-bottom-right-radius: var(--rt-radius-lg);
+@layer rt-kit.components {
+    .rt-header {
+        --rt-header-radius: var(--rt-radius-lg);
+        --rt-header-shadow: var(--rt-shadow-card-soft);
+        --rt-header-back-transition-duration: var(--rt-duration-base);
 
-    // Мягкая тень (тот же токен, что у карточек) отделяет хедер от контента —
-    // в тёмной теме фон хедера и страницы почти совпадают и сливались.
-    box-shadow: var(--rt-shadow-card-soft);
-    color: var(--rt-color-text-primary);
+        display: block;
+        height: 45px;
+        padding: 0 var(--rt-space-5);
+        background: var(--rt-color-bg-surface);
+        border-bottom-left-radius: var(--rt-header-radius);
+        border-bottom-right-radius: var(--rt-header-radius);
 
-    &__content {
-        display: flex;
-        width: 100%;
-        max-width: var(--rt-header-content-max-width, 100%);
-        height: 100%;
-        align-items: center;
-        margin: 0 auto;
-        gap: 0;
-    }
+        // Мягкая тень (тот же токен, что у карточек) отделяет хедер от контента —
+        // в тёмной теме фон хедера и страницы почти совпадают и сливались.
+        box-shadow: var(--rt-header-shadow);
+        color: var(--rt-color-text-primary);
+
+        &__content {
+            display: flex;
+            width: 100%;
+            max-width: var(--rt-header-content-max-width, 100%);
+            height: 100%;
+            align-items: center;
+            margin: 0 auto;
+            gap: 0;
+        }
 
-    &__back {
-        display: inline-flex;
-        overflow: hidden;
+        &__back {
+            display: inline-flex;
+            overflow: hidden;
 
-        /* Hidden state по умолчанию — slot полностью схлопнут (нулевая ширина),
-           Контент скрыт через opacity + сдвиг влево; pointer-events:none снимает hit-target. */
-        width: 0;
-        height: 45px;
-        align-items: center;
-        justify-content: flex-start;
-        opacity: 0;
-        pointer-events: none;
-        transform: translateX(-8px);
-        transition:
-            width var(--rt-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
-            opacity var(--rt-duration-base) ease-out,
-            transform var(--rt-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
+            /* Hidden state по умолчанию — slot полностью схлопнут (нулевая ширина),
+               Контент скрыт через opacity + сдвиг влево; pointer-events:none снимает hit-target. */
+            width: 0;
+            height: 45px;
+            align-items: center;
+            justify-content: flex-start;
+            opacity: 0;
+            pointer-events: none;
+            transform: translateX(-8px);
+            transition:
+                width var(--rt-header-back-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
+                opacity var(--rt-header-back-transition-duration) ease-out,
+                transform var(--rt-header-back-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
 
-        &--visible {
-            width: 35px;
-            opacity: 1;
-            pointer-events: auto;
-            transform: translateX(0);
+            &--visible {
+                width: 35px;
+                opacity: 1;
+                pointer-events: auto;
+                transform: translateX(0);
+            }
         }
-    }
 
-    &__logo {
-        display: flex;
-        min-width: 0;
-        flex: 1 0 0;
-        align-items: center;
+        &__logo {
+            display: flex;
+            min-width: 0;
+            flex: 1 0 0;
+            align-items: center;
+        }
     }
-}
 
-/* dark override: header bg = navy, близко к --rt-blue-900 */
-[data-theme='dark'] .rt-header {
-    background: var(--rt-blue-900);
-}
+    /* dark override: подложка обвязки — своё назначение, а не ступень шкалы. */
+    [data-theme='dark'] .rt-header {
+        background: var(--rt-color-bg-nav);
+    }
 
-@media (prefers-reduced-motion: reduce) {
-    .rt-header__back {
-        transition: none;
+    @media (prefers-reduced-motion: reduce) {
+        .rt-header__back {
+            transition: none;
+        }
     }
 }

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

@@ -1,15 +1,17 @@
-/* rt-icon — правила компонента (ViewEncapsulation.None).
-   Селектор bare `.rt-icon` (класс на host) — им же адресуются и программные
-   потребители sprite'а, рисующие иконку без компонента. */
-.rt-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    line-height: 0;
+@layer rt-kit.components {
+    /* rt-icon — правила компонента (ViewEncapsulation.None).
+       Селектор bare `.rt-icon` (класс на host) — им же адресуются и программные
+       потребители sprite'а, рисующие иконку без компонента. */
+    .rt-icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        line-height: 0;
 
-    svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-        fill: currentcolor;
+        svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            fill: currentcolor;
+        }
     }
 }

package/src/lib/components/icon-button/CONTEXT.md

@@ -30,8 +30,10 @@
 **Кнопку компонент рисует внутри себя**, host остаётся обычным элементом. Диаметр держит
 свойство `--rt-icon-button-size`, и объявляет его модификатор размера на самой кнопке —
 поэтому ни класс на host-е, ни инлайн-стиль на нём диаметра не меняют: собственное
-объявление элемента бьёт унаследованное. Размер вне шкалы получается не обходом, а новой
-ступенью здесь же: `sm` 28px, `md` 36px, `lg` 44px, `xl` 52px, `2xl` 60px.
+объявление элемента бьёт унаследованное. Диаметр берётся из общей шкалы высот контролов, а не
+своим рядом: иконочная кнопка стоит в строке рядом с кнопкой и полем и обязана совпадать с ними
+по высоте. Ступени — `sm`, `md`, `lg`, `xl`, `2xl`; значения держит шкала, и здесь они не
+повторяются.
 
 ## Как этим пользоваться
 

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

@@ -1,152 +1,168 @@
-/* rt-icon-button — иконочная кнопка в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-icon-button` висит
-   и на `<rt-icon-button>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-icon-button — иконочная кнопка в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-icon-button` висит
+       и на `<rt-icon-button>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-icon-button {
-    display: inline-flex;
-
-    /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя */
-    --rt-icon-button-size: 36px;
-
-    .rt-icon-button {
-        position: relative;
+    rt-icon-button {
         display: inline-flex;
-        width: var(--rt-icon-button-size);
-        height: var(--rt-icon-button-size);
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        color: var(--rt-icon-button-color, var(--rt-color-text-primary));
-        cursor: pointer;
-        transition: background-color var(--rt-duration-fast) ease;
-
-        &--sm {
-            --rt-icon-button-size: 28px;
-        }
-
-        &--md {
-            --rt-icon-button-size: 36px;
-        }
 
-        &--lg {
-            --rt-icon-button-size: 44px;
-        }
+        /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя.
+           Ряд берётся из общей шкалы высот контролов: иконочная кнопка стоит в строке
+           рядом с кнопкой и полем и обязана совпадать с ними по высоте. */
+        --rt-icon-button-size: var(--rt-control-height-md);
+
+        /* Цвет иконки объявлен здесь, а не приходил бы запасным значением на месте
+           обращения: запасное переживает смену темы — переопределять нечего. Своё
+           свойство блока перебивает тот, кому нужен другой цвет: так делает просмотр
+           фотографии, где кнопка стоит на снимке. */
+        --rt-icon-button-color: var(--rt-color-text-primary);
+
+        .rt-icon-button {
+            --rt-icon-button-circle-radius: var(--rt-radius-full);
+            --rt-icon-button-square-radius: var(--rt-radius-md);
+            --rt-icon-button-indicator-radius: var(--rt-radius-full);
+            --rt-icon-button-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-icon-button-transition-duration: var(--rt-duration-fast);
+
+            position: relative;
+            display: inline-flex;
+            width: var(--rt-icon-button-size);
+            height: var(--rt-icon-button-size);
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-icon-button-color);
+            cursor: pointer;
+            transition: background-color var(--rt-icon-button-transition-duration) ease;
+
+            &--sm {
+                --rt-icon-button-size: var(--rt-control-height-sm);
+            }
 
-        &--xl {
-            --rt-icon-button-size: 52px;
-        }
+            &--md {
+                --rt-icon-button-size: var(--rt-control-height-md);
+            }
 
-        &--2xl {
-            --rt-icon-button-size: 60px;
-        }
+            &--lg {
+                --rt-icon-button-size: var(--rt-control-height-lg);
+            }
 
-        &--circle {
-            border-radius: var(--rt-radius-full);
-        }
+            &--xl {
+                --rt-icon-button-size: var(--rt-control-height-xl);
+            }
 
-        &--square {
-            border-radius: var(--rt-radius-md);
-        }
+            &--2xl {
+                --rt-icon-button-size: var(--rt-control-height-2xl);
+            }
 
-        &--ghost {
-            &:hover:not(:disabled) {
-                background-color: var(--rt-icon-button-color-bg-hover);
+            &--circle {
+                border-radius: var(--rt-icon-button-circle-radius);
             }
 
-            &.rt-icon-button--active {
-                background-color: var(--rt-icon-button-color-bg-hover);
+            &--square {
+                border-radius: var(--rt-icon-button-square-radius);
             }
-        }
 
-        &--primary {
-            background-color: var(--rt-color-action-primary);
-            color: var(--rt-color-action-on-primary);
+            &--ghost {
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
 
-            &:hover:not(:disabled) {
-                background-color: var(--rt-color-action-primary-hover);
+                &.rt-icon-button--active {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
             }
-        }
 
-        &--secondary {
-            background-color: var(--rt-color-bg-surface-subtle);
-            color: var(--rt-color-text-primary);
+            &--primary {
+                background-color: var(--rt-color-action-primary);
+                color: var(--rt-color-action-on-primary);
 
-            &:hover:not(:disabled) {
-                background-color: var(--rt-icon-button-color-bg-hover);
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-color-action-primary-hover);
+                }
             }
-        }
 
-        &--danger {
-            color: var(--rt-color-state-danger);
+            &--secondary {
+                background-color: var(--rt-color-bg-surface-subtle);
+                color: var(--rt-color-text-primary);
 
-            &:hover:not(:disabled) {
-                background-color: var(--rt-icon-button-color-bg-hover);
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
             }
 
-            &.rt-icon-button--active {
-                background-color: var(--rt-icon-button-color-bg-hover);
-            }
-        }
+            &--danger {
+                color: var(--rt-color-state-danger);
 
-        &--success {
-            color: var(--rt-color-state-success);
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
 
-            &:hover:not(:disabled) {
-                background-color: var(--rt-icon-button-color-bg-hover);
+                &.rt-icon-button--active {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
             }
 
-            &.rt-icon-button--active {
-                background-color: var(--rt-icon-button-color-bg-hover);
-            }
-        }
+            &--success {
+                color: var(--rt-color-state-success);
 
-        &--warning {
-            color: var(--rt-color-state-warning);
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
 
-            &:hover:not(:disabled) {
-                background-color: var(--rt-icon-button-color-bg-hover);
+                &.rt-icon-button--active {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
             }
 
-            &.rt-icon-button--active {
-                background-color: var(--rt-icon-button-color-bg-hover);
+            &--warning {
+                color: var(--rt-color-state-warning);
+
+                &:hover:not(:disabled) {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
+
+                &.rt-icon-button--active {
+                    background-color: var(--rt-icon-button-color-bg-hover);
+                }
             }
-        }
 
-        &:disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
 
-        &:focus-visible {
-            box-shadow: var(--rt-shadow-focus-ring);
-            outline: 2px solid transparent;
-            outline-offset: 2px;
-        }
+            &:focus-visible {
+                box-shadow: var(--rt-icon-button-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+            }
 
-        &__spinner {
-            --rt-icon-button-spin-duration: 1s;
+            &__spinner {
+                --rt-icon-button-spin-duration: 1s;
 
-            animation: rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite;
-        }
+                animation: rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite;
+            }
 
-        &__indicator {
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            border-radius: var(--rt-radius-full);
-            background: var(--rt-color-state-danger);
-            inset-block-start: -2px;
-            inset-inline-end: -2px;
-            pointer-events: none;
+            &__indicator {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                border-radius: var(--rt-icon-button-indicator-radius);
+                background: var(--rt-color-state-danger);
+                inset-block-start: -2px;
+                inset-inline-end: -2px;
+                pointer-events: none;
+            }
         }
     }
-}
 
-@keyframes rt-icon-button-spin {
-    to {
-        transform: rotate(360deg);
+    @keyframes rt-icon-button-spin {
+        to {
+            transform: rotate(360deg);
+        }
     }
 }

package/src/lib/components/info-item/rt-info-item.component.scss

@@ -1,46 +1,48 @@
 @use '../../../styles/mixins' as kv;
 
-.rt-info-item {
-    @include kv.surface-card;
+@layer rt-kit.components {
+    .rt-info-item {
+        @include kv.surface-card;
 
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    margin: 0;
-    gap: var(--rt-space-0-5);
-
-    &--grow {
-        flex: 1 0 0;
-    }
-
-    &__label {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        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);
-    }
-
-    &__value {
         display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
+        min-width: 0;
+        flex-direction: column;
         margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-bold);
         gap: var(--rt-space-0-5);
-        letter-spacing: var(--rt-letter-spacing-wide);
-        line-height: var(--rt-leading-snug);
-        overflow-wrap: anywhere;
-    }
 
-    &__value-skeleton {
-        display: block;
+        &--grow {
+            flex: 1 0 0;
+        }
+
+        &__label {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            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);
+        }
+
+        &__value {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: baseline;
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-bold);
+            gap: var(--rt-space-0-5);
+            letter-spacing: var(--rt-letter-spacing-wide);
+            line-height: var(--rt-leading-snug);
+            overflow-wrap: anywhere;
+        }
+
+        &__value-skeleton {
+            display: block;
+        }
     }
-}
 
-[data-theme='dark'] .rt-info-item {
-    @include kv.surface-card-dark;
+    [data-theme='dark'] .rt-info-item {
+        @include kv.surface-card-dark;
+    }
 }