GrSegmented

<GrSegmented v-model="view" :options="options" aria-label="Вид списка" />

Опция — { value, label?, icon?, disabled?, loading?, ariaLabel? }. Иконка декоративна (aria-hidden), поэтому у icon-only сегмента обязателен ariaLabel: иначе у него нет имени вовсе.

Дефолтный слот заменяет содержимое сегмента и получает { option, selected, disabled, loading }.

{ value: 'review', label: 'Review', loading: syncing }

loading показывает спиннер на месте иконки и помечает сегмент aria-busy. Выбор он не принимает, а стрелки его перешагивают — как и disabled.

Разница с disabled смысловая, и она видна скринридеру: занятый сегмент не получает aria-disabled и нативный disabled — он доступен, просто сейчас работает. Недоступный получает и то, и другое.

readonly показывает выбор, но не даёт его менять — ни кликом, ни клавиатурой; группа объявляется aria-readonly. disabled гасит весь контрол.

Оба состояния гасятся токеном --gr-disabled-fg, а не прозрачностью: opacity разбавляет выверенные на AA цвета текста.

invalid — свой или пришедший из ошибки GrFormField — красит рамку дорожки и кольцо фокуса ролями ошибки (--gr-invalid-brd, --gr-invalid-ring), как у полей ввода и GrRadioGroup, и ставит aria-invalid. Свой цвет рамки — --gr-segmented-invalid-brd.

Значение уходит одним скрытым полем рядом с сегментами (name), а не вложенным в каждый role="radio": роль объявляет своих потомков презентационными, и вложенный интерактивный контрол ломает виджет для скринридеров. Недоступный выбранный сегмент значение не отправляет.

block растягивает ряд на контейнер, а itemWidth решает, как он делит ширину:

<GrSegmented v-model="filter" :options="filters" item-width="content" block />

Равные треки в шторке на 400 px дают три ячейки по 121 px: слову «Все» столько не нужно, а «С документами» не помещается и режется многоточием — при том, что суммарно места достаточно. content раскладывает его туда, где оно нужно.

Умолчание не меняется, и это осознанно. С content ширина ряда зависит от длины подписей, и перевод интерфейса переставлял бы границы сегментов у всех потребителей разом.

Технически режим — это трек minmax(0, auto). Пока места хватает, сегменты получают ширину своего содержимого, а остаток делится поверх поровну. Когда не хватает, треки сжимаются: короткие подписи остаются целиком, длинные делят остаток и уходят в многоточие с полным текстом в title. Шире контейнера ряд не становится никогда.

Минимум трека — ноль, а не min-content: подпись однострочная, и у неё min-content равен max-content — с таким минимумом трек не сжимался вовсе, и ряд выталкивал за край карточку вокруг себя.

Без block и в вертикали проп не значит ничего: там ширина и так по содержимому, а колонка одна.

Дорожка — пилюля, и это дефолт: так сегменты выглядели всегда. Второе значение — box, то же скругление, что у полей ввода: в форме рядом с GrSelect пилюля читается гостем из другой системы.

<GrSegmented v-model="view" :options="options" shape="box" />

Радиус сегмента внутри дорожки производный (calc(радиус − поле дорожки)), поэтому вторая форма получается сама и отдельной настройки не требует.

В вертикали пилюля считается формулой, а не берёт 9999px: на высокой колонке такой радиус превратил бы дорожку в эллипс, поэтому он равен высоте одного сегмента. box этой поправки не знает — 6 px эллипсом не становятся.

Ось общая с полями ввода — ../sizes.md.

Точечная кастомизация — через --gr-segmented-* (радиус, отступы, цвета дорожки и индикатора, кегль).

Подпись сегмента не переносится: ряд обязан оставаться рядом. Не поместившийся хвост прячется многоточием, и «Включено в подписку» превращается в «Включе…».

Полный текст при этом никуда не девается: truncate — правило отрисовки, в DOM строка остаётся целой, и скринридер читает её целиком. Теряет её ровно один читатель — тот, кто смотрит глазами, и ему подпись отдаётся нативной подсказкой при наведении. Подсказка появляется только когда текст действительно обрезан: тултип, дублирующий видимую целиком подпись, — шум, которого никто не просил.

Тот же обработчик доступен снаружи — titleWhenTruncated из пакета, для своей разметки с truncate.

<GrSegmented v-model="scope" :options="filters" orientation="vertical" block />

Типовой сценарий — боковые фильтры. Ряд разворачивается в колонку, корень объявляет aria-orientation.

Содержимое сегмента в колонке — у начала, а не по центру: подписи и значки разной длины по центру вставали рваной линией, и колонка читалась меню, а не списком. В горизонтальном ряду сегмент по-прежнему центрирован — там он читается кнопкой. Островок от выравнивания не зависит: он меряет сам сегмент и накрывает его целиком.

Индикатору для этого ничего не понадобилось: он измеряется в двух измерениях (translate3d плюс width/height) и едет вниз ровно так же, как вдоль ряда. Смена ориентации на лету пересчитывает геометрию — иначе индикатор остался бы в координатах прежней раскладки.

В вертикали колонка одна, поэтому сегменты одинаковой ширины по построению, а block решает только, занимать ли ширину контейнера.

Радиус дорожки в вертикали считается от высоты сегмента, а не берётся пилюлей: 9999px выверен под короткий ряд и на высокой колонке превращал бы дорожку в эллипс. Сегменты внутри при этом остаются пилюлями — они считают свой радиус от того же значения.

←/↑ и →/↓ двигают выбор с переносом через край, Home/End — к первому и последнему доступному сегменту. Недоступные и занятые пропускаются.

Обе оси работают в любой ориентации — так требует APG для radiogroup: вертикальный ряд не отключает горизонтальные стрелки и наоборот.