@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/ColorInput.js

@@ -1,360 +1,782 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-import { hexToHsva, hsvaToHex } from "../utils/colors.js";
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextSize, TextTransform, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import { useGalaxyTheme } from "../theme/useGalaxyTheme.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import GridWrapper from "../containers/GridWrapper.js";
+import Rotate from "../transform/Rotate.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { FieldContext } from "../hooks/useField.js";
+import { contrastRatio, hexToHsva, hexToRgb, hsvaToHex, rgbToHex } from "../utils/colors.js";
+import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import "./internal/innerButton.js";
+import { InputSize, InputVariant } from "./Input.js";
+import { useDedupedOpen, useRestoreFocusAfterOutsidePress, useRetriedFocus } from "./internal/useComboboxPopover.js";
+import TextInput from "./TextInput.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { cloneElement, forwardRef, useEffect, useRef, useState, version } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
 import { Hue, Saturation } from "@uiw/react-color";
 //#region src/inputs/ColorInput.tsx
-var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
-var _exp2 = () => ({ $size }) => getInputHeight($size);
-var _exp3 = () => ({ $width, $fillWidth }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
-	if ($isActive) return theme.color.border.selected;
-	if ($isError) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
+/**
+* The form control for choosing one solid color, as a hex value. A field shows a swatch and the
+* code (or a placeholder) and opens a picker panel: a saturation / brightness area and a hue
+* slider (dragged or arrowed), a hex text field for typing or pasting a code, and the app's preset
+* swatches. The value is a lowercase `#rrggbb` string.
+*
+* The committed value (`onChange`: a drag ends, a key steps, a code is entered, a swatch is
+* picked) is separate from the live preview (`onPreviewChange`: every movement), so an app can
+* recolor a preview while dragging and save once. The trigger can be the app's own focusable
+* element (`children`, a `Button` with a project avatar).
+*
+* The panel is a `Popover` (`DIALOG`, `MANUAL`); ColorInput moves focus to the saturation area on
+* open. It does not validate, pick alpha, or pick theme tokens (components read `t.color.*`;
+* ColorInput is for user data such as a project or tag color).
+*
+* SSR: closed by default, so the server renders the field only. The `window` pointer listener is
+* added only during a drag; nothing touches `window` or `document` at module scope.
+*/
+/** Canonical rungs; ColorInput supports all five (the Input rung table). */
+var ColorInputSize = /* @__PURE__ */ function(ColorInputSize) {
+	/** 20px field, caption text, 12px swatch and icons, 10px caret. */
+	ColorInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px field, body_sm text, 12px swatch and icons, 10px caret. */
+	ColorInputSize["SMALL"] = "SMALL";
+	/** 32px field, body_md text, 14px swatch and icons, 12px caret. The default (1.x `MEDIUM` was 28px). */
+	ColorInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px field, body_lg text, 14px swatch and icons, 12px caret. */
+	ColorInputSize["LARGE"] = "LARGE";
+	/** 40px field, body_lg text, 16px swatch and icons, 12px caret. */
+	ColorInputSize["X_LARGE"] = "X_LARGE";
+	return ColorInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+var ColorInputVariant = /* @__PURE__ */ function(ColorInputVariant) {
+	/** `background.base` fill. */
+	ColorInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	ColorInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	ColorInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	ColorInputVariant["TERTIARY"] = "TERTIARY";
+	return ColorInputVariant;
+}({});
+/** React 19 moved an element's `ref` into `props`; React 18 keeps it on the element. */
+var IS_REACT_19 = Number.parseInt(version, 10) >= 19;
+/** The child's own ref, read where the running React version keeps it (Popover's helper). */
+function getElementRef(element) {
+	return (IS_REACT_19 ? element.props : element).ref;
+}
+/** The field's width without `fillWidth` (no width token exists; the `MENU_MAX_WIDTH` precedent). */
+/** 1.x's picker sizes. */
+/** Swatches per row (10 × 24px + 9 × 4px fits the 280px picker). */
+var PRESET_COLUMNS = 10;
+/** Check mark px on a preset swatch. */
+var PRESET_CHECK_PX = 14;
+/** Frames to wait for the panel's portal before giving up on moving focus into it. */
+var COLOR_INPUT_FOCUS_RETRY_FRAMES = 10;
+/** The color a `null` value opens on (white), as 1.x did; never committed by opening. */
+var WHITE_HSVA = {
+	h: 0,
+	s: 0,
+	v: 100,
+	a: 1
 };
-var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
-	if ($isDisabled) return getInputBorderColor(theme, $variant);
-	if ($isActive) return theme.color.border.selected;
-	return getInputBorderColor(theme, $variant);
+/** The field caret: 12px, 10px on the 20px and 24px rungs (the collapsible Widget's caret). */
+var COLOR_INPUT_SIZE_TO_CARET_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12,
+	["X_LARGE"]: 12
 };
-var StyledColorInput = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledColorInput",
-	class: "s161ysn8",
-	propsAsIs: false,
-	vars: {
-		"s161ysn8-0": [_exp()],
-		"s161ysn8-1": [_exp2()],
-		"s161ysn8-2": [_exp3()],
-		"s161ysn8-3": [_exp4()],
-		"s161ysn8-4": [_exp5()],
-		"s161ysn8-5": [_exp6()],
-		"s161ysn8-6": [_exp7()],
-		"s161ysn8-7": [_exp8()]
-	}
-}));
-var ColorPickerContainer = /*#__PURE__*/ styled("div")({
-	name: "ColorPickerContainer",
-	class: "c10utehj",
+/**
+* The field swatch px per rung: the rung's icon slot, one step below III-A.4 (Mitch, 2026-10-04),
+* so the value starts where an `Input` icon field's value starts.
+*/
+/** The clear button's rung: 20px up to MEDIUM, 24px for LARGE and X_LARGE (Input's). */
+var COLOR_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL,
+	["X_LARGE"]: ButtonSize.SMALL
+};
+/** The clear button's px per rung, for the reserved padding (16 on X_SMALL: `X_SMALL_INNER_BUTTON_CSS`). */
+/** Field text step per rung (the canonical control text). */
+var COLOR_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The `Field` a ColorInput renders for its own `label` / `error` uses the same rung. */
+var COLOR_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Panel fill: SelectInput's map. A ghost field (`isGhost`) gets a readable `BASE` panel instead. */
+var COLOR_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.PRIMARY,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
+};
+/** Holds the field box, the trailing parts; 160px unless `fillWidth`. */
+var Wrapper = /*#__PURE__*/ styled("div")({
+	name: "Wrapper",
+	class: "gx-ColorInput-Wrapper-w161ysn8",
 	propsAsIs: false
 });
-var StyledSaturation = /*#__PURE__*/ styled("div")({
-	name: "StyledSaturation",
-	class: "sjdhyd9",
+/**
+* The combobox (focused element and Popover's reference). No outline; focus is `FOCUS_CSS`.
+* Declared before the frame maps.
+*/
+var Control = /*#__PURE__*/ styled("div")({
+	name: "Control",
+	class: "gx-ColorInput-Control-c10utehj",
 	propsAsIs: false
 });
-var _exp9 = () => ({ theme }) => theme.color.border.primary;
-var StyledHue = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledHue",
-	class: "s1xfz2j",
-	propsAsIs: false,
-	vars: { "s1xfz2j-0": [_exp9()] }
-}));
-var _exp0 = () => ({ $left }) => $left ?? "0";
-var _exp1 = () => ({ theme }) => theme.color.background.base;
-var _exp10 = () => ({ theme }) => theme.color.border.primary;
-var HuePointerElement = withTheme(/*#__PURE__*/ styled("div")({
-	name: "HuePointerElement",
-	class: "hv4cfbr",
-	propsAsIs: false,
-	vars: {
-		"hv4cfbr-0": [_exp0()],
-		"hv4cfbr-1": [_exp1()],
-		"hv4cfbr-2": [_exp10()]
-	}
-}));
-var HuePointer = ({ left }) => /* @__PURE__ */ jsx(HuePointerElement, { $left: left });
-var ColorInputTriggerWrapper = /*#__PURE__*/ styled("div")({
-	name: "ColorInputTriggerWrapper",
-	class: "c1581w8r",
+/** Rest look per variant: fill and hairline color. */
+var COLOR_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-ColorInput-BASE-bjdhyd9",
+	["PRIMARY"]: "gx-ColorInput-PRIMARY-p1xfz2j",
+	["SECONDARY"]: "gx-ColorInput-SECONDARY-sv4cfbr",
+	["TERTIARY"]: "gx-ColorInput-TERTIARY-t1581w8r"
+};
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-ColorInput-GHOST_CSS-g2h225c";
+/** Hover on an editable field: `border.hovered` (stronger than `border.primary`, Constitution III.6). */
+var COLOR_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-ColorInput-BASE-bnw6647",
+	["PRIMARY"]: "gx-ColorInput-PRIMARY-pqgvsmn",
+	["SECONDARY"]: "gx-ColorInput-SECONDARY-s1dtjd2a",
+	["TERTIARY"]: "gx-ColorInput-TERTIARY-tu2d93e"
+};
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-ColorInput-GHOST_HOVER_CSS-g2ye5n";
+/**
+* Height, start inset, gap and the end inset that reserves the caret zone per rung (the
+* SelectInput table). The start inset subtracts the 0.5px hairline so the swatch starts on a whole
+* pixel.
+*/
+var COLOR_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-ColorInput-X_SMALL-x12ezqo7",
+	["SMALL"]: "gx-ColorInput-SMALL-sz7nzn8",
+	["MEDIUM"]: "gx-ColorInput-MEDIUM-m1nwccez",
+	["LARGE"]: "gx-ColorInput-LARGE-l156068l",
+	["X_LARGE"]: "gx-ColorInput-X_LARGE-xewces2"
+};
+/** With `isClearable`: the end inset also reserves the clear button and a gap. */
+var COLOR_INPUT_SIZE_TO_CLEARABLE_CSS_MAP = {
+	["X_SMALL"]: "gx-ColorInput-X_SMALL-x1fjvwj0",
+	["SMALL"]: "gx-ColorInput-SMALL-savtf9q",
+	["MEDIUM"]: "gx-ColorInput-MEDIUM-m13v4q1",
+	["LARGE"]: "gx-ColorInput-LARGE-l6qpixz",
+	["X_LARGE"]: "gx-ColorInput-X_LARGE-x1yf0tnx"
+};
+/**
+* Focus, from the mouse or the keyboard: `FIELD_FOCUS`, `border.focused` at 1px inside the frame. `:focus:hover`
+* beats the hover map, so a ghost field keeps it. Not applied while disabled (the disabled
+* combobox is a `tabIndex={-1}` div, which a click can still focus).
+*/
+var FOCUS_CSS = "gx-ColorInput-FOCUS_CSS-f9y08ba";
+/** Open: `border.focused` (1.x's "selected" border). */
+var OPEN_CSS = "gx-ColorInput-OPEN_CSS-o1wj625e";
+/** Error border at rest, on hover, with focus and while open. */
+var ERROR_CSS = "gx-ColorInput-ERROR_CSS-e182yw4q";
+/** Disabled keeps the resting hairline; the text, the icons and the cursor say disabled. */
+var DISABLED_CSS = "gx-ColorInput-DISABLED_CSS-dueiui8";
+/** Read-only: no pointer affordance. */
+var READ_ONLY_CSS = "gx-ColorInput-READ_ONLY_CSS-rubkud3";
+/** Stretch to the parent's width (wrapper, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-ColorInput-FILL_WIDTH_CSS-fhi9xkx";
+/** The swatch and the code (or the placeholder). */
+var ValueDisplay = /*#__PURE__*/ styled("span")({
+	name: "ValueDisplay",
+	class: "gx-ColorInput-ValueDisplay-v1ql0gs2",
 	propsAsIs: false
 });
