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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

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

@@ -31,8 +31,10 @@
 
 **Календарь ничего не считает.** Раскладку месяца готовит потребитель: сколько пустых клеток в
 начале (`leadingBlanks`), какие дни заняты (`state`), что писать под числом (`sublabel`), какие
-дни недоступны (`disabled`). Компонент только показывает готовое — поэтому он одинаково годится
-и для выбора дат, и для витрины занятости.
+дни недоступны (`disabled`). Вместо пустых клеток месяц может нести дни соседних месяцев
+(`leadingDays` и `trailingDays`). Они бледные и не нажимаются, а с `crossed` ещё и зачёркнуты.
+Компонент только показывает готовое — поэтому он одинаково годится и для выбора дат, и для витрины
+занятости.
 
 **Это не поле ввода.** Значение он не хранит и в форму не пишет; для ввода даты есть
 [`rt-date-picker`](../date-picker/CONTEXT.md), для периода — [`rt-date-range`](../date-range/CONTEXT.md).

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

@@ -140,6 +140,11 @@
                 box-shadow: var(--rt-calendar-today-ring);
             }
 
+            /* Число сегодняшнего дня — цвета действия и полужирное, пока день не залит выбором. */
+            &[data-today]:not([data-state='start'], [data-state='end'], [data-state='chosen'], [data-state='in-range']) {
+                color: var(--rt-color-action-primary);
+            }
+
             &:focus-visible {
                 outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
                 outline-offset: var(--rt-focus-ring-offset);
@@ -175,6 +180,27 @@
             font-weight: var(--rt-font-weight-medium);
         }
 
+        &__day[data-today] &__day-num {
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        /* День соседнего месяца: стоит в сетке как день, бледный, не нажимается. За границей
+           выбора ещё и зачёркнут, как занятый день. */
+        &__outside {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            min-block-size: var(--rt-calendar-day-size);
+            opacity: 0.45;
+
+            &[data-crossed] {
+                text-decoration: line-through;
+            }
+        }
+
         &__day-sublabel {
             font-size: var(--rt-text-2xs);
             opacity: 0.75;
@@ -185,8 +211,9 @@
                 grid-template-columns: 1fr;
             }
 
-            /* на мобиле показываем один месяц — навигация листает по одному */
-            &__month:last-child {
+            /* на мобиле показываем один месяц — навигация листает по одному. Прячется только второй
+               из двух: единственный месяц тоже последний, и без `:not(:first-child)` пропадала сетка */
+            &__month:last-child:not(:first-child) {
                 display: none;
             }
         }

package/src/lib/components/data-table/CONTEXT.md

@@ -80,6 +80,11 @@
 глифом шрифта Material Symbols, как первый кит. Шрифт кит не везёт: глиф виден, где его подключило
 приложение.
 
+**Размер значка ячейки задаёт поле `icon.size` колонки:** `sm`, `md` или `lg`, без поля — `lg`;
+значение не из списка, пришедшее из сохранённых настроек мимо типов, тоже рисуется как `lg`.
+Ячейка сама ставит ступени значка `--rt-icon-step-*`, и глиф читает те же свойства: значок набора
+и глиф в одной колонке одного размера, даже если предок сменил ступени для своих детей.
+
 ## Части семейства
 
 | Часть                             | Что делает                                                          |

package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss

@@ -8,6 +8,12 @@
         --rt-data-table-cell-transition-duration: var(--rt-duration-fast);
         --rt-data-table-cell-glyph-size: var(--rt-size-6);
 
+        /* Значок набора в ячейке идёт теми же ступенями, что глиф: предок, сменивший ступень
+           значка для своих детей, иначе развёл бы их размеры в одной колонке. */
+        --rt-icon-step-sm: var(--rt-size-4);
+        --rt-icon-step-md: var(--rt-size-5);
+        --rt-icon-step-lg: var(--rt-size-6);
+
         position: relative;
         display: flex;
         width: 100%;
@@ -34,6 +40,15 @@
             &--filled {
                 font-variation-settings: 'FILL' 1;
             }
+
+            /* Размер значка из описания колонки — те же ступени, что у значка кита в ячейке. */
+            &--sm {
+                --rt-data-table-cell-glyph-size: var(--rt-icon-step-sm);
+            }
+
+            &--md {
+                --rt-data-table-cell-glyph-size: var(--rt-icon-step-md);
+            }
         }
 
         &__prefix,

