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

package/src/lib/components/welcome-dialog/rt-welcome-dialog.component.scss

@@ -1,52 +1,54 @@
-/* Welcome-модалка первого входа — открывается через RtDialogService.open().
-   rt-dialog даёт styled-frame, контент внутри получает свой padding.
+@layer rt-kit.components {
+    /* Welcome-модалка первого входа — открывается через RtDialogService.open().
+       rt-dialog даёт styled-frame, контент внутри получает свой padding.
 
-   ViewEncapsulation.None. Хост адресуется по имени элемента, а не по классу
-   блока: класс `.rt-welcome-dialog` висит и на `<rt-welcome-dialog>`, и на
-   обёртке содержимого внутри него, поэтому правила обёртки вложены в хост. */
+       ViewEncapsulation.None. Хост адресуется по имени элемента, а не по классу
+       блока: класс `.rt-welcome-dialog` висит и на `<rt-welcome-dialog>`, и на
+       обёртке содержимого внутри него, поэтому правила обёртки вложены в хост. */
 
-rt-welcome-dialog {
-    display: contents;
+    rt-welcome-dialog {
+        display: contents;
 
-    .rt-welcome-dialog {
-        display: flex;
-        flex-direction: column;
-        padding: var(--rt-space-16) var(--rt-space-5);
-        gap: var(--rt-space-5);
-
-        &__text {
+        .rt-welcome-dialog {
             display: flex;
             flex-direction: column;
-            gap: var(--rt-space-2-5);
-            text-align: center;
-        }
-
-        &__title {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-family: var(--rt-font-family-sans);
-            font-size: var(--rt-text-md);
-            font-weight: var(--rt-font-weight-bold);
-            line-height: var(--rt-leading-snug);
-        }
-
-        &__description {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-family: var(--rt-font-family-sans);
-            font-size: var(--rt-text-xs);
-            font-weight: var(--rt-font-weight-regular);
-            line-height: var(--rt-leading-snug);
-
-            /* Одиночные переводы строк внутри абзаца сохраняются как <br>. */
-            white-space: pre-line;
-        }
-
-        &__cta {
-            --rt-btn-font-size: 14px;
-
-            width: 100%;
-            letter-spacing: 0;
+            padding: var(--rt-space-16) var(--rt-space-5);
+            gap: var(--rt-space-5);
+
+            &__text {
+                display: flex;
+                flex-direction: column;
+                gap: var(--rt-space-2);
+                text-align: center;
+            }
+
+            &__title {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-family: var(--rt-font-family-sans);
+                font-size: var(--rt-text-md);
+                font-weight: var(--rt-font-weight-bold);
+                line-height: var(--rt-leading-snug);
+            }
+
+            &__description {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-family: var(--rt-font-family-sans);
+                font-size: var(--rt-text-xs);
+                font-weight: var(--rt-font-weight-regular);
+                line-height: var(--rt-leading-snug);
+
+                /* Одиночные переводы строк внутри абзаца сохраняются как <br>. */
+                white-space: pre-line;
+            }
+
+            &__cta {
+                --rt-btn-font-size: 14px;
+
+                width: 100%;
+                letter-spacing: 0;
+            }
         }
     }
 }

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

@@ -1,173 +1,181 @@
-.rt-workspace {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    block-size: calc(100dvh - var(--rt-header-height, 0px));
-    min-block-size: 0;
-
-    &__list {
-        display: flex;
-        flex: 0 0 var(--rt-workspace-list-size, 320px);
-        flex-direction: column;
-        border-inline-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        min-inline-size: 0;
-    }
+@layer rt-kit.components {
+    .rt-workspace {
+        --rt-workspace-border-width: var(--rt-border-width-thin);
+        --rt-workspace-handle-line-width: var(--rt-border-width-medium);
+        --rt-workspace-handle-transition-duration: var(--rt-duration-fast);
+        --rt-workspace-panel-transition-duration: var(--rt-duration-base);
+        --rt-workspace-aside-shadow: var(--rt-shadow-md);
 
-    &__center {
+        position: relative;
         display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+        flex-direction: row;
+        block-size: calc(100dvh - var(--rt-header-height, 0px));
         min-block-size: 0;
-        min-inline-size: 0;
-        padding-inline: var(--rt-space-4);
-    }
-
-    &__mobile-toolbar {
-        display: none;
-    }
-
-    &__aside {
-        display: flex;
-        flex: 0 0 var(--rt-workspace-aside-size, 360px);
-        flex-direction: column;
-        border-inline-start: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        min-inline-size: 0;
-    }
 
-    &__handle {
-        position: relative;
-        z-index: 1;
-        flex: 0 0 auto;
-        background: transparent;
-        cursor: col-resize;
-        inline-size: var(--rt-space-2);
-        margin-inline: calc(-1 * var(--rt-space-1));
-        touch-action: none;
-
-        &:before {
-            position: absolute;
-            background: transparent;
-            content: '';
-            inline-size: var(--rt-border-width-medium);
-            inset-block: 0;
-            inset-inline-start: 50%;
-            transform: translateX(-50%);
-            transition: background var(--rt-duration-fast) ease;
-        }
-
-        &:hover:before,
-        &:focus-visible:before {
-            background: var(--rt-color-border-strong);
+        &__list {
+            display: flex;
+            flex: 0 0 var(--rt-workspace-list-size, 320px);
+            flex-direction: column;
+            border-inline-end: var(--rt-workspace-border-width) solid var(--rt-color-border-strong);
+            min-inline-size: 0;
         }
 
-        &:focus-visible {
-            outline: none;
-
-            &:before {
-                background: var(--rt-color-border-focus);
-            }
+        &__center {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            min-block-size: 0;
+            min-inline-size: 0;
+            padding-inline: var(--rt-space-4);
         }
-    }
 
-    &__desktop-only {
-        @media (width <= 1080px) {
+        &__mobile-toolbar {
             display: none;
         }
-    }
 
-    @media (width <= 1080px) {
-        &__mobile-toolbar {
+        &__aside {
             display: flex;
-            justify-content: space-between;
-            padding: var(--rt-space-2) var(--rt-space-3) 0;
+            flex: 0 0 var(--rt-workspace-aside-size, 360px);
+            flex-direction: column;
+            border-inline-start: var(--rt-workspace-border-width) solid var(--rt-color-border-strong);
+            min-inline-size: 0;
         }
 
         &__handle {
-            display: none;
-        }
+            position: relative;
+            z-index: 1;
+            flex: 0 0 auto;
+            background: transparent;
+            cursor: col-resize;
+            inline-size: var(--rt-space-2);
+            margin-inline: calc(-1 * var(--rt-space-1));
+            touch-action: none;
 
-        &__aside {
-            position: absolute;
-            z-index: 2;
-            flex-basis: 360px;
-            background: var(--rt-color-bg-surface);
-            box-shadow: var(--rt-shadow-md);
-            inset-block: 0;
-            inset-inline-end: 0;
-            max-inline-size: 90%;
-            transform: translateX(100%);
-            transition: transform var(--rt-duration-base) ease;
-        }
+            &:before {
+                position: absolute;
+                background: transparent;
+                content: '';
+                inline-size: var(--rt-workspace-handle-line-width);
+                inset-block: 0;
+                inset-inline-start: 50%;
+                transform: translateX(-50%);
+                transition: background var(--rt-workspace-handle-transition-duration) ease;
+            }
 
-        &__aside--open {
-            transform: translateX(0);
-        }
-    }
+            &:hover:before,
+            &:focus-visible:before {
+                background: var(--rt-color-border-strong);
+            }
 
-    @media (width <= 768px) {
-        &__list {
-            flex-basis: 100%;
+            &:focus-visible {
+                outline: none;
+
+                &:before {
+                    background: var(--rt-color-border-focus);
+                }
+            }
         }
-    }
 
-    @media (width > 1080px) {
-        &__aside {
-            overflow: hidden;
-            transition:
-                flex-basis var(--rt-duration-base) ease,
-                border-inline-start-width var(--rt-duration-base) ease,
-                opacity var(--rt-duration-base) ease;
-            will-change: flex-basis;
+        &__desktop-only {
+            @media (width <= 1080px) {
+                display: none;
+            }
         }
-    }
 
-    &--has-active {
-        @media (width <= 768px) {
-            .rt-workspace__list {
+        @media (width <= 1080px) {
+            &__mobile-toolbar {
+                display: flex;
+                justify-content: space-between;
+                padding: var(--rt-space-2) var(--rt-space-4) 0;
+            }
+
+            &__handle {
                 display: none;
             }
 
-            .rt-workspace__center {
+            &__aside {
+                position: absolute;
+                z-index: 2;
+                flex-basis: 360px;
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-workspace-aside-shadow);
+                inset-block: 0;
+                inset-inline-end: 0;
+                max-inline-size: 90%;
+                transform: translateX(100%);
+                transition: transform var(--rt-workspace-panel-transition-duration) ease;
+            }
+
+            &__aside--open {
+                transform: translateX(0);
+            }
+        }
+
+        @media (width <= 768px) {
+            &__list {
                 flex-basis: 100%;
             }
         }
-    }
 
-    &--aside-collapsed {
         @media (width > 1080px) {
-            .rt-workspace__aside {
-                flex-basis: 0;
-                border-inline-start-width: 0;
-                min-inline-size: 0;
-                opacity: 0;
-                pointer-events: none;
+            &__aside {
+                overflow: hidden;
                 transition:
-                    flex-basis var(--rt-duration-base) ease,
-                    border-inline-start-width var(--rt-duration-base) ease,
-                    opacity var(--rt-duration-base) ease,
-                    visibility 0s linear var(--rt-duration-base);
-                visibility: hidden;
+                    flex-basis var(--rt-workspace-panel-transition-duration) ease,
+                    border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,
+                    opacity var(--rt-workspace-panel-transition-duration) ease;
+                will-change: flex-basis;
             }
+        }
 
-            .rt-workspace__handle--aside {
-                display: none;
+        &--has-active {
+            @media (width <= 768px) {
+                .rt-workspace__list {
+                    display: none;
+                }
+
+                .rt-workspace__center {
+                    flex-basis: 100%;
+                }
             }
         }
-    }
 
-    &--resizing {
-        cursor: col-resize;
-        user-select: none;
+        &--aside-collapsed {
+            @media (width > 1080px) {
+                .rt-workspace__aside {
+                    flex-basis: 0;
+                    border-inline-start-width: 0;
+                    min-inline-size: 0;
+                    opacity: 0;
+                    pointer-events: none;
+                    transition:
+                        flex-basis var(--rt-workspace-panel-transition-duration) ease,
+                        border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,
+                        opacity var(--rt-workspace-panel-transition-duration) ease,
+                        visibility 0s linear var(--rt-workspace-panel-transition-duration);
+                    visibility: hidden;
+                }
+
+                .rt-workspace__handle--aside {
+                    display: none;
+                }
+            }
+        }
 
-        .rt-workspace__list,
-        .rt-workspace__aside {
-            transition: none;
+        &--resizing {
+            cursor: col-resize;
+            user-select: none;
+
+            .rt-workspace__list,
+            .rt-workspace__aside {
+                transition: none;
+            }
         }
-    }
 
-    @media (prefers-reduced-motion: reduce) {
-        &__aside {
-            transition: none;
+        @media (prefers-reduced-motion: reduce) {
+            &__aside {
+                transition: none;
+            }
         }
     }
 }

package/src/lib/components/workspace-details/rt-workspace-details.component.scss

@@ -1,128 +1,132 @@
-.rt-workspace-details {
-    display: flex;
-    flex-direction: column;
-    block-size: 100%;
-    min-block-size: 0;
+@layer rt-kit.components {
+    .rt-workspace-details {
+        --rt-workspace-details-border-width: var(--rt-border-width-thin);
 
-    &__head {
         display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        block-size: 56px;
-        border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        padding-inline: var(--rt-space-lg);
-    }
-
-    &__head-title {
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-md);
-        font-weight: var(--rt-font-weight-semibold);
-    }
-
-    &__tabs {
-        flex: 1 1 auto;
+        flex-direction: column;
+        block-size: 100%;
         min-block-size: 0;
 
-        .rt-tabs__header {
-            align-items: flex-end;
+        &__head {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
             block-size: 56px;
-            border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
+            border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
             padding-inline: var(--rt-space-lg);
         }
 
-        .rt-tabs__tab-list {
-            border-block-end: 0;
+        &__head-title {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
         }
 
-        .rt-tabs__content {
-            padding-block-end: var(--rt-space-5);
-            padding-inline: var(--rt-space-lg);
+        &__tabs {
+            flex: 1 1 auto;
+            min-block-size: 0;
+
+            .rt-tabs__header {
+                align-items: flex-end;
+                block-size: 56px;
+                border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
+                padding-inline: var(--rt-space-lg);
+            }
+
+            .rt-tabs__tab-list {
+                border-block-end: 0;
+            }
+
+            .rt-tabs__content {
+                padding-block-end: var(--rt-space-5);
+                padding-inline: var(--rt-space-lg);
+            }
         }
-    }
-
-    &__body {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        padding: var(--rt-space-5) var(--rt-space-lg);
-        gap: var(--rt-space-md);
-        min-block-size: 0;
-        overflow-y: auto;
-    }
 
-    &__agent-view,
-    &__agent-edit {
-        display: flex;
-        align-items: center;
-        gap: var(--rt-space-sm);
-    }
+        &__body {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            padding: var(--rt-space-5) var(--rt-space-lg);
+            gap: var(--rt-space-md);
+            min-block-size: 0;
+            overflow-y: auto;
+        }
 
-    &__agent-name {
-        overflow: hidden;
-        min-inline-size: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+        &__agent-view,
+        &__agent-edit {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-sm);
+        }
 
-    &__toggle-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--rt-space-md);
-    }
+        &__agent-name {
+            overflow: hidden;
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    &__toggle-label {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-medium);
-    }
+        &__toggle-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--rt-space-md);
+        }
 
-    &__toggle-hint {
-        margin: 0;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-    }
+        &__toggle-label {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+        }
 
-    &__transition-form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-md);
-    }
+        &__toggle-hint {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
 
-    &__transition-submit {
-        align-self: flex-start;
-    }
+        &__transition-form {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
 
-    &__audit {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-md);
-    }
+        &__transition-submit {
+            align-self: flex-start;
+        }
 
-    &__audit-loading,
-    &__audit-more {
-        align-self: center;
-    }
+        &__audit {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
 
-    &__footer {
-        display: flex;
-        flex: 0 0 auto;
-        flex-direction: column;
-        padding: var(--rt-space-md) var(--rt-space-lg);
-        border-block-start: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        gap: var(--rt-space-sm);
+        &__audit-loading,
+        &__audit-more {
+            align-self: center;
+        }
 
-        &:empty {
-            display: none;
+        &__footer {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: column;
+            padding: var(--rt-space-md) var(--rt-space-lg);
+            border-block-start: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
+            gap: var(--rt-space-sm);
+
+            &:empty {
+                display: none;
+            }
         }
-    }
 
-    &__footer-action {
-        justify-content: center;
-        inline-size: 100%;
-    }
+        &__footer-action {
+            justify-content: center;
+            inline-size: 100%;
+        }
 
-    &__error {
-        margin-inline: var(--rt-space-lg);
+        &__error {
+            margin-inline: var(--rt-space-lg);
+        }
     }
 }

package/src/styles/_index.scss

@@ -2,6 +2,10 @@
 // _breakpoints.scss НЕ форвардим — это SCSS-namespace для прямого @use
 // из feature-стилей (CSS-vars в @media не поддерживаются).
 
+// Порядок подслоёв идёт первым: он обязан попасть в вывод раньше первого правила, которое в
+// подслой ложится.
+@forward './layers';
+
 @forward './primitives';
 @forward './semantic';
 @forward './theme-dark';