@zag-js/color-picker 1.43.0 → 2.0.0-next.1

package/dist/color-picker.connect.mjs

@@ -1,18 +1,34 @@
 // src/color-picker.connect.ts
-import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
-import { getEventKey, getEventPoint, getEventStep, isComposingEvent, isLeftClick, isModifierKey } from "@zag-js/dom-query";
+import { getColorAreaGradient, isInSrgbGamut, normalizeColor } from "@zag-js/color-utils";
+import { getDismissableLayerAttrs, getDismissableLayerStyle } from "@zag-js/dismissable";
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  isComposingEvent,
+  isLeftClick,
+  isModifierKey
+} from "@zag-js/dom-query";
 import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 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 getDefaultDevicePixelRatio() {
+  if (typeof globalThis === "undefined") return 1;
+  const dpr = globalThis.devicePixelRatio;
+  return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
+}
 function connect(service, normalize) {
   const { context, send, prop, computed, state, scope } = service;
+  const layer = context.get("layer");
   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,6 +45,10 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
+  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({
@@ -44,11 +64,38 @@ function connect(service, normalize) {
       disabled: props.disabled || !interactive
     };
   }
+  function getRootState() {
+    return { disabled, readOnly, invalid };
+  }
+  function getTriggerState() {
+    return {
+      open,
+      focused,
+      disabled,
+      invalid,
+      readOnly,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
+  function getContentState() {
+    return {
+      open,
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
     dragging,
     open,
     valueAsString,
     value,
+    isInSrgbGamut: isInSrgbGamut(value),
+    getGamutOverlay(props = {}) {
+      return resolveGamutOverlay(props);
+    },
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
@@ -70,23 +117,23 @@ 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) {
       const color = value.withChannelValue("alpha", alphaValue);
       send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       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),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-readonly": dataAttr(rootState.readOnly),
+        "data-invalid": dataAttr(rootState.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -94,7 +141,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 +159,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),
@@ -122,24 +168,26 @@ function connect(service, normalize) {
         "data-focus": dataAttr(focused)
       });
     },
+    getTriggerState,
     getTriggerProps() {
+      const triggerState = getTriggerState();
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts.trigger.attrs(scope.id),
         id: dom.getTriggerId(scope),
         dir: prop("dir"),
-        disabled,
+        disabled: triggerState.disabled,
         "aria-label": `select color. current color is ${valueAsString}`,
         "aria-controls": dom.getContentId(scope),
         "aria-labelledby": dom.getLabelId(scope),
         "aria-haspopup": prop("inline") ? void 0 : "dialog",
-        "data-disabled": dataAttr(disabled),
-        "data-readonly": dataAttr(readOnly),
-        "data-invalid": dataAttr(invalid),
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(triggerState.disabled),
+        "data-readonly": dataAttr(triggerState.readOnly),
+        "data-invalid": dataAttr(triggerState.invalid),
+        "data-placement": triggerState.placement,
+        "data-side": triggerState.side,
+        "aria-expanded": triggerState.open,
+        "data-state": triggerState.open ? "open" : "closed",
+        "data-focus": dataAttr(triggerState.focused),
         type: "button",
         onClick() {
           if (!interactive) return;
@@ -156,28 +204,35 @@ 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
+        ...getDismissableLayerAttrs(layer),
+        style: {
+          ...popperStyles.floating,
+          ...getDismissableLayerStyle(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.content.attrs(scope.id),
         id: dom.getContentId(scope),
         dir: prop("dir"),
         role: prop("inline") ? void 0 : "dialog",
         tabIndex: -1,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "data-state": open ? "open" : "closed",
-        hidden: !open
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        "data-state": contentState.open ? "open" : "closed",
+        hidden: !contentState.open,
+        ...getDismissableLayerAttrs(layer),
+        style: getDismissableLayerStyle(layer, { pointerEvents: true })
       });
     },
     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 +240,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 +270,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 +288,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 +394,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 +412,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 +432,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 +453,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 +469,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 +483,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 +500,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 +555,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,
@@ -541,7 +620,7 @@ function connect(service, normalize) {
     },
     getEyeDropperTriggerProps() {
       return normalize.button({
-        ...parts.eyeDropperTrigger.attrs,
+        ...parts.eyeDropperTrigger.attrs(scope.id),
         type: "button",
         dir: prop("dir"),
         disabled,
@@ -557,7 +636,7 @@ function connect(service, normalize) {
     },
     getSwatchGroupProps() {
       return normalize.element({
-        ...parts.swatchGroup.attrs,
+        ...parts.swatchGroup.attrs(scope.id),
         role: "group"
       });
     },
@@ -565,7 +644,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",
@@ -586,7 +665,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
       });
@@ -596,7 +675,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,
@@ -609,7 +688,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)}`,
@@ -622,7 +701,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"),
@@ -635,7 +714,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';