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

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

@@ -14,6 +14,13 @@
             flex-direction: row;
         }
 
+        /* Пока панель сменяется, уходящая стоит поверх области содержимого от хоста, а сдвиг обеих
+           не выходит за его ширину. Обрезка только поперёк: вниз содержимое не режется. */
+        &--animating {
+            position: relative;
+            overflow-x: clip;
+        }
+
         &__header {
             display: flex;
             align-items: center;
@@ -28,6 +35,7 @@
         }
 
         &__tab-list {
+            position: relative;
             display: flex;
             border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
             margin: 0;
@@ -54,6 +62,41 @@
             &--stretch {
                 justify-content: space-between;
             }
+
+            /* Полосу рисует общий элемент, и своя полоса выбранной вкладки гаснет. У неверной
+               вкладки своя полоса остаётся: она красная и у невыбранной. */
+            &--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after {
+                background-color: transparent;
+            }
+        }
+
+        /* Полоса выбранной вкладки. Место — от замера вкладки: сдвиг к её левому краю и низу,
+           подъём на свою высоту и спуск на толщину черты, как у полосы самой вкладки. До замера её
+           нет, и полосу рисует вкладка. */
+        &__ink {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: none;
+            height: 2px;
+            margin-top: var(--rt-tabs-border-width);
+            background-color: var(--rt-color-action-primary);
+            pointer-events: none;
+            transform: translateY(-100%);
+
+            &--placed {
+                display: block;
+            }
+
+            &--animated {
+                transition:
+                    translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),
+                    width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing);
+            }
+
+            &--invalid {
+                background-color: var(--rt-color-state-danger);
+            }
         }
 
         &__rest {
@@ -90,6 +133,33 @@
             }
         }
 
+        /* Стрелки в своих местах: при переполнении обе стоят по краям, полоса между ними уже.
+           Стрелка в сторону, куда прокручивать некуда, бледнеет и не нажимается. Черта снизу
+           продолжает черту полосы под стрелками. */
+        &__tab-list-wrapper--inline {
+            align-items: stretch;
+
+            .rt-tabs__rest {
+                position: static;
+                display: none;
+                flex-shrink: 0;
+                border: 0;
+                border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+                background-color: transparent;
+            }
+
+            &.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest {
+                display: flex;
+                visibility: visible;
+            }
+
+            .rt-tabs__rest--inactive {
+                color: var(--rt-color-text-disabled);
+                cursor: default;
+                pointer-events: none;
+            }
+        }
+
         &__controls {
             display: flex;
             flex-shrink: 0;
@@ -116,6 +186,59 @@
             &--scrollable {
                 overflow: auto;
             }
+
+            /* Сохранённое тело неактивной вкладки: живёт в разметке, но не рисуется. Своё display
+               панели сильнее правила браузера для hidden, поэтому скрытие задано явно. */
+            &--idle {
+                display: none;
+            }
+
+            /* Уходящая панель снята с потока и стоит в точке, где была. */
+            &--leaving {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                animation: rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;
+                pointer-events: none;
+            }
+
+            &--entering {
+                animation: rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing);
+            }
+
+            /* К вкладке правее старая уходит влево, новая въезжает справа; к левее — зеркально. */
+            &--shift--forward {
+                --rt-tabs-panel-leave-to: -100%;
+                --rt-tabs-panel-enter-from: 100%;
+            }
+
+            &--shift--backward {
+                --rt-tabs-panel-leave-to: 100%;
+                --rt-tabs-panel-enter-from: -100%;
+            }
+        }
+    }
+
+    @keyframes rt-tabs-panel-leave {
+        to {
+            translate: var(--rt-tabs-panel-leave-to) 0;
+        }
+    }
+
+    @keyframes rt-tabs-panel-enter {
+        from {
+            translate: var(--rt-tabs-panel-enter-from) 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .rt-tabs__ink--animated {
+            transition: none;
+        }
+
+        .rt-tabs__content--leaving,
+        .rt-tabs__content--entering {
+            animation: none;
         }
     }
 
@@ -123,13 +246,20 @@
         --rt-tab-item-border-width: var(--rt-border-width-thin);
         --rt-tab-item-badge-radius: var(--rt-radius-full);
         --rt-tab-item-transition-duration: var(--rt-duration-fast);
+        --rt-tab-item-close-size: var(--rt-size-5);
+        --rt-tab-item-close-radius: var(--rt-radius-full);
+        --rt-tab-item-close-bg: transparent;
+        --rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);
+        --rt-tab-item-close-color: var(--rt-color-text-muted);
+        --rt-tab-item-close-color-hover: var(--rt-color-text-primary);
+        --rt-tab-item-close-icon-size: var(--rt-icon-step-xs);
+        --rt-tab-item-close-margin-inline-start: 0;
+        --rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));
 
         position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        padding: var(--rt-space-2) var(--rt-space-4);
