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

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

@@ -1,66 +1,73 @@
-/* rt-checkbox — чекбокс в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-checkbox` висит
-   и на `<rt-checkbox>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-checkbox — чекбокс в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-checkbox` висит
+       и на `<rt-checkbox>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-checkbox {
-    display: inline-block;
-}
-
-rt-checkbox .rt-checkbox {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    gap: var(--rt-space-sm);
-    text-align: start;
-
-    &:focus-visible {
-        border-radius: var(--rt-radius-sm);
-        box-shadow: var(--rt-shadow-focus-ring);
-        outline: 2px solid transparent;
-        outline-offset: 2px;
+    rt-checkbox {
+        display: inline-block;
     }
 
-    &--disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+    rt-checkbox .rt-checkbox {
+        --rt-checkbox-focus-radius: var(--rt-radius-sm);
+        --rt-checkbox-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-checkbox-box-radius: var(--rt-radius-sm);
+        --rt-checkbox-transition-duration: var(--rt-duration-fast);
 
-    &__box {
         display: inline-flex;
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
         align-items: center;
-        justify-content: center;
-        border: var(--rt-input-border-width) solid var(--rt-color-border-strong);
-        border-radius: var(--rt-radius-sm);
-        background: var(--rt-color-bg-surface);
-        transition:
-            background var(--rt-duration-fast) ease,
-            border-color var(--rt-duration-fast) ease;
-    }
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
+        gap: var(--rt-space-sm);
+        text-align: start;
 
-    /* Элемент адресуется классом, а не вторым `&`: родитель здесь составной
-       (`rt-checkbox .rt-checkbox`), и второй `&` развернулся бы в него целиком —
-       `… .rt-checkbox--checked rt-checkbox .rt-checkbox__box`, то есть в селектор,
-       требующий вложенного чекбокса. Заливка отмеченного из-за этого не применялась. */
-    &--checked .rt-checkbox__box,
-    &--indeterminate .rt-checkbox__box {
-        border-color: var(--rt-color-action-primary);
-        background: var(--rt-color-action-primary);
-    }
+        &:focus-visible {
+            border-radius: var(--rt-checkbox-focus-radius);
+            box-shadow: var(--rt-checkbox-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
+
+        &--disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        &__box {
+            display: inline-flex;
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-input-border-width) solid var(--rt-color-border-strong);
+            border-radius: var(--rt-checkbox-box-radius);
+            background: var(--rt-color-bg-surface);
+            transition:
+                background var(--rt-checkbox-transition-duration) ease,
+                border-color var(--rt-checkbox-transition-duration) ease;
+        }
+
+        /* Элемент адресуется классом, а не вторым `&`: родитель здесь составной
+           (`rt-checkbox .rt-checkbox`), и второй `&` развернулся бы в него целиком —
+           `… .rt-checkbox--checked rt-checkbox .rt-checkbox__box`, то есть в селектор,
+           требующий вложенного чекбокса. Заливка отмеченного из-за этого не применялась. */
+        &--checked .rt-checkbox__box,
+        &--indeterminate .rt-checkbox__box {
+            border-color: var(--rt-color-action-primary);
+            background: var(--rt-color-action-primary);
+        }
 
-    &__label {
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-sm);
-        user-select: none;
+        &__label {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            user-select: none;
 
-        &:empty {
-            display: none;
+            &:empty {
+                display: none;
+            }
         }
     }
 }

package/src/lib/components/collapsible-text/rt-collapsible-text.component.scss

@@ -1,43 +1,45 @@
-.rt-collapsible-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--rt-space-sm);
+@layer rt-kit.components {
+    .rt-collapsible-text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-sm);
 
