@feugene/granularity 0.49.0 → 0.50.0

package/dist/components/GrColorPicker/chunks/{GrColorPicker-BRM_4lyI.js → GrColorPicker-vGSgpUV9.js}

@@ -1,15 +1,36 @@
-import { a as useGrComponentSize } from "../../../chunks/context-CPMRfwVr.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
 import { useGrFormControl } from "../../../composables/useGrFormControl.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-DV4gMWPR.js";
-import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-CcWvr1ZA.js";
-import { t as GrSlider_default } from "../../GrSlider/chunks/GrSlider-CO8N9SF6.js";
-import { a as grColorPickerPresetClass, c as previewClass, d as rowValueClass, f as swatchBaseClass, h as triggerValueClass, i as grColorPickerPanelClass, l as rowClass, m as triggerSwatchSizeBySize, o as grColorPickerTriggerClass, p as swatchFillClass, r as checkerClass, s as presetsGridClass, u as rowLabelClass } from "../../../chunks/config-DIDz_E5m.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx, withKeys } from "vue";
-import '../styles.css';//#region src/components/GrColorPicker/color.ts
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-CoaFLpaU.js";
+import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-DjVxt8bf.js";
+import { t as GrSlider_default } from "../../GrSlider/chunks/GrSlider-DF2Cq0rV.js";
+import { S as triggerValueClass, _ as rowLabelClass, a as checkerClass, b as swatchFillClass, c as grColorPickerEyedropperClass, d as grColorPickerTriggerClass, f as hexFieldClass, g as rowClass, h as previewClass, i as areaThumbClass, l as grColorPickerPanelClass, m as presetsGridClass, o as eyedropperIconClass, p as hexRowClass, r as areaInputClass, s as grColorPickerAreaClass, u as grColorPickerPresetClass, v as rowValueClass, x as triggerSwatchSizeBySize, y as swatchBaseClass } from "../../../chunks/config-B34mkd53.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx, withKeys } from "vue";
+import '../styles.css';//#region ~icons/lucide/pipette
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "m12 9l-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12" }), createElementVNode("path", { d: "m18 9l.4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4l3.4-3.4a1 1 0 1 1 3 3zM2 22l.414-.414" })], -1)])]);
+}
+var pipette_default = markRaw({
+	name: "lucide-pipette",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrColorPicker/color.ts
 var HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i;
-function clamp(value, min, max) {
+function clamp$1(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 /**
@@ -55,8 +76,8 @@ function rgbToHsl({ r, g, b }) {
 	};
 }
 function hslToRgb({ h, s, l }) {
-	const saturation = clamp(s, 0, 100) / 100;
-	const lightness = clamp(l, 0, 100) / 100;
+	const saturation = clamp$1(s, 0, 100) / 100;
+	const lightness = clamp$1(l, 0, 100) / 100;
 	const hue = normalizeHue(h);
 	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
 	const second = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
@@ -100,7 +121,7 @@ function hslToRgb({ h, s, l }) {
 	};
 }
 function toHexPair(value) {
-	return clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+	return clamp$1(Math.round(value), 0, 255).toString(16).padStart(2, "0");
 }
 /**
 * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),
@@ -135,7 +156,7 @@ function formatHexColor(color, withAlpha = false) {
 	const { r, g, b } = hslToRgb(color);
 	const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
 	if (!withAlpha) return base;
-	return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`;
+	return `${base}${toHexPair(clamp$1(color.a, 0, 1) * 255)}`;
 }
 /** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */
 function trim(value) {
@@ -143,17 +164,126 @@ function trim(value) {
 }
 /** CSS-запись цвета для превью и градиентов. */
 function hslaToCss(color) {
-	return `hsl(${trim(normalizeHue(color.h))} ${trim(clamp(color.s, 0, 100))}% ${trim(clamp(color.l, 0, 100))}% / ${trim(clamp(color.a, 0, 1))})`;
+	return `hsl(${trim(normalizeHue(color.h))} ${trim(clamp$1(color.s, 0, 100))}% ${trim(clamp$1(color.l, 0, 100))}% / ${trim(clamp$1(color.a, 0, 1))})`;
 }
-/** Приводит произвольный объект к валидному диапазону каналов. */
+/**
+* Приводит произвольный объект к валидному диапазону каналов.
+*
+* Округления нет ни у одного канала, и это то же правило, что у `normalizeHue`,
+* распространённое на насыщенность и светлоту: целочисленная сетка HSL мельче
+* сетки hex, и посадка на неё меняет цвет. Замер на типовых брендовых
+* значениях — 11 расхождений из 12: `#10b981` возвращался как `#10b77f`.
+* Пользователь при этом ничего не двигал, а компонент уже переписал его цвет —
+* достаточно было выбрать пресет или вставить hex в поле.
+*
+* Целые нужны шкалам, и они их и получают: бегунок читает `Math.round` своего
+* канала, а хранимое значение остаётся точным.
+*/
 function normalizeHsla(color) {
 	return {
-		h: Math.round(normalizeHue(color.h)) % 360,
-		s: clamp(Math.round(color.s), 0, 100),
-		l: clamp(Math.round(color.l), 0, 100),
-		a: clamp(color.a, 0, 1)
+		h: normalizeHue(color.h),
+		s: clamp$1(color.s, 0, 100),
+		l: clamp$1(color.l, 0, 100),
+		a: clamp$1(color.a, 0, 1)
+	};
+}
+//#endregion
+//#region src/components/GrColorPicker/colorArea.ts
+/** Шаг стрелки и крупный шаг `PageUp`/`PageDown` — те же, что у `GrSlider`. */
+var STEP = 1;
+var PAGE_STEP = 10;
+function clamp(value) {
+	return Math.min(100, Math.max(0, value));
+}
+/**
+* Положение ручки в процентах от левого верхнего угла.
+*
+* Светлота инвертирована: вверху области белое, внизу чёрное — так стоит
+* вертикальная шкала во всех привычных пикерах, и переворачивать её значило бы
+* ломать ожидание ради буквальности.
+*/
+function colorAreaThumbPosition(point) {
+	return {
+		x: clamp(point.s),
+		y: 100 - clamp(point.l)
 	};
 }
+/**
+* Значение под указателем.
+*
+* Прямоугольник приходит снаружи: измерять его умеет только вызывающий, а
+* промах мимо области — норма, указатель уходит за её границы при каждом
+* протягивании.
+*/
+function colorAreaPointAt(pointer, rect) {
+	const s = rect.width > 0 ? (pointer.clientX - rect.left) / rect.width * 100 : 0;
+	const y = rect.height > 0 ? (pointer.clientY - rect.top) / rect.height * 100 : 0;
+	return {
+		s: clamp(s),
+		l: clamp(100 - y)
+	};
+}
+/**
+* Клавиша → новое значение и ось, которая изменилась.
+*
+* Ось возвращается не для отчёта: у области два настоящих `input[type=range]`,
+* по одному на канал, и стрелка поперёк оси сфокусированного поля обязана
+* увести фокус на соседнее — иначе диктор промолчит о том, что изменилось.
+*
+* `Home`/`End` и крупный шаг работают по оси **сфокусированного** поля: они
+* относятся к диапазону, а диапазонов здесь два.
+*/
+function colorAreaKeyStep(key, point, focused) {
+	const move = (axis, next) => ({
+		point: axis === "saturation" ? {
+			s: clamp(next),
+			l: point.l
+		} : {
+			s: point.s,
+			l: clamp(next)
+		},
+		axis
+	});
+	const current = focused === "saturation" ? point.s : point.l;
+	switch (key) {
+		case "ArrowLeft": return move("saturation", point.s - STEP);
+		case "ArrowRight": return move("saturation", point.s + STEP);
+		case "ArrowDown": return move("lightness", point.l - STEP);
+		case "ArrowUp": return move("lightness", point.l + STEP);
+		case "PageDown": return move(focused, current - PAGE_STEP);
+		case "PageUp": return move(focused, current + PAGE_STEP);
+		case "Home": return move(focused, 0);
+		case "End": return move(focused, 100);
+		default: return null;
+	}
+}
+//#endregion
+//#region src/components/GrColorPicker/eyeDropper.ts
+function eyeDropperApi() {
+	if (typeof window === "undefined" || !("EyeDropper" in window)) return null;
+	return window.EyeDropper;
+}
+/** Поддерживается ли пипетка. Зовётся после монтирования: на сервере `window` нет. */
+function isEyeDropperSupported() {
+	return eyeDropperApi() !== null;
+}
+/**
+* Открыть пипетку и дождаться цвета. `null` — пользователь отказался или API
+* недоступно.
+*
+* Вызов обязан идти прямо из обработчика нажатия: без свежего жеста браузер
+* отклоняет `open()` как `NotAllowedError`.
+*/
+async function pickScreenColor(signal) {
+	const Api = eyeDropperApi();
+	if (!Api) return null;
+	try {
+		const { sRGBHex } = await new Api().open(signal ? { signal } : void 0);
+		return sRGBHex;
+	} catch {
+		return null;
+	}
+}
 //#endregion
 //#region src/components/GrColorPicker/GrColorPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { "data-gr-color-picker": "" };
@@ -167,6 +297,20 @@ var _hoisted_4 = [
 ];
 var _hoisted_5 = ["aria-label"];
 var _hoisted_6 = [
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-valuetext"
+];
+var _hoisted_7 = [
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-valuetext"
+];
+var _hoisted_8 = ["disabled", "aria-label"];
+var _hoisted_9 = ["aria-label"];
+var _hoisted_10 = [
 	"aria-label",
 	"aria-pressed",
 	"disabled",
@@ -182,6 +326,11 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		view: { default: void 0 },
+		eyedropper: {
+			type: Boolean,
+			default: void 0
+		},
 		presets: { default: () => [] },
 		size: { default: void 0 },
 		open: {
@@ -223,15 +372,16 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 		* Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:
 		* в такой форме цвет лежит в токенах и его понимает CSS.
 		*
-		* A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role="slider"`
-		* с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value
-		* не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и
-		* доступность там пришлось бы собирать с нуля.
+		* A11y: у каждого канала настоящий `role="slider"` с полной клавиатурой и
+		* `aria-valuetext`. У двумерной области он тоже настоящий, и даже дважды —
+		* по одному `input[type=range]` на ось (см. `colorArea.ts`).
 		*/
 		const props = __props;
 		const emit = __emit;
 		const { t } = useGranularityTranslations();
 		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrColorPicker" });
+		const resolvedView = useGrComponentProp("GrColorPicker", "view", () => props.view, "sliders");
+		const wantsEyedropper = useGrComponentProp("GrColorPicker", "eyedropper", () => props.eyedropper, false);
 		const field = useGrFormFieldContext();
 		const fieldId = computed(() => field?.id.value);
 		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly, locked: isLocked } = useGrFormControl(() => props);
@@ -360,12 +510,118 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 				a: 1
 			});
 			return {
+				"--gr-color-picker-area-saturation": `linear-gradient(to right, hsl(${Math.round(h)} 0% 50%), hsl(${Math.round(h)} 100% 50%))`,
 				"--gr-color-picker-track-hue": "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))",
 				"--gr-color-picker-track-saturation": `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,
 				"--gr-color-picker-track-lightness": `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,
 				"--gr-color-picker-track-alpha": `linear-gradient(to right, transparent, ${solid})`
 			};
 		});
+		const areaEl = ref(null);
+		const saturationInputEl = ref(null);
+		const lightnessInputEl = ref(null);
+		/** Точка области целыми процентами: поля осей — обычные `input[type=range]`. */
+		const areaPoint = computed(() => ({
+			s: Math.round(state.value.s),
+			l: Math.round(state.value.l)
+		}));
+		const areaThumbStyle = computed(() => {
+			const { x, y } = colorAreaThumbPosition(areaPoint.value);
+			return {
+				left: `${x}%`,
+				top: `${y}%`,
+				background: hslaToCss({
+					...state.value,
+					a: 1
+				})
+			};
+		});
+		function applyAreaPoint(point) {
+			commit({
+				...state.value,
+				s: point.s,
+				l: point.l
+			});
+		}
+		function areaPointerMove(event) {
+			const rect = areaEl.value?.getBoundingClientRect();
+			if (!rect) return;
+			applyAreaPoint(colorAreaPointAt(event, rect));
+		}
+		/** Цвет до начала жеста: оборванный жест обязан вернуть его на место. */
+		let colorBeforeDrag = null;
+		const areaDrag = useDragGesture({
+			disabled: () => isLocked.value,
+			onStart: (event) => {
+				colorBeforeDrag = state.value;
+				areaPointerMove(event);
+				saturationInputEl.value?.focus();
+			},
+			onMove: areaPointerMove,
+			onCancel: () => {
+				if (colorBeforeDrag) commit(colorBeforeDrag);
+				colorBeforeDrag = null;
+			},
+			onEnd: () => {
+				colorBeforeDrag = null;
+			}
+		});
+		/**
+		* Клавиатура области.
+		*
+		* Стрелка поперёк оси сфокусированного поля уводит фокус на соседнее: значение
+		* поменялось у него, и без переезда диктор промолчал бы о том, что изменилось.
+		*/
+		function onAreaKeydown(event, axis) {
+			if (isLocked.value) return;
+			const next = colorAreaKeyStep(event.key, areaPoint.value, axis);
+			if (!next) return;
+			event.preventDefault();
+			applyAreaPoint(next.point);
+			if (next.axis !== axis) (next.axis === "saturation" ? saturationInputEl : lightnessInputEl).value?.focus();
+		}
+		/** Изменение поля мимо клавиатуры — например, жестом вспомогательной технологии. */
+		function onAreaInput(event, axis) {
+			const value = Number(event.target.value);
+			if (!Number.isFinite(value)) return;
+			applyAreaPoint(axis === "saturation" ? {
+				...areaPoint.value,
+				s: value
+			} : {
+				...areaPoint.value,
+				l: value
+			});
+		}
+		const areaClass = computed(() => grColorPickerAreaClass({
+			size: resolvedSize.value,
+			locked: isLocked.value
+		}));
+		/**
+		* Поддержка пипетки уточняется после монтирования: `window` в теле `setup`
+		* либо роняет серверный рендер, либо расходится с ним. До этого кнопки нет —
+		* ровно то же, что отдаёт сервер, поэтому гидрация совпадает.
+		*/
+		const eyedropperSupported = ref(false);
+		onMounted(() => {
+			eyedropperSupported.value = isEyeDropperSupported();
+		});
+		const showEyedropper = computed(() => wantsEyedropper.value && eyedropperSupported.value);
+		const eyedropperClassName = computed(() => grColorPickerEyedropperClass(resolvedSize.value));
+		/**
+		* Пипетка зовётся прямо из обработчика нажатия: без свежего жеста браузер
+		* отклоняет `open()`. Отказ пользователя — не ошибка и ничего не меняет.
+		*/
+		async function pickFromScreen() {
+			if (isLocked.value) return;
+			const picked = await pickScreenColor();
+			if (!picked) return;
+			const parsed = parseHexColor(picked);
+			if (!parsed) return;
+			commit({
+				...parsed,
+				a: state.value.a
+			});
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				__props.name ? (openBlock(), createElementBlock("input", {
@@ -381,7 +637,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 				}, toDisplayString(stateHint.value), 9, _hoisted_3)) : createCommentVNode("", true),
 				createVNode(GrPopover_default, {
 					open: panelOpen.value,
-					"onUpdate:open": _cache[7] || (_cache[7] = ($event) => panelOpen.value = $event),
+					"onUpdate:open": _cache[12] || (_cache[12] = ($event) => panelOpen.value = $event),
 					block: "",
 					size: unref(resolvedSize),
 					placement: __props.placement,
@@ -427,6 +683,53 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(swatchFillClass)),
 							style: normalizeStyle({ background: cssColor.value })
 						}, null, 6)], 2),
+						unref(resolvedView) === "area" ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref_key: "areaEl",
+							ref: areaEl,
+							"data-gr-color-picker-area": "",
+							role: "group",
+							class: normalizeClass(areaClass.value),
+							"aria-label": unref(t)("gr.colorPicker.area", "Saturation and lightness"),
+							onPointerdown: _cache[6] || (_cache[6] = (...args) => unref(areaDrag).start && unref(areaDrag).start(...args))
+						}, [
+							createElementVNode("input", {
+								ref_key: "saturationInputEl",
+								ref: saturationInputEl,
+								"data-gr-color-picker-area-axis": "saturation",
+								type: "range",
+								min: "0",
+								max: "100",
+								value: areaPoint.value.s,
+								class: normalizeClass(unref(areaInputClass)),
+								disabled: unref(isDisabled),
+								"aria-label": unref(t)("gr.colorPicker.saturation", "Saturation"),
+								"aria-valuetext": percent(areaPoint.value.s),
+								onKeydown: _cache[2] || (_cache[2] = ($event) => onAreaKeydown($event, "saturation")),
+								onInput: _cache[3] || (_cache[3] = ($event) => onAreaInput($event, "saturation"))
+							}, null, 42, _hoisted_6),
+							createElementVNode("input", {
+								ref_key: "lightnessInputEl",
+								ref: lightnessInputEl,
+								"data-gr-color-picker-area-axis": "lightness",
+								type: "range",
+								min: "0",
+								max: "100",
+								value: areaPoint.value.l,
+								class: normalizeClass(unref(areaInputClass)),
+								disabled: unref(isDisabled),
+								"aria-label": unref(t)("gr.colorPicker.lightness", "Lightness"),
+								"aria-valuetext": percent(areaPoint.value.l),
+								onKeydown: _cache[4] || (_cache[4] = ($event) => onAreaKeydown($event, "lightness")),
+								onInput: _cache[5] || (_cache[5] = ($event) => onAreaInput($event, "lightness"))
+							}, null, 42, _hoisted_7),
+							createElementVNode("span", {
+								"data-gr-color-picker-area-thumb": "",
+								"aria-hidden": "true",
+								class: normalizeClass(unref(areaThumbClass)),
+								style: normalizeStyle(areaThumbStyle.value)
+							}, null, 6)
+						], 42, _hoisted_5)) : createCommentVNode("", true),
 						createElementVNode("div", {
 							"data-gr-color-picker-channel": "hue",
 							class: normalizeClass(unref(rowClass))
@@ -437,7 +740,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							}, "H", 2),
 							createVNode(GrSlider_default, {
 								modelValue: unref(hue),
-								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(hue) ? hue.value = $event : null),
+								"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => isRef(hue) ? hue.value = $event : null),
 								min: 0,
 								max: 359,
 								size: unref(resolvedSize),
@@ -454,7 +757,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							]),
 							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(degrees(unref(hue))), 3)
 						], 2),
-						createElementVNode("div", {
+						unref(resolvedView) === "sliders" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
 							"data-gr-color-picker-channel": "saturation",
 							class: normalizeClass(unref(rowClass))
 						}, [
@@ -464,7 +767,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							}, "S", 2),
 							createVNode(GrSlider_default, {
 								modelValue: unref(saturation),
-								"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(saturation) ? saturation.value = $event : null),
+								"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => isRef(saturation) ? saturation.value = $event : null),
 								size: unref(resolvedSize),
 								disabled: unref(isDisabled),
 								readonly: unref(isReadonly),
@@ -478,8 +781,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 								"aria-label"
 							]),
 							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(saturation))), 3)
-						], 2),
-						createElementVNode("div", {
+						], 2), createElementVNode("div", {
 							"data-gr-color-picker-channel": "lightness",
 							class: normalizeClass(unref(rowClass))
 						}, [
@@ -489,7 +791,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							}, "L", 2),
 							createVNode(GrSlider_default, {
 								modelValue: unref(lightness),
-								"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(lightness) ? lightness.value = $event : null),
+								"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isRef(lightness) ? lightness.value = $event : null),
 								size: unref(resolvedSize),
 								disabled: unref(isDisabled),
 								readonly: unref(isReadonly),
@@ -503,9 +805,9 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 								"aria-label"
 							]),
 							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(lightness))), 3)
-						], 2),
+						], 2)], 64)) : createCommentVNode("", true),
 						__props.alpha ? (openBlock(), createElementBlock("div", {
-							key: 0,
+							key: 2,
 							"data-gr-color-picker-channel": "alpha",
 							class: normalizeClass(unref(rowClass))
 						}, [
@@ -515,7 +817,7 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							}, "A", 2),
 							createVNode(GrSlider_default, {
 								modelValue: unref(opacity),
-								"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(opacity) ? opacity.value = $event : null),
+								"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => isRef(opacity) ? opacity.value = $event : null),
 								size: unref(resolvedSize),
 								disabled: unref(isDisabled),
 								readonly: unref(isReadonly),
@@ -530,10 +832,11 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							]),
 							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(opacity))), 3)
 						], 2)) : createCommentVNode("", true),
-						createVNode(GrInput_default, {
+						createElementVNode("div", { class: normalizeClass(unref(hexRowClass)) }, [createVNode(GrInput_default, {
 							modelValue: hexDraft.value,
-							"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => hexDraft.value = $event),
+							"onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => hexDraft.value = $event),
 							"data-gr-color-picker-hex": "",
+							class: normalizeClass(unref(hexFieldClass)),
 							size: unref(resolvedSize),
 							disabled: unref(isDisabled),
 							readonly: unref(isReadonly),
@@ -542,13 +845,25 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							onKeydown: withKeys(commitHex, ["enter"])
 						}, null, 8, [
 							"modelValue",
+							"class",
 							"size",
 							"disabled",
 							"readonly",
 							"aria-label"
-						]),
+						]), showEyedropper.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							"data-gr-color-picker-eyedropper": "",
+							type: "button",
+							class: normalizeClass(eyedropperClassName.value),
+							disabled: unref(isLocked),
+							"aria-label": unref(t)("gr.colorPicker.eyedropper", "Pick a colour from the screen"),
+							onClick: pickFromScreen
+						}, [createVNode(unref(pipette_default), {
+							class: normalizeClass(unref(eyedropperIconClass)),
+							"aria-hidden": "true"
+						}, null, 8, ["class"])], 10, _hoisted_8)) : createCommentVNode("", true)], 2),
 						presetList.value.length ? (openBlock(), createElementBlock("div", {
-							key: 1,
+							key: 3,
 							"data-gr-color-picker-presets": "",
 							class: normalizeClass(unref(presetsGridClass)),
 							role: "group",
@@ -566,8 +881,8 @@ var GrColorPicker_default = /* @__PURE__ */ defineComponent({
 							}, [createElementVNode("span", {
 								class: normalizeClass(unref(swatchFillClass)),
 								style: normalizeStyle({ background: preset })
-							}, null, 6)], 10, _hoisted_6);
-						}), 128))], 10, _hoisted_5)) : createCommentVNode("", true)
+							}, null, 6)], 10, _hoisted_10);
+						}), 128))], 10, _hoisted_9)) : createCommentVNode("", true)
 					], 6)]),
 					_: 1
 				}, 8, [