починить раскладку и тёмную тему checkbox

[khaliulin]

Приёмка checkbox нашла четыре дефекта: ошибку в консоли на всех story, подложки в примерах, мусорный токен в базе и две проблемы рендера — подпись стояла под боксом, а иконка при наведении исчезала в тёмной теме.

Что изменено

1. Раскладка компонента. У обёртки .extra-checkbox (checkbox.component.ts:40) не было ни одного CSS-правила — ни в ките, ни глобально, поэтому display: block ставил бокс и подпись друг под другом, а .extra-checkbox--left вообще ничего не делал:

.extra-checkbox { display: flex; align-items: center; gap: ${dt('dimension.space.200')}; }
.extra-checkbox--left { flex-direction: row-reverse; justify-content: flex-end; }

2. Иконка при наведении в тёмной теме. PrimeNG держит для hover отдельное правило с icon.checkedHoverColor → color.fg.on.fill.hover, а эта ветка не инвертируется (#ffffff в обеих темах). Правило специфичнее нашего (:has() добавляет вес), поэтому при наведении белая иконка пропадала на светлом боксе тёмной темы. Добавлено парное правило с инверсным алиасом — ровно так же, как уже было сделано для не-hover-состояния.

3. Ошибка в консоли на всех story. Story отдавала props: { ...args, control }, среди args есть invalid, а в компоненте это геттер без сеттера (checkbox.component.ts:92) — Storybook падал с TypeError: Cannot set property invalid of [object Object] which has only a getter. Теперь invalid и disabled исключаются из props: они и так работают через FormControl.

4. Подложки сняты в трёх примерах (indeterminate, labels, states), включая блоки docs.source. Помимо гейта у них был практический вред: в тёмной теме bg-surface-ground остаётся светлой, и checked-бокс (в dark он светлый) на ней сливался — компонент буквально не был виден.

5. Мусорный токен удалён. В checkbox.root.focusRing лежал ключ focusRing, вложенный сам в себя и дублирующий width (оба {dimension.focusRing.width}). Такого нет больше ни у одного компонента; переменная --p-checkbox-focus-ring-focus-ring генерировалась и не использовалась ни одним правилом. Теперь состав как у соседей: style, color, offset, shadow, width.

Проверено в браузере

• Labels: подпись справа/слева выровнена по центру бокса, вариант с caption центрируется по блоку «лейбл + пояснение».
• Наведение на checked в dark: бокс rgb(226,226,228), иконка rgb(43,46,51) — видна.
• Indeterminate в dark: светлый бокс с тёмной чёрточкой на тёмном фоне страницы.
• Консоль на Default и Default + invalid: ошибок нет.

Гейты: check-component.mjs checkbox → ✓ все гейты пройдены (было 1 WARN), check-stories-bg.mjs checkbox → ✓ подложек нет (было 3 FAIL), check-dt-refs без мёртвых ссылок checkbox, prettier и tsc --noEmit чисто.

Вопросы к дизайну

1. Зазор между боксом и подписью взят как dimension.space.200 (8px) — своего токена gap у checkbox в базе нет. Нужна сверка с макетом.
2. Размерная шкала не монотонна: root.width (base) = 24px, root.lg.width = 20px, root.sm.width = 8px — base больше lg, а sm меньше собственной иконки (icon.sm.size = 12px). Похоже на ошибку экспорта; в этом PR размеры намеренно не трогались.
3. Первопричина дубля focusRing — лишняя переменная в Figma. Пока её не уберут, следующий реэкспорт вернёт дубль обратно.
4. G9–G11 не выполнены: Figma MCP в сессии не подключался (plugin:figma — ENOTFOUND), сверка значений, типографики и покрытия состояний с редлайном не проводилась.