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

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

@@ -1,58 +1,64 @@
-/* rt-section-nav — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
-   `.rt-section-nav` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+@layer rt-kit.components {
+    /* rt-section-nav — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-section-nav` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
-.rt-section-nav {
-    display: flex;
-    gap: var(--rt-space-md);
+    .rt-section-nav {
+        --rt-section-nav-tile-radius: var(--rt-radius-xl);
+        --rt-section-nav-tile-shadow: var(--rt-shadow-card-soft);
+        --rt-section-nav-transition-duration: var(--rt-duration-fast);
 
-    &__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);
+        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-section-nav-tile-radius);
+            background: transparent;
+            box-shadow: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            gap: var(--rt-space-2);
+            transition:
+                background var(--rt-section-nav-transition-duration) ease,
+                box-shadow var(--rt-section-nav-transition-duration) ease;
+
+            &:not(.rt-section-nav__tile--active):hover {
+                background: var(--rt-color-bg-surface-subtle);
+                box-shadow: var(--rt-section-nav-tile-shadow);
+            }
+
+            &--active {
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-section-nav-tile-shadow);
+                cursor: default;
+            }
         }
 
-        &--active {
-            background: var(--rt-color-bg-surface);
-            box-shadow: var(--rt-shadow-card-soft);
-            cursor: default;
+        &__icon {
+            color: inherit;
         }
-    }
 
-    &__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);
+        }
     }
 
-    &__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`, который под None не
+       совпадает ни с чем, — тема задаётся атрибутом на предке, и им же адресуется. */
+    [data-theme='dark'] .rt-section-nav__tile--active {
+        background: var(--rt-color-bg-nav);
     }
 }
-
-/* Тёмная тема: активная плитка на тёмной поверхности берёт свой фон.
-   Раньше правило было записано через `:host-context`, который под None не
-   совпадает ни с чем, — тема задаётся атрибутом на предке, и им же адресуется. */
-[data-theme='dark'] .rt-section-nav__tile--active {
-    background: var(--rt-blue-900);
-}

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

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

@@ -1,56 +1,65 @@
-.rt-skeleton {
-    --rt-skeleton-wave-duration: 2.5s;
+@layer rt-kit.components {
+    .rt-skeleton {
+        --rt-skeleton-wave-duration: 2.5s;
+        --rt-skeleton-radius: var(--rt-radius-sm);
+        --rt-skeleton-circle-radius: var(--rt-radius-full);
 
-    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%;
+        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);
-    }
+        &--rectangle {
+            border-radius: var(--rt-skeleton-radius);
+        }
 
-    &--circle {
-        border-radius: var(--rt-radius-full);
-    }
+        &--circle {
+            border-radius: var(--rt-skeleton-circle-radius);
+        }
 
-    &--square {
-        border-radius: 0;
-    }
+        &--square {
+            border-radius: 0;
+        }
 
-    &--sm {
-        min-width: 10px;
-        min-height: 10px;
-    }
+        &--sm {
+            min-width: 10px;
+            min-height: 10px;
+        }
 
-    &--md {
-        min-width: 15px;
-        min-height: 15px;
-    }
+        &--md {
+            min-width: 15px;
+            min-height: 15px;
+        }
 
-    &--lg {
-        min-width: 20px;
-        min-height: 20px;
-    }
+        &--lg {
+            min-width: 20px;
+            min-height: 20px;
+        }
 
-    &--animated {
-        animation: rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite;
+        &--animated {
+            animation: rt-skeleton-wave var(--rt-skeleton-wave-duration) ease-in-out infinite;
+        }
     }
-}
 
-@keyframes rt-skeleton-wave {
-    0% {
-        background-position: 200% 0;
-    }
+    @keyframes rt-skeleton-wave {
+        0% {
+            background-position: 200% 0;
+        }
 
-    100% {
-        background-position: -200% 0;
+        100% {
+            background-position: -200% 0;
+        }
     }
-}
 
-@media (prefers-reduced-motion: reduce) {
-    .rt-skeleton--animated {
-        animation: none;
+    @media (prefers-reduced-motion: reduce) {
+        .rt-skeleton--animated {
+            animation: none;
+        }
     }
 }

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

@@ -1,8 +1,10 @@
-/* rt-skeleton-wrapper — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
-   `.rt-skeleton-wrapper` — сам хост: своей разметки блока нет, внутри либо
-   rt-skeleton, либо спроецированное содержимое. */
+@layer rt-kit.components {
+    /* rt-skeleton-wrapper — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
+       `.rt-skeleton-wrapper` — сам хост: своей разметки блока нет, внутри либо
+       rt-skeleton, либо спроецированное содержимое. */
 
-.rt-skeleton-wrapper {
-    display: inline-flex;
-    width: 100%;
+    .rt-skeleton-wrapper {
+        display: inline-flex;
+        width: 100%;
+    }
 }

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

@@ -1,42 +1,45 @@
-.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;
+@layer rt-kit.components {
+    .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;
+        --rt-spinner-radius: var(--rt-radius-full);
 
-    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;
+        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-spinner-radius);
+        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);
-    }
+        &--primary {
+            --rt-spinner-progress-color: var(--rt-color-action-primary);
+        }
 
-    &--neutral {
-        --rt-spinner-progress-color: var(--rt-color-text-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);
+        &--on-primary {
+            --rt-spinner-track-color: var(--rt-overlay-white-25);
+            --rt-spinner-progress-color: var(--rt-color-action-on-primary);
+        }
     }
-}
 
-@keyframes rt-spinner-rotate {
-    to {
-        transform: rotate(1turn);
+    @keyframes rt-spinner-rotate {
+        to {
+            transform: rotate(1turn);
+        }
     }
-}
 
-@media (prefers-reduced-motion: reduce) {
-    .rt-spinner {
-        animation-duration: var(--rt-spinner-rotation-duration-reduced);
+    @media (prefers-reduced-motion: reduce) {
+        .rt-spinner {
+            animation-duration: var(--rt-spinner-rotation-duration-reduced);
+        }
     }
 }