-        border: 0;
         margin: 0;
         background-color: transparent;
         color: var(--rt-color-text-muted);
@@ -144,15 +274,18 @@
             background-color var(--rt-tab-item-transition-duration) linear;
         white-space: nowrap;
 
-        /* Нижний индикатор активной вкладки — поверх border-bottom полосы. */
+        /* Нижний индикатор активной вкладки — поверх border-bottom полосы. Сдвиг вниз на толщину
+           черты задан через translate, а не calc: `calc(-1 * 0)` даёт число без единиц, bottom
+           с ним недействителен, и при токене `0` полоса уходила в середину вкладки. */
         &:after {
             position: absolute;
-            bottom: calc(-1 * var(--rt-tab-item-border-width));
+            bottom: 0;
             height: 2px;
             background-color: transparent;
             content: '';
             inset-inline: 0;
             pointer-events: none;
+            translate: 0 var(--rt-tab-item-border-width);
         }
 
         &:hover:not(.rt-tab-item--disabled, .rt-tab-item--selected) {
@@ -163,11 +296,35 @@
         /* Inset-outline вместо box-shadow ring: полоса вкладок — scroll-контейнер
            (overflow), который обрезал бы внешнее кольцо. Inset рисуется внутри
            элемента, не клиппится и переживает forced-colors. */
-        &:focus-visible {
+        &:has(> .rt-tab-item__trigger:focus-visible) {
             outline: 2px solid var(--rt-color-action-primary);
             outline-offset: -3px;
         }
 
+        /* Сама вкладка внутри обёртки: несёт отступы и содержимое, вид берёт у обёртки. Кольцо
+           фокуса рисует обёртка, чтобы оно обходило и крестик. У закрываемой вкладки правый
+           отступ переходит к крестику: он стоит после кнопки, и место до края вкладки — его. */
+        &__trigger {
+            display: inline-flex;
+            min-width: 0;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-2) var(--rt-space-4);
+            border: 0;
+            margin: 0;
+            background: none;
+            color: inherit;
+            cursor: inherit;
+            font: inherit;
+            gap: inherit;
+            line-height: inherit;
+            outline: none;
+
+            &--closable {
+                padding-inline-end: 0;
+            }
+        }
+
         &__title {
             overflow: hidden;
             max-width: 200px;
@@ -193,6 +350,45 @@
             line-height: var(--rt-leading-none);
         }
 
+        /* Крестик закрываемой вкладки: подложка при наведении отделяет его от самой вкладки,
+           иначе нажатие по нему читается как выбор вкладки. Отрицательный отступ по вертикали
+           держит высоту вкладки: крестик выше строки подписи, и без него полоса росла бы.
+           Размер иконки идёт через шаг `xs` самой иконки: её ширина задана стилем на теге.
+           Крестик — своя кнопка рядом с кнопкой вкладки, поэтому правый отступ вкладки входит в
+           его отступ до края: вид тот же, что у крестика внутри вкладки. */
+        &__close {
+            --rt-icon-step-xs: var(--rt-tab-item-close-icon-size);
+
+            display: inline-flex;
+            width: var(--rt-tab-item-close-size);
+            height: var(--rt-tab-item-close-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            border-radius: var(--rt-tab-item-close-radius);
+            background-color: var(--rt-tab-item-close-bg);
+            color: var(--rt-tab-item-close-color);
+            cursor: pointer;
+            font: inherit;
+            margin-block: calc(-1 * var(--rt-space-1));
+            margin-inline: var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));
+            transition:
+                color var(--rt-tab-item-transition-duration) linear,
+                background-color var(--rt-tab-item-transition-duration) linear;
+
+            &:hover {
+                background-color: var(--rt-tab-item-close-bg-hover);
+                color: var(--rt-tab-item-close-color-hover);
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--rt-color-action-primary);
+                outline-offset: 0;
+            }
+        }
+
         &--selected {
             color: var(--rt-color-action-primary);
             cursor: default;

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

@@ -14,8 +14,10 @@
 | `rows`        | `number \| string`     | `3`          |
 | `resize`      | `'none' \| 'vertical'` | `'vertical'` |
 | `readonly`    | `boolean`              | `false`      |
+| `appearance`  | `'outline' \| 'fill'`  | `'outline'`  |
+| `maxlength`   | `number \| null`       | `null`       |
 
-Значение — `string`.
+Значение — `string`. `maxlength` уходит атрибутом на поле, как у `rt-input`.
 
 ## Главное, что нужно знать
 
@@ -32,6 +34,15 @@
 - `font-family: inherit` прописан явно: без него `<textarea>` падает на моноширинный шрифт
   браузера.
 - Горизонтальное растягивание не предусмотрено — только `none` и `vertical`.
+- Под материальным набором подпись вмещающего `rt-field` ложится внутрь поля: на место подсказки
+  в покое и на рамку при значении или фокусе. Признак — `fieldLabelInside` основы полей.
+- `appearance="fill"` рисует залитое поле, как у поля ввода: только черта снизу, под набором
+  подпись лежит внутри поля.
+
+## Межбуквенный интервал
+
+Текст берёт интервал из ручки `--rt-input-letter-spacing`, общей с полем, числом и выбором. Кит её
+не объявляет: без неё интервал `normal`.
 
 ## Рядом
 

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

@@ -1,8 +1,18 @@
 @use '../../../styles/mixins' as kv;
 
 @layer rt-kit.components {
+    /* Признак набора — на предке или на самом поле: приложение ставит его и на тег контрола. */
+    $preset: ':is(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+    $preset-weak: ':where(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
     .rt-textarea {
         --rt-textarea-radius: var(--rt-input-radius);
+        --rt-textarea-color-border-hover: var(--rt-color-text-primary);
+        --rt-textarea-fill-radius: var(--rt-radius-sm);
+
+        /* Боковая рамка поля: от неё отсчитывается текст. У залитого поля материального набора
+           боковой рамки нет. */
+        --rt-textarea-edge: var(--rt-input-border-width);
 
         display: block;
         width: 100%;
@@ -28,6 +38,9 @@
                monospace) — задаём inherit явно, иначе шрифт отваливается. */
             font-family: inherit;
             font-size: var(--rt-input-font-size);
+
+            /* Межбуквенный интервал значения — ручка приложения: кит её не объявляет, без неё normal. */
+            letter-spacing: var(--rt-input-letter-spacing, normal);
             line-height: var(--rt-textarea-line-height);
             transition: var(--rt-input-transition);
 
@@ -49,6 +62,82 @@
             }
         }
 
+        /* Наведение в материальном наборе — как у поля Material: рамка цвета текста. Сила правила —
+           на уровне поля, поэтому фокус, ошибка и «без рамки» его перекрывают. */
+        &#{$preset-weak} &__control:where(:hover:not(:disabled)) {
+            border-color: var(--rt-textarea-color-border-hover);
+        }
+
+        /* Вид «fill» — залитое поле с чертой снизу, как залитое поле ввода: скругление малое и
+           только сверху. Объявлен после наведения и до блоков состояний: ошибка ниже перекрывает его
+           рамку, а заливка остаётся и у отключённого поля. */
+        &--appearance--fill {
+            --rt-textarea-edge: var(--rt-input-fill-edge);
+        }
+
+        &--appearance--fill &__control {
+            border-width: var(--rt-input-fill-edge) var(--rt-input-fill-edge) var(--rt-input-border-width);
+            border-color: transparent;
+            border-radius: var(--rt-textarea-fill-radius) var(--rt-textarea-fill-radius) 0 0;
+            border-bottom-color: var(--rt-color-field-fill-underline);
+            background-color: var(--rt-color-bg-surface-subtle-2);
+
+            /* Фокус: в материальном наборе — черта снизу вдвое толще, а не кольцо по периметру. */
+            &:focus-visible {
+                border-color: var(--rt-input-color-border-focus);
+                box-shadow: var(--rt-input-fill-focus-shadow);
+            }
+        }
+
+        &--appearance--fill.rt-textarea--invalid &__control:focus-visible {
+            border-color: var(--rt-input-color-border-error);
+            box-shadow: var(--rt-input-fill-focus-shadow-error);
+        }
+
+        /* Залитая область текста в поле материального набора: подпись лежит внутри поля, первая
+           строка — там же, где значение залитого поля ввода, и 6 px под последней строкой вместе с
+           чертой, как у области текста Material. Без подписи места под неё нет: первая строка стоит
+           там, где стояла бы посередине однострочного поля, и снизу столько же, как у области текста
+           Material без mat-label. Правило лежит здесь, а не в листе подписи поля: тот держится под
+           порогом в 8 КБ. */
+        @at-root .rt-field--label-inside:is(
+                    .rt-preset-material *,
+                    [data-preset='material'] *,
+                    .rt-preset-material,
+                    [data-preset='material']
+                )
+                .rt-textarea--appearance--fill
+                .rt-textarea__control {
+            padding-top: calc(var(--rt-input-height) / 2 - var(--rt-space-6) / 2 - var(--rt-input-fill-edge));
+            padding-bottom: calc(var(--rt-input-height) / 2 - var(--rt-space-6) / 2 - var(--rt-input-border-width));
+            line-height: var(--rt-leading-normal);
+        }
+
+        @at-root .rt-field--label-inside:has(.rt-field__label-row):is(
+                    .rt-preset-material *,
+                    [data-preset='material'] *,
+                    .rt-preset-material,
+                    [data-preset='material']
+                )
+                .rt-textarea--appearance--fill
+                .rt-textarea__control {
+            padding-top: calc(var(--rt-input-height) / 2 - var(--rt-space-1) - var(--rt-input-fill-edge));
+            padding-bottom: calc(var(--rt-space-1) * 1.5 - var(--rt-input-border-width));
+        }
+
+        /* Под набором поле стоит в строке по верху, а не по базовой линии: так под ним нет зазора, и
+           область текста не выше поля Material. Своим видом кита зазор остаётся. */
+        &#{$preset-weak} &__control {
+            vertical-align: top;
+        }
+
+        /* Шаг входа `radius` у залитого поля скругляет все четыре угла, и черта снизу не рисуется —
+           как у залитого поля ввода. */
+        &--appearance--fill:where([data-rt-radius]) &__control {
+            border-radius: var(--rt-textarea-radius);
+            border-bottom-color: transparent;
+        }
+
         &--size--sm &__control {
             min-height: var(--rt-textarea-min-height-sm);
         }