package/src/lib/components/data-table/stories/component/test-data-table-matrix.component.scss

@@ -0,0 +1,10 @@
+@layer rt-kit.components {
+    /* Пояснение под матрицей: почему в колонке глифа видно начало слова, а не значок. Ширина —
+       две ступени по 400px, чтобы строка не тянулась на всю витрину. */
+    .app-data-table-matrix__note {
+        max-width: calc(var(--rt-size-100) * 2);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        line-height: var(--rt-leading-relaxed);
+    }
+}

package/src/lib/components/date-picker/CONTEXT.md

@@ -24,6 +24,11 @@
 или «Применить». На широком экране панель стоит в поповере, на узком — в нижней шторке. Признак
 узкого экрана даёт `BreakpointsService.narrow`. Договорённость — `docs/specs/ui-kit-v2/date-panel/`.
 
+**Панель выдаётся и отдельно.** `RtDatePanelComponent` идёт из этой же точки входа для выбора без
+текстового поля. Поповер или шторку держит потребитель: он создаёт панель заново на каждое открытие,
+закрывает её по `closed`, а значение получает из `picked`. Своей поверхности у панели нет, в поповере
+фон, рамку и тень даёт потребитель. Вход `sheet` включает вид для шторки.
+
 **Текст в поле — дата в порядке языка интерфейса.** Под `ru` это `01.08.2026`, под `en-US` —
 «08/01/2026», время всегда `HH:mm`. Язык берётся из `RT_KIT_LOCALE`: приложение, меняющее язык на
 ходу, меняет и порядок. Подсказка в пустом поле — та же форма буквами кита (`дд.мм.гггг`). Набранный

package/src/lib/components/date-picker/panel/CONTEXT.md

@@ -0,0 +1,42 @@
+# `rt-date-panel`
+
+```html
+<rt-date-panel type="datetime-local" [value]="value()" (picked)="value.set($event)" (closed)="close()" />
+```
+
+Панель выбора даты и времени. Её открывает [`rt-date-picker`](../CONTEXT.md), а для выбора без
+текстового поля она идёт из той же точки входа `@rt-tools/ui-kit-v2/date-picker`.
+
+| вход                 | тип                                    | умолчание  |
+| -------------------- | -------------------------------------- | ---------- |
+| `type`               | `'date' \| 'time' \| 'datetime-local'` | обязателен |
+| `value`              | `string` (форма значения поля)         | `''`       |
+| `min` / `max`        | `string \| null` (форма значения)      | `null`     |
+| `minuteStep`         | `number`                               | `5`        |
+| `sheet`              | `boolean`                              | `false`    |
+| `now`                | `Date \| null`                         | `null`     |
+| `isTodayButtonShown` | `boolean`                              | `true`     |
+
+`isTodayButtonShown` показывает «Сегодня» у типа `date`. Без кнопки подвала у даты нет, день
+выбирается нажатием и сразу закрывает панель. Подвал других типов этот вход не трогает.
+
+Месяц панели дописан днями соседних месяцев до полных недель, а день за границей зачёркнут. Над
+колонками времени стоят подписи «Часы» и «Минуты». В поповере даты со временем подвал несёт
+«Сейчас» слева, затем «Сбросить» и «Применить». «Сбросить» отдаёт пустое значение и закрывает
+панель. В шторке вместо «Сейчас» и «Сбросить» слева стоит выбранное значение.
+
+| выход    | значение | когда                                                       |
+| -------- | -------- | ----------------------------------------------------------- |
+| `picked` | `string` | готовое значение в форме `value`                            |
+| `closed` | —        | панель просит закрыть себя: после выбора и по Escape в днях |
+
+## Главное, что нужно знать
+
+**Поповер или шторку держит потребитель.** Панель сама не открывается и не закрывается: он создаёт
+её заново на каждое открытие и закрывает по `closed`. Черновик живёт, пока панель открыта.
+
+**Своей поверхности у панели нет.** В поповере фон, рамку и тень даёт потребитель, в
+`rt-bottom-sheet` их даёт шторка. Вход `sheet` включает вид для шторки: дни под палец, а у даты со
+временем переключатель «Дата | Время».
+
+Как это выглядит, показывают истории `DatePanelOpening` в разделе полей формы.

