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

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

@@ -1,7 +1,9 @@
-/* rt-table-settings-aside — ViewEncapsulation.None (common/ui). Своей раскладки нет:
-   chrome даёт rt-aside, тело — rt-table-settings-panel. `.rt-table-settings-aside` —
-   сам хост, и он не должен добавлять бокс между асайдом и его местом в overlay. */
+@layer rt-kit.components {
+    /* rt-table-settings-aside — ViewEncapsulation.None (common/ui). Своей раскладки нет:
+       chrome даёт rt-aside, тело — rt-table-settings-panel. `.rt-table-settings-aside` —
+       сам хост, и он не должен добавлять бокс между асайдом и его местом в overlay. */
 
-.rt-table-settings-aside {
-    display: contents;
+    .rt-table-settings-aside {
+        display: contents;
+    }
 }

package/src/lib/components/table/settings-panel/rt-table-settings-panel.component.scss

@@ -1,77 +1,87 @@
-/* rt-table-settings-panel — ViewEncapsulation.None (common/ui): правила таргетируют
-   BEM-класс блока, как во всём ките. */
-.rt-table-settings-panel {
-    &__list {
-        display: flex;
-        min-width: 320px;
-        flex-direction: column;
-        padding: 0;
-        margin: 0;
-        gap: var(--rt-space-2xs);
-        list-style: none;
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-        padding: var(--rt-space-2xs) var(--rt-space-xs);
-        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-        border-radius: var(--rt-radius-md);
-        background-color: var(--rt-color-bg-surface);
-        gap: var(--rt-space-sm);
+@layer rt-kit.components {
+    /* rt-table-settings-panel — ViewEncapsulation.None (common/ui): правила таргетируют
+       BEM-класс блока, как во всём ките. */
+    .rt-table-settings-panel {
+        --rt-table-settings-panel-row-radius: var(--rt-radius-md);
+        --rt-table-settings-panel-row-border-width: var(--rt-border-width-thin);
+        --rt-table-settings-panel-row-shadow: var(--rt-shadow-card);
 
-        &--hidden {
-            color: var(--rt-color-text-muted);
+        &__list {
+            display: flex;
+            min-width: 320px;
+            flex-direction: column;
+            padding: 0;
+            margin: 0;
+            gap: var(--rt-space-2xs);
+            list-style: none;
         }
 
-        &.cdk-drag-preview {
-            box-shadow: var(--rt-shadow-card);
-        }
+        &__row {
+            /* Строка при перетаскивании уезжает в .cdk-drag-preview вне блока:
+               свойство объявляется на ней самой, а не в корне. */
+            --rt-table-settings-panel-drag-duration: var(--rt-duration-base);
 
-        &.cdk-drag-placeholder {
-            opacity: 0.4;
-        }
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-2xs) var(--rt-space-xs);
+            border: var(--rt-table-settings-panel-row-border-width) solid var(--rt-color-border-default);
+            border-radius: var(--rt-table-settings-panel-row-radius);
+            background-color: var(--rt-color-bg-surface);
+            gap: var(--rt-space-sm);
+
+            &--hidden {
+                color: var(--rt-color-text-muted);
+            }
+
+            &.cdk-drag-preview {
+                box-shadow: var(--rt-table-settings-panel-row-shadow);
+            }
+
+            &.cdk-drag-placeholder {
+                opacity: 0.4;
+            }
 
-        &.cdk-drag-animating {
-            transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
+            &.cdk-drag-animating {
+                transition: transform var(--rt-table-settings-panel-drag-duration) cubic-bezier(0, 0, 0.2, 1);
+            }
         }
-    }
 
-    &__handle {
-        display: inline-flex;
-        width: 24px;
-        height: 24px;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        border: none;
-        background: none;
-        cursor: grab;
+        &__handle {
+            display: inline-flex;
+            width: 24px;
+            height: 24px;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: none;
+            background: none;
+            cursor: grab;
+
+            &:active {
+                cursor: grabbing;
+            }
 
-        &:active {
-            cursor: grabbing;
+            &--placeholder {
+                cursor: default;
+            }
         }
 
-        &--placeholder {
-            cursor: default;
+        &__label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1;
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
-    }
 
-    &__label {
-        overflow: hidden;
-        min-width: 0;
-        flex: 1;
-        font-size: var(--rt-text-sm);
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        &__toggle {
+            margin-left: auto;
+        }
     }
 
-    &__toggle {
-        margin-left: auto;
+    /* Плавающий клон строки во время перетаскивания (CDK монтирует его в body). */
+    .cdk-drop-list-dragging .rt-table-settings-panel__row:not(.cdk-drag-placeholder) {
+        transition: transform var(--rt-table-settings-panel-drag-duration) cubic-bezier(0, 0, 0.2, 1);
     }
 }
-
-/* Плавающий клон строки во время перетаскивания (CDK монтирует его в body). */
-.cdk-drop-list-dragging .rt-table-settings-panel__row:not(.cdk-drag-placeholder) {
-    transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/table/sort-header/rt-table-sort-header.component.scss

@@ -1,39 +1,41 @@
-/* rt-table-sort-header — заголовок сортируемой колонки внутри rt-table.
-   ViewEncapsulation.None: классы доступны без scope-attrs, токены --rt-* наследуются. */
+@layer rt-kit.components {
+    /* rt-table-sort-header — заголовок сортируемой колонки внутри rt-table.
+       ViewEncapsulation.None: классы доступны без scope-attrs, токены --rt-* наследуются. */
 
-.rt-table-sort-header {
-    &__button {
-        display: inline-flex;
-        align-items: center;
-        padding: 0;
-        border: none;
-        background: none;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-        gap: var(--rt-space-xs);
-        text-align: inherit;
+    .rt-table-sort-header {
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            padding: 0;
+            border: none;
+            background: none;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-xs);
+            text-align: inherit;
 
-        &:hover {
-            color: var(--rt-color-text-primary);
-        }
+            &:hover {
+                color: var(--rt-color-text-primary);
+            }
 
-        &:focus-visible {
-            outline: 2px solid var(--rt-color-action-primary);
-            outline-offset: 2px;
+            &:focus-visible {
+                outline: 2px solid var(--rt-color-action-primary);
+                outline-offset: 2px;
+            }
         }
-    }
 
-    &__icon {
-        flex: 0 0 auto;
-        color: var(--rt-color-text-muted);
-    }
+        &__icon {
+            flex: 0 0 auto;
+            color: var(--rt-color-text-muted);
+        }
 
-    &__button--active {
-        color: var(--rt-color-text-primary);
+        &__button--active {
+            color: var(--rt-color-text-primary);
 
-        .rt-table-sort-header__icon {
-            color: var(--rt-color-action-primary);
+            .rt-table-sort-header__icon {
+                color: var(--rt-color-action-primary);
+            }
         }
     }
 }

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

@@ -1,219 +1,228 @@
-.rt-tabs {
-    display: flex;
-    -webkit-tap-highlight-color: transparent;
+@layer rt-kit.components {
+    .rt-tabs {
+        --rt-tabs-border-width: var(--rt-border-width-thin);
+        --rt-tabs-transition-duration: var(--rt-duration-fast);
 
-    &--direction--horizontal {
-        flex-direction: column;
-    }
-
-    &--direction--vertical {
-        flex-direction: row;
-    }
-
-    &__header {
-        display: flex;
-        align-items: center;
-    }
-
-    &__tab-list-wrapper {
-        position: relative;
-        display: flex;
-        overflow: hidden;
-        flex: 1 1 auto;
-        align-items: center;
-    }
-
-    &__tab-list {
         display: flex;
-        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-        margin: 0;
-        -ms-overflow-style: none;
-        overflow-x: auto;
-        scrollbar-width: none;
-        white-space: nowrap;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
+        -webkit-tap-highlight-color: transparent;
 
         &--direction--horizontal {
-            width: 100%;
-            flex-direction: row;
-        }
-
-        &--direction--vertical {
             flex-direction: column;
-            border-right: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-            border-bottom: 0;
         }
 
-        &--stretch {
-            justify-content: space-between;
+        &--direction--vertical {
+            flex-direction: row;
         }
-    }
 
-    &__rest {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        width: var(--rt-control-height-lg);
-        align-items: center;
-        justify-content: center;
-        background-color: var(--rt-color-bg-surface);
-        color: var(--rt-color-text-muted);
-        cursor: pointer;
-        transition: color var(--rt-duration-fast) linear;
-        visibility: hidden;
-
-        &:hover {
-            color: var(--rt-color-text-primary);
+        &__header {
+            display: flex;
+            align-items: center;
         }
 
-        &--before {
-            left: 0;
-            border-right: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        &__tab-list-wrapper {
+            position: relative;
+            display: flex;
+            overflow: hidden;
+            flex: 1 1 auto;
+            align-items: center;
         }
 
-        &--after {
-            right: 0;
-            border-left: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        &__tab-list {
+            display: flex;
+            border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            margin: 0;
+            -ms-overflow-style: none;
+            overflow-x: auto;
+            scrollbar-width: none;
+            white-space: nowrap;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            &--direction--horizontal {
+                width: 100%;
+                flex-direction: row;
+            }
+
+            &--direction--vertical {
+                flex-direction: column;
+                border-right: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+                border-bottom: 0;
+            }
+
+            &--stretch {
+                justify-content: space-between;
+            }
         }
 
-        &--visible {
-            visibility: visible;
+        &__rest {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            bottom: 0;
+            display: flex;
+            width: var(--rt-control-height-lg);
+            align-items: center;
+            justify-content: center;
+            background-color: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+            transition: color var(--rt-tabs-transition-duration) linear;
+            visibility: hidden;
+
+            &:hover {
+                color: var(--rt-color-text-primary);
+            }
+
+            &--before {
+                left: 0;
+                border-right: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            }
+
+            &--after {
+                right: 0;
+                border-left: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            }
+
+            &--visible {
+                visibility: visible;
+            }
         }
-    }
 
-    &__controls {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
+        &__controls {
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
 
-        &--before {
-            padding-right: var(--rt-space-md);
-        }
+            &--before {
+                padding-right: var(--rt-space-md);
+            }
 
-        &--after {
-            padding-left: var(--rt-space-md);
+            &--after {
+                padding-left: var(--rt-space-md);
+            }
         }
-    }
 
-    &__content {
-        display: flex;
-        min-height: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        padding-top: var(--rt-space-md);
-        gap: var(--rt-space-md);
-        line-height: var(--rt-leading-relaxed);
+        &__content {
+            display: flex;
+            min-height: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            padding-top: var(--rt-space-md);
+            gap: var(--rt-space-md);
+            line-height: var(--rt-leading-relaxed);
 
-        &--scrollable {
-            overflow: auto;
+            &--scrollable {
+                overflow: auto;
+            }
         }
     }
-}
-
-.rt-tab-item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--rt-space-2) var(--rt-space-3);
-    border: 0;
-    margin: 0;
-    background-color: transparent;
-    color: var(--rt-color-text-muted);
-    cursor: pointer;
-    font-family: inherit;
-    font-size: var(--rt-text-sm);
-    font-weight: var(--rt-font-weight-semibold);
-    gap: var(--rt-space-sm);
-    line-height: var(--rt-leading-none);
-    transition:
-        color var(--rt-duration-fast) linear,
-        background-color var(--rt-duration-fast) linear;
-    white-space: nowrap;
-
-    /* Нижний индикатор активной вкладки — поверх border-bottom полосы. */
-    &:after {
-        position: absolute;
-        bottom: calc(-1 * var(--rt-border-width-thin));
-        height: 2px;
-        background-color: transparent;
-        content: '';
-        inset-inline: 0;
-        pointer-events: none;
-    }
-
-    &:hover:not(.rt-tab-item--disabled, .rt-tab-item--selected) {
-        background-color: var(--rt-color-bg-hover);
-        color: var(--rt-color-text-primary);
-    }
 
-    /* Inset-outline вместо box-shadow ring: полоса вкладок — scroll-контейнер
-       (overflow), который обрезал бы внешнее кольцо. Inset рисуется внутри
-       элемента, не клиппится и переживает forced-colors. */
-    &:focus-visible {
-        outline: 2px solid var(--rt-color-action-primary);
-        outline-offset: -3px;
-    }
+    .rt-tab-item {
+        --rt-tab-item-border-width: var(--rt-border-width-thin);
+        --rt-tab-item-badge-radius: var(--rt-radius-full);
+        --rt-tab-item-transition-duration: var(--rt-duration-fast);
 
-    &__title {
-        overflow: hidden;
-        max-width: 200px;
-        text-overflow: ellipsis;
-    }
-
-    &__icon {
-        flex-shrink: 0;
-    }
-
-    &__badge {
+        position: relative;
         display: inline-flex;
-        min-width: 18px;
-        height: 18px;
         align-items: center;
         justify-content: center;
-        padding: 0 var(--rt-space-1-5);
-        border-radius: var(--rt-radius-full);
-        background-color: var(--rt-color-bg-surface-subtle);
+        padding: var(--rt-space-2) var(--rt-space-4);
+        border: 0;
+        margin: 0;
+        background-color: transparent;
         color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-medium);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-semibold);
+        gap: var(--rt-space-sm);
         line-height: var(--rt-leading-none);
-    }
-
-    &--selected {
-        color: var(--rt-color-action-primary);
-        cursor: default;
+        transition:
+            color var(--rt-tab-item-transition-duration) linear,
+            background-color var(--rt-tab-item-transition-duration) linear;
+        white-space: nowrap;
 
+        /* Нижний индикатор активной вкладки — поверх border-bottom полосы. */
         &:after {
-            background-color: var(--rt-color-action-primary);
+            position: absolute;
+            bottom: calc(-1 * var(--rt-tab-item-border-width));
+            height: 2px;
+            background-color: transparent;
+            content: '';
+            inset-inline: 0;
+            pointer-events: none;
+        }
+
+        &:hover:not(.rt-tab-item--disabled, .rt-tab-item--selected) {
+            background-color: var(--rt-color-bg-hover);
+            color: var(--rt-color-text-primary);
+        }
+
+        /* Inset-outline вместо box-shadow ring: полоса вкладок — scroll-контейнер
+           (overflow), который обрезал бы внешнее кольцо. Inset рисуется внутри
+           элемента, не клиппится и переживает forced-colors. */
+        &:focus-visible {
+            outline: 2px solid var(--rt-color-action-primary);
+            outline-offset: -3px;
+        }
+
+        &__title {
+            overflow: hidden;
+            max-width: 200px;
+            text-overflow: ellipsis;
+        }
+
+        &__icon {
+            flex-shrink: 0;
+        }
+
+        &__badge {
+            display: inline-flex;
+            min-width: 18px;
+            height: 18px;
+            align-items: center;
+            justify-content: center;
+            padding: 0 var(--rt-space-2);
+            border-radius: var(--rt-tab-item-badge-radius);
+            background-color: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+            line-height: var(--rt-leading-none);
         }
 
-        .rt-tab-item__badge {
-            background-color: var(--rt-color-action-primary-soft);
+        &--selected {
             color: var(--rt-color-action-primary);
+            cursor: default;
+
+            &:after {
+                background-color: var(--rt-color-action-primary);
+            }
+
+            .rt-tab-item__badge {
+                background-color: var(--rt-color-action-primary-soft);
+                color: var(--rt-color-action-primary);
+            }
         }
-    }
 
-    &--invalid {
-        color: var(--rt-color-state-danger);
+        &--invalid {
+            color: var(--rt-color-state-danger);
 
-        &:after {
-            background-color: var(--rt-color-state-danger);
+            &:after {
+                background-color: var(--rt-color-state-danger);
+            }
         }
-    }
 
-    &--disabled {
-        color: var(--rt-color-text-disabled);
-        cursor: not-allowed;
-    }
+        &--disabled {
+            color: var(--rt-color-text-disabled);
+            cursor: not-allowed;
+        }
 
-    &--stretch {
-        max-width: 100%;
-        flex: 1 1 auto;
+        &--stretch {
+            max-width: 100%;
+            flex: 1 1 auto;
+        }
     }
 }