@zag-js/color-picker 0.23.0 → 0.25.0

package/dist/index.mjs

@@ -1,26 +1,29 @@
 // src/color-picker.anatomy.ts
 import { createAnatomy } from "@zag-js/anatomy";
 var anatomy = createAnatomy("color-picker", [
+  "root",
+  "label",
+  "control",
+  "trigger",
+  "positioner",
+  "content",
   "area",
   "areaThumb",
-  "areaGradient",
+  "areaBackground",
+  "channelSlider",
   "channelSliderTrack",
-  "channelSliderTrackBackground",
   "channelSliderThumb",
   "channelInput",
+  "transparencyGrid",
+  "swatchGroup",
+  "swatchTrigger",
   "swatch",
-  "swatchBackground",
-  "content",
-  "label",
   "eyeDropperTrigger"
 ]);
 var parts = anatomy.build();
 
 // src/color-picker.connect.ts
-import {
-  getColorAreaGradient,
-  normalizeColor
-} from "@zag-js/color-utils";
+import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
 import {
   getEventKey,
   getEventPoint,
@@ -29,21 +32,29 @@ import {
   isLeftClick,
   isModifiedEvent
 } from "@zag-js/dom-event";
-import { dataAttr, raf } from "@zag-js/dom-query";
+import { dataAttr, query } from "@zag-js/dom-query";
+import { getPlacementStyles } from "@zag-js/popper";
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 
 // src/color-picker.dom.ts
 import { getRelativePoint } from "@zag-js/dom-event";
 import { createScope, queryAll } from "@zag-js/dom-query";
+import { getFirstFocusable } from "@zag-js/tabbable";
+import { runIfFn } from "@zag-js/utils";
 var dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
+  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
+  getControlId: (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`,
+  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`,
   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`,
-  getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
+  getChannelSliderId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
   getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
   getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
   getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
   getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
   getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
@@ -57,8 +68,11 @@ var dom = createScope({
     const { percent } = getRelativePoint(point, areaEl);
     return percent;
   },
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
+    return dom.getById(ctx, dom.getChannelSliderId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
@@ -68,62 +82,22 @@ var dom = createScope({
     return percent;
   },
   getChannelInputEls: (ctx) => {
-    return queryAll(dom.getContentEl(ctx), "input[data-channel]");
+    return [
+      ...queryAll(dom.getContentEl(ctx), "input[data-channel]"),
+      ...queryAll(dom.getControlEl(ctx), "input[data-channel]")
+    ];
+  },
+  getFirstFocusableEl: (ctx) => getFirstFocusable(dom.getContentEl(ctx), "if-empty"),
+  getInitialFocusEl: (ctx) => {
+    let el = runIfFn(ctx.initialFocusEl);
+    if (!el && ctx.autoFocus)
+      el = dom.getFirstFocusableEl(ctx);
+    if (!el)
+      el = dom.getContentEl(ctx);
+    return el;
   }
 });
 
-// src/utils/get-channel-details.ts
-import { getPercentValue, snapValueToStep } from "@zag-js/numeric-range";
-function getChannelDetails(color, xChannel, yChannel) {
-  const channels = color.getColorSpaceAxes({ xChannel, yChannel });
-  const xChannelRange = color.getChannelRange(channels.xChannel);
-  const yChannelRange = color.getChannelRange(channels.yChannel);
-  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
-  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
-  const xValue = color.getChannelValue(channels.xChannel);
-  const yValue = color.getChannelValue(channels.yChannel);
-  return {
-    channels,
-    xChannelStep: stepX,
-    yChannelStep: stepY,
-    xChannelPageStep: pageSizeX,
-    yChannelPageStep: pageSizeY,
-    xValue,
-    yValue,
-    getThumbPosition() {
-      let x = (xValue - minValueX) / (maxValueX - minValueX);
-      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
-      return { x, y };
-    },
-    incrementX(stepSize) {
-      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX);
-    },
-    incrementY(stepSize) {
-      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY);
-    },
-    decrementX(stepSize) {
-      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX);
-    },
-    decrementY(stepSize) {
-      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY);
-    },
-    getColorFromPoint(x, y) {
-      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX);
-      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY);
-      let newColor;
-      if (newXValue !== xValue) {
-        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
-        newColor = color.withChannelValue(channels.xChannel, newXValue);
-      }
-      if (newYValue !== yValue) {
-        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);
-        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-      }
-      return newColor;
-    }
-  };
-}
-
 // src/utils/get-channel-display-color.ts
 import { parseColor } from "@zag-js/color-utils";
 function getChannelDisplayColor(color, channel) {
@@ -146,31 +120,48 @@ function getChannelDisplayColor(color, channel) {
 }
 
 // src/utils/get-channel-input-value.ts
-function getChannelInputValue(color, channel) {
+import { parseColor as parseColor2 } from "@zag-js/color-utils";
+function getChannelValue(color, channel) {
   if (channel == null)
-    return;
+    return "";
+  if (channel === "hex") {
+    return color.toString("hex");
+  }
+  if (channel === "css") {
+    return color.toString("css");
+  }
+  if (channel in color) {
+    return color.getChannelValue(channel).toString();
+  }
+  const isHSL = color.getFormat() === "hsl";
   switch (channel) {
-    case "hex":
-      return color.toString("hex");
-    case "css":
-      return color.toString("css");
     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();
     case "lightness":
-      return color.toFormat("hsl").getChannelValue("lightness").toString();
+      return color.toFormat("hsla").getChannelValue("lightness").toString();
     case "brightness":
-      return color.toFormat("hsb").getChannelValue("brightness").toString();
+      return color.toFormat("hsba").getChannelValue("brightness").toString();
     case "red":
     case "green":
     case "blue":
-      return color.toFormat("rgb").getChannelValue(channel).toString();
+      return color.toFormat("rgba").getChannelValue(channel).toString();
     default:
       return color.getChannelValue(channel).toString();
   }
 }
-function getChannelInputRange(color, channel) {
+function getChannelRange(color, channel) {
   switch (channel) {
     case "hex":
+      const minColor = parseColor2("#000000");
+      const maxColor = parseColor2("#FFFFFF");
+      return {
+        minValue: minColor.toHexInt(),
+        maxValue: maxColor.toHexInt(),
+        pageSize: 10,
+        step: 1
+      };
     case "css":
       return void 0;
     case "hue":
@@ -189,7 +180,7 @@ function getChannelInputRange(color, channel) {
 }
 
 // src/utils/get-slider-background.ts
-function getSliderBgDirection(orientation, dir) {
+function getSliderBackgroundDirection(orientation, dir) {
   if (orientation === "vertical") {
     return "top";
   } else if (dir === "ltr") {
@@ -198,19 +189,18 @@ function getSliderBgDirection(orientation, dir) {
     return "left";
   }
 }
-var getSliderBgImage = (ctx, props) => {
-  const { channel } = props;
-  const dir = getSliderBgDirection(props.orientation, ctx.dir);
-  const value = ctx.valueAsColor;
-  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel);
+var getSliderBackground = (props) => {
+  const { channel, value, dir } = props;
+  const bgDirection = getSliderBackgroundDirection(props.orientation, dir);
+  const { minValue, maxValue } = value.getChannelRange(channel);
   switch (channel) {
     case "hue":
-      return `linear-gradient(to ${dir}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+      return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
     case "lightness": {
-      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString("css");
+      let start = value.withChannelValue(channel, minValue).toString("css");
       let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`;
+      return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`;
     }
     case "saturation":
     case "brightness":
@@ -220,7 +210,7 @@ var getSliderBgImage = (ctx, props) => {
     case "alpha": {
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${end})`;
+      return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
     }
     default:
       throw new Error("Unknown color channel: " + channel);
@@ -229,41 +219,113 @@ var getSliderBgImage = (ctx, props) => {
 
 // src/color-picker.connect.ts
 function connect(state, send, normalize) {
-  const valueAsColor = state.context.valueAsColor;
   const value = state.context.value;
+  const valueAsString = state.context.valueAsString;
   const isDisabled = state.context.isDisabled;
   const isInteractive = state.context.isInteractive;
-  const isDragging = state.matches("dragging");
-  const channels = valueAsColor.getColorChannels();
+  const isDragging = state.hasTag("dragging");
+  const isOpen = state.hasTag("open");
+  const channels = value.getChannels();
+  const getAreaChannels = (props) => {
+    const channels2 = value.getChannels();
+    return {
+      xChannel: props.xChannel ?? channels2[1],
+      yChannel: props.yChannel ?? channels2[2]
+    };
+  };
+  const currentPlacement = state.context.currentPlacement;
+  const popperStyles = getPlacementStyles({
+    ...state.context.positioning,
+    placement: currentPlacement
+  });
   return {
     isDragging,
+    isOpen,
+    valueAsString,
     value,
-    valueAsColor,
-    alpha: valueAsColor.getChannelValue("alpha"),
     channels,
     setColor(value2) {
       send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
     },
-    setChannelValue(channel, value2) {
-      const color = valueAsColor.withChannelValue(channel, value2);
+    getChannelValue(channel) {
+      return getChannelValue(value, channel);
+    },
+    setChannelValue(channel, channelValue) {
+      const color = value.withChannelValue(channel, channelValue);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
+    format: value.outputFormat ?? value.getFormat(),
     setFormat(format) {
-      const value2 = valueAsColor.toFormat(format);
-      send({ type: "VALUE.SET", value: value2, src: "set-format" });
+      const formatValue = value.toFormat(format);
+      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
     },
-    setAlpha(value2) {
-      const color = valueAsColor.withChannelValue("alpha", value2);
+    alpha: value.getChannelValue("alpha"),
+    setAlpha(alphaValue) {
+      const color = value.withChannelValue("alpha", alphaValue);
       send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      dir: state.context.dir,
+      id: dom.getRootId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-readonly": dataAttr(state.context.readOnly),
+      style: {
+        "--value": value.toString("css")
+      }
+    }),
+    labelProps: normalize.element({
+      ...parts.label.attrs,
+      dir: state.context.dir,
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-readonly": dataAttr(state.context.readOnly),
+      onClick(event) {
+        event.preventDefault();
+        const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]");
+        inputEl?.focus({ preventScroll: true });
+      }
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      id: dom.getControlId(state.context),
+      dir: state.context.dir,
+      "data-disabled": dataAttr(isDisabled),
+      "data-readonly": dataAttr(state.context.readOnly)
+    }),
+    triggerProps: normalize.button({
+      ...parts.trigger.attrs,
+      id: dom.getTriggerId(state.context),
+      dir: state.context.dir,
+      "aria-labelledby": dom.getLabelId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-readonly": dataAttr(state.context.readOnly),
+      "data-placement": currentPlacement,
+      type: "button",
+      onClick() {
+        send({ type: "TRIGGER.CLICK" });
+      },
+      style: {
+        position: "relative"
+      }
+    }),
+    positionerProps: normalize.element({
+      ...parts.positioner.attrs,
+      id: dom.getPositionerId(state.context),
+      dir: state.context.dir,
+      style: popperStyles.floating
+    }),
     contentProps: normalize.element({
       ...parts.content.attrs,
       id: dom.getContentId(state.context),
-      dir: state.context.dir
+      dir: state.context.dir,
+      "data-placement": currentPlacement,
+      hidden: !isOpen
     }),
-    getAreaProps(props) {
-      const { xChannel, yChannel } = props;
-      const { areaStyles } = getColorAreaGradient(state.context.valueAsColor, {
+    getAreaProps(props = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props);
+      const { areaStyles } = getColorAreaGradient(value, {
         xChannel,
         yChannel,
         dir: state.context.dir
@@ -281,6 +343,7 @@ function connect(state, send, normalize) {
           const point = getEventPoint(evt);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
+          event.preventDefault();
         },
         style: {
           position: "relative",
@@ -290,15 +353,15 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getAreaGradientProps(props) {
-      const { xChannel, yChannel } = props;
-      const { areaGradientStyles } = getColorAreaGradient(valueAsColor, {
+    getAreaBackgroundProps(props = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props);
+      const { areaGradientStyles } = getColorAreaGradient(value, {
         xChannel,
         yChannel,
         dir: state.context.dir
       });
       return normalize.element({
-        ...parts.areaGradient.attrs,
+        ...parts.areaBackground.attrs,
         id: dom.getAreaGradientId(state.context),
         style: {
           position: "relative",
@@ -308,14 +371,15 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getAreaThumbProps(props) {
-      const { xChannel, yChannel } = props;
-      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel);
-      const { x, y } = getThumbPosition();
+    getAreaThumbProps(props = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props);
       const channel = { xChannel, yChannel };
+      const x = value.getChannelValuePercent(xChannel);
+      const y = 1 - value.getChannelValuePercent(yChannel);
       return normalize.element({
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
+        dir: state.context.dir,
         tabIndex: isDisabled ? void 0 : 0,
         "data-disabled": dataAttr(isDisabled),
         role: "presentation",
@@ -326,13 +390,10 @@ function connect(state, send, normalize) {
           transform: "translate(-50%, -50%)",
           touchAction: "none",
           forcedColorAdjust: "none",
-          background: valueAsColor.withChannelValue("alpha", 1).toString("css")
-        },
-        onBlur() {
-          send("AREA.BLUR");
+          background: value.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          send({ type: "AREA.FOCUS", id: "area" });
+          send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
           if (!isInteractive)
@@ -356,6 +417,9 @@ function connect(state, send, normalize) {
             },
             PageDown() {
               send({ type: "AREA.PAGE_DOWN", channel, step });
+            },
+            Escape(event2) {
+              event2.stopPropagation();
             }
           };
           const exec = keyMap[getEventKey(event, state.context)];
@@ -366,14 +430,31 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getChannelSliderTrackProps(props) {
+    getTransparencyGridProps(props = {}) {
+      const { size = "12px" } = props;
+      return normalize.element({
+        ...parts.transparencyGrid.attrs,
+        style: {
+          "--size": size,
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          backgroundColor: "#fff",
+          backgroundImage: "conic-gradient(#eeeeee 0 25%, transparent 0 50%, #eeeeee 0 75%, transparent 0)",
+          backgroundSize: "var(--size) var(--size)",
+          inset: "0px",
+          zIndex: "auto",
+          pointerEvents: "none"
+        }
+      });
+    },
+    getChannelSliderProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(state.context, channel),
-        role: "group",
+        ...parts.channelSlider.attrs,
         "data-channel": channel,
         "data-orientation": orientation,
+        role: "presentation",
         onPointerDown(event) {
           if (!isInteractive)
             return;
@@ -382,41 +463,38 @@ function connect(state, send, normalize) {
             return;
           const point = getEventPoint(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
+          event.preventDefault();
         },
         style: {
           position: "relative",
-          touchAction: "none",
-          forcedColorAdjust: "none",
-          backgroundImage: getSliderBgImage(state.context, { orientation, channel })
+          touchAction: "none"
         }
       });
     },
-    getChannelSliderBackgroundProps(props) {
+    getChannelSliderTrackProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrackBackground.attrs,
-        "data-orientation": orientation,
+        ...parts.channelSliderTrack.attrs,
+        id: dom.getChannelSliderId(state.context, channel),
+        role: "group",
         "data-channel": channel,
+        "data-orientation": orientation,
         style: {
-          position: "absolute",
-          backgroundColor: "#fff",
-          backgroundImage: [
-            "linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)",
-            "linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)",
-            "linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)",
-            "linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)"
-          ].join(","),
-          backgroundSize: "16px 16px",
-          backgroundPosition: "-2px -2px,-2px 6px,6px -10px,-10px -2px",
-          inset: 0,
-          zIndex: -1
+          position: "relative",
+          forcedColorAdjust: "none",
+          backgroundImage: getSliderBackground({
+            orientation,
+            channel,
+            dir: state.context.dir,
+            value
+          })
         }
       });
     },
     getChannelSliderThumbProps(props) {
       const { orientation = "horizontal", channel } = props;
-      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel);
-      const channelValue = valueAsColor.getChannelValue(channel);
+      const { minValue, maxValue, step: stepValue } = value.getChannelRange(channel);
+      const channelValue = value.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({
@@ -436,7 +514,7 @@ function connect(state, send, normalize) {
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: getChannelDisplayColor(valueAsColor, channel).toString("css"),
+          background: getChannelDisplayColor(value, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -444,11 +522,6 @@ function connect(state, send, normalize) {
             return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
-        onBlur() {
-          if (!isInteractive)
-            return;
-          send({ type: "CHANNEL_SLIDER.BLUR", channel });
-        },
         onKeyDown(event) {
           if (!isInteractive)
             return;
@@ -477,6 +550,9 @@ function connect(state, send, normalize) {
             },
             End() {
               send({ type: "CHANNEL_SLIDER.END", channel });
+            },
+            Escape(event2) {
+              event2.stopPropagation();
             }
           };
           const exec = keyMap[getEventKey(event, state.context)];
@@ -490,7 +566,7 @@ function connect(state, send, normalize) {
     getChannelInputProps(props) {
       const { channel } = props;
       const isTextField = channel === "hex" || channel === "css";
-      const range = getChannelInputRange(valueAsColor, channel);
+      const range = getChannelRange(value, channel);
       return normalize.input({
         ...parts.channelInput.attrs,
         type: isTextField ? "text" : "number",
@@ -500,22 +576,31 @@ function connect(state, send, normalize) {
         "data-disabled": dataAttr(isDisabled),
         readOnly: state.context.readOnly,
         id: dom.getChannelInputId(state.context, channel),
-        defaultValue: getChannelInputValue(valueAsColor, channel),
+        defaultValue: getChannelValue(value, channel),
         min: range?.minValue,
         max: range?.maxValue,
         step: range?.step,
+        onBeforeInput(event) {
+          if (isTextField)
+            return;
+          const value2 = event.currentTarget.value;
+          if (value2.match(/[^0-9.]/g)) {
+            event.preventDefault();
+          }
+        },
         onFocus(event) {
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
-          raf(() => event.target.select());
+          event.target.select();
         },
         onBlur(event) {
-          const value2 = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
+          const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
+          send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
           if (event.key === "Enter") {
-            const value2 = event.currentTarget.value;
+            const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
+            event.preventDefault();
           }
         },
         style: {
@@ -531,14 +616,11 @@ function connect(state, send, normalize) {
       name: state.context.name,
       id: dom.getHiddenInputId(state.context),
       style: visuallyHiddenStyle,
-      defaultValue: value,
-      onChange(event) {
-        const value2 = event.currentTarget.value;
-        send({ type: "VALUE.SET", value: value2, src: "input.change" });
-      }
+      defaultValue: valueAsString
     }),
     eyeDropperTriggerProps: normalize.button({
       ...parts.eyeDropperTrigger.attrs,
+      type: "button",
       disabled: isDisabled,
       "data-disabled": dataAttr(isDisabled),
       "aria-label": "Pick a color from the screen",
@@ -548,43 +630,39 @@ function connect(state, send, normalize) {
         send("EYEDROPPER.CLICK");
       }
     }),
-    getSwatchBackgroundProps(props) {
-      const { value: value2 } = props;
-      const alpha = normalizeColor(value2).getChannelValue("alpha");
-      return normalize.element({
-        ...parts.swatchBackground.attrs,
-        "data-alpha": alpha,
+    swatchGroupProps: normalize.element({
+      ...parts.swatchGroup.attrs,
+      role: "group"
+    }),
+    getSwatchTriggerProps(props) {
+      const { value: valueProp } = props;
+      const color = normalizeColor(valueProp).toFormat(value.getFormat());
+      return normalize.button({
+        ...parts.swatchTrigger.attrs,
+        disabled: isDisabled,
+        type: "button",
+        "data-value": color.toString("hex"),
+        onClick() {
+          if (!isInteractive)
+            return;
+          send({ type: "VALUE.SET", value: color });
+        },
         style: {
-          width: "100%",
-          height: "100%",
-          background: "#fff",
-          backgroundImage: [
-            "linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)",
-            "linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)",
-            "linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)",
-            "linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)"
-          ].join(","),
-          backgroundPosition: "-2px -2px,-2px 6px,6px -10px,-10px -2px",
-          backgroundSize: "16px 16px",
-          position: "absolute",
-          inset: "0px",
-          zIndex: -1
+          position: "relative"
         }
       });
     },
     getSwatchProps(props) {
-      const { value: value2, readOnly } = props;
-      const color = normalizeColor(value2).toFormat(valueAsColor.getColorFormat());
+      const { value: valueProp, respectAlpha = true } = props;
+      const colorValue = normalizeColor(valueProp);
+      const color = colorValue.toFormat(value.getFormat());
       return normalize.element({
         ...parts.swatch.attrs,
-        onClick() {
-          if (readOnly || !isInteractive)
-            return;
-          send({ type: "VALUE.SET", value: color });
-        },
+        "data-state": colorValue.isEqual(value) ? "selected" : "unselected",
+        "data-value": color.toString("hex"),
         style: {
           position: "relative",
-          background: color.toString("css")
+          background: color.toString(respectAlpha ? "css" : "hex")
         }
       });
     }
@@ -592,86 +670,145 @@ function connect(state, send, normalize) {
 }
 
 // src/color-picker.machine.ts
-import { parseColor as parseColor2 } from "@zag-js/color-utils";
-import { createMachine } from "@zag-js/core";
+import { parseColor as parseColor4 } from "@zag-js/color-utils";
+import { createMachine, guards, ref as ref2 } from "@zag-js/core";
+import { trackDismissableElement } from "@zag-js/dismissable";
 import { trackPointerMove } from "@zag-js/dom-event";
-import { raf as raf2 } from "@zag-js/dom-query";
-import { trackFormControl } from "@zag-js/form-utils";
-import { clampValue, getPercentValue as getPercentValue2, snapValueToStep as snapValueToStep2 } from "@zag-js/numeric-range";
+import { raf } from "@zag-js/dom-query";
+import { dispatchInputValueEvent, trackFormControl } from "@zag-js/form-utils";
+import { getPlacement } from "@zag-js/popper";
 import { disableTextSelection } from "@zag-js/text-selection";
 import { compact, tryCatch } from "@zag-js/utils";
+
+// src/color-picker.parse.ts
+import { parseColor as parseColor3 } from "@zag-js/color-utils";
+import { ref } from "@zag-js/core";
+var parse = (color) => {
+  const value = parseColor3(color);
+  const colorFormat = value.getFormat();
+  const lockedFormat = colorFormat.startsWith("hsl") ? "hsla" : "hsba";
+  const result = value.toFormat(lockedFormat);
+  result.outputFormat = colorFormat;
+  return ref(result);
+};
+
+// src/color-picker.machine.ts
+var { stateIn } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
     {
       id: "color-picker",
-      initial: "idle",
+      initial: ctx.open ? "open" : "idle",
       context: {
         dir: "ltr",
-        value: "#D9D9D9",
+        value: parse("#000000"),
         disabled: false,
         ...ctx,
         activeId: null,
         activeChannel: null,
         activeOrientation: null,
-        fieldsetDisabled: false
+        fieldsetDisabled: false,
+        autoFocus: true,
+        positioning: {
+          ...ctx.positioning,
+          placement: "bottom"
+        }
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
         isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        valueAsColor: (ctx2) => parseColor2(ctx2.value)
+        valueAsString: (ctx2) => {
+          const color = ctx2.value.outputFormat ? ctx2.value.toFormat(ctx2.value.outputFormat) : ctx2.value;
+          return color.toString("css");
+        }
+      },
+      activities: ["trackFormControl"],
+      watch: {
+        valueAsString: ["syncInputElements"],
+        open: ["toggleVisibility"]
       },
       on: {
         "VALUE.SET": {
           actions: ["setValue"]
+        },
+        "CHANNEL_INPUT.FOCUS": [
+          {
+            guard: stateIn("idle"),
+            target: "focused",
+            actions: ["setActiveChannel"]
+          },
+          {
+            actions: ["setActiveChannel"]
+          }
+        ],
+        "CHANNEL_INPUT.BLUR": [
+          {
+            guard: stateIn("focused"),
+            target: "idle",
+            actions: ["setChannelColorFromInput"]
+          },
+          {
+            actions: ["setChannelColorFromInput"]
+          }
+        ],
+        "CHANNEL_INPUT.CHANGE": {
+          actions: ["setChannelColorFromInput"]
         }
       },
-      activities: ["trackFormControl"],
-      watch: {
-        value: ["syncInputElements"]
-      },
       states: {
         idle: {
+          tags: ["closed"],
           on: {
+            OPEN: {
+              target: "open",
+              actions: ["setInitialFocus", "invokeOnOpen"]
+            },
+            "TRIGGER.CLICK": {
+              target: "open",
+              actions: ["setInitialFocus", "invokeOnOpen"]
+            }
+          }
+        },
+        focused: {
+          tags: ["closed", "focused"],
+          on: {
+            OPEN: {
+              target: "open",
+              actions: ["setInitialFocus", "invokeOnOpen"]
+            },
+            "TRIGGER.CLICK": {
+              target: "open",
+              actions: ["setInitialFocus", "invokeOnOpen"]
+            }
+          }
+        },
+        open: {
+          tags: ["open"],
+          activities: ["trackPositioning", "trackDismissableElement"],
+          on: {
+            "TRIGGER.CLICK": {
+              target: "idle",
+              actions: ["invokeOnClose"]
+            },
             "EYEDROPPER.CLICK": {
               actions: ["openEyeDropper"]
             },
             "AREA.POINTER_DOWN": {
-              target: "dragging",
+              target: "open:dragging",
               actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
             },
             "AREA.FOCUS": {
-              target: "focused",
               actions: ["setActiveChannel"]
             },
             "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
+              target: "open:dragging",
               actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
             },
             "CHANNEL_SLIDER.FOCUS": {
-              target: "focused",
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.FOCUS": {
-              target: "focused",
               actions: ["setActiveChannel"]
             },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            }
-          }
-        },
-        focused: {
-          on: {
-            "AREA.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
             "AREA.ARROW_LEFT": {
               actions: ["decrementXChannel"]
             },
@@ -714,44 +851,100 @@ function machine(userContext) {
             "CHANNEL_SLIDER.END": {
               actions: ["setChannelToMax"]
             },
-            "CHANNEL_INPUT.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.CHANGE": {
-              actions: ["setChannelColorFromInput"]
-            },
-            "CHANNEL_SLIDER.BLUR": {
-              target: "idle"
-            },
-            "AREA.BLUR": {
-              target: "idle"
+            INTERACT_OUTSIDE: [
+              {
+                guard: "shouldRestoreFocus",
+                target: "focused",
+                actions: ["setReturnFocus", "invokeOnClose"]
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            CLOSE: {
+              target: "idle",
+              actions: ["invokeOnClose"]
             }
           }
         },
-        dragging: {
+        "open:dragging": {
+          tags: ["open"],
           exit: ["clearActiveChannel"],
-          activities: ["trackPointerMove", "disableTextSelection"],
+          activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
           on: {
             "AREA.POINTER_MOVE": {
-              actions: ["setAreaColorFromPoint"]
+              actions: ["setAreaColorFromPoint", "focusAreaThumb"]
             },
             "AREA.POINTER_UP": {
-              target: "focused",
+              target: "open",
               actions: ["invokeOnChangeEnd"]
             },
             "CHANNEL_SLIDER.POINTER_MOVE": {
-              actions: ["setChannelColorFromPoint"]
+              actions: ["setChannelColorFromPoint", "focusChannelThumb"]
             },
             "CHANNEL_SLIDER.POINTER_UP": {
-              target: "focused",
+              target: "open",
               actions: ["invokeOnChangeEnd"]
+            },
+            INTERACT_OUTSIDE: [
+              {
+                guard: "shouldRestoreFocus",
+                target: "focused",
+                actions: ["setReturnFocus", "invokeOnClose"]
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            CLOSE: {
+              target: "idle",
+              actions: ["invokeOnClose"]
             }
           }
         }
       }
     },
     {
+      guards: {
+        isTargetFocusable: (_ctx, evt) => evt.restoreFocus
+      },
       activities: {
+        trackPositioning(ctx2) {
+          ctx2.currentPlacement = ctx2.positioning.placement;
+          const anchorEl = dom.getTriggerEl(ctx2);
+          const getPositionerEl = () => dom.getPositionerEl(ctx2);
+          return getPlacement(anchorEl, getPositionerEl, {
+            ...ctx2.positioning,
+            defer: true,
+            onComplete(data) {
+              ctx2.currentPlacement = data.placement;
+            },
+            onCleanup() {
+              ctx2.currentPlacement = void 0;
+            }
+          });
+        },
+        trackDismissableElement(ctx2, _evt, { send }) {
+          const getContentEl = () => dom.getContentEl(ctx2);
+          let restoreFocus = true;
+          return trackDismissableElement(getContentEl, {
+            exclude: dom.getTriggerEl(ctx2),
+            defer: true,
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (event.defaultPrevented)
+                return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+            },
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onFocusOutside: ctx2.onFocusOutside,
+            onDismiss() {
+              send({ type: "INTERACT_OUTSIDE", restoreFocus });
+            }
+          });
+        },
         trackFormControl(ctx2, _evt, { send, initialContext }) {
           const inputEl = dom.getHiddenInputEl(ctx2);
           return trackFormControl(inputEl, {
@@ -787,20 +980,18 @@ function machine(userContext) {
           const win = dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.valueAsColor.getColorFormat();
-            const color = parseColor2(sRGBHex).toFormat(format);
+            const format = ctx2.value.getFormat();
+            const color = parseColor4(sRGBHex).toFormat(format);
             set.value(ctx2, color);
-            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsColor: color });
+            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsString: ctx2.valueAsString });
           }).catch(() => void 0);
         },
         setActiveChannel(ctx2, evt) {
           ctx2.activeId = evt.id;
-          if (evt.channel) {
+          if (evt.channel)
             ctx2.activeChannel = evt.channel;
-          }
-          if (evt.orientation) {
+          if (evt.orientation)
             ctx2.activeOrientation = evt.orientation;
-          }
         },
         clearActiveChannel(ctx2) {
           ctx2.activeChannel = null;
@@ -812,10 +1003,9 @@ function machine(userContext) {
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
           if (!percent)
             return;
-          const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = getColorFromPoint(percent.x, percent.y);
-          if (!color)
-            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);
           set.value(ctx2, color);
         },
         setChannelColorFromPoint(ctx2, evt) {
@@ -823,24 +1013,17 @@ function machine(userContext) {
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
           if (!percent)
             return;
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
           const orientation = ctx2.activeOrientation || "horizontal";
-          const point = orientation === "horizontal" ? percent.x : percent.y;
-          const channelValue = getPercentValue2(point, minValue, maxValue, step);
-          const value = snapValueToStep2(channelValue - step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
-          set.value(ctx2, newColor);
+          const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
+          const value = ctx2.value.getChannelPercentValue(channel, channelPercent);
+          const color = ctx2.value.withChannelValue(channel, value);
+          set.value(ctx2, color);
         },
         setValue(ctx2, evt) {
           set.value(ctx2, evt.value);
         },
         syncInputElements(ctx2) {
-          const inputs = dom.getChannelInputEls(ctx2);
-          inputs.forEach((input) => {
-            const channel = input.dataset.channel;
-            dom.setValue(input, getChannelInputValue(ctx2.valueAsColor, channel));
-          });
-          dom.setValue(dom.getHiddenInputEl(ctx2), ctx2.value);
+          sync.inputs(ctx2);
         },
         invokeOnChangeEnd(ctx2) {
           invoke.changeEnd(ctx2);
@@ -848,112 +1031,141 @@ function machine(userContext) {
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;
           if (channel === "alpha") {
-            const newColor2 = ctx2.valueAsColor.withChannelValue("alpha", value);
-            set.value(ctx2, newColor2);
+            const newColor = ctx2.value.withChannelValue("alpha", parseFloat(value));
+            set.value(ctx2, newColor);
             return;
           }
           if (isTextField) {
-            const format = "hsl";
-            const currentAlpha = ctx2.valueAsColor.getChannelValue("alpha");
-            const newColor2 = tryCatch(
-              () => parseColor2(value).toFormat(format).withChannelValue("alpha", currentAlpha),
-              () => ctx2.valueAsColor
+            const currentAlpha = ctx2.value.getChannelValue("alpha");
+            const color2 = tryCatch(
+              () => parse(value).withChannelValue("alpha", currentAlpha),
+              () => ctx2.value
             );
             const inputEl = dom.getChannelInputEl(ctx2, channel);
-            dom.setValue(inputEl, getChannelInputValue(ctx2.valueAsColor, channel));
-            set.value(ctx2, newColor2);
+            dom.setValue(inputEl, getChannelValue(color2, channel));
+            set.value(ctx2, color2);
             return;
           }
-          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
-          set.value(ctx2, newColor);
+          const color = ctx2.value.toFormat(ctx2.value.outputFormat).withChannelValue(channel, value);
+          set.value(ctx2, color);
         },
         incrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = snapValueToStep2(channelValue + evt.step, minValue, maxValue, step);
-          const color = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
+          const color = ctx2.value.incrementChannel(evt.channel, evt.step);
           set.value(ctx2, color);
         },
         decrementChannel(ctx2, evt) {
-          const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
-          const value = snapValueToStep2(channelValue - evt.step, minValue, maxValue, step);
-          const color = ctx2.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue));
+          const color = ctx2.value.decrementChannel(evt.channel, evt.step);
           set.value(ctx2, color);
         },
         incrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
+          const { xChannel } = evt.channel;
+          const color = ctx2.value.incrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
         decrementXChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
+          const { xChannel } = evt.channel;
+          const color = ctx2.value.decrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
         incrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { incrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
+          const { yChannel } = evt.channel;
+          const color = ctx2.value.incrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
         decrementYChannel(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel;
-          const { decrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const color = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
+          const { yChannel } = evt.channel;
+          const color = ctx2.value.decrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
         setChannelToMax(ctx2, evt) {
-          const { maxValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const color = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
+          const range = ctx2.value.getChannelRange(evt.channel);
+          const color = ctx2.value.withChannelValue(evt.channel, range.maxValue);
           set.value(ctx2, color);
         },
         setChannelToMin(ctx2, evt) {
-          const { minValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const color = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
+          const range = ctx2.value.getChannelRange(evt.channel);
+          const color = ctx2.value.withChannelValue(evt.channel, range.minValue);
           set.value(ctx2, color);
         },
         focusAreaThumb(ctx2) {
-          raf2(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
+          raf(() => {
+            dom?.focus(ctx2, dom.getAreaThumbEl(ctx2));
           });
         },
         focusChannelThumb(ctx2, evt) {
-          raf2(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
+          raf(() => {
+            dom?.focus(ctx2, dom.getChannelSliderThumbEl(ctx2, evt.channel));
+          });
+        },
+        setInitialFocus(ctx2) {
+          raf(() => {
+            dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
           });
+        },
+        setReturnFocus(ctx2) {
+          raf(() => {
+            dom?.focus(ctx2, dom.getTriggerEl(ctx2));
+          });
+        },
+        invokeOnOpen(ctx2) {
+          ctx2.onOpenChange?.({ open: true });
+        },
+        invokeOnClose(ctx2) {
+          ctx2.onOpenChange?.({ open: false });
+        },
+        toggleVisibility(ctx2, _evt, { send }) {
+          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
+      },
+      compareFns: {
+        value: (a, b) => a.isEqual(b)
       }
     }
   );
 }
+var sync = {
+  inputs(ctx) {
+    const channelInputs = dom.getChannelInputEls(ctx);
+    channelInputs.forEach((inputEl) => {
+      const channel = inputEl.dataset.channel;
+      dom.setValue(inputEl, getChannelValue(ctx.value, channel));
+    });
+  }
+};
 var invoke = {
   changeEnd(ctx) {
     ctx.onValueChangeEnd?.({
       value: ctx.value,
-      valueAsColor: ctx.valueAsColor
+      valueAsString: ctx.valueAsString
     });
   },
   change(ctx) {
     ctx.onValueChange?.({
       value: ctx.value,
-      valueAsColor: ctx.valueAsColor
+      valueAsString: ctx.valueAsString
     });
+    dispatchInputValueEvent(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
   }
 };
 var set = {
   value(ctx, color) {
-    if (ctx.valueAsColor.isEqual(color))
+    sync.inputs(ctx);
+    if (!color || ctx.value.isEqual(color))
       return;
-    ctx.value = color.toString("css");
+    const currentFormat = ctx.value.getFormat();
+    const outputColor = color.toFormat(currentFormat);
+    try {
+      outputColor.outputFormat = ctx.value.outputFormat;
+    } catch {
+    }
+    ctx.value = ref2(outputColor);
     invoke.change(ctx);
   }
 };
 export {
   anatomy,
   connect,
-  machine
+  machine,
+  parse
 };
 //# sourceMappingURL=index.mjs.map