-var _exp11 = () => ({ $color }) => $color;
-var ColorInputPreviewSwatch = /*#__PURE__*/ styled("div")({
-	name: "ColorInputPreviewSwatch",
-	class: "c2h225c",
-	propsAsIs: false,
-	vars: { "c2h225c-0": [_exp11()] }
+/** Gap between the swatch and the code per rung. */
+var COLOR_INPUT_SIZE_TO_VALUE_CSS_MAP = {
+	["X_SMALL"]: "gx-ColorInput-X_SMALL-x16qp03j",
+	["SMALL"]: "gx-ColorInput-SMALL-sp370uh",
+	["MEDIUM"]: "gx-ColorInput-MEDIUM-m1p7qx61",
+	["LARGE"]: "gx-ColorInput-LARGE-lsi82l4",
+	["X_LARGE"]: "gx-ColorInput-X_LARGE-x1i4cb4c"
+};
+/** A color chip; the color is the `--gx-color-input-swatch` custom property. */
+var Swatch = /*#__PURE__*/ styled("span")({
+	name: "Swatch",
+	class: "gx-ColorInput-Swatch-s18gyim7",
+	propsAsIs: false
 });
-var _exp12 = () => ({ $isSelected }) => $isSelected ? "#ffffff" : "rgba(0, 0, 0, 0.15)";
-var _exp13 = () => ({ $color }) => $color;
-var ColorSwatch = /*#__PURE__*/ styled("button")({
-	name: "ColorSwatch",
-	class: "cnw6647",
-	propsAsIs: false,
-	vars: {
-		"cnw6647-0": [_exp12()],
-		"cnw6647-1": [_exp13()]
-	}
+/** The field swatch's size per rung (the icon px). */
+var COLOR_INPUT_SIZE_TO_SWATCH_CSS_MAP = {
+	["X_SMALL"]: "gx-ColorInput-X_SMALL-x985grc",
+	["SMALL"]: "gx-ColorInput-SMALL-s19ylbz",
+	["MEDIUM"]: "gx-ColorInput-MEDIUM-m1f25qfl",
+	["LARGE"]: "gx-ColorInput-LARGE-lxtdcgy",
+	["X_LARGE"]: "gx-ColorInput-X_LARGE-x3swctb"
+};
+/** The disabled field swatch: a disabled hairline, and no opacity, so the color stays true. */
+var DISABLED_SWATCH_CSS = "gx-ColorInput-DISABLED_SWATCH_CSS-d11y75hr";
+/** The hex row's preview swatch: 24px. */
+var PREVIEW_SWATCH_CSS = "gx-ColorInput-PREVIEW_SWATCH_CSS-p1hod81r";
+/** The caret and the clear button, laid over the field's end. */
+var Trailing = /*#__PURE__*/ styled("span")({
+	name: "Trailing",
+	class: "gx-ColorInput-Trailing-t1nutfrb",
+	propsAsIs: false
 });
-var normalizeHex = (hex) => {
-	let h = hex.trim().toLowerCase();
-	if (!h.startsWith("#")) h = `#${h}`;
-	if (h.length === 4) {
-		const r = h[1], g = h[2], b = h[3];
-		return `#${r}${r}${g}${g}${b}${b}`;
-	}
-	if (h.length !== 7) throw new Error(`Invalid hex color: "${hex}". Expected #RRGGBB or #RGB`);
-	return h;
+/** Trailing inset (the rung padding) and gap per rung. */
+var COLOR_INPUT_SIZE_TO_TRAILING_CSS_MAP = {
+	["X_SMALL"]: "gx-ColorInput-X_SMALL-x1fenl2i",
+	["SMALL"]: "gx-ColorInput-SMALL-s1xswvsb",
+	["MEDIUM"]: "gx-ColorInput-MEDIUM-m1n4tibk",
+	["LARGE"]: "gx-ColorInput-LARGE-lnfo5di",
+	["X_LARGE"]: "gx-ColorInput-X_LARGE-x1pa7cph"
 };
-var safeNormalizeHex = (hex) => {
-	if (!hex) return null;
+/** Wraps the clear button: the only part of `Trailing` that takes the pointer. */
+var ClearSlot = /*#__PURE__*/ styled("span")({
+	name: "ClearSlot",
+	class: "gx-ColorInput-ClearSlot-c1l0qve6",
+	propsAsIs: false
+});
+/** Hidden clear button: keeps its width, leaves the tab order and the accessibility tree. */
+var CLEAR_HIDDEN_CSS = "gx-ColorInput-CLEAR_HIDDEN_CSS-cjp6j9s";
+/** The panel content: a 12px-inset column, 8px apart. */
+var PanelBody = /*#__PURE__*/ styled("div")({
+	name: "PanelBody",
+	class: "gx-ColorInput-PanelBody-pne28cq",
+	propsAsIs: false
+});
+/**
+* The saturation / brightness area's frame. The library sizes its element inline (200 × 200), so
+* the frame stretches its one child (1.x's rule). The focused element is the library's inner
+* `div` (inline `outline: none`), so FOCUS_RING's outline is drawn on the frame.
+*/
+var SaturationFrame = /*#__PURE__*/ styled("div")({
+	name: "SaturationFrame",
+	class: "gx-ColorInput-SaturationFrame-supo66w",
+	propsAsIs: false
+});
+/** The hue slider's frame, with the same focus outline. */
+var HueFrame = /*#__PURE__*/ styled("div")({
+	name: "HueFrame",
+	class: "gx-ColorInput-HueFrame-h1eh1bb8",
+	propsAsIs: false
+});
+/**
+* The one pointer for both: a 12px ring (2px `background.base`, a 0.5px `text.primary` outline)
+* that reads on any color and flips with the theme. Positions are custom properties.
+*/
+var PointerRing = /*#__PURE__*/ styled("span")({
+	name: "PointerRing",
+	class: "gx-ColorInput-PointerRing-phnk6gl",
+	propsAsIs: false
+});
+/** The presets group: ten 24px swatches per row. */
+var PresetGrid = /*#__PURE__*/ styled("div")({
+	name: "PresetGrid",
+	class: "gx-ColorInput-PresetGrid-p1nd6c19",
+	propsAsIs: false
+});
+/** One preset swatch. Declared before nothing composes onto it. */
+var SwatchButton = /*#__PURE__*/ styled("button")({
+	name: "SwatchButton",
+	class: "gx-ColorInput-SwatchButton-s80qb26",
+	propsAsIs: false
+});
+/** The `pointer` render function for the area and the slider. */
+function ColorPointer({ left, top }) {
+	const position = { "--gx-color-pointer-x": left === void 0 ? "0%" : String(left) };
+	if (top !== void 0) position["--gx-color-pointer-y"] = String(top);
+	return /* @__PURE__ */ jsx(PointerRing, {
+		"aria-hidden": true,
+		style: position
+	});
+}
+/** `#rgb` / `#rrggbb`, with or without `#` (what `hexToRgb` accepts, with real hex digits). */
+var HEX_PATTERN = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+/** Parses a value to lowercase `#rrggbb`, or `null` when it does not parse. */
+function normalizeHex(value) {
+	if (value === null || value === void 0) return null;
+	if (!HEX_PATTERN.test(value.trim())) return null;
 	try {
-		return normalizeHex(hex);
+		return rgbToHex(hexToRgb(value));
 	} catch {
 		return null;
 	}
-};
-/**
-* A hex color field with a picker popover. Fully controlled.
-*
-* `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
-* drive a live preview from the first and persist from the second.
-*/
-var ColorInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
-	const [localState, setLocalState] = useState({
-		isOpen: false,
-		isHovered: false
+}
+/** The swatch custom property. */
+function swatchStyle(hex) {
+	return { "--gx-color-input-swatch": hex };
+}
+/** The preset check mark's `hex` prop, when a contrasting color was resolved. */
+function presetCheckColor(hex) {
+	return hex === void 0 ? {} : { hex };
+}
+/** The field (or the custom trigger), the trailing parts and the picker panel. */
+function ColorInputFrame({ colorProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = null, onChange, onPreviewChange, presets, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label, placeholder = "Select color…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, children, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = colorProps;
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName: hasOwnName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
 	});
-	const isControlled = controlledIsOpen !== void 0;
-	const isOpen = isControlled ? controlledIsOpen : localState.isOpen;
-	const hsva = useMemo(() => {
-		if (!value) return {
-			h: 0,
-			s: 0,
-			v: 100,
-			a: 1
-		};
-		try {
-			const normalized = safeNormalizeHex(value);
-			if (!normalized) return {
-				h: 0,
-				s: 0,
-				v: 100,
-				a: 1
-			};
-			return hexToHsva(normalized);
-		} catch {
-			return {
-				h: 0,
-				s: 0,
-				v: 100,
-				a: 1
-			};
-		}
-	}, [value]);
-	const [localHsva, setLocalHsva] = useState(hsva);
-	const [prevHsva, setPrevHsva] = useState(hsva);
-	if (hsva !== prevHsva) {
-		setPrevHsva(hsva);
-		setLocalHsva(hsva);
-	}
-	const handleToggle = useCallback(() => {
-		if (isDisabled) return;
-		const newIsOpen = !isOpen;
-		if (!isControlled) setLocalState((prev) => ({
-			...prev,
-			isOpen: newIsOpen
-		}));
-		if (onOpenChange) onOpenChange(newIsOpen);
-	}, [
-		isDisabled,
-		isOpen,
-		isControlled,
-		onOpenChange
+	const panelId = `${controlId}-picker`;
+	const { theme } = useGalaxyTheme();
+	const triggerRef = useRef(null);
+	const mergedRef = useMergeRefs([
+		triggerRef,
+		forwardedRef,
+		children === void 0 ? void 0 : getElementRef(children)
 	]);
-	const handleClose = useCallback(() => {
-		const hex = hsvaToHex(localHsva);
-		if (onChange) onChange(hex);
-		if (!isControlled) setLocalState((prev) => ({
-			...prev,
-			isOpen: false
-		}));
-		if (onOpenChange) onOpenChange(false);
-	}, [
-		isControlled,
-		onOpenChange,
-		localHsva,
+	const panelRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const saturationFrameRef = useRef(null);
+	const isEditable = !isDisabled && !isReadOnly;
+	const isCustomTrigger = children !== void 0;
+	const [rawValue, setRawValue] = useControlledState({
+		value,
+		defaultValue,
 		onChange
-	]);
-	const handleMouseEnter = useCallback(() => {
-		setLocalState((prev) => ({
-			...prev,
-			isHovered: true
-		}));
-	}, []);
-	const handleMouseLeave = useCallback(() => {
-		setLocalState((prev) => ({
-			...prev,
-			isHovered: false
-		}));
-	}, []);
+	});
+	const currentHex = normalizeHex(rawValue);
+	const invalidValue = rawValue !== null && currentHex === null ? rawValue : null;
+	const warnedRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (invalidValue === null || !isDevelopment() || warnedRef.current.has(invalidValue)) return;
+		warnedRef.current.add(invalidValue);
+		console.warn(`[@galaxy-io/dls] ColorInput value "${invalidValue}" is not a #rgb / #rrggbb color; it is treated as null.`);
+	}, [invalidValue]);
+	useDevWarning(isCustomTrigger && (label !== void 0 || error !== void 0), "[@galaxy-io/dls] ColorInput with a custom trigger (`children`) ignores `label` and `error`. Wrap it in a `Field` and pass `ariaLabel`.");
 	useEffect(() => {
-		if (onPreviewChange && isOpen) onPreviewChange(hsvaToHex(localHsva));
-	}, [
-		localHsva,
+		if (!isCustomTrigger || !isDevelopment()) return;
+		const element = triggerRef.current;
+		if (element !== null && element.tabIndex < 0 && !element.matches("button, a[href], input")) console.warn("[@galaxy-io/dls] ColorInput's custom trigger is not focusable. Pass a focusable element that forwards its ref, such as a Button.");
+	}, [isCustomTrigger]);
+	const { isOpen: isOpenState, setOpen: setOpenState } = useControlledOpenState({
 		isOpen,
-		onPreviewChange
-	]);
-	const handleSaturationChange = useCallback((hsva) => {
-		setLocalHsva(hsva);
-	}, []);
-	const handleHueChange = useCallback((newHue) => {
-		setLocalHsva((prev) => ({
-			...prev,
-			h: newHue.h
-		}));
-	}, []);
-	const handleColorSelect = useCallback((hex) => {
-		const normalized = safeNormalizeHex(hex);
-		if (normalized && onChange) {
-			onChange(normalized);
-			if (!isControlled) setLocalState((prev) => ({
-				...prev,
-				isOpen: false
-			}));
-			if (onOpenChange) onOpenChange(false);
-		}
-	}, [
-		onChange,
-		isControlled,
+		defaultIsOpen,
 		onOpenChange
-	]);
-	const textVariant = useMemo(() => {
-		if (value) return TextVariant.PRIMARY;
-		if (isOpen || localState.isHovered) return TextVariant.SECONDARY;
-		return TextVariant.TERTIARY;
-	}, [
-		value,
-		isOpen,
-		localState.isHovered
-	]);
-	const displayValue = useMemo(() => {
-		if (value) {
-			const normalized = safeNormalizeHex(value);
-			if (normalized) return normalized.toUpperCase();
-			return value;
+	});
+	const isShown = isOpenState && isEditable;
+	const { setOpen, isShownRef } = useDedupedOpen(isShown, setOpenState);
+	const [local, setLocalState] = useState(() => currentHex === null ? WHITE_HSVA : hexToHsva(currentHex));
+	const localRef = useRef(local);
+	localRef.current = local;
+	const localHex = hsvaToHex(local);
+	const isDirtyRef = useRef(false);
+	const lastCommittedRef = useRef(currentHex);
+	const [seenValue, setSeenValue] = useState(currentHex);
+	const [lastShown, setLastShown] = useState(isShown);
+	const shouldFocusRef = useRef(false);
+	if (seenValue !== currentHex || lastShown !== isShown) {
+		const isOpening = lastShown !== isShown && isShown;
+		const isExternal = seenValue !== currentHex && currentHex !== lastCommittedRef.current;
+		setSeenValue(currentHex);
+		setLastShown(isShown);
+		if (isOpening || isExternal) {
+			setLocalState(currentHex === null ? WHITE_HSVA : hexToHsva(currentHex));
+			isDirtyRef.current = false;
+			lastCommittedRef.current = currentHex;
 		}
-		return placeholder;
-	}, [value, placeholder]);
-	const normalizedPinnedHex = useMemo(() => pinnedHex.map((hex) => safeNormalizeHex(hex)).filter((hex) => Boolean(hex)), [pinnedHex]);
-	const hasPinnedColors = normalizedPinnedHex.length > 0;
-	const pinnedColorColumns = Math.min(12, normalizedPinnedHex.length);
-	const colorPickerBody = /* @__PURE__ */ jsxs(ColorPickerContainer, {
-		$hasPinnedColors: hasPinnedColors,
-		onClick: (e) => e.stopPropagation(),
-		children: [
-			/* @__PURE__ */ jsx(StyledSaturation, { children: /* @__PURE__ */ jsx(Saturation, {
-				hsva: localHsva,
-				onChange: handleSaturationChange
-			}) }),
-			/* @__PURE__ */ jsx(StyledHue, { children: /* @__PURE__ */ jsx(Hue, {
-				hue: localHsva.h,
-				onChange: handleHueChange,
-				pointer: HuePointer
-			}) }),
-			hasPinnedColors && /* @__PURE__ */ jsx(GridWrapper, {
-				columns: `repeat(${pinnedColorColumns}, 24px)`,
-				gap: 4,
-				children: normalizedPinnedHex.map((normalized, index) => /* @__PURE__ */ jsx(ColorSwatch, {
-					$color: normalized,
-					$isSelected: value === normalized,
-					onClick: () => handleColorSelect(normalized)
-				}, `pinned-${index}-${normalized}`))
-			})
-		]
+		if (isOpening) shouldFocusRef.current = true;
+	}
+	/** Commits a color: `onChange` only when it differs from the current value. */
+	const commit = (hex) => {
+		isDirtyRef.current = false;
+		lastCommittedRef.current = hex;
+		if (hex !== currentHex) setRawValue(hex);
+	};
+	/** A local change: preview always; commit unless a drag is in progress. */
+	const isDraggingRef = useRef(false);
+	const changeLocal = (next, shouldCommit) => {
+		setLocalState(next);
+		localRef.current = next;
+		const hex = hsvaToHex(next);
+		onPreviewChange?.(hex);
+		if (shouldCommit) commit(hex);
+		else isDirtyRef.current = true;
+	};
+	const commitRef = useRef(commit);
+	commitRef.current = commit;
+	const dragFinishRef = useRef(null);
+	const handleDragStart = () => {
+		if (isDraggingRef.current) return;
+		isDraggingRef.current = true;
+		const finish = () => {
+			isDraggingRef.current = false;
+			dragFinishRef.current = null;
+			window.removeEventListener("pointerup", finish);
+			window.removeEventListener("pointercancel", finish);
+			commitRef.current(hsvaToHex(localRef.current));
+		};
+		dragFinishRef.current = finish;
+		window.addEventListener("pointerup", finish);
+		window.addEventListener("pointercancel", finish);
+	};
+	useEffect(() => () => {
+		const finish = dragFinishRef.current;
+		if (finish === null) return;
+		window.removeEventListener("pointerup", finish);
+		window.removeEventListener("pointercancel", finish);
+	}, []);
+	const wasShownRef = useRef(isShown);
+	useEffect(() => {
+		if (wasShownRef.current && !isShown && isDirtyRef.current) commitRef.current(hsvaToHex(localRef.current));
+		wasShownRef.current = isShown;
+	}, [isShown]);
+	useRetriedFocus(shouldFocusRef, isShown, () => saturationFrameRef.current?.querySelector("[role=\"slider\"]") ?? null, COLOR_INPUT_FOCUS_RETRY_FRAMES);
+	const [draft, setDraft] = useState(localHex.slice(1).toUpperCase());
+	const [draftSource, setDraftSource] = useState(localHex);
+	if (draftSource !== localHex) {
+		setDraftSource(localHex);
+		setDraft(localHex.slice(1).toUpperCase());
+	}
+	const parseDraft = (text) => normalizeHex(text.trim());
+	const commitDraft = (isBlur) => {
+		const hex = parseDraft(draft);
+		if (hex === null) {
+			if (isBlur) setDraft(localHex.slice(1).toUpperCase());
+			return;
+		}
+		changeLocal(hexToHsva(hex), true);
+		setDraft(hex.slice(1).toUpperCase());
+	};
+	const close = () => setOpen(false);
+	useRestoreFocusAfterOutsidePress({
+		isShown,
+		focusRef: triggerRef,
+		insideRefs: [
+			wrapperRef,
+			triggerRef,
+			panelRef
+		],
+		focusScopeRefs: [panelRef]
 	});
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 4,
-		fillWidth,
-		children: [
-			label && /* @__PURE__ */ jsx(InputLabel, {
-				label,
-				isRequired
-			}),
-			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
-				body: colorPickerBody,
-				isOpen,
-				onClose: handleClose,
-				noPadding: true,
-				fillWidth,
-				children: children ? /* @__PURE__ */ jsx(ColorInputTriggerWrapper, {
-					onClick: (e) => {
-						e.stopPropagation();
-						handleToggle();
-					},
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							handleToggle();
+	const clear = () => {
+		isDirtyRef.current = false;
+		lastCommittedRef.current = null;
+		setRawValue(null);
+		if (isShown) close();
+		triggerRef.current?.focus();
+	};
+	const validPresets = [];
+	for (const preset of presets ?? []) {
+		const hex = normalizeHex(preset);
+		if (hex !== null && !validPresets.includes(hex)) validPresets.push(hex);
+	}
+	const selectedPresetIndex = currentHex === null ? -1 : validPresets.indexOf(currentHex);
+	const [focusedPreset, setFocusedPreset] = useState(-1);
+	const rovingIndex = focusedPreset >= 0 && focusedPreset < validPresets.length ? focusedPreset : Math.max(selectedPresetIndex, 0);
+	const presetRefs = useRef([]);
+	const handlePresetKeyDown = (event) => {
+		const target = {
+			ArrowRight: rovingIndex + 1,
+			ArrowLeft: rovingIndex - 1,
+			ArrowDown: rovingIndex + PRESET_COLUMNS,
+			ArrowUp: rovingIndex - PRESET_COLUMNS,
+			Home: 0,
+			End: validPresets.length - 1
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		const next = Math.max(0, Math.min(validPresets.length - 1, target));
+		setFocusedPreset(next);
+		presetRefs.current[next]?.focus();
+	};
+	const choosePreset = (hex) => {
+		changeLocal(hexToHsva(hex), true);
+		close();
+	};
+	/**
+	* The check mark's color on a swatch: the theme's resolved `text.primary` or `background.base`,
+	* whichever contrasts more with the swatch (passed as the Icon's `hex`; the swatch is an arbitrary
+	* color, so no single token reads on all of them). `undefined` falls back to `IconVariant.PRIMARY`.
+	*/
+	const checkHex = (hex) => {
+		const primary = normalizeHex(theme.color.text.primary);
+		const base = normalizeHex(theme.color.background.base);
+		if (primary === null || base === null) return void 0;
+		return contrastRatio(primary, hex) >= contrastRatio(base, hex) ? primary : base;
+	};
+	/** Focus leaving both the trigger and the panel for another element closes the panel. */
+	const handleFocusOut = (event) => {
+		if (!isShownRef.current) return;
+		const next = event.relatedTarget;
+		if (next === null) return;
+		if (panelRef.current?.contains(next) || triggerRef.current?.contains(next)) return;
+		close();
+	};
+	/** Open keys on the field or the custom trigger. */
+	const handleTriggerKeyDown = (event) => {
+		if (event.defaultPrevented || !isEditable || isShown) return;
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+			event.preventDefault();
+			setOpen(true);
+		}
+	};
+	const handleTriggerClick = (event) => {
+		if (event.defaultPrevented || !isEditable) return;
+		setOpen(!isShown);
+	};
+	useDevWarning(!isCustomTrigger && !hasOwnName, "[@galaxy-io/dls] ColorInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	const body = /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsxs(PanelBody, {
+			onBlur: handleFocusOut,
+			children: [
+				/* @__PURE__ */ jsx(SaturationFrame, {
+					ref: saturationFrameRef,
+					onPointerDownCapture: handleDragStart,
+					children: /* @__PURE__ */ jsx(Saturation, {
+						hsva: local,
+						onChange: (next) => changeLocal({
+							...next,
+							a: 1
+						}, !isDraggingRef.current),
+						pointer: ColorPointer,
+						role: "slider",
+						"aria-label": "Saturation and brightness",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(local.s),
+						"aria-valuetext": `Saturation ${Math.round(local.s)}%, brightness ${Math.round(local.v)}%`
+					})
+				}),
+				/* @__PURE__ */ jsx(HueFrame, {
+					onPointerDownCapture: handleDragStart,
+					children: /* @__PURE__ */ jsx(Hue, {
+						hue: local.h,
+						onChange: (next) => changeLocal({
+							...localRef.current,
+							h: next.h
+						}, !isDraggingRef.current),
+						pointer: ColorPointer,
+						width: "100%",
+						height: "100%",
+						radius: 0,
+						innerProps: {
+							role: "slider",
+							"aria-label": "Hue",
+							"aria-valuemin": 0,
+							"aria-valuemax": 360,
+							"aria-valuenow": Math.round(local.h),
+							"aria-valuetext": `${Math.round(local.h)} degrees`
 						}
-					},
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					role: "button",
-					tabIndex: isDisabled ? -1 : 0,
-					"aria-haspopup": "dialog",
-					"aria-expanded": isOpen,
-					children
-				}) : /* @__PURE__ */ jsxs(StyledColorInput, {
-					$size: size,
-					$variant: variant,
-					$isActive: isOpen,
-					$isDisabled: isDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onClick: handleToggle,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					role: "button",
-					tabIndex: isDisabled ? -1 : 0,
-					"aria-haspopup": "dialog",
-					"aria-expanded": isOpen,
-					"aria-label": value ? displayValue : placeholder,
-					children: [
-						/* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							children: [value && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
-								variant: textVariant,
-								size: getInputTextSize(size),
-								isEllipsis: true,
-								cursor: !isDisabled ? "pointer" : "not-allowed",
-								children: displayValue
-							})]
-						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(Icon, {
-							component: CaretDownIcon,
-							size: getInputIconSize(size),
-							variant: isOpen || localState.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
-						})
-					]
+					})
+				}),
+				/* @__PURE__ */ jsxs(Flex, {
+					alignItems: AlignItems.CENTER,
+					gap: 8,
+					children: [/* @__PURE__ */ jsx(Swatch, {
+						"aria-hidden": true,
+						className: PREVIEW_SWATCH_CSS,
+						style: swatchStyle(localHex)
+					}), /* @__PURE__ */ jsx(TextInput, {
+						size: InputSize.SMALL,
+						variant: InputVariant.SECONDARY,
+						family: FontFamily.MONO,
+						prefix: "#",
+						maxLength: 7,
+						ariaLabel: "Hex color",
+						fillWidth: true,
+						spellCheck: false,
+						value: draft,
+						onChange: setDraft,
+						onEnter: () => commitDraft(false),
+						onBlur: () => commitDraft(true)
+					})]
+				}),
+				validPresets.length > 0 && /* @__PURE__ */ jsx(PresetGrid, {
+					role: "group",
+					"aria-label": "Presets",
+					onKeyDown: handlePresetKeyDown,
+					children: validPresets.map((hex, index) => {
+						const isSelected = hex === currentHex;
+						return /* @__PURE__ */ jsx(SwatchButton, {
+							ref: (node) => {
+								presetRefs.current[index] = node;
+							},
+							type: "button",
+							"aria-label": hex.toUpperCase(),
+							"aria-pressed": isSelected,
+							tabIndex: index === rovingIndex ? 0 : -1,
+							onFocus: () => setFocusedPreset(index),
+							onClick: () => choosePreset(hex),
+							style: swatchStyle(hex),
+							children: isSelected && /* @__PURE__ */ jsx(Icon, {
+								component: CheckIcon,
+								size: PRESET_CHECK_PX,
+								variant: IconVariant.PRIMARY,
+								...presetCheckColor(checkHex(hex)),
+								"aria-hidden": true
+							})
+						}, hex);
+					})
+				})
+			]
+		})
+	});
+	const popoverProps = {
+		ref: panelRef,
+		trigger: PopoverTrigger.MANUAL,
+		role: PopoverRole.DIALOG,
+		variant: isGhost ? PopoverVariant.BASE : COLOR_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+		isOpen: isShown,
+		onOpenChange: setOpen,
+		isDisabled: !isEditable,
+		id: panelId,
+		ariaLabel: "Choose color",
+		body
+	};
+	if (isCustomTrigger) {
+		const childProps = children.props;
+		const compose = (own, mine) => (event) => {
+			if (typeof own === "function") own(event);
+			mine(event);
+		};
+		const hasOwnName = childProps["aria-label"] !== void 0 || childProps["aria-labelledby"] !== void 0 || childProps.ariaLabel !== void 0;
+		const trigger = cloneElement(children, {
+			...rest,
+			ref: mergedRef,
+			id: controlId,
+			...hasOwnName || ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+			...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
+			onClick: compose(childProps.onClick, handleTriggerClick),
+			onKeyDown: compose(childProps.onKeyDown, handleTriggerKeyDown),
+			onBlur: compose(childProps.onBlur, handleFocusOut)
+		});
+		return /* @__PURE__ */ jsx(Popover, {
+			...popoverProps,
+			children: trigger
+		});
+	}
+	const textSize = COLOR_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const caretPx = COLOR_INPUT_SIZE_TO_CARET_PX_MAP[size];
+	const isClearHidden = currentHex === null || !isEditable;
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		ref: wrapperRef,
+		className: cx(fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [/* @__PURE__ */ jsx(Popover, {
+			...popoverProps,
+			children: /* @__PURE__ */ jsx(Control, {
+				ref: mergedRef,
+				id: controlId,
+				role: "combobox",
+				tabIndex: isDisabled ? -1 : 0,
+				"aria-labelledby": field?.labelId,
+				"aria-label": ariaLabel,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-required": isRequiredState ? true : void 0,
+				"aria-readonly": isReadOnly ? true : void 0,
+				"aria-disabled": isDisabled ? true : void 0,
+				onKeyDown: handleTriggerKeyDown,
+				onClick: handleTriggerClick,
+				onBlur: handleFocusOut,
+				...rest,
+				className: cx(isGhost ? GHOST_CSS : COLOR_INPUT_VARIANT_TO_CSS_MAP[variant], COLOR_INPUT_SIZE_TO_CSS_MAP[size], isClearable && COLOR_INPUT_SIZE_TO_CLEARABLE_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : COLOR_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), !isDisabled && FOCUS_CSS, isShown && OPEN_CSS, isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, isReadOnly && READ_ONLY_CSS),
+				children: /* @__PURE__ */ jsx(ValueDisplay, {
+					className: COLOR_INPUT_SIZE_TO_VALUE_CSS_MAP[size],
+					children: currentHex === null ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+						lineClamp: 1,
+						children: placeholder
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Swatch, {
+						"aria-hidden": true,
+						className: cx(COLOR_INPUT_SIZE_TO_SWATCH_CSS_MAP[size], isDisabled && DISABLED_SWATCH_CSS),
+						style: swatchStyle(currentHex)
+					}), /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						family: FontFamily.MONO,
+						variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+						transform: TextTransform.UPPERCASE,
+						lineClamp: 1,
+						children: currentHex
+					})] })
 				})
-			}),
-			error && /* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.ERROR,
-				size: TextSize.BODY_SM,
-				children: error
 			})
-		]
+		}), /* @__PURE__ */ jsxs(Trailing, {
+			className: COLOR_INPUT_SIZE_TO_TRAILING_CSS_MAP[size],
+			children: [isClearable && /* @__PURE__ */ jsx(ClearSlot, {
+				className: cx(isClearHidden && CLEAR_HIDDEN_CSS),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.TERTIARY,
+					size: COLOR_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+					icon: XIcon,
+					ariaLabel: "Clear",
+					onClick: clear,
+					className: cx(size === "X_SMALL" && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+				})
+			}), /* @__PURE__ */ jsx(Rotate, {
+				isRotated: isShown,
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: CaretDownIcon,
+					size: caretPx,
+					variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY
+				})
+			})]
+		})]
 	});
-};
+}
+/** Choose one solid color as a hex value, in a field (or a custom trigger) that opens a picker. */
+var ColorInput = forwardRef(function ColorInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, children } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "ColorInput",
+		label,
+		error,
+		isRequired,
+		size: COLOR_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS,
+		isEnabled: children === void 0
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(ColorInputFrame, {
+			colorProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(ColorInputFrame, {
+		colorProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+ColorInput.displayName = "ColorInput";
 //#endregion
-export { ColorInput as default };
+export { ColorInputSize, ColorInputVariant, ColorInput as default };