GrButton

disabled ставит нативный атрибут (у <button>) и гасит кнопку токенами --gr-button-disabled-bg / -fg / -brd. Прозрачности здесь нет намеренно: opacity разбавляет выверенные на AA цвета, а кнопка чаще других компонентов стоит на цветной подложке, где разбавленный текст проваливается первым.

Сами эти токены — ссылки на общие роли --gr-disabled-bg/-fg/-brd, те же, что у вкладки, сегмента и бегунка: недоступное состояние во всём пакете выглядит одинаково и перекрашивается одним местом. Покомпонентная тройка остаётся точкой кастомизации на случай, когда кнопка обязана отличаться.

Приглушение работает и для кнопки-ссылки (href/as): нативный disabled ей не достаётся, поэтому цвета задаются классами, а не disabled:-вариантом.

Кнопку, которая должна остаться в таб-порядке, но объявлена недоступной, помечают атрибутом aria-disabled="true". Она получает тот же приглушённый вид, нативный disabled не ставится, а клик компонент не перехватывает — его гасит потребитель. Так GrTransfer держит перенос, которому некуда ехать: уронить фокус с нажатой кнопки в тело документа было бы хуже.

loading не ставит нативный disabled — элемент остался бы без фокуса, и скринридер потерял бы контекст. Вместо этого aria-busy, aria-disabled и перехват клика в capture-фазе. Выглядит кнопка при этом обычной: о состоянии говорит спиннер. Курсор — progress, а не not-allowed: кнопка занята, а не запрещена. Вдавливания на нажатие нет ни у ждущей, ни у отключённой — они нажатие не принимают и не изображают.

С префиксом спиннер встаёт на его место. Без префикса ему некуда встать, и он ложится поверх содержимого, а содержимое гаснет: соседние кнопки в ряду не едут, как ехали бы от дописанного слева спиннера.

Гаснет оно прозрачностью, а не visibility — иначе подпись выпала бы из доступного имени. Голый текстовый узел селектором не достать, поэтому текст гасится -webkit-text-fill-color: color остаётся прежним, и спиннер рисуется цветом подписи.

<GrButton :loading="saving" loading-text="Сохраняем отчёт">
Сохранить
</GrButton>

aria-busy сам по себе объявляет не всякая AT, поэтому во время загрузки к имени кнопки добавляется скрытый суффикс — loadingText или ключ gr.button.loading.

loadingIndicator="shimmer" — другой сигнал той же загрузки: спиннера нет, свет проходит по глифам подписи, а подпись, иконки аддонов и ширина остаются на месте. aria-busy, скрытый суффикс и перехват клика — те же, что у спиннера.

<GrButton tone="neutral" loading-indicator="shimmer" :loading="saving">
  Сохранить черновик
</GrButton>

• Градиент — на подписи, а не на кнопке. background-clip: text на корне срезал бы его заливку, поэтому свет кладётся на обёртку текста; color не трогается, и иконки, нарисованные им, не мерцают.
• Только у текстовой подписи. У кнопки из одной иконки мерцать нечему — там остаётся спиннер, иначе загрузку не было бы видно.
• prefers-reduced-motion. Мерцания нет, подпись приглушена — другого сигнала, кроме неё, у этого вида загрузки нет.

Вид загрузки — оформление, поэтому его задаёт и тема (componentDefaults в theme.json: так он включён у «Глины»), и GrConfigProvider. Длительность прохода — токен темы --gr-button-shimmer-duration.

loadingIndicator="track" — загрузка отрезком, бегущим по нижней кромке поверх рамки: подпись, иконки и ширина на месте, подпись чуть приглушена. Кромка есть у любой кнопки, поэтому квадратная тоже бежит отрезком, а не спиннером. aria-busy, скрытый суффикс и перехват клика — те же.

С prefers-reduced-motion отрезок не выключается, а замедляется: другого сигнала у загрузки нет. Период — токен темы --gr-button-track-duration; вид включает тема («Чертёж»).

prefixCell ставит префикс в квадратную ячейку высотой с кнопку, за перегородкой в 24 % цвета подписи, и снимает боковой отступ с её стороны. Ячейка — только у кнопки с подписью: у квадратной кнопки ячейка и есть кнопка. Спиннер загрузки занимает ячейку, а не встаёт рядом. Включает её тема через componentDefaults («Чертёж»).

<GrButton>
  <template #prefix><GrIcon><IconPlus /></GrIcon></template>
  Добавить
  <template #suffix><GrKbd keys="mod+N" /></template>
</GrButton>

Во время loading спиннер занимает место префикса, а #prefix не рендерится: две иконки рядом читаются как ошибка вёрстки. У мерцания и отрезка префикс остаётся на месте — спиннера там нет.

Со стороны непустого аддона боковой отступ на 2px меньше — глиф стоит оптически по центру, а не прижатым к краю. Пустой слот (v-if внутри шаблона) отступ не трогает.

Иконка в слоте берёт ступень от кнопки: xs → 14px, sm и md → 16px, lg → 20px. Кнопка подсказывает её GrIcon контекстом; явный size у иконки сильнее подсказки, подсказка сильнее GrConfigProvider. Зазор между частями растёт так же: 4 / 6 / 8 / 8px.

