@zag-js/color-picker 0.29.0 → 0.31.0

package/dist/index.js

@@ -46,8 +46,11 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "transparencyGrid",
   "swatchGroup",
   "swatchTrigger",
+  "swatchIndicator",
   "swatch",
-  "eyeDropperTrigger"
+  "eyeDropperTrigger",
+  "formatTrigger",
+  "formatSelect"
 ]);
 var parts = anatomy.build();
 
@@ -71,6 +74,7 @@ var dom = (0, import_dom_query.createScope)({
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
   getPositionerId: (ctx) => `color-picker:${ctx.id}:positioner`,
+  getFormatSelectId: (ctx) => `color-picker:${ctx.id}:format-select`,
   getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
   getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
   getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
@@ -85,6 +89,7 @@ var dom = (0, import_dom_query.createScope)({
       ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), `input[data-channel="${channel}"]`)
     ];
   },
+  getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
   getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
@@ -116,10 +121,7 @@ var dom = (0, import_dom_query.createScope)({
   getFirstFocusableEl: (ctx) => (0, import_tabbable.getFirstFocusable)(dom.getContentEl(ctx), "if-empty"),
   getInitialFocusEl: (ctx) => {
     let el = (0, import_utils.runIfFn)(ctx.initialFocusEl);
-    if (!el && ctx.autoFocus)
-      el = dom.getFirstFocusableEl(ctx);
-    if (!el)
-      el = dom.getContentEl(ctx);
+    el = dom.getFirstFocusableEl(ctx) ?? dom.getContentEl(ctx);
     return el;
   }
 });