@@ -65,8 +154,34 @@
             }
         }
 
+        /* Текст поля Material начинается в 16 px от внешнего края поля, рамка входит в этот отступ.
+           Своим видом кита отступ считается от рамки. */
+        &#{$preset-weak} &__control {
+            padding-inline: calc(var(--rt-input-padding-x) - var(--rt-textarea-edge));
+        }
+
+        /* Отключённое поле в материальном наборе не тускнеет, а красит рамку, текст и подсказку —
+           как поле ввода. Своим видом цвета равны обычным. */
         &--disabled {
-            opacity: var(--rt-input-disabled-opacity);
+            opacity: var(--rt-input-disabled-field-opacity);
+        }
+
+        &--disabled &__control {
+            color: var(--rt-input-color-text-disabled);
+
+            &::placeholder {
+                color: var(--rt-input-color-placeholder-disabled);
+            }
+        }
+
+        /* Отключённая залитая область текста в наборе залита, как поле Material: on-surface 4 %. */
+        &--disabled.rt-textarea--appearance--fill &__control {
+            background-color: var(--rt-input-fill-color-bg-disabled);
+        }
+
+        &--disabled:not(.rt-textarea--invalid, .rt-textarea--appearance--fill, .rt-textarea--borderless, .rt-textarea--readonly)
+            &__control {
+            border-color: var(--rt-input-color-border-disabled);
         }
 
         /* Read-only: многострочное значение как плоский текст (переносы сохраняем). */

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

