@rt-tools/ui-kit-v2 0.42.0 → 0.43.0

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

@@ -0,0 +1,281 @@
+@layer rt-kit.components {
+    /* Рейка 50 по левому краю окна. На телефоне та же часть становится строкой 50: порог свой,
+       телефонный, а не общий узкий экран: планшет оставляет рейку. */
+    .rt-page-rail {
+        --rt-page-rail-border-width: var(--rt-border-width-thin);
+        --rt-page-rail-plate-radius: var(--rt-radius-md);
+        --rt-page-rail-marker-radius: var(--rt-radius-full);
+        --rt-page-rail-transition-duration: var(--rt-duration-fast);
+
+        position: sticky;
+        z-index: var(--rt-z-sticky);
+        top: 0;
+        display: flex;
+        width: 50px;
+        height: 100dvh;
+        box-sizing: border-box;
+        flex: none;
+        flex-direction: column;
+        background-color: var(--rt-nav-header-color-bg);
+
+        /* Граница лежит поверх рейки и ширины не отнимает: пункт занимает все 50, плашка стоит в 7 от края. */
+        &:after {
+            position: absolute;
+            width: var(--rt-page-rail-border-width);
+            background-color: var(--rt-color-border-default);
+            content: '';
+            inset-block: 0;
+            inset-inline-end: 0;
+            pointer-events: none;
+        }
+
+        &__burger {
+            display: none;
+            width: 36px;
+            height: 36px;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+        }
+
+        &__logo {
+            display: flex;
+            height: 64px;
+            box-sizing: border-box;
+            flex: none;
+            justify-content: center;
+            padding-top: var(--rt-space-5);
+        }
+
+        /* Разделы не встают: прокручивается только этот список, подвал стоит на месте. */
+        &__sections {
+            display: flex;
+            min-height: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            -ms-overflow-style: none;
+            overflow-y: auto;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        &__item {
+            display: flex;
+            width: 100%;
+            height: 50px;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: var(--rt-nav-item-color);
+            cursor: pointer;
+            text-decoration: none;
+
+            &:hover .rt-page-rail-plate,
+            &--open .rt-page-rail-plate {
+                background-color: var(--rt-nav-item-color-bg-active);
+                color: var(--rt-nav-item-color-hover);
+            }
+
+            &--active .rt-page-rail-plate {
+                border-color: var(--rt-color-border-default);
+                background-color: var(--rt-nav-item-color-bg-active);
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+
+            &:focus-visible .rt-page-rail-plate {
+                outline: 1px dashed var(--rt-nav-color-focus);
+                outline-offset: 1px;
+            }
+
+            &--disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+
+            &--disabled:hover .rt-page-rail-plate {
+                background-color: transparent;
+                color: inherit;
+            }
+        }
+
+        &__page {
+            display: none;
+        }
+
+        /* Панель поверх страницы и вкладок: страница и вкладки на месте. */
+        &__panel {
+            position: fixed;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            bottom: 0;
+            left: 50px;
+            display: flex;
+            overflow: hidden auto;
+            width: 220px;
+            box-sizing: border-box;
+            flex-direction: column;
+            padding: var(--rt-space-5) calc(var(--rt-space-2) + var(--rt-space-1));
+            background-color: var(--rt-nav-panel-color-bg);
+            gap: var(--rt-space-8);
+        }
+
+        /* Граница панели тоже лежит поверх: столбец пунктов шириной 196, как в макете. */
+        &__panel:after {
+            position: absolute;
+            width: var(--rt-page-rail-border-width);
+            background-color: var(--rt-color-border-default);
+            content: '';
+            inset-block: 0;
+            inset-inline-end: 0;
+            pointer-events: none;
+        }
+
+        &__group {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+        }
+
+        &__group-title {
+            display: flex;
+            height: 32px;
+            align-items: center;
+            color: var(--rt-nav-panel-group-color);
+            font-size: var(--rt-nav-panel-group-font-size);
+            font-weight: var(--rt-nav-panel-group-font-weight);
+            padding-inline: var(--rt-space-2);
+        }
+
+        &__panel-item {
+            display: flex;
+            width: 100%;
+            height: 32px;
+            box-sizing: border-box;
+            align-items: center;
+            padding: var(--rt-nav-panel-item-padding);
+            border: 0;
+            border-radius: var(--rt-page-rail-plate-radius);
+            background: transparent;
+            color: var(--rt-nav-panel-item-color);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--rt-nav-panel-item-font-size);
+            font-weight: var(--rt-nav-panel-item-font-weight);
+            text-align: start;
+            text-decoration: none;
+
+            &:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-hover);
+            }
+
+            &--active,
+            &--active:hover {
+                background-color: var(--rt-nav-panel-item-color-bg-active);
+                color: var(--rt-nav-panel-item-color-active);
+            }
+
+            &--disabled {
+                color: var(--rt-nav-color-disabled);
+                cursor: default;
+            }
+        }
+
+        /* Столбец 240 поверх страницы на подложке: как `rt-side-menu` на узком экране. */
+        &__phone-backdrop {
+            position: absolute;
+            padding: 0;
+            border: 0;
+            background: var(--rt-color-bg-overlay);
+            cursor: pointer;
+            inset: 0;
+        }
+
+        &__phone-column {
+            position: relative;
+            display: flex;
+            width: 240px;
+            height: 100%;
+        }
+
+        &__phone-menu {
+            position: fixed;
+            z-index: var(--rt-z-fixed);
+            inset: 0;
+        }
+
+        @media (width <= 768px) {
+            width: 100%;
+            height: 50px;
+            flex-direction: row;
+            align-items: center;
+            gap: var(--rt-space-1);
+            padding-inline: calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-2);
+
+            &:after {
+                width: auto;
+                height: var(--rt-page-rail-border-width);
+                inset: auto 0 0;
+            }
+
+            &__burger {
+                display: flex;
+            }
+
+            &__logo,
+            &__sections {
+                display: none;
+            }
+
+            &__page {
+                display: flex;
+                min-width: 0;
+                flex: 1 1 auto;
+                align-items: center;
+            }
+        }
+    }
+
+    .rt-page-rail-plate {
+        position: relative;
+        display: flex;
+        width: 36px;
+        height: 36px;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        border: var(--rt-page-rail-border-width) solid transparent;
+        border-radius: var(--rt-page-rail-plate-radius);
+        transition: background-color var(--rt-page-rail-transition-duration) linear;
+
+        /* Раздел без значка: список разделов общий с горизонтальной шапкой, где значок не обязателен. */
+        &__letter {
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: 1;
+        }
+
+        &__marker {
+            position: absolute;
+            top: calc(var(--rt-space-1) - var(--rt-page-rail-border-width));
+            right: calc(var(--rt-space-1) - var(--rt-page-rail-border-width));
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            border-radius: var(--rt-page-rail-marker-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+@layer rt-kit.components {
+    /* Ряд вкладок: аватар 16, имя и указатель, кнопка 32. */
+    .rt-page-user {
+        --rt-page-user-avatar-radius: var(--rt-radius-full);
+        --rt-page-user-avatar-border-width: var(--rt-border-width-thin);
+
+        display: inline-flex;
+        flex: none;
+
+        &__button {
+            display: inline-flex;
+            height: 32px;
+            align-items: center;
+            padding: 0 var(--rt-space-2);
+            border: 0;
+            background: transparent;
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+            gap: var(--rt-space-2);
+
+            &:focus-visible {
+                outline: 1px dashed var(--rt-nav-color-focus);
+                outline-offset: -1px;
+            }
+        }
+
+        &__avatar {
+            display: inline-flex;
+            width: 16px;
+            height: 16px;
+            box-sizing: border-box;
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-page-user-avatar-border-width) solid var(--rt-nav-item-color-caret);
+            border-radius: var(--rt-page-user-avatar-radius);
+            font-size: var(--rt-text-2xs);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__name {
+            color: var(--rt-nav-item-color);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+            white-space: nowrap;
+        }
+
+        &__caret {
+            display: inline-flex;
+            flex: none;
+            color: var(--rt-nav-item-color-caret);
+        }
+
+        /* Подвал рейки на широком экране: ячейка 50 и аватар 18. */
+        @media (width > 768px) {
+            .rt-page-actions--rail & {
+                width: 50px;
+                height: 50px;
+            }
+
+            .rt-page-actions--rail &__button {
+                width: 100%;
+                height: 100%;
+                justify-content: center;
+                padding: 0;
+            }
+
+            .rt-page-actions--rail &__avatar {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+}

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

@@ -288,5 +288,10 @@
         &__user--is-open {
             background-color: var(--rt-nav-item-color-bg-active);
         }
+
+        /* Рейка сама держит своё место: хост в раскладке не участвует. */
+        &--vertical {
+            display: contents;
+        }
     }
 }

package/src/lib/components/page-header/stories/component/test-page-header-vertical.component.scss

@@ -0,0 +1,72 @@
+@layer rt-kit.components {
+    .app-rail-screen {
+        --rt-app-rail-screen-logo-radius: var(--rt-radius-md);
+
+        display: flex;
+        height: 800px;
+        background: var(--rt-color-bg-page);
+        contain: paint;
+
+        @media (width > 768px) {
+            .rt-page-rail {
+                height: 100%;
+            }
+        }
+
+        &__rest {
+            display: flex;
+            min-width: 0;
+            min-height: 0;
+            flex: 1 1 0;
+            flex-direction: column;
+        }
+
+        & &__tabs {
+            --rt-tabs-list-padding-inline: var(--rt-space-2) 0;
+            --rt-tabs-arrow-fade: var(--rt-nav-header-color-bg);
+
+            background-color: var(--rt-nav-header-color-bg);
+        }
+
+        &__logo {
+            width: 24px;
+            height: 24px;
+            border-radius: var(--rt-app-rail-screen-logo-radius);
+            background-color: var(--rt-color-action-primary);
+        }
+
+        &__page {
+            overflow: hidden;
+            min-height: 0;
+            flex: 1 1 0;
+            padding: var(--rt-space-4) var(--rt-space-5) 0;
+        }
+
+        &__assistant {
+            width: 420px;
+            height: 100%;
+            box-sizing: border-box;
+            flex: none;
+            border-inline-start: 1px solid var(--rt-color-border-default);
+        }
+
+        @media (width <= 768px) {
+            height: 100dvh;
+            flex-direction: column;
+
+            &__page {
+                padding: calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-4) var(--rt-space-2);
+                background-color: var(--rt-color-bg-surface);
+            }
+
+            &__assistant {
+                position: absolute;
+                z-index: var(--rt-z-fixed);
+                width: 100%;
+                background-color: var(--rt-color-bg-surface);
+                border-inline-start: 0;
+                inset: 0;
+            }
+        }
+    }
+}

package/src/lib/components/page-header/stories/component/test-page-table.component.scss

@@ -0,0 +1,81 @@
+@layer rt-kit.components {
+    /* Содержимое страницы кадров: таблица в окне с прокруткой и подвал пагинации под ней. */
+    .app-page-table {
+        display: flex;
+        height: 100%;
+        min-height: 0;
+        flex-direction: column;
+
+        &__window {
+            overflow: auto hidden;
+            min-height: 0;
+            flex: 1 1 0;
+        }
+
+        /* Подвал кадров: высота 40, кнопки и поле 32, подпись в одну строку. */
+        &__pagination {
+            --rt-pagination-padding-y: var(--rt-space-1);
+            --rt-pagination-padding-x: var(--rt-space-1);
+            --rt-pagination-box-size: var(--rt-control-height-sm);
+            --rt-pagination-field-height: var(--rt-control-height-sm);
+            --rt-pagination-per-page-label-white-space: nowrap;
+
+            flex: none;
+        }
+
+        @media (width > 768px) {
+            &__table {
+                min-width: 1570px;
+                table-layout: fixed;
+            }
+
+            &__table th {
+                box-sizing: border-box;
+            }
+
+            /* Длинное значение в широкой таблице кадров — в одну строку с многоточием. */
+            &__table td {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            /* Ширины колонок кадров: в сумме 1570. */
+            .cdk-column-dates {
+                width: 230px;
+            }
+
+            .cdk-column-place {
+                width: 170px;
+            }
+
+            .cdk-column-guest {
+                width: 180px;
+            }
+
+            .cdk-column-contact {
+                width: 200px;
+            }
+
+            .cdk-column-party {
+                width: 110px;
+            }
+
+            .cdk-column-source {
+                width: 130px;
+            }
+
+            .cdk-column-status {
+                width: 190px;
+            }
+
+            .cdk-column-payment {
+                width: 170px;
+            }
+
+            .cdk-column-sum {
+                width: 190px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+@layer rt-kit.components {
+    /* Кнопка стоит в ряду шапки прямым участником: своего места у этой части нет. */
+    .rt-page-header-user {
+        display: contents;
+    }
+}

package/src/lib/components/stepper/CONTEXT.md

@@ -14,6 +14,32 @@
 
 Выходов нет — шаги переключает потребитель. Описание шага необязательно.
 
+Полоса тянется по ширине места, от узкой панели в 280 px до любой. Шагов сколько угодно, текущий —
+любой.
+
+## Цвета
+
+Цвета — ручки потребителя `--rt-stepper-*`: кит их не объявляет, приложение задаёт их правилом на
+`rt-stepper` или на любом родителе. Пока не задано, работает запасное значение — токен темы.
+Объявить их на хосте нельзя: объявление на хосте перебило бы значение, унаследованное от родителя.
+
+| свойство                              | что красит                    | умолчание                     |
+| ------------------------------------- | ----------------------------- | ----------------------------- |
+| `--rt-stepper-track-color`            | трек и будущие точки          | `--rt-color-stepper-track`    |
+| `--rt-stepper-progress-color`         | заполнение и пройденные точки | `--rt-color-stepper-progress` |
+| `--rt-stepper-current-color`          | текущая точка                 | `--rt-color-stepper-current`  |
+| `--rt-stepper-label-color`            | подпись текущего шага         | `--rt-stepper-current-color`  |
+| `--rt-stepper-description-color`      | описание под полосой          | `--rt-color-text-primary`     |
+| `--rt-stepper-point-shadow`           | ореол текущей точки           | `--rt-shadow-step-indicator`  |
+| `--rt-stepper-inset`                  | отступ трека, точек и подписи | `0`                           |
+| `--rt-stepper-line-color`             | линия между метками списка    | `--rt-color-border-default`   |
+| `--rt-stepper-step-label-color`       | подпись шага в списке         | `--rt-color-text-primary`     |
+| `--rt-stepper-step-description-color` | описание шага в списке        | `--rt-color-text-muted`       |
+| `--rt-stepper-mark-<состояние>-bg`    | фон метки списка              | по состоянию                  |
+| `--rt-stepper-mark-<состояние>-color` | цифра метки списка            | по состоянию                  |
+
+Состояния метки: `complete`, `current`, `upcoming`, `neutral`.
+
 ## Вертикальный список
 
 `orientation="vertical"` рисует `<ol>`: метка с номером, подпись, описание, линия между метками.
@@ -36,8 +62,14 @@
 - Описание разбивается на абзацы по пустой строке (`\n\n`); пустое описание не создаёт абзаца.
 - Точки спрятаны от скринридера — прогресс он читает с самой полосы: `role="progressbar"`,
   `aria-valuemin/max/now` и `aria-valuetext` с подписью текущего шага.
-- Подпись текущего шага прижимается к началу, центру или концу полосы в зависимости от того,
-  где стоит шаг.
+- Подпись текущего шага стоит в отрезке полосы: на первом шаге вся полоса и прижим к началу, на
+  последнем — к концу, на среднем отрезок с центром на доле шага шириной в два расстояния до
+  ближнего края. Текущая точка шире соседних, поэтому её центр отходит от центра отрезка не больше
+  чем на 4 px. Если такой отрезок уже половины полосы, подпись берёт всю полосу и прижимается к
+  ближнему краю. За полосу подпись не выходит, длинная переносится и растит полосу вниз. Так же
+  собран макет.
+- Ореол текущей точки на первом и последнем шаге выходит за полосу на 4 px. Родитель, который
+  обрезает содержимое, задаёт `--rt-stepper-inset` не меньше 4 px.
 
 ## Рядом