-    &__text {
-        display: block;
+        &__text {
+            display: block;
 
-        &--clamped {
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-box-orient: vertical;
+            &--clamped {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-box-orient: vertical;
+            }
         }
-    }
 
-    &__paragraph {
-        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);
-        letter-spacing: var(--rt-letter-spacing-wide);
-        line-height: var(--rt-leading-snug);
+        &__paragraph {
+            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);
+            letter-spacing: var(--rt-letter-spacing-wide);
+            line-height: var(--rt-leading-snug);
 
-        & + & {
-            margin-top: var(--rt-space-sm);
+            & + & {
+                margin-top: var(--rt-space-sm);
+            }
         }
-    }
 
-    &__toggle {
-        align-self: flex-start;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        color: var(--rt-color-text-link);
-        cursor: pointer;
-        font-family: var(--rt-font-family-sans);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-medium);
-        letter-spacing: var(--rt-letter-spacing-wide);
-        line-height: var(--rt-leading-snug);
+        &__toggle {
+            align-self: flex-start;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-color-text-link);
+            cursor: pointer;
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+            letter-spacing: var(--rt-letter-spacing-wide);
+            line-height: var(--rt-leading-snug);
+        }
     }
 }

package/src/lib/components/confirm-popover/rt-confirm-popover.component.scss

@@ -1,36 +1,42 @@
-/* rt-confirm-popover — панель подтверждения в CDK Overlay. ViewEncapsulation.None.
-   Селекторы префиксованы `.rt-confirm-popover`. */
+@layer rt-kit.components {
+    /* rt-confirm-popover — панель подтверждения в CDK Overlay. ViewEncapsulation.None.
+       Селекторы префиксованы `.rt-confirm-popover`. */
 
-.rt-confirm-popover {
-    display: flex;
-    width: 280px;
-    max-width: 280px;
-    flex-direction: column;
-    padding: var(--rt-space-md);
-    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-surface);
-    box-shadow: var(--rt-shadow-lg);
-    gap: var(--rt-space-sm);
+    .rt-confirm-popover {
+        --rt-confirm-popover-radius: var(--rt-radius-md);
+        --rt-confirm-popover-border-width: var(--rt-border-width-thin);
+        --rt-confirm-popover-shadow: var(--rt-shadow-lg);
 
-    &__title {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-semibold);
-    }
-
-    &__message {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-sm);
-        line-height: var(--rt-leading-normal);
-    }
-
-    &__actions {
         display: flex;
-        justify-content: space-between;
+        width: 280px;
+        max-width: 280px;
+        flex-direction: column;
+        padding: var(--rt-space-md);
+        border: var(--rt-confirm-popover-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-confirm-popover-radius);
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-confirm-popover-shadow);
         gap: var(--rt-space-sm);
-        margin-block-start: var(--rt-space-xs);
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__message {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-sm);
+            line-height: var(--rt-leading-normal);
+        }
+
+        &__actions {
+            display: flex;
+            justify-content: space-between;
+            gap: var(--rt-space-sm);
+            margin-block-start: var(--rt-space-xs);
+        }
     }
 }

package/src/lib/components/container/CONTEXT.md

@@ -36,6 +36,28 @@
 **Стопка уведомлений встроена в каркас** (`rt-toaster` внизу по центру): заводить её отдельно
 не нужно.
 
+## Уход с route-панели
+
+Панель, живущая на своём маршруте (`RtRouteAsideComponent` + `rtAsideUnsavedGuard` на
+ro-маршруте), уступает место навигацией, и о несохранённых правках её спрашивает роутер.
+
+**Гард спрашивает панель, учтённую под маршрутом ухода, а не компонент, который ему подставил
+роутер.** Когда ro-маршрут объявлен под уровнем без своего компонента — тем, что держит одни
+`providers` для ветки, — Angular отдаёт детям контекст родителя, и в гард приходит компонент
+первичного аутлета. Учёт ведёт `RtRouteAsideRegistry`: панель встаёт в него, когда занимает
+аутлет, и снимается при уничтожении. Наружу кита учёт не выведен — приложению он не нужен.
+
+**Компонент от роутера остаётся запасным путём.** Панель приложения может отвечать о правках,
+не наследуя `RtRouteAsideComponent`: гард спросит её, если под маршрутом никто не учтён и метод
+у компонента есть.
+
+**Уход, начатый самой панелью, о правках не спрашивает.** Разрешение выдаётся вплотную к вызову
+роутера, действует на один уход и снимается, если навигация не состоялась. Поэтому закрытие
+после удачной записи не открывает окно про то, что уже сохранено.
+
+**Отказом навигации гард не отвечает никогда.** Упавший ответ панели отменяет один уход и
+снимает панель с учёта: приложение не запирается на адресе панели.
+
 ## Рядом
 
 - [`rt-toaster`](../toast/CONTEXT.md) — та самая стопка.

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

@@ -3,109 +3,113 @@
    взял ни один маршрут, а панель контейнер держит в persistent-режиме. */
 @use '../aside/rt-aside-overlay';
 
