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

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

@@ -1,39 +1,41 @@
-/* rt-aside-unsaved-dialog — окно о несохранённых правках при закрытии панели.
-   ViewEncapsulation.None — селекторы префиксованы `.rt-aside-unsaved-dialog`.
-   Рамку (фон/радиус/тень) даёт rt-dialog; здесь — только раскладка контента. */
+@layer rt-kit.components {
+    /* rt-aside-unsaved-dialog — окно о несохранённых правках при закрытии панели.
+       ViewEncapsulation.None — селекторы префиксованы `.rt-aside-unsaved-dialog`.
+       Рамку (фон/радиус/тень) даёт rt-dialog; здесь — только раскладка контента. */
 
-.rt-aside-unsaved-dialog {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: column;
-    padding: var(--rt-space-xl);
-    gap: var(--rt-space-lg);
-
-    &__text {
+    .rt-aside-unsaved-dialog {
         display: flex;
+        box-sizing: border-box;
         flex-direction: column;
-        gap: var(--rt-space-sm);
-    }
+        padding: var(--rt-space-xl);
+        gap: var(--rt-space-lg);
 
-    &__title {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-md);
-        font-weight: var(--rt-font-weight-bold);
-    }
+        &__text {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
 
-    &__message {
-        margin: 0;
-        color: var(--rt-color-text-secondary);
-        font-size: var(--rt-text-sm);
-    }
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-bold);
+        }
 
-    /* Три кнопки идут в одну строку, а когда она их не вмещает — переносятся и
-       выравниваются по правому краю, сохраняя порядок. */
-    &__footer {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        gap: var(--rt-space-sm);
+        &__message {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        /* Три кнопки идут в одну строку, а когда она их не вмещает — переносятся и
+           выравниваются по правому краю, сохраняя порядок. */
+        &__footer {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            gap: var(--rt-space-sm);
+        }
     }
 }

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

@@ -1,30 +1,34 @@
-/* rt-aside-section — смысловая секция асайда (ViewEncapsulation.None).
-   Селектор bare `.rt-aside-section` (класс на host) — :host в None light-DOM не матчит.
-   Соседние секции разделяются верхней границей через adjacent-sibling правило. */
+@layer rt-kit.components {
+    /* rt-aside-section — смысловая секция асайда (ViewEncapsulation.None).
+       Селектор bare `.rt-aside-section` (класс на host) — :host в None light-DOM не матчит.
+       Соседние секции разделяются верхней границей через adjacent-sibling правило. */
 
-.rt-aside-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--rt-space-md);
+    .rt-aside-section {
+        --rt-aside-section-border-width: var(--rt-border-width-thin);
 
-    /* Разделитель отбит от соседей одинаково: сверху его отбивает зазор зоны
-       содержимого, снизу — тот же токен. */
-    & + & {
-        padding-top: var(--rt-aside-content-gap);
-        border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-    }
-
-    &__heading {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-md);
-        font-weight: var(--rt-font-weight-semibold);
-        line-height: var(--rt-leading-snug);
-    }
-
-    &__body {
         display: flex;
         flex-direction: column;
         gap: var(--rt-space-md);
+
+        /* Разделитель отбит от соседей одинаково: сверху его отбивает зазор зоны
+           содержимого, снизу — тот же токен. */
+        & + & {
+            padding-top: var(--rt-aside-content-gap);
+            border-top: var(--rt-aside-section-border-width) solid var(--rt-color-border-subtle);
+        }
+
+        &__heading {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__body {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
     }
 }

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

@@ -1,143 +1,149 @@
-.rt-autocomplete {
-    position: relative;
-    display: block;
-    width: 100%;
-
-    /* Поле-контейнер: рамка/фон/паддинги/flex — как у rt-input, чтобы префикс-
-       иконка и крестик были flex-child'ами с одинаковыми (через gap) отступами. */
-    &__field {
-        display: inline-flex;
+@layer rt-kit.components {
+    .rt-autocomplete {
+        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: 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-рамку; --open/--invalid ниже по
-       source-order перекрывают её своей рамкой. */
-    &--borderless &__field {
-        border-color: transparent;
-    }
-
-    &--open &__field {
-        border-color: var(--rt-input-color-border-focus);
-    }
 
-    &--invalid &__field {
-        border-color: var(--rt-input-color-border-error);
+        /* Поле-контейнер: рамка/фон/паддинги/flex — как у rt-input, чтобы префикс-
+           иконка и крестик были flex-child'ами с одинаковыми (через gap) отступами. */
+        &__field {
+            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);
+            }
+        }
 
-        &:focus-within {
-            box-shadow: var(--rt-input-focus-shadow-error);
+        /* bordered=false: снимаем только resting-рамку; --open/--invalid ниже по
+           source-order перекрывают её своей рамкой. */
+        &--borderless &__field {
+            border-color: transparent;
         }
-    }
 
-    &--disabled &__field {
-        cursor: not-allowed;
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--open &__field {
+            border-color: var(--rt-input-color-border-focus);
+        }
 
-    &--size--sm &__field {
-        min-height: var(--rt-input-height-sm);
-    }
+        &--invalid &__field {
+            border-color: var(--rt-input-color-border-error);
 
-    &--size--lg &__field {
-        min-height: var(--rt-input-height-lg);
-    }
+            &:focus-within {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
+        }
 
-    /* Read-only: поле-контейнер скрыт (остаётся в DOM ради viewChild.required
-       popover'а), значение показывает плоский текст __readonly. */
-    &--readonly &__field {
-        display: none;
-    }
+        &--disabled &__field {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    &__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);
+        &--size--sm &__field {
+            min-height: var(--rt-input-height-sm);
+        }
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+        &--size--lg &__field {
+            min-height: var(--rt-input-height-lg);
         }
-    }
 
-    &__input {
-        min-width: 0;
-        flex: 1 1 auto;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: inherit;
+        /* Read-only: поле-контейнер скрыт (остаётся в DOM ради viewChild.required
+           popover'а), значение показывает плоский текст __readonly. */
+        &--readonly &__field {
+            display: none;
+        }
 
-        /* Наследуем шрифт от __field, иначе нативный <input> берёт UA-шрифт. */
-        font: inherit;
-        outline: none;
+        &__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);
 
-        &::placeholder {
-            color: var(--rt-input-color-text-placeholder);
-            opacity: 1;
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
 
-        &:disabled {
-            cursor: not-allowed;
+        &__input {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+
+            /* Наследуем шрифт от __field, иначе нативный <input> берёт UA-шрифт. */
+            font: inherit;
+            outline: none;
+
+            &::placeholder {
+                color: var(--rt-input-color-text-placeholder);
+                opacity: 1;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &__icon-left,
-    &__clear {
-        flex-shrink: 0;
-    }
+        &__icon-left,
+        &__clear {
+            flex-shrink: 0;
+        }
 
-    /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK.
-       width:100% — заполнить overlay-pane (CDK ставит pane = ширине trigger'а
-       через rtPopoverWidth="trigger"; flex-pane сам не растягивает контент). */
-    &__panel {
-        width: 100%;
-        max-height: var(--rt-input-panel-max-height);
-        box-sizing: border-box;
-        padding: var(--rt-space-2xs) 0;
-        border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-input-radius);
-        margin: 0;
-        background-color: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-shadow-md);
-        list-style: none;
-        overflow-y: auto;
-    }
+        /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK.
+           width:100% — заполнить overlay-pane (CDK ставит pane = ширине trigger'а
+           через rtPopoverWidth="trigger"; flex-pane сам не растягивает контент). */
+        &__panel {
+            /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
+               объявляется на ней самой — с корня блока оно бы не докатилось. */
+            --rt-autocomplete-panel-shadow: var(--rt-shadow-md);
+
+            width: 100%;
+            max-height: var(--rt-input-panel-max-height);
+            box-sizing: border-box;
+            padding: var(--rt-space-2xs) 0;
+            border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-input-radius);
+            margin: 0;
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-autocomplete-panel-shadow);
+            list-style: none;
+            overflow-y: auto;
+        }
 
-    &__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);
+        &__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,
+            &--active {
+                background-color: var(--rt-color-bg-hover);
+            }
         }
-    }
 
-    &__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/bar-list/rt-bar-list.component.scss

@@ -1,98 +1,102 @@
-/* rt-bar-list — топ-N со шкалой доли в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-bar-list` висит
-   и на `<rt-bar-list>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-bar-list — топ-N со шкалой доли в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-bar-list` висит
+       и на `<rt-bar-list>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-bar-list {
-    display: block;
+    rt-bar-list {
+        display: block;
 
-    .rt-bar-list {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-2);
+        .rt-bar-list {
+            --rt-bar-list-bar-radius: var(--rt-radius-sm);
 
-        &__title {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-sm);
-            font-weight: var(--rt-font-weight-semibold);
-        }
-
-        &__rows {
             display: flex;
             flex-direction: column;
-            padding: 0;
-            margin: 0;
-            gap: var(--rt-space-5);
-            list-style: none;
-        }
+            gap: var(--rt-space-2);
 
-        &__row {
-            display: flex;
-            min-width: 0;
-            flex-direction: column;
-            gap: var(--rt-space-1-5);
-        }
+            &__title {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                font-weight: var(--rt-font-weight-semibold);
+            }
 
-        &__row-head {
-            display: flex;
-            align-items: baseline;
-            justify-content: space-between;
-            font-size: var(--rt-text-md);
-            font-weight: var(--rt-font-weight-semibold);
-            gap: var(--rt-space-3);
-            line-height: var(--rt-leading-tight);
-        }
+            &__rows {
+                display: flex;
+                flex-direction: column;
+                padding: 0;
+                margin: 0;
+                gap: var(--rt-space-5);
+                list-style: none;
+            }
 
-        &__row-title {
-            overflow: hidden;
-            color: var(--rt-color-text-primary);
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+            &__row {
+                display: flex;
+                min-width: 0;
+                flex-direction: column;
+                gap: var(--rt-space-2);
+            }
 
-        &__row-value {
-            flex: 0 0 auto;
-            color: var(--rt-color-text-primary);
-        }
+            &__row-head {
+                display: flex;
+                align-items: baseline;
+                justify-content: space-between;
+                font-size: var(--rt-text-md);
+                font-weight: var(--rt-font-weight-semibold);
+                gap: var(--rt-space-4);
+                line-height: var(--rt-leading-tight);
+            }
 
-        &__row-meta {
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-xs);
-            line-height: var(--rt-leading-none);
-        }
+            &__row-title {
+                overflow: hidden;
+                color: var(--rt-color-text-primary);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
 
-        &__track {
-            display: block;
-            height: 6px;
-            border-radius: var(--rt-radius-sm);
-            background: var(--rt-color-bg-surface-subtle);
-        }
+            &__row-value {
+                flex: 0 0 auto;
+                color: var(--rt-color-text-primary);
+            }
 
-        &__fill {
-            display: block;
-            min-width: 2px;
-            height: 100%;
-            border-radius: var(--rt-radius-sm);
-            background: var(--rt-color-action-primary);
-        }
+            &__row-meta {
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                line-height: var(--rt-leading-none);
+            }
 
-        /* Пустое состояние центрируется в свободном месте панели: список
-           короче панели, и текст, прижатый к заголовку, читался бы как сбой. */
-        &__empty {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: var(--rt-space-lg) 0;
-            gap: var(--rt-space-2-5);
-        }
+            &__track {
+                display: block;
+                height: 6px;
+                border-radius: var(--rt-bar-list-bar-radius);
+                background: var(--rt-color-bg-surface-subtle);
+            }
+
+            &__fill {
+                display: block;
+                min-width: 2px;
+                height: 100%;
+                border-radius: var(--rt-bar-list-bar-radius);
+                background: var(--rt-color-action-primary);
+            }
+
+            /* Пустое состояние центрируется в свободном месте панели: список
+               короче панели, и текст, прижатый к заголовку, читался бы как сбой. */
+            &__empty {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: var(--rt-space-lg) 0;
+                gap: var(--rt-space-2);
+            }
 
-        &__empty-text {
-            margin: 0;
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-sm);
+            &__empty-text {
+                margin: 0;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-sm);
+            }
         }
     }
 }