@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,58 @@
+/* rt-message — alert/banner в common/ui (Emulated encapsulation; :host обязательно). */
+
+:host {
+    display: block;
+
+    .rt-message {
+        display: flex;
+        align-items: flex-start;
+        padding: var(--rt-space-3) var(--rt-space-4);
+        border-radius: var(--rt-radius-md);
+        background: var(--rt-color-state-info-bg);
+        color: var(--rt-color-state-info);
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-2);
+        line-height: var(--rt-leading-normal);
+
+        &--severity--info {
+            background: var(--rt-color-state-info-bg);
+            color: var(--rt-color-state-info);
+        }
+
+        &--severity--success {
+            background: var(--rt-color-state-success-bg);
+            color: var(--rt-color-state-success);
+        }
+
+        &--severity--warning {
+            background: var(--rt-color-state-warning-bg);
+            color: var(--rt-color-state-warning);
+        }
+
+        &--severity--danger {
+            background: var(--rt-color-state-danger-bg);
+            color: var(--rt-color-state-danger);
+        }
+
+        &--severity--secondary,
+        &--severity--neutral {
+            background: var(--rt-color-bg-subtle);
+            color: var(--rt-color-text-primary);
+        }
+
+        &__icon {
+            flex-shrink: 0;
+            margin-block-start: var(--rt-space-0-5);
+        }
+
+        &__body {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &__close {
+            flex-shrink: 0;
+            margin-inline-start: auto;
+        }
+    }
+}

package/src/lib/components/message-composer/rt-message-composer.component.scss

@@ -0,0 +1,59 @@
+.rt-message-composer {
+    display: flex;
+    flex-direction: column;
+    padding: var(--rt-space-3);
+    border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+    border-radius: var(--rt-radius-md);
+    background: var(--rt-color-bg-surface-default, transparent);
+    gap: var(--rt-space-2);
+
+    &:focus-within {
+        border-color: var(--rt-color-border-strong, var(--rt-color-border-default));
+    }
+
+    &__input {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: var(--rt-text-sm);
+        inline-size: 100%;
+        line-height: var(--rt-leading-snug);
+        outline: 0;
+        resize: none;
+
+        &::placeholder {
+            color: var(--rt-color-text-muted);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__files {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-1);
+    }
+
+    // Разделитель тянется на всю ширину бокса — компенсируем горизонтальный padding.
+    &__divider {
+        background: var(--rt-color-border-default);
+        block-size: var(--rt-border-width-thin);
+        margin-inline: calc(-1 * var(--rt-space-3));
+    }
+
+    &__controls {
+        display: flex;
+        align-items: center;
+        gap: var(--rt-space-2);
+    }
+
+    // Кнопка отправки всегда у правого края, даже когда attach скрыт.
+    &__send {
+        margin-inline-start: auto;
+    }
+}

package/src/lib/components/money-list/rt-money-list.component.scss

@@ -0,0 +1,11 @@
+/* rt-money-list — финансовый блок на подложке (ViewEncapsulation.None).
+   Селектор bare `.rt-money-list` (класс на host). */
+
+.rt-money-list {
+    display: flex;
+    flex-direction: column;
+    padding: var(--rt-space-md);
+    border-radius: var(--rt-radius-md);
+    background: var(--rt-color-bg-subtle);
+    gap: var(--rt-space-xs);
+}

package/src/lib/components/money-list/rt-money-row.component.scss

@@ -0,0 +1,25 @@
+/* rt-money-row — строка финансового блока (ViewEncapsulation.None).
+   Селектор bare `.rt-money-row` (класс на host). */
+
+.rt-money-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--rt-text-sm);
+    gap: var(--rt-space-md);
+    line-height: var(--rt-leading-normal);
+
+    &__label {
+        color: var(--rt-color-text-muted);
+    }
+
+    &__value {
+        color: var(--rt-color-text-primary);
+        white-space: nowrap;
+    }
+
+    &--total {
+        padding-top: var(--rt-space-xs);
+        border-top: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+        font-weight: var(--rt-font-weight-semibold);
+    }
+}

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

