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

package/src/lib/components/table/copy-cell/rt-copy-cell.component.scss

@@ -1,40 +1,49 @@
-/* rt-copy-cell — ячейка с копированием в буфер.
-   ViewEncapsulation.None: классы глобальны, токены --rt-* наследуются.
-   Кнопка скрыта по умолчанию и проявляется при наведении/фокусе — чтобы не
-   зашумлять плотные таблицы. */
+@layer rt-kit.components {
+    /* rt-copy-cell — ячейка с копированием в буфер.
+       ViewEncapsulation.None: классы глобальны, токены --rt-* наследуются.
+       Кнопка скрыта по умолчанию и проявляется при наведении/фокусе — чтобы не
+       зашумлять плотные таблицы. */
 
-.rt-copy-cell {
-    display: inline-flex;
-    min-width: 0;
-    align-items: center;
-    gap: var(--rt-space-xs);
+    .rt-copy-cell {
+        --rt-copy-cell-transition-duration: var(--rt-duration-fast);
 
-    &__content {
+        display: inline-flex;
         min-width: 0;
-    }
+        align-items: center;
+        gap: var(--rt-space-xs);
 
-    &__button {
-        flex: 0 0 auto;
-        opacity: 0;
-        transition: opacity var(--rt-duration-fast) ease;
-    }
+        /* Значение длиннее места обрезается многоточием, а не наезжает на кнопку:
+           min-width: 0 разрешает flex-элементу сжаться, но сам по себе ничего не прячет. */
+        &__content {
+            overflow: hidden;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    /* Reveal при наведении/клавиатурном фокусе внутри самой ячейки — работает
-       и вне таблицы (карточки, асайды). */
-    &:hover &__button,
-    &:focus-within &__button {
-        opacity: 1;
+        &__button {
+            flex: 0 0 auto;
+            opacity: 0;
+            transition: opacity var(--rt-copy-cell-transition-duration) ease;
+        }
+
+        /* Reveal при наведении/клавиатурном фокусе внутри самой ячейки — работает
+           и вне таблицы (карточки, асайды). */
+        &:hover &__button,
+        &:focus-within &__button {
+            opacity: 1;
+        }
+
+        /* revealOnHover=false — кнопка всегда видима (модалки/карточки без hover-строки). */
+        &--static &__button {
+            opacity: 1;
+        }
     }
 
-    /* revealOnHover=false — кнопка всегда видима (модалки/карточки без hover-строки). */
-    &--static &__button {
+    /* Reveal при наведении/фокусе на всю строку rt-table — привычное поведение
+       таблиц: кнопка появляется, как только курсор над строкой. */
+    .rt-table tbody tr:hover .rt-copy-cell__button,
+    .rt-table tbody tr:focus-within .rt-copy-cell__button {
         opacity: 1;
     }
 }
-
-/* Reveal при наведении/фокусе на всю строку rt-table — привычное поведение
-   таблиц: кнопка появляется, как только курсор над строкой. */
-.rt-table tbody tr:hover .rt-copy-cell__button,
-.rt-table tbody tr:focus-within .rt-copy-cell__button {
-    opacity: 1;
-}

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

@@ -1,312 +1,320 @@
-/* rt-table — common/ui таблица поверх cdk-table. ViewEncapsulation.None:
-   классы доступны без scope-attrs, токены --rt-* наследуются. */
-
-.rt-table {
-    position: relative;
-    display: table;
-    width: 100%;
-    background: var(--rt-color-bg-surface);
-    border-collapse: collapse;
-    color: var(--rt-color-text-primary);
-
-    .cdk-header-cell,
-    .cdk-cell,
-    &__skeleton-cell {
-        position: relative;
-        height: 50px;
-        padding: var(--rt-space-2) var(--rt-space-5);
-        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-
-        /* Single-owner границы: каждую линию сетки рисует РОВНО одна ячейка —
-           вертикаль только левой гранью, горизонталь только нижней. Внутренние
-           линии не удваиваются, правого периметра нет вовсе, а левый гасим у
-           первой колонки ниже. Таблица упирается в края контейнера — боковые
-           рамки не нужны. */
-        border-left: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-medium);
-        text-align: start;
-        vertical-align: middle;
-
-        &[data-align='right'] {
-            text-align: right;
+@layer rt-kit.components {
+    /* rt-table — common/ui таблица поверх cdk-table. ViewEncapsulation.None:
+       классы доступны без scope-attrs, токены --rt-* наследуются. */
 
-            input {
-                text-align: right;
-            }
-        }
-    }
+    .rt-table {
+        --rt-table-border-width: var(--rt-border-width-thin);
+        --rt-table-card-radius: var(--rt-radius-md);
 
-    /* Левый периметр не рисуем — первая колонка без левой грани. */
-    .cdk-header-cell:first-child,
-    .cdk-cell:first-child,
-    &__skeleton-cell:first-child {
-        border-left: none;
-    }
-
-    .cdk-header-cell {
-        /* Верхняя грань таблицы — только у шапки (низ даёт border-bottom строк). */
-        border-top: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+        position: relative;
+        display: table;
+        width: 100%;
         background: var(--rt-color-bg-surface);
-        color: var(--rt-color-text-muted);
-    }
-
-    .cdk-cell {
+        border-collapse: collapse;
         color: var(--rt-color-text-primary);
-        overflow-wrap: anywhere;
-    }
 
-    /* «…»-действия строки ([showRowActions]) — НЕ отдельная видимая колонка.
-       Ячейка нулевой ширины, sticky к правому краю scroll-контейнера
-       (rtElem="table-scroll", overflow-x), без border/padding. Плавающая кнопка
-       не занимает места в раскладке — поэтому горизонтальный скролл не уводит её
-       из вьюпорта. Компаунд с .cdk-cell держит специфичность выше базовой ячейки. */
-    &__actions-header.cdk-header-cell {
-        width: 0;
-        padding: 0;
-        border: none;
-    }
+        .cdk-header-cell,
+        .cdk-cell,
+        &__skeleton-cell {
+            position: relative;
+            height: 50px;
+            padding: var(--rt-space-2) var(--rt-space-5);
+            border-bottom: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
+
+            /* Single-owner границы: каждую линию сетки рисует РОВНО одна ячейка —
+               вертикаль только левой гранью, горизонталь только нижней. Внутренние
+               линии не удваиваются, правого периметра нет вовсе, а левый гасим у
+               первой колонки ниже. Таблица упирается в края контейнера — боковые
+               рамки не нужны. */
+            border-left: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            text-align: start;
+            vertical-align: middle;
+
+            &[data-align='right'] {
+                text-align: right;
 
-    &__actions-cell.cdk-cell {
-        position: sticky;
-        z-index: 1;
-        right: 0;
-        width: 0;
-        padding: 0;
-        border: none;
-        background: transparent;
-    }
+                input {
+                    text-align: right;
+                }
+            }
+        }
 
-    &__actions-float {
-        position: absolute;
-        display: flex;
-        height: 100%;
-        align-items: center;
-        padding: 0 var(--rt-space-2) 0 var(--rt-space-8);
+        /* Левый периметр не рисуем — первая колонка без левой грани. */
+        .cdk-header-cell:first-child,
+        .cdk-cell:first-child,
+        &__skeleton-cell:first-child {
+            border-left: none;
+        }
 
-        /* Содержимое последней ячейки «утопает» под кнопкой; кнопка видна только
-           на hover строки, поэтому фон градиента — hover-цвет строки. */
-        background: linear-gradient(to right, transparent 0%, var(--rt-color-bg-hover) 45%);
-        inset: 0 0 0 auto;
+        .cdk-header-cell {
+            /* Верхняя грань таблицы — только у шапки (низ даёт border-bottom строк). */
+            border-top: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
+            background: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+        }
 
-        /* Прозрачная зона пропускает клики на строку; интерактивна только кнопка. */
-        pointer-events: none;
+        .cdk-cell {
+            color: var(--rt-color-text-primary);
+            overflow-wrap: anywhere;
+        }
 
-        .rt-menu {
-            pointer-events: auto;
+        /* «…»-действия строки ([showRowActions]) — НЕ отдельная видимая колонка.
+           Ячейка нулевой ширины, sticky к правому краю scroll-контейнера
+           (rtElem="table-scroll", overflow-x), без border/padding. Плавающая кнопка
+           не занимает места в раскладке — поэтому горизонтальный скролл не уводит её
+           из вьюпорта. Компаунд с .cdk-cell держит специфичность выше базовой ячейки. */
+        &__actions-header.cdk-header-cell {
+            width: 0;
+            padding: 0;
+            border: none;
         }
-    }
 
-    /* Hover-reveal: по умолчанию кнопка скрыта, появляется при наведении/фокусе
-       строки или пока её меню открыто (:has(.rt-menu--open) — переживает уход
-       hover'а на overlay-панель). Скрытие — только на hover-устройствах: на тач
-       (hover: none) правило не применяется и кнопка видна всегда. */
-    @media (hover: hover) {
         &__actions-cell.cdk-cell {
-            visibility: hidden;
+            position: sticky;
+            z-index: 1;
+            right: 0;
+            width: 0;
+            padding: 0;
+            border: none;
+            background: transparent;
         }
 
-        .cdk-row:hover &__actions-cell.cdk-cell,
-        .cdk-row:focus-within &__actions-cell.cdk-cell,
-        &__actions-cell.cdk-cell:has(.rt-menu--open) {
-            visibility: visible;
-        }
-    }
+        &__actions-float {
+            position: absolute;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            padding: 0 var(--rt-space-2) 0 var(--rt-space-8);
+
+            /* Содержимое последней ячейки «утопает» под кнопкой; кнопка видна только
+               на hover строки, поэтому фон градиента — hover-цвет строки. */
+            background: linear-gradient(to right, transparent 0%, var(--rt-color-bg-hover) 45%);
+            inset: 0 0 0 auto;
+
+            /* Прозрачная зона пропускает клики на строку; интерактивна только кнопка. */
+            pointer-events: none;
 
-    .cdk-row {
-        &:hover {
-            background: var(--rt-color-bg-hover);
+            .rt-menu {
+                pointer-events: auto;
+            }
         }
 
-        /* Опт-ин подсветка проблемной строки (просрочка и т.п.): потребитель
-           вешает класс `rt-table__row--danger` на строку. Составной селектор с
-           `.cdk-row` нужен, чтобы danger-фон держался и при :hover. */
-        &.rt-table__row--danger {
-            background: var(--rt-color-state-danger-bg);
+        /* Hover-reveal: по умолчанию кнопка скрыта, появляется при наведении/фокусе
+           строки или пока её меню открыто (:has(.rt-menu--open) — переживает уход
+           hover'а на overlay-панель). Скрытие — только на hover-устройствах: на тач
+           (hover: none) правило не применяется и кнопка видна всегда. */
+        @media (hover: hover) {
+            &__actions-cell.cdk-cell {
+                visibility: hidden;
+            }
 
-            &:hover {
-                background: var(--rt-color-state-danger-bg);
+            .cdk-row:hover &__actions-cell.cdk-cell,
+            .cdk-row:focus-within &__actions-cell.cdk-cell,
+            &__actions-cell.cdk-cell:has(.rt-menu--open) {
+                visibility: visible;
             }
         }
-    }
 
-    /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
-       table-семантику обеспечивает директива rtTableRow на самой строке. */
-    &--clickable {
         .cdk-row {
-            cursor: pointer;
+            &:hover {
+                background: var(--rt-color-bg-hover);
+            }
+
+            /* Опт-ин подсветка проблемной строки (просрочка и т.п.): потребитель
+               вешает класс `rt-table__row--danger` на строку. Составной селектор с
+               `.cdk-row` нужен, чтобы danger-фон держался и при :hover. */
+            &.rt-table__row--danger {
+                background: var(--rt-color-state-danger-bg);
 
-            &:focus-visible {
-                outline: 2px solid var(--rt-color-action-primary);
-                outline-offset: -2px;
+                &:hover {
+                    background: var(--rt-color-state-danger-bg);
+                }
             }
         }
-    }
 
-    a {
-        text-decoration: none;
-    }
+        /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
+           table-семантику обеспечивает директива rtTableRow на самой строке. */
+        &--clickable {
+            .cdk-row {
+                cursor: pointer;
 
-    &--density--compact {
-        .cdk-header-cell,
-        .cdk-cell,
-        .rt-table__skeleton-cell {
-            height: 36px;
-            padding: var(--rt-space-xs) var(--rt-space-sm);
+                &:focus-visible {
+                    outline: 2px solid var(--rt-color-action-primary);
+                    outline-offset: -2px;
+                }
+            }
         }
-    }
 
-    &__skeleton-bar {
-        display: block;
-        width: 80%;
-        height: 14px;
-    }
-
-    &__empty-row {
-        display: table-row;
-    }
+        a {
+            text-decoration: none;
+        }
 
-    &__empty {
-        padding: var(--rt-space-6) var(--rt-space-5);
+        &--density--compact {
+            .cdk-header-cell,
+            .cdk-cell,
+            .rt-table__skeleton-cell {
+                height: 36px;
+                padding: var(--rt-space-xs) var(--rt-space-sm);
+            }
+        }
 
-        /* Только нижняя грань — как у строк: верхнюю даёт border-bottom шапки
-           (иначе двойная линия), боковые не рисуем (нет периметра). */
-        border-bottom: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        background: var(--rt-color-bg-surface);
-        color: var(--rt-color-text-muted);
-        text-align: center;
-    }
+        &__skeleton-bar {
+            display: block;
+            width: 80%;
+            height: 14px;
+        }
 
-    &__empty-message {
-        margin: 0;
-        font-size: var(--rt-text-sm);
-    }
+        &__empty-row {
+            display: table-row;
+        }
 
-    &__overlay {
-        position: absolute;
-        z-index: 1;
-        display: grid;
-        min-height: 100%;
-        inset: 0;
-        place-items: center;
-        pointer-events: none;
-    }
+        &__empty {
+            padding: var(--rt-space-6) var(--rt-space-5);
 
-    &__overlay-backdrop {
-        position: absolute;
-        background: var(--rt-color-bg-surface);
-        inset: 0;
-        opacity: 0.72;
-    }
+            /* Только нижняя грань — как у строк: верхнюю даёт border-bottom шапки
+               (иначе двойная линия), боковые не рисуем (нет периметра). */
+            border-bottom: var(--rt-table-border-width) solid var(--rt-color-border-subtle);
+            background: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+            text-align: center;
+        }
 
-    &__overlay-spinner {
-        position: sticky;
-        z-index: 1;
-        top: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transform: translateY(-50%);
-    }
+        &__empty-message {
+            margin: 0;
+            font-size: var(--rt-text-sm);
+        }
 
-    /* Мобильный card-режим (≤1080px, host-модификатор --cards): хост перестаёт
-       быть таблицей, CDK-строки скрываются, вместо них — вертикальный список
-       карточек. Карточки в DOM только при narrow (гейт @if в шаблоне). */
-    &__cards {
-        display: none;
-    }
+        &__overlay {
+            position: absolute;
+            z-index: 1;
+            display: grid;
+            min-height: 100%;
+            inset: 0;
+            place-items: center;
+            pointer-events: none;
+        }
 
-    &--cards {
-        display: block;
+        &__overlay-backdrop {
+            position: absolute;
+            background: var(--rt-color-bg-surface);
+            inset: 0;
+            opacity: 0.72;
+        }
 
-        /* Потребители часто форсят ширину таблицы под горизонтальный скролл
-           (`min-width: max-content` на элементе таблицы). В card-режиме это увело
-           бы карточки за вьюпорт — перебиваем `!important`, т.к. consumer-правило
-           (Emulated, с [ngcontent]-атрибутом) выигрывает по специфичности. */
-        min-width: 0 !important;
-        max-width: 100%;
+        &__overlay-spinner {
+            position: sticky;
+            z-index: 1;
+            top: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(-50%);
+        }
 
-        .cdk-header-row,
-        .cdk-row,
-        .rt-table__skeleton-row,
-        .rt-table__empty-row {
+        /* Мобильный card-режим (≤1080px, host-модификатор --cards): хост перестаёт
+           быть таблицей, CDK-строки скрываются, вместо них — вертикальный список
+           карточек. Карточки в DOM только при narrow (гейт @if в шаблоне). */
+        &__cards {
             display: none;
         }
 
-        .rt-table__cards {
+        &--cards {
+            display: block;
+
+            /* Потребители часто форсят ширину таблицы под горизонтальный скролл
+               (`min-width: max-content` на элементе таблицы). В карточном виде это уводит
+               карточки за вьюпорт, и раньше кит настаивал на своём восклицательным знаком.
+               Теперь последнее слово за приложением: слой каскада отдаёт победу его
+               правилу, и правило кита, спорящее с ним важностью, этому противоречит.
+               Приложению, которому нужен и горизонтальный скролл, и карточный вид,
+               остаётся сузить свой селектор до широкого экрана. */
+            min-width: 0;
+            max-width: 100%;
+
+            .cdk-header-row,
+            .cdk-row,
+            .rt-table__skeleton-row,
+            .rt-table__empty-row {
+                display: none;
+            }
+
+            .rt-table__cards {
+                display: flex;
+                flex-direction: column;
+                gap: var(--rt-space-sm);
+            }
+        }
+
+        &__card {
             display: flex;
             flex-direction: column;
-            gap: var(--rt-space-sm);
+            padding: var(--rt-space-md);
+            border: var(--rt-table-border-width) solid var(--rt-color-border-default);
+            border-radius: var(--rt-table-card-radius);
+            background: var(--rt-color-bg-surface);
+            gap: var(--rt-space-xs);
         }
-    }
-
-    &__card {
-        display: flex;
-        flex-direction: column;
-        padding: var(--rt-space-md);
-        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-        border-radius: var(--rt-radius-md);
-        background: var(--rt-color-bg-surface);
-        gap: var(--rt-space-xs);
-    }
 
-    &__card-field {
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-        gap: var(--rt-space-md);
-    }
+        &__card-field {
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            gap: var(--rt-space-md);
+        }
 
-    &__card-label {
-        flex: 0 0 auto;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-    }
+        &__card-label {
+            flex: 0 0 auto;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
 
-    &__card-value {
-        min-width: 0;
-        overflow-wrap: anywhere;
-        text-align: right;
+        &__card-value {
+            min-width: 0;
+            overflow-wrap: anywhere;
+            text-align: right;
 
-        /* Cell-шаблон колонки — это `<td cdk-cell>` целиком; вне таблицы он тащит
-           табличные стили (height 50px, border, padding, inline min-width под
-           горизонтальный скролл). Гасим их, чтобы значение вело себя как inline-текст. */
-        .cdk-cell {
-            display: inline;
-            height: auto;
-            padding: 0;
-            border: none;
-            font: inherit;
-            min-inline-size: 0 !important;
-            text-align: inherit;
+            /* Cell-шаблон колонки — это `<td cdk-cell>` целиком; вне таблицы он тащит
+               табличные стили (height 50px, border, padding, inline min-width под
+               горизонтальный скролл). Гасим их, чтобы значение вело себя как inline-текст. */
+            .cdk-cell {
+                display: inline;
+                height: auto;
+                padding: 0;
+                border: none;
+                font: inherit;
+                min-inline-size: 0;
+                text-align: inherit;
+            }
         }
-    }
 
-    &__card-actions {
-        display: flex;
-        justify-content: flex-end;
-    }
+        &__card-actions {
+            display: flex;
+            justify-content: flex-end;
+        }
 
-    &__card-skeleton-bar {
-        display: block;
-        width: 60%;
-        height: 14px;
+        &__card-skeleton-bar {
+            display: block;
+            width: 60%;
+            height: 14px;
 
-        &:first-child {
-            width: 80%;
+            &:first-child {
+                width: 80%;
+            }
         }
     }
-}
-
-/* В тёмной теме таблица сливается с фоном контента (bg-page), а не поднимается
-   на bg-surface — иначе список выпирает более светлой плитой над страницей. */
-:root[data-theme='dark'] .rt-table,
-html.rt-theme-dark .rt-table {
-    background: var(--rt-color-bg-page);
 
-    .cdk-header-cell,
-    .rt-table__empty,
-    .rt-table__overlay-backdrop {
+    /* В тёмной теме таблица сливается с фоном контента (bg-page), а не поднимается
+       на bg-surface — иначе список выпирает более светлой плитой над страницей. */
+    :root[data-theme='dark'] .rt-table,
+    html.rt-theme-dark .rt-table {
         background: var(--rt-color-bg-page);
+
+        .cdk-header-cell,
+        .rt-table__empty,
+        .rt-table__overlay-backdrop {
+            background: var(--rt-color-bg-page);
+        }
     }
 }