package/src/lib/components/date-picker/panel/rt-date-panel.component.scss

@@ -102,7 +102,46 @@
 
         &__time {
             display: flex;
-            gap: var(--rt-space-1);
+            gap: var(--rt-space-2);
+        }
+
+        /* Колонки времени рядом с месяцем отделены чертой на всю высоту тела. */
+        &__time:not(:first-child) {
+            align-self: stretch;
+            border-inline-start: var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);
+            padding-inline-start: var(--rt-space-4);
+        }
+
+        /* Переключатель «Дата | Время» по ширине своих сегментов, по центру. */
+        &__tabs {
+            align-self: center;
+        }
+
+        /* Колонка времени с подписью над ней: подпись не прокручивается вместе с ячейками. */
+        &__time-group {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2);
+        }
+
+        &__time-title {
+            padding: var(--rt-space-1) 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            text-align: center;
+        }
+
+        /* Первая кнопка подвала прижата влево, остальные стоят справа. */
+        &__lead {
+            margin-inline-end: auto;
+        }
+
+        /* Выбранное значение в подвале шторки: слева, напротив «Применить». */
+        &__value {
+            align-self: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            margin-inline-end: auto;
         }
 
         &__column {
@@ -156,6 +195,20 @@
             }
         }
 
+        /* Ячейка времени — полоса на ширину колонки, число у левого края. Выбранная ячейка залита
+           бледным цветом действия, число тёмное и полужирное. */
+        &__column &__cell {
+            min-inline-size: calc(var(--rt-size-10) * 1.5);
+            padding-inline: var(--rt-space-4) 0;
+            text-align: start;
+
+            &[aria-pressed='true'] {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-text-primary);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+        }
+
         &__footer {
             display: flex;
             justify-content: flex-end;
@@ -197,7 +250,7 @@
             justify-content: center;
         }
 
-        &--sheet &__column {
+        &--sheet &__time-group {
             flex: 1 1 0;
         }
     }

package/src/rich-editor/lib/components/chat/CONTEXT.md

@@ -47,7 +47,19 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 **Готовый текст подставляет метод `setDraft`.** Он заменяет черновик во всех трёх полях ответа и
 ставит курсор в конец. Файлы остаются, сигнала набора нет, закрытое поле текст не принимает.
 Работу метода показывает история `QuickReplies` страницы переписки: кнопка у поля ответа и
-подсказка в боковой панели ставят текст в поле, гостю ничего не уходит.
+подсказка в боковой панели ставят текст в поле, гостю ничего не уходит. Метод `draftText` читает
+текст поля без разметки и файлы не трогает, а метод `draftFiles` отдаёт выбранные файлы.
+
+**Подпись на пузыре даёт приложение.** `dateLabel` стоит вместо времени, `dateIcon` на месте значка
+статуса. Значки ошибки отправки и недоставки остаются: они предупреждают. Подписи дней считаются от
+`createdAt`.
+
+**Пузырь мессенджера не шире 85% ленты и не шире 320.** Предел стоит на пузыре, а не на строке:
+кнопки у реплики лежат рядом и не отнимают его ширину. Значок статуса 16, подпись и значок на своём
+пузыре без прозрачности, пузырь гостя белый с тенью. Боковой отступ чата 16, на узком месте 12.
+
+**Слот `rtChatComposerBar` стоит над рамкой поля ответа** во всех видах поля. Пустой слот места не
+занимает, а без поля слота нет.
 
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
 что отвечали соседние реплики.

package/src/rich-editor/lib/components/chat/rt-chat-messenger.scss

@@ -1,5 +1,7 @@
 // Вид мессенджера чата: метки дней, ряд кнопок под полем, пузыри мягкие, свой — цвета действия.
 // Лежит отдельно от стилей чата, чтобы оба файла уместились в предел длины.
+@use '../../../../styles/breakpoints' as bp;
+
 @layer rt-kit.components {
     .rt-chat {
         --rt-chat-day-label-radius: var(--rt-radius-full);
@@ -32,20 +34,25 @@
             }
         }
 
-        // Вид мессенджера: пузырь мягкий, свой — цвета действия, пузырь гостя серый на белой ленте,
-        // время и знак доставки справа внизу
+        // Вид мессенджера: пузырь мягкий, свой — цвета действия, пузырь гостя белый с тенью на белой
+        // ленте, время и знак доставки справа внизу
         &--messenger {
             --rt-chat-bubble-radius: var(--rt-radius-xl);
             --rt-chat-bubble-corner-radius: var(--rt-radius-sm);
             --rt-chat-messenger-border-width: var(--rt-border-width-thin);
             --rt-chat-messenger-panel-radius: var(--rt-radius-lg);
             --rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);
+            --rt-chat-bubble-in-shadow: var(--rt-shadow-sm);
             --rt-chat-bubble-own-bg: var(--rt-color-action-primary);
-            --rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);
+            --rt-chat-bubble-in-bg: var(--rt-color-bg-surface);
 
             box-sizing: border-box;
             padding: var(--rt-space-4);
 
+            @include bp.place-max(bp.$rt-bp-md) {
+                padding: calc(var(--rt-space-2) + var(--rt-space-1));
+            }
+
             // Высоту шапке дают имя и строка под ним, плотная полоса панели здесь не нужна
             .rt-chat__header {
                 --rt-toolbar-height: auto;
@@ -69,12 +76,29 @@
                 > :first-child {
                     margin-block-start: auto;
                 }
+
+                @include bp.place-max(bp.$rt-bp-sm) {
+                    padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));
+                }
+            }
+
+            // Строка занимает всю ленту: кнопки у реплики стоят рядом и не отнимают ширину пузыря
+            .rt-chat__message-row {
+                width: 100%;
+                max-width: 100%;
+            }
+
+            .rt-chat__message-row--own {
+                justify-content: flex-end;
             }
 
             .rt-chat__message {
+                max-width: round(min(85%, 320px), 1px);
+                box-sizing: border-box;
                 padding: var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);
                 border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius)
                     var(--rt-chat-bubble-corner-radius);
+                box-shadow: var(--rt-chat-bubble-in-shadow);
                 gap: var(--rt-space-0-5);
             }
 
@@ -103,7 +127,7 @@
 
             .rt-chat__message-text {
                 font-size: var(--rt-text-sm);
-                line-height: round(1em * var(--rt-leading-tight), 1px);
+                line-height: round(1em * var(--rt-leading-snug), 1px);
             }
 
             .rt-chat__message--own .rt-chat__message-text,
@@ -112,15 +136,6 @@
                 color: var(--rt-color-action-on-primary);
             }
 
-            // На своём пузыре время и галочки тише текста: время прозрачнее, галочки чуть плотнее
-            .rt-chat__message--own .rt-chat__message-date {
-                opacity: 0.75;
-            }
-
-            .rt-chat__message--own .rt-chat__message-status {
-                opacity: 0.85;
-            }
-
             .rt-chat__message-footer {
                 justify-content: flex-end;
             }
@@ -143,7 +158,6 @@
 
             .rt-chat__message-date {
                 font-size: var(--rt-text-2xs);
-                line-height: round(1em * var(--rt-leading-tight), 1px);
             }
 
             .rt-chat__message-author {

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

@@ -176,6 +176,24 @@
             }
         }
 