@@ -164,7 +166,7 @@ function getChannelValue(color, channel) {
     case "hue":
       return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
     case "saturation":
-      return isHSL ? color.toFormat("hsl").getChannelValue("saturation").toString() : color.toFormat("hsb").getChannelValue("saturation").toString();
+      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
     case "lightness":
       return color.toFormat("hsla").getChannelValue("lightness").toString();
     case "brightness":
@@ -193,13 +195,13 @@ function getChannelRange(color, channel) {
     case "hue":
     case "saturation":
     case "lightness":
-      return color.toFormat("hsl").getChannelRange(channel);
+      return color.toFormat("hsla").getChannelRange(channel);
     case "brightness":
-      return color.toFormat("hsb").getChannelRange(channel);
+      return color.toFormat("hsba").getChannelRange(channel);
     case "red":
     case "green":
     case "blue":
-      return color.toFormat("rgb").getChannelRange(channel);
+      return color.toFormat("rgba").getChannelRange(channel);
     default:
       return color.getChannelRange(channel);
   }
@@ -246,13 +248,15 @@ var getSliderBackground = (props) => {
 // src/color-picker.connect.ts
 function connect(state, send, normalize) {
   const value = state.context.value;
+  const areaValue = state.context.areaValue;
   const valueAsString = state.context.valueAsString;
   const isDisabled = state.context.isDisabled;
   const isInteractive = state.context.isInteractive;
   const isDragging = state.hasTag("dragging");
   const isOpen = state.hasTag("open");
+  const isFocused = state.hasTag("focused");
   const getAreaChannels = (props) => {
-    const channels = value.getChannels();
+    const channels = areaValue.getChannels();
     return {
       xChannel: props.xChannel ?? channels[1],
       yChannel: props.yChannel ?? channels[2]
@@ -263,11 +267,26 @@ function connect(state, send, normalize) {
     ...state.context.positioning,
     placement: currentPlacement
   });
+  function getSwatchTriggerState(props) {
+    const color = (0, import_color_utils3.normalizeColor)(props.value).toFormat(state.context.format);
+    return {
+      value: color,
+      valueAsString: color.toString("hex"),
+      isChecked: color.isEqual(value),
+      isDisabled: props.disabled || !isInteractive
+    };
+  }
   return {
     isDragging,
     isOpen,
     valueAsString,
     value,
+    open() {
+      send({ type: "OPEN" });
+    },
+    close() {
+      send({ type: "CLOSE" });
+    },
     setValue(value2) {
       send({ type: "VALUE.SET", value: (0, import_color_utils3.normalizeColor)(value2), src: "set-color" });
     },
@@ -278,7 +297,7 @@ function connect(state, send, normalize) {
       const color = value.withChannelValue(channel, channelValue);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
-    format: value.outputFormat ?? value.getFormat(),
+    format: state.context.format,
     setFormat(format) {
       const formatValue = value.toFormat(format);
       send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
@@ -305,6 +324,7 @@ function connect(state, send, normalize) {
       htmlFor: dom.getHiddenInputId(state.context),
       "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       onClick(event) {
         event.preventDefault();
         const inputEl = (0, import_dom_query2.query)(dom.getControlEl(state.context), "[data-channel=hex]");
@@ -316,21 +336,35 @@ function connect(state, send, normalize) {
       id: dom.getControlId(state.context),
       dir: state.context.dir,
       "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
-      "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly)
+      "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+      "data-state": isOpen ? "open" : "closed",
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused)
     }),
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
       id: dom.getTriggerId(state.context),
       dir: state.context.dir,
+      disabled: isDisabled,
+      "aria-label": `select color. current color is ${valueAsString}`,
       "aria-controls": dom.getContentId(state.context),
       "aria-labelledby": dom.getLabelId(state.context),
       "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
       "data-placement": currentPlacement,
+      "aria-expanded": (0, import_dom_query2.dataAttr)(isOpen),
+      "data-state": isOpen ? "open" : "closed",
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       type: "button",
       onClick() {
+        if (!isInteractive)
+          return;
         send({ type: "TRIGGER.CLICK" });
       },
+      onBlur() {
+        if (!isInteractive)
+          return;
+        send({ type: "TRIGGER.BLUR" });
+      },
       style: {
         position: "relative"
       }
@@ -346,11 +380,12 @@ function connect(state, send, normalize) {
       id: dom.getContentId(state.context),
       dir: state.context.dir,
       "data-placement": currentPlacement,
+      "data-state": isOpen ? "open" : "closed",
       hidden: !isOpen
     }),
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = (0, import_color_utils3.getColorAreaGradient)(value, {
+      const { areaStyles } = (0, import_color_utils3.getColorAreaGradient)(areaValue, {
         xChannel,
         yChannel,
         dir: state.context.dir
@@ -380,7 +415,7 @@ function connect(state, send, normalize) {
     },
     getAreaBackgroundProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = (0, import_color_utils3.getColorAreaGradient)(value, {
+      const { areaGradientStyles } = (0, import_color_utils3.getColorAreaGradient)(areaValue, {
         xChannel,
         yChannel,
         dir: state.context.dir
@@ -399,25 +434,35 @@ function connect(state, send, normalize) {
     getAreaThumbProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
       const channel = { xChannel, yChannel };
-      const x = value.getChannelValuePercent(xChannel);
-      const y = 1 - value.getChannelValuePercent(yChannel);
+      const xPercent = areaValue.getChannelValuePercent(xChannel);
+      const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      const xValue = areaValue.getChannelValue(xChannel);
+      const yValue = areaValue.getChannelValue(yChannel);
       return normalize.element({
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
         tabIndex: isDisabled ? void 0 : 0,
         "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
-        role: "presentation",
+        role: "slider",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": xValue,
+        "aria-label": `${xChannel} and ${yChannel}`,
+        "aria-roledescription": "2d slider",
+        "aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
         style: {
           position: "absolute",
-          left: `${x * 100}%`,
-          top: `${y * 100}%`,
+          left: `${xPercent * 100}%`,
+          top: `${yPercent * 100}%`,
           transform: "translate(-50%, -50%)",
           touchAction: "none",
           forcedColorAdjust: "none",
-          background: value.withChannelValue("alpha", 1).toString("css")
+          background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
+          if (!isInteractive)
+            return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
@@ -511,15 +556,15 @@ function connect(state, send, normalize) {
             orientation,
             channel,
             dir: state.context.dir,
-            value
+            value: areaValue
           })
         }
       });
     },
     getChannelSliderThumbProps(props) {
       const { orientation = "horizontal", channel } = props;
-      const { minValue, maxValue, step: stepValue } = value.getChannelRange(channel);
-      const channelValue = value.getChannelValue(channel);
+      const { minValue, maxValue, step: stepValue } = areaValue.getChannelRange(channel);
+      const channelValue = areaValue.getChannelValue(channel);
       const offset = (channelValue - minValue) / (maxValue - minValue);
       const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
       return normalize.element({
@@ -536,10 +581,11 @@ function connect(state, send, normalize) {
         "aria-valuemax": maxValue,
         "aria-valuemin": minValue,
         "aria-valuenow": channelValue,
+        "aria-valuetext": `${channel} ${channelValue}`,
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: getChannelDisplayColor(value, channel).toString("css"),
+          background: getChannelDisplayColor(areaValue, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -598,6 +644,8 @@ function connect(state, send, normalize) {
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
+        spellCheck: false,
+        autoComplete: "off",
         disabled: isDisabled,
         "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
         readOnly: state.context.readOnly,
@@ -606,7 +654,7 @@ function connect(state, send, normalize) {
         max: range?.maxValue,
         step: range?.step,
         onBeforeInput(event) {
-          if (isTextField)
+          if (isTextField || !isInteractive)
             return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
@@ -614,14 +662,20 @@ function connect(state, send, normalize) {
           }
         },
         onFocus(event) {
+          if (!isInteractive)
+            return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
+          if (!isInteractive)
+            return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
+          if (!isInteractive)
+            return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
@@ -660,42 +714,86 @@ function connect(state, send, normalize) {
       ...parts.swatchGroup.attrs,
       role: "group"
     }),
+    getSwatchTriggerState,
     getSwatchTriggerProps(props) {
-      const { value: valueProp } = props;
-      const color = (0, import_color_utils3.normalizeColor)(valueProp).toFormat(value.getFormat());
+      const triggerState = getSwatchTriggerState(props);
       return normalize.button({
         ...parts.swatchTrigger.attrs,
-        disabled: isDisabled,
+        disabled: triggerState.isDisabled,
         dir: state.context.dir,
         type: "button",
-        "data-value": color.toString("hex"),
+        "aria-label": `select ${triggerState.valueAsString} as the color`,
+        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-value": triggerState.valueAsString,
+        "data-disabled": (0, import_dom_query2.dataAttr)(triggerState.isDisabled),
         onClick() {
-          if (!isInteractive)
+          if (triggerState.isDisabled)
             return;
-          send({ type: "VALUE.SET", value: color });
+          send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value });
         },
         style: {
           position: "relative"
         }
       });
     },
+    getSwatchIndicatorProps(props) {
+      const triggerState = getSwatchTriggerState(props);
+      return normalize.element({
+        ...parts.swatchIndicator.attrs,
+        dir: state.context.dir,
+        hidden: !triggerState.isChecked
+      });
+    },
     getSwatchProps(props) {
-      const { value: valueProp, respectAlpha = true } = props;
-      const colorValue = (0, import_color_utils3.normalizeColor)(valueProp);
-      const color = colorValue.toFormat(value.getFormat());
+      const { respectAlpha = true } = props;
+      const triggerState = getSwatchTriggerState(props);
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
-        "data-state": colorValue.isEqual(value) ? "selected" : "unselected",
-        "data-value": color.toString("hex"),
+        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-value": triggerState.valueAsString,
         style: {
           position: "relative",
-          background: color.toString(respectAlpha ? "css" : "hex")
+          background: triggerState.value.toString(respectAlpha ? "css" : "hex")
         }
       });
-    }
+    },
+    formatTriggerProps: normalize.button({
+      ...parts.formatTrigger.attrs,
+      dir: state.context.dir,
+      type: "button",
+      "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
+      onClick(event) {
+        if (event.currentTarget.disabled)
+          return;
+        const nextFormat = getNextFormat(state.context.format);
+        send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
+      }
+    }),
+    formatSelectProps: normalize.select({
+      ...parts.formatSelect.attrs,
+      "aria-label": "change color format",
+      dir: state.context.dir,
+      defaultValue: state.context.format,
+      disabled: isDisabled,
+      onChange(event) {
+        const format = assertFormat(event.currentTarget.value);
+        send({ type: "FORMAT.SET", format, src: "format-select" });
+      }
+    })
   };
 }
+var formats = ["hsba", "hsla", "rgba"];
+var formatRegex = new RegExp(`^(${formats.join("|")})$`);
+function getNextFormat(format) {
+  const index = formats.indexOf(format);
+  return formats[index + 1] ?? formats[0];
+}
+function assertFormat(format) {
+  if (formatRegex.test(format))
+    return format;
+  throw new Error(`Unsupported color format: ${format}`);
+}
 
 // src/color-picker.machine.ts
 var import_color_utils5 = require("@zag-js/color-utils");
@@ -710,13 +808,8 @@ var import_utils2 = require("@zag-js/utils");
 
 // src/color-picker.parse.ts
 var import_color_utils4 = require("@zag-js/color-utils");
-var parse = (color) => {
-  const value = (0, import_color_utils4.parseColor)(color);
-  const colorFormat = value.getFormat();
-  const lockedFormat = colorFormat === "hsla" ? "hsla" : "hsba";
-  const result = value.toFormat(lockedFormat);
-  result.outputFormat = colorFormat;
-  return result;
+var parse = (colorString) => {
+  return (0, import_color_utils4.parseColor)(colorString);
 };
 
 // src/color-picker.machine.ts
@@ -729,13 +822,14 @@ function machine(userContext) {
       context: {
         dir: "ltr",
         value: parse("#000000"),
+        format: "rgba",
         disabled: false,
+        closeOnSelect: false,
         ...ctx,
         activeId: null,
         activeChannel: null,
         activeOrientation: null,
         fieldsetDisabled: false,
-        autoFocus: true,
         positioning: {
           ...ctx.positioning,
           placement: "bottom"
@@ -745,22 +839,30 @@ function machine(userContext) {
         isRtl: (ctx2) => ctx2.dir === "rtl",
         isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        valueAsString: (ctx2) => {
-          const color = ctx2.value.outputFormat ? ctx2.value.toFormat(ctx2.value.outputFormat) : ctx2.value;
-          return color.toString("css");
+        valueAsString: (ctx2) => ctx2.value.toString(ctx2.format),
+        areaValue: (ctx2) => {
+          const format = ctx2.format.startsWith("hsl") ? "hsla" : "hsba";
+          return ctx2.value.toFormat(format);
         }
       },
       activities: ["trackFormControl"],
       watch: {
         value: ["syncInputElements"],
+        format: ["syncFormatSelectElement"],
         open: ["toggleVisibility"]
       },
       on: {
         "VALUE.SET": {
           actions: ["setValue"]
         },
+        "FORMAT.SET": {
+          actions: ["setFormat"]
+        },
         "CHANNEL_INPUT.CHANGE": {
           actions: ["setChannelColorFromInput"]
+        },
+        "EYEDROPPER.CLICK": {
+          actions: ["openEyeDropper"]
         }
       },
       states: {
@@ -798,6 +900,9 @@ function machine(userContext) {
             "CHANNEL_INPUT.BLUR": {
               target: "idle",
               actions: ["setChannelColorFromInput"]
+            },
+            "TRIGGER.BLUR": {
+              target: "idle"
             }
           }
         },
@@ -809,9 +914,6 @@ function machine(userContext) {
               target: "idle",
               actions: ["invokeOnClose"]
             },
-            "EYEDROPPER.CLICK": {
-              actions: ["openEyeDropper"]
-            },
             "AREA.POINTER_DOWN": {
               target: "open:dragging",
               actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
@@ -885,7 +987,17 @@ function machine(userContext) {
             CLOSE: {
               target: "idle",
               actions: ["invokeOnClose"]
-            }
+            },
+            "SWATCH_TRIGGER.CLICK": [
+              {
+                guard: "closeOnSelect",
+                target: "focused",
+                actions: ["setValue", "setReturnFocus", "invokeOnClose"]
+              },
+              {
+                actions: ["setValue"]
+              }
+            ]
           }
         },
         "open:dragging": {
@@ -928,7 +1040,8 @@ function machine(userContext) {
     },
     {
       guards: {
-        isTargetFocusable: (_ctx, evt) => evt.restoreFocus
+        isTargetFocusable: (_ctx, evt) => evt.restoreFocus,
+        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect
       },
       activities: {
         trackPositioning(ctx2) {
@@ -1023,9 +1136,9 @@ function machine(userContext) {
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
           if (!percent)
             return;
-          const xValue = ctx2.value.getChannelPercentValue(xChannel, percent.x);
-          const yValue = ctx2.value.getChannelPercentValue(yChannel, 1 - percent.y);
-          const color = ctx2.value.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+          const xValue = ctx2.areaValue.getChannelPercentValue(xChannel, percent.x);
+          const yValue = ctx2.areaValue.getChannelPercentValue(yChannel, 1 - percent.y);
+          const color = ctx2.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
           set.value(ctx2, color);
         },
         setChannelColorFromPoint(ctx2, evt) {
@@ -1035,13 +1148,16 @@ function machine(userContext) {
             return;
           const orientation = ctx2.activeOrientation || "horizontal";
           const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
-          const value = ctx2.value.getChannelPercentValue(channel, channelPercent);
-          const color = ctx2.value.withChannelValue(channel, value);
+          const value = ctx2.areaValue.getChannelPercentValue(channel, channelPercent);
+          const color = ctx2.areaValue.withChannelValue(channel, value);
           set.value(ctx2, color);
         },
         setValue(ctx2, evt) {
           set.value(ctx2, evt.value);
         },
+        setFormat(ctx2, evt) {
+          set.format(ctx2, evt.format);
+        },
         syncInputElements(ctx2) {
           sync.inputs(ctx2);
         },
@@ -1051,26 +1167,22 @@ function machine(userContext) {
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;
           const currentAlpha = ctx2.value.getChannelValue("alpha");
+          let color;
           if (channel === "alpha") {
             let valueAsNumber = parseFloat(value);
             valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
-            const newColor = ctx2.value.withChannelValue("alpha", valueAsNumber);
-            set.value(ctx2, newColor);
-            return;
-          }
-          if (isTextField) {
-            const color2 = (0, import_utils2.tryCatch)(
+            color = ctx2.value.withChannelValue("alpha", valueAsNumber);
+          } else if (isTextField) {
+            color = (0, import_utils2.tryCatch)(
               () => parse(value).withChannelValue("alpha", currentAlpha),
               () => ctx2.value
             );
-            const inputEls = dom.getChannelInputEl(ctx2, channel);
-            inputEls.forEach((inputEl) => {
-              dom.setValue(inputEl, getChannelValue(color2, channel));
-            });
-            set.value(ctx2, color2);
-            return;
+          } else {
+            const current = ctx2.value.toFormat(ctx2.format);
+            const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
+            color = current.withChannelValue(channel, valueAsNumber);
           }
-          const color = ctx2.value.toFormat(ctx2.value.outputFormat).withChannelValue(channel, value);
+          sync.inputs(ctx2, color);
           set.value(ctx2, color);
         },
         incrementChannel(ctx2, evt) {
@@ -1083,22 +1195,22 @@ function machine(userContext) {
         },
         incrementXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
-          const color = ctx2.value.incrementChannel(xChannel, evt.step);
+          const color = ctx2.areaValue.incrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
         decrementXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
-          const color = ctx2.value.decrementChannel(xChannel, evt.step);
+          const color = ctx2.areaValue.decrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
         incrementYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
-          const color = ctx2.value.incrementChannel(yChannel, evt.step);
+          const color = ctx2.areaValue.incrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
         decrementYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
-          const color = ctx2.value.decrementChannel(yChannel, evt.step);
+          const color = ctx2.areaValue.decrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
         setChannelToMax(ctx2, evt) {
@@ -1131,6 +1243,9 @@ function machine(userContext) {
             dom?.focus(ctx2, dom.getTriggerEl(ctx2));
           });
         },
+        syncFormatSelectElement(ctx2) {
+          sync.formatSelect(ctx2);
+        },
         invokeOnOpen(ctx2) {
           ctx2.onOpenChange?.({ open: true });
         },
@@ -1148,41 +1263,56 @@ function machine(userContext) {
   );
 }
 var sync = {
-  inputs(ctx) {
+  // sync channel inputs
+  inputs(ctx, color) {
     const channelInputs = dom.getChannelInputEls(ctx);
-    channelInputs.forEach((inputEl) => {
-      const channel = inputEl.dataset.channel;
-      dom.setValue(inputEl, getChannelValue(ctx.value, channel));
+    (0, import_dom_query3.raf)(() => {
+      channelInputs.forEach((inputEl) => {
+        const channel = inputEl.dataset.channel;
+        dom.setValue(inputEl, getChannelValue(color || ctx.value, channel));
+      });
+    });
+  },
+  // sync format select
+  formatSelect(ctx) {
+    const selectEl = dom.getFormatSelectEl(ctx);
+    (0, import_dom_query3.raf)(() => {
+      dom.setValue(selectEl, ctx.format);
     });
   }
 };
 var invoke = {
   changeEnd(ctx) {
+    const value = ctx.value.toFormat(ctx.format);
     ctx.onValueChangeEnd?.({
-      value: ctx.value,
+      value,
       valueAsString: ctx.valueAsString
     });
   },
   change(ctx) {
+    const value = ctx.value.toFormat(ctx.format);
     ctx.onValueChange?.({
-      value: ctx.value,
+      value,
       valueAsString: ctx.valueAsString
     });
     (0, import_form_utils.dispatchInputValueEvent)(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
+  },
+  formatChange(ctx) {
+    ctx.onFormatChange?.({ format: ctx.format });
   }
 };
 var set = {
   value(ctx, color) {
     if (!color || ctx.value.isEqual(color))
       return;
-    const currentFormat = ctx.value.getFormat();
-    const outputColor = color.toFormat(currentFormat);
-    try {
-      outputColor.outputFormat = ctx.value.outputFormat;
-    } catch {
-    }
-    ctx.value = outputColor;
+    ctx.value = color;
     invoke.change(ctx);
+  },
+  format(ctx, format) {
+    if (ctx.format === format)
+      return;
+    ctx.format = format;
+    invoke.formatChange(ctx);
   }
 };
 // Annotate the CommonJS export names for ESM import in node: