@rt-tools/ui-kit-v2 0.13.1 → 0.14.0

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-toggle-switch — переключатель в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-toggle-switch` висит
@@ -6,6 +8,9 @@
 
     rt-toggle-switch {
         display: inline-flex;
+
+        /* Шаг входа `radius` переназначает скругление дорожки, ручка идёт за ней. */
+        @include kv.radius-steps('--rt-toggle-radius', '> .rt-toggle-switch');
     }
 
     rt-toggle-switch .rt-toggle-switch {

package/src/rich-editor/lib/components/message-composer/CONTEXT.md

@@ -1,6 +1,7 @@
 # `rt-message-composer`
 
-Поле отправки сообщения: текст, вложения, необязательное форматирование.
+Поле отправки сообщения — капсула с круглыми кнопками: текст, вложения внутри капсулы,
+необязательное форматирование и подсказка про Enter.
 
 ```html
 <rt-message-composer
@@ -18,6 +19,7 @@
 | `accept`               | `string`               | `''`                     |
 | `sending` / `disabled` | `boolean`              | `false`                  |
 | `formatting`           | `boolean`              | `false`                  |
+| `hint`                 | `boolean`              | `false`                  |
 | `toolbar`              | `TRtRichEditorToolbar` | `'full'`                 |
 | `minRows` / `maxRows`  | `number`               | 1 / 6                    |
 | `droppedFiles`         | `File[] \| null`       | `null`                   |
@@ -36,6 +38,14 @@
 [`rt-file-drop`](../../../../lib/components/file-drop/CONTEXT.md) снаружи, передаются сюда входом и добавляются к
 вложениям; без `attachments` они игнорируются.
 
+**Капсула высокая, когда в ней больше одной строки.** Признак — высота текста, которую меряет
+`ResizeObserver`, вложенный файл или режим форматирования; модификатор `tall` переназначает
+скругление на шаг 20.
+
+**Поле держит `content-box`, внешний отступ и место под ползунок.** Автовысота CDK пишет в `height`
+высоту текста и на замере обнуляет боковой `padding`, а появившийся ползунок сужал бы поле: без
+этих трёх правил текст ложился бы на строку больше, чем поле вмещает.
+
 ## Края
 
 - После отправки форма сбрасывается целиком — и текст, и файлы.

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

@@ -1,74 +1,118 @@
 @layer rt-kit.components {
     .rt-message-composer {
-        --rt-message-composer-radius: var(--rt-radius-md);
+        --rt-message-composer-radius: var(--rt-radius-full);
+        --rt-message-composer-tall-radius: var(--rt-radius-2xl);
         --rt-message-composer-border-width: var(--rt-border-width-thin);
-        --rt-message-composer-divider-width: var(--rt-border-width-thin);
 
         display: flex;
         flex-direction: column;
-        padding: var(--rt-space-4);
-        border: var(--rt-message-composer-border-width) solid var(--rt-color-border-default);
-        border-radius: var(--rt-message-composer-radius);
-        background: var(--rt-color-bg-surface);
-        gap: var(--rt-space-2);
+        gap: calc(var(--rt-space-1) * 1.5);
 
         /* Ширина приходит от хозяина, а не от содержимого. Без этой строки её задавала textarea
            без объявленной ширины: такую браузер считает от средней ширины знака первого
            доступного начертания, и величина гуляла между поднятиями витрины — 158 против 161. */
         inline-size: 100%;
 
-        &:focus-within {
-            border-color: var(--rt-color-border-strong);
+        &__capsule {
+            display: flex;
+            flex-direction: column;
+            padding: calc(var(--rt-space-1) * 1.5);
+            border: var(--rt-message-composer-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-message-composer-radius);
+            background: var(--rt-input-color-bg);
+            gap: calc(var(--rt-space-1) * 1.5);
+
+            // Фокус — как у полей кита: поверхность, рамка фокуса и кольцо.
+            &:focus-within {
+                border-color: var(--rt-input-color-border-focus);
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-input-focus-shadow);
+            }
+
+            // Выше одной строки капсула берёт шаг скругления 20: полное скругление
+            // на высокой капсуле срезало бы углы текста и карточек.
+            &--tall {
+                --rt-message-composer-radius: var(--rt-message-composer-tall-radius);
+            }
+
+            &--disabled {
+                background: var(--rt-input-color-bg-disabled);
+            }
+        }
+
+        &__files {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-1);
+        }
+
+        &__rich {
+            inline-size: 100%;
+        }
+
+        // Кнопки прижаты к низу: растущий текст поднимает капсулу, а не их.
+        &__row {
+            display: flex;
+            align-items: flex-end;
+            gap: var(--rt-space-2);
         }
 
         &__input {
-            padding: 0;
+            /* Автовысота CDK пишет в height высоту самого текста: при border-box её съели бы
+               отступы, и уже вторая строка уезжала бы под верхний край. */
+            box-sizing: content-box;
+            flex: 1 1 auto;
             border: 0;
             margin: 0;
             background: transparent;
-            color: inherit;
+            color: var(--rt-input-color-text);
             font: inherit;
-            font-size: var(--rt-text-sm);
+            font-size: var(--rt-input-font-size);
             inline-size: 100%;
-            line-height: var(--rt-leading-snug);
+            line-height: var(--rt-leading-normal);
+
+            /* Отступ от скрепки — внешний: замер автовысоты CDK обнуляет боковой padding поля,
+               и на замере текст ложился бы в меньшее число строк, чем на экране. */
+            margin-inline-start: calc(var(--rt-space-1) * 1.5);
 
             /* Своего размера поле ввода хозяину не отдаёт: иначе его ширина по `cols`
                по-прежнему участвовала бы в измерении. */
             min-inline-size: 0;
             outline: 0;
+
+            /* Одна строка текста по высоте равна круглой кнопке: отступ добирает разницу. */
+            padding-block: calc((var(--rt-control-height-md) - 1lh) / 2);
             resize: none;
 
+            /* Место под ползунок держится всегда, и на замере автовысоты тоже: иначе появившийся
+               ползунок сужал бы поле, текст ложился бы ещё на строку, и верхняя уезжала бы. */
+            scrollbar-color: var(--rt-color-border-default) transparent;
+            scrollbar-gutter: stable;
+            scrollbar-width: thin;
+
             &::placeholder {
-                color: var(--rt-color-text-muted);
+                color: var(--rt-input-color-text-placeholder);
             }
 
             &: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-message-composer-divider-width);
-            margin-inline: calc(-1 * var(--rt-space-4));
-        }
-
-        &__controls {
-            display: flex;
-            align-items: center;
-            gap: var(--rt-space-2);
+                &::placeholder {
+                    color: var(--rt-color-text-disabled);
+                }
+            }
         }
 
-        // Кнопка отправки всегда у правого края, даже когда attach скрыт.
+        // Кнопка отправки всегда у правого края: и без скрепки, и в режиме форматирования.
         &__send {
             margin-inline-start: auto;
         }
+
+        &__hint {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+        }
     }
 }

package/src/styles/_mixins.scss

@@ -19,3 +19,42 @@
     letter-spacing: var(--rt-letter-spacing-wide);
     line-height: var(--rt-leading-snug);
 }
+
+/// Шаги скругления кита и их токены — те же шаги, что у типа `TRtRadius`. Токены названы
+/// целиком, а не склеены из шага: проверка графа токенов ищет имя, а не его начало.
+$radius-steps: (
+    none: var(--rt-radius-none),
+    xs: var(--rt-radius-xs),
+    sm: var(--rt-radius-sm),
+    ms: var(--rt-radius-ms),
+    md: var(--rt-radius-md),
+    lg: var(--rt-radius-lg),
+    xl: var(--rt-radius-xl),
+    2xl: var(--rt-radius-2xl),
+    full: var(--rt-radius-full),
+);
+
+/// Правила шагов входа `radius` для одного компонента.
+///
+/// Ставится внутрь правила хоста (`rt-card { … }`). На каждый шаг выходит правило
+/// хоста с атрибутом `data-rt-radius`, которое переназначает собственное свойство
+/// скругления компонента — и больше ничего: поверхность берёт углы из того же
+/// свойства, и переопределение этого свойства приложением по-прежнему сильнее кита.
+///
+/// $property — собственное свойство скругления, `--rt-card-radius`.
+/// $surface  — где это свойство объявлено, от хоста: `'> .rt-card'` для корня шаблона,
+///             пусто — если на самом хосте. Только прямой ребёнок: потомок задел бы
+///             вложенный компонент того же рода.
+@mixin radius-steps($property, $surface: null) {
+    @each $step, $token in $radius-steps {
+        @if $surface {
+            &[data-rt-radius='#{$step}'] #{$surface} {
+                #{$property}: $token;
+            }
+        } @else {
+            &[data-rt-radius='#{$step}'] {
+                #{$property}: $token;
+            }
+        }
+    }
+}

package/styles/tokens.css

@@ -6905,9 +6905,6 @@ html.rt-theme-dark.rt-preset-material {
   .rt-button--text.rt-button--info {
     --rt-btn-color: var(--rt-color-action-info-on-surface);
   }
-  .rt-button--rounded {
-    --rt-btn-radius: 999px;
-  }
   .rt-button--sm {
     --rt-btn-height: var(--rt-control-height-sm);
     --rt-btn-padding: 0 0.875rem;
@@ -6941,8 +6938,36 @@ html.rt-theme-dark.rt-preset-material {
     padding: 0;
     gap: 0;
   }
-  .rt-button--icon-only.rt-button--rounded {
-    --rt-btn-radius: 50%;
+  .rt-button {
+    /* Шаг входа `radius` переназначает собственное свойство кнопки. Класс блока стоит на
+       самом хосте, поэтому правило шага — на нём же. */
+  }
+  .rt-button[data-rt-radius=none] {
+    --rt-btn-radius: var(--rt-radius-none);
+  }
+  .rt-button[data-rt-radius=xs] {
+    --rt-btn-radius: var(--rt-radius-xs);
+  }
+  .rt-button[data-rt-radius=sm] {
+    --rt-btn-radius: var(--rt-radius-sm);
+  }
+  .rt-button[data-rt-radius=ms] {
+    --rt-btn-radius: var(--rt-radius-ms);
+  }
+  .rt-button[data-rt-radius=md] {
+    --rt-btn-radius: var(--rt-radius-md);
+  }
+  .rt-button[data-rt-radius=lg] {
+    --rt-btn-radius: var(--rt-radius-lg);
+  }
+  .rt-button[data-rt-radius=xl] {
+    --rt-btn-radius: var(--rt-radius-xl);
+  }
+  .rt-button[data-rt-radius="2xl"] {
+    --rt-btn-radius: var(--rt-radius-2xl);
+  }
+  .rt-button[data-rt-radius=full] {
+    --rt-btn-radius: var(--rt-radius-full);
   }
   .rt-button--loading {
     cursor: wait;

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

@@ -64,9 +64,9 @@ interface IComposerFormShape {
     delta: FormControl<IQuillDelta | null>;
 }
 /**
- * Композер сообщения: авто-растущая textarea сверху, под разделительной линией —
- * ряд контролов (слева — прикрепить файл, справа — отправить). Презентационный,
- * без data-access: наружу торчит только `submitted` с текстом и файлами.
+ * Композер сообщения — капсула: слева круглая кнопка вложения, по центру авто-растущая
+ * textarea, справа круглая кнопка отправки; вложения стоят внутри капсулы над строкой.
+ * Презентационный, без data-access: наружу торчит только `submitted` с текстом и файлами.
  *
  * Отправка — `Enter` (без Shift) или клик по иконке; `Shift+Enter` — перенос
  * строки. Кнопка отправки активна, пока есть непустой текст или вложения.
@@ -76,17 +76,23 @@ declare class RtMessageComposerComponent {
     protected readonly t: Signal<TRtKitLabelMap>;
     protected readonly placeholderText: Signal<string>;
     protected readonly fileInput: Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected readonly textInput: Signal<ElementRef<HTMLTextAreaElement> | undefined>;
     protected readonly form: FormGroup<IComposerFormShape>;
     protected readonly files: Signal<readonly File[]>;
     /** Отправка доступна: есть контент (текст/delta/файлы), композер не занят. */
     protected readonly canSend: Signal<boolean>;
+    /** Капсула выше одной строки: перенос текста, вложения или режим форматирования. */
+    protected readonly tall: Signal<boolean>;
+    protected readonly capsuleMods: Signal<Record<string, boolean>>;
     /** Текст-подсказка textarea. Пусто — берётся переведённое умолчание. */
     readonly placeholder: InputSignal<string>;
     /** Фильтр типов для file-input (`.pdf,.doc,...`). */
     readonly accept: InputSignal<string>;
+    /** Строка под капсулой про Enter и Shift + Enter. */
+    readonly hint: InputSignalWithTransform<boolean, BooleanInput>;
     /** Показывать кнопку вложения и список файлов. */
     readonly attachments: InputSignalWithTransform<boolean, BooleanInput>;
-    /** Отправка в процессе — блокирует submit и показывает её недоступность. */
+    /** Отправка в процессе — блокирует submit, кнопка отправки крутит индикатор. */
     readonly sending: InputSignalWithTransform<boolean, BooleanInput>;
     /** Полная блокировка композера. */
     readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
@@ -113,7 +119,7 @@ declare class RtMessageComposerComponent {
     protected removeFile(index: number): void;
     protected submit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtMessageComposerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtMessageComposerComponent, "rt-message-composer", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "droppedFiles": { "alias": "droppedFiles"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtMessageComposerComponent, "rt-message-composer", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "formatting": { "alias": "formatting"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "droppedFiles": { "alias": "droppedFiles"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, never, true, never>;
 }
 
 /**