+        &__composer-bar {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: column;
+
+            // Колонка держит шаг `--rt-space-4`, а полоса стоит вплотную к полю: 8px по кадру
+            margin-block-end: calc(var(--rt-space-2) - var(--rt-space-4));
+
+            &:empty {
+                display: none;
+            }
+
+            &:not(:empty) + .rt-chat__composer,
+            &:not(:empty) + .rt-chat__composer-rich {
+                margin-top: 0;
+            }
+        }
+
         &__footer-slot {
             display: flex;
             flex-direction: column;
@@ -298,14 +316,17 @@
 
         &__message-footer {
             display: flex;
+            min-width: 0;
             align-items: center;
             gap: var(--rt-space-1);
         }
 
         &__message-date {
+            min-width: 0;
             color: var(--rt-chat-bubble-date);
             font-size: var(--rt-text-xs);
             line-height: var(--rt-leading-none);
+            overflow-wrap: anywhere;
         }
 
         // Пер-месседж статус своего сообщения: часы / двойной чек / «!»+retry.

package/types/rt-tools-ui-kit-v2-calendar.d.ts

@@ -38,12 +38,24 @@ export declare namespace IRtCalendar {
     key: string;
     day: Day;
   }
-  /** View-модель месяца: подпись, пустые ячейки до первого дня, дни. */
+  /** День соседнего месяца в начале или в конце сетки: бледный, не нажимается. */
+  interface OutsideDay {
+    key: string;
+    dayOfMonth: number;
+    /** День за границей выбора — ещё и зачёркнут. */
+    crossed: boolean;
+  }
+  /**
+   * View-модель месяца: подпись, пустые ячейки до первого дня, дни. Дни соседних месяцев
+   * необязательны: заданы — встают на место пустых ячеек и дописывают последнюю неделю.
+   */
   interface Month {
     key: string;
     label: string;
     leadingBlanks: readonly number[];
     days: readonly Day[];
+    leadingDays?: readonly OutsideDay[];
+    trailingDays?: readonly OutsideDay[];
   }
 }
 export declare class RtCalendarComponent {

package/types/rt-tools-ui-kit-v2-core.d.ts

@@ -128,6 +128,8 @@ export declare namespace IRtDataTable {
     tooltip?: string;
     icon?: IRtDataTable.Icon;
   }
+  /** Размер значка ячейки — ступень значка кита. */
+  type IconSize = 'sm' | 'md' | 'lg';
   /**
    * Значок колонки. Имя — имя первого кита; рисует его набор кита через перечень соответствий,
    * а шаблон значка, отданный приложением, рисует его сам.
@@ -138,6 +140,11 @@ export declare namespace IRtDataTable {
     tooltip?: string;
     visible?: boolean;
     placement?: 'left' | 'right';
+    /**
+     * Размер значка в ячейке: `sm` — 16px, `md` — 20px, `lg` — 24px. Без поля значок 24px, как
+     * был. Шапка колонки его не читает.
+     */
+    size?: IRtDataTable.IconSize;
     /**
      * Контурный рисунок вместо залитого, как у первого кита: без признака значок колонки залит.
      * Заливку рисует материальный набор; свой набор кита рисует значок одним рисунком.

package/types/rt-tools-ui-kit-v2-data-table.d.ts

@@ -172,7 +172,17 @@ export declare class RtDataTableCellComponent<T = Record<string, unknown>> {
    * приложение, а без шрифта на месте значка стоит его имя.
    */
   protected readonly glyph: Signal<string | null>;
-  /** Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. */
+  /**
+   * Размер значка из описания колонки; без него 24px, как было. Описание колонки приходит и из
+   * сохранённых настроек, мимо типов: размер не из списка тоже даёт 24px, иначе значок набора
+   * взял бы свою ступень, а глиф остался бы прежним.
+   */
+  protected readonly iconSize: Signal<IRtDataTable.IconSize>;
+  /**
+   * Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. Размер
+   * глифа идёт той же ступенью, что значок набора; 24px задаёт сам элемент, и для `lg` своего
+   * признака нет.
+   */
   protected readonly glyphMods: Signal<Record<string, boolean>>;
   protected readonly iconContext: Signal<IRtDataTableIconContext<T> | null>;
   /**