@rt-tools/ui-kit-v2 0.33.0 → 0.34.0

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

@@ -13,12 +13,18 @@
 </rt-container>
 ```
 
-| вход            | тип                    | умолчание |
-| --------------- | ---------------------- | --------- |
-| `mobileLeftNav` | `'keep' \| 'bottom'`   | `'keep'`  |
-| `height`        | `'auto' \| 'viewport'` | `'auto'`  |
-
-Выходы: `backdropClick`, `rightOpened`, `rightClosed`. Публичное API: `openRight()`,
+| вход             | тип                    | умолчание |
+| ---------------- | ---------------------- | --------- |
+| `mobileLeftNav`  | `'keep' \| 'bottom'`   | `'keep'`  |
+| `height`         | `'auto' \| 'viewport'` | `'auto'`  |
+| `rightMode`      | `'over' \| 'side'`     | `'over'`  |
+| `rightBackdrop`  | `boolean`              | `true`    |
+| `rightWidth`     | `number \| null`       | `null`    |
+| `rightResizable` | `boolean`              | `false`   |
+| `rightMinWidth`  | `number`               | `240`     |
+| `rightMaxWidth`  | `number`               | `960`     |
+
+Выходы: `backdropClick`, `rightOpened`, `rightClosed`, `rightWidthChange`. Публичное API: `openRight()`,
 `closeRight()`, `rightOpen()`, `rightOverlayReady()`.
 
 ## Главное, что нужно знать
@@ -35,6 +41,17 @@
 **Правая панель существует, только когда её зона объявлена.** Оверлей под неё создаётся заранее
 (`rightOverlayReady()`), а `openRight()` без объявленной зоны — no-op.
 
+**Место правой панели — `rightMode`, и оно переключается на ходу.** `side` ставит панель
+колонкой справа (сетка `auto 1fr auto`), `over` — прежний оверлей. Смена места или подложки
+пересоздаёт оверлей; открытая панель остаётся открытой без второго `rightOpened`, а содержимое
+создаётся заново. Готовность (`rightOverlayReady()`) в `side` — это объявленная зона.
+
+**Ширина — `rightWidth` и ручка `rt-resize-handle` из `@rt-tools/ui-kit-v2/drawer`.** Одна
+обёртка (`#rightPane`) с шириной и ручкой ставится и в колонку, и в оверлей. В оверлее она
+сжимается до его ширины: панель не шире окна, и длинное содержимое переносится. На узком экране
+(не более 768 px) оверлей во всё окно, и панель с заданной шириной заполняет его, как колонка.
+В колонке рядом с содержимым сжатие запрещено: ширина держит содержимое во время перехода.
+
 **`rightOpened` / `rightClosed` привязаны к `transitionend` панели.** Там, где анимаций нет
 (тест, `prefers-reduced-motion`), события не придут, а `rightOpen()` уже верен — смотреть надо
 на него.

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

@@ -6,6 +6,7 @@
 @layer rt-kit.components {
     .rt-container {
         --rt-container-border-width: var(--rt-border-width-thin);
+        --rt-container-right-duration: var(--rt-duration-base);
 
         display: grid;
         min-height: 100%;
@@ -16,7 +17,11 @@
         /* Контейнер — место страницы: компоненты внутри считают пороги от его ширины. Боковая
            панель приложения рядом сужает его, и вид внутри сужается вместе с ним. */
         container: rt-place / inline-size;
-        grid-template: 'header header' auto 'left-sidenav toolbar' auto 'left-sidenav content' 1fr / auto 1fr;
+        grid-template:
+            'header header header' auto
+            'left-sidenav toolbar right-sidenav' auto
+            'left-sidenav content right-sidenav' 1fr
+            / auto 1fr auto;
 
         &__header {
             // Хедер закреплён вверху: при скролле документа (высота контейнера не
@@ -78,6 +83,68 @@
             flex-direction: column;
             grid-area: content;
         }
+
+        /* Правая панель колонкой рядом с содержимым (`rightMode="side"`). Закрытая сжимается до
+           нуля и гаснет после перехода; содержимое панели держит свою ширину и не переносится
+           заново на каждом кадре. */
+        &__right-sidenav {
+            --rt-container-right-width: auto;
+
+            display: flex;
+            overflow: clip;
+            min-height: 0;
+            border-left: var(--rt-container-border-width) solid var(--rt-color-border-subtle);
+            background-color: var(--rt-color-bg-surface);
+            grid-area: right-sidenav;
+            inline-size: var(--rt-container-right-width);
+            transition:
+                inline-size var(--rt-container-right-duration) ease,
+                visibility 0s linear;
+
+            &:not(#{&}--open) {
+                border-left-width: 0;
+                inline-size: 0;
+                transition:
+                    inline-size var(--rt-container-right-duration) ease,
+                    visibility 0s linear var(--rt-container-right-duration);
+                visibility: hidden;
+            }
+
+            &--resizing {
+                transition: none;
+            }
+        }
+    }
+
+    /* Обёртка правой панели: ширина и ручка. Живёт и в колонке сетки, и в оверлее в конце
+       страницы, поэтому стоит своим правилом, а не внутри блока. */
+    .rt-container__right-pane {
+        --rt-container-right-width: auto;
+
+        position: relative;
+        display: flex;
+        overflow: auto;
+        min-height: 0;
+        flex: 0 0 auto;
+        block-size: 100%;
+
+        /* Строка, как у панели оверлея: содержимое растягивается на всю высоту, и его
+           `height: 100%` считается от панели, а не от собственного содержимого. */
+        > :not(rt-resize-handle) {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &--sized {
+            inline-size: var(--rt-container-right-width);
+        }
+    }
+
+    /* В оверлее обёртка сжимается до его ширины: панель не шире окна, и содержимое переносится,
+       а не уходит за край. Колонке рядом с содержимым сжатие по-прежнему запрещено — там ширина
+       держит содержимое во время перехода. */
+    .cdk-overlay-pane > .rt-container__right-pane {
+        flex-shrink: 1;
     }
 
     /* App-shell раскладка (opt-in `height="viewport"`): контейнер жёстко равен
@@ -104,7 +171,29 @@
         }
     }
 
+    @media (prefers-reduced-motion: reduce) {
+        .rt-container__right-sidenav,
+        .rt-container__right-sidenav:not(.rt-container__right-sidenav--open) {
+            transition: none;
+        }
+    }
+
     @media (width <= 768px) {
+        /* На узком экране колонке рядом с содержимым нет места: панель ложится на зону
+           содержимого и панели инструментов, на всю их ширину. */
+        .rt-container__right-sidenav {
+            grid-column: content;
+            grid-row: toolbar / content;
+            inline-size: auto;
+        }
+
+        /* Оверлей здесь во всё окно, и панель поверх с заданной шириной заполняет его так же, а не
+           стоит у левого края с щелью справа. */
+        .rt-container__right-sidenav .rt-container__right-pane--sized,
+        .cdk-overlay-pane > .rt-container__right-pane--sized {
+            inline-size: 100%;
+        }
+
         // Opt-in: левый sidenav сворачивается в нижний ряд grid'а (таб-бар).
         // Контент занимает всю ширину и скроллится в своём `1fr` над баром —
         // бар остаётся видимым без position:fixed и без привязки к его высоте.

package/src/lib/components/copy-value/CONTEXT.md

@@ -4,11 +4,12 @@
 <rt-copy-value label="Reference" copyLabel="Copy reference" [value]="error.referenceId" />
 ```
 
-| вход        | тип      | умолчание                    |
-| ----------- | -------- | ---------------------------- |
-| `value`     | `string` | обязателен                   |
-| `label`     | `string` | `''` — не рисуется           |
-| `copyLabel` | `string` | `''` → переведённое `uiCopy` |
+| вход        | тип       | умолчание                                     |
+| ----------- | --------- | --------------------------------------------- |
+| `value`     | `string`  | обязателен                                    |
+| `label`     | `string`  | `''` — не рисуется                            |
+| `copyLabel` | `string`  | `''` → переведённое `uiCopy`                  |
+| `wrap`      | `boolean` | `false` — многострочное значение с прокруткой |
 
 Выход: `copiedValue` — значение, ушедшее в буфер.
 

package/src/lib/components/copy-value/rt-copy-value.component.scss

@@ -4,6 +4,7 @@
 
     .rt-copy-value {
         --rt-copy-value-radius: var(--rt-radius-sm);
+        --rt-copy-value-wrap-max-height: var(--rt-size-30);
 
         display: inline-flex;
         align-items: center;
@@ -35,5 +36,20 @@
         &__button {
             flex: none;
         }
+
+        /* Многострочное значение: переносится по строкам, держит свою высоту и прокручивается в
+           ней. Кнопка стоит у верхнего края, рядом с началом текста. */
+        &--wrap {
+            display: flex;
+            align-items: flex-start;
+        }
+
+        &--wrap &__value {
+            overflow: auto;
+            flex: 1 1 auto;
+            max-block-size: var(--rt-copy-value-wrap-max-height);
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+        }
     }
 }

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

@@ -4,6 +4,7 @@
     .rt-date-picker {
         --rt-date-picker-radius: var(--rt-input-radius);
         --rt-date-picker-fill-radius: var(--rt-radius-sm);
+        --rt-date-picker-color-border-hover: var(--rt-color-text-primary);
 
         position: relative;
         display: inline-flex;
@@ -29,6 +30,12 @@
             outline-offset: var(--rt-input-focus-outline-offset);
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. `:where` держит
+           силу правила на уровне вида, и фокус, ошибка, залитый вид и «без рамки» его перекрывают. */
+        :where(.rt-preset-material, [data-preset='material']) &:where(:hover:not(:has(:disabled))) {
+            border-color: var(--rt-date-picker-color-border-hover);
+        }
+
         /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
            ниже по source-order и перекрывают её своей рамкой. */
         &--borderless {

package/src/lib/components/date-range/rt-date-range.component.scss

@@ -4,6 +4,7 @@
     .rt-date-range {
         --rt-date-range-radius: var(--rt-input-radius);
         --rt-date-range-fill-radius: var(--rt-radius-sm);
+        --rt-date-range-color-border-hover: var(--rt-color-text-primary);
 
         position: relative;
         display: inline-flex;
@@ -29,6 +30,12 @@
             outline-offset: var(--rt-input-focus-outline-offset);
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. `:where` держит
+           силу правила на уровне вида, и фокус, ошибка, залитый вид и «без рамки» его перекрывают. */
+        :where(.rt-preset-material, [data-preset='material']) &:where(:hover:not(:has(:disabled))) {
+            border-color: var(--rt-date-range-color-border-hover);
+        }
+
         /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
            ниже по source-order и перекрывают её своей рамкой. */
         &--borderless {

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

@@ -0,0 +1,21 @@
+# `rt-divider`
+
+```html
+<rt-divider inset />
+<rt-divider vertical />
+```
+
+| вход       | тип       | умолчание |
+| ---------- | --------- | --------- |
+| `vertical` | `boolean` | `false`   |
+| `inset`    | `boolean` | `false`   |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Линия — граница хоста.** Вертикальная тянется по поперечной оси flex-строки (`align-self:
+stretch`); в обычной строке она высотой в строку текста.
+
+**`inset` значит разное по направлению.** Горизонтальная отступает от начала на
+`--rt-divider-inset`, вертикальная укорачивается сверху и снизу на `--rt-divider-inset-block`.

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

@@ -0,0 +1,34 @@
+@layer rt-kit.components {
+    /* rt-divider — линия-разделитель. ViewEncapsulation.None, линия — граница хоста. */
+    .rt-divider {
+        --rt-divider-width: var(--rt-border-width-thin);
+        --rt-divider-color: var(--rt-color-border-default);
+        --rt-divider-inset: var(--rt-space-16);
+        --rt-divider-inset-block: var(--rt-space-2);
+
+        display: block;
+        flex-shrink: 0;
+        border: 0;
+        border-top: var(--rt-divider-width) solid var(--rt-divider-color);
+        margin: 0;
+
+        &--inset {
+            margin-inline-start: var(--rt-divider-inset);
+        }
+
+        /* Вертикальная линия тянется по высоте строки: в гибкой строке — по поперечной оси. */
+        &--vertical {
+            display: inline-block;
+            min-height: 1em;
+            align-self: stretch;
+            border-top: 0;
+            border-inline-start: var(--rt-divider-width) solid var(--rt-divider-color);
+        }
+
+        /* Вертикальной линии отступ не от начала строки, а сверху и снизу: она короче соседей. */
+        &--vertical#{&}--inset {
+            margin-block: var(--rt-divider-inset-block);
+            margin-inline-start: 0;
+        }
+    }
+}

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

@@ -0,0 +1,73 @@
+# `rt-drawer`
+
+Боковая панель внутри участка страницы. `rt-drawer-container` — строка из содержимого и
+панелей, `rt-drawer` — панель у края, `rt-resize-handle` — ручка ширины.
+
+```html
+<rt-drawer-container>
+    <rt-drawer mode="over" position="end" resizable [(opened)]="open" [(width)]="width">…</rt-drawer>
+    <section>Отчёт</section>
+</rt-drawer-container>
+```
+
+| вход           | тип                   | умолчание |
+| -------------- | --------------------- | --------- |
+| `opened`       | `boolean`             | `false`   |
+| `mode`         | `'side' \| 'over'`    | `'side'`  |
+| `position`     | `'start' \| 'end'`    | `'start'` |
+| `hasBackdrop`  | `boolean`             | `true`    |
+| `disableClose` | `boolean`             | `false`   |
+| `width`        | `number \| null`      | `320`     |
+| `minWidth`     | `number`              | `200`     |
+| `maxWidth`     | `number`              | `640`     |
+| `resizable`    | `boolean`             | `false`   |
+| `ariaLabel`    | `string \| null`      | `null`    |
+| `overflow`     | `'clip' \| 'visible'` | `'clip'`  |
+| `autoFocus`    | `boolean \| string`   | `true`    |
+
+Выходы: `openedChange`, `widthChange`, `openedStart`, `closedStart`, `afterOpened`, `afterClosed`,
+`backdropClick`. Методы: `open()`, `close()`, `toggle()`.
+
+## Главное, что нужно знать
+
+**Хост панели — `display: contents`.** Подложка и `<aside>` становятся участниками гибкой строки
+контейнера; порядок на экране задаёт `order` по краю, а в разметке содержимое идёт первым, чтобы
+панель поверх рисовалась над его узлами с положением без слоёв.
+
+**Закрытая панель не уходит из разметки.** Рядом — `inline-size: 0`, поверх — сдвиг за край;
+видимость гаснет после перехода, `inert` снимает её из фокуса.
+
+**Escape и подложка закрывают только поверх.** Рядом панель — часть страницы.
+
+**Ярусы — внутри контейнера.** Поверх подложка стоит на `--rt-drawer-backdrop-z-index`, панель на
+`--rt-drawer-over-z-index`, а контейнер с `isolation: isolate` не пускает их над страницей. Узел
+содержимого со своим `z-index` под подложкой. Рядом ярус панели — `--rt-drawer-z-index`, по умолчанию
+`auto`: начальная панель стоит в строке раньше содержимого, и содержимое со своим контекстом
+наложения накрывает её тень. Тень рядом — `--rt-drawer-side-shadow`, по умолчанию её нет. Справа
+налево закрытая панель уезжает за свой край по `:dir(rtl)`.
+
+**Ручка ширину не хранит.** Она сообщает новую в пределах; без `width` меряет родителя в момент
+первого движения — так её берёт правая панель `rt-container` шириной по содержимому. Шаблон ручки
+пуст и лежит в своём файле, `rt-resize-handle.component.html`: всё, что она рисует, висит на хосте.
+
+**Начало и конец смены — разные выходы.** `openedStart` и `closedStart` приходят в момент смены
+`opened`, `afterOpened` и `afterClosed` — по `transitionend` ширины рядом и сдвига поверх, со
+страховочным таймером на случай, когда перехода нет. Исходное состояние ничего не сообщает; конец,
+обогнанный новой сменой, молчит.
+
+**`overflow: 'visible'` снимает обрезку только с открытой панели.** Закрываясь, панель обрезает
+содержимое сразу: иначе оно висело бы над страницей, пока панель сжимается.
+
+**`width: null` — ширина по содержимому.** Своей ширины нет, ручки ширины тоже; переход рядом от
+неё к нулю не анимируется, конец закрытия приходит по таймеру.
+
+**`autoFocus` по умолчанию — как раньше:** поверх содержимого фокус встаёт на панель, рядом не
+трогается. Селектор и `'first-tabbable'` работают в обоих местах; узел не нашёлся — фокус на панели.
+Панель, открытая с первой отрисовки, фокус не берёт: страницу только загрузили.
+Пустой атрибут и строка `'true'` значат `true`, строка `'false'` — `false`.
+
+**`backdropClick` приходит до закрытия и с `disableClose`.** Так приложение узнаёт о нажатии, даже
+когда закрывать панель решает само.
+
+**Высота окна — от контейнера.** Контейнер высотой в окно обрезает края, а прокручивается его
+содержимое: панели остаются высотой в окно без отдельного входа.

package/src/lib/components/drawer/rt-drawer-container.component.scss

@@ -0,0 +1,19 @@
+@layer rt-kit.components {
+    /* rt-drawer-container — строка из содержимого и панелей. Панель поверх содержимого
+       отсчитывает своё место от контейнера, поэтому он и задаёт положение, и обрезает края. */
+    .rt-drawer-container {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        min-height: 0;
+
+        /* Ярусы панели и подложки — внутри контейнера, а содержимое со своим z-index их не перекрывает. */
+        isolation: isolate;
+
+        &__content {
+            overflow: auto;
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+    }
+}

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

@@ -0,0 +1,168 @@
+@layer rt-kit.components {
+    /* rt-drawer — панель внутри rt-drawer-container. Хост прозрачен для раскладки: подложка и
+       панель становятся прямыми участниками гибкой строки контейнера. */
+    .rt-drawer {
+        display: contents;
+    }
+
+    .rt-drawer__panel {
+        --rt-drawer-width: var(--rt-size-64);
+        --rt-drawer-bg: var(--rt-color-bg-surface);
+        --rt-drawer-border-width: var(--rt-border-width-thin);
+        --rt-drawer-border-color: var(--rt-color-border-subtle);
+        --rt-drawer-shadow: var(--rt-shadow-lg);
+        --rt-drawer-side-shadow: none;
+        --rt-drawer-duration: var(--rt-duration-base);
+
+        /* Ярус панели рядом с содержимым. Начальная панель стоит в строке раньше содержимого, и
+           содержимое со своим контекстом наложения рисуется поверх её тени; ярус выше `auto` это
+           меняет. Поверх содержимого ярус свой, выше подложки: `isolation` контейнера не пускает
+           оба над страницей. */
+        --rt-drawer-z-index: auto;
+        --rt-drawer-over-z-index: var(--rt-z-modal);
+
+        position: relative;
+        z-index: var(--rt-drawer-z-index);
+        display: flex;
+        overflow: clip;
+        min-height: 0;
+        flex: 0 0 auto;
+        background-color: var(--rt-drawer-bg);
+        inline-size: var(--rt-drawer-width);
+        outline: none;
+        transition:
+            inline-size var(--rt-drawer-duration) ease,
+            transform var(--rt-drawer-duration) ease,
+            visibility 0s linear;
+
+        &--position--start {
+            order: -1;
+        }
+
+        &--position--end {
+            order: 1;
+        }
+
+        &--mode--side {
+            box-shadow: var(--rt-drawer-side-shadow);
+        }
+
+        &--mode--side#{&}--position--start {
+            border-inline-end: var(--rt-drawer-border-width) solid var(--rt-drawer-border-color);
+        }
+
+        &--mode--side#{&}--position--end {
+            border-inline-start: var(--rt-drawer-border-width) solid var(--rt-drawer-border-color);
+        }
+
+        /* Поверх содержимого: панель снята со строки и прижата к своему краю контейнера. */
+        &--mode--over {
+            position: absolute;
+            z-index: var(--rt-drawer-over-z-index);
+            box-shadow: var(--rt-drawer-shadow);
+            inset-block: 0;
+        }
+
+        &--mode--over#{&}--position--start {
+            inset-inline-start: 0;
+        }
+
+        &--mode--over#{&}--position--end {
+            inset-inline-end: 0;
+        }
+
+        /* Открытая панель с visible не обрезает своё: подпанель выходит вбок, ручка ложится на
+           край. Закрываясь, панель обрезает сразу — содержимое не висит над страницей, пока она
+           сжимается. */
+        &--overflow--visible#{&}--opened {
+            overflow: visible;
+        }
+
+        /* Ширина по содержимому: своей ширины нет, переход от неё к нулю не анимируется. */
+        &--auto-width {
+            inline-size: fit-content;
+        }
+
+        /* Закрытая панель остаётся в разметке: рядом с содержимым она сжимается до нуля, поверх —
+           уезжает за свой край. Видимость гаснет после перехода, иначе уход не виден. */
+        &:not(#{&}--opened) {
+            transition:
+                inline-size var(--rt-drawer-duration) ease,
+                transform var(--rt-drawer-duration) ease,
+                visibility 0s linear var(--rt-drawer-duration);
+            visibility: hidden;
+        }
+
+        &--mode--side:not(#{&}--opened) {
+            border-width: 0;
+            inline-size: 0;
+        }
+
+        &--mode--over#{&}--position--start:not(#{&}--opened) {
+            transform: translateX(-100%);
+        }
+
+        &--mode--over#{&}--position--end:not(#{&}--opened) {
+            transform: translateX(100%);
+        }
+
+        /* Справа налево начало строки справа: панель уезжает за правый край, а конечная — за левый. */
+        &--mode--over#{&}--position--start:not(#{&}--opened):dir(rtl) {
+            transform: translateX(100%);
+        }
+
+        &--mode--over#{&}--position--end:not(#{&}--opened):dir(rtl) {
+            transform: translateX(-100%);
+        }
+
+        /* Пока ручку тянут, ширина идёт за указателем без запаздывания. */
+        &--resizing {
+            transition: none;
+        }
+    }
+
+    /* Содержимое держит полную ширину и тогда, когда панель сжимается: строки не переносятся
+       заново на каждом кадре перехода. */
+    .rt-drawer__inner {
+        overflow: auto;
+        min-width: 0;
+        flex: 0 0 var(--rt-drawer-width);
+    }
+
+    .rt-drawer__panel--overflow--visible.rt-drawer__panel--opened > .rt-drawer__inner {
+        overflow: visible;
+    }
+
+    .rt-drawer__panel--auto-width > .rt-drawer__inner {
+        flex-basis: auto;
+    }
+
+    .rt-drawer__backdrop {
+        --rt-drawer-backdrop-bg: var(--rt-color-bg-overlay);
+        --rt-drawer-backdrop-duration: var(--rt-duration-base);
+
+        /* Подложка под панелью, но над содержимым и его ярусами. */
+        --rt-drawer-backdrop-z-index: var(--rt-z-modal-backdrop);
+
+        position: absolute;
+        z-index: var(--rt-drawer-backdrop-z-index);
+        background: var(--rt-drawer-backdrop-bg);
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--rt-drawer-backdrop-duration) ease;
+
+        &--visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-drawer__panel,
+        .rt-drawer__panel:not(.rt-drawer__panel--opened),
+        .rt-drawer__backdrop {
+            transition: none;
+        }
+    }
+}

package/src/lib/components/drawer/rt-resize-handle.component.scss

@@ -0,0 +1,42 @@
+@layer rt-kit.components {
+    /* rt-resize-handle — полоса на краю панели. Сама линия видна на наведении, фокусе и во время
+       движения; в покое ручка прозрачна, чтобы край панели оставался краем. */
+    .rt-resize-handle {
+        --rt-resize-handle-hit: var(--rt-space-2);
+        --rt-resize-handle-line: var(--rt-border-width-medium);
+        --rt-resize-handle-color: var(--rt-color-action-primary);
+        --rt-resize-handle-duration: var(--rt-duration-fast);
+
+        position: absolute;
+        width: var(--rt-resize-handle-hit);
+        cursor: col-resize;
+        inset-block: 0;
+        outline: none;
+        touch-action: none;
+
+        &:after {
+            position: absolute;
+            width: var(--rt-resize-handle-line);
+            background-color: transparent;
+            content: '';
+            inset-block: 0;
+            inset-inline-start: calc(50% - var(--rt-resize-handle-line) / 2);
+            transition: background-color var(--rt-resize-handle-duration) ease;
+        }
+
+        &:hover:after,
+        &:focus-visible:after,
+        &--dragging:after {
+            background-color: var(--rt-resize-handle-color);
+        }
+
+        /* Ручка стоит внутри панели у её края: панель обрезает всё, что за краем. */
+        &--edge--start {
+            inset-inline-start: 0;
+        }
+
+        &--edge--end {
+            inset-inline-end: 0;
+        }
+    }
+}

package/src/lib/components/dynamic-selector/CONTEXT.md

@@ -33,6 +33,11 @@
 `emptyResultsText`; у поля строк вид поля новой строки — `fieldAppearance`. Цвет кнопки «Добавить»
 — ручка `--rt-dynamic-selector-list-add-color`: кнопку проецируют оба поля, и вид у неё разный.
 
+**Окно выбора работает и само по себе.** В своём оверлее под своей кнопкой приложения оно берёт
+записи и настройки из своих входов (`keyExp` и `displayExp` обязательны) и сообщает о действиях
+событиями `applied`, `cancelled`, `searchChange`, `loadMore`, `temporaryChoiceChange`. Внутри
+селектора и поля строк входы окна молчат: оно читает корень через сервис частей.
+
 **Поле строк срезает пробелы по краям и не добавляет пустое и повторное.** Повтор сравнивается
 точно, с учётом регистра.