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

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

@@ -1,98 +1,104 @@
-/* rt-timeline — вертикальный таймлайн-степпер в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-timeline` висит
-   и на `<rt-timeline>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-timeline — вертикальный таймлайн-степпер в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-timeline` висит
+       и на `<rt-timeline>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-timeline {
-    display: block;
+    rt-timeline {
+        display: block;
 
-    .rt-timeline {
-        display: flex;
-        flex-direction: column;
-        padding: 0;
-        margin: 0;
-        list-style: none;
+        .rt-timeline {
+            --rt-timeline-dot-radius: var(--rt-radius-full);
+            --rt-timeline-dot-shadow: var(--rt-shadow-step-indicator);
+            --rt-timeline-dot-border-width: var(--rt-border-width-thin);
 
-        &__item {
             display: flex;
-            gap: var(--rt-space-sm);
+            flex-direction: column;
+            padding: 0;
+            margin: 0;
+            list-style: none;
+
+            &__item {
+                display: flex;
+                gap: var(--rt-space-sm);
 
-            // Последний шаг без линии — не растягиваем хвост под ним.
-            &:last-child {
-                .rt-timeline__body {
-                    padding-block-end: 0;
+                // Последний шаг без линии — не растягиваем хвост под ним.
+                &:last-child {
+                    .rt-timeline__body {
+                        padding-block-end: 0;
+                    }
                 }
             }
-        }
 
-        &__rail {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            inline-size: 16px;
-        }
+            &__rail {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                inline-size: 16px;
+            }
+
+            &__dot {
+                box-sizing: border-box;
+                flex: none;
+                border-radius: var(--rt-timeline-dot-radius);
+                background: var(--rt-color-stepper-track);
+                block-size: 10px;
+                inline-size: 10px;
+                margin-block-start: var(--rt-space-xs);
+
+                &--status--complete {
+                    background: var(--rt-color-stepper-progress);
+                }
 
-        &__dot {
-            box-sizing: border-box;
-            flex: none;
-            border-radius: var(--rt-radius-full);
-            background: var(--rt-color-stepper-track);
-            block-size: 10px;
-            inline-size: 10px;
-            margin-block-start: var(--rt-space-xs);
+                &--status--current {
+                    background: var(--rt-color-stepper-current);
+                    block-size: 14px;
+                    box-shadow: var(--rt-timeline-dot-shadow);
+                    inline-size: 14px;
+                    margin-block-start: var(--rt-space-2xs);
+                }
 
-            &--status--complete {
-                background: var(--rt-color-stepper-progress);
+                &--status--pending {
+                    border: var(--rt-timeline-dot-border-width) solid var(--rt-color-stepper-track);
+                    background: transparent;
+                }
             }
 
-            &--status--current {
-                background: var(--rt-color-stepper-current);
-                block-size: 14px;
-                box-shadow: var(--rt-shadow-step-indicator);
-                inline-size: 14px;
+            // Соединительная линия тянется от точки вниз до следующего шага.
+            &__line {
+                flex: 1 1 auto;
+                background: var(--rt-color-stepper-track);
+                inline-size: 2px;
                 margin-block-start: var(--rt-space-2xs);
             }
 
-            &--status--pending {
-                border: var(--rt-border-width-thin) solid var(--rt-color-stepper-track);
-                background: transparent;
+            &__body {
+                display: flex;
+                flex-direction: column;
+                gap: var(--rt-space-2xs);
+                padding-block-end: var(--rt-space-md);
             }
-        }
-
-        // Соединительная линия тянется от точки вниз до следующего шага.
-        &__line {
-            flex: 1 1 auto;
-            background: var(--rt-color-stepper-track);
-            inline-size: 2px;
-            margin-block-start: var(--rt-space-2xs);
-        }
-
-        &__body {
-            display: flex;
-            flex-direction: column;
-            gap: var(--rt-space-2xs);
-            padding-block-end: var(--rt-space-md);
-        }
 
-        &__label {
-            color: var(--rt-color-text-primary);
-            font-size: var(--rt-text-sm);
-            line-height: var(--rt-leading-snug);
-        }
+            &__label {
+                color: var(--rt-color-text-primary);
+                font-size: var(--rt-text-sm);
+                line-height: var(--rt-leading-snug);
+            }
 
-        &__meta {
-            display: inline-flex;
-            flex-wrap: wrap;
-            color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-xs);
-            gap: var(--rt-space-xs);
-            line-height: var(--rt-leading-snug);
-        }
+            &__meta {
+                display: inline-flex;
+                flex-wrap: wrap;
+                color: var(--rt-color-text-muted);
+                font-size: var(--rt-text-xs);
+                gap: var(--rt-space-xs);
+                line-height: var(--rt-leading-snug);
+            }
 
-        // Точка-разделитель между временем и инициатором.
-        &__actor:before {
-            content: '·';
-            margin-inline-end: var(--rt-space-xs);
+            // Точка-разделитель между временем и инициатором.
+            &__actor:before {
+                content: '·';
+                margin-inline-end: var(--rt-space-xs);
+            }
         }
     }
 }

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

@@ -43,6 +43,14 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
 - Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
 
+## Края
+
+- **Нулевая длительность не значит «висит, пока не закроют».** `duration: 0` — это таймер на
+  ноль миллисекунд: тост гасит себя сразу после первой отрисовки. Держать его открытым умеет
+  только пауза таймера — признак `interacting` либо развёрнутая стопка.
+- **В матрице каждому тосту ставится `[interacting]="true"`.** Иначе ячейки гаснут одна за
+  другой, пока смотришь на показ, и кадр снимается с пустой сетки.
+
 ## Доступность
 
 Стопка — `role="region"` с переведённой подписью, каждый тост — `role="status"` с

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

@@ -1,201 +1,210 @@
-.rt-toast {
-    --y: translateY(100%);
-    --lift-amount: calc(var(--lift) * var(--gap));
-
-    position: absolute;
-    z-index: var(--z-index);
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    padding: var(--rt-space-4);
-    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-surface);
-    box-shadow: var(--rt-shadow-card);
-    color: var(--rt-color-text-primary);
-    font-size: var(--rt-text-sm);
-    font-weight: var(--rt-font-weight-medium);
-    gap: var(--rt-space-2);
-    line-height: var(--rt-leading-normal);
-    opacity: 0;
-    outline: none;
-    overflow-wrap: anywhere;
-    touch-action: none;
-    transform: var(--y);
-    transition:
-        transform var(--rt-duration-slow),
-        opacity var(--rt-duration-slow),
-        height var(--rt-duration-slow),
-        box-shadow var(--rt-duration-base);
-
-    &:after {
+@layer rt-kit.components {
+    .rt-toast {
+        --rt-toast-radius: var(--rt-radius-md);
+        --rt-toast-border-width: var(--rt-border-width-thin);
+        --rt-toast-shadow: var(--rt-shadow-card);
+        --rt-toast-enter-duration: var(--rt-duration-slow);
+        --rt-toast-shadow-duration: var(--rt-duration-base);
+        --rt-toast-leave-duration: var(--rt-duration-slower);
+        --rt-toast-fade-duration: var(--rt-duration-fast);
+        --y: translateY(100%);
+        --lift-amount: calc(var(--lift) * var(--gap));
+
         position: absolute;
-        bottom: 100%;
-        left: 0;
+        z-index: var(--z-index);
+        display: flex;
         width: 100%;
-        height: calc(var(--gap) + 1px);
-        content: '';
-    }
-
-    > * {
-        transition: opacity var(--rt-duration-slow);
-    }
-
-    &--y--top {
-        --y: translateY(-100%);
-        --lift: 1;
-
-        top: 0;
-    }
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-space-4);
+        border: var(--rt-toast-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-toast-radius);
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-toast-shadow);
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-medium);
+        gap: var(--rt-space-2);
+        line-height: var(--rt-leading-normal);
+        opacity: 0;
+        outline: none;
+        overflow-wrap: anywhere;
+        touch-action: none;
+        transform: var(--y);
+        transition:
+            transform var(--rt-toast-enter-duration),
+            opacity var(--rt-toast-enter-duration),
+            height var(--rt-toast-enter-duration),
+            box-shadow var(--rt-toast-shadow-duration);
+
+        &:after {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            width: 100%;
+            height: calc(var(--gap) + 1px);
+            content: '';
+        }
 
-    &--y--bottom {
-        --y: translateY(100%);
-        --lift: -1;
+        > * {
+            transition: opacity var(--rt-toast-enter-duration);
+        }
 
-        bottom: 0;
-    }
+        &--y--top {
+            --y: translateY(-100%);
+            --lift: 1;
 
-    &--filled {
-        .rt-toast__description {
-            color: inherit;
+            top: 0;
         }
 
-        &.rt-toast--severity--info {
-            border-color: var(--rt-color-state-info-bg);
-            background: var(--rt-color-state-info-bg);
-            color: var(--rt-color-state-info);
-        }
+        &--y--bottom {
+            --y: translateY(100%);
+            --lift: -1;
 
-        &.rt-toast--severity--success {
-            border-color: var(--rt-color-state-success-bg);
-            background: var(--rt-color-state-success-bg);
-            color: var(--rt-color-state-success);
+            bottom: 0;
         }
 
-        &.rt-toast--severity--warning {
-            border-color: var(--rt-color-state-warning-bg);
-            background: var(--rt-color-state-warning-bg);
-            color: var(--rt-color-state-warning);
+        &--filled {
+            .rt-toast__description {
+                color: inherit;
+            }
+
+            &.rt-toast--severity--info {
+                border-color: var(--rt-color-state-info-bg);
+                background: var(--rt-color-state-info-bg);
+                color: var(--rt-color-state-info);
+            }
+
+            &.rt-toast--severity--success {
+                border-color: var(--rt-color-state-success-bg);
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
+
+            &.rt-toast--severity--warning {
+                border-color: var(--rt-color-state-warning-bg);
+                background: var(--rt-color-state-warning-bg);
+                color: var(--rt-color-state-warning);
+            }
+
+            &.rt-toast--severity--danger {
+                border-color: var(--rt-color-state-danger-bg);
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
         }
 
-        &.rt-toast--severity--danger {
-            border-color: var(--rt-color-state-danger-bg);
-            background: var(--rt-color-state-danger-bg);
-            color: var(--rt-color-state-danger);
-        }
-    }
+        &--mounted {
+            --y: translateY(0);
 
-    &--mounted {
-        --y: translateY(0);
+            opacity: 1;
+        }
 
-        opacity: 1;
-    }
+        &:not(.rt-toast--expanded, .rt-toast--front) {
+            --scale: var(--toasts-before) * 0.05 + 1;
+            --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
 
-    &:not(.rt-toast--expanded, .rt-toast--front) {
-        --scale: var(--toasts-before) * 0.05 + 1;
-        --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+            height: var(--front-toast-height);
 
-        height: var(--front-toast-height);
+            > * {
+                opacity: 0;
+            }
+        }
 
-        > * {
+        &--hidden {
             opacity: 0;
+            pointer-events: none;
         }
-    }
-
-    &--hidden {
-        opacity: 0;
-        pointer-events: none;
-    }
 
-    &--mounted.rt-toast--expanded {
-        --y: translateY(calc(var(--lift) * var(--offset)));
+        &--mounted.rt-toast--expanded {
+            --y: translateY(calc(var(--lift) * var(--offset)));
 
-        height: var(--initial-height);
-    }
+            height: var(--initial-height);
+        }
 
-    &--removed.rt-toast--front {
-        --y: translateY(calc(var(--lift) * -100%));
+        &--removed.rt-toast--front {
+            --y: translateY(calc(var(--lift) * -100%));
 
-        opacity: 0;
-    }
-
-    &--removed.rt-toast--expanded:not(.rt-toast--front) {
-        --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+            opacity: 0;
+        }
 
-        opacity: 0;
-    }
+        &--removed.rt-toast--expanded:not(.rt-toast--front) {
+            --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
 
-    &--removed:not(.rt-toast--front, .rt-toast--expanded) {
-        --y: translateY(40%);
+            opacity: 0;
+        }
 
-        opacity: 0;
-        transition:
-            transform var(--rt-duration-slower),
-            opacity var(--rt-duration-base);
-    }
+        &--removed:not(.rt-toast--front, .rt-toast--expanded) {
+            --y: translateY(40%);
 
-    &--removed:not(.rt-toast--front):before {
-        position: absolute;
-        content: '';
-        inset: 0;
-        transform: scaleY(2);
-    }
+            opacity: 0;
+            transition:
+                transform var(--rt-toast-leave-duration),
+                opacity var(--rt-toast-shadow-duration);
+        }
 
-    &__icon {
-        flex-shrink: 0;
-    }
+        &--removed:not(.rt-toast--front):before {
+            position: absolute;
+            content: '';
+            inset: 0;
+            transform: scaleY(2);
+        }
 
-    &__content {
-        display: flex;
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        gap: var(--rt-space-0-5);
-    }
+        &__icon {
+            flex-shrink: 0;
+        }
 
-    &__description {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-regular);
-    }
+        &__content {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+        }
 
-    &__meta {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-regular);
-    }
+        &__description {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+        }
 
-    &__actions {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--rt-space-2);
-        margin-block-start: var(--rt-space-1);
-    }
+        &__meta {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+        }
 
-    & &__action {
-        align-self: flex-start;
-    }
+        &__actions {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-2);
+            margin-block-start: var(--rt-space-1);
+        }
 
-    & &__close {
-        flex-shrink: 0;
-        align-self: flex-start;
-        margin-inline-start: auto;
-        opacity: 0;
-        transition: opacity var(--rt-duration-fast);
-    }
+        & &__action {
+            align-self: flex-start;
+        }
 
-    &:hover &__close,
-    & &__close:focus-visible {
-        opacity: 1;
-    }
+        & &__close {
+            flex-shrink: 0;
+            align-self: flex-start;
+            margin-inline-start: auto;
+            opacity: 0;
+            transition: opacity var(--rt-toast-fade-duration);
+        }
 
-    @media (prefers-reduced-motion) {
-        transition: none;
+        &:hover &__close,
+        & &__close:focus-visible {
+            opacity: 1;
+        }
 
-        > * {
+        @media (prefers-reduced-motion) {
             transition: none;
+
+            > * {
+                transition: none;
+            }
         }
     }
 }

package/src/lib/components/toast/rt-toaster.component.scss

@@ -1,45 +1,47 @@
-.rt-toaster {
-    --width: 356px;
-    --toaster-offset: 32px;
-
-    position: fixed;
-    z-index: 1100;
-    width: var(--width);
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    outline: none;
-
-    &--x--right {
-        right: max(var(--toaster-offset), env(safe-area-inset-right));
-    }
+@layer rt-kit.components {
+    .rt-toaster {
+        --width: 356px;
+        --toaster-offset: 32px;
+
+        position: fixed;
+        z-index: 1100;
+        width: var(--width);
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        outline: none;
+
+        &--x--right {
+            right: max(var(--toaster-offset), env(safe-area-inset-right));
+        }
 
-    &--x--left {
-        left: max(var(--toaster-offset), env(safe-area-inset-left));
-    }
+        &--x--left {
+            left: max(var(--toaster-offset), env(safe-area-inset-left));
+        }
 
-    &--x--center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
+        &--x--center {
+            left: 50%;
+            transform: translateX(-50%);
+        }
 
-    &--y--top {
-        top: max(var(--toaster-offset), env(safe-area-inset-top));
-    }
+        &--y--top {
+            top: max(var(--toaster-offset), env(safe-area-inset-top));
+        }
 
-    &--y--bottom {
-        bottom: max(var(--toaster-offset), env(safe-area-inset-bottom));
-    }
+        &--y--bottom {
+            bottom: max(var(--toaster-offset), env(safe-area-inset-bottom));
+        }
 
-    @media (width <= 480px) {
-        --toaster-offset: 16px;
+        @media (width <= 480px) {
+            --toaster-offset: 16px;
 
-        right: var(--toaster-offset);
-        left: var(--toaster-offset);
-        width: auto;
+            right: var(--toaster-offset);
+            left: var(--toaster-offset);
+            width: auto;
 
-        &--x--center {
-            transform: none;
+            &--x--center {
+                transform: none;
+            }
         }
     }
 }