Подпись из одного текста кнопка оборачивает и режет многоточием, а полный текст показывает нативной подсказкой — только когда строка правда обрезана. Доступное имя остаётся целым. Иконку или разметку в основном слоте кнопка не оборачивает: обёртка сдвинула бы их выравнивание, и квадратная кнопка перестала бы быть квадратом.

Фокус рисуется outline в 2px цветом --gr-ring, только на :focus-visible; отступ — токен темы --gr-button-focus-offset (у «Сланца» 2px). Контур может въезжать издалека: --gr-button-focus-offset-from — отступ в момент появления («Тактильная» — 6px). Кольцо вплотную к заливке того же тона читалось утолщением кнопки — индиго на индиго даёт 1.4:1, — а box-shadow в forced-colors выключается целиком. outline там остаётся и перекрашивается в системный цвет.

У «Сланца» рамка secondary в покое — 38 % тона, outline — 70 %; полный тон рамка получает под указателем. Насыщенная рамка у второстепенного веса тянула взгляд мимо primary. Нейтральная secondary — «обычная» кнопка формы: поверхность карточки (--gr-button-neutral-soft-bg), рамка --gr-button-neutral-border и тень --gr-button-surface-shadow.

У solid-кнопки есть объём: тень темы (--gr-button-shadow), под ней — тень цвета тона (--gr-button-glow с цветом --gr-button-<тон>-glow) и слой поверх заливки (--gr-button-solid-image); в нажатии тень уходит внутрь (--gr-button-shadow-active). У «Сланца» это блик по верхней кромке и мелкая тень, тени тона и слоя нет. Отключённая кнопка объём теряет вместе с вариантом. Рамка в 1px есть у всех весов — у ghost прозрачная, — поэтому ghost в ряду той же ширины, что соседи.

Подпись — токен темы --gr-button-font-weight: у «Сланца» medium, у «Чертежа» 600.

Наведение и нажатие soft-заливки подмешивают тон в саму заливку, а не в фон. Поэтому они темнеют в светлом режиме и светлеют в тёмной — вслед за покоем.

Форма, отклик и объём — токены вида theme: тема задаёт их значения, кнопка их только читает. Отсюда четыре разных кнопки на одном API — «Сланец», «Тактильная», «Чертёж» и «Глина»; разбор — ../design/GrButton.md.

• Скругление — по ступени: --gr-button-radius-{xs,sm,md,lg}. Один радиус на все ступени — ручка приложения --gr-button-radius (999px — капсула); тема её не задаёт.
• Отклик под указателем — слой ::before под содержимым: ::after занят зоной касания. Его положение, размер, цвет и рост задают --gr-button-response-*; цвет считается от currentColor, поэтому один токен годится всем тонам. У «Тактильной» это подложка прозрачных весов, у «Чертежа» — линия хода по нижней кромке, у «Сланца» слой прозрачен.
• Подъём и темп — --gr-button-lift, --gr-button-motion-duration и -ease; с prefers-reduced-motion движения нет, остаётся смена цвета.
• Недоступная кнопка берёт стиль рамки и слой поверх заливки у темы (--gr-button-disabled-border-style, -image): пунктир и штриховка читаются без цвета.

Кнопка с aria-pressed="true" — включённый переключатель — держит вид нажатого состояния своего веса (атрибут data-gr-pressed): иначе «включено» и «выключено» различались бы только для диктора. В лотке GrButtonGroup выбранное звено — лист поверх лотка, атрибута нет. aria-current вид не меняет: у ссылки это навигация, и её вид решает раскладка, а не кнопка.

На грубом указателе (pointer: coarse) кнопка ниже --gr-button-touch-size (44px) добирает высоту невидимым ::after. Вид и плотность ряда прежние: xs в строке таблицы остаётся 28px, а промахов пальцем нет.

square даёт кнопку с равными сторонами — размер приходит из --gr-button-square-size с дефолтом по размеру (1.75rem / 2rem / 2.5rem / 2.75rem). Переменную можно задать в своём CSS и подогнать кнопку под свою сетку:

.toolbar { --gr-button-square-size: 2.25rem; }

Переменная одна на все четыре ступени. Заданная выше по дереву — на :root, в теме — она схлопывает xs, sm, md и lg в одно число, и ступень перестаёт что-либо значить. Поэтому её место — узкий скоуп вроде примера выше, а не корень документа. Нужен размер по устройству ввода — задавайте его GrConfigProvider, а не переменной: приложение знает про свой указатель, пакет про него не знает.

block растягивает кнопку на ширину контейнера.

as → <a href> → <button>. Ссылке автоматически достаётся rel="noopener noreferrer", если она открывается в новой вкладке (external или явный target="_blank"), а disabled убирает её из таб-порядка.

Уход в новую вкладку объявляется заранее, как у GrLink (WCAG 3.2.5): справа появляется значок, а к имени — скрытое «(откроется в новой вкладке)», ключ gr.button.opensInNewTab. При заданном ariaLabel подсказка дописывается в само имя, иначе aria-label перекрыл бы её. У квадратной кнопки значка нет — места под него нет, — но подсказка остаётся.