@@ -25,9 +25,28 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 | `visibleToasts`   | `number \| string`                                                                                | `3`              |
 | `expand`          | `boolean`                                                                                         | `false`          |
 | `mode`            | `'stack' \| 'replace'`                                                                            | `'stack'`        |
+| `channel`         | `string`                                                                                          | `'default'`      |
 
 ## Главное, что нужно знать
 
+**Ручку возвращают `open` и `openFromComponent`, короткие способы — нет.** `NotificationRef`:
+`update(patch)`, `dismiss()`, `afterDismissed()`. `success`/`info`/`warning`/`error`/`emit`
+остались `void`: их зовут из стрелок с типом `void`. Тостер слушает ручку до ухода тоста, тост
+сообщает ей причину через `markClosed`; `onDismiss` получает только уход без действия и без
+`dismiss()`. Тост, уничтоженный вместе с тостером, сообщает ручке `destroyed`.
+
+**Свой компонент стоит на месте сообщения.** Данные — токеном `RT_TOAST_DATA`, ручка — инъекцией
+`NotificationRef`. Инжектор пересоздаётся только при смене данных или ручки, поэтому живая доля
+компонент не пересоздаёт.
+
+**`bare: true` снимает с тоста оболочку.** Нет фона, рамки, отступов, тени, скругления, значка,
+крестика и полосы срока: свой компонент рисует карточку и свою кнопку закрытия сам и закрывает тост
+ручкой. Место в стопке, появление и уход, ручка и имя для чтения с экрана остаются. Модификатор
+`rt-toast--bare` стоит после залитого и сильнее его, чтобы ни залитый, ни набор оболочку не вернули.
+
+**`progressValue` и `details` — поля тоста.** Доля рисуется `rt-progress-bar`, подробности —
+`rt-copy-value` с `wrap` под кнопкой «Детали»; высота тоста пересчитывается после каждого изменения.
+
 **Тосты показываются не входом, а шиной.** Стопка подписана на
 `NotificationBus` и других способов показать тост
 нет. Шина — `providedIn: 'root'`, поэтому её достаточно инжектировать где угодно.
@@ -47,6 +66,10 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `progress: true` рисует полосу срока; она встаёт тем же признаком `rt-toast--paused`, что и таймер.
 - `icon` у тоста важнее карты `RT_TOAST_SEVERITY_ICONS`; `icon: null` снимает значок.
 - `mode="replace"` помечает прежние тосты вытесненными, и они уходят той же анимацией, что по крестику.
+- `channel` у тостера и у тоста разводит потоки. Тостер показывает только тосты своего канала; тост
+  без `channel` и тостер без входа стоят в канале `'default'`. Второй тостер со своим каналом держит
+  закреплённые тосты в своём углу: обычный тост в режиме `replace` их не вытесняет. Тост канала,
+  у которого нет тостера, не показывается никем.
 - `onDismiss` сообщает один раз, почему тост ушёл без действия: `close`, `timeout` или `replaced`.
   Ушедший по `action` или `secondaryAction` ничего не сообщает — его обработчик уже вызван.
 

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

@@ -114,6 +114,17 @@
             }
         }
 
+        /* Голый тост: оболочку рисует свой компонент. Два класса и место после залитого — чтобы
+           залитый и набор, задающий ручки тоста, оболочку не вернули. */
+        &.rt-toast--bare {
+            --rt-toast-radius: 0;
+            --rt-toast-border-width: 0;
+            --rt-toast-shadow: none;
+
+            padding: 0;
+            background: transparent;
+        }
+
         &--mounted {
             --y: translateY(0);
 
@@ -213,6 +224,32 @@
             font-weight: var(--rt-font-weight-regular);
         }
 
+        /* Сообщение тоста со своим компонентом: видно только чтению с экрана. */
+        &__sr-message {
+            position: absolute;
+            overflow: hidden;
+            width: 1px;
+            height: 1px;
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+
+        &__custom {
+            min-width: 0;
+        }
+
+        &__value {
+            margin-block: var(--rt-space-1);
+        }
+
+        & &__details-toggle {
+            align-self: flex-start;
+        }
+
+        &__details {
+            display: flex;
+        }
+
         &__actions {
             display: flex;
             flex-wrap: wrap;

package/src/lib/components/toggle-button-group/CONTEXT.md

@@ -17,14 +17,34 @@
 | `ariaLabel`              | `string \| null`                                 | `null`         |
 | `size`                   | `'sm' \| 'md' \| 'lg'`                           | `'sm'`         |
 | `disabled` / `fullWidth` | `boolean`                                        | `false`        |
+| `multiple`               | `boolean`                                        | `false`        |
+| `values`                 | `ReadonlyArray<T>`                               | `[]`           |
+| `layout`                 | `'row' \| 'wrap' \| 'column'`                    | `'row'`        |
+| `appearance`             | `'segmented' \| 'chips'`                         | `'segmented'`  |
+| `checkmark`              | `boolean`                                        | `false`        |
 
-Выход: `valueChange`.
+Выходы: `valueChange`, при `multiple` — `valuesChange` со всем набором выбранного.
 
 ## Главное, что нужно знать
 
-**Группа не держит состояния.** Нажатие только просит сменить значение; подсветка сдвинется,
-когда потребитель вернёт новое `value`. Повторное нажатие по выбранному тоже поднимает событие —
-снимать выбор группа не умеет.
+**Без формы группа не держит состояния.** Нажатие только просит сменить значение; подсветка
+сдвинется, когда потребитель вернёт новое `value`. Повторное нажатие по выбранному тоже поднимает
+событие — снимать одиночный выбор группа не умеет.
+
+**В форме группа — контрол.** `[formControl]` и `formControlName` пишут значение сами: одно при
+одиночном выборе, набор при `multiple`. `FormControl.disable()` отключает группу.
+
+**Свой сегмент — шаблон `<ng-template rtToggleButtonOption let-option let-active="active">`.** Он
+встаёт внутрь кнопки на место подписи и иконки; кнопка, выбор и подсказка остаются у группы.
+
+**`layout`** раскладывает сегменты в строку, с переносом или столбиком: перенос нужен длинным
+спискам во всплывающих окнах, столбик — спискам вроде дней недели.
+
+**`appearance="chips"` — отдельные пункты вместо дорожки.** Каждый чип с обводкой, выбранный
+залит, между чипами 8 px; поведение то же, что у сегментов. В столбике чипы тянутся на ширину места
+и сами берут свободную ширину строчного гибкого родителя. `checkmark` ставит галочку перед подписью
+выбранного. Под материальным набором чип — фильтр-чип Material: 28 px, отступы 12 px, поле 8 px
+сверху и снизу, строки через 16 px. Цвета — свойства `--rt-toggle-chip-color-*`.
 
 ## Края