GrSwitch

<GrSwitch v-model="notifications" name="notifications" value="on">
  Email-уведомления
</GrSwitch>

Семантика чекбокса: включённый переключатель отправляет name=value, выключенный не отправляется вовсе — сервер отличает «выкл» по отсутствию ключа. Без name скрытого поля нет; form связывает переключатель с формой, если он лежит вне неё.

Внутри <button> интерактивный контент невалиден, поэтому скрытое поле — сосед кнопки, а корень компонента — фрагмент. class и прочие атрибуты по-прежнему садятся на кнопку.

<GrSwitch :model-value="backup" :loading="syncing" @change="save" />

loading показывает спиннер в бегунке, помечает контрол aria-busy и блокирует переключение, пока запрос в полёте. Что именно грузится, задаёт loadingText (по умолчанию — ключ gr.switch.loading): aria-busy сам по себе часть скринридеров не объявляет.

Подпись приходит слотом по умолчанию, labelPosition="start" переносит её влево от дорожки. Ряд именно разворачивается, а не переставляется в DOM: диктор читает порядок узлов, и дорожка должна оставаться первой.

Без подписи имя обязателен задать иначе — ariaLabel или GrFormField, который свяжет <label for> с кнопкой.

<GrSwitch v-model="notifications" show-state-text>
  Уведомления
</GrSwitch>

showStateText ставит «вкл/выкл» внутрь дорожки, на свободную от бегунка сторону: состояние читается само по себе, без сравнения с соседним переключателем. Тексты берутся из локали (gr.switch.on / gr.switch.off) и перекрываются пропами checkedText / uncheckedText.

Подпись рисуется только на md и lg, на xs и sm её нет, а в dev-сборке компонент объясняет почему. Дело в геометрии: рядом с бегунком остаётся 13 / 17 / 21 / 29px на ступенях xs…lg, а трёхбуквенное слово занимает около 19px даже на 9px кегля. Дорожка при этом не растягивается под текст — её ширина фиксирована таблицей размеров, и от неё же считается ход бегунка.

Отсюда же и русский дефолт «ДА» / «НЕТ»: «ВЫКЛ» занимает 31px и не помещается ни на одной ступени. Собственный текст стоит мерить так же — длинный молча обрежется.

Для диктора подписи нет вовсе (aria-hidden): дорожка лежит внутри <button role="switch">, и видимый текст вошёл бы в доступное имя — «Wi-Fi ON» вместо «Wi-Fi», хотя состояние уже объявлено через aria-checked.

Цвет подписи — роль -fg той заливки, на которой она лежит. Задали дорожке свой цвет через activeBackgroundColor — задайте и цвет текста: контраст на произвольной заливке библиотека не вычислит. Оба хука (цвет и кегль) — в ../tokens.md.

<GrSwitch v-model="autosave">
  <template #checked-icon>
    <IconCheck class="h-full w-full" />
  </template>
  <template #unchecked-icon>
    <IconX class="h-full w-full" />
  </template>
  Автосохранение
</GrSwitch>

Слоты checked-icon и unchecked-icon кладут знак на сам бегунок. Размер держит обёртка по ступени size, а содержимое тянется до неё (h-full w-full) — тот же приём, что у GrBadge и GrChip, и по той же причине: шкала знака обязана идти за переключателем, а не за разметкой места вызова.

Слоты независимы: нужен знак только во включённом состоянии — второй просто не передаётся.

Знаку доступны все ступени, включая xs и sm, где подпись состояния в дорожке не помещается: знак ужимается без потери узнаваемости, в отличие от трёхбуквенного слова. Внутри бегунка ему остаётся 8 / 10 / 12 / 16px.

loading вытесняет знак. Спиннер и знак занимают один центр, и пока идёт запрос, важнее «состояние меняется», чем «каким оно стало».

Знак декоративен: бегунок целиком aria-hidden, а состояние диктор берёт из aria-checked. Смысла, которого нет больше нигде, сюда класть нельзя.

Цвет знака и спиннера — общий, из --gr-switch-thumb-fg. По состоянию он не ветвится и в disabled не тускнеет: гасится дорожка, а бегунок остаётся --gr-card в любом состоянии, и содержимое, меняющее цвет, разошлось бы со своей же подложкой.

<GrSwitch v-model="access" show-state-text auto-width checked-text="Включено" unchecked-text="Отключено">
  Доступ по ссылке
</GrSwitch>

autoWidth снимает ограничение по длине: ступень размера становится нижней границей ширины, а дальше дорожка растёт под подпись. Высота при этом не меняется — тянется только строка.

Дефолт остаётся фиксированным намеренно. Ряд переключателей с разными подписями становится рваным, а тот, кто сверстал колонку под ширину ступени, получит перекос — это выбор потребителя, а не поведение по умолчанию.

Ширина не дёргается при переключении, хотя «вкл» и «выкл» почти никогда не равны по ширине: в ту же клетку кладётся невидимый дубль противоположного текста, и ширину задаёт максимум из двух.

Бегунок в обоих режимах ходит без единого числа, зависящего от ширины: пара left: calc(100% − зазор) и translateX(-100%) считает проценты от разных элементов — первый от дорожки, второй от самого бегунка. Поэтому растягивание не требует ни измерений, ни ResizeObserver, а ход остаётся линейным: обе величины анимируются вместе.

Недоступность гасится фоном, а не opacity: прозрачность разбавляет выверенные на AA токены текста и роняет контраст подписи.

update:modelValue и change эмитятся вместе. Экземпляр отдаёт focus() и blur().

Клавиатура нативная: контрол — настоящая <button>, поэтому Space и Enter переключают его силами браузера, а Tab обходит в общем порядке.

size — xs…lg, читается из GrConfigProvider (componentDefaults.GrSwitch.size). Цвет дорожки точечно задаётся пропами activeBackgroundColor / inactiveBackgroundColor.