@rt-tools/ui-kit-v2 0.16.0 → 0.17.0

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

@@ -7,15 +7,28 @@
         --rt-spinner-rotation-duration: 1s;
         --rt-spinner-rotation-duration-reduced: 4s;
         --rt-spinner-radius: var(--rt-radius-full);
+        --rt-spinner-overlay-z: var(--rt-z-sticky);
+        --rt-spinner-plate-size: calc(var(--rt-spinner-diameter) + 2 * var(--rt-space-2));
+        --rt-spinner-plate-bg: var(--rt-color-bg-surface);
+        --rt-spinner-plate-shadow: var(--rt-shadow-md);
+        --rt-spinner-plate-radius: var(--rt-radius-full);
+        --rt-spinner-backdrop-bg: color-mix(in srgb, var(--rt-color-bg-subtle) 85%, transparent);
+        --rt-spinner-arc-duration: 1.4s;
+        --rt-spinner-arc-duration-reduced: 5.6s;
 
-        display: inline-block;
-        width: var(--rt-spinner-diameter);
-        height: var(--rt-spinner-diameter);
-        box-sizing: border-box;
-        border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
-        border-radius: var(--rt-spinner-radius);
-        border-right-color: var(--rt-spinner-progress-color);
-        animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        /* Кольцо: border с одной цветной стороной и вращение. Его рисует host без новых режимов,
+           а в них — элемент `__ring` внутри, теми же правилами. */
+        &,
+        &__ring {
+            display: inline-block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            box-sizing: border-box;
+            border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
+            border-radius: var(--rt-spinner-radius);
+            border-right-color: var(--rt-spinner-progress-color);
+            animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        }
 
         &--primary {
             --rt-spinner-progress-color: var(--rt-color-action-primary);
@@ -29,6 +42,61 @@
             --rt-spinner-track-color: var(--rt-overlay-white-25);
             --rt-spinner-progress-color: var(--rt-color-action-on-primary);
         }
+
+        /* В новых режимах host — коробка, а кольцо внутри: border и вращение с host-а снимаются. */
+        &--framed {
+            display: inline-flex;
+            width: auto;
+            height: auto;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            border-radius: 0;
+            animation: none;
+        }
+
+        /* Слой — ступень sticky: выше закреплённых частей самого блока, ниже всего, что открывается
+           поверх страницы; приложение переназначает слой свойством `--rt-spinner-overlay-z`. Родитель
+           должен быть позиционирован — его спиннер не трогает. */
+        &--overlay {
+            position: absolute;
+            z-index: var(--rt-spinner-overlay-z);
+            display: flex;
+            inset: 0;
+        }
+
+        &--backdrop {
+            background: var(--rt-spinner-backdrop-bg);
+        }
+
+        &__plate {
+            display: inline-flex;
+            width: var(--rt-spinner-plate-size);
+            height: var(--rt-spinner-plate-size);
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-spinner-plate-radius);
+            background: var(--rt-spinner-plate-bg);
+            box-shadow: var(--rt-spinner-plate-shadow);
+        }
+
+        /* Дуга как у Material: контейнер вращается, а длина дуги растёт и сокращается. Дорожки нет. */
+        &__arc {
+            display: block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            animation: rt-spinner-rotate var(--rt-spinner-arc-duration) linear infinite;
+        }
+
+        &__arc-circle {
+            animation: rt-spinner-arc-dash var(--rt-spinner-arc-duration) ease-in-out infinite;
+            fill: none;
+            stroke: var(--rt-spinner-progress-color);
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+            stroke-linecap: round;
+            stroke-width: 4;
+        }
     }
 
     @keyframes rt-spinner-rotate {
@@ -37,9 +105,40 @@
         }
     }
 
