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

package/src/lib/components/split-button/rt-split-button.component.scss

@@ -1,77 +1,89 @@
-/* rt-split-button — основной CTA + каретка с меню второстепенных действий.
-   ViewEncapsulation.None: селекторы префиксованы `.rt-split-button`. Меню
-   рендерится в CDK Overlay, поэтому `__menu` стилизуется глобально (вне host'а). */
+@layer rt-kit.components {
+    /* rt-split-button — основной CTA + каретка с меню второстепенных действий.
+       ViewEncapsulation.None: селекторы префиксованы `.rt-split-button`. Меню
+       рендерится в CDK Overlay, поэтому `__menu` стилизуется глобально (вне host'а). */
 
-.rt-split-button {
-    display: inline-flex;
+    .rt-split-button {
+        --rt-split-button-divider-width: var(--rt-border-width-thin);
+        --rt-split-button-caret-transition-duration: var(--rt-duration-fast);
 
-    /* Контрол — origin popover'а (width="trigger" берёт его ширину) и flex-ряд
-       лица + каретки. */
-    &__control {
         display: inline-flex;
-        width: 100%;
-        align-items: stretch;
-    }
 
-    /* Лицо и каретка сшиты в один контрол: смежные углы выпрямлены,
-       каретку отделяет тонкий делитель. */
-    &__face.rt-button {
-        border-end-end-radius: 0;
-        border-start-end-radius: 0;
-    }
+        /* Контрол — origin popover'а (width="trigger" берёт его ширину) и flex-ряд
+           лица + каретки. */
+        &__control {
+            display: inline-flex;
+            width: 100%;
+            align-items: stretch;
+        }
 
-    &__toggle.rt-button {
-        min-width: 0;
-        border-end-start-radius: 0;
-        border-inline-start: var(--rt-border-width-thin) solid color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
-        border-start-start-radius: 0;
-        padding-inline: var(--rt-space-sm);
+        /* Лицо и каретка сшиты в один контрол: смежные углы выпрямлены,
+           каретку отделяет тонкий делитель. */
+        &__face.rt-button {
+            border-end-end-radius: 0;
+            border-start-end-radius: 0;
+        }
 
-        /* Шеврон наследует цвет текста кнопки: svg `.rt-button__icon` без
-           `fill: currentColor` тянет дефолтный чёрный, не цвет лейбла. */
-        .rt-button__icon {
-            fill: currentcolor;
-            transition: transform var(--rt-duration-fast) ease;
+        &__toggle.rt-button {
+            min-width: 0;
+            border-end-start-radius: 0;
+            border-inline-start: var(--rt-split-button-divider-width) solid
+                color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
+            border-start-start-radius: 0;
+            padding-inline: var(--rt-space-sm);
+
+            /* Шеврон наследует цвет текста кнопки: svg `.rt-button__icon` без
+               `fill: currentColor` тянет дефолтный чёрный, не цвет лейбла. */
+            .rt-button__icon {
+                fill: currentcolor;
+                transition: transform var(--rt-split-button-caret-transition-duration) ease;
+            }
         }
-    }
 
-    /* Открытое меню — шеврон смотрит вверх (как у select/multiselect). */
-    &--open &__toggle.rt-button .rt-button__icon {
-        transform: rotate(180deg);
-    }
+        /* Открытое меню — шеврон смотрит вверх (как у select/multiselect). */
+        &--open &__toggle.rt-button .rt-button__icon {
+            transform: rotate(180deg);
+        }
 
-    /* Меню (overlay). width="trigger" задаёт ширину панели = ширине контрола,
-       поэтому меню тянется на 100% и box-sizing учитывает падинг. */
-    &__menu {
-        display: flex;
-        width: 100%;
-        box-sizing: border-box;
-        flex-direction: column;
-        padding: var(--rt-space-2xs);
-        border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-radius-md);
-        margin: 0;
-        background: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-shadow-lg);
-        gap: var(--rt-space-2xs);
-        list-style: none;
-    }
+        /* Меню (overlay). width="trigger" задаёт ширину панели = ширине контрола,
+           поэтому меню тянется на 100% и box-sizing учитывает падинг. */
+        &__menu {
+            /* Меню рисуется в CDK Overlay, вне поддерева блока: свойства
+               объявляются на нём самом — с корня блока они бы не докатились. */
+            --rt-split-button-menu-radius: var(--rt-radius-md);
+            --rt-split-button-menu-border-width: var(--rt-border-width-thin);
+            --rt-split-button-menu-shadow: var(--rt-shadow-lg);
 
-    /* Ширину пункту задаёт панель, а не его текст: `width="trigger"` держит её равной
-       кнопке. Пункт длиннее обязан обрезаться, иначе лейбл вылезает за скруглённую
-       рамку панели и висит в воздухе. Многоточие требует блочного лейбла: у
-       `inline-flex` `text-overflow` не работает — текст внутри становится анонимным
-       flex-элементом, и обрезка проходит без знака. */
-    &__menu-item.rt-button {
-        overflow: hidden;
-        width: 100%;
-        justify-content: flex-start;
+            display: flex;
+            width: 100%;
+            box-sizing: border-box;
+            flex-direction: column;
+            padding: var(--rt-space-2xs);
+            border: var(--rt-split-button-menu-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-split-button-menu-radius);
+            margin: 0;
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-split-button-menu-shadow);
+            gap: var(--rt-space-2xs);
+            list-style: none;
+        }
 
-        .rt-button__label {
-            display: block;
+        /* Ширину пункту задаёт панель, а не его текст: `width="trigger"` держит её равной
+           кнопке. Пункт длиннее обязан обрезаться, иначе лейбл вылезает за скруглённую
+           рамку панели и висит в воздухе. Многоточие требует блочного лейбла: у
+           `inline-flex` `text-overflow` не работает — текст внутри становится анонимным
+           flex-элементом, и обрезка проходит без знака. */
+        &__menu-item.rt-button {
             overflow: hidden;
-            min-width: 0;
-            text-overflow: ellipsis;
+            width: 100%;
+            justify-content: flex-start;
+
+            .rt-button__label {
+                display: block;
+                overflow: hidden;
+                min-width: 0;
+                text-overflow: ellipsis;
+            }
         }
     }
 }

package/src/lib/components/stat-tile/rt-stat-tile.component.scss

@@ -1,111 +1,115 @@
-/* rt-stat-tile — KPI-плитка в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stat-tile` висит
-   и на `<rt-stat-tile>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона.
+@layer rt-kit.components {
+    /* rt-stat-tile — KPI-плитка в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stat-tile` висит
+       и на `<rt-stat-tile>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона.
 
-   Рамку и фон плитка не рисует: плитки стоят рядом внутри одной карточки, а
-   разделители между ними — забота контейнера. */
+       Рамку и фон плитка не рисует: плитки стоят рядом внутри одной карточки, а
+       разделители между ними — забота контейнера. */
 
-rt-stat-tile {
-    display: block;
+    rt-stat-tile {
+        display: block;
 
-    .rt-stat-tile {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        gap: var(--rt-space-2);
+        .rt-stat-tile {
+            --rt-stat-tile-year-radius: var(--rt-radius-sm);
 
-        &__head {
             display: flex;
-            align-items: center;
-            gap: var(--rt-space-1);
-        }
-
-        &__label {
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-sm);
-            font-weight: var(--rt-font-weight-semibold);
-        }
-
-        &__hint {
-            color: var(--rt-color-text-muted);
-            cursor: help;
-        }
+            height: 100%;
+            flex-direction: column;
+            gap: var(--rt-space-2);
+
+            &__head {
+                display: flex;
+                align-items: center;
+                gap: var(--rt-space-1);
+            }
 
-        &__value-row {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: var(--rt-space-3);
-        }
+            &__label {
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                font-weight: var(--rt-font-weight-semibold);
+            }
 
-        &__value {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-3xl);
-            font-weight: var(--rt-font-weight-bold);
-            line-height: var(--rt-leading-none);
-        }
+            &__hint {
+                color: var(--rt-color-text-muted);
+                cursor: help;
+            }
 
-        &__delta {
-            display: inline-flex;
-            align-items: center;
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-md);
-            font-weight: var(--rt-font-weight-bold);
-            gap: var(--rt-space-1);
-            line-height: var(--rt-leading-none);
-
-            &--direction--up {
-                color: var(--rt-color-state-success);
+            &__value-row {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: var(--rt-space-4);
             }
 
-            &--direction--down {
-                color: var(--rt-color-state-danger);
+            &__value {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-3xl);
+                font-weight: var(--rt-font-weight-bold);
+                line-height: var(--rt-leading-none);
             }
-        }
 
-        &__year {
-            flex: 0 0 auto;
-            padding: var(--rt-space-0-5) var(--rt-space-1-5);
-            border-radius: var(--rt-radius-sm);
-            background: var(--rt-color-bg-surface-subtle);
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-xs);
-            font-weight: var(--rt-font-weight-semibold);
-            line-height: var(--rt-leading-none);
-            white-space: nowrap;
-
-            &--direction--up {
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+            &__delta {
+                display: inline-flex;
+                align-items: center;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-md);
+                font-weight: var(--rt-font-weight-bold);
+                gap: var(--rt-space-1);
+                line-height: var(--rt-leading-none);
+
+                &--direction--up {
+                    color: var(--rt-color-state-success);
+                }
+
+                &--direction--down {
+                    color: var(--rt-color-state-danger);
+                }
             }
 
-            &--direction--down {
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+            &__year {
+                flex: 0 0 auto;
+                padding: var(--rt-space-0-5) var(--rt-space-2);
+                border-radius: var(--rt-stat-tile-year-radius);
+                background: var(--rt-color-bg-surface-subtle);
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                font-weight: var(--rt-font-weight-semibold);
+                line-height: var(--rt-leading-none);
+                white-space: nowrap;
+
+                &--direction--up {
+                    background: var(--rt-color-state-success-bg);
+                    color: var(--rt-color-state-success);
+                }
+
+                &--direction--down {
+                    background: var(--rt-color-state-danger-bg);
+                    color: var(--rt-color-state-danger);
+                }
             }
-        }
 
-        &__baseline {
-            overflow: hidden;
-            margin: 0;
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-sm);
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+            &__baseline {
+                overflow: hidden;
+                margin: 0;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-sm);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
 
-        /* Вторичная метрика прижата к низу: строки «было …» может не быть,
-           и без прижатия плитки в ряду разъезжались бы по базовой линии. */
-        &__secondary {
-            overflow: hidden;
-            margin: 0;
-            margin-top: auto;
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-xs);
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            /* Вторичная метрика прижата к низу: строки «было …» может не быть,
+               и без прижатия плитки в ряду разъезжались бы по базовой линии. */
+            &__secondary {
+                overflow: hidden;
+                margin: 0;
+                margin-top: auto;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
     }
 }

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

@@ -1,119 +1,125 @@
-/* rt-stepper — линейный прогресс-степпер в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stepper` висит
-   и на `<rt-stepper>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
-
-rt-stepper {
-    display: block;
-
-    .rt-stepper {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-3);
-
-        &__rail {
-            position: relative;
-            block-size: 39px;
-        }
-
-        &__label {
-            position: absolute;
-            margin: 0;
-            color: var(--rt-color-stepper-current);
-            font-size: var(--rt-text-xs);
-            font-weight: var(--rt-font-weight-regular);
-            inset-block-start: 0;
-            letter-spacing: var(--rt-letter-spacing-wide);
-            line-height: var(--rt-leading-none);
-            transition: left var(--rt-duration-fast) ease-out;
-            white-space: nowrap;
-
-            /* Подпись висит над активной точкой (`left` задаётся инлайном):
-               на крайних шагах прижимаем к краю точки, иначе центрируем. */
-            &--anchor--start {
-                transform: translateX(0);
-            }
+@layer rt-kit.components {
+    /* rt-stepper — линейный прогресс-степпер в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-stepper` висит
+       и на `<rt-stepper>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-            &--anchor--center {
-                transform: translateX(-50%);
-            }
+    rt-stepper {
+        display: block;
 
-            &--anchor--end {
-                transform: translateX(-100%);
-            }
-        }
+        .rt-stepper {
+            --rt-stepper-radius: var(--rt-radius-full);
+            --rt-stepper-point-shadow: var(--rt-shadow-step-indicator);
+            --rt-stepper-transition-duration: var(--rt-duration-fast);
 
-        &__track-band {
-            position: absolute;
             display: flex;
-            align-items: center;
-            block-size: 16px;
-            inset-block-end: 0;
-            inset-inline: 0;
-        }
+            flex-direction: column;
+            gap: var(--rt-space-4);
 
-        &__track,
-        &__progress {
-            position: absolute;
-            border-radius: var(--rt-radius-full);
-            block-size: 2px;
-            inset-block-start: 50%;
-            inset-inline-start: 0;
-            transform: translateY(-50%);
-        }
+            &__rail {
+                position: relative;
+                block-size: 39px;
+            }
 
-        &__track {
-            background: var(--rt-color-stepper-track);
-            inset-inline-end: 0;
-        }
+            &__label {
+                position: absolute;
+                margin: 0;
+                color: var(--rt-color-stepper-current);
+                font-size: var(--rt-text-xs);
+                font-weight: var(--rt-font-weight-regular);
+                inset-block-start: 0;
+                letter-spacing: var(--rt-letter-spacing-wide);
+                line-height: var(--rt-leading-none);
+                transition: left var(--rt-stepper-transition-duration) ease-out;
+                white-space: nowrap;
+
+                /* Подпись висит над активной точкой (`left` задаётся инлайном):
+                   на крайних шагах прижимаем к краю точки, иначе центрируем. */
+                &--anchor--start {
+                    transform: translateX(0);
+                }
+
+                &--anchor--center {
+                    transform: translateX(-50%);
+                }
+
+                &--anchor--end {
+                    transform: translateX(-100%);
+                }
+            }
 
-        &__progress {
-            background: var(--rt-color-stepper-progress);
-            transition: width var(--rt-duration-fast) ease-out;
-        }
+            &__track-band {
+                position: absolute;
+                display: flex;
+                align-items: center;
+                block-size: 16px;
+                inset-block-end: 0;
+                inset-inline: 0;
+            }
 
-        &__points {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0;
-            margin: 0;
-            inline-size: 100%;
-            list-style: none;
-        }
+            &__track,
+            &__progress {
+                position: absolute;
+                border-radius: var(--rt-stepper-radius);
+                block-size: 2px;
+                inset-block-start: 50%;
+                inset-inline-start: 0;
+                transform: translateY(-50%);
+            }
 
-        &__point {
-            border-radius: var(--rt-radius-full);
-            background: var(--rt-color-stepper-track);
-            block-size: 8px;
-            inline-size: 8px;
-            transition:
-                inline-size var(--rt-duration-fast) ease-out,
-                block-size var(--rt-duration-fast) ease-out,
-                background var(--rt-duration-fast) ease-out;
-
-            &--complete {
+            &__track {
+                background: var(--rt-color-stepper-track);
+                inset-inline-end: 0;
+            }
+
+            &__progress {
                 background: var(--rt-color-stepper-progress);
+                transition: width var(--rt-stepper-transition-duration) ease-out;
             }
 
-            &--current {
-                background: var(--rt-color-stepper-current);
-                block-size: 16px;
-                box-shadow: var(--rt-shadow-step-indicator);
-                inline-size: 16px;
+            &__points {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0;
+                margin: 0;
+                inline-size: 100%;
+                list-style: none;
+            }
+
+            &__point {
+                border-radius: var(--rt-stepper-radius);
+                background: var(--rt-color-stepper-track);
+                block-size: 8px;
+                inline-size: 8px;
+                transition:
+                    inline-size var(--rt-stepper-transition-duration) ease-out,
+                    block-size var(--rt-stepper-transition-duration) ease-out,
+                    background var(--rt-stepper-transition-duration) ease-out;
+
+                &--complete {
+                    background: var(--rt-color-stepper-progress);
+                }
+
+                &--current {
+                    background: var(--rt-color-stepper-current);
+                    block-size: 16px;
+                    box-shadow: var(--rt-stepper-point-shadow);
+                    inline-size: 16px;
+                }
             }
-        }
 
-        &__description {
-            margin: 0;
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-xs);
-            letter-spacing: var(--rt-letter-spacing-wide);
-            line-height: var(--rt-leading-snug);
+            &__description {
+                margin: 0;
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-xs);
+                letter-spacing: var(--rt-letter-spacing-wide);
+                line-height: var(--rt-leading-snug);
 
-            & + & {
-                margin-block-start: var(--rt-space-2-5);
+                & + & {
+                    margin-block-start: var(--rt-space-2);
+                }
             }
         }
     }