@zag-js/color-picker 1.41.0 → 2.0.0-next.0

package/dist/color-picker.connect.mjs

@@ -1,5 +1,5 @@
 // src/color-picker.connect.ts
-import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
+import { getColorAreaGradient, isInSrgbGamut, normalizeColor } from "@zag-js/color-utils";
 import { getEventKey, getEventPoint, getEventStep, isLeftClick, isModifierKey } from "@zag-js/dom-query";
 import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
@@ -7,12 +7,14 @@ import { parts } from "./color-picker.anatomy.mjs";
 import * as dom from "./color-picker.dom.mjs";
 import { getChannelDisplayColor } from "./utils/get-channel-display-color.mjs";
 import { getChannelRange, getChannelValue } from "./utils/get-channel-input-value.mjs";
+import { getGamutOverlayData } from "./utils/get-gamut-overlay-path.mjs";
 import { getSliderBackground } from "./utils/get-slider-background.mjs";
 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 stableAreaValue = context.get("areaBaseColor") ?? areaValue;
   const valueAsString = computed("valueAsString");
   const disabled = computed("disabled");
   const readOnly = !!prop("readOnly");
@@ -29,11 +31,21 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
+  function getDefaultDevicePixelRatio() {
+    if (typeof globalThis === "undefined") return 1;
+    const dpr = globalThis.devicePixelRatio;
+    return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
+  }
+  function resolveGamutOverlay(props = {}) {
+    const pixelRatio = props.pixelRatio ?? getDefaultDevicePixelRatio();
+    return getGamutOverlayData(stableAreaValue, getAreaChannels(props), format, { pixelRatio });
+  }
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement
+    placement: currentPlacement,
+    positioned: context.get("positioned")
   });
   function getSwatchTriggerState(props) {
     const color = normalizeColor(props.value).toFormat(context.get("format"));
@@ -49,6 +61,10 @@ function connect(service, normalize) {
     open,
     valueAsString,
     value,
+    isInSrgbGamut: isInSrgbGamut(value),
+    getGamutOverlay(props = {}) {
+      return resolveGamutOverlay(props);
+    },
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
@@ -70,9 +86,8 @@ function connect(service, normalize) {
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
     format: context.get("format"),
-    setFormat(format2) {
-      const formatValue = value.toFormat(format2);
-      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
+    setFormat(nextFormat) {
+      send({ type: "FORMAT.SET", format: nextFormat, src: "set-format" });
     },
     alpha: value.getChannelValue("alpha"),
     setAlpha(alphaValue) {
@@ -81,9 +96,8 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getRootId(scope),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(readOnly),
         "data-invalid": dataAttr(invalid),
@@ -94,7 +108,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.element({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getLabelId(scope),
         htmlFor: dom.getHiddenInputId(scope),
@@ -112,8 +126,7 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...parts.control.attrs,
-        id: dom.getControlId(scope),
+        ...parts.control.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(readOnly),
@@ -124,7 +137,7 @@ function connect(service, normalize) {
     },
     getTriggerProps() {
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts.trigger.attrs(scope.id),
         id: dom.getTriggerId(scope),
         dir: prop("dir"),
         disabled,
@@ -156,15 +169,14 @@ function connect(service, normalize) {
     },
     getPositionerProps() {
       return normalize.element({
-        ...parts.positioner.attrs,
-        id: dom.getPositionerId(scope),
+        ...parts.positioner.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.floating
       });
     },
     getContentProps() {
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.content.attrs(scope.id),
         id: dom.getContentId(scope),
         dir: prop("dir"),
         role: prop("inline") ? void 0 : "dialog",
@@ -177,7 +189,7 @@ function connect(service, normalize) {
     },
     getValueTextProps() {
       return normalize.element({
-        ...parts.valueText.attrs,
+        ...parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-focus": dataAttr(focused)
@@ -185,14 +197,13 @@ function connect(service, normalize) {
     },
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = getColorAreaGradient(areaValue, {
+      const { areaStyles } = getColorAreaGradient(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...parts.area.attrs,
-        id: dom.getAreaId(scope),
+        ...parts.area.attrs(scope.id),
         role: "group",
         "data-invalid": dataAttr(invalid),
         "data-disabled": dataAttr(disabled),
@@ -216,14 +227,13 @@ function connect(service, normalize) {
     },
     getAreaBackgroundProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = getColorAreaGradient(areaValue, {
+      const { areaGradientStyles } = getColorAreaGradient(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...parts.areaBackground.attrs,
-        id: dom.getAreaGradientId(scope),
+        ...parts.areaBackground.attrs(scope.id),
         "data-invalid": dataAttr(invalid),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(readOnly),
@@ -235,18 +245,45 @@ function connect(service, normalize) {
         }
       });
     },
+    getGamutOverlayProps(props = {}) {
+      const data = resolveGamutOverlay(props);
+      return normalize.element({
+        ...parts.gamutOverlay.attrs(scope.id),
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": true,
+        "data-state": data ? "visible" : "hidden",
+        style: {
+          position: "absolute",
+          inset: "0",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          pointerEvents: "none"
+        }
+      });
+    },
     getAreaThumbProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
       const channel = { xChannel, yChannel };
-      const xPercent = areaValue.getChannelValuePercent(xChannel);
-      const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      const dragPos = context.get("areaDragPosition");
       const isRtl = prop("dir") === "rtl";
+      let xPercent;
+      let yPercent;
+      if (dragPos) {
+        xPercent = dragPos.x;
+        yPercent = dragPos.y;
+      } else {
+        xPercent = areaValue.getChannelValuePercent(xChannel);
+        yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      }
       const finalXPercent = isRtl ? 1 - xPercent : xPercent;
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
       const color = areaValue.withChannelValue("alpha", 1).toString("css");
       return normalize.element({
-        ...parts.areaThumb.attrs,
+        ...parts.areaThumb.attrs(scope.id),
         id: dom.getAreaThumbId(scope),
         dir: prop("dir"),
         tabIndex: disabled ? void 0 : 0,
@@ -314,7 +351,7 @@ function connect(service, normalize) {
     getTransparencyGridProps(props = {}) {
       const { size = "12px" } = props;
       return normalize.element({
-        ...parts.transparencyGrid.attrs,
+        ...parts.transparencyGrid.attrs(scope.id),
         style: {
           "--size": size,
           width: "100%",
@@ -332,7 +369,7 @@ function connect(service, normalize) {
     getChannelSliderProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
       return normalize.element({
-        ...parts.channelSlider.attrs,
+        ...parts.channelSlider.attrs(scope.id),
         "data-channel": channel,
         "data-orientation": orientation,
         role: "presentation",
@@ -352,10 +389,9 @@ function connect(service, normalize) {
     },
     getChannelSliderTrackProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
-      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
+      const normalizedValue = format2 ? value.toFormat(format2) : stableAreaValue;
       return normalize.element({
-        ...parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(scope, channel),
+        ...parts.channelSliderTrack.attrs(scope.id),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -374,7 +410,7 @@ function connect(service, normalize) {
     getChannelSliderLabelProps(props) {
       const { channel } = props;
       return normalize.element({
-        ...parts.channelSliderLabel.attrs,
+        ...parts.channelSliderLabel.attrs(scope.id),
         "data-channel": channel,
         onClick(event) {
           if (!interactive) return;
@@ -390,13 +426,13 @@ function connect(service, normalize) {
     },
     getChannelSliderValueTextProps(props) {
       return normalize.element({
-        ...parts.channelSliderValueText.attrs,
+        ...parts.channelSliderValueText.attrs(scope.id),
         "data-channel": props.channel
       });
     },
     getChannelSliderThumbProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
-      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
+      const normalizedValue = format2 ? value.toFormat(format2) : stableAreaValue;
       const channelRange = normalizedValue.getChannelRange(channel);
       const channelValue = normalizedValue.getChannelValue(channel);
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
@@ -404,7 +440,7 @@ function connect(service, normalize) {
       const finalOffset = orientation === "horizontal" && isRtl ? 1 - offset : offset;
       const placementStyles = orientation === "horizontal" ? { left: `${finalOffset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
       return normalize.element({
-        ...parts.channelSliderThumb.attrs,
+        ...parts.channelSliderThumb.attrs(scope.id),
         id: dom.getChannelSliderThumbId(scope, channel),
         role: "slider",
         "aria-label": channel,
@@ -421,7 +457,7 @@ function connect(service, normalize) {
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: getChannelDisplayColor(areaValue, channel).toString("css"),
+          background: getChannelDisplayColor(stableAreaValue, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -476,7 +512,7 @@ function connect(service, normalize) {
       const isTextField = channel === "hex" || channel === "css";
       const channelRange = getChannelRange(value, channel);
       return normalize.input({
-        ...parts.channelInput.attrs,
+        ...parts.channelInput.attrs(scope.id),
         dir: prop("dir"),
         type: isTextField ? "text" : "number",
         "data-channel": channel,
@@ -540,7 +576,7 @@ function connect(service, normalize) {
     },
     getEyeDropperTriggerProps() {
       return normalize.button({
-        ...parts.eyeDropperTrigger.attrs,
+        ...parts.eyeDropperTrigger.attrs(scope.id),
         type: "button",
         dir: prop("dir"),
         disabled,
@@ -556,7 +592,7 @@ function connect(service, normalize) {
     },
     getSwatchGroupProps() {
       return normalize.element({
-        ...parts.swatchGroup.attrs,
+        ...parts.swatchGroup.attrs(scope.id),
         role: "group"
       });
     },
@@ -564,7 +600,7 @@ function connect(service, normalize) {
     getSwatchTriggerProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.button({
-        ...parts.swatchTrigger.attrs,
+        ...parts.swatchTrigger.attrs(scope.id),
         disabled: swatchState.disabled,
         dir: prop("dir"),
         type: "button",
@@ -585,7 +621,7 @@ function connect(service, normalize) {
     getSwatchIndicatorProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.element({
-        ...parts.swatchIndicator.attrs,
+        ...parts.swatchIndicator.attrs(scope.id),
         dir: prop("dir"),
         hidden: !swatchState.checked
       });
@@ -595,7 +631,7 @@ function connect(service, normalize) {
       const swatchState = getSwatchTriggerState(props);
       const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
-        ...parts.swatch.attrs,
+        ...parts.swatch.attrs(scope.id),
         dir: prop("dir"),
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
@@ -608,7 +644,7 @@ function connect(service, normalize) {
     },
     getFormatTriggerProps() {
       return normalize.button({
-        ...parts.formatTrigger.attrs,
+        ...parts.formatTrigger.attrs(scope.id),
         dir: prop("dir"),
         type: "button",
         "aria-label": `change color format to ${getNextFormat(format)}`,
@@ -621,7 +657,7 @@ function connect(service, normalize) {
     },
     getFormatSelectProps() {
       return normalize.select({
-        ...parts.formatSelect.attrs,
+        ...parts.formatSelect.attrs(scope.id),
         "aria-label": "change color format",
         dir: prop("dir"),
         defaultValue: prop("format"),
@@ -634,7 +670,7 @@ function connect(service, normalize) {
     }
   };
 }
-var formats = ["hsba", "hsla", "rgba"];
+var formats = ["hsba", "hsla", "rgba", "oklab", "oklch"];
 var formatRegex = new RegExp(`^(${formats.join("|")})$`);
 function getNextFormat(format) {
   const index = formats.indexOf(format);

package/dist/color-picker.dom.js

@@ -50,22 +50,23 @@ __export(color_picker_dom_exports, {
 });
 module.exports = __toCommonJS(color_picker_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
-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 import_color_picker = require("./color-picker.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `${ctx.id}:hidden-input`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `${ctx.id}:trigger`;
+var getContentId = (ctx) => ctx.ids?.content ?? `${ctx.id}:content`;
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `${ctx.id}:positioner`;
+var getFormatSelectId = (ctx) => ctx.ids?.formatSelect ?? `${ctx.id}:format-select`;
+var getAreaId = (ctx) => ctx.ids?.area ?? `${ctx.id}:area`;
+var getAreaGradientId = (ctx) => ctx.ids?.areaGradient ?? `${ctx.id}:area-gradient`;
+var getAreaThumbId = (ctx) => ctx.ids?.areaThumb ?? `${ctx.id}:area-thumb`;
+var getChannelSliderTrackId = (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `${ctx.id}:slider-track:${channel}`;
+var getChannelSliderThumbId = (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `${ctx.id}:slider-thumb:${channel}`;
+var getContentEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.content));
+var getAreaThumbEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.areaThumb));
+var getChannelSliderThumbEl = (ctx, channel) => ctx.query(`${ctx.selector(import_color_picker.parts.channelSliderThumb)}[data-channel="${channel}"]`);
 var getChannelInputEl = (ctx, channel) => {
   const selector = `input[data-channel="${channel}"]`;
   return [
@@ -73,9 +74,9 @@ var getChannelInputEl = (ctx, channel) => {
     ...(0, import_dom_query.queryAll)(getControlEl(ctx), selector)
   ];
 };
-var getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
+var getFormatSelectEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.formatSelect));
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
-var getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
+var getAreaEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.area));
 var getAreaValueFromPoint = (ctx, point, dir) => {
   const areaEl = getAreaEl(ctx);
   if (!areaEl) return;
@@ -85,10 +86,10 @@ var getAreaValueFromPoint = (ctx, point, dir) => {
     y: getPercentValue({ orientation: "vertical" })
   };
 };
-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 getControlEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.control));
+var getTriggerEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.trigger));
+var getPositionerEl = (ctx) => ctx.query(ctx.selector(import_color_picker.parts.positioner));
+var getChannelSliderTrackEl = (ctx, channel) => ctx.query(`${ctx.selector(import_color_picker.parts.channelSliderTrack)}[data-channel="${channel}"]`);
 var getChannelSliderValueFromPoint = (ctx, point, channel, dir) => {
   const trackEl = getChannelSliderTrackEl(ctx, channel);
   if (!trackEl) return;

package/dist/color-picker.dom.mjs

@@ -1,21 +1,22 @@
 // src/color-picker.dom.ts
 import { getRelativePoint, queryAll } from "@zag-js/dom-query";
-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));
+import { parts } from "./color-picker.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `${ctx.id}:hidden-input`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `${ctx.id}:trigger`;
+var getContentId = (ctx) => ctx.ids?.content ?? `${ctx.id}:content`;
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `${ctx.id}:positioner`;
+var getFormatSelectId = (ctx) => ctx.ids?.formatSelect ?? `${ctx.id}:format-select`;
+var getAreaId = (ctx) => ctx.ids?.area ?? `${ctx.id}:area`;
+var getAreaGradientId = (ctx) => ctx.ids?.areaGradient ?? `${ctx.id}:area-gradient`;
+var getAreaThumbId = (ctx) => ctx.ids?.areaThumb ?? `${ctx.id}:area-thumb`;
+var getChannelSliderTrackId = (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `${ctx.id}:slider-track:${channel}`;
+var getChannelSliderThumbId = (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `${ctx.id}:slider-thumb:${channel}`;
+var getContentEl = (ctx) => ctx.query(ctx.selector(parts.content));
+var getAreaThumbEl = (ctx) => ctx.query(ctx.selector(parts.areaThumb));
+var getChannelSliderThumbEl = (ctx, channel) => ctx.query(`${ctx.selector(parts.channelSliderThumb)}[data-channel="${channel}"]`);
 var getChannelInputEl = (ctx, channel) => {
   const selector = `input[data-channel="${channel}"]`;
   return [
@@ -23,9 +24,9 @@ var getChannelInputEl = (ctx, channel) => {
     ...queryAll(getControlEl(ctx), selector)
   ];
 };
-var getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
+var getFormatSelectEl = (ctx) => ctx.query(ctx.selector(parts.formatSelect));
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
-var getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
+var getAreaEl = (ctx) => ctx.query(ctx.selector(parts.area));
 var getAreaValueFromPoint = (ctx, point, dir) => {
   const areaEl = getAreaEl(ctx);
   if (!areaEl) return;
@@ -35,10 +36,10 @@ var getAreaValueFromPoint = (ctx, point, dir) => {
     y: getPercentValue({ orientation: "vertical" })
   };
 };
-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 getControlEl = (ctx) => ctx.query(ctx.selector(parts.control));
+var getTriggerEl = (ctx) => ctx.query(ctx.selector(parts.trigger));
+var getPositionerEl = (ctx) => ctx.query(ctx.selector(parts.positioner));
+var getChannelSliderTrackEl = (ctx, channel) => ctx.query(`${ctx.selector(parts.channelSliderTrack)}[data-channel="${channel}"]`);
 var getChannelSliderValueFromPoint = (ctx, point, channel, dir) => {
   const trackEl = getChannelSliderTrackEl(ctx, channel);
   if (!trackEl) return;

package/dist/color-picker.machine.d.mts

@@ -1,6 +1,7 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ColorPickerSchema } from './color-picker.types.mjs';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.mjs';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';

package/dist/color-picker.machine.d.ts

@@ -1,6 +1,7 @@
 import * as _zag_js_core from '@zag-js/core';
 import { ColorPickerSchema } from './color-picker.types.js';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.js';
 import '@zag-js/dismissable';
 import '@zag-js/popper';
 import '@zag-js/types';

package/dist/color-picker.machine.js

@@ -41,6 +41,7 @@ var import_popper = require("@zag-js/popper");
 var import_utils = require("@zag-js/utils");
 var dom = __toESM(require("./color-picker.dom.js"));
 var import_color_picker = require("./color-picker.parse.js");
+var import_get_area_format = require("./utils/get-area-format.js");
 var import_get_channel_input_value = require("./utils/get-channel-input-value.js");
 var import_is_valid_hex = require("./utils/is-valid-hex.js");
 var { and } = (0, import_core.createGuards)();
@@ -96,11 +97,14 @@ var machine = (0, import_core.createMachine)({
       activeId: bindable(() => ({ defaultValue: null })),
       activeChannel: bindable(() => ({ defaultValue: null })),
       activeOrientation: bindable(() => ({ defaultValue: null })),
+      areaBaseColor: bindable(() => ({ defaultValue: null })),
+      areaDragPosition: bindable(() => ({ defaultValue: null })),
       fieldsetDisabled: bindable(() => ({ defaultValue: false })),
       restoreFocus: bindable(() => ({ defaultValue: true })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
-      }))
+      })),
+      positioned: bindable(() => ({ defaultValue: false }))
     };
   },
   computed: {
@@ -109,8 +113,7 @@ var machine = (0, import_core.createMachine)({
     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);
+      return context.get("value").toFormat((0, import_get_area_format.getAreaFormat)(context.get("format")));
     }
   },
   effects: ["trackFormControl"],
@@ -388,6 +391,7 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
+            context.set("positioned", true);
           }
         });
       },
@@ -458,36 +462,47 @@ var machine = (0, import_core.createMachine)({
           });
         }).catch(() => void 0);
       },
-      setActiveChannel({ context, event }) {
+      setActiveChannel({ context, event, computed }) {
         context.set("activeId", event.id);
         if (event.channel) context.set("activeChannel", event.channel);
         if (event.orientation) context.set("activeOrientation", event.orientation);
+        const areaFormat = (0, import_get_area_format.getAreaFormat)(context.get("format"));
+        if (areaFormat !== context.get("format")) {
+          context.set("areaBaseColor", computed("areaValue"));
+        }
       },
       clearActiveChannel({ context }) {
         context.set("activeChannel", null);
         context.set("activeId", null);
         context.set("activeOrientation", null);
+        context.set("areaBaseColor", null);
+        context.set("areaDragPosition", null);
       },
       setAreaColorFromPoint({ context, event, computed, scope, prop }) {
-        const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+        const storeFormat = context.get("format");
+        const v = event.format ? context.get("value").toFormat(event.format) : context.get("areaBaseColor") ?? computed("areaValue");
         const { xChannel, yChannel } = event.channel || context.get("activeChannel");
         const percent = dom.getAreaValueFromPoint(scope, event.point, prop("dir"));
         if (!percent) return;
+        context.set("areaDragPosition", { x: percent.x, y: percent.y });
         const xValue = v.getChannelPercentValue(xChannel, percent.x);
         const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y);
-        const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+        const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue).toFormat(storeFormat);
         context.set("value", color);
       },
       setChannelColorFromPoint({ context, event, computed, scope, prop }) {
+        const storeFormat = context.get("format");
         const channel = event.channel || context.get("activeId");
-        const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+        const baseColor = context.get("areaBaseColor");
+        const normalizedValue = event.format ? context.get("value").toFormat(event.format) : baseColor ?? computed("areaValue");
         const percent = dom.getChannelSliderValueFromPoint(scope, event.point, channel, prop("dir"));
         if (!percent) return;
         const orientation = event.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);
+        const updatedBase = normalizedValue.withChannelValue(channel, value);
+        context.set("areaBaseColor", updatedBase);
+        context.set("value", updatedBase.toFormat(storeFormat));
       },
       setValue({ context, event }) {
         const format = context.get("format");
@@ -544,24 +559,32 @@ var machine = (0, import_core.createMachine)({
         const color = context.get("value").decrementChannel(event.channel, event.step);
         context.set("value", color);
       },
-      incrementAreaXChannel({ context, event, computed }) {
+      incrementAreaXChannel({ context, event }) {
         const { xChannel } = event.channel;
-        const color = computed("areaValue").incrementChannel(xChannel, event.step);
+        const storeFormat = context.get("format");
+        const v = context.get("value").toFormat((0, import_get_area_format.getAreaFormat)(storeFormat));
+        const color = v.incrementChannel(xChannel, event.step).toFormat(storeFormat);
         context.set("value", color);
       },
-      decrementAreaXChannel({ context, event, computed }) {
+      decrementAreaXChannel({ context, event }) {
         const { xChannel } = event.channel;
-        const color = computed("areaValue").decrementChannel(xChannel, event.step);
+        const storeFormat = context.get("format");
+        const v = context.get("value").toFormat((0, import_get_area_format.getAreaFormat)(storeFormat));
+        const color = v.decrementChannel(xChannel, event.step).toFormat(storeFormat);
         context.set("value", color);
       },
-      incrementAreaYChannel({ context, event, computed }) {
+      incrementAreaYChannel({ context, event }) {
         const { yChannel } = event.channel;
-        const color = computed("areaValue").incrementChannel(yChannel, event.step);
+        const storeFormat = context.get("format");
+        const v = context.get("value").toFormat((0, import_get_area_format.getAreaFormat)(storeFormat));
+        const color = v.incrementChannel(yChannel, event.step).toFormat(storeFormat);
         context.set("value", color);
       },
-      decrementAreaYChannel({ context, event, computed }) {
+      decrementAreaYChannel({ context, event }) {
         const { yChannel } = event.channel;
-        const color = computed("areaValue").decrementChannel(yChannel, event.step);
+        const storeFormat = context.get("format");
+        const v = context.get("value").toFormat((0, import_get_area_format.getAreaFormat)(storeFormat));
+        const color = v.decrementChannel(yChannel, event.step).toFormat(storeFormat);
         context.set("value", color);
       },
       setChannelToMax({ context, event }) {