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

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

@@ -1,198 +1,206 @@
-.rt-multiselect {
-    position: relative;
-    display: block;
-    width: 100%;
-
-    /* bordered=false: снимаем только resting-рамку триггера. Объявлено ДО блока
-       __trigger — его :focus и правила --open/--invalid __trigger (равная
-       специфичность) идут ниже по source-order и перекрывают рамку. */
-    &--borderless &__trigger {
-        border-color: transparent;
-    }
+@layer rt-kit.components {
+    .rt-multiselect {
+        --rt-multiselect-caret-transition-duration: var(--rt-duration-fast);
 
-    &__trigger {
-        display: flex;
+        position: relative;
+        display: block;
         width: 100%;
-        min-height: var(--rt-input-height);
-        box-sizing: border-box;
-        align-items: center;
-        padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
-        border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-        border-radius: var(--rt-input-radius);
-        background-color: var(--rt-input-color-bg);
-        color: var(--rt-input-color-text);
-        cursor: pointer;
-
-        /* Триггер — нативный <button>: без явного наследования берёт UA-шрифт
-           (Arial), а не Montserrat от body. */
-        font-family: inherit;
-        font-size: var(--rt-input-font-size);
-        gap: var(--rt-space-sm);
-        line-height: var(--rt-input-line-height);
-        text-align: start;
-        transition: var(--rt-input-transition);
-
-        // :focus (не :focus-visible) — триггер это <button>, у которого
-        // :focus-visible не срабатывает на клик мышью; кольцо нужно и при клике.
-        &:focus {
-            border-color: var(--rt-input-color-border-focus);
-            box-shadow: var(--rt-input-focus-shadow);
-            outline: 2px solid transparent;
-            outline-offset: var(--rt-input-focus-outline-offset);
-        }
 
-        &:disabled {
-            cursor: not-allowed;
+        /* bordered=false: снимаем только resting-рамку триггера. Объявлено ДО блока
+           __trigger — его :focus и правила --open/--invalid __trigger (равная
+           специфичность) идут ниже по source-order и перекрывают рамку. */
+        &--borderless &__trigger {
+            border-color: transparent;
         }
-    }
 
-    &--open &__trigger {
-        border-color: var(--rt-input-color-border-focus);
-    }
-
-    &--invalid &__trigger {
-        border-color: var(--rt-input-color-border-error);
+        &__trigger {
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-input-height);
+            box-sizing: border-box;
+            align-items: center;
+            padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
+            border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-input-radius);
+            background-color: var(--rt-input-color-bg);
+            color: var(--rt-input-color-text);
+            cursor: pointer;
+
+            /* Триггер — нативный <button>: без явного наследования берёт UA-шрифт
+               (Arial), а не Montserrat от body. */
+            font-family: inherit;
+            font-size: var(--rt-input-font-size);
+            gap: var(--rt-space-sm);
+            line-height: var(--rt-input-line-height);
+            text-align: start;
+            transition: var(--rt-input-transition);
+
+            // :focus (не :focus-visible) — триггер это <button>, у которого
+            // :focus-visible не срабатывает на клик мышью; кольцо нужно и при клике.
+            &:focus {
+                border-color: var(--rt-input-color-border-focus);
+                box-shadow: var(--rt-input-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: var(--rt-input-focus-outline-offset);
+            }
 
-        &:focus {
-            box-shadow: var(--rt-input-focus-shadow-error);
+            &:disabled {
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &--disabled {
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--open &__trigger {
+            border-color: var(--rt-input-color-border-focus);
+        }
 
-    /* Read-only: триггер остаётся в DOM (нужен для viewChild.required popover'а),
-       но скрыт — значение показывает плоский текст __readonly. */
-    &--readonly &__trigger {
-        display: none;
-    }
+        &--invalid &__trigger {
+            border-color: var(--rt-input-color-border-error);
 
-    /* Read-only: выбранные labels через запятую как плоский текст. */
-    &__readonly {
-        display: inline-flex;
-        min-height: var(--rt-input-height);
-        align-items: center;
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
+            &:focus {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
+        }
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+        &--disabled {
+            opacity: var(--rt-input-disabled-opacity);
         }
-    }
 
-    &--size--sm &__trigger {
-        min-height: var(--rt-input-height-sm);
-    }
+        /* Read-only: триггер остаётся в DOM (нужен для viewChild.required popover'а),
+           но скрыт — значение показывает плоский текст __readonly. */
+        &--readonly &__trigger {
+            display: none;
+        }
 
-    &--size--lg &__trigger {
-        min-height: var(--rt-input-height-lg);
-    }
+        /* Read-only: выбранные labels через запятую как плоский текст. */
+        &__readonly {
+            display: inline-flex;
+            min-height: var(--rt-input-height);
+            align-items: center;
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
 
-    &__placeholder {
-        overflow: hidden;
-        min-width: 0;
-        flex: 1 1 auto;
-        color: var(--rt-input-color-text-placeholder);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
+        }
 
-    &__chips {
-        display: flex;
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
-        gap: var(--rt-space-2xs);
-    }
+        &--size--sm &__trigger {
+            min-height: var(--rt-input-height-sm);
+        }
 
-    &__chip {
-        display: inline-flex;
-        align-items: center;
-    }
+        &--size--lg &__trigger {
+            min-height: var(--rt-input-height-lg);
+        }
 
-    &__chip-more {
-        display: inline-flex;
-        align-items: center;
-        padding: 0 var(--rt-space-xs);
-        color: var(--rt-input-color-text-placeholder);
-        font-size: var(--rt-input-font-size);
-    }
+        &__placeholder {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            color: var(--rt-input-color-text-placeholder);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    &__clear {
-        flex-shrink: 0;
-    }
+        &__chips {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-wrap: wrap;
+            gap: var(--rt-space-2xs);
+        }
 
-    &__chevron {
-        flex-shrink: 0;
-        transition: transform var(--rt-duration-fast) ease;
-    }
+        &__chip {
+            display: inline-flex;
+            align-items: center;
+        }
 
-    &--open &__chevron {
-        transform: rotate(180deg);
-    }
+        &__chip-more {
+            display: inline-flex;
+            align-items: center;
+            padding: 0 var(--rt-space-xs);
+            color: var(--rt-input-color-text-placeholder);
+            font-size: var(--rt-input-font-size);
+        }
 
-    /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK. */
-    &__panel {
-        width: 100%;
-        max-height: var(--rt-input-panel-max-height);
-        box-sizing: border-box;
-        border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-input-radius);
-        background-color: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-shadow-md);
-        overflow-y: auto;
-    }
+        &__clear {
+            flex-shrink: 0;
+        }
 
-    &__list {
-        padding: var(--rt-space-2xs) 0;
-        margin: 0;
-        list-style: none;
-    }
+        &__chevron {
+            flex-shrink: 0;
+            transition: transform var(--rt-multiselect-caret-transition-duration) ease;
+        }
 
-    &__option {
-        display: flex;
-        align-items: center;
-        padding: var(--rt-space-sm) var(--rt-space-md);
-        color: var(--rt-color-text-primary);
-        cursor: pointer;
-        font-size: var(--rt-input-font-size);
-        gap: var(--rt-space-sm);
+        &--open &__chevron {
+            transform: rotate(180deg);
+        }
 
-        &:hover,
-        &--active {
-            background-color: var(--rt-color-bg-hover);
+        /* Panel рендерится в CDK Overlay (body) — позиционирование на CDK. */
+        &__panel {
+            /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
+               объявляется на ней самой — с корня блока оно бы не докатилось. */
+            --rt-multiselect-panel-shadow: var(--rt-shadow-md);
+
+            width: 100%;
+            max-height: var(--rt-input-panel-max-height);
+            box-sizing: border-box;
+            border: var(--rt-input-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-input-radius);
+            background-color: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-multiselect-panel-shadow);
+            overflow-y: auto;
         }
 
-        &--selected {
-            background-color: var(--rt-color-action-primary-subtle);
-            font-weight: var(--rt-font-weight-semibold);
+        &__list {
+            padding: var(--rt-space-2xs) 0;
+            margin: 0;
+            list-style: none;
         }
 
-        &--disabled {
-            cursor: not-allowed;
-            opacity: var(--rt-input-disabled-opacity);
+        &__option {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font-size: var(--rt-input-font-size);
+            gap: var(--rt-space-sm);
+
+            &:hover,
+            &--active {
+                background-color: var(--rt-color-bg-hover);
+            }
+
+            &--selected {
+                background-color: var(--rt-color-action-primary-subtle);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
+            &--disabled {
+                cursor: not-allowed;
+                opacity: var(--rt-input-disabled-opacity);
 
-            &:hover {
-                background-color: transparent;
+                &:hover {
+                    background-color: transparent;
+                }
             }
         }
-    }
 
-    &__checkbox {
-        flex-shrink: 0;
-        margin: 0;
-        pointer-events: none;
-    }
+        &__checkbox {
+            flex-shrink: 0;
+            margin: 0;
+            pointer-events: none;
+        }
 
-    &__option-label {
-        min-width: 0;
-        flex: 1 1 auto;
-    }
+        &__option-label {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
 
-    &__empty {
-        padding: var(--rt-space-sm) var(--rt-space-md);
-        color: var(--rt-input-color-text-placeholder);
-        font-style: italic;
+        &__empty {
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            color: var(--rt-input-color-text-placeholder);
+            font-style: italic;
+        }
     }
 }

package/src/lib/components/night-grid/rt-night-grid.component.scss

@@ -1,45 +1,50 @@
-/* rt-night-grid — плотная сетка суток в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-night-grid` висит
-   и на `<rt-night-grid>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона.
-
-   Ячейки мелкие и без подписей: сетка читается как индикатор занятости целиком, а
-   не как календарь — конкретный день подсказывает нативный title. */
-
-rt-night-grid {
-    display: block;
-
-    .rt-night-grid {
-        /* Колонки резиновые от 16px: при жёсткой ширине ячейки сетка занимала
-           треть широкой карточки, а фиксированный максимум оставлял в ряду
-           «хвост» из одной ячейки, не попавшей в предыдущую строку. */
-        display: grid;
-        gap: var(--rt-space-1);
-        grid-template-columns: repeat(auto-fit, minmax(16px, 1fr));
-
-        &__cell {
-            padding: 0;
-            border: none;
-            border-radius: var(--rt-radius-sm);
-            aspect-ratio: 1;
-            background: var(--rt-color-bg-surface-subtle);
-            cursor: pointer;
-
-            &:hover {
-                outline: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-            }
-
-            &:focus-visible {
-                outline: var(--rt-border-width-thin) solid var(--rt-color-border-focus);
-                outline-offset: 1px;
-            }
-
-            &--state--primary {
-                background: var(--rt-color-state-success);
-            }
-
-            &--state--secondary {
-                background: color-mix(in srgb, var(--rt-color-state-success) 35%, transparent);
+@layer rt-kit.components {
+    /* rt-night-grid — плотная сетка суток в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-night-grid` висит
+       и на `<rt-night-grid>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона.
+
+       Ячейки мелкие и без подписей: сетка читается как индикатор занятости целиком, а
+       не как календарь — конкретный день подсказывает нативный title. */
+
+    rt-night-grid {
+        display: block;
+
+        .rt-night-grid {
+            --rt-night-grid-cell-radius: var(--rt-radius-sm);
+            --rt-night-grid-outline-width: var(--rt-border-width-thin);
+
+            /* Колонки резиновые от 16px: при жёсткой ширине ячейки сетка занимала
+               треть широкой карточки, а фиксированный максимум оставлял в ряду
+               «хвост» из одной ячейки, не попавшей в предыдущую строку. */
+            display: grid;
+            gap: var(--rt-space-1);
+            grid-template-columns: repeat(auto-fit, minmax(16px, 1fr));
+
+            &__cell {
+                padding: 0;
+                border: none;
+                border-radius: var(--rt-night-grid-cell-radius);
+                aspect-ratio: 1;
+                background: var(--rt-color-bg-surface-subtle);
+                cursor: pointer;
+
+                &:hover {
+                    outline: var(--rt-night-grid-outline-width) solid var(--rt-color-border-strong);
+                }
+
+                &:focus-visible {
+                    outline: var(--rt-night-grid-outline-width) solid var(--rt-color-border-focus);
+                    outline-offset: 1px;
+                }
+
+                &--state--primary {
+                    background: var(--rt-color-state-success);
+                }
+
+                &--state--secondary {
+                    background: color-mix(in srgb, var(--rt-color-state-success) 35%, transparent);
+                }
             }
         }
     }

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

@@ -1,13 +1,17 @@
-/* rt-note — тихая информационная заметка в common/ui (ViewEncapsulation.None).
-   Селектор bare `.rt-note` (класс на host) — `:host` в None light-DOM не матчит.
-   Палитра приглушённая (text-muted на subtle-фоне) — намеренно тише rt-message. */
+@layer rt-kit.components {
+    /* rt-note — тихая информационная заметка в common/ui (ViewEncapsulation.None).
+       Селектор bare `.rt-note` (класс на host) — `:host` в None light-DOM не матчит.
+       Палитра приглушённая (text-muted на subtle-фоне) — намеренно тише rt-message. */
 
-.rt-note {
-    display: block;
-    padding: var(--rt-space-sm) var(--rt-space-md);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-subtle);
-    color: var(--rt-color-text-muted);
-    font-size: var(--rt-text-sm);
-    line-height: var(--rt-leading-normal);
+    .rt-note {
+        --rt-note-radius: var(--rt-radius-md);
+
+        display: block;
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        border-radius: var(--rt-note-radius);
+        background: var(--rt-color-bg-subtle);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        line-height: var(--rt-leading-normal);
+    }
 }

package/src/lib/components/notifications-bell/rt-notifications-bell.component.scss

@@ -1,32 +1,39 @@
-.rt-notifications-bell {
-    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;
-    gap: var(--rt-nav-item-content-gap);
-    transition: color var(--rt-duration-fast) linear;
+@layer rt-kit.components {
+    .rt-notifications-bell {
+        --rt-notifications-bell-radius: var(--rt-radius-md);
+        --rt-notifications-bell-dot-radius: var(--rt-radius-full);
+        --rt-notifications-bell-outline-width: var(--rt-border-width-thin);
+        --rt-notifications-bell-transition-duration: var(--rt-duration-fast);
 
-    &:hover {
-        color: var(--rt-nav-item-color-hover);
-    }
+        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-notifications-bell-radius);
+        background-color: transparent;
+        color: var(--rt-nav-item-color);
+        cursor: pointer;
+        gap: var(--rt-nav-item-content-gap);
+        transition: color var(--rt-notifications-bell-transition-duration) linear;
 
-    &:focus-visible {
-        outline: var(--rt-border-width-thin) dashed var(--rt-color-border-strong);
-        outline-offset: calc(var(--rt-space-0-5) * -1);
-    }
+        &:hover {
+            color: var(--rt-nav-item-color-hover);
+        }
+
+        &:focus-visible {
+            outline: var(--rt-notifications-bell-outline-width) dashed var(--rt-color-border-strong);
+            outline-offset: calc(var(--rt-space-0-5) * -1);
+        }
 
-    /* Точка идёт следом за иконкой, в потоке содержимого кнопки: место ей даёт
-       общий зазор, как и у пункта меню. */
-    &__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);
+        /* Точка идёт следом за иконкой, в потоке содержимого кнопки: место ей даёт
+           общий зазор, как и у пункта меню. */
+        &__marker {
+            width: var(--rt-nav-marker-size);
+            height: var(--rt-nav-marker-size);
+            flex-shrink: 0;
+            border-radius: var(--rt-notifications-bell-dot-radius);
+            background-color: var(--rt-nav-marker-color);
+        }
     }
 }