@zag-js/color-picker 0.82.2 → 1.0.1

package/dist/index.js

@@ -7,6 +7,7 @@ var popper = require('@zag-js/popper');
 var core = require('@zag-js/core');
 var dismissable = require('@zag-js/dismissable');
 var utils = require('@zag-js/utils');
+var types = require('@zag-js/types');
 
 // src/color-picker.anatomy.ts
 var anatomy = anatomy$1.createAnatomy("color-picker", [
@@ -36,58 +37,47 @@ var anatomy = anatomy$1.createAnatomy("color-picker", [
   "formatSelect"
 ]);
 var parts = anatomy.build();
-var dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `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) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`,
-  getFormatSelectId: (ctx) => ctx.ids?.formatSelect ?? `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`,
-  getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  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)),
-  getChannelInputEl: (ctx, channel) => {
-    const selector = `input[data-channel="${channel}"]`;
-    return [
-      ...domQuery.queryAll(dom.getContentEl(ctx), selector),
-      ...domQuery.queryAll(dom.getControlEl(ctx), selector)
-    ];
-  },
-  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) {
-    const areaEl = dom.getAreaEl(ctx);
-    if (!areaEl) return;
-    const { percent } = domQuery.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));
-  },
-  getChannelSliderValueFromPoint(ctx, point, channel) {
-    const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
-    if (!trackEl) return;
-    const { percent } = domQuery.getRelativePoint(point, trackEl);
-    return percent;
-  },
-  getChannelInputEls: (ctx) => {
-    return [
-      ...domQuery.queryAll(dom.getContentEl(ctx), "input[data-channel]"),
-      ...domQuery.queryAll(dom.getControlEl(ctx), "input[data-channel]")
-    ];
-  }
-});
+var getRootId = (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`;
+var getControlId = (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`;
+var getContentId = (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`;
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`;
+var getFormatSelectId = (ctx) => ctx.ids?.formatSelect ?? `color-picker:${ctx.id}:format-select`;
+var getAreaId = (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`;
+var getAreaGradientId = (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`;
+var getAreaThumbId = (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`;
+var getChannelSliderTrackId = (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`;
+var getChannelSliderThumbId = (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`;
+var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+var getAreaThumbEl = (ctx) => ctx.getById(getAreaThumbId(ctx));
+var getChannelSliderThumbEl = (ctx, channel) => ctx.getById(getChannelSliderThumbId(ctx, channel));
+var getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
+var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
+var getAreaValueFromPoint = (ctx, point) => {
+  const areaEl = getAreaEl(ctx);
+  if (!areaEl) return;
+  const { percent } = domQuery.getRelativePoint(point, areaEl);
+  return percent;
+};
+var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+var getChannelSliderTrackEl = (ctx, channel) => ctx.getById(getChannelSliderTrackId(ctx, channel));
+var getChannelSliderValueFromPoint = (ctx, point, channel) => {
+  const trackEl = getChannelSliderTrackEl(ctx, channel);
+  if (!trackEl) return;
+  const { percent } = domQuery.getRelativePoint(point, trackEl);
+  return percent;
+};
+var getChannelInputEls = (ctx) => {
+  return [
+    ...domQuery.queryAll(getContentEl(ctx), "input[data-channel]"),
+    ...domQuery.queryAll(getControlEl(ctx), "input[data-channel]")
+  ];
+};
 function getChannelDisplayColor(color, channel) {
   switch (channel) {
     case "hue":
@@ -173,8 +163,8 @@ function getSliderBackgroundDirection(orientation, dir) {
     return "left";
   }
 }
-var getSliderBackground = (props) => {
-  const { channel, value, dir, orientation } = props;
+var getSliderBackground = (props2) => {
+  const { channel, value, dir, orientation } = props2;
   const bgDirection = getSliderBackgroundDirection(orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
   switch (channel) {
@@ -202,34 +192,36 @@ 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 disabled = state.context.isDisabled;
-  const interactive = state.context.isInteractive;
+function connect(service, normalize) {
+  const { context, send, prop, computed, state, scope } = service;
+  const value = context.get("value");
+  const format = context.get("format");
+  const areaValue = computed("areaValue");
+  const valueAsString = computed("valueAsString");
+  const disabled = computed("disabled");
+  const interactive = computed("interactive");
   const dragging = state.hasTag("dragging");
   const open = state.hasTag("open");
   const focused = state.hasTag("focused");
-  const getAreaChannels = (props) => {
+  const getAreaChannels = (props2) => {
     const channels = areaValue.getChannels();
     return {
-      xChannel: props.xChannel ?? channels[1],
-      yChannel: props.yChannel ?? channels[2]
+      xChannel: props2.xChannel ?? channels[1],
+      yChannel: props2.yChannel ?? channels[2]
     };
   };
-  const currentPlacement = state.context.currentPlacement;
+  const currentPlacement = context.get("currentPlacement");
   const popperStyles = popper.getPlacementStyles({
-    ...state.context.positioning,
+    ...prop("positioning"),
     placement: currentPlacement
   });
-  function getSwatchTriggerState(props) {
-    const color = colorUtils.normalizeColor(props.value).toFormat(state.context.format);
+  function getSwatchTriggerState(props2) {
+    const color = colorUtils.normalizeColor(props2.value).toFormat(context.get("format"));
     return {
       value: color,
       valueAsString: color.toString("hex"),
       checked: color.isEqual(value),
-      disabled: props.disabled || !interactive
+      disabled: props2.disabled || !interactive
     };
   }
   return {
@@ -254,9 +246,9 @@ function connect(state, send, normalize) {
       const color = value.withChannelValue(channel, channelValue);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
-    format: state.context.format,
-    setFormat(format) {
-      const formatValue = value.toFormat(format);
+    format: context.get("format"),
+    setFormat(format2) {
+      const formatValue = value.toFormat(format2);
       send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
     },
     alpha: value.getChannelValue("alpha"),
@@ -267,11 +259,11 @@ function connect(state, send, normalize) {
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context),
+        dir: prop("dir"),
+        id: getRootId(scope),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         style: {
           "--value": value.toString("css")
         }
@@ -280,16 +272,16 @@ function connect(state, send, normalize) {
     getLabelProps() {
       return normalize.element({
         ...parts.label.attrs,
-        dir: state.context.dir,
-        id: dom.getLabelId(state.context),
-        htmlFor: dom.getHiddenInputId(state.context),
+        dir: prop("dir"),
+        id: getLabelId(scope),
+        htmlFor: getHiddenInputId(scope),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         "data-focus": domQuery.dataAttr(focused),
         onClick(event) {
           event.preventDefault();
-          const inputEl = domQuery.query(dom.getControlEl(state.context), "[data-channel=hex]");
+          const inputEl = domQuery.query(getControlEl(scope), "[data-channel=hex]");
           inputEl?.focus({ preventScroll: true });
         }
       });
@@ -297,11 +289,11 @@ function connect(state, send, normalize) {
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
-        id: dom.getControlId(state.context),
-        dir: state.context.dir,
+        id: getControlId(scope),
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         "data-state": open ? "open" : "closed",
         "data-focus": domQuery.dataAttr(focused)
       });
@@ -309,15 +301,15 @@ function connect(state, send, normalize) {
     getTriggerProps() {
       return normalize.button({
         ...parts.trigger.attrs,
-        id: dom.getTriggerId(state.context),
-        dir: state.context.dir,
+        id: getTriggerId(scope),
+        dir: prop("dir"),
         disabled,
         "aria-label": `select color. current color is ${valueAsString}`,
-        "aria-controls": dom.getContentId(state.context),
-        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-controls": getContentId(scope),
+        "aria-labelledby": getLabelId(scope),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         "data-placement": currentPlacement,
         "aria-expanded": domQuery.dataAttr(open),
         "data-state": open ? "open" : "closed",
@@ -339,16 +331,16 @@ function connect(state, send, normalize) {
     getPositionerProps() {
       return normalize.element({
         ...parts.positioner.attrs,
-        id: dom.getPositionerId(state.context),
-        dir: state.context.dir,
+        id: getPositionerId(scope),
+        dir: prop("dir"),
         style: popperStyles.floating
       });
     },
     getContentProps() {
       return normalize.element({
         ...parts.content.attrs,
-        id: dom.getContentId(state.context),
-        dir: state.context.dir,
+        id: getContentId(scope),
+        dir: prop("dir"),
         "data-placement": currentPlacement,
         "data-state": open ? "open" : "closed",
         hidden: !open
@@ -357,25 +349,25 @@ function connect(state, send, normalize) {
     getValueTextProps() {
       return normalize.element({
         ...parts.valueText.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-focus": domQuery.dataAttr(focused)
       });
     },
-    getAreaProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
+    getAreaProps(props2 = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props2);
       const { areaStyles } = colorUtils.getColorAreaGradient(areaValue, {
         xChannel,
         yChannel,
-        dir: state.context.dir
+        dir: prop("dir")
       });
       return normalize.element({
         ...parts.area.attrs,
-        id: dom.getAreaId(state.context),
+        id: getAreaId(scope),
         role: "group",
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
         onPointerDown(event) {
           if (!interactive) return;
           if (!domQuery.isLeftClick(event)) return;
@@ -393,19 +385,19 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getAreaBackgroundProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
+    getAreaBackgroundProps(props2 = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props2);
       const { areaGradientStyles } = colorUtils.getColorAreaGradient(areaValue, {
         xChannel,
         yChannel,
-        dir: state.context.dir
+        dir: prop("dir")
       });
       return normalize.element({
         ...parts.areaBackground.attrs,
-        id: dom.getAreaGradientId(state.context),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        id: getAreaGradientId(scope),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
         style: {
           position: "relative",
           touchAction: "none",
@@ -414,8 +406,8 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getAreaThumbProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
+    getAreaThumbProps(props2 = {}) {
+      const { xChannel, yChannel } = getAreaChannels(props2);
       const channel = { xChannel, yChannel };
       const xPercent = areaValue.getChannelValuePercent(xChannel);
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
@@ -424,12 +416,12 @@ function connect(state, send, normalize) {
       const color = areaValue.withChannelValue("alpha", 1).toString("css");
       return normalize.element({
         ...parts.areaThumb.attrs,
-        id: dom.getAreaThumbId(state.context),
-        dir: state.context.dir,
+        id: getAreaThumbId(scope),
+        dir: prop("dir"),
         tabIndex: disabled ? void 0 : 0,
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -478,7 +470,9 @@ function connect(state, send, normalize) {
               event2.stopPropagation();
             }
           };
-          const exec = keyMap[domQuery.getEventKey(event, state.context)];
+          const exec = keyMap[domQuery.getEventKey(event, {
+            dir: prop("dir")
+          })];
           if (exec) {
             exec(event);
             event.preventDefault();
@@ -486,8 +480,8 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getTransparencyGridProps(props = {}) {
-      const { size = "12px" } = props;
+    getTransparencyGridProps(props2 = {}) {
+      const { size = "12px" } = props2;
       return normalize.element({
         ...parts.transparencyGrid.attrs,
         style: {
@@ -504,8 +498,8 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getChannelSliderProps(props) {
-      const { orientation = "horizontal", channel, format } = props;
+    getChannelSliderProps(props2) {
+      const { orientation = "horizontal", channel, format: format2 } = props2;
       return normalize.element({
         ...parts.channelSlider.attrs,
         "data-channel": channel,
@@ -516,7 +510,7 @@ function connect(state, send, normalize) {
           if (!domQuery.isLeftClick(event)) return;
           if (domQuery.isModifierKey(event)) return;
           const point = domQuery.getEventPoint(event);
-          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, format, point, id: channel, orientation });
+          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, format: format2, point, id: channel, orientation });
           event.preventDefault();
         },
         style: {
@@ -525,12 +519,12 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getChannelSliderTrackProps(props) {
-      const { orientation = "horizontal", channel, format } = props;
-      const normalizedValue = format ? value.toFormat(format) : areaValue;
+    getChannelSliderTrackProps(props2) {
+      const { orientation = "horizontal", channel, format: format2 } = props2;
+      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
       return normalize.element({
         ...parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(state.context, channel),
+        id: getChannelSliderTrackId(scope, channel),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -540,22 +534,22 @@ function connect(state, send, normalize) {
           backgroundImage: getSliderBackground({
             orientation,
             channel,
-            dir: state.context.dir,
+            dir: prop("dir"),
             value: normalizedValue
           })
         }
       });
     },
-    getChannelSliderLabelProps(props) {
-      const { channel } = props;
+    getChannelSliderLabelProps(props2) {
+      const { channel } = props2;
       return normalize.element({
         ...parts.channelSliderLabel.attrs,
         "data-channel": channel,
         onClick(event) {
           if (!interactive) return;
           event.preventDefault();
-          const thumbId = dom.getChannelSliderThumbId(state.context, channel);
-          dom.getById(state.context, thumbId)?.focus({ preventScroll: true });
+          const thumbId = getChannelSliderThumbId(scope, channel);
+          scope.getById(thumbId)?.focus({ preventScroll: true });
         },
         style: {
           userSelect: "none",
@@ -563,22 +557,22 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getChannelSliderValueTextProps(props) {
+    getChannelSliderValueTextProps(props2) {
       return normalize.element({
         ...parts.channelSliderValueText.attrs,
-        "data-channel": props.channel
+        "data-channel": props2.channel
       });
     },
-    getChannelSliderThumbProps(props) {
-      const { orientation = "horizontal", channel, format } = props;
-      const normalizedValue = format ? value.toFormat(format) : areaValue;
+    getChannelSliderThumbProps(props2) {
+      const { orientation = "horizontal", channel, format: format2 } = props2;
+      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
       const channelRange = normalizedValue.getChannelRange(channel);
       const channelValue = normalizedValue.getChannelValue(channel);
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
       const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
       return normalize.element({
         ...parts.channelSliderThumb.attrs,
-        id: dom.getChannelSliderThumbId(state.context, channel),
+        id: getChannelSliderThumbId(scope, channel),
         role: "slider",
         "aria-label": channel,
         tabIndex: disabled ? void 0 : 0,
@@ -634,7 +628,9 @@ function connect(state, send, normalize) {
               event2.stopPropagation();
             }
           };
-          const exec = keyMap[domQuery.getEventKey(event, state.context)];
+          const exec = keyMap[domQuery.getEventKey(event, {
+            dir: prop("dir")
+          })];
           if (exec) {
             exec(event);
             event.preventDefault();
@@ -642,13 +638,13 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getChannelInputProps(props) {
-      const { channel } = props;
+    getChannelInputProps(props2) {
+      const { channel } = props2;
       const isTextField = channel === "hex" || channel === "css";
       const channelRange = getChannelRange(value, channel);
       return normalize.input({
         ...parts.channelInput.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
@@ -656,9 +652,9 @@ function connect(state, send, normalize) {
         autoComplete: "off",
         disabled,
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
-        readOnly: state.context.readOnly,
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
+        readOnly: prop("readOnly"),
         defaultValue: getChannelValue(value, channel),
         min: channelRange?.minValue,
         max: channelRange?.maxValue,
@@ -700,11 +696,11 @@ function connect(state, send, normalize) {
       return normalize.input({
         type: "text",
         disabled,
-        name: state.context.name,
+        name: prop("name"),
         tabIndex: -1,
-        readOnly: state.context.readOnly,
-        required: state.context.required,
-        id: dom.getHiddenInputId(state.context),
+        readOnly: prop("readOnly"),
+        required: prop("required"),
+        id: getHiddenInputId(scope),
         style: domQuery.visuallyHiddenStyle,
         defaultValue: valueAsString
       });
@@ -713,15 +709,15 @@ function connect(state, send, normalize) {
       return normalize.button({
         ...parts.eyeDropperTrigger.attrs,
         type: "button",
-        dir: state.context.dir,
+        dir: prop("dir"),
         disabled,
         "data-disabled": domQuery.dataAttr(disabled),
-        "data-invalid": domQuery.dataAttr(state.context.invalid),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(prop("invalid")),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
         "aria-label": "Pick a color from the screen",
         onClick() {
           if (!interactive) return;
-          send("EYEDROPPER.CLICK");
+          send({ type: "EYEDROPPER.CLICK" });
         }
       });
     },
@@ -732,12 +728,12 @@ function connect(state, send, normalize) {
       });
     },
     getSwatchTriggerState,
-    getSwatchTriggerProps(props) {
-      const swatchState = getSwatchTriggerState(props);
+    getSwatchTriggerProps(props2) {
+      const swatchState = getSwatchTriggerState(props2);
       return normalize.button({
         ...parts.swatchTrigger.attrs,
         disabled: swatchState.disabled,
-        dir: state.context.dir,
+        dir: prop("dir"),
         type: "button",
         "aria-label": `select ${swatchState.valueAsString} as the color`,
         "data-state": swatchState.checked ? "checked" : "unchecked",
@@ -753,21 +749,21 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getSwatchIndicatorProps(props) {
-      const swatchState = getSwatchTriggerState(props);
+    getSwatchIndicatorProps(props2) {
+      const swatchState = getSwatchTriggerState(props2);
       return normalize.element({
         ...parts.swatchIndicator.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         hidden: !swatchState.checked
       });
     },
-    getSwatchProps(props) {
-      const { respectAlpha = true } = props;
-      const swatchState = getSwatchTriggerState(props);
+    getSwatchProps(props2) {
+      const { respectAlpha = true } = props2;
+      const swatchState = getSwatchTriggerState(props2);
       const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
         ...parts.swatch.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
         style: {
@@ -780,12 +776,12 @@ function connect(state, send, normalize) {
     getFormatTriggerProps() {
       return normalize.button({
         ...parts.formatTrigger.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         type: "button",
-        "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
+        "aria-label": `change color format to ${getNextFormat(format)}`,
         onClick(event) {
           if (event.currentTarget.disabled) return;
-          const nextFormat = getNextFormat(state.context.format);
+          const nextFormat = getNextFormat(format);
           send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
         }
       });
@@ -794,12 +790,12 @@ function connect(state, send, normalize) {
       return normalize.select({
         ...parts.formatSelect.attrs,
         "aria-label": "change color format",
-        dir: state.context.dir,
-        defaultValue: state.context.format,
+        dir: prop("dir"),
+        defaultValue: prop("format"),
         disabled,
         onChange(event) {
-          const format = assertFormat(event.currentTarget.value);
-          send({ type: "FORMAT.SET", format, src: "format-select" });
+          const format2 = assertFormat(event.currentTarget.value);
+          send({ type: "FORMAT.SET", format: format2, src: "format-select" });
         }
       });
     }
@@ -820,594 +816,648 @@ var parse = (colorString) => {
 };
 
 // src/color-picker.machine.ts
-var { and } = core.guards;
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "color-picker",
-      initial: ctx.open ? "open" : "idle",
-      context: {
-        dir: "ltr",
-        value: parse("#000000"),
-        format: "rgba",
-        disabled: false,
-        closeOnSelect: false,
-        openAutoFocus: true,
-        ...ctx,
-        activeId: null,
-        activeChannel: null,
-        activeOrientation: null,
-        fieldsetDisabled: false,
-        restoreFocus: true,
-        positioning: {
-          ...ctx.positioning,
-          placement: "bottom"
-        }
-      },
-      computed: {
-        isRtl: (ctx2) => ctx2.dir === "rtl",
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
-        isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        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"]
+var { and } = core.createGuards();
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      dir: "ltr",
+      defaultValue: parse("#000000"),
+      defaultFormat: "rgba",
+      openAutoFocus: true,
+      ...props2,
+      positioning: {
+        placement: "bottom",
+        ...props2.positioning
+      }
+    };
+  },
+  initialState({ prop }) {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "idle";
+  },
+  context({ prop, bindable, getContext, scope }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        isEqual(a, b) {
+          return a.toString("css") === b?.toString("css");
         },
-        "EYEDROPPER.CLICK": {
-          actions: ["openEyeDropper"]
+        hash(a) {
+          return a.toString("css");
         },
-        "SWATCH_TRIGGER.CLICK": {
-          actions: ["setValue"]
+        onChange(value) {
+          const ctx = getContext();
+          const valueAsString = value.toString(ctx.get("format"));
+          prop("onValueChange")?.({ value, valueAsString });
+          domQuery.dispatchInputValueEvent(getHiddenInputEl(scope), { value: valueAsString });
         }
-      },
-      states: {
-        idle: {
-          tags: ["closed"],
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open",
-              actions: ["setInitialFocus"]
-            },
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "CHANNEL_INPUT.FOCUS": {
-              target: "focused",
-              actions: ["setActiveChannel"]
-            }
-          }
-        },
-        focused: {
-          tags: ["closed", "focused"],
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open",
-              actions: ["setInitialFocus"]
-            },
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "CHANNEL_INPUT.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.BLUR": {
-              target: "idle",
-              actions: ["setChannelColorFromInput"]
-            },
-            "TRIGGER.BLUR": {
-              target: "idle"
-            }
-          }
+      })),
+      format: bindable(() => ({
+        defaultValue: prop("defaultFormat"),
+        value: prop("format"),
+        onChange(format) {
+          prop("onFormatChange")?.({ format });
+        }
+      })),
+      activeId: bindable(() => ({ defaultValue: null })),
+      activeChannel: bindable(() => ({ defaultValue: null })),
+      activeOrientation: bindable(() => ({ defaultValue: null })),
+      fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+      restoreFocus: bindable(() => ({ defaultValue: true })),
+      currentPlacement: bindable(() => ({
+        defaultValue: void 0
+      }))
+    };
+  },
+  computed: {
+    rtl: ({ prop }) => prop("dir") === "rtl",
+    disabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+    interactive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+    valueAsString: ({ context }) => context.get("value").toString(context.get("format")),
+    areaValue: ({ context }) => {
+      const format = context.get("format").startsWith("hsl") ? "hsla" : "hsba";
+      return context.get("value").toFormat(format);
+    }
+  },
+  effects: ["trackFormControl"],
+  watch({ prop, context, action, track }) {
+    track([() => context.hash("value")], () => {
+      action(["syncInputElements"]);
+    });
+    track([() => context.get("format")], () => {
+      action(["syncFormatSelectElement"]);
+    });
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"]
+    },
+    "FORMAT.SET": {
+      actions: ["setFormat"]
+    },
+    "CHANNEL_INPUT.CHANGE": {
+      actions: ["setChannelColorFromInput"]
+    },
+    "EYEDROPPER.CLICK": {
+      actions: ["openEyeDropper"]
+    },
+    "SWATCH_TRIGGER.CLICK": {
+      actions: ["setValue"]
+    }
+  },
+  states: {
+    idle: {
+      tags: ["closed"],
+      on: {
+        "CONTROLLED.OPEN": {
+          target: "open",
+          actions: ["setInitialFocus"]
         },
-        open: {
-          tags: ["open"],
-          activities: ["trackPositioning", "trackDismissableElement"],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["setReturnFocus"]
-              },
-              {
-                target: "idle"
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "AREA.POINTER_DOWN": {
-              target: "open:dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "AREA.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "open:dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_SLIDER.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "AREA.ARROW_LEFT": {
-              actions: ["decrementAreaXChannel"]
-            },
-            "AREA.ARROW_RIGHT": {
-              actions: ["incrementAreaXChannel"]
-            },
-            "AREA.ARROW_UP": {
-              actions: ["incrementAreaYChannel"]
-            },
-            "AREA.ARROW_DOWN": {
-              actions: ["decrementAreaYChannel"]
-            },
-            "AREA.PAGE_UP": {
-              actions: ["incrementAreaXChannel"]
-            },
-            "AREA.PAGE_DOWN": {
-              actions: ["decrementAreaXChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_LEFT": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_RIGHT": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.HOME": {
-              actions: ["setChannelToMin"]
-            },
-            "CHANNEL_SLIDER.END": {
-              actions: ["setChannelToMax"]
-            },
-            "CHANNEL_INPUT.BLUR": {
-              actions: ["setChannelColorFromInput"]
-            },
-            INTERACT_OUTSIDE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["invokeOnClose", "setReturnFocus"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "SWATCH_TRIGGER.CLICK": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["setValue", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["setValue", "invokeOnClose", "setReturnFocus"]
-              },
-              {
-                actions: ["setValue"]
-              }
-            ]
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
           }
-        },
-        "open:dragging": {
-          tags: ["open"],
-          exit: ["clearActiveChannel"],
-          activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["setReturnFocus"]
-              },
-              {
-                target: "idle"
-              }
-            ],
-            "AREA.POINTER_MOVE": {
-              actions: ["setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "AREA.POINTER_UP": {
-              target: "open",
-              actions: ["invokeOnChangeEnd"]
-            },
-            "CHANNEL_SLIDER.POINTER_MOVE": {
-              actions: ["setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_UP": {
-              target: "open",
-              actions: ["invokeOnChangeEnd"]
-            },
-            INTERACT_OUTSIDE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["invokeOnClose", "setReturnFocus"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ]
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
           }
+        ],
+        "CHANNEL_INPUT.FOCUS": {
+          target: "focused",
+          actions: ["setActiveChannel"]
         }
       }
     },
-    {
-      guards: {
-        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
-        shouldRestoreFocus: (ctx2) => !!ctx2.restoreFocus
-      },
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement || (ctx2.currentPlacement = ctx2.positioning.placement);
-          const anchorEl = dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return popper.getPlacement(anchorEl, getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return dismissable.trackDismissableElement(getContentEl, {
-            exclude: dom.getTriggerEl(ctx2),
-            defer: true,
-            onInteractOutside(event) {
-              ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented) return;
-              ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            },
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onFocusOutside: ctx2.onFocusOutside,
-            onDismiss() {
-              send({ type: "INTERACT_OUTSIDE" });
-            }
-          });
+    focused: {
+      tags: ["closed", "focused"],
+      on: {
+        "CONTROLLED.OPEN": {
+          target: "open",
+          actions: ["setInitialFocus"]
         },
-        trackFormControl(ctx2, _evt, { send, initialContext }) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          return domQuery.trackFormControl(inputEl, {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
-            }
-          });
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
+          }
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus"]
+          }
+        ],
+        "CHANNEL_INPUT.FOCUS": {
+          actions: ["setActiveChannel"]
         },
-        trackPointerMove(ctx2, evt, { send }) {
-          return domQuery.trackPointerMove(dom.getDoc(ctx2), {
-            onPointerMove({ point }) {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point, format: evt.format });
-            },
-            onPointerUp() {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
-              send({ type });
-            }
-          });
+        "CHANNEL_INPUT.BLUR": {
+          target: "idle",
+          actions: ["setChannelColorFromInput"]
         },
-        disableTextSelection(ctx2) {
-          return domQuery.disableTextSelection({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
+        "TRIGGER.BLUR": {
+          target: "idle"
         }
-      },
-      actions: {
-        openEyeDropper(ctx2) {
-          const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported) return;
-          const win = dom.getWin(ctx2);
-          const picker = new win.EyeDropper();
-          picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.value.getFormat();
-            const color = colorUtils.parseColor(sRGBHex).toFormat(format);
-            set.value(ctx2, color);
-            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsString: ctx2.valueAsString });
-          }).catch(() => void 0);
-        },
-        setActiveChannel(ctx2, evt) {
-          ctx2.activeId = evt.id;
-          if (evt.channel) ctx2.activeChannel = evt.channel;
-          if (evt.orientation) ctx2.activeOrientation = evt.orientation;
-        },
-        clearActiveChannel(ctx2) {
-          ctx2.activeChannel = null;
-          ctx2.activeId = null;
-          ctx2.activeOrientation = null;
+      }
+    },
+    open: {
+      tags: ["open"],
+      effects: ["trackPositioning", "trackDismissableElement"],
+      on: {
+        "CONTROLLED.CLOSE": [
+          {
+            guard: "shouldRestoreFocus",
+            target: "focused",
+            actions: ["setReturnFocus"]
+          },
+          {
+            target: "idle"
+          }
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "AREA.POINTER_DOWN": {
+          target: "open:dragging",
+          actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
         },
-        setAreaColorFromPoint(ctx2, evt) {
-          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
-          const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
-          const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          if (!percent) return;
-          const xValue = normalizedValue.getChannelPercentValue(xChannel, percent.x);
-          const yValue = normalizedValue.getChannelPercentValue(yChannel, 1 - percent.y);
-          const color = normalizedValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
-          set.value(ctx2, color);
+        "AREA.FOCUS": {
+          actions: ["setActiveChannel"]
         },
-        setChannelColorFromPoint(ctx2, evt) {
-          const channel = evt.channel || ctx2.activeId;
-          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
-          const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          if (!percent) return;
-          const orientation = ctx2.activeOrientation || "horizontal";
-          const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
-          const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
-          const color = normalizedValue.withChannelValue(channel, value);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.POINTER_DOWN": {
+          target: "open:dragging",
+          actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
         },
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
+        "CHANNEL_SLIDER.FOCUS": {
+          actions: ["setActiveChannel"]
         },
-        setFormat(ctx2, evt) {
-          set.format(ctx2, evt.format);
+        "AREA.ARROW_LEFT": {
+          actions: ["decrementAreaXChannel"]
         },
-        syncInputElements(ctx2) {
-          sync.inputs(ctx2);
+        "AREA.ARROW_RIGHT": {
+          actions: ["incrementAreaXChannel"]
         },
-        invokeOnChangeEnd(ctx2) {
-          invoke.changeEnd(ctx2);
+        "AREA.ARROW_UP": {
+          actions: ["incrementAreaYChannel"]
         },
-        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;
-            color = ctx2.value.withChannelValue("alpha", valueAsNumber);
-          } else if (isTextField) {
-            color = utils.tryCatch(
-              () => parse(value).withChannelValue("alpha", currentAlpha),
-              () => ctx2.value
-            );
-          } else {
-            const current = ctx2.value.toFormat(ctx2.format);
-            const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
-            color = current.withChannelValue(channel, valueAsNumber);
-          }
-          sync.inputs(ctx2, color);
-          set.value(ctx2, color);
+        "AREA.ARROW_DOWN": {
+          actions: ["decrementAreaYChannel"]
         },
-        incrementChannel(ctx2, evt) {
-          const color = ctx2.value.incrementChannel(evt.channel, evt.step);
-          set.value(ctx2, color);
+        "AREA.PAGE_UP": {
+          actions: ["incrementAreaXChannel"]
         },
-        decrementChannel(ctx2, evt) {
-          const color = ctx2.value.decrementChannel(evt.channel, evt.step);
-          set.value(ctx2, color);
+        "AREA.PAGE_DOWN": {
+          actions: ["decrementAreaXChannel"]
         },
-        incrementAreaXChannel(ctx2, evt) {
-          const { xChannel } = evt.channel;
-          const color = ctx2.areaValue.incrementChannel(xChannel, evt.step);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.ARROW_LEFT": {
+          actions: ["decrementChannel"]
         },
-        decrementAreaXChannel(ctx2, evt) {
-          const { xChannel } = evt.channel;
-          const color = ctx2.areaValue.decrementChannel(xChannel, evt.step);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.ARROW_RIGHT": {
+          actions: ["incrementChannel"]
         },
-        incrementAreaYChannel(ctx2, evt) {
-          const { yChannel } = evt.channel;
-          const color = ctx2.areaValue.incrementChannel(yChannel, evt.step);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.ARROW_UP": {
+          actions: ["incrementChannel"]
         },
-        decrementAreaYChannel(ctx2, evt) {
-          const { yChannel } = evt.channel;
-          const color = ctx2.areaValue.decrementChannel(yChannel, evt.step);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.ARROW_DOWN": {
+          actions: ["decrementChannel"]
         },
-        setChannelToMax(ctx2, evt) {
-          const range = ctx2.value.getChannelRange(evt.channel);
-          const color = ctx2.value.withChannelValue(evt.channel, range.maxValue);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.PAGE_UP": {
+          actions: ["incrementChannel"]
         },
-        setChannelToMin(ctx2, evt) {
-          const range = ctx2.value.getChannelRange(evt.channel);
-          const color = ctx2.value.withChannelValue(evt.channel, range.minValue);
-          set.value(ctx2, color);
+        "CHANNEL_SLIDER.PAGE_DOWN": {
+          actions: ["decrementChannel"]
         },
-        focusAreaThumb(ctx2) {
-          domQuery.raf(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
-          });
+        "CHANNEL_SLIDER.HOME": {
+          actions: ["setChannelToMin"]
         },
-        focusChannelThumb(ctx2, evt) {
-          domQuery.raf(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
-          });
+        "CHANNEL_SLIDER.END": {
+          actions: ["setChannelToMax"]
         },
-        setInitialFocus(ctx2) {
-          if (!ctx2.openAutoFocus) return;
-          domQuery.raf(() => {
-            const element = domQuery.getInitialFocus({
-              root: dom.getContentEl(ctx2),
-              getInitialEl: ctx2.initialFocusEl
-            });
-            element?.focus({ preventScroll: true });
-          });
+        "CHANNEL_INPUT.BLUR": {
+          actions: ["setChannelColorFromInput"]
         },
-        setReturnFocus(ctx2) {
-          domQuery.raf(() => {
-            dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
-          });
+        INTERACT_OUTSIDE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            guard: "shouldRestoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "setReturnFocus"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "SWATCH_TRIGGER.CLICK": [
+          {
+            guard: and("isOpenControlled", "closeOnSelect"),
+            actions: ["setValue", "invokeOnClose"]
+          },
+          {
+            guard: "closeOnSelect",
+            target: "focused",
+            actions: ["setValue", "invokeOnClose", "setReturnFocus"]
+          },
+          {
+            actions: ["setValue"]
+          }
+        ]
+      }
+    },
+    "open:dragging": {
+      tags: ["open"],
+      exit: ["clearActiveChannel"],
+      effects: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
+      on: {
+        "CONTROLLED.CLOSE": [
+          {
+            guard: "shouldRestoreFocus",
+            target: "focused",
+            actions: ["setReturnFocus"]
+          },
+          {
+            target: "idle"
+          }
+        ],
+        "AREA.POINTER_MOVE": {
+          actions: ["setAreaColorFromPoint", "focusAreaThumb"]
         },
-        syncFormatSelectElement(ctx2) {
-          sync.formatSelect(ctx2);
+        "AREA.POINTER_UP": {
+          target: "open",
+          actions: ["invokeOnChangeEnd"]
         },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
+        "CHANNEL_SLIDER.POINTER_MOVE": {
+          actions: ["setChannelColorFromPoint", "focusChannelThumb"]
         },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
+        "CHANNEL_SLIDER.POINTER_UP": {
+          target: "open",
+          actions: ["invokeOnChangeEnd"]
         },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
+        INTERACT_OUTSIDE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            guard: "shouldRestoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "setReturnFocus"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
+      isOpenControlled: ({ prop }) => prop("open") != null,
+      shouldRestoreFocus: ({ context }) => !!context.get("restoreFocus")
+    },
+    effects: {
+      trackPositioning({ context, prop, scope }) {
+        if (!context.get("currentPlacement")) {
+          context.set("currentPlacement", prop("positioning")?.placement);
+        }
+        const anchorEl = getTriggerEl(scope);
+        const getPositionerEl2 = () => getPositionerEl(scope);
+        return popper.getPlacement(anchorEl, getPositionerEl2, {
+          ...prop("positioning"),
+          defer: true,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
+      trackDismissableElement({ context, scope, prop, send }) {
+        const getContentEl2 = () => getContentEl(scope);
+        return dismissable.trackDismissableElement(getContentEl2, {
+          exclude: getTriggerEl(scope),
+          defer: true,
+          onInteractOutside(event) {
+            prop("onInteractOutside")?.(event);
+            if (event.defaultPrevented) return;
+            context.set("restoreFocus", !(event.detail.focusable || event.detail.contextmenu));
+          },
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onFocusOutside: prop("onFocusOutside"),
+          onDismiss() {
+            send({ type: "INTERACT_OUTSIDE" });
+          }
+        });
+      },
+      trackFormControl({ context, scope, send }) {
+        const inputEl = getHiddenInputEl(scope);
+        return domQuery.trackFormControl(inputEl, {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            send({ type: "VALUE.SET", value: context.initial("value"), src: "form.reset" });
+          }
+        });
+      },
+      trackPointerMove({ context, scope, event, send }) {
+        return domQuery.trackPointerMove(scope.getDoc(), {
+          onPointerMove({ point }) {
+            const type = context.get("activeId") === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
+            send({ type, point, format: event.format });
+          },
+          onPointerUp() {
+            const type = context.get("activeId") === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
+            send({ type });
+          }
+        });
+      },
+      disableTextSelection({ scope }) {
+        return domQuery.disableTextSelection({
+          doc: scope.getDoc(),
+          target: getContentEl(scope)
+        });
+      }
+    },
+    actions: {
+      openEyeDropper({ scope, context }) {
+        const win = scope.getWin();
+        const isSupported = "EyeDropper" in win;
+        if (!isSupported) return;
+        const picker = new win.EyeDropper();
+        picker.open().then(({ sRGBHex }) => {
+          const format = context.get("value").getFormat();
+          const color = colorUtils.parseColor(sRGBHex).toFormat(format);
+          context.set("value", color);
+        }).catch(() => void 0);
+      },
+      setActiveChannel({ context, event }) {
+        context.set("activeId", event.id);
+        if (event.channel) context.set("activeChannel", event.channel);
+        if (event.orientation) context.set("activeOrientation", event.orientation);
+      },
+      clearActiveChannel({ context }) {
+        context.set("activeChannel", null);
+        context.set("activeId", null);
+        context.set("activeOrientation", null);
+      },
+      setAreaColorFromPoint({ context, event, computed, scope }) {
+        const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+        const { xChannel, yChannel } = event.channel || context.get("activeChannel");
+        const percent = getAreaValueFromPoint(scope, event.point);
+        if (!percent) return;
+        const xValue = v.getChannelPercentValue(xChannel, percent.x);
+        const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y);
+        const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+        context.set("value", color);
+      },
+      setChannelColorFromPoint({ context, event, computed, scope }) {
+        const channel = event.channel || context.get("activeId");
+        const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+        const percent = getChannelSliderValueFromPoint(scope, event.point, channel);
+        if (!percent) return;
+        const orientation = context.get("activeOrientation") || "horizontal";
+        const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
+        const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
+        const color = normalizedValue.withChannelValue(channel, value);
+        context.set("value", color);
+      },
+      setValue({ context, event }) {
+        context.set("value", event.value);
+      },
+      setFormat({ context, event }) {
+        context.set("format", event.format);
+      },
+      syncInputElements({ context, scope }) {
+        syncInputs(scope, context.get("value"));
+      },
+      invokeOnChangeEnd({ context, prop, computed }) {
+        prop("onValueChangeEnd")?.({
+          value: context.get("value"),
+          valueAsString: computed("valueAsString")
+        });
+      },
+      setChannelColorFromInput({ context, event, scope }) {
+        const { channel, isTextField, value } = event;
+        const currentAlpha = context.get("value").getChannelValue("alpha");
+        let color;
+        if (channel === "alpha") {
+          let valueAsNumber = parseFloat(value);
+          valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
+          color = context.get("value").withChannelValue("alpha", valueAsNumber);
+        } else if (isTextField) {
+          color = utils.tryCatch(
+            () => parse(value).withChannelValue("alpha", currentAlpha),
+            () => context.get("value")
+          );
+        } else {
+          const current = context.get("value").toFormat(context.get("format"));
+          const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
+          color = current.withChannelValue(channel, valueAsNumber);
         }
+        syncInputs(scope, context.get("value"), color);
+        context.set("value", color);
+      },
+      incrementChannel({ context, event }) {
+        const color = context.get("value").incrementChannel(event.channel, event.step);
+        context.set("value", color);
+      },
+      decrementChannel({ context, event }) {
+        const color = context.get("value").decrementChannel(event.channel, event.step);
+        context.set("value", color);
+      },
+      incrementAreaXChannel({ context, event, computed }) {
+        const { xChannel } = event.channel;
+        const color = computed("areaValue").incrementChannel(xChannel, event.step);
+        context.set("value", color);
+      },
+      decrementAreaXChannel({ context, event, computed }) {
+        const { xChannel } = event.channel;
+        const color = computed("areaValue").decrementChannel(xChannel, event.step);
+        context.set("value", color);
+      },
+      incrementAreaYChannel({ context, event, computed }) {
+        const { yChannel } = event.channel;
+        const color = computed("areaValue").incrementChannel(yChannel, event.step);
+        context.set("value", color);
+      },
+      decrementAreaYChannel({ context, event, computed }) {
+        const { yChannel } = event.channel;
+        const color = computed("areaValue").decrementChannel(yChannel, event.step);
+        context.set("value", color);
+      },
+      setChannelToMax({ context, event }) {
+        const value = context.get("value");
+        const range = value.getChannelRange(event.channel);
+        const color = value.withChannelValue(event.channel, range.maxValue);
+        context.set("value", color);
+      },
+      setChannelToMin({ context, event }) {
+        const value = context.get("value");
+        const range = value.getChannelRange(event.channel);
+        const color = value.withChannelValue(event.channel, range.minValue);
+        context.set("value", color);
+      },
+      focusAreaThumb({ scope }) {
+        domQuery.raf(() => {
+          getAreaThumbEl(scope)?.focus({ preventScroll: true });
+        });
+      },
+      focusChannelThumb({ event, scope }) {
+        domQuery.raf(() => {
+          getChannelSliderThumbEl(scope, event.channel)?.focus({ preventScroll: true });
+        });
+      },
+      setInitialFocus({ prop, scope }) {
+        if (!prop("openAutoFocus")) return;
+        domQuery.raf(() => {
+          const element = domQuery.getInitialFocus({
+            root: getContentEl(scope),
+            getInitialEl: prop("initialFocusEl")
+          });
+          element?.focus({ preventScroll: true });
+        });
+      },
+      setReturnFocus({ scope }) {
+        domQuery.raf(() => {
+          getTriggerEl(scope)?.focus({ preventScroll: true });
+        });
+      },
+      syncFormatSelectElement({ context, scope }) {
+        syncFormatSelect(scope, context.get("format"));
       },
-      compareFns: {
-        value: (a, b) => a.isEqual(b)
+      invokeOnOpen({ prop }) {
+        prop("onOpenChange")?.({ open: true });
+      },
+      invokeOnClose({ prop }) {
+        prop("onOpenChange")?.({ open: false });
+      },
+      toggleVisibility({ prop, event, send }) {
+        send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event });
       }
     }
-  );
-}
-var sync = {
-  // sync channel inputs
-  inputs(ctx, color) {
-    const channelInputs = dom.getChannelInputEls(ctx);
-    domQuery.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);
-    domQuery.raf(() => {
-      dom.setValue(selectEl, ctx.format);
-    });
   }
-};
-var invoke = {
-  changeEnd(ctx) {
-    const value = ctx.value.toFormat(ctx.format);
-    ctx.onValueChangeEnd?.({
-      value,
-      valueAsString: ctx.valueAsString
-    });
-  },
-  change(ctx) {
-    const value = ctx.value.toFormat(ctx.format);
-    ctx.onValueChange?.({
-      value,
-      valueAsString: ctx.valueAsString
+});
+function syncInputs(scope, currentValue, nextValue) {
+  const channelInputEls = getChannelInputEls(scope);
+  domQuery.raf(() => {
+    channelInputEls.forEach((inputEl) => {
+      const channel = inputEl.dataset.channel;
+      domQuery.setElementValue(inputEl, getChannelValue(nextValue || currentValue, channel));
     });
-    domQuery.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;
-    ctx.value = color;
-    invoke.change(ctx);
-  },
-  format(ctx, format) {
-    if (ctx.format === format) return;
-    ctx.format = format;
-    invoke.formatChange(ctx);
-  }
-};
+  });
+}
+function syncFormatSelect(scope, format) {
+  const selectEl = getFormatSelectEl(scope);
+  if (!selectEl) return;
+  domQuery.raf(() => domQuery.setElementValue(selectEl, format));
+}
+var props = types.createProps()([
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "format",
+  "defaultFormat",
+  "getRootNode",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "name",
+  "positioning",
+  "onFocusOutside",
+  "onFormatChange",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueChangeEnd",
+  "defaultOpen",
+  "open",
+  "positioning",
+  "required",
+  "readOnly",
+  "value",
+  "defaultValue",
+  "invalid",
+  "openAutoFocus"
+]);
+var splitProps = utils.createSplitProps(props);
+var areaProps = types.createProps()(["xChannel", "yChannel"]);
+var splitAreaProps = utils.createSplitProps(areaProps);
+var channelProps = types.createProps()(["channel", "orientation"]);
+var splitChannelProps = utils.createSplitProps(channelProps);
+var swatchTriggerProps = types.createProps()(["value", "disabled"]);
+var splitSwatchTriggerProps = utils.createSplitProps(swatchTriggerProps);
+var swatchProps = types.createProps()(["value", "respectAlpha"]);
+var splitSwatchProps = utils.createSplitProps(swatchProps);
+var transparencyGridProps = types.createProps()(["size"]);
+var splitTransparencyGridProps = utils.createSplitProps(transparencyGridProps);
 
 exports.anatomy = anatomy;
+exports.areaProps = areaProps;
+exports.channelProps = channelProps;
 exports.connect = connect;
 exports.machine = machine;
 exports.parse = parse;
+exports.props = props;
+exports.splitAreaProps = splitAreaProps;
+exports.splitChannelProps = splitChannelProps;
+exports.splitProps = splitProps;
+exports.splitSwatchProps = splitSwatchProps;
+exports.splitSwatchTriggerProps = splitSwatchTriggerProps;
+exports.splitTransparencyGridProps = splitTransparencyGridProps;
+exports.swatchProps = swatchProps;
+exports.swatchTriggerProps = swatchTriggerProps;
+exports.transparencyGridProps = transparencyGridProps;