+    /* Цикл Material — точка, длинная дуга, дуга уходит в точку — начат с длинной дуги. Движение то
+       же, а кадр с остановленным движением показывает дугу, а не точку. В середине дуга уже точка, и
+       переход к началу её длины глазу не виден. */
+    @keyframes rt-spinner-arc-dash {
+        0% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+
+        50% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -124;
+        }
+
+        50.01% {
+            stroke-dasharray: 1 200;
+            stroke-dashoffset: 0;
+        }
+
+        100% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+    }
+
     @media (prefers-reduced-motion: reduce) {
-        .rt-spinner {
+        .rt-spinner,
+        .rt-spinner__ring {
             animation-duration: var(--rt-spinner-rotation-duration-reduced);
         }
+
+        .rt-spinner__arc,
+        .rt-spinner__arc-circle {
+            animation-duration: var(--rt-spinner-arc-duration-reduced);
+        }
     }
 }

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

@@ -7,6 +7,11 @@
        так они достаются только корню шаблона. */
 
     rt-tag {
+        /* Скругление и толщина рамки объявлены на хосте: правило приложения на теге компонента
+           их переопределяет, а шаги входа `radius` стоят тоже на хосте. */
+        --rt-tag-radius: var(--rt-radius-full);
+        --rt-tag-border-width: var(--rt-border-width-thin);
+
         display: inline-flex;
 
         /* Предел стоит и на хосте, и на пилюле внутри. Вмещающий блок пилюли — сам хост, и без
@@ -14,73 +19,88 @@
            разросшегося хоста, и метка вылезает за место, которое ей дали. */
         max-width: 100%;
 
+        /* Цвета и отступы приложение задаёт ручками `--rt-tag-color-*` и `--rt-tag-padding-*`:
+           их кит не объявляет, а запасное значение — то, что дают палитра и ступень размера.
+           У интервала запасного нет нарочно: незаданная ручка даёт unset, то есть наследование
+           от родителя, как до ручки. Запасное normal обрывало его. */
         .rt-tag {
-            --rt-tag-radius: var(--rt-radius-full);
-            --rt-tag-border-width: var(--rt-border-width-thin);
+            --rt-tag-severity-bg: var(--rt-neutral-100);
+            --rt-tag-severity-text: var(--rt-neutral-700);
+            --rt-tag-size-padding-block: var(--rt-space-1);
+            --rt-tag-size-padding-inline: var(--rt-space-2);
 
             display: inline-flex;
             max-width: 100%;
             align-items: center;
-            padding: var(--rt-space-1) var(--rt-space-2);
+            padding: var(--rt-tag-padding-block, var(--rt-tag-size-padding-block))
+                var(--rt-tag-padding-inline, var(--rt-tag-size-padding-inline));
             border-radius: var(--rt-tag-radius);
-            background: var(--rt-neutral-100);
-            color: var(--rt-neutral-700);
+            background: var(--rt-tag-color-bg, var(--rt-tag-severity-bg));
+            color: var(--rt-tag-color-text, var(--rt-tag-severity-text));
             font-size: var(--rt-text-sm);
             gap: var(--rt-space-1);
+            letter-spacing: var(--rt-tag-letter-spacing);
             line-height: var(--rt-leading-tight);
 
             /* Ступени размера: отступы, кегль и просвет между частями двигаются вместе. `md`
                повторяет то, чем метка рисовалась до появления ступеней, и вид без входа не
                меняется ни на пиксель. */
             &--size--sm {
-                padding: var(--rt-space-0-5) var(--rt-space-1);
+                --rt-tag-size-padding-block: var(--rt-space-0-5);
+                --rt-tag-size-padding-inline: var(--rt-space-1);
+
                 font-size: var(--rt-text-xs);
                 gap: var(--rt-space-0-5);
             }
 
             &--size--md {
-                padding: var(--rt-space-1) var(--rt-space-2);
+                --rt-tag-size-padding-block: var(--rt-space-1);
+                --rt-tag-size-padding-inline: var(--rt-space-2);
+
                 font-size: var(--rt-text-sm);
                 gap: var(--rt-space-1);
             }
 
             &--size--lg {
-                padding: var(--rt-space-2) var(--rt-space-4);
+                --rt-tag-size-padding-block: var(--rt-space-2);
+                --rt-tag-size-padding-inline: var(--rt-space-4);
+
                 font-size: var(--rt-text-md);
                 gap: var(--rt-space-2);
             }
 
             &--severity--info {
-                background: var(--rt-color-state-info-bg);
-                color: var(--rt-color-state-info);
+                --rt-tag-severity-bg: var(--rt-color-state-info-bg);
+                --rt-tag-severity-text: var(--rt-color-state-info);
             }
 
             &--severity--success {
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+                --rt-tag-severity-bg: var(--rt-color-state-success-bg);
+                --rt-tag-severity-text: var(--rt-color-state-success);
             }
 
             &--severity--warning {
-                background: var(--rt-color-state-warning-bg);
-                color: var(--rt-color-state-warning);
+                --rt-tag-severity-bg: var(--rt-color-state-warning-bg);
+                --rt-tag-severity-text: var(--rt-color-state-warning);
             }
 
             &--severity--danger {
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+                --rt-tag-severity-bg: var(--rt-color-state-danger-bg);
+                --rt-tag-severity-text: var(--rt-color-state-danger);
             }
 
             &--severity--secondary,
             &--severity--neutral {
-                background: var(--rt-color-bg-subtle);
-                color: var(--rt-color-text-primary);
+                --rt-tag-severity-bg: var(--rt-color-bg-subtle);
+                --rt-tag-severity-text: var(--rt-color-text-primary);
             }
 
             /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
-               После severity-блоков — иначе их `background` перебил бы transparent. */
+               После severity-блоков — иначе их фон перебил бы transparent. */
             &--appearance--outlined {
-                border: var(--rt-tag-border-width) solid currentcolor;
-                background: transparent;
+                --rt-tag-severity-bg: transparent;
+
+                border: var(--rt-tag-border-width) solid var(--rt-tag-color-border, currentcolor);
             }
 
             &__icon {
@@ -111,7 +131,7 @@
             }
         }
 
-        /* Шаг входа `radius` переназначает собственное свойство пилюли. */
-        @include kv.radius-steps('--rt-tag-radius', '> .rt-tag');
+        /* Шаг входа `radius` переназначает собственное свойство пилюли на хосте. */
+        @include kv.radius-steps('--rt-tag-radius');
     }
 }

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

