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

package/src/lib/components/date-picker/rt-date-picker.component.scss

@@ -1,89 +1,91 @@
-.rt-date-picker {
-    position: relative;
-    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);
+@layer rt-kit.components {
+    .rt-date-picker {
+        position: relative;
+        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 {
+            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-рамку; invalid/focus/readonly идут
-       ниже по source-order и перекрывают её своей рамкой. */
-    &--borderless {
-        border-color: transparent;
-    }
+        /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+           ниже по source-order и перекрывают её своей рамкой. */
+        &--borderless {
+            border-color: transparent;
+        }
 
-    &--invalid {
-        border-color: var(--rt-input-color-border-error);
+        &--invalid {
+            border-color: var(--rt-input-color-border-error);
 
-        &:focus-within {
-            box-shadow: var(--rt-input-focus-shadow-error);
+            &:focus-within {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
         }
-    }
 
-    &--disabled {
-        cursor: not-allowed;
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    &--size--sm {
-        min-height: var(--rt-input-height-sm);
-    }
+        &--size--sm {
+            min-height: var(--rt-input-height-sm);
+        }
 
-    &--size--lg {
-        min-height: var(--rt-input-height-lg);
-    }
+        &--size--lg {
+            min-height: var(--rt-input-height-lg);
+        }
 
-    /* Read-only: дата как плоский текст — снимаем рамку/фон/паддинги. */
-    &--readonly {
-        padding-right: 0;
-        padding-left: 0;
-        border-color: transparent;
-        background-color: transparent;
-        cursor: default;
-    }
+        /* Read-only: дата как плоский текст — снимаем рамку/фон/паддинги. */
+        &--readonly {
+            padding-right: 0;
+            padding-left: 0;
+            border-color: transparent;
+            background-color: transparent;
+            cursor: default;
+        }
 
-    &__readonly {
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
+        &__readonly {
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
-    }
 
-    &__field {
-        min-width: 0;
-        flex: 1 1 auto;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: inherit;
-        font: inherit;
-        outline: none;
+        &__field {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            outline: none;
 
-        &:disabled {
-            cursor: not-allowed;
+            &:disabled {
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &__clear {
-        flex-shrink: 0;
+        &__clear {
+            flex-shrink: 0;
+        }
     }
 }

package/src/lib/components/delta-view/rt-delta-view.component.scss

@@ -1,31 +1,33 @@
-.rt-delta-view {
-    display: block;
+@layer rt-kit.components {
+    .rt-delta-view {
+        display: block;
 
-    p,
-    ul,
-    ol,
-    blockquote,
-    pre,
-    h1,
-    h2,
-    h3 {
-        margin: 0;
-    }
+        p,
+        ul,
+        ol,
+        blockquote,
+        pre,
+        h1,
+        h2,
+        h3 {
+            margin: 0;
+        }
 
-    ul,
-    ol {
-        padding-inline-start: var(--rt-space-lg);
-    }
+        ul,
+        ol {
+            padding-inline-start: var(--rt-space-lg);
+        }
 
-    blockquote {
-        border-inline-start: 1px solid var(--rt-color-border-default);
-        color: var(--rt-color-text-muted);
-        padding-inline-start: var(--rt-space-sm);
-    }
+        blockquote {
+            border-inline-start: 1px solid var(--rt-color-border-default);
+            color: var(--rt-color-text-muted);
+            padding-inline-start: var(--rt-space-sm);
+        }
 
-    pre {
-        margin: 0;
-        font-family: monospace;
-        white-space: pre-wrap;
+        pre {
+            margin: 0;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
     }
 }

package/src/lib/components/detail-list/rt-detail-list.component.scss

@@ -1,8 +1,10 @@
-/* rt-detail-list — контейнер read-only строк деталей (ViewEncapsulation.None).
-   Селектор bare `.rt-detail-list` (класс на host). */
+@layer rt-kit.components {
+    /* rt-detail-list — контейнер read-only строк деталей (ViewEncapsulation.None).
+       Селектор bare `.rt-detail-list` (класс на host). */
 
-.rt-detail-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--rt-space-md);
+    .rt-detail-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-md);
+    }
 }

package/src/lib/components/detail-list/rt-detail-row.component.scss

@@ -1,21 +1,23 @@
-/* rt-detail-row — stacked строка «лейбл + значение» (ViewEncapsulation.None).
-   Селектор bare `.rt-detail-row` (класс на host). Типографика лейбла и значения
-   берётся из тех же `--rt-field-*` токенов, что и `rt-field`, — read-only строка
-   и редактируемое поле в одной секции выглядят одинаково. */
+@layer rt-kit.components {
+    /* rt-detail-row — stacked строка «лейбл + значение» (ViewEncapsulation.None).
+       Селектор bare `.rt-detail-row` (класс на host). Типографика лейбла и значения
+       берётся из тех же `--rt-field-*` токенов, что и `rt-field`, — read-only строка
+       и редактируемое поле в одной секции выглядят одинаково. */
 
-.rt-detail-row {
-    display: flex;
-    flex-direction: column;
-    gap: var(--rt-field-gap);
+    .rt-detail-row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-field-gap);
 
-    &__label {
-        color: var(--rt-field-label-color);
-        font-size: var(--rt-field-label-font-size);
-        font-weight: var(--rt-field-label-font-weight);
-    }
+        &__label {
+            color: var(--rt-field-label-color);
+            font-size: var(--rt-field-label-font-size);
+            font-weight: var(--rt-field-label-font-weight);
+        }
 
-    &__value {
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
+        &__value {
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
+        }
     }
 }

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

@@ -1,24 +1,26 @@
-/* rt-dialog-footer — footer-слот модалки. ViewEncapsulation.None.
+@layer rt-kit.components {
+    /* rt-dialog-footer — footer-слот модалки. ViewEncapsulation.None.
 
-   Хост адресуется по имени элемента, а не по классу блока: класс
-   `.rt-dialog-footer` висит и на `<rt-dialog-footer>`, и на `<footer>` внутри
-   него. Правило на голом классе доставалось обоим — кнопки прижимались к правому
-   краю не окна, а строки по содержимому, и разделитель рисовался дважды. Заодно
-   `:empty` теперь спрашивается у `<footer>`, а не у хоста: у хоста внутри всегда
-   лежит `<footer>`, и пустым он не бывал никогда. */
+       Хост адресуется по имени элемента, а не по классу блока: класс
+       `.rt-dialog-footer` висит и на `<rt-dialog-footer>`, и на `<footer>` внутри
+       него. Правило на голом классе доставалось обоим — кнопки прижимались к правому
+       краю не окна, а строки по содержимому, и разделитель рисовался дважды. Заодно
+       `:empty` теперь спрашивается у `<footer>`, а не у хоста: у хоста внутри всегда
+       лежит `<footer>`, и пустым он не бывал никогда. */
 
-rt-dialog-footer {
-    display: contents;
+    rt-dialog-footer {
+        display: contents;
 
-    .rt-dialog-footer {
-        display: flex;
-        justify-content: flex-end;
-        padding: var(--rt-space-lg);
-        border-block-start: 1px solid var(--rt-color-border-subtle);
-        gap: var(--rt-space-sm);
+        .rt-dialog-footer {
+            display: flex;
+            justify-content: flex-end;
+            padding: var(--rt-space-lg);
+            border-block-start: 1px solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-sm);
 
-        &:empty {
-            display: none;
+            &:empty {
+                display: none;
+            }
         }
     }
 }

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

@@ -1,33 +1,35 @@
-/* rt-dialog-header — заголовок модалки. ViewEncapsulation.None.
-   Селекторы префиксованы `.rt-dialog-header`.
+@layer rt-kit.components {
+    /* rt-dialog-header — заголовок модалки. ViewEncapsulation.None.
+       Селекторы префиксованы `.rt-dialog-header`.
 
-   Хост адресуется по имени элемента, а не по классу блока: класс
-   `.rt-dialog-header` висит и на `<rt-dialog-header>`, и на `<header>` внутри
-   него. Правило на голом классе доставалось обоим — хост становился flex-строкой,
-   а `<header>` внутри неё сжимался по содержимому: заголовок и крестик стояли
-   вплотную вместо краёв окна, и разделитель рисовался дважды, двумя линиями
-   разной длины. Хост боксом не становится: строка шапки должна быть прямым
-   flex-ребёнком рамки окна. */
+       Хост адресуется по имени элемента, а не по классу блока: класс
+       `.rt-dialog-header` висит и на `<rt-dialog-header>`, и на `<header>` внутри
+       него. Правило на голом классе доставалось обоим — хост становился flex-строкой,
+       а `<header>` внутри неё сжимался по содержимому: заголовок и крестик стояли
+       вплотную вместо краёв окна, и разделитель рисовался дважды, двумя линиями
+       разной длины. Хост боксом не становится: строка шапки должна быть прямым
+       flex-ребёнком рамки окна. */
 
-rt-dialog-header {
-    display: contents;
+    rt-dialog-header {
+        display: contents;
 
-    .rt-dialog-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--rt-space-lg);
-        border-block-end: 1px solid var(--rt-color-border-subtle);
-        gap: var(--rt-space-sm);
+        .rt-dialog-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-lg);
+            border-block-end: 1px solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-sm);
 
-        &__title {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-xl);
-        }
+            &__title {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-xl);
+            }
 
-        &__close {
-            margin-inline-start: auto;
+            &__close {
+                margin-inline-start: auto;
+            }
         }
     }
 }

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

@@ -1,66 +1,69 @@
-/* rt-dialog — styled frame модалки поверх CDK Overlay.
-   ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
-   Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
+@layer rt-kit.components {
+    /* rt-dialog — styled frame модалки поверх CDK Overlay.
+       ViewEncapsulation.None — селекторы префиксованы `.rt-dialog`.
+       Видимость / backdrop / focus-trap обеспечивает CDK Overlay через RtDialogService. */
 
-/* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-dialog`
-   висит и на `<rt-dialog>`, и на рамке внутри него, поэтому правила рамки
-   вложены в хост — так они достаются только рамке. Сам хост боксом не
-   становится: рамка должна быть прямым flex-ребёнком overlay-панели. */
-rt-dialog {
-    display: contents;
-}
-
-/* Size tokens — sm/md/lg.
-   Component-локальные tokens для backdrop/shadow держим в :root, чтобы
-   feature-консьюмеры могли переопределить per-instance через --rt-dialog-*. */
-:root {
-    --rt-dialog-width-sm: 460px;
-    --rt-dialog-width-md: 660px;
-    --rt-dialog-width-lg: 860px;
-    --rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);
-    --rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);
-    --rt-dialog-backdrop-blur: 5px;
-}
-
-rt-dialog .rt-dialog {
-    display: flex;
-    overflow: hidden;
-    width: var(--rt-dialog-width, var(--rt-dialog-width-md));
-    max-width: 90dvw;
-    max-height: 90dvh;
-    flex-direction: column;
-    padding: 0;
-    border: none;
-    border-radius: var(--rt-radius-xl, 15px);
-    background: var(--rt-color-bg-surface);
-    box-shadow: var(--rt-dialog-shadow);
-    color: var(--rt-color-text-primary);
+    /* Хост адресуется по имени элемента, а не по классу блока: класс `.rt-dialog`
+       висит и на `<rt-dialog>`, и на рамке внутри него, поэтому правила рамки
+       вложены в хост — так они достаются только рамке. Сам хост боксом не
+       становится: рамка должна быть прямым flex-ребёнком overlay-панели. */
+    rt-dialog {
+        display: contents;
+    }
 
-    &--size--sm {
-        width: var(--rt-dialog-width, var(--rt-dialog-width-sm));
+    /* Size tokens — sm/md/lg.
+       Component-локальные tokens для backdrop/shadow держим в :root, чтобы
+       feature-консьюмеры могли переопределить per-instance через --rt-dialog-*. */
+    :root {
+        --rt-dialog-width-sm: 460px;
+        --rt-dialog-width-md: 660px;
+        --rt-dialog-width-lg: 860px;
+        --rt-dialog-shadow: var(--rt-shadow-dialog);
+        --rt-dialog-radius: var(--rt-radius-xl);
+        --rt-dialog-backdrop-bg: var(--rt-overlay-navy-70);
+        --rt-dialog-backdrop-blur: 5px;
     }
 
-    &--size--md {
+    rt-dialog .rt-dialog {
+        display: flex;
+        overflow: hidden;
         width: var(--rt-dialog-width, var(--rt-dialog-width-md));
-    }
+        max-width: 90dvw;
+        max-height: 90dvh;
+        flex-direction: column;
+        padding: 0;
+        border: none;
+        border-radius: var(--rt-dialog-radius);
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-dialog-shadow);
+        color: var(--rt-color-text-primary);
 
-    &--size--lg {
-        width: var(--rt-dialog-width, var(--rt-dialog-width-lg));
+        &--size--sm {
+            width: var(--rt-dialog-width, var(--rt-dialog-width-sm));
+        }
+
+        &--size--md {
+            width: var(--rt-dialog-width, var(--rt-dialog-width-md));
+        }
+
+        &--size--lg {
+            width: var(--rt-dialog-width, var(--rt-dialog-width-lg));
+        }
     }
-}
 
-/* CDK Overlay backdrop + panel classes, выставляемые RtDialogService.
-   Live в global scope — overlay-container — sibling от <body>,
-   encapsulation не работает. */
-.rt-dialog-backdrop {
-    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-    -webkit-backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
-    backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
-    background: var(--rt-dialog-backdrop-bg);
-}
+    /* CDK Overlay backdrop + panel classes, выставляемые RtDialogService.
+       Live в global scope — overlay-container — sibling от <body>,
+       encapsulation не работает. */
+    .rt-dialog-backdrop {
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
+        -webkit-backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
+        backdrop-filter: blur(var(--rt-dialog-backdrop-blur));
+        background: var(--rt-dialog-backdrop-bg);
+    }
 
-.rt-dialog-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    .rt-dialog-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }

package/src/lib/components/download-link/rt-download-link.component.scss

@@ -1,35 +1,40 @@
-.rt-download-link {
-    display: inline-flex;
+@layer rt-kit.components {
+    .rt-download-link {
+        --rt-download-link-focus-radius: var(--rt-radius-sm);
+        --rt-download-link-focus-shadow: var(--rt-shadow-focus-ring);
 
-    &__button {
         display: inline-flex;
-        align-items: center;
-        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);
-        gap: var(--rt-space-sm);
-        line-height: var(--rt-leading-snug);
 
-        &:hover {
-            text-decoration: underline;
-        }
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            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);
+            gap: var(--rt-space-sm);
+            line-height: var(--rt-leading-snug);
+
+            &:hover {
+                text-decoration: underline;
+            }
 
-        /* Своей рамки у кнопки нет — она нарисована как ссылка, и умолчательный контур
-           браузер снимает вместе с рамкой. Без этого правила место фокуса с клавиатуры
-           не видно вовсе: кнопка выглядит одинаково выбранной и невыбранной. */
-        &:focus-visible {
-            border-radius: var(--rt-radius-sm);
-            box-shadow: var(--rt-shadow-focus-ring);
-            outline: none;
+            /* Своей рамки у кнопки нет — она нарисована как ссылка, и умолчательный контур
+               браузер снимает вместе с рамкой. Без этого правила место фокуса с клавиатуры
+               не видно вовсе: кнопка выглядит одинаково выбранной и невыбранной. */
+            &:focus-visible {
+                border-radius: var(--rt-download-link-focus-radius);
+                box-shadow: var(--rt-download-link-focus-shadow);
+                outline: none;
+            }
         }
-    }
 
-    &__icon {
-        color: var(--rt-color-text-link);
+        &__icon {
+            color: var(--rt-color-text-link);
+        }
     }
 }