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

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

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

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

@@ -1,130 +1,134 @@
-/* rt-photo-viewer — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
-   `.rt-photo-viewer` — сам хост (шаблон начинается с ng-container, класс ставит host). */
-
-.rt-photo-viewer {
-    display: block;
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
-    background: var(--rt-color-bg-inverse);
-
-    // Обёртка существует ради ловушки фокуса и повторяет размеры хоста:
-    // display: contents ломает ловушку — ей нужен настоящий бокс
-    &__surface {
-        position: absolute;
-        inset: 0;
-    }
+@layer rt-kit.components {
+    /* rt-photo-viewer — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-photo-viewer` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
-    &__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);
-    }
+    .rt-photo-viewer {
+        --rt-photo-viewer-control-radius: var(--rt-radius-md);
 
-    &__counter {
-        font-size: var(--rt-text-sm);
-        font-variant-numeric: tabular-nums;
-    }
-
-    &__track {
-        display: flex;
-        overflow: auto hidden;
-        width: 100%;
-        height: 100%;
+        display: block;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+        background: var(--rt-color-bg-inverse);
+
+        // Обёртка существует ради ловушки фокуса и повторяет размеры хоста:
+        // display: contents ломает ловушку — ей нужен настоящий бокс
+        &__surface {
+            position: absolute;
+            inset: 0;
+        }
 
-        // Свайп, инерцию и прилипание кадра даёт браузер
-        scroll-snap-type: x mandatory;
-        scrollbar-width: none;
-    }
+        &__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);
+        }
 
-    &__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;
+        &__counter {
+            font-size: var(--rt-text-sm);
+            font-variant-numeric: tabular-nums;
+        }
 
-        picture {
+        &__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);
+        // Кадры вертикальные, поэтому ограничение по высоте важнее, чем по ширине
+        &__image {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
 
-        border-radius: var(--rt-radius-md);
-        background: color-mix(in srgb, var(--rt-color-bg-inverse) 55%, transparent);
-    }
+        // Панель правки: светлая полоса поверх тёмного просмотра — она рабочая
+        // область, а не часть кадра
+        &__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);
+        }
 
-    &__arrow-prev,
-    &__arrow-next {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-    }
+        /* 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);
 
-    &__arrow-prev {
-        left: var(--rt-space-3);
-    }
+            border-radius: var(--rt-photo-viewer-control-radius);
+            background: color-mix(in srgb, var(--rt-color-bg-inverse) 55%, transparent);
+        }
 
-    &__arrow-next {
-        right: var(--rt-space-3);
-    }
+        &__arrow-prev,
+        &__arrow-next {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
 
-    // С панелью кадру нужно место под неё, иначе низ снимка уходит под полосу
-    &:has(.rt-photo-viewer__panel) {
-        .rt-photo-viewer__slide {
-            padding-bottom: var(--rt-space-20);
+        &__arrow-prev {
+            left: var(--rt-space-4);
         }
-    }
 
-    @media (width <= 700px) {
-        &__arrow-prev,
         &__arrow-next {
-            display: none;
+            right: var(--rt-space-4);
         }
 
-        &__slide {
-            padding: var(--rt-space-12) 0;
+        // С панелью кадру нужно место под неё, иначе низ снимка уходит под полосу
+        &:has(.rt-photo-viewer__panel) {
+            .rt-photo-viewer__slide {
+                padding-bottom: var(--rt-space-20);
+            }
+        }
+
+        @media (width <= 700px) {
+            &__arrow-prev,
+            &__arrow-next {
+                display: none;
+            }
+
+            &__slide {
+                padding: var(--rt-space-12) 0;
+            }
         }
     }
 }

package/src/lib/components/rich-editor/rt-rich-editor.component.scss

@@ -1,71 +1,75 @@
-// Базовая тема Quill (snow) подключена глобально в project.json приложения (styles).
-// Здесь — только перекрытие цветов на семантические --rt-* токены (dark-aware):
-// нативный snow светлый (иконки #444, границы #ccc) и в тёмной теме не читается.
-.rt-rich-editor {
-    // Хост — flex-колонка (тулбар над контейнером). min-block-size:0 позволяет
-    // ужиматься ниже интринзик-высоты Quill, когда редактор — flex-item в
-    // height-ограниченном родителе (композер в fill-режиме): без этого контейнер
-    // с фиксированной высотой вываливается за ужатый хост и перекрывает соседей.
-    display: flex;
-    flex-direction: column;
-    min-block-size: 0;
+@layer rt-kit.components {
+    // Базовая тема Quill (snow) подключена глобально в project.json приложения (styles).
+    // Здесь — только перекрытие цветов на семантические --rt-* токены (dark-aware):
+    // нативный snow светлый (иконки #444, границы #ccc) и в тёмной теме не читается.
+    .rt-rich-editor {
+        --rt-rich-editor-radius: var(--rt-radius-md);
 
-    .ql-toolbar.ql-snow,
-    .ql-container.ql-snow {
-        border-color: var(--rt-color-border-default);
-    }
+        // Хост — flex-колонка (тулбар над контейнером). min-block-size:0 позволяет
+        // ужиматься ниже интринзик-высоты Quill, когда редактор — flex-item в
+        // height-ограниченном родителе (композер в fill-режиме): без этого контейнер
+        // с фиксированной высотой вываливается за ужатый хост и перекрывает соседей.
+        display: flex;
+        flex-direction: column;
+        min-block-size: 0;
 
-    .ql-toolbar.ql-snow {
-        flex: 0 0 auto;
-        border-start-end-radius: var(--rt-radius-md);
-        border-start-start-radius: var(--rt-radius-md);
-    }
+        .ql-toolbar.ql-snow,
+        .ql-container.ql-snow {
+            border-color: var(--rt-color-border-default);
+        }
 
-    // Native snow задаёт контейнеру Helvetica 13px — возвращаем шрифт приложения.
-    // flex:1 + min-block-size:0 + overflow держат зону ввода внутри хоста —
-    // при нехватке высоты контент скроллится, а не наезжает на контролы.
-    .ql-container.ql-snow {
-        flex: 1 1 auto;
-        border-end-end-radius: var(--rt-radius-md);
-        border-end-start-radius: var(--rt-radius-md);
-        font-family: inherit;
-        font-size: inherit;
-        min-block-size: 0;
-        overflow-y: auto;
-    }
+        .ql-toolbar.ql-snow {
+            flex: 0 0 auto;
+            border-start-end-radius: var(--rt-rich-editor-radius);
+            border-start-start-radius: var(--rt-rich-editor-radius);
+        }
 
-    .ql-editor {
-        background-color: var(--rt-color-bg-surface-subtle);
-        color: var(--rt-color-text-default);
-        min-block-size: 96px;
-    }
+        // Native snow задаёт контейнеру Helvetica 13px — возвращаем шрифт приложения.
+        // flex:1 + min-block-size:0 + overflow держат зону ввода внутри хоста —
+        // при нехватке высоты контент скроллится, а не наезжает на контролы.
+        .ql-container.ql-snow {
+            flex: 1 1 auto;
+            border-end-end-radius: var(--rt-rich-editor-radius);
+            border-end-start-radius: var(--rt-rich-editor-radius);
+            font-family: inherit;
+            font-size: inherit;
+            min-block-size: 0;
+            overflow-y: auto;
+        }
 
-    .ql-editor.ql-blank:before {
-        color: var(--rt-color-text-muted);
-        font-style: normal;
-    }
+        .ql-editor {
+            background-color: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-primary);
+            min-block-size: 96px;
+        }
 
-    // Иконки тулбара — приглушённый цвет по умолчанию (native #444 в dark не виден).
-    .ql-snow .ql-stroke {
-        stroke: var(--rt-color-text-muted);
-    }
+        .ql-editor.ql-blank:before {
+            color: var(--rt-color-text-muted);
+            font-style: normal;
+        }
 
-    .ql-snow .ql-fill {
-        fill: var(--rt-color-text-muted);
-    }
+        // Иконки тулбара — приглушённый цвет по умолчанию (native #444 в dark не виден).
+        .ql-snow .ql-stroke {
+            stroke: var(--rt-color-text-muted);
+        }
 
-    .ql-snow .ql-picker {
-        color: var(--rt-color-text-muted);
-    }
+        .ql-snow .ql-fill {
+            fill: var(--rt-color-text-muted);
+        }
 
-    // Активная/наведённая кнопка — акцентный цвет.
-    .ql-snow .ql-toolbar button:hover .ql-stroke,
-    .ql-snow button.ql-active .ql-stroke {
-        stroke: var(--rt-color-text-link);
-    }
+        .ql-snow .ql-picker {
+            color: var(--rt-color-text-muted);
+        }
+
+        // Активная/наведённая кнопка — акцентный цвет.
+        .ql-snow .ql-toolbar button:hover .ql-stroke,
+        .ql-snow button.ql-active .ql-stroke {
+            stroke: var(--rt-color-text-link);
+        }
 
-    .ql-snow .ql-toolbar button:hover .ql-fill,
-    .ql-snow button.ql-active .ql-fill {
-        fill: var(--rt-color-text-link);
+        .ql-snow .ql-toolbar button:hover .ql-fill,
+        .ql-snow button.ql-active .ql-fill {
+            fill: var(--rt-color-text-link);
+        }
     }
 }