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

package/dist/index.d.ts

@@ -4,8 +4,9 @@ export { connect } from './color-picker.connect.js';
 export { machine } from './color-picker.machine.js';
 export { parse } from './color-picker.parse.js';
 export { areaProps, channelProps, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps } from './color-picker.props.js';
-export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ElementIds, ExtendedColorChannel, FormatChangeDetails, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails } from './color-picker.types.js';
+export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ContentState, ElementIds, ExtendedColorChannel, FormatChangeDetails, GamutOverlayProps, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, RootState, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, TriggerState, ValueChangeDetails } from './color-picker.types.js';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
+export { GamutOverlayData } from './utils/get-gamut-overlay-path.js';
 export { PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/utils/get-area-format.d.mts

@@ -0,0 +1,6 @@
+import { ColorFormat } from '@zag-js/color-utils';
+
+/** Color space used for the 2D area for the active output format. */
+declare function getAreaFormat(format: ColorFormat): ColorFormat;
+
+export { getAreaFormat };

package/dist/utils/get-area-format.d.ts

@@ -0,0 +1,6 @@
+import { ColorFormat } from '@zag-js/color-utils';
+
+/** Color space used for the 2D area for the active output format. */
+declare function getAreaFormat(format: ColorFormat): ColorFormat;
+
+export { getAreaFormat };

package/dist/utils/get-area-format.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/get-area-format.ts
+var get_area_format_exports = {};
+__export(get_area_format_exports, {
+  getAreaFormat: () => getAreaFormat
+});
+module.exports = __toCommonJS(get_area_format_exports);
+function getAreaFormat(format) {
+  if (format.startsWith("hsl")) return "hsla";
+  if (format.startsWith("hsb")) return "hsba";
+  if (format.startsWith("rgb")) return "rgba";
+  if (format === "oklab") return "hsba";
+  if (format === "oklch") return "hsba";
+  return "hsba";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAreaFormat
+});

package/dist/utils/get-area-format.mjs

@@ -0,0 +1,12 @@
+// src/utils/get-area-format.ts
+function getAreaFormat(format) {
+  if (format.startsWith("hsl")) return "hsla";
+  if (format.startsWith("hsb")) return "hsba";
+  if (format.startsWith("rgb")) return "rgba";
+  if (format === "oklab") return "hsba";
+  if (format === "oklch") return "hsba";
+  return "hsba";
+}
+export {
+  getAreaFormat
+};

package/dist/utils/get-channel-display-color.d.mts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/dist/utils/get-channel-display-color.d.ts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/dist/utils/get-channel-display-color.js

