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

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

@@ -1,18 +1,27 @@
-/* rt-tooltip — панель подсказки в CDK Overlay. ViewEncapsulation.None.
-   Тёмная инверсная подложка (theme-aware пара bg-inverse / text-inverse). */
+@layer rt-kit.components {
+    /* rt-tooltip — панель подсказки в CDK Overlay. ViewEncapsulation.None.
+       Тёмная инверсная подложка (theme-aware пара bg-inverse / text-inverse). */
 
-.rt-tooltip {
-    display: block;
-    max-width: 240px;
-    padding: var(--rt-space-xs) var(--rt-space-sm);
-    border-radius: var(--rt-radius-sm);
-    background: var(--rt-color-bg-inverse);
-    box-shadow: var(--rt-shadow-md);
-    color: var(--rt-color-text-inverse);
-    font-size: var(--rt-text-xs);
-    line-height: var(--rt-leading-snug);
+    .rt-tooltip {
+        --rt-tooltip-radius: var(--rt-radius-sm);
+        --rt-tooltip-shadow: var(--rt-shadow-md);
 
-    /* Tooltip — чисто визуальная подсказка: не перехватывает указатель, чтобы
-       не мешать hover/leave логике host'а. */
-    pointer-events: none;
+        display: block;
+        max-width: 240px;
+        padding: var(--rt-space-xs) var(--rt-space-sm);
+        border-radius: var(--rt-tooltip-radius);
+        background: var(--rt-color-bg-inverse);
+        box-shadow: var(--rt-tooltip-shadow);
+        color: var(--rt-color-text-inverse);
+        font-size: var(--rt-text-xs);
+        line-height: var(--rt-leading-snug);
+
+        /* Длинное значение без пробелов — код, признак, ключ — переносится внутри подсказки:
+           иначе оно вылезает за её край, и подсказка обрезает ровно то, ради чего показана. */
+        overflow-wrap: anywhere;
+
+        /* Tooltip — чисто визуальная подсказка: не перехватывает указатель, чтобы
+           не мешать hover/leave логике host'а. */
+        pointer-events: none;
+    }
 }

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;
+            }
         }
     }
 }