@rt-tools/ui-kit-v2 0.1.0

package/src/lib/components/page-header/rt-page-header-submenu.scss

@@ -0,0 +1,147 @@
+/* Панель второго уровня. Рендерится в CDK Overlay (вне DOM хедера), поэтому
+   отдельный корневой блок, а не элемент rt-page-header.
+
+   Ширина считается числом колонок, а не содержимым: колонки разной длины иначе
+   меняли бы габарит панели при каждом переходе между разделами. Число колонок
+   приходит инлайн-переменной `--rt-nav-panel-columns` из шаблона. */
+.rt-page-header-submenu {
+    --rt-nav-panel-columns-width: calc(var(--rt-nav-panel-columns) * var(--rt-nav-panel-column-width));
+    --rt-nav-panel-gaps-width: calc((var(--rt-nav-panel-columns) - 1) * var(--rt-nav-panel-column-gap));
+    --rt-nav-panel-padding-width: calc(var(--rt-nav-panel-padding) + var(--rt-nav-panel-padding));
+
+    display: flex;
+    width: calc(var(--rt-nav-panel-columns-width) + var(--rt-nav-panel-gaps-width) + var(--rt-nav-panel-padding-width));
+    box-sizing: border-box;
+    align-items: flex-start;
+    padding: var(--rt-nav-panel-padding-y) var(--rt-nav-panel-padding);
+    border: var(--rt-border-width-thin) solid var(--rt-nav-panel-color-border);
+    border-radius: var(--rt-radius-md);
+    background-color: var(--rt-nav-panel-color-bg);
+    box-shadow: var(--rt-nav-panel-shadow);
+    color: var(--rt-nav-panel-item-color);
+    font-size: var(--rt-nav-panel-item-font-size);
+    font-weight: var(--rt-nav-panel-item-font-weight);
+    gap: var(--rt-nav-panel-column-gap);
+
+    &__column {
+        display: flex;
+        min-width: 0;
+        flex: 0 0 var(--rt-nav-panel-column-width);
+        flex-direction: column;
+        gap: var(--rt-nav-panel-group-gap);
+    }
+
+    /* Пункты обжимают подпись, поэтому колонка выравнивает их по левому краю:
+       растянутый на всю ширину пункт давал бы подсветку во всю колонку. */
+    &__group {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--rt-nav-panel-item-gap);
+    }
+
+    &__group-title {
+        display: inline-flex;
+        max-width: 100%;
+        min-height: var(--rt-nav-panel-item-height);
+        align-items: center;
+        padding: var(--rt-nav-panel-item-padding);
+        color: var(--rt-nav-panel-group-color);
+        cursor: default;
+        font-size: var(--rt-nav-panel-group-font-size);
+        font-weight: var(--rt-nav-panel-group-font-weight);
+        gap: var(--rt-nav-panel-group-content-gap);
+        line-height: var(--rt-leading-none);
+    }
+
+    &__group-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__group-icon {
+        flex-shrink: 0;
+    }
+
+    &__disabled-slot {
+        display: inline-flex;
+        max-width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &__link {
+        display: inline-flex;
+        max-width: 100%;
+        min-height: var(--rt-nav-panel-item-height);
+        align-items: center;
+        padding: var(--rt-nav-panel-item-padding);
+        border: 0;
+        border-radius: var(--rt-radius-md);
+        background-color: transparent;
+        color: var(--rt-nav-panel-item-color);
+        cursor: pointer;
+        font-size: var(--rt-nav-panel-item-font-size);
+        font-weight: var(--rt-nav-panel-item-font-weight);
+        gap: var(--rt-nav-panel-item-content-gap);
+        line-height: var(--rt-leading-none);
+        text-align: left;
+        text-decoration: none;
+        transition:
+            background-color var(--rt-duration-fast) linear,
+            color var(--rt-duration-fast) linear;
+        white-space: nowrap;
+
+        &--is-active {
+            background-color: var(--rt-nav-panel-item-color-bg-active);
+            color: var(--rt-nav-panel-item-color-active);
+        }
+
+        &:not(&--is-active):hover,
+        &:not(&--is-active):active {
+            background-color: var(--rt-nav-panel-item-color-bg-hover);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 2px dashed var(--rt-nav-color-focus);
+            outline-offset: 2px;
+        }
+
+        &--disabled,
+        &:disabled,
+        &[aria-disabled='true'] {
+            background-color: transparent;
+            color: var(--rt-nav-color-disabled);
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    &__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /* Пункт панели обжимает подпись и стоит на своей строке, поэтому точка идёт
+       следом за текстом: соседей она не сдвигает, а у правого края колонки
+       оторвалась бы от подписи, к которой относится. */
+    &__marker {
+        width: var(--rt-nav-marker-size);
+        height: var(--rt-nav-marker-size);
+        flex-shrink: 0;
+        border-radius: var(--rt-radius-full);
+        background-color: var(--rt-nav-marker-color);
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+}

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

@@ -0,0 +1,257 @@
+/* Цвет плашки вынесен в локальный override `--rt-page-header-bg`, дефолт
+   берётся из семантики навигации. Отступ от краёв страницы задаёт тот, кто
+   ставит шапку: своего у неё нет. */
+.rt-page-header {
+    display: flex;
+    width: auto;
+    min-height: 48px;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--rt-nav-header-padding);
+    border-radius: var(--rt-radius-md);
+    background-color: var(--rt-page-header-bg, var(--rt-nav-header-color-bg));
+    color: var(--rt-nav-item-color);
+    gap: var(--rt-space-2);
+
+    &__nav {
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+
+    &__list {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        gap: var(--rt-nav-item-gap);
+        list-style: none;
+    }
+
+    /* Пункт ряда несёт собственную плашку. На фоне шапки того же цвета её не
+       видно — проступает только активный раздел, у которого фон белый. */
+    &__item {
+        display: inline-flex;
+        align-items: center;
+        border: var(--rt-border-width-thin) solid var(--rt-nav-item-color-border);
+        border-radius: var(--rt-radius-md);
+        background-color: var(--rt-nav-item-color-bg);
+    }
+
+    &__disabled-slot {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    &__link {
+        position: relative;
+        display: inline-flex;
+        min-height: var(--rt-nav-item-height);
+        align-items: center;
+        padding: var(--rt-nav-item-padding);
+        border: 0;
+        border-radius: var(--rt-radius-md);
+        background-color: transparent;
+        color: var(--rt-nav-item-color);
+        cursor: pointer;
+        font-size: var(--rt-nav-item-font-size);
+        font-weight: var(--rt-nav-item-font-weight);
+        gap: var(--rt-nav-item-content-gap);
+        line-height: var(--rt-nav-item-line-height);
+        text-decoration: none;
+        transition: color var(--rt-duration-fast) linear;
+        white-space: nowrap;
+
+        /* Наведение красит подпись, а не фон: фоном отмечен активный раздел, и
+           два фона в одном ряду читались бы как два активных. */
+        &:hover {
+            color: var(--rt-nav-item-color-hover);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 2px dashed var(--rt-nav-color-focus);
+            outline-offset: 2px;
+        }
+
+        &--is-active {
+            background-color: var(--rt-nav-item-color-bg-active);
+            color: var(--rt-nav-item-color);
+        }
+
+        /* Пока панель открыта, её раздел держит цвет наведения: курсор ушёл в
+           панель, наведение с него снялось, и без этого не видно, чья панель
+           открыта. */
+        &--is-open {
+            color: var(--rt-nav-item-color-hover);
+        }
+
+        /* `aria-disabled` браузер не стилизует сам: без этого правила пункт,
+           выключенный только для скринридера, выглядит рабочим. Нативный
+           `disabled` не годится — он не даёт ни наведения, ни фокуса, и
+           объяснение до пользователя не доходит. */
+        &--disabled,
+        &:disabled,
+        &[aria-disabled='true'] {
+            background-color: transparent;
+            color: var(--rt-nav-color-disabled);
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    /* Точка идёт следом за подписью и перед указателем раскрытия, в общем ритме
+       содержимого пункта. Поверх текста она садилась бы на последнюю букву. */
+    &__marker {
+        width: var(--rt-nav-marker-size);
+        height: var(--rt-nav-marker-size);
+        flex-shrink: 0;
+        border-radius: var(--rt-radius-full);
+        background-color: var(--rt-nav-marker-color);
+    }
+
+    /* Указатель раскрытия приглушён сильнее подписи: он говорит, что панель есть,
+       и не должен спорить с названием раздела. Начертание парное (вверх-вниз),
+       поэтому разворот на раскрытии ничего не добавил бы. */
+    &__caret {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--rt-nav-item-color-caret);
+    }
+
+    &__burger {
+        display: none; /* десктоп — гамбургера нет; включается ниже в @media */
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-1-5);
+        border: 0;
+        border-radius: var(--rt-radius-ms);
+        background-color: transparent;
+        color: var(--rt-nav-item-color);
+        cursor: pointer;
+        transition: color var(--rt-duration-fast) linear;
+
+        &:hover {
+            color: var(--rt-nav-item-color-hover);
+        }
+
+        &:active {
+            color: var(--rt-nav-item-color-pressed);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 2px dashed var(--rt-nav-color-focus);
+            outline-offset: 2px;
+        }
+
+        &--is-open {
+            background-color: var(--rt-nav-item-color-bg-active);
+        }
+    }
+
+    &__burger-icon {
+        flex-shrink: 0;
+    }
+
+    /* Восемь разделов с иконками в ряд не помещаются и переносятся на вторую
+       строку, а перенос удваивает высоту шапки. До широкого вьюпорта ряд идёт
+       без иконок: подпись раздела нужнее картинки рядом с ней. Замер в Chrome
+       2026-08-02: на 1081px ряд с иконками занимает 938.7px при доступных
+       798.4, без иконок — 762.7. */
+    @media (width <= 1380px) {
+        /* Селектор из двух классов, а не одного: `.rt-icon` задаёт иконке
+           `display`, и порядок стилей двух компонентов кита между собой не
+           закреплён ничем. */
+        &__link &__icon {
+            display: none;
+        }
+    }
+
+    /* Узкий вьюпорт: инлайн-навигация уступает место гамбургеру. */
+    @media (width <= 1080px) {
+        &__nav {
+            display: none;
+        }
+
+        &__burger {
+            display: inline-flex;
+        }
+    }
+
+    &__user {
+        display: inline-flex;
+        min-height: var(--rt-nav-item-height);
+        align-items: center;
+        padding: var(--rt-nav-item-padding);
+        border: 0;
+        border-radius: var(--rt-radius-md);
+        background-color: transparent;
+        color: var(--rt-nav-item-color);
+        cursor: pointer;
+        font-size: var(--rt-nav-item-font-size);
+        font-weight: var(--rt-nav-item-font-weight);
+        gap: var(--rt-nav-item-content-gap);
+        line-height: var(--rt-leading-tight);
+        transition: background-color var(--rt-duration-fast) linear;
+
+        &:hover,
+        &:active {
+            background-color: var(--rt-nav-item-color-bg-active);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 2px dashed var(--rt-nav-color-focus);
+            outline-offset: 2px;
+        }
+    }
+
+    &__user-avatar {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        align-items: center;
+        justify-content: center;
+        border: var(--rt-border-width-thin) solid var(--rt-nav-item-color-caret);
+        border-radius: var(--rt-radius-full);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-2xs);
+        font-weight: var(--rt-font-weight-semibold);
+        line-height: var(--rt-leading-none);
+    }
+
+    &__user-name {
+        white-space: nowrap;
+    }
+
+    /* Начертание парное, вверх-вниз: разворачивать его при открытии нечего. */
+    &__user-caret {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--rt-nav-item-color-caret);
+    }
+
+    &__user--is-open {
+        background-color: var(--rt-nav-item-color-bg-active);
+    }
+}

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

@@ -0,0 +1,102 @@
+.rt-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--rt-space-3) var(--rt-space-xs);
+
+    // Адаптив завязан на собственную ширину компонента, а не на viewport:
+    // в узком контейнере (зажатая таблица / aside) числовая полоса прячется,
+    // показывается compact-форма «‹ Стр. N из M ›».
+    container-type: inline-size;
+    gap: var(--rt-space-md);
+
+    &__range {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        white-space: nowrap;
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        gap: var(--rt-space-xs);
+    }
+
+    // Compact-форма по умолчанию скрыта — показывается только в узком контейнере.
+    &__compact {
+        display: none;
+        align-items: center;
+        gap: var(--rt-space-xs);
+    }
+
+    &__compact-label {
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        white-space: nowrap;
+    }
+
+    &__page {
+        min-width: var(--rt-space-xl);
+        height: var(--rt-space-xl);
+        padding: 0 var(--rt-space-sm);
+        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        border-radius: var(--rt-radius-md);
+        background: transparent;
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        transition:
+            background-color var(--rt-duration-fast) ease,
+            border-color var(--rt-duration-fast) ease,
+            color var(--rt-duration-fast) ease;
+
+        &:hover:not(:disabled, &--current) {
+            border-color: var(--rt-color-border-strong);
+            background: var(--rt-color-bg-surface-subtle);
+        }
+
+        &:focus-visible {
+            box-shadow: var(--rt-shadow-focus-ring);
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
+
+        &--current {
+            border-color: var(--rt-color-border-strong);
+            background: var(--rt-color-bg-surface-subtle);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &:disabled {
+            cursor: default;
+            opacity: 0.6;
+        }
+    }
+
+    &__gap {
+        padding: 0 var(--rt-space-xs);
+        color: var(--rt-color-text-muted);
+    }
+
+    &__per-page {
+        display: flex;
+        align-items: center;
+        gap: var(--rt-space-sm);
+    }
+
+    &__per-page-label {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+    }
+}
+
+// Узкий контейнер: прячем числовую полосу и диапазон, показываем compact-форму.
+@container (max-width: 460px) {
+    .rt-pagination__nav,
+    .rt-pagination__range {
+        display: none;
+    }
+
+    .rt-pagination__compact {
+        display: flex;
+    }
+}

package/src/lib/components/photo-viewer/rt-photo-viewer.component.scss

@@ -0,0 +1,131 @@
+:host {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    background: var(--rt-color-bg-inverse);
+
+    .rt-photo-viewer {
+        // Обёртка существует ради ловушки фокуса и повторяет размеры хоста:
+        // display: contents ломает ловушку — ей нужен настоящий бокс
+        &__surface {
+            position: absolute;
+            inset: 0;
+        }
+
+        &__bar {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-4) var(--rt-space-5);
+            color: var(--rt-color-text-inverse);
+            gap: var(--rt-space-4);
+        }
+
+        &__counter {
+            font-size: var(--rt-text-sm);
+            font-variant-numeric: tabular-nums;
+        }
+
+        &__track {
+            display: flex;
+            overflow: auto hidden;
+            width: 100%;
+            height: 100%;
+
+            // Свайп, инерцию и прилипание кадра даёт браузер
+            scroll-snap-type: x mandatory;
+            scrollbar-width: none;
+        }
+
+        &__slide {
+            display: flex;
+            flex: 0 0 100%;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-10) var(--rt-space-4);
+            margin: 0;
+            scroll-snap-align: center;
+
+            picture {
+                display: flex;
+                width: 100%;
+                height: 100%;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        // Кадры вертикальные, поэтому ограничение по высоте важнее, чем по ширине
+        &__image {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+
+        // Панель правки: светлая полоса поверх тёмного просмотра — она рабочая
+        // область, а не часть кадра
+        &__panel {
+            position: absolute;
+            z-index: 1;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            padding: var(--rt-space-4) var(--rt-space-5);
+            background: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-primary);
+        }
+
+        /* TODO: отрефакторить это дерьмо */
+        &__bar rt-icon-button,
+        &__arrow-prev,
+        &__arrow-next {
+            --rt-icon-button-color: var(--rt-color-text-inverse);
+            --rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);
+
+            border-radius: var(--rt-radius-md);
+            background: color-mix(in srgb, var(--rt-color-bg-inverse) 55%, transparent);
+        }
+
+        &__arrow-prev,
+        &__arrow-next {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &__arrow-prev {
+            left: var(--rt-space-3);
+        }
+
+        &__arrow-next {
+            right: var(--rt-space-3);
+        }
+    }
+
+    // С панелью кадру нужно место под неё, иначе низ снимка уходит под полосу
+    &:has(.rt-photo-viewer__panel) {
+        .rt-photo-viewer__slide {
+            padding-bottom: var(--rt-space-20);
+        }
+    }
+
+    @media (width <= 700px) {
+        .rt-photo-viewer {
+            &__arrow-prev,
+            &__arrow-next {
+                display: none;
+            }
+
+            &__slide {
+                padding: var(--rt-space-12) 0;
+            }
+        }
+    }
+}