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

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
-declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
-declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/color-picker.anatomy.js

@@ -34,6 +34,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "content",
   "area",
   "areaThumb",
+  "gamutOverlay",
   "valueText",
   "areaBackground",
   "channelSlider",

package/dist/color-picker.anatomy.mjs

@@ -9,6 +9,7 @@ var anatomy = createAnatomy("color-picker", [
   "content",
   "area",
   "areaThumb",
+  "gamutOverlay",
   "valueText",
   "areaBackground",
   "channelSlider",

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

@@ -1,6 +1,7 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { ColorPickerService, ColorPickerApi } from './color-picker.types.mjs';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.mjs';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

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

@@ -1,6 +1,7 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { ColorPickerService, ColorPickerApi } from './color-picker.types.js';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/color-picker.connect.js

@@ -34,6 +34,7 @@ __export(color_picker_connect_exports, {
 });
 module.exports = __toCommonJS(color_picker_connect_exports);
 var import_color_utils = require("@zag-js/color-utils");
+var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query = require("@zag-js/dom-query");
 var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
@@ -41,12 +42,20 @@ var import_color_picker = require("./color-picker.anatomy.js");
 var dom = __toESM(require("./color-picker.dom.js"));
 var import_get_channel_display_color = require("./utils/get-channel-display-color.js");
 var import_get_channel_input_value = require("./utils/get-channel-input-value.js");
+var import_get_gamut_overlay_path = require("./utils/get-gamut-overlay-path.js");
 var import_get_slider_background = require("./utils/get-slider-background.js");
+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");
@@ -63,6 +72,10 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
+  function resolveGamutOverlay(props = {}) {
+    const pixelRatio = props.pixelRatio ?? getDefaultDevicePixelRatio();
+    return (0, import_get_gamut_overlay_path.getGamutOverlayData)(stableAreaValue, getAreaChannels(props), format, { pixelRatio });
+  }
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
   const popperStyles = (0, import_popper.getPlacementStyles)({
@@ -78,11 +91,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: (0, import_color_utils.isInSrgbGamut)(value),
+    getGamutOverlay(props = {}) {
+      return resolveGamutOverlay(props);
+    },
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
@@ -104,23 +144,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({
-        ...import_color_picker.parts.root.attrs,
+        ...import_color_picker.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getRootId(scope),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
+        "data-disabled": (0, import_dom_query2.dataAttr)(rootState.disabled),
+        "data-readonly": (0, import_dom_query2.dataAttr)(rootState.readOnly),
+        "data-invalid": (0, import_dom_query2.dataAttr)(rootState.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -128,7 +168,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.element({
-        ...import_color_picker.parts.label.attrs,
+        ...import_color_picker.parts.label.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getLabelId(scope),
         htmlFor: dom.getHiddenInputId(scope),
@@ -146,8 +186,7 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...import_color_picker.parts.control.attrs,
-        id: dom.getControlId(scope),
+        ...import_color_picker.parts.control.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
@@ -156,24 +195,26 @@ function connect(service, normalize) {
         "data-focus": (0, import_dom_query2.dataAttr)(focused)
       });
     },
+    getTriggerState,
     getTriggerProps() {
+      const triggerState = getTriggerState();
       return normalize.button({
-        ...import_color_picker.parts.trigger.attrs,
+        ...import_color_picker.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": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "data-focus": (0, import_dom_query2.dataAttr)(focused),
+        "data-disabled": (0, import_dom_query2.dataAttr)(triggerState.disabled),
+        "data-readonly": (0, import_dom_query2.dataAttr)(triggerState.readOnly),
+        "data-invalid": (0, import_dom_query2.dataAttr)(triggerState.invalid),
+        "data-placement": triggerState.placement,
+        "data-side": triggerState.side,
+        "aria-expanded": triggerState.open,
+        "data-state": triggerState.open ? "open" : "closed",
+        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.focused),
         type: "button",
         onClick() {
           if (!interactive) return;
@@ -190,28 +231,35 @@ function connect(service, normalize) {
     },
     getPositionerProps() {
       return normalize.element({
-        ...import_color_picker.parts.positioner.attrs,
-        id: dom.getPositionerId(scope),
+        ...import_color_picker.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: {
+          ...popperStyles.floating,
+          ...(0, import_dismissable.getDismissableLayerStyle)(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
-        ...import_color_picker.parts.content.attrs,
+        ...import_color_picker.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,
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: (0, import_dismissable.getDismissableLayerStyle)(layer, { pointerEvents: true })
       });
     },
     getValueTextProps() {
       return normalize.element({
-        ...import_color_picker.parts.valueText.attrs,
+        ...import_color_picker.parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-focus": (0, import_dom_query2.dataAttr)(focused)
@@ -219,14 +267,13 @@ function connect(service, normalize) {
     },
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = (0, import_color_utils.getColorAreaGradient)(areaValue, {
+      const { areaStyles } = (0, import_color_utils.getColorAreaGradient)(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...import_color_picker.parts.area.attrs,
-        id: dom.getAreaId(scope),
+        ...import_color_picker.parts.area.attrs(scope.id),
         role: "group",
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
@@ -250,14 +297,13 @@ function connect(service, normalize) {
     },
     getAreaBackgroundProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = (0, import_color_utils.getColorAreaGradient)(areaValue, {
+      const { areaGradientStyles } = (0, import_color_utils.getColorAreaGradient)(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...import_color_picker.parts.areaBackground.attrs,
-        id: dom.getAreaGradientId(scope),
+        ...import_color_picker.parts.areaBackground.attrs(scope.id),
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
@@ -269,18 +315,45 @@ function connect(service, normalize) {
         }
       });
     },
+    getGamutOverlayProps(props = {}) {
+      const data = resolveGamutOverlay(props);
+      return normalize.element({
+        ...import_color_picker.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({
-        ...import_color_picker.parts.areaThumb.attrs,
+        ...import_color_picker.parts.areaThumb.attrs(scope.id),
         id: dom.getAreaThumbId(scope),
         dir: prop("dir"),
         tabIndex: disabled ? void 0 : 0,
@@ -348,7 +421,7 @@ function connect(service, normalize) {
     getTransparencyGridProps(props = {}) {
       const { size = "12px" } = props;
       return normalize.element({
-        ...import_color_picker.parts.transparencyGrid.attrs,
+        ...import_color_picker.parts.transparencyGrid.attrs(scope.id),
         style: {
           "--size": size,
           width: "100%",
@@ -366,7 +439,7 @@ function connect(service, normalize) {
     getChannelSliderProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
       return normalize.element({
-        ...import_color_picker.parts.channelSlider.attrs,
+        ...import_color_picker.parts.channelSlider.attrs(scope.id),
         "data-channel": channel,
         "data-orientation": orientation,
         role: "presentation",
@@ -386,10 +459,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({
-        ...import_color_picker.parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(scope, channel),
+        ...import_color_picker.parts.channelSliderTrack.attrs(scope.id),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -408,7 +480,7 @@ function connect(service, normalize) {
     getChannelSliderLabelProps(props) {
       const { channel } = props;
       return normalize.element({
-        ...import_color_picker.parts.channelSliderLabel.attrs,
+        ...import_color_picker.parts.channelSliderLabel.attrs(scope.id),
         "data-channel": channel,
         onClick(event) {
           if (!interactive) return;
@@ -424,13 +496,13 @@ function connect(service, normalize) {
     },
     getChannelSliderValueTextProps(props) {
       return normalize.element({
-        ...import_color_picker.parts.channelSliderValueText.attrs,
+        ...import_color_picker.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);
@@ -438,7 +510,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({
-        ...import_color_picker.parts.channelSliderThumb.attrs,
+        ...import_color_picker.parts.channelSliderThumb.attrs(scope.id),
         id: dom.getChannelSliderThumbId(scope, channel),
         role: "slider",
         "aria-label": channel,
@@ -455,7 +527,7 @@ function connect(service, normalize) {
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: (0, import_get_channel_display_color.getChannelDisplayColor)(areaValue, channel).toString("css"),
+          background: (0, import_get_channel_display_color.getChannelDisplayColor)(stableAreaValue, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -510,7 +582,7 @@ function connect(service, normalize) {
       const isTextField = channel === "hex" || channel === "css";
       const channelRange = (0, import_get_channel_input_value.getChannelRange)(value, channel);
       return normalize.input({
-        ...import_color_picker.parts.channelInput.attrs,
+        ...import_color_picker.parts.channelInput.attrs(scope.id),
         dir: prop("dir"),
         type: isTextField ? "text" : "number",
         "data-channel": channel,
@@ -575,7 +647,7 @@ function connect(service, normalize) {
     },
     getEyeDropperTriggerProps() {
       return normalize.button({
-        ...import_color_picker.parts.eyeDropperTrigger.attrs,
+        ...import_color_picker.parts.eyeDropperTrigger.attrs(scope.id),
         type: "button",
         dir: prop("dir"),
         disabled,
@@ -591,7 +663,7 @@ function connect(service, normalize) {
     },
     getSwatchGroupProps() {
       return normalize.element({
-        ...import_color_picker.parts.swatchGroup.attrs,
+        ...import_color_picker.parts.swatchGroup.attrs(scope.id),
         role: "group"
       });
     },
@@ -599,7 +671,7 @@ function connect(service, normalize) {
     getSwatchTriggerProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.button({
-        ...import_color_picker.parts.swatchTrigger.attrs,
+        ...import_color_picker.parts.swatchTrigger.attrs(scope.id),
         disabled: swatchState.disabled,
         dir: prop("dir"),
         type: "button",
@@ -620,7 +692,7 @@ function connect(service, normalize) {
     getSwatchIndicatorProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.element({
-        ...import_color_picker.parts.swatchIndicator.attrs,
+        ...import_color_picker.parts.swatchIndicator.attrs(scope.id),
         dir: prop("dir"),
         hidden: !swatchState.checked
       });
@@ -630,7 +702,7 @@ function connect(service, normalize) {
       const swatchState = getSwatchTriggerState(props);
       const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
-        ...import_color_picker.parts.swatch.attrs,
+        ...import_color_picker.parts.swatch.attrs(scope.id),
         dir: prop("dir"),
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
@@ -643,7 +715,7 @@ function connect(service, normalize) {
     },
     getFormatTriggerProps() {
       return normalize.button({
-        ...import_color_picker.parts.formatTrigger.attrs,
+        ...import_color_picker.parts.formatTrigger.attrs(scope.id),
         dir: prop("dir"),
         type: "button",
         "aria-label": `change color format to ${getNextFormat(format)}`,
@@ -656,7 +728,7 @@ function connect(service, normalize) {
     },
     getFormatSelectProps() {
       return normalize.select({
-        ...import_color_picker.parts.formatSelect.attrs,
+        ...import_color_picker.parts.formatSelect.attrs(scope.id),
         "aria-label": "change color format",
         dir: prop("dir"),
         defaultValue: prop("format"),
@@ -669,7 +741,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);