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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/aside/_rt-aside-overlay.scss

@@ -1,88 +1,90 @@
-/* Панель и backdrop CDK Overlay, в котором живёт rt-aside.
+@layer rt-kit.components {
+    /* Панель и backdrop CDK Overlay, в котором живёт rt-aside.
 
-   Оверлей-контейнер CDK — sibling от <body>, поэтому эти правила глобальны по
-   природе: инкапсуляции здесь нет ни при какой настройке компонента.
+       Оверлей-контейнер CDK — sibling от <body>, поэтому эти правила глобальны по
+       природе: инкапсуляции здесь нет ни при какой настройке компонента.
 
-   Овладеть ими может не только сам rt-aside: rt-container держит ту же панель в
-   persistent-режиме и должен рисовать её, даже когда rt-aside в сборку не попал.
-   Поэтому правила вынесены сюда и подключаются обоими — один текст, один набор
-   значений, и разойтись им негде. */
+       Овладеть ими может не только сам rt-aside: rt-container держит ту же панель в
+       persistent-режиме и должен рисовать её, даже когда rt-aside в сборку не попал.
+       Поэтому правила вынесены сюда и подключаются обоими — один текст, один набор
+       значений, и разойтись им негде. */
 
-/* Backdrop / длительность анимации — переопределяемые CSS-properties. */
-:root {
-    --rt-aside-animation-duration: 200ms;
-    --rt-aside-backdrop-bg: rgb(0 0 0 / 45%);
-    --rt-aside-backdrop-blur: 5px;
-}
+    /* Backdrop / длительность анимации — переопределяемые CSS-properties. */
+    :root {
+        --rt-aside-animation-duration: 200ms;
+        --rt-aside-backdrop-bg: var(--rt-color-bg-overlay);
+        --rt-aside-backdrop-blur: 5px;
+    }
 
-/* Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
-   CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при attach;
-   при persistent overlay (rt-container auto-attach) backdrop должен оставаться скрытым
-   пока aside не открыт. Два класса (.cdk-overlay-backdrop + .rt-aside-backdrop) — выше
-   specificity чем одиночный (.cdk-overlay-backdrop-showing), поэтому наш opacity:0
-   побеждает. */
-.cdk-overlay-backdrop.rt-aside-backdrop {
-    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-    -webkit-backdrop-filter: blur(var(--rt-aside-backdrop-blur));
-    backdrop-filter: blur(var(--rt-aside-backdrop-blur));
-    background: var(--rt-aside-backdrop-bg);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--rt-aside-animation-duration) ease;
+    /* Двойной селектор `.cdk-overlay-backdrop.rt-aside-backdrop` нужен для specificity:
+       CDK Overlay добавляет `.cdk-overlay-backdrop-showing { opacity: 1 }` сразу при attach;
+       при persistent overlay (rt-container auto-attach) backdrop должен оставаться скрытым
+       пока aside не открыт. Два класса (.cdk-overlay-backdrop + .rt-aside-backdrop) — выше
+       specificity чем одиночный (.cdk-overlay-backdrop-showing), поэтому наш opacity:0
+       побеждает. */
+    .cdk-overlay-backdrop.rt-aside-backdrop {
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+        -webkit-backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+        backdrop-filter: blur(var(--rt-aside-backdrop-blur));
+        background: var(--rt-aside-backdrop-bg);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--rt-aside-animation-duration) ease;
 
-    &.rt-aside-backdrop--visible {
-        opacity: 1;
-        pointer-events: auto;
+        &.rt-aside-backdrop--visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
     }
-}
 
-.rt-aside-overlay {
-    height: 100dvh;
-    transition: transform var(--rt-aside-animation-duration) ease;
-}
+    .rt-aside-overlay {
+        height: 100dvh;
+        transition: transform var(--rt-aside-animation-duration) ease;
+    }
 
-/* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
-   и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
-   выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
-   чтобы правило не зависело от порядка, в котором браузер получил стили панели и
-   стили контейнера. */
-.rt-aside-overlay:not(.rt-aside-overlay--open) {
-    pointer-events: none;
-}
+    /* Закрытая панель нажатий не ловит. На узком экране она шириной во весь вьюпорт,
+       и пока её сдвиг за край экрана не досчитан, она перекрывает страницу целиком:
+       выглядит это нормально, а нажатия уходят в пустоту. Селектор из двух классов —
+       чтобы правило не зависело от порядка, в котором браузер получил стили панели и
+       стили контейнера. */
+    .rt-aside-overlay:not(.rt-aside-overlay--open) {
+        pointer-events: none;
+    }
 
-/* Стартовое положение за краем экрана не анимируется: переход из него начинается,
-   как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
-.rt-aside-overlay.rt-aside-overlay--entering {
-    transition: none;
-}
+    /* Стартовое положение за краем экрана не анимируется: переход из него начинается,
+       как только вьюпорт задаёт панели ширину, и всю анимацию держит панель на месте. */
+    .rt-aside-overlay.rt-aside-overlay--entering {
+        transition: none;
+    }
 
-/* Slide-in / slide-out states — переключаются сервисом через Renderer2 на host.
-   --entering: initial off-screen position; --open: in place; --leaving: off-screen exit. */
-.rt-aside-overlay--position-right.rt-aside-overlay--entering,
-.rt-aside-overlay--position-right.rt-aside-overlay--leaving {
-    transform: translateX(100%);
-}
+    /* Slide-in / slide-out states — переключаются сервисом через Renderer2 на host.
+       --entering: initial off-screen position; --open: in place; --leaving: off-screen exit. */
+    .rt-aside-overlay--position-right.rt-aside-overlay--entering,
+    .rt-aside-overlay--position-right.rt-aside-overlay--leaving {
+        transform: translateX(100%);
+    }
 
-.rt-aside-overlay--position-left.rt-aside-overlay--entering,
-.rt-aside-overlay--position-left.rt-aside-overlay--leaving {
-    transform: translateX(-100%);
-}
+    .rt-aside-overlay--position-left.rt-aside-overlay--entering,
+    .rt-aside-overlay--position-left.rt-aside-overlay--leaving {
+        transform: translateX(-100%);
+    }
 
-.rt-aside-overlay--position-right.rt-aside-overlay--open,
-.rt-aside-overlay--position-left.rt-aside-overlay--open {
-    transform: translateX(0);
-}
+    .rt-aside-overlay--position-right.rt-aside-overlay--open,
+    .rt-aside-overlay--position-left.rt-aside-overlay--open {
+        transform: translateX(0);
+    }
 
-@media (width <= 768px) {
-    .rt-aside-overlay {
-        overflow: hidden;
-        width: 100dvw;
-        max-width: 100dvw;
+    @media (width <= 768px) {
+        .rt-aside-overlay {
+            overflow: hidden;
+            width: 100dvw;
+            max-width: 100dvw;
+        }
     }
-}
 
-@media (prefers-reduced-motion: reduce) {
-    .rt-aside-overlay {
-        transition: none;
+    @media (prefers-reduced-motion: reduce) {
+        .rt-aside-overlay {
+            transition: none;
+        }
     }
 }

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

@@ -1,22 +1,26 @@
-/* rt-aside-footer — footer-слот side-sheet'а. ViewEncapsulation.None. */
+@layer rt-kit.components {
+    /* rt-aside-footer — footer-слот side-sheet'а. ViewEncapsulation.None. */
 
-.rt-aside-footer {
-    padding-top: var(--rt-aside-inset);
+    .rt-aside-footer {
+        --rt-aside-footer-border-width: var(--rt-border-width-thin);
 
-    /* Верхний разделитель не на всю ширину панели: margin отбивает футер по
-       горизонтали на тот же инсет, что и контентная зона, поэтому
-       border-block-start совпадает по краям с контентом. */
-    margin: var(--rt-aside-inset);
-    border-block-start: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        padding-top: var(--rt-aside-inset);
 
-    &__content {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: var(--rt-space-sm);
-    }
+        /* Верхний разделитель не на всю ширину панели: margin отбивает футер по
+           горизонтали на тот же инсет, что и контентная зона, поэтому
+           border-block-start совпадает по краям с контентом. */
+        margin: var(--rt-aside-inset);
+        border-block-start: var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle);
+
+        &__content {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            gap: var(--rt-space-sm);
+        }
 
-    &:empty {
-        display: none;
+        &:empty {
+            display: none;
+        }
     }
 }

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

@@ -1,88 +1,90 @@
-/* rt-aside-header — заголовок side-sheet'а. ViewEncapsulation.None.
-   Селекторы префиксованы `.rt-aside-header`. */
+@layer rt-kit.components {
+    /* rt-aside-header — заголовок side-sheet'а. ViewEncapsulation.None.
+       Селекторы префиксованы `.rt-aside-header`. */
 
-.rt-aside-header {
-    padding: var(--rt-aside-inset);
+    .rt-aside-header {
+        padding: var(--rt-aside-inset);
 
-    &__content {
-        display: flex;
-        min-width: 0;
-        align-items: center;
-        gap: var(--rt-space-sm);
-    }
-
-    &__back {
-        flex-shrink: 0;
-    }
-
-    /* Колонка overline + title. flex/min-width живут здесь, чтобы ellipsis
-       у title работал и в двухстрочном варианте. */
-    &__heading {
-        display: flex;
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        gap: var(--rt-space-0-5);
-    }
+        &__content {
+            display: flex;
+            min-width: 0;
+            align-items: center;
+            gap: var(--rt-space-sm);
+        }
 
-    &__overline {
-        overflow: hidden;
-        margin: 0;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        line-height: var(--rt-leading-snug);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+        &__back {
+            flex-shrink: 0;
+        }
 
-    &__title {
-        overflow: hidden;
-        min-width: 0;
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-xl);
+        /* Колонка overline + title. flex/min-width живут здесь, чтобы ellipsis
+           у title работал и в двухстрочном варианте. */
+        &__heading {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+        }
 
-        /* Ellipsis для длинного заголовка: skeleton-wrapper рендерит `{{ title }}`
-           как ng-content внутри inline-flex; чтобы `text-overflow: ellipsis`
-           cработал, нужен block-level контейнер с overflow: hidden над текстом. */
-        > rt-skeleton-wrapper {
-            display: block;
+        &__overline {
             overflow: hidden;
-            min-width: 0;
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-    }
 
-    /* Ряд бэйджей под title — переносится на новую строку при нехватке ширины. */
-    &__badges {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: var(--rt-space-1);
-        gap: var(--rt-space-xs);
-    }
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-xl);
 
-    /* Бэйдж-ссылка: тег в роли якоря (открывает тур в новой вкладке). */
-    &__badge-link {
-        display: inline-flex;
-        cursor: pointer;
-        text-decoration: none;
+            /* Ellipsis для длинного заголовка: skeleton-wrapper рендерит `{{ title }}`
+               как ng-content внутри inline-flex; чтобы `text-overflow: ellipsis`
+               cработал, нужен block-level контейнер с overflow: hidden над текстом. */
+            > rt-skeleton-wrapper {
+                display: block;
+                overflow: hidden;
+                min-width: 0;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
 
-        &:hover {
-            opacity: 0.85;
+        /* Ряд бэйджей под title — переносится на новую строку при нехватке ширины. */
+        &__badges {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: var(--rt-space-1);
+            gap: var(--rt-space-xs);
+        }
+
+        /* Бэйдж-ссылка: тег в роли якоря (открывает тур в новой вкладке). */
+        &__badge-link {
+            display: inline-flex;
+            cursor: pointer;
+            text-decoration: none;
+
+            &:hover {
+                opacity: 0.85;
+            }
         }
-    }
 
-    /* Ряд action-иконок справа от title (отклонить / на доработку / снять с
-       публикации и т.п.). Пустой при отсутствии проекции — нулевой ширины. */
-    &__actions {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        gap: var(--rt-space-xs);
+        /* Ряд action-иконок справа от title (отклонить / на доработку / снять с
+           публикации и т.п.). Пустой при отсутствии проекции — нулевой ширины. */
+        &__actions {
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            gap: var(--rt-space-xs);
 
-        &:empty {
-            display: none;
+            &:empty {
+                display: none;
+            }
         }
     }
 }

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

@@ -7,127 +7,129 @@
 
 @use './rt-aside-overlay';
 
-/* Size tokens — sm/md/lg (aside уже модалки чем rt-dialog). */
-:root {
-    --rt-aside-width-sm: 400px;
-    --rt-aside-width-md: 540px;
-    --rt-aside-width-lg: 720px;
-
-    /* Инсет панели: шапка, содержимое и футер отбиты от края одним и тем же
-       значением, поэтому поля во всех панелях одной ширины. */
-    --rt-aside-inset: var(--rt-space-lg);
-
-    /* Ритм между корневыми блоками содержимого. */
-    --rt-aside-content-gap: var(--rt-space-md);
-}
-
-/* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-aside`
-   висит и на `<rt-aside>`, и на рамке внутри него, поэтому правила рамки
-   вложены в хост. Сам хост боксом не становится: рамка должна быть прямым
-   flex-ребёнком overlay-панели. */
-rt-aside {
-    display: contents;
-}
-
-rt-aside .rt-aside {
-    display: flex;
-    width: var(--rt-aside-width, var(--rt-aside-width-md));
-
-    /* rt-aside — flex-child cdk-overlay-pane. Default `min-width: auto` у flex-item
-       заставляет ширину расти до max-content вложенного контента (длинный
-       заголовок без переносов раздул бы panel за пределы viewport). 0 — let
-       cross-axis размера контейнера ограничивать, а ellipsis в title клипает текст. */
-    min-width: 0;
-    max-width: 100%;
-    height: 100%;
-    flex-direction: column;
-    padding: 0;
-    border: none;
-    background: var(--rt-color-bg-surface);
-    color: var(--rt-color-text-primary);
-
-    /* Header / footer всегда видны, контентная часть скроллится при overflow.
-       Селекторы по тегам — `<rt-aside-header>` / `<rt-aside-footer>` это
-       Angular host-элементы, у которых нет класса `.rt-aside-header`
-       (этот класс висит на вложенном `<header>` / `<footer>` внутри них).
-       `min-height: 0` обязателен — без него flex item не сможет shrink ниже
-       intrinsic content size и overflow-y не сработает. */
-    & > rt-aside-header,
-    & > rt-aside-footer {
-        /* min-width: 0 пробрасывается флекс-детям вниз — без него заголовок с
-           неразрывным длинным текстом раздувает header/footer шире
-           cross-axis-размера контейнера и выходит за viewport. */
-        min-width: 0;
-        flex-shrink: 0;
+@layer rt-kit.components {
+    /* Size tokens — sm/md/lg (aside уже модалки чем rt-dialog). */
+    :root {
+        --rt-aside-width-sm: 400px;
+        --rt-aside-width-md: 540px;
+        --rt-aside-width-lg: 720px;
+
+        /* Инсет панели: шапка, содержимое и футер отбиты от края одним и тем же
+           значением, поэтому поля во всех панелях одной ширины. */
+        --rt-aside-inset: var(--rt-space-lg);
+
+        /* Ритм между корневыми блоками содержимого. */
+        --rt-aside-content-gap: var(--rt-space-md);
     }
 
-    /* Единственная зона содержимого: она держит инсет панели и она же
-       прокручивается. Отступы живут здесь, а не в потребителях — иначе каждая
-       панель помнит про них сама, и поля получают разную ширину. */
-    &__content {
-        display: flex;
-        min-width: 0;
-        min-height: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        padding: var(--rt-aside-inset);
-        gap: var(--rt-aside-content-gap);
-        overflow-y: auto;
-        overscroll-behavior: contain;
+    /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-aside`
+       висит и на `<rt-aside>`, и на рамке внутри него, поэтому правила рамки
+       вложены в хост. Сам хост боксом не становится: рамка должна быть прямым
+       flex-ребёнком overlay-панели. */
+    rt-aside {
+        display: contents;
     }
 
-    &--size--sm {
-        width: var(--rt-aside-width, var(--rt-aside-width-sm));
-    }
-
-    &--size--md {
+    rt-aside .rt-aside {
+        display: flex;
         width: var(--rt-aside-width, var(--rt-aside-width-md));
-    }
-
-    &--size--lg {
-        width: var(--rt-aside-width, var(--rt-aside-width-lg));
-    }
 
-    /* Контент — rt-tabs: скроллером становится контент активной вкладки, а не
-       контентная зона асайда, чтобы полоса вкладок оставалась прибитой. */
-    &--content--tabs {
-        /* Контентная зона больше не скроллер, но её горизонтальный инсет СОХРАНЯЕМ:
-           прямой контент вне rt-tabs (скелетоны загрузки, rt-message ошибки) должен
-           отступать от краёв как обычно. Снимаем только нижний отступ. */
-        .rt-aside__content {
-            overflow: hidden;
-            padding-block-end: 0;
+        /* rt-aside — flex-child cdk-overlay-pane. Default `min-width: auto` у flex-item
+           заставляет ширину расти до max-content вложенного контента (длинный
+           заголовок без переносов раздул бы panel за пределы viewport). 0 — let
+           cross-axis размера контейнера ограничивать, а ellipsis в title клипает текст. */
+        min-width: 0;
+        max-width: 100%;
+        height: 100%;
+        flex-direction: column;
+        padding: 0;
+        border: none;
+        background: var(--rt-color-bg-surface);
+        color: var(--rt-color-text-primary);
+
+        /* Header / footer всегда видны, контентная часть скроллится при overflow.
+           Селекторы по тегам — `<rt-aside-header>` / `<rt-aside-footer>` это
+           Angular host-элементы, у которых нет класса `.rt-aside-header`
+           (этот класс висит на вложенном `<header>` / `<footer>` внутри них).
+           `min-height: 0` обязателен — без него flex item не сможет shrink ниже
+           intrinsic content size и overflow-y не сработает. */
+        & > rt-aside-header,
+        & > rt-aside-footer {
+            /* min-width: 0 пробрасывается флекс-детям вниз — без него заголовок с
+               неразрывным длинным текстом раздувает header/footer шире
+               cross-axis-размера контейнера и выходит за viewport. */
+            min-width: 0;
+            flex-shrink: 0;
         }
 
-        /* rt-tabs растягивается на всю ширину панели (гасит инсет контентной зоны),
-           а инсет возвращается ВНУТРЬ полосы и скролл-контейнера. Так overflow
-           скролл-контейнера не режет focus-ring инпутов, прижатых к краю, а полоса
-           и контент остаются в коридоре --rt-aside-inset. */
-        rt-tabs {
+        /* Единственная зона содержимого: она держит инсет панели и она же
+           прокручивается. Отступы живут здесь, а не в потребителях — иначе каждая
+           панель помнит про них сама, и поля получают разную ширину. */
+        &__content {
+            display: flex;
+            min-width: 0;
             min-height: 0;
             flex: 1 1 auto;
-            margin-inline: calc(-1 * var(--rt-aside-inset));
+            flex-direction: column;
+            padding: var(--rt-aside-inset);
+            gap: var(--rt-aside-content-gap);
+            overflow-y: auto;
+            overscroll-behavior: contain;
         }
 
-        .rt-tabs__header {
-            padding-inline: var(--rt-aside-inset);
+        &--size--sm {
+            width: var(--rt-aside-width, var(--rt-aside-width-sm));
         }
 
-        .rt-tabs__content {
-            /* Нижний отступ внутри скроллера — последний элемент не докручивается
-               вплотную к футеру. */
-            padding-bottom: var(--rt-aside-inset);
-            padding-inline: var(--rt-aside-inset);
+        &--size--md {
+            width: var(--rt-aside-width, var(--rt-aside-width-md));
+        }
+
+        &--size--lg {
+            width: var(--rt-aside-width, var(--rt-aside-width-lg));
+        }
+
+        /* Контент — rt-tabs: скроллером становится контент активной вкладки, а не
+           контентная зона асайда, чтобы полоса вкладок оставалась прибитой. */
+        &--content--tabs {
+            /* Контентная зона больше не скроллер, но её горизонтальный инсет СОХРАНЯЕМ:
+               прямой контент вне rt-tabs (скелетоны загрузки, rt-message ошибки) должен
+               отступать от краёв как обычно. Снимаем только нижний отступ. */
+            .rt-aside__content {
+                overflow: hidden;
+                padding-block-end: 0;
+            }
+
+            /* rt-tabs растягивается на всю ширину панели (гасит инсет контентной зоны),
+               а инсет возвращается ВНУТРЬ полосы и скролл-контейнера. Так overflow
+               скролл-контейнера не режет focus-ring инпутов, прижатых к краю, а полоса
+               и контент остаются в коридоре --rt-aside-inset. */
+            rt-tabs {
+                min-height: 0;
+                flex: 1 1 auto;
+                margin-inline: calc(-1 * var(--rt-aside-inset));
+            }
+
+            .rt-tabs__header {
+                padding-inline: var(--rt-aside-inset);
+            }
+
+            .rt-tabs__content {
+                /* Нижний отступ внутри скроллера — последний элемент не докручивается
+                   вплотную к футеру. */
+                padding-bottom: var(--rt-aside-inset);
+                padding-inline: var(--rt-aside-inset);
+            }
         }
     }
-}
 
-@media (width <= 768px) {
-    rt-aside .rt-aside,
-    rt-aside .rt-aside--size--sm,
-    rt-aside .rt-aside--size--md,
-    rt-aside .rt-aside--size--lg {
-        width: 100dvw;
-        max-width: 100dvw;
+    @media (width <= 768px) {
+        rt-aside .rt-aside,
+        rt-aside .rt-aside--size--sm,
+        rt-aside .rt-aside--size--md,
+        rt-aside .rt-aside--size--lg {
+            width: 100dvw;
+            max-width: 100dvw;
+        }
     }
 }