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

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;
+        }
     }
 }

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

@@ -1,98 +1,103 @@
-/* rt-tag — status pill в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
-   и на `<rt-tag>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-tag — status pill в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
+       и на `<rt-tag>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-tag {
-    display: inline-flex;
-
-    .rt-tag {
+    rt-tag {
         display: inline-flex;
-        align-items: center;
-        padding: var(--rt-space-1) var(--rt-space-2);
-        border-radius: var(--rt-radius-md);
-        background: var(--rt-neutral-100);
-        color: var(--rt-neutral-700);
-        font-size: var(--rt-text-sm);
-        gap: var(--rt-space-1);
-        line-height: var(--rt-leading-tight);
-
-        &--shape--pill {
-            border-radius: var(--rt-radius-full);
-        }
-
-        &--shape--square {
-            border-radius: var(--rt-radius-sm);
-        }
-
-        /* Явный radius переопределяет shape — правила идут позже по порядку. */
-        &--radius--none {
-            border-radius: var(--rt-radius-none);
-        }
-
-        &--radius--sm {
-            border-radius: var(--rt-radius-sm);
-        }
-
-        &--radius--md {
-            border-radius: var(--rt-radius-md);
-        }
-
-        &--radius--lg {
-            border-radius: var(--rt-radius-lg);
-        }
-
-        &--radius--full {
-            border-radius: var(--rt-radius-full);
-        }
-
-        &--severity--info {
-            background: var(--rt-color-state-info-bg);
-            color: var(--rt-color-state-info);
-        }
-
-        &--severity--success {
-            background: var(--rt-color-state-success-bg);
-            color: var(--rt-color-state-success);
-        }
-
-        &--severity--warning {
-            background: var(--rt-color-state-warning-bg);
-            color: var(--rt-color-state-warning);
-        }
-
-        &--severity--danger {
-            background: var(--rt-color-state-danger-bg);
-            color: var(--rt-color-state-danger);
-        }
-
-        &--severity--secondary,
-        &--severity--neutral {
-            background: var(--rt-color-bg-subtle);
-            color: var(--rt-color-text-primary);
-        }
-
-        /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
-           После severity-блоков — иначе их `background` перебил бы transparent. */
-        &--appearance--outlined {
-            border: var(--rt-border-width-thin) solid currentcolor;
-            background: transparent;
-        }
-
-        &__icon {
-            flex-shrink: 0;
-        }
-
-        &__icon-end {
-            flex-shrink: 0;
-        }
-
-        &__text {
-            line-height: var(--rt-leading-none);
-        }
 
-        &__close {
-            margin-inline-start: var(--rt-space-0-5);
+        .rt-tag {
+            --rt-tag-radius: var(--rt-radius-md);
+            --rt-tag-border-width: var(--rt-border-width-thin);
+
+            display: inline-flex;
+            align-items: center;
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border-radius: var(--rt-tag-radius);
+            background: var(--rt-neutral-100);
+            color: var(--rt-neutral-700);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-1);
+            line-height: var(--rt-leading-tight);
+
+            &--shape--pill {
+                --rt-tag-radius: var(--rt-radius-full);
+            }
+
+            &--shape--square {
+                --rt-tag-radius: var(--rt-radius-sm);
+            }
+
+            /* Явный radius переопределяет shape — правила идут позже по порядку. */
+            &--radius--none {
+                --rt-tag-radius: var(--rt-radius-none);
+            }
+
+            &--radius--sm {
+                --rt-tag-radius: var(--rt-radius-sm);
+            }
+
+            &--radius--md {
+                --rt-tag-radius: var(--rt-radius-md);
+            }
+
+            &--radius--lg {
+                --rt-tag-radius: var(--rt-radius-lg);
+            }
+
+            &--radius--full {
+                --rt-tag-radius: var(--rt-radius-full);
+            }
+
+            &--severity--info {
+                background: var(--rt-color-state-info-bg);
+                color: var(--rt-color-state-info);
+            }
+
+            &--severity--success {
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
+
+            &--severity--warning {
+                background: var(--rt-color-state-warning-bg);
+                color: var(--rt-color-state-warning);
+            }
+
+            &--severity--danger {
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
+
+            &--severity--secondary,
+            &--severity--neutral {
+                background: var(--rt-color-bg-subtle);
+                color: var(--rt-color-text-primary);
+            }
+
+            /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
+               После severity-блоков — иначе их `background` перебил бы transparent. */
+            &--appearance--outlined {
+                border: var(--rt-tag-border-width) solid currentcolor;
+                background: transparent;
+            }
+
+            &__icon {
+                flex-shrink: 0;
+            }
+
+            &__icon-end {
+                flex-shrink: 0;
+            }
+
+            &__text {
+                line-height: var(--rt-leading-none);
+            }
+
+            &__close {
+                margin-inline-start: var(--rt-space-0-5);
+            }
         }
     }
 }