-.rt-container {
-    display: grid;
-    min-height: 100%;
-    flex: 1 1 auto;
-    background-color: var(--rt-color-bg-page, #f5f5f5);
-    color: var(--rt-color-text-primary, #222);
-    grid-template: 'header header' auto 'left-sidenav toolbar' auto 'left-sidenav content' 1fr / auto 1fr;
+@layer rt-kit.components {
+    .rt-container {
+        --rt-container-border-width: var(--rt-border-width-thin);
 
-    &__header {
-        // Хедер закреплён вверху: при скролле документа (высота контейнера не
-        // ограничена вьюпортом) grid-строка header уезжала бы вверх. sticky top:0
-        // держит её на месте. z-index:1 — выше later-DOM контента, но ниже CDK
-        // overlay асайдов (1000). Работает благодаря `html { overflow-x: clip }`
-        // (clip, в отличие от hidden, не создаёт scroll-контейнер и не ломает sticky).
-        position: sticky;
-        z-index: 1;
-        top: 0;
-        display: block;
-        grid-area: header;
+        display: grid;
+        min-height: 100%;
+        flex: 1 1 auto;
+        background-color: var(--rt-color-bg-page);
+        color: var(--rt-color-text-primary);
+        grid-template: 'header header' auto 'left-sidenav toolbar' auto 'left-sidenav content' 1fr / auto 1fr;
 
-        // Обёртка прозрачна: спроецированный хедер даёт собственный фон. Свой
-        // bg-surface здесь протекал бы за скруглёнными нижними углами хедера —
-        // в тёмной теме это давало серые «уголки» (surface ≠ фон хедера).
-    }
-
-    &__left-sidenav {
-        display: block;
-        padding: var(--rt-space-md);
-        border-right: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        background-color: var(--rt-color-bg-surface, #fff);
-        grid-area: left-sidenav;
-    }
-
-    &__toolbar {
-        display: flex;
-        align-items: center;
-        padding: var(--rt-space-sm) var(--rt-space-md);
-        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        background-color: var(--rt-color-bg-surface, #fff);
-        grid-area: toolbar;
+        &__header {
+            // Хедер закреплён вверху: при скролле документа (высота контейнера не
+            // ограничена вьюпортом) grid-строка header уезжала бы вверх. sticky top:0
+            // держит её на месте. z-index:1 — выше later-DOM контента, но ниже CDK
+            // overlay асайдов (1000). Работает благодаря `html { overflow-x: clip }`
+            // (clip, в отличие от hidden, не создаёт scroll-контейнер и не ломает sticky).
+            position: sticky;
+            z-index: 1;
+            top: 0;
+            display: block;
+            grid-area: header;
 
-        &--slot--left {
-            justify-content: flex-start;
+            // Обёртка прозрачна: спроецированный хедер даёт собственный фон. Свой
+            // bg-surface здесь протекал бы за скруглёнными нижними углами хедера —
+            // в тёмной теме это давало серые «уголки» (surface ≠ фон хедера).
         }
 
-        &--slot--center {
-            justify-content: center;
+        &__left-sidenav {
+            display: block;
+            padding: var(--rt-space-md);
+            border-right: var(--rt-container-border-width) solid var(--rt-color-border-subtle);
+            background-color: var(--rt-color-bg-surface);
+            grid-area: left-sidenav;
         }
 
-        &--slot--right {
-            justify-content: flex-end;
+        &__toolbar {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            border-bottom: var(--rt-container-border-width) solid var(--rt-color-border-subtle);
+            background-color: var(--rt-color-bg-surface);
+            grid-area: toolbar;
+
+            &--slot--left {
+                justify-content: flex-start;
+            }
+
+            &--slot--center {
+                justify-content: center;
+            }
+
+            &--slot--right {
+                justify-content: flex-end;
+            }
         }
-    }
 
-    &__content {
-        display: flex;
-        overflow: auto;
-        min-height: 0;
-        flex-direction: column;
-        grid-area: content;
+        &__content {
+            display: flex;
+            overflow: auto;
+            min-height: 0;
+            flex-direction: column;
+            grid-area: content;
+        }
     }
-}
 
-/* App-shell раскладка (opt-in `height="viewport"`): контейнер жёстко равен
-   вьюпорту, документ не скроллится вовсе — скроллятся зоны внутри, каждая сама.
-   В дефолтном `auto` контейнер не ограничен вьюпортом (растёт под контент), из-за
-   чего `&__content { overflow: auto }` никогда не переполняется: скролл забирает
-   документ и утаскивает нав-рейл вместе со списком и лентой чата одним движением.
-   `min-block-size` сбрасываем — иначе `min-height: 100%` спорит с фиксированной
-   высотой, если родитель окажется выше вьюпорта. */
-.rt-container--viewport {
-    block-size: 100dvh;
-    min-block-size: 0;
+    /* App-shell раскладка (opt-in `height="viewport"`): контейнер жёстко равен
+       вьюпорту, документ не скроллится вовсе — скроллятся зоны внутри, каждая сама.
+       В дефолтном `auto` контейнер не ограничен вьюпортом (растёт под контент), из-за
+       чего `&__content { overflow: auto }` никогда не переполняется: скролл забирает
+       документ и утаскивает нав-рейл вместе со списком и лентой чата одним движением.
+       `min-block-size` сбрасываем — иначе `min-height: 100%` спорит с фиксированной
+       высотой, если родитель окажется выше вьюпорта. */
+    .rt-container--viewport {
+        block-size: 100dvh;
+        min-block-size: 0;
 
-    /* Content перестаёт быть скролл-владельцем: он клипает, а скроллит то, что
-       внутри (список диалогов, лента чата) — у каждой зоны свой overflow. */
-    .rt-container__content {
-        overflow: hidden;
-    }
+        /* Content перестаёт быть скролл-владельцем: он клипает, а скроллит то, что
+           внутри (список диалогов, лента чата) — у каждой зоны свой overflow. */
+        .rt-container__content {
+            overflow: hidden;
+        }
 
-    /* Нав-рейлу высоты вьюпорта хватает, скролла на нём быть не должно. `auto`,
-       а не `hidden`: в низком окне пункты меню иначе стали бы недостижимы. */
-    .rt-container__left-sidenav {
-        overflow: auto;
+        /* Нав-рейлу высоты вьюпорта хватает, скролла на нём быть не должно. `auto`,
+           а не `hidden`: в низком окне пункты меню иначе стали бы недостижимы. */
+        .rt-container__left-sidenav {
+            overflow: auto;
+        }
     }
-}
 
-@media (width <= 768px) {
-    // Opt-in: левый sidenav сворачивается в нижний ряд grid'а (таб-бар).
-    // Контент занимает всю ширину и скроллится в своём `1fr` над баром —
-    // бар остаётся видимым без position:fixed и без привязки к его высоте.
-    .rt-container--mobile-left-bottom {
-        grid-template:
-            'header' auto
-            'toolbar' auto
-            'content' 1fr
-            'left-sidenav' auto
-            / 1fr;
+    @media (width <= 768px) {
+        // Opt-in: левый sidenav сворачивается в нижний ряд grid'а (таб-бар).
+        // Контент занимает всю ширину и скроллится в своём `1fr` над баром —
+        // бар остаётся видимым без position:fixed и без привязки к его высоте.
+        .rt-container--mobile-left-bottom {
+            grid-template:
+                'header' auto
+                'toolbar' auto
+                'content' 1fr
+                'left-sidenav' auto
+                / 1fr;
 
-        .rt-container__left-sidenav {
-            padding: 0;
-            border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-            border-right: none;
+            .rt-container__left-sidenav {
+                padding: 0;
+                border-top: var(--rt-container-border-width) solid var(--rt-color-border-subtle);
+                border-right: none;
+            }
         }
     }
 }

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

@@ -1,16 +1,18 @@
-/* rt-counter — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
-   `.rt-counter` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+@layer rt-kit.components {
+    /* rt-counter — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-counter` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
-.rt-counter {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--rt-counter-gap);
+    .rt-counter {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rt-counter-gap);
 
-    &__value {
-        min-width: var(--rt-counter-value-min-width);
-        color: var(--rt-counter-value-color);
-        font-size: var(--rt-counter-value-font-size);
-        font-variant-numeric: tabular-nums;
-        text-align: center;
+        &__value {
+            min-width: var(--rt-counter-value-min-width);
+            color: var(--rt-counter-value-color);
+            font-size: var(--rt-counter-value-font-size);
+            font-variant-numeric: tabular-nums;
+            text-align: center;
+        }
     }
 }

package/src/lib/components/counter-row/rt-counter-row.component.scss

@@ -1,34 +1,38 @@
-/* rt-counter-row — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
-   `.rt-counter-row` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+@layer rt-kit.components {
+    /* rt-counter-row — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-counter-row` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
-.rt-counter-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--rt-counter-row-padding-y) 0;
-    gap: var(--rt-counter-row-gap);
+    .rt-counter-row {
+        --rt-counter-row-border-width: var(--rt-border-width-thin);
 
-    // Линия разделяет соседние строки, а не обводит каждую: рамка на всех дала бы
-    // лишние границы сверху у первой и снизу у последней
-    &:not(:first-of-type) {
-        border-top: var(--rt-border-width-thin) solid var(--rt-counter-row-color-border);
-    }
-
-    &__text {
         display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-2xs);
-        text-align: start;
-    }
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--rt-counter-row-padding-y) 0;
+        gap: var(--rt-counter-row-gap);
 
-    &__label {
-        color: var(--rt-counter-row-label-color);
-        font-size: var(--rt-counter-row-label-font-size);
-        font-weight: var(--rt-font-weight-medium);
-    }
+        // Линия разделяет соседние строки, а не обводит каждую: рамка на всех дала бы
+        // лишние границы сверху у первой и снизу у последней
+        &:not(:first-of-type) {
+            border-top: var(--rt-counter-row-border-width) solid var(--rt-counter-row-color-border);
+        }
+
+        &__text {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2xs);
+            text-align: start;
+        }
+
+        &__label {
+            color: var(--rt-counter-row-label-color);
+            font-size: var(--rt-counter-row-label-font-size);
+            font-weight: var(--rt-font-weight-medium);
+        }
 
-    &__hint {
-        color: var(--rt-counter-row-hint-color);
-        font-size: var(--rt-counter-row-hint-font-size);
+        &__hint {
+            color: var(--rt-counter-row-hint-color);
+            font-size: var(--rt-counter-row-hint-font-size);
+        }
     }
 }