@@ -0,0 +1,198 @@
+.rt-multiselect {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    /* bordered=false: снимаем только resting-рамку триггера. Объявлено ДО блока
+       __trigger — его :focus и правила --open/--invalid __trigger (равная
+       специфичность) идут ниже по source-order и перекрывают рамку. */
+    &--borderless &__trigger {
+        border-color: transparent;
+    }
+
+    &__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);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &--open &__trigger {
+        border-color: var(--rt-input-color-border-focus);
+    }
+
+    &--invalid &__trigger {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    /* Read-only: триггер остаётся в DOM (нужен для viewChild.required popover'а),
+       но скрыт — значение показывает плоский текст __readonly. */
+    &--readonly &__trigger {
+        display: none;
+    }
+
+    /* 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);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &--size--sm &__trigger {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg &__trigger {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    &__placeholder {
+        overflow: hidden;
+        min-width: 0;
+        flex: 1 1 auto;
+        color: var(--rt-input-color-text-placeholder);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__chips {
+        display: flex;
+        min-width: 0;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        gap: var(--rt-space-2xs);
+    }
+
+    &__chip {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &__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);
+    }
+
+    &__clear {
+        flex-shrink: 0;
+    }
+
+    &__chevron {
+        flex-shrink: 0;
+        transition: transform var(--rt-duration-fast) ease;
+    }
+
+    &--open &__chevron {
+        transform: rotate(180deg);
+    }
+
+    /* 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;
+    }
+
+    &__list {
+        padding: var(--rt-space-2xs) 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    &__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;
+            }
+        }
+    }
+
+    &__checkbox {
+        flex-shrink: 0;
+        margin: 0;
+        pointer-events: none;
+    }
+
+    &__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;
+    }
+}

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

@@ -0,0 +1,43 @@
+/* rt-night-grid — плотная сетка суток в common/ui (Emulated encapsulation; :host обязательно).
+
+   Ячейки мелкие и без подписей: сетка читается как индикатор занятости целиком, а
+   не как календарь — конкретный день подсказывает нативный title. */
+
+:host {
+    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);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+/* 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);
+}

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

@@ -0,0 +1,32 @@
+.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;
+
+    &:hover {
+        color: var(--rt-nav-item-color-hover);
+    }
+
+    &:focus-visible {
+        outline: var(--rt-border-width-thin) 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);
+    }
+}

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

@@ -0,0 +1,156 @@
+/* Мобильная панель навигации (гамбургер). Рендерится в CDK Overlay, поэтому
+   отдельный корневой блок. Раздел — аккордеон, внутри него те же группы, что и в
+   панели на широком экране, только без колонок: они сюда не помещаются. */
+.rt-page-header-mobile {
+    display: flex;
+    min-width: 240px;
+    max-width: 320px;
+
+    /* Панель ужимается до свободного места под гамбургером, а список прокручивается
+       внутри неё: на низком экране раскрытый раздел уводит половину пунктов под
+       нижний край, а страница за оверлеем панель не двигает. */
+    min-height: 0;
+    max-height: 100%;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: var(--rt-space-2);
+    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);
+    gap: var(--rt-space-2xs);
+    overflow-y: auto;
+
+    &__link,
+    &__section {
+        position: relative;
+        display: flex;
+        width: 100%;
+        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);
+        text-align: left;
+        text-decoration: none;
+        transition:
+            background-color var(--rt-duration-fast) linear,
+            color var(--rt-duration-fast) linear;
+        white-space: nowrap;
+
+        &:hover {
+            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;
+        }
+    }
+
+    /* Пункт второго уровня набран легче раздела — как в панели на широком
+       экране; сам раздел остаётся полужирным. */
+    &__link--child {
+        color: var(--rt-nav-panel-item-color);
+        font-weight: var(--rt-nav-panel-item-font-weight);
+    }
+
+    &__link--is-active {
+        background-color: var(--rt-nav-panel-item-color-bg-active);
+        color: var(--rt-nav-panel-item-color-active);
+    }
+
+    &__link--disabled,
+    &__link:disabled,
+    &__link[aria-disabled='true'] {
+        background-color: transparent;
+        color: var(--rt-nav-color-disabled);
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
+    &__disabled-slot {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    &__section--is-active {
+        background-color: var(--rt-color-bg-surface-subtle);
+    }
+
+    &__caret {
+        display: inline-flex;
+        flex-shrink: 0;
+        margin-left: auto;
+        color: var(--rt-nav-item-color-caret);
+        transition: transform var(--rt-duration-fast) linear;
+    }
+
+    &__section--is-expanded &__caret {
+        transform: rotate(180deg);
+    }
+
+    /* Точка идёт следом за подписью, а не поверх неё: указатель раскрытия здесь
+       отжат к правому краю, и место у текста свободно. */
+    &__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);
+    }
+
+    &__children {
+        display: flex;
+        flex-direction: column;
+        padding-left: var(--rt-space-4);
+        gap: var(--rt-nav-panel-group-gap);
+    }
+
+    &__group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-2xs);
+    }
+
+    &__group-title {
+        display: flex;
+        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;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+}