GrColorPicker

modelValue — #RRGGBB, а при alpha — #RRGGBBAA. Это та форма, в которой цвет лежит в токенах темы, приезжает с бэкенда и понимается CSS: потребителю не приходится конвертировать ни на входе, ни на выходе.

Невалидное значение не роняет компонент и ничего не эмитит: панель показывает #000000, модель остаётся как есть. Молча переписывать чужие данные компонент не вправе.

Внутри цвет живёт в HSLA и отдельно от модели, потому что hex — проекция с потерями: у чёрного, белого и любого серого нет оттенка. Держи компонент состояние только в hex — бегунок оттенка прыгал бы на 0° каждый раз, когда пользователь уводит насыщенность в ноль.

Каналы при этом хранятся дробными. Целая сетка HSL мельче сетки hex, и посадка на неё меняет цвет: из двенадцати типовых брендовых значений одиннадцать возвращались бы другими — #10b981 как #10b77f. Целые нужны шкалам, и их получают шкалы: бегунок читает округление своего канала, а хранимое значение остаётся точным. Поэтому выбранный пресет, вставленный hex и взятый пипеткой цвет возвращаются ровно теми же.

view решает, чем задаются насыщенность и светлота. Оттенок и прозрачность — бегунки в обоих видах.

Дефолт остался прежним намеренно: вид меняет облик уже стоящих в приложениях панелей, и решение это приложения, а не пакета. Переключается он и глобально — <GrConfigProvider :component-defaults="{ GrColorPicker: { view: 'area' } }">.

Обычная беда 2D-области — что она мышиная: у неё нет ни значений, которые прочитает диктор, ни клавиш. Здесь внутри квадрата два настоящих input[type=range], по одному на ось: они визуально скрыты, но остаются в таб-порядке и со своими именами и значениями, а фокус показывает сама область через focus-within. Диктор видит два слайдера — «Saturation 90 %» и «Lightness 66 %», — а не безымянную картинку.

Отсюда и две остановки Tab на квадрат: осей две, как бегунков у диапазона GrSlider. Клавиши — ../keyboard.md.

Квадрат собран тремя слоями: шкала насыщенности при светлоте 50 % и пара вуалей, белой сверху и чёрной снизу. Это не приём «на глаз»: осветление и затемнение в HSL — линейная интерполяция к белому и к чёрному, ровно то, что делает наложение с альфой. Цвет под ручкой совпадает с hex до последнего разряда, и это проверяется пикселем в живом браузере.

Оси — насыщенность и светлота, а не привычные по HSV насыщенность и яркость. Перевод в HSV дал бы более нарядную заливку, но принёс бы вторую проекцию с потерями: при нулевой яркости насыщенность HSV не определена, и чёрный терял бы её так же, как серый теряет оттенок.

eyedropper добавляет кнопку рядом с hex-полем. Она рисуется только там, где браузер даёт EyeDropper — сегодня это Chromium; в остальных её нет вовсе, а не есть и не работает. Отказ пользователя (Esc во время выбора) ничего не меняет и ни о чём не сообщает: это не ошибка.

С экрана приходит уже смешанный цвет, своей прозрачности у него нет — текущая остаётся как была.

Tab из панели уводит фокус дальше по странице, а не запирает в ней: за страницей ничего не блокируется, и запирать пользователя не за что. Esc закрывает панель и возвращает фокус на триггер — это делает общий стек слоёв через GrPopover.

Открытием можно управлять снаружи: v-model:open, положение — placement.

presets — массив hex-строк. Невалидные отсеиваются, у выбранного пресета aria-pressed. Пусто — блока пресетов нет вовсе.

Токены темы в presets не подставляются: --gr-primary живёт CSS-переменной и на сборке в hex не разрешается. Палитру собирает приложение — из своего конфига или из getComputedStyle.

Контракт форм-контрола целиком: disabled, readonly, invalid, required, ariaLabel, эмиты update:modelValue/change/focus/blur, экспортируемые focus()/blur(). Имя берётся от GrFormField (<label for> указывает на триггер) либо из ariaLabel.

name отдаёт текущее значение в нативную форму скрытым полем — внутри виджета интерактивных элементов быть не должно.

clearable нет намеренно: у цвета не бывает пустого состояния. Нужна «не задано» — это undefined в модели на уровне приложения, а не состояние контрола.

• истории недавних цветов нет — это состояние приложения;
• градиентов нет — компонент про один цвет.