@@ -24,6 +24,7 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 | `duration`        | `number \| string` (мс)                                                                           | `4000`           |
 | `visibleToasts`   | `number \| string`                                                                                | `3`              |
 | `expand`          | `boolean`                                                                                         | `false`          |
+| `mode`            | `'stack' \| 'replace'`                                                                            | `'stack'`        |
 
 ## Главное, что нужно знать
 
@@ -42,12 +43,19 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `action` и `secondaryAction` рисуются кнопками внутри тоста и зовут переданные обработчики.
 - `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
 - Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
+- `duration` у самого тоста важнее срока тостера; `duration: null` держит тост до крестика.
+- `progress: true` рисует полосу срока; она встаёт тем же признаком `rt-toast--paused`, что и таймер.
+- `icon` у тоста важнее карты `RT_TOAST_SEVERITY_ICONS`; `icon: null` снимает значок.
+- `mode="replace"` помечает прежние тосты вытесненными, и они уходят той же анимацией, что по крестику.
 
 ## Края
 
 - **Нулевая длительность не значит «висит, пока не закроют».** `duration: 0` — это таймер на
   ноль миллисекунд: тост гасит себя сразу после первой отрисовки. Держать его открытым умеет
   только пауза таймера — признак `interacting` либо развёрнутая стопка.
+  Тост «до крестика» задаётся `duration: null`.
+- **Значок красится стилем, а не входом `color` значка.** Вход пишет цвет прямо в разметку, и
+  ручке `--rt-toast-icon-color` перебить его было бы нечем.
 - **В матрице каждому тосту ставится `[interacting]="true"`.** Иначе ячейки гаснут одна за
   другой, пока смотришь на показ, и кадр снимается с пустой сетки.
 

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

@@ -7,6 +7,7 @@
         --rt-toast-shadow-duration: var(--rt-duration-base);
         --rt-toast-leave-duration: var(--rt-duration-slower);
         --rt-toast-fade-duration: var(--rt-duration-fast);
+        --rt-toast-severity-color: var(--rt-color-state-info);
         --y: translateY(100%);
         --lift-amount: calc(var(--lift) * var(--gap));
 
@@ -17,11 +18,11 @@
         box-sizing: border-box;
         align-items: center;
         padding: var(--rt-space-4);
-        border: var(--rt-toast-border-width) solid var(--rt-color-border-subtle);
+        border: var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));
         border-radius: var(--rt-toast-radius);
-        background: var(--rt-color-bg-surface);
+        background: var(--rt-toast-bg, var(--rt-color-bg-surface));
         box-shadow: var(--rt-toast-shadow);
-        color: var(--rt-color-text-primary);
+        color: var(--rt-toast-color, var(--rt-color-text-primary));
         font-size: var(--rt-text-sm);
         font-weight: var(--rt-font-weight-medium);
         gap: var(--rt-space-2);
@@ -64,33 +65,52 @@
             bottom: 0;
         }
 
+        /* Цвет важности — частное свойство: его берут значок и полоса срока. */
+        &--severity--success {
+            --rt-toast-severity-color: var(--rt-color-state-success);
+        }
+
+        &--severity--warning {
+            --rt-toast-severity-color: var(--rt-color-state-warning);
+        }
+
+        &--severity--danger {
+            --rt-toast-severity-color: var(--rt-color-state-danger);
+        }
+
+        /* Залитый тост читает свои ручки по важности, а не общие: общая ручка фона, заданная
+           на корне страницы, иначе перекрасила бы и залитые тосты. Значок идёт за текстом. */
         &--filled {
             .rt-toast__description {
                 color: inherit;
             }
 
+            .rt-toast__icon {
+                color: currentcolor;
+            }
+
             &.rt-toast--severity--info {
-                border-color: var(--rt-color-state-info-bg);
-                background: var(--rt-color-state-info-bg);
-                color: var(--rt-color-state-info);
+                border-color: var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));
+                background: var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));
+                color: var(--rt-toast-filled-info-color, var(--rt-color-state-info));
             }
 
             &.rt-toast--severity--success {
-                border-color: var(--rt-color-state-success-bg);
-                background: var(--rt-color-state-success-bg);
-                color: var(--rt-color-state-success);
+                border-color: var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));
+                background: var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));
+                color: var(--rt-toast-filled-success-color, var(--rt-color-state-success));
             }
 
             &.rt-toast--severity--warning {
-                border-color: var(--rt-color-state-warning-bg);
-                background: var(--rt-color-state-warning-bg);
-                color: var(--rt-color-state-warning);
+                border-color: var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));
+                background: var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));
+                color: var(--rt-toast-filled-warning-color, var(--rt-color-state-warning));
             }
 
             &.rt-toast--severity--danger {
-                border-color: var(--rt-color-state-danger-bg);
-                background: var(--rt-color-state-danger-bg);
-                color: var(--rt-color-state-danger);
+                border-color: var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));
+                background: var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));
+                color: var(--rt-toast-filled-danger-color, var(--rt-color-state-danger));
             }
         }
 
@@ -152,6 +172,25 @@
 
         &__icon {
             flex-shrink: 0;
+            color: var(--rt-toast-icon-color, var(--rt-toast-severity-color));
+        }
+
+        /* Полоса срока — анимация того же срока, что у таймера, и встаёт от того же признака.
+           Она лежит у нижнего края внутри рамки и повторяет нижние скругления. */
+        &__progress {
+            position: absolute;
+            bottom: 0;
+            animation: rt-toast-progress var(--lifetime) linear forwards;
+            background: var(--rt-toast-progress-color, var(--rt-toast-severity-color));
+            block-size: var(--rt-toast-progress-height, var(--rt-space-0-5));
+            border-end-end-radius: var(--rt-toast-radius);
+            border-end-start-radius: var(--rt-toast-radius);
+            inset-inline: 0;
+            transform-origin: left center;
+        }
+
+        &--paused &__progress {
+            animation-play-state: paused;
         }
 
         &__content {
@@ -186,7 +225,17 @@
             align-self: flex-start;
         }
 
+        /* Ручка цвета действия — заливка главной кнопки во всех её состояниях; подпись на ней
+           остаётся цветом кита. */
+        & &__action:not(.rt-button--text) {
+            --rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));
+            --rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));
+            --rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active));
+        }
+
         & &__close {
+            --rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));
+
             flex-shrink: 0;
             align-self: flex-start;
             margin-inline-start: auto;
@@ -207,4 +256,14 @@
             }
         }
     }
+
+    @keyframes rt-toast-progress {
+        from {
+            transform: scaleX(1);
+        }
+
+        to {
+            transform: scaleX(0);
+        }
+    }
 }

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

@@ -3,8 +3,12 @@
         --width: 356px;
         --toaster-offset: 32px;
 
+        /* Слой — своё свойство на шаге шкалы: шаг `sticky` и есть прежние 1100, а приложение,
+           которому тост нужен поверх диалога, перебивает свойство правилом на своём теге. */
+        --rt-toaster-z-index: var(--rt-z-sticky);
+
         position: fixed;
-        z-index: 1100;
+        z-index: var(--rt-toaster-z-index);
         width: var(--width);
         box-sizing: border-box;
         padding: 0;

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -10,31 +10,46 @@
        (sm 30 / md 40 / lg 50px).
        Цвета — только семантические --rt-* токены. */
 
+    /* Свойства объявлены на хосте: правило приложения на теге переопределяет их, а ступени
+       размера — тоже правила хоста, по модификатору на нём самом.
+
+       Дорожка берёт приглушённую поверхность, а не ближайшую по светлоте ступень:
+       прежний код цвета стоял почти на уровне белого, а отличаться дорожка обязана
+       именно от активного сегмента, который белым и покрашен. Default size = sm. */
     rt-toggle-button-group {
+        --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
+        --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+        --rt-toggle-button-group-height: 30px;
+        --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
+        --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-toggle-button-group-track-padding: 4px;
+        --rt-toggle-button-group-track-radius: var(--rt-radius-md);
+        --rt-toggle-button-group-btn-padding: 0 8px;
+        --rt-toggle-button-group-btn-radius: var(--rt-radius-ms);
+        --rt-toggle-button-group-btn-gap: 4px;
+        --rt-toggle-button-group-btn-font-size: 12px;
+        --rt-toggle-button-group-btn-line-height: 14px;
+
         display: inline-flex;
 
-        /* Локальные overridable custom properties — позволяют потребителю
-           подстроить trackовый bg без перекраски всей темы (см. dark override ниже).
+        /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
+        &.rt-toggle-button-group--md {
+            --rt-toggle-button-group-height: 40px;
+            --rt-toggle-button-group-btn-padding: 0 14px;
+            --rt-toggle-button-group-btn-gap: 6px;
+            --rt-toggle-button-group-btn-font-size: 14px;
+            --rt-toggle-button-group-btn-line-height: 16px;
+        }
 
-           Дорожка берёт приглушённую поверхность, а не ближайшую по светлоте ступень:
-           прежний код цвета стоял почти на уровне белого, а отличаться дорожка обязана
-           именно от активного сегмента, который белым и покрашен. */
-        --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);
-        --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+        &.rt-toggle-button-group--lg {
+            --rt-toggle-button-group-height: 50px;
+            --rt-toggle-button-group-btn-padding: 0 20px;
+            --rt-toggle-button-group-btn-gap: 8px;
+            --rt-toggle-button-group-btn-font-size: 16px;
+            --rt-toggle-button-group-btn-line-height: 18px;
+        }
 
         .rt-toggle-button-group {
-            /* Default size = sm. md/lg переопределяют ниже. */
-            --rt-toggle-button-group-height: 30px;
-            --rt-toggle-button-group-transition-duration: var(--rt-duration-fast);
-            --rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);
-            --rt-toggle-button-group-track-padding: 4px;
-            --rt-toggle-button-group-track-radius: var(--rt-radius-md);
-            --rt-toggle-button-group-btn-padding: 0 8px;
-            --rt-toggle-button-group-btn-radius: var(--rt-radius-ms);
-            --rt-toggle-button-group-btn-gap: 4px;
-            --rt-toggle-button-group-btn-font-size: 12px;
-            --rt-toggle-button-group-btn-line-height: 14px;
-
             display: inline-flex;
             height: var(--rt-toggle-button-group-height);
             box-sizing: border-box;
@@ -97,30 +112,13 @@
                 flex-shrink: 0;
             }
 
-            /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
-            &--md {
-                --rt-toggle-button-group-height: 40px;
-                --rt-toggle-button-group-btn-padding: 0 14px;
-                --rt-toggle-button-group-btn-gap: 6px;
-                --rt-toggle-button-group-btn-font-size: 14px;
-                --rt-toggle-button-group-btn-line-height: 16px;
-            }
-
-            &--lg {
-                --rt-toggle-button-group-height: 50px;
-                --rt-toggle-button-group-btn-padding: 0 20px;
-                --rt-toggle-button-group-btn-gap: 8px;
-                --rt-toggle-button-group-btn-font-size: 16px;
-                --rt-toggle-button-group-btn-line-height: 18px;
-            }
-
             &--disabled {
                 opacity: 0.5;
             }
         }
 
         /* Шаг входа `radius` переназначает скругление дорожки; сегменты держат своё. */
-        @include kv.radius-steps('--rt-toggle-button-group-track-radius', '> .rt-toggle-button-group');
+        @include kv.radius-steps('--rt-toggle-button-group-track-radius');
     }
 
     /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */

package/src/lib/components/toggle-switch/CONTEXT.md

@@ -8,17 +8,25 @@
 | -------------------- | ---------------------- | --------- |
 | `inputId`            | `string \| null`       | `null`    |
 | `ariaLabel`          | `string \| null`       | `null`    |
+| `label`              | `string \| null`       | `null`    |
 | `size`               | `'sm' \| 'md' \| 'lg'` | `'sm'`    |
 | `iconOff` / `iconOn` | `IRtIcon.Name \| null` | `null`    |
 | `disabled`           | `boolean`              | `false`   |
 
-Значение — `boolean` через `ControlValueAccessor`. Своей подписи на экране нет.
+Значение — `boolean` через `ControlValueAccessor`. Подпись на экране рисует только вход `label`.
 
 ## Главное, что нужно знать
 
 **`role="switch"`, а не `checkbox`.** Скринридер произносит «switch off/on» вместо «checkbox
-unchecked» — для тумблера это точнее. Своего текста у контрола нет, поэтому подпись задаётся
-входом `ariaLabel` или внешним `<label for>` через `inputId`.
+unchecked» — для тумблера это точнее. Имя даёт вход `label`, вход `ariaLabel` или внешний
+`<label for>` через `inputId`.
+
+**Подпись `label` — `<label>`, связанный с кнопкой.** Нажатие на неё переключает, кнопка ссылается
+на неё через `aria-labelledby`. Без входа разметка прежняя: ни подписи, ни своего id.
+
+**Свойства размеров и подписи объявлены на хосте.** Ступени размера — правила хоста по его
+модификатору, прозрачность отключения `--rt-toggle-disabled-opacity` гасит и подпись. Правило
+приложения на теге перебивает и ступень.
 
 ## Как этим пользоваться