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

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -1,143 +1,150 @@
-/* rt-toggle-button-group — segmented control. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс
-   `.rt-toggle-button-group` висит и на `<rt-toggle-button-group>`, и на корне
-   шаблона, поэтому правила блока вложены в хост — так они достаются только
-   корню шаблона.
-   Размеры — три тира sm/md/lg, общая высота совпадает с rt-button
-   (sm 30 / md 40 / lg 50px).
-   Цвета — только семантические --rt-* токены. */
-
-rt-toggle-button-group {
-    display: inline-flex;
-
-    /* Локальные overridable custom properties — позволяют потребителю
-       подстроить trackовый bg без перекраски всей темы (см. dark override ниже). */
-    // --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle-2);
-    --rt-toggle-button-group-track-bg: #eef0f4;
-    --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
-
-    .rt-toggle-button-group {
-        /* Default size = sm. md/lg переопределяют ниже. */
-        --rt-toggle-button-group-height: 30px;
-        --rt-toggle-button-group-track-padding: 4px;
-        --rt-toggle-button-group-track-radius: 8px;
-        --rt-toggle-button-group-btn-padding: 0 8px;
-        --rt-toggle-button-group-btn-radius: 8px;
-        --rt-toggle-button-group-btn-gap: 4px;
-        --rt-toggle-button-group-btn-font-size: 12px;
-        --rt-toggle-button-group-btn-line-height: 14px;
-
+@layer rt-kit.components {
+    /* rt-toggle-button-group — segmented control. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс
+       `.rt-toggle-button-group` висит и на `<rt-toggle-button-group>`, и на корне
+       шаблона, поэтому правила блока вложены в хост — так они достаются только
+       корню шаблона.
+       Размеры — три тира sm/md/lg, общая высота совпадает с rt-button
+       (sm 30 / md 40 / lg 50px).
+       Цвета — только семантические --rt-* токены. */
+
+    rt-toggle-button-group {
         display: inline-flex;
-        height: var(--rt-toggle-button-group-height);
-        box-sizing: border-box;
-        align-items: stretch;
-        padding: var(--rt-toggle-button-group-track-padding);
-        border-radius: var(--rt-toggle-button-group-track-radius);
-        background-color: var(--rt-toggle-button-group-track-bg);
-        gap: 0;
-
-        &__button {
+
+        /* Локальные overridable custom properties — позволяют потребителю
+           подстроить trackовый bg без перекраски всей темы (см. dark override ниже).
+
+           Дорожка берёт приглушённую поверхность, а не ближайшую по светлоте ступень:
+           прежний код цвета стоял почти на уровне белого, а отличаться дорожка обязана
+           именно от активного сегмента, который белым и покрашен. */
+        --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
+        --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+
+        .rt-toggle-button-group {
+            /* Default size = sm. md/lg переопределяют ниже. */
+            --rt-toggle-button-group-height: 30px;
+            --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
+            --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-toggle-button-group-track-padding: 4px;
+            --rt-toggle-button-group-track-radius: 8px;
+            --rt-toggle-button-group-btn-padding: 0 8px;
+            --rt-toggle-button-group-btn-radius: 8px;
+            --rt-toggle-button-group-btn-gap: 4px;
+            --rt-toggle-button-group-btn-font-size: 12px;
+            --rt-toggle-button-group-btn-line-height: 14px;
+
             display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: var(--rt-toggle-button-group-btn-padding);
-            border: 0;
-            border-radius: var(--rt-toggle-button-group-btn-radius);
-            background-color: transparent;
-            color: var(--rt-color-text-muted);
-            cursor: pointer;
-
-            /* Нативный <button>: без явного наследования берёт UA-шрифт (Arial),
-               а не Montserrat от body. */
-            font-family: inherit;
-            font-size: var(--rt-toggle-button-group-btn-font-size);
-            font-weight: var(--rt-font-weight-semibold);
-            gap: var(--rt-toggle-button-group-btn-gap);
-            line-height: var(--rt-toggle-button-group-btn-line-height);
-            transition:
-                background-color var(--rt-duration-fast) ease,
-                color var(--rt-duration-fast) ease;
-
-            &:hover:not(:disabled, &--active) {
-                color: var(--rt-color-text-primary);
+            height: var(--rt-toggle-button-group-height);
+            box-sizing: border-box;
+            align-items: stretch;
+            padding: var(--rt-toggle-button-group-track-padding);
+            border-radius: var(--rt-toggle-button-group-track-radius);
+            background-color: var(--rt-toggle-button-group-track-bg);
+            gap: 0;
+
+            &__button {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: var(--rt-toggle-button-group-btn-padding);
+                border: 0;
+                border-radius: var(--rt-toggle-button-group-btn-radius);
+                background-color: transparent;
+                color: var(--rt-color-text-muted);
+                cursor: pointer;
+
+                /* Нативный <button>: без явного наследования берёт UA-шрифт (Arial),
+                   а не Montserrat от body. */
+                font-family: inherit;
+                font-size: var(--rt-toggle-button-group-btn-font-size);
+                font-weight: var(--rt-font-weight-semibold);
+                gap: var(--rt-toggle-button-group-btn-gap);
+                line-height: var(--rt-toggle-button-group-btn-line-height);
+                transition:
+                    background-color var(--rt-toggle-button-group-transition-duration) ease,
+                    color var(--rt-toggle-button-group-transition-duration) ease;
+
+                &:hover:not(:disabled, &--active) {
+                    color: var(--rt-color-text-primary);
+                }
+
+                &--active {
+                    background-color: var(--rt-toggle-button-group-active-bg);
+                    color: var(--rt-color-text-primary);
+                }
+
+                &:focus-visible {
+                    position: relative;
+                    z-index: 1;
+                    box-shadow: var(--rt-toggle-button-group-focus-shadow);
+                    outline: 2px solid transparent;
+                    outline-offset: 1px;
+                }
+
+                &:disabled {
+                    cursor: not-allowed;
+                }
             }
 
-            &--active {
-                background-color: var(--rt-toggle-button-group-active-bg);
-                color: var(--rt-color-text-primary);
+            &__label {
+                display: inline-block;
+                white-space: nowrap;
             }
 
-            &:focus-visible {
-                position: relative;
-                z-index: 1;
-                box-shadow: var(--rt-shadow-focus-ring);
-                outline: 2px solid transparent;
-                outline-offset: 1px;
+            &__icon {
+                flex-shrink: 0;
             }
 
-            &:disabled {
-                cursor: not-allowed;
+            /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
+            &--md {
+                --rt-toggle-button-group-height: 40px;
+                --rt-toggle-button-group-track-radius: 10px;
+                --rt-toggle-button-group-btn-padding: 0 14px;
+                --rt-toggle-button-group-btn-radius: 10px;
+                --rt-toggle-button-group-btn-gap: 6px;
+                --rt-toggle-button-group-btn-font-size: 14px;
+                --rt-toggle-button-group-btn-line-height: 16px;
             }
-        }
-
-        &__label {
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        &__icon {
-            flex-shrink: 0;
-        }
-
-        /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
-        &--md {
-            --rt-toggle-button-group-height: 40px;
-            --rt-toggle-button-group-track-radius: 10px;
-            --rt-toggle-button-group-btn-padding: 0 14px;
-            --rt-toggle-button-group-btn-radius: 10px;
-            --rt-toggle-button-group-btn-gap: 6px;
-            --rt-toggle-button-group-btn-font-size: 14px;
-            --rt-toggle-button-group-btn-line-height: 16px;
-        }
 
-        &--lg {
-            --rt-toggle-button-group-height: 50px;
-            --rt-toggle-button-group-track-radius: 12px;
-            --rt-toggle-button-group-btn-padding: 0 20px;
-            --rt-toggle-button-group-btn-radius: 12px;
-            --rt-toggle-button-group-btn-gap: 8px;
-            --rt-toggle-button-group-btn-font-size: 16px;
-            --rt-toggle-button-group-btn-line-height: 18px;
-        }
+            &--lg {
+                --rt-toggle-button-group-height: 50px;
+                --rt-toggle-button-group-track-radius: 12px;
+                --rt-toggle-button-group-btn-padding: 0 20px;
+                --rt-toggle-button-group-btn-radius: 12px;
+                --rt-toggle-button-group-btn-gap: 8px;
+                --rt-toggle-button-group-btn-font-size: 16px;
+                --rt-toggle-button-group-btn-line-height: 18px;
+            }
 
-        &--disabled {
-            opacity: 0.5;
+            &--disabled {
+                opacity: 0.5;
+            }
         }
     }
-}
-
-/* full-width: группа растягивается на контейнер, опции делят ширину поровну. */
-rt-toggle-button-group.rt-toggle-button-group--full-width {
-    display: flex;
-    width: 100%;
 
-    .rt-toggle-button-group {
+    /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */
+    rt-toggle-button-group.rt-toggle-button-group--full-width {
         display: flex;
         width: 100%;
-        flex: 1 1 auto;
 
-        .rt-toggle-button-group__button {
-            flex: 1 1 0;
+        .rt-toggle-button-group {
+            display: flex;
+            width: 100%;
+            flex: 1 1 auto;
+
+            .rt-toggle-button-group__button {
+                flex: 1 1 0;
+            }
         }
     }
-}
 
-/* Dark theme: `--rt-color-bg-surface-subtle` совпадает с `--rt-color-bg-surface`
-   в палитре (см. styles/_theme-dark.scss), поэтому track теряет контраст с
-   активным сегментом. Локально перекрашиваем track в более тёмный neutral.
-   Раньше правило было записано через `:host-context`, который под None не
-   совпадает ни с чем: тему задаёт предок, им же и адресуемся. */
-:root[data-theme='dark'] rt-toggle-button-group,
-html.rt-theme-dark rt-toggle-button-group {
-    --rt-toggle-button-group-track-bg: var(--rt-neutral-900);
+    /* Dark theme: `--rt-color-bg-surface-subtle` совпадает с `--rt-color-bg-surface`
+       в палитре (см. styles/_theme-dark.scss), поэтому track теряет контраст с
+       активным сегментом. Локально перекрашиваем track в более тёмный neutral.
+       Раньше правило было записано через `:host-context`, который под None не
+       совпадает ни с чем: тему задаёт предок, им же и адресуемся. */
+    :root[data-theme='dark'] rt-toggle-button-group,
+    html.rt-theme-dark rt-toggle-button-group {
+        --rt-toggle-button-group-track-bg: var(--rt-neutral-900);
+    }
 }

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -1,107 +1,113 @@
-/* rt-toggle-switch — переключатель в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-toggle-switch` висит
-   и на `<rt-toggle-switch>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-toggle-switch — переключатель в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-toggle-switch` висит
+       и на `<rt-toggle-switch>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-toggle-switch {
-    display: inline-flex;
-}
+    rt-toggle-switch {
+        display: inline-flex;
+    }
 
-rt-toggle-switch .rt-toggle-switch {
-    /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
-       правила ниже к размерам не привязаны. `thumb-travel` держим явным
-       числом, а не calc из ширины: каждое значение сверяется с макетом. */
-    --rt-toggle-track-width: 42px;
-    --rt-toggle-track-height: 24px;
-    --rt-toggle-thumb-size: 18px;
-    --rt-toggle-thumb-inset: 3px;
-    --rt-toggle-thumb-travel: 18px;
-    --rt-toggle-icon-inset: 4px;
+    rt-toggle-switch .rt-toggle-switch {
+        --rt-toggle-radius: var(--rt-radius-full);
+        --rt-toggle-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-toggle-transition-duration: var(--rt-duration-fast);
 
-    display: inline-flex;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
+        /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
+           правила ниже к размерам не привязаны. `thumb-travel` держим явным
+           числом, а не calc из ширины: каждое значение сверяется с макетом. */
+        --rt-toggle-track-width: 42px;
+        --rt-toggle-track-height: 24px;
+        --rt-toggle-thumb-size: 18px;
+        --rt-toggle-thumb-inset: 3px;
+        --rt-toggle-thumb-travel: 18px;
+        --rt-toggle-icon-inset: 4px;
 
-    &--md {
-        --rt-toggle-track-width: 52px;
-        --rt-toggle-thumb-travel: 28px;
-    }
+        display: inline-flex;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
 
-    &--lg {
-        --rt-toggle-track-width: 60px;
-        --rt-toggle-track-height: 30px;
-        --rt-toggle-thumb-size: 24px;
-        --rt-toggle-thumb-travel: 30px;
-        --rt-toggle-icon-inset: 6px;
-    }
+        &--md {
+            --rt-toggle-track-width: 52px;
+            --rt-toggle-thumb-travel: 28px;
+        }
 
-    &:focus-visible {
-        border-radius: var(--rt-radius-full);
-        box-shadow: var(--rt-shadow-focus-ring);
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-    }
+        &--lg {
+            --rt-toggle-track-width: 60px;
+            --rt-toggle-track-height: 30px;
+            --rt-toggle-thumb-size: 24px;
+            --rt-toggle-thumb-travel: 30px;
+            --rt-toggle-icon-inset: 6px;
+        }
 
-    &--disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+        &:focus-visible {
+            border-radius: var(--rt-toggle-radius);
+            box-shadow: var(--rt-toggle-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
 
-    &__track {
-        position: relative;
-        display: inline-block;
-        width: var(--rt-toggle-track-width);
-        height: var(--rt-toggle-track-height);
-        border-radius: var(--rt-radius-full);
-        background: var(--rt-toggle-color-track);
-        box-shadow: var(--rt-toggle-shadow-border);
-        color: var(--rt-toggle-color-icon);
-        transition:
-            background var(--rt-duration-fast) ease,
-            box-shadow var(--rt-duration-fast) ease;
-    }
+        &--disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
 
-    /* Элемент адресуется классом, а не вторым `&`: родитель здесь составной
-       (`rt-toggle-switch .rt-toggle-switch`), и второй `&` развернулся бы в него целиком —
-       то есть в селектор, требующий вложенного переключателя. Включённое состояние
-       из-за этого не применялось: трек оставался серым, бегунок — слева. */
-    &--on .rt-toggle-switch__track {
-        background: var(--rt-toggle-color-track-on);
-        box-shadow: none;
-    }
+        &__track {
+            position: relative;
+            display: inline-block;
+            width: var(--rt-toggle-track-width);
+            height: var(--rt-toggle-track-height);
+            border-radius: var(--rt-toggle-radius);
+            background: var(--rt-toggle-color-track);
+            box-shadow: var(--rt-toggle-shadow-border);
+            color: var(--rt-toggle-color-icon);
+            transition:
+                background var(--rt-toggle-transition-duration) ease,
+                box-shadow var(--rt-toggle-transition-duration) ease;
+        }
 
-    /* Иконки статичны: бегунок наезжает на иконку активного состояния и
-       закрывает её, поэтому видна всегда иконка целевого состояния. */
-    &__icon-off,
-    &__icon-on {
-        position: absolute;
-        inset-block-start: 50%;
-        transform: translateY(-50%);
-    }
+        /* Элемент адресуется классом, а не вторым `&`: родитель здесь составной
+           (`rt-toggle-switch .rt-toggle-switch`), и второй `&` развернулся бы в него целиком —
+           то есть в селектор, требующий вложенного переключателя. Включённое состояние
+           из-за этого не применялось: трек оставался серым, бегунок — слева. */
+        &--on .rt-toggle-switch__track {
+            background: var(--rt-toggle-color-track-on);
+            box-shadow: none;
+        }
 
-    &__icon-off {
-        inset-inline-start: var(--rt-toggle-icon-inset);
-    }
+        /* Иконки статичны: бегунок наезжает на иконку активного состояния и
+           закрывает её, поэтому видна всегда иконка целевого состояния. */
+        &__icon-off,
+        &__icon-on {
+            position: absolute;
+            inset-block-start: 50%;
+            transform: translateY(-50%);
+        }
 
-    &__icon-on {
-        inset-inline-end: var(--rt-toggle-icon-inset);
-    }
+        &__icon-off {
+            inset-inline-start: var(--rt-toggle-icon-inset);
+        }
 
-    &__thumb {
-        position: absolute;
-        width: var(--rt-toggle-thumb-size);
-        height: var(--rt-toggle-thumb-size);
-        border-radius: var(--rt-radius-full);
-        background: var(--rt-toggle-color-thumb);
-        box-shadow: var(--rt-toggle-shadow-thumb);
-        inset-block-start: var(--rt-toggle-thumb-inset);
-        inset-inline-start: var(--rt-toggle-thumb-inset);
-        transition: transform var(--rt-duration-fast) ease;
-    }
+        &__icon-on {
+            inset-inline-end: var(--rt-toggle-icon-inset);
+        }
+
+        &__thumb {
+            position: absolute;
+            width: var(--rt-toggle-thumb-size);
+            height: var(--rt-toggle-thumb-size);
+            border-radius: var(--rt-toggle-radius);
+            background: var(--rt-toggle-color-thumb);
+            box-shadow: var(--rt-toggle-shadow-thumb);
+            inset-block-start: var(--rt-toggle-thumb-inset);
+            inset-inline-start: var(--rt-toggle-thumb-inset);
+            transition: transform var(--rt-toggle-transition-duration) ease;
+        }
 
-    &--on .rt-toggle-switch__thumb {
-        transform: translateX(var(--rt-toggle-thumb-travel));
+        &--on .rt-toggle-switch__thumb {
+            transform: translateX(var(--rt-toggle-thumb-travel));
+        }
     }
 }

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

@@ -1,69 +1,78 @@
-.rt-toolbar {
-    display: block;
+@layer rt-kit.components {
+    .rt-toolbar {
+        display: block;
 
-    &__bars {
-        display: flex;
-        width: 100%;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--rt-space-2-5) 0;
-        gap: var(--rt-space-2-5);
-    }
+        &__bars {
+            display: flex;
+            width: 100%;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-2) 0;
+            gap: var(--rt-space-2);
+        }
 
-    &__bar {
-        display: flex;
-        align-items: center;
+        &__bar {
+            display: flex;
+            align-items: center;
 
-        // left/right — по контенту; center — эластичный спейсер, который
-        // прижимает right-бар к краю. Раньше каждый list-page переопределял
-        // эти три флекса через ::ng-deep — теперь поведение зашито здесь.
-        &--left {
-            flex: 0 0 auto;
-            gap: var(--rt-space-2-5);
-        }
+            // left/right — по контенту; center — эластичный спейсер, который
+            // прижимает right-бар к краю. Раньше каждый list-page переопределял
+            // эти три флекса через ::ng-deep — теперь поведение зашито здесь.
+            &--left {
+                flex: 0 0 auto;
+                gap: var(--rt-space-2);
+            }
 
-        &--center {
-            flex: 1 1 auto;
-            justify-content: flex-end;
-            gap: var(--rt-space-2-5);
+            &--center {
+                flex: 1 1 auto;
+                justify-content: flex-end;
+                gap: var(--rt-space-2);
 
-            // Контрол-фильтр (поиск/селект) занимает ширину center и право-
-            // выравнивается к action-кнопкам; свой max-width задаёт потребитель.
-            rt-input,
-            rt-select {
-                width: 100%;
+                // Контрол-фильтр (поиск/селект) занимает ширину center и право-
+                // выравнивается к action-кнопкам; свой max-width задаёт потребитель.
+                rt-input,
+                rt-select {
+                    width: 100%;
+                }
             }
-        }
 
-        &--right {
-            // Прижатие к правому краю даже когда right — единственный бар
-            // (нет left/center, которые бы вытолкнули его через space-between).
-            flex: 0 0 auto;
-            margin-left: auto;
-            gap: var(--rt-space-sm);
+            &--right {
+                // Прижатие к правому краю даже когда right — единственный бар
+                // (нет left/center, которые бы вытолкнули его через space-between).
+                flex: 0 0 auto;
+                margin-left: auto;
+                gap: var(--rt-space-sm);
+            }
         }
     }
-}
 
-// Мобилка: три зоны не влезают в строку — стекаем в колонку на всю ширину
-// (фильтр → поиск → действия), поиск растягивается. `--dense` (компактная
-// шапка вроде rt-chat) из стекинга исключён — остаётся в одну строку.
-@media (width <= 768px) {
-    .rt-toolbar:not(.rt-toolbar--dense) {
-        .rt-toolbar__bars {
-            flex-direction: column;
-            align-items: stretch;
-            gap: var(--rt-space-sm);
-        }
+    // Мобилка: три зоны не влезают в строку — стекаем в колонку на всю ширину
+    // (фильтр → поиск → действия), поиск растягивается. `--dense` (компактная
+    // шапка вроде rt-chat) из стекинга исключён — остаётся в одну строку.
+    @media (width <= 768px) {
+        .rt-toolbar:not(.rt-toolbar--dense) {
+            .rt-toolbar__bars {
+                flex-direction: column;
+                align-items: stretch;
+                gap: var(--rt-space-sm);
+            }
 
-        .rt-toolbar__bar--center {
-            justify-content: stretch;
-        }
+            // Зона стекает в колонку, а её содержимое — нет: третий отбор уезжал за
+            // правый край окна и обрезался прокруткой, не сказав об этом. Перенос
+            // объявлен здесь, а не у потребителя: зона узкого экрана — забота тулбара.
+            .rt-toolbar__bar {
+                flex-wrap: wrap;
+            }
 
-        .rt-toolbar__bar--right {
-            justify-content: flex-end;
-            margin-left: 0;
+            .rt-toolbar__bar--center {
+                justify-content: stretch;
+            }
+
+            .rt-toolbar__bar--right {
+                justify-content: flex-end;
+                margin-left: 0;
+            }
         }
     }
 }