@@ -25,10 +25,17 @@ __export(get_channel_display_color_exports, {
 module.exports = __toCommonJS(get_channel_display_color_exports);
 var import_color_utils = require("@zag-js/color-utils");
 function getChannelDisplayColor(color, channel) {
+  const fmt = color.getFormat();
   switch (channel) {
     case "hue":
+      if (fmt === "oklch") {
+        return color.withChannelValue("alpha", 1);
+      }
       return (0, import_color_utils.parseColor)(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
     case "lightness":
+    case "chroma":
+    case "a":
+    case "b":
     case "brightness":
     case "saturation":
     case "red":

package/dist/utils/get-channel-display-color.mjs

@@ -1,10 +1,17 @@
 // src/utils/get-channel-display-color.ts
 import { parseColor } from "@zag-js/color-utils";
 function getChannelDisplayColor(color, channel) {
+  const fmt = color.getFormat();
   switch (channel) {
     case "hue":
+      if (fmt === "oklch") {
+        return color.withChannelValue("alpha", 1);
+      }
       return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
     case "lightness":
+    case "chroma":
+    case "a":
+    case "b":
     case "brightness":
     case "saturation":
     case "red":

package/dist/utils/get-channel-input-value.d.mts

@@ -1,5 +1,6 @@
 import { Color, ColorChannelRange } from '@zag-js/color-utils';
 import { ExtendedColorChannel } from '../color-picker.types.mjs';
+import './get-gamut-overlay-path.mjs';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/utils/get-channel-input-value.d.ts

@@ -1,5 +1,6 @@
 import { Color, ColorChannelRange } from '@zag-js/color-utils';
 import { ExtendedColorChannel } from '../color-picker.types.js';
+import './get-gamut-overlay-path.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/utils/get-channel-input-value.js

@@ -34,26 +34,45 @@ function getChannelValue(color, channel) {
     return color.toString("css");
   }
   if (channel in color) {
-    return color.getChannelValue(channel).toString();
+    return roundedValue(color, channel);
   }
-  const isHSL = color.getFormat() === "hsla";
+  const fmt = color.getFormat();
+  const isHSL = fmt === "hsla";
   switch (channel) {
     case "hue":
-      return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+      if (fmt === "oklch") {
+        return roundedValue(color.toFormat("oklch"), "hue");
+      }
+      return isHSL ? roundedValue(color.toFormat("hsla"), "hue") : roundedValue(color.toFormat("hsba"), "hue");
     case "saturation":
-      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+      return isHSL ? roundedValue(color.toFormat("hsla"), "saturation") : roundedValue(color.toFormat("hsba"), "saturation");
     case "lightness":
-      return color.toFormat("hsla").getChannelValue("lightness").toString();
+      if (fmt === "oklab" || fmt === "oklch") {
+        return roundedValue(color, "lightness");
+      }
+      return roundedValue(color.toFormat("hsla"), "lightness");
     case "brightness":
-      return color.toFormat("hsba").getChannelValue("brightness").toString();
+      return roundedValue(color.toFormat("hsba"), "brightness");
+    case "a":
+    case "b":
+      return roundedValue(color.toFormat("oklab"), channel);
+    case "chroma":
+      return roundedValue(color.toFormat("oklch"), channel);
     case "red":
     case "green":
     case "blue":
-      return color.toFormat("rgba").getChannelValue(channel).toString();
+      return roundedValue(color.toFormat("rgba"), channel);
     default:
-      return color.getChannelValue(channel).toString();
+      return roundedValue(color, channel);
   }
 }
+function roundedValue(color, channel) {
+  const value = color.getChannelValue(channel);
+  const { step } = color.getChannelRange(channel);
+  if (step >= 1) return Math.round(value).toString();
+  const decimals = Math.min(4, Math.max(0, Math.ceil(-Math.log10(step))));
+  return parseFloat(value.toFixed(decimals)).toString();
+}
 function getChannelRange(color, channel) {
   switch (channel) {
     case "hex":
@@ -68,11 +87,23 @@ function getChannelRange(color, channel) {
     case "css":
       return void 0;
     case "hue":
+      if (color.getFormat() === "oklch") {
+        return color.toFormat("oklch").getChannelRange("hue");
+      }
+      return color.toFormat("hsla").getChannelRange(channel);
     case "saturation":
     case "lightness":
+      if (color.getFormat() === "oklab" || color.getFormat() === "oklch") {
+        return color.getChannelRange(channel);
+      }
       return color.toFormat("hsla").getChannelRange(channel);
     case "brightness":
       return color.toFormat("hsba").getChannelRange(channel);
+    case "a":
+    case "b":
+      return color.toFormat("oklab").getChannelRange(channel);
+    case "chroma":
+      return color.toFormat("oklch").getChannelRange(channel);
     case "red":
     case "green":
     case "blue":

package/dist/utils/get-channel-input-value.mjs

@@ -9,26 +9,45 @@ function getChannelValue(color, channel) {
     return color.toString("css");
   }
   if (channel in color) {
-    return color.getChannelValue(channel).toString();
+    return roundedValue(color, channel);
   }
-  const isHSL = color.getFormat() === "hsla";
+  const fmt = color.getFormat();
+  const isHSL = fmt === "hsla";
   switch (channel) {
     case "hue":
-      return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+      if (fmt === "oklch") {
+        return roundedValue(color.toFormat("oklch"), "hue");
+      }
+      return isHSL ? roundedValue(color.toFormat("hsla"), "hue") : roundedValue(color.toFormat("hsba"), "hue");
     case "saturation":
-      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+      return isHSL ? roundedValue(color.toFormat("hsla"), "saturation") : roundedValue(color.toFormat("hsba"), "saturation");
     case "lightness":
-      return color.toFormat("hsla").getChannelValue("lightness").toString();
+      if (fmt === "oklab" || fmt === "oklch") {
+        return roundedValue(color, "lightness");
+      }
+      return roundedValue(color.toFormat("hsla"), "lightness");
     case "brightness":
-      return color.toFormat("hsba").getChannelValue("brightness").toString();
+      return roundedValue(color.toFormat("hsba"), "brightness");
+    case "a":
+    case "b":
+      return roundedValue(color.toFormat("oklab"), channel);
+    case "chroma":
+      return roundedValue(color.toFormat("oklch"), channel);
     case "red":
     case "green":
     case "blue":
-      return color.toFormat("rgba").getChannelValue(channel).toString();
+      return roundedValue(color.toFormat("rgba"), channel);
     default:
-      return color.getChannelValue(channel).toString();
+      return roundedValue(color, channel);
   }
 }
+function roundedValue(color, channel) {
+  const value = color.getChannelValue(channel);
+  const { step } = color.getChannelRange(channel);
+  if (step >= 1) return Math.round(value).toString();
+  const decimals = Math.min(4, Math.max(0, Math.ceil(-Math.log10(step))));
+  return parseFloat(value.toFixed(decimals)).toString();
+}
 function getChannelRange(color, channel) {
   switch (channel) {
     case "hex":
@@ -43,11 +62,23 @@ function getChannelRange(color, channel) {
     case "css":
       return void 0;
     case "hue":
+      if (color.getFormat() === "oklch") {
+        return color.toFormat("oklch").getChannelRange("hue");
+      }
+      return color.toFormat("hsla").getChannelRange(channel);
     case "saturation":
     case "lightness":
+      if (color.getFormat() === "oklab" || color.getFormat() === "oklch") {
+        return color.getChannelRange(channel);
+      }
       return color.toFormat("hsla").getChannelRange(channel);
     case "brightness":
       return color.toFormat("hsba").getChannelRange(channel);
+    case "a":
+    case "b":
+      return color.toFormat("oklab").getChannelRange(channel);
+    case "chroma":
+      return color.toFormat("oklch").getChannelRange(channel);
     case "red":
     case "green":
     case "blue":

package/dist/utils/get-gamut-overlay-path.d.mts

@@ -0,0 +1,33 @@
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
+
+interface GamutOverlayOptions {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+}
+interface GamutOverlayData {
+    path: string;
+    labelPosition: {
+        x: number;
+        y: number;
+    };
+}
+interface GamutOverlayComputeOptions {
+    /**
+     * Device pixel ratio; higher values sample more rows along brightness (Chrome DevTools–style).
+     * Default `1` when not passed (callers may pass `globalThis.devicePixelRatio` in browsers).
+     */
+    pixelRatio?: number | undefined;
+}
+/**
+ * Computes an SVG path (0–100 user units) tracing the sRGB gamut boundary
+ * over the HSB color area when in a wide-gamut output format (oklch/oklab).
+ *
+ * Approach (matching Chrome DevTools): treat the HSV area as Display P3 gamut,
+ * then for each brightness row, sweep saturation left→right to find where
+ * the P3 color exits the sRGB gamut.
+ */
+declare function getGamutOverlayData(areaValue: Color, axes: GamutOverlayOptions, format: ColorFormat, options?: GamutOverlayComputeOptions): GamutOverlayData | null;
+/** Visible boundary rows scale with DPR (analogous to Chrome `step = 1 / devicePixelRatio` in px space). */
+declare function gamutOverlayRowCount(pixelRatio: number): number;
+
+export { type GamutOverlayComputeOptions, type GamutOverlayData, gamutOverlayRowCount, getGamutOverlayData };

package/dist/utils/get-gamut-overlay-path.d.ts

@@ -0,0 +1,33 @@
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
+
+interface GamutOverlayOptions {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+}
+interface GamutOverlayData {
+    path: string;
+    labelPosition: {
+        x: number;
+        y: number;
+    };
+}
+interface GamutOverlayComputeOptions {
+    /**
+     * Device pixel ratio; higher values sample more rows along brightness (Chrome DevTools–style).
+     * Default `1` when not passed (callers may pass `globalThis.devicePixelRatio` in browsers).
+     */
+    pixelRatio?: number | undefined;
+}
+/**
+ * Computes an SVG path (0–100 user units) tracing the sRGB gamut boundary
+ * over the HSB color area when in a wide-gamut output format (oklch/oklab).
+ *
+ * Approach (matching Chrome DevTools): treat the HSV area as Display P3 gamut,
+ * then for each brightness row, sweep saturation left→right to find where
+ * the P3 color exits the sRGB gamut.
+ */
+declare function getGamutOverlayData(areaValue: Color, axes: GamutOverlayOptions, format: ColorFormat, options?: GamutOverlayComputeOptions): GamutOverlayData | null;
+/** Visible boundary rows scale with DPR (analogous to Chrome `step = 1 / devicePixelRatio` in px space). */
+declare function gamutOverlayRowCount(pixelRatio: number): number;
+
+export { type GamutOverlayComputeOptions, type GamutOverlayData, gamutOverlayRowCount, getGamutOverlayData };

package/dist/utils/get-gamut-overlay-path.js

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/get-gamut-overlay-path.ts
+var get_gamut_overlay_path_exports = {};
+__export(get_gamut_overlay_path_exports, {
+  gamutOverlayRowCount: () => gamutOverlayRowCount,
+  getGamutOverlayData: () => getGamutOverlayData
+});
+module.exports = __toCommonJS(get_gamut_overlay_path_exports);
+var import_color_utils = require("@zag-js/color-utils");
+function getGamutOverlayData(areaValue, axes, format, options) {
+  if (format !== "oklch" && format !== "oklab") return null;
+  if (axes.xChannel !== "saturation" || axes.yChannel !== "brightness") return null;
+  const hue = areaValue.getChannelValue("hue");
+  const pixelRatio = options?.pixelRatio ?? 1;
+  return buildDisplayP3GamutPath(hue, pixelRatio);
+}
+function gamutOverlayRowCount(pixelRatio) {
+  const pr = Math.max(1, pixelRatio);
+  return Math.min(200, Math.max(32, Math.round(80 * pr)));
+}
+function buildDisplayP3GamutPath(hue, pixelRatio) {
+  const steps = gamutOverlayRowCount(pixelRatio);
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const brightness = i / steps;
+    if (brightness < 0.01) continue;
+    let lo = 0;
+    let hi = 1;
+    for (let j = 0; j < 20; j++) {
+      const mid = (lo + hi) / 2;
+      if ((0, import_color_utils.isDisplayP3HsvInSrgbGamut)(hue, mid, brightness)) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+    const xp = Math.min(lo * 100, 100);
+    const yp = 100 - brightness * 100;
+    points.push({ x: xp, y: yp });
+  }
+  if (points.length < 2) return null;
+  const cmds = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`);
+  const labelY = 96;
+  let labelX = points[0].x;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i], b = points[i + 1];
+    if (a.y >= labelY && b.y <= labelY || a.y <= labelY && b.y >= labelY) {
+      const t = (labelY - a.y) / (b.y - a.y);
+      labelX = a.x + t * (b.x - a.x);
+      break;
+    }
+  }
+  if (points[0].y < labelY) labelX = points[0].x;
+  return {
+    path: cmds.join(" "),
+    labelPosition: { x: Math.min(labelX - 16, 99), y: labelY }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  gamutOverlayRowCount,
+  getGamutOverlayData
+});

package/dist/utils/get-gamut-overlay-path.mjs

@@ -0,0 +1,55 @@
+// src/utils/get-gamut-overlay-path.ts
+import { isDisplayP3HsvInSrgbGamut } from "@zag-js/color-utils";
+function getGamutOverlayData(areaValue, axes, format, options) {
+  if (format !== "oklch" && format !== "oklab") return null;
+  if (axes.xChannel !== "saturation" || axes.yChannel !== "brightness") return null;
+  const hue = areaValue.getChannelValue("hue");
+  const pixelRatio = options?.pixelRatio ?? 1;
+  return buildDisplayP3GamutPath(hue, pixelRatio);
+}
+function gamutOverlayRowCount(pixelRatio) {
+  const pr = Math.max(1, pixelRatio);
+  return Math.min(200, Math.max(32, Math.round(80 * pr)));
+}
+function buildDisplayP3GamutPath(hue, pixelRatio) {
+  const steps = gamutOverlayRowCount(pixelRatio);
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const brightness = i / steps;
+    if (brightness < 0.01) continue;
+    let lo = 0;
+    let hi = 1;
+    for (let j = 0; j < 20; j++) {
+      const mid = (lo + hi) / 2;
+      if (isDisplayP3HsvInSrgbGamut(hue, mid, brightness)) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+    const xp = Math.min(lo * 100, 100);
+    const yp = 100 - brightness * 100;
+    points.push({ x: xp, y: yp });
+  }
+  if (points.length < 2) return null;
+  const cmds = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`);
+  const labelY = 96;
+  let labelX = points[0].x;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i], b = points[i + 1];
+    if (a.y >= labelY && b.y <= labelY || a.y <= labelY && b.y >= labelY) {
+      const t = (labelY - a.y) / (b.y - a.y);
+      labelX = a.x + t * (b.x - a.x);
+      break;
+    }
+  }
+  if (points[0].y < labelY) labelX = points[0].x;
+  return {
+    path: cmds.join(" "),
+    labelPosition: { x: Math.min(labelX - 16, 99), y: labelY }
+  };
+}
+export {
+  gamutOverlayRowCount,
+  getGamutOverlayData
+};

package/dist/utils/get-gamut-overlay-path.test.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/get-gamut-overlay-path.test.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/get-gamut-overlay-path.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// src/utils/get-gamut-overlay-path.test.ts
+var import_vitest = require("vitest.js");
+var import_color_utils = require("@zag-js/color-utils");
+var import_get_gamut_overlay_path = require("./get-gamut-overlay-path.js");
+(0, import_vitest.describe)("get-gamut-overlay-path", () => {
+  const hsba = (0, import_color_utils.parseColor)("hsba(0, 100%, 100%, 1)");
+  (0, import_vitest.test)("wrong area axes returns null", () => {
+    (0, import_vitest.expect)(
+      (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "hue", yChannel: "saturation" }, "oklch", { pixelRatio: 1 })
+    ).toBeNull();
+  });
+  (0, import_vitest.test)("non-wide format returns null", () => {
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "hsla")).toBeNull();
+  });
+  (0, import_vitest.test)("higher pixelRatio increases row count and path complexity", () => {
+    const low = (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 1
+    });
+    const high = (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 2
+    });
+    (0, import_vitest.expect)(low).not.toBeNull();
+    (0, import_vitest.expect)(high).not.toBeNull();
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(2)).toBeGreaterThan((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(1));
+    (0, import_vitest.expect)(high.path.length).toBeGreaterThan(low.path.length);
+  });
+  (0, import_vitest.test)("gamutOverlayRowCount scales with DPR and caps at 200", () => {
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(1)).toBe(80);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(2)).toBe(160);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(100)).toBe(200);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(0.5)).toBe(80);
+  });
+});

package/dist/utils/get-gamut-overlay-path.test.mjs

@@ -0,0 +1,33 @@
+// src/utils/get-gamut-overlay-path.test.ts
+import { describe, expect, test } from "vitest.mjs";
+import { parseColor } from "@zag-js/color-utils";
+import { gamutOverlayRowCount, getGamutOverlayData } from "./get-gamut-overlay-path.mjs";
+describe("get-gamut-overlay-path", () => {
+  const hsba = parseColor("hsba(0, 100%, 100%, 1)");
+  test("wrong area axes returns null", () => {
+    expect(
+      getGamutOverlayData(hsba, { xChannel: "hue", yChannel: "saturation" }, "oklch", { pixelRatio: 1 })
+    ).toBeNull();
+  });
+  test("non-wide format returns null", () => {
+    expect(getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "hsla")).toBeNull();
+  });
+  test("higher pixelRatio increases row count and path complexity", () => {
+    const low = getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 1
+    });
+    const high = getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 2
+    });
+    expect(low).not.toBeNull();
+    expect(high).not.toBeNull();
+    expect(gamutOverlayRowCount(2)).toBeGreaterThan(gamutOverlayRowCount(1));
+    expect(high.path.length).toBeGreaterThan(low.path.length);
+  });
+  test("gamutOverlayRowCount scales with DPR and caps at 200", () => {
+    expect(gamutOverlayRowCount(1)).toBe(80);
+    expect(gamutOverlayRowCount(2)).toBe(160);
+    expect(gamutOverlayRowCount(100)).toBe(200);
+    expect(gamutOverlayRowCount(0.5)).toBe(80);
+  });
+});

package/dist/utils/get-slider-background.d.mts

@@ -1,5 +1,6 @@
 import { ChannelProps, ColorPickerProps } from '../color-picker.types.mjs';
 import { Color } from '@zag-js/color-utils';
+import './get-gamut-overlay-path.mjs';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/utils/get-slider-background.d.ts

@@ -1,5 +1,6 @@
 import { ChannelProps, ColorPickerProps } from '../color-picker.types.js';
 import { Color } from '@zag-js/color-utils';
+import './get-gamut-overlay-path.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/utils/get-slider-background.js

@@ -36,8 +36,14 @@ var getSliderBackground = (props) => {
   const { channel, value, dir, orientation } = props;
   const bgDirection = getSliderBackgroundDirection(orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
+  const fmt = value.getFormat();
   switch (channel) {
     case "hue":
+      if (fmt === "oklch") {
+        const L = value.getChannelValue("lightness");
+        const C = value.getChannelValue("chroma");
+        return `linear-gradient(to ${bgDirection} in oklch increasing hue, oklch(${L} ${C} 0), oklch(${L} ${C} 360))`;
+      }
       return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
     case "lightness": {
       let start = value.withChannelValue(channel, minValue).toString("css");
@@ -50,9 +56,18 @@ var getSliderBackground = (props) => {
     case "red":
     case "green":
     case "blue":
-    case "alpha": {
+    case "alpha":
+    case "a":
+    case "b":
+    case "chroma": {
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
+      if (fmt === "oklab" && (channel === "a" || channel === "b")) {
+        return `linear-gradient(to ${bgDirection} in oklab, ${start}, ${end})`;
+      }
+      if (fmt === "oklch" && channel === "chroma") {
+        return `linear-gradient(to ${bgDirection} in oklch, ${start}, ${end})`;
+      }
       return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
     }
     default: