@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/collections/types.ts

@@ -1,9 +1,42 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/collections.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/selection.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/collections/BaseCollection.ts
+
 /**
  * Core types for collection state management.
- * Simplified from @react-stately/collections for SolidJS.
+ * Collection state types for SolidJS.
+ *
+ * Ported from:
+ * - packages/@react-types/shared/src/collections.d.ts
+ * - packages/@react-types/shared/src/selection.d.ts
+ * - packages/react-aria/src/collections/BaseCollection.ts
  */
 
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
 /** A unique identifier for an item in a collection. */
 export type Key = string | number;

package/src/color/Color.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/Color.ts
+
 /**
  * Color class implementation.
- * Based on @react-stately/color.
+ * Ported from packages/react-stately/src/color/Color.ts.
  *
  * Provides color manipulation, conversion, and formatting.
  */
@@ -12,9 +26,6 @@ import type {
   ColorChannel,
   ColorChannelRange,
   ColorAxes,
-  RGBColor,
-  HSLColor,
-  HSBColor,
 } from "./types";
 import { getColorStringForLocale, formatColorMessage, type ColorStringKey } from "./intl";
 
@@ -73,6 +84,17 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+/**
+ * Normalizes a hue value to [0, 360).
+ * Preserves 360 so linear hue sliders can reach the end of their track.
+ */
+export function normalizeHue(hue: number): number {
+  if (hue === 360) {
+    return hue;
+  }
+  return ((hue % 360) + 360) % 360;
+}
+
 /**
  * Round to fixed decimal places.
  */
@@ -563,7 +585,7 @@ class HSLColorImpl implements Color {
   constructor(hue: number, saturation: number, lightness: number, alpha: number = 1) {
     // Store raw like upstream HSLColor's constructor — precision comes from the
     // conversion (toFixed(_, 2)); rounding to integers here diverged from S2.
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.lightness = clamp(lightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -583,9 +605,16 @@ class HSLColorImpl implements Color {
       }
       case "hsb":
       case "hsba": {
-        const { r, g, b } = hslToRgb(this.hue, this.saturation, this.lightness);
-        const hsb = rgbToHsb(r, g, b);
-        return new HSBColorImpl(hsb.h, hsb.s, hsb.b, this.alpha);
+        const saturation = this.saturation / 100;
+        const lightness = this.lightness / 100;
+        const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+        const hsbSaturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+        return new HSBColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hsbSaturation * 100, 2),
+          toFixed(brightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -688,7 +717,7 @@ class HSLColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -738,7 +767,7 @@ class HSBColorImpl implements Color {
 
   constructor(hue: number, saturation: number, brightness: number, alpha: number = 1) {
     // Store raw like upstream HSBColor's constructor (see HSLColorImpl).
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.brightness = clamp(brightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -758,9 +787,19 @@ class HSBColorImpl implements Color {
       }
       case "hsl":
       case "hsla": {
-        const { r, g, b } = hsbToRgb(this.hue, this.saturation, this.brightness);
-        const hsl = rgbToHsl(r, g, b);
-        return new HSLColorImpl(hsl.h, hsl.s, hsl.l, this.alpha);
+        const saturation = this.saturation / 100;
+        const brightness = this.brightness / 100;
+        const lightness = brightness * (1 - saturation / 2);
+        const hslSaturation =
+          lightness === 0 || lightness === 1
+            ? 0
+            : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+        return new HSLColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hslSaturation * 100, 2),
+          toFixed(lightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -862,7 +901,7 @@ class HSBColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -956,24 +995,24 @@ export function parseColor(value: string): Color {
 
   // HSL/HSLA format
   const hslMatch = trimmed.match(
-    /^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsla?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hslMatch) {
-    const h = parseInt(hslMatch[1], 10);
-    const s = parseInt(hslMatch[2], 10);
-    const l = parseInt(hslMatch[3], 10);
+    const h = parseFloat(hslMatch[1]);
+    const s = parseFloat(hslMatch[2]);
+    const l = parseFloat(hslMatch[3]);
     const a = hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1;
     return new HSLColorImpl(h, s, l, a);
   }
 
   // HSB/HSBA format
   const hsbMatch = trimmed.match(
-    /^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsba?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hsbMatch) {
-    const h = parseInt(hsbMatch[1], 10);
-    const s = parseInt(hsbMatch[2], 10);
-    const b = parseInt(hsbMatch[3], 10);
+    const h = parseFloat(hsbMatch[1]);
+    const s = parseFloat(hsbMatch[2]);
+    const b = parseFloat(hsbMatch[3]);
     const a = hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1;
     return new HSBColorImpl(h, s, b, a);
   }

package/src/color/createColorAreaState.ts

@@ -1,11 +1,27 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorAreaState.ts
+
 /**
  * ColorArea state management.
  * Based on @react-stately/color useColorAreaState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorAxes, ColorSpace } from "./types";
 import { normalizeColor } from "./Color";
+import { createInternalSignal } from "../utils";
 
 export interface ColorAreaStateOptions {
   /** The current color value (controlled). */
@@ -29,6 +45,8 @@ export interface ColorAreaStateOptions {
 export interface ColorAreaState {
   /** The current color value. */
   readonly value: Color;
+  /** The color a native form reset restores. */
+  readonly defaultValue: Color;
   /** The X axis channel. */
   readonly xChannel: ColorChannel;
   /** The Y axis channel. */
@@ -56,6 +74,8 @@ export interface ColorAreaState {
   setXValue(value: number): void;
   /** Set the Y channel value. */
   setYValue(value: number): void;
+  /** Replace the color. */
+  setValue(value: Color | string): void;
   /** Set color from a point (0-1, 0-1). */
   setColorFromPoint(x: number, y: number): void;
   /** Get the thumb position as percentages. */
@@ -87,8 +107,15 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   };
 
   // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(null);
+  // Pin useColorAreaState returns the first controlled color as defaultValue
+  // so a native form reset restores that color. The built-in red is only the
+  // uncontrolled fallback when no defaultValue was passed.
+  const firstOptions = getOptions();
+  const controlledInitial =
+    firstOptions.value !== undefined ? normalizeValue(firstOptions.value) : undefined;
+  const initialValue = normalizeValue(firstOptions.defaultValue ?? "#ff0000");
+  const [isDragging, setIsDragging] = createInternalSignal(false);
 
   // Initialize internal value
   const initValue = () => {
@@ -141,10 +168,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   const xChannelPageStep = createMemo(() => xRange().pageSize);
   const yChannelPageStep = createMemo(() => yRange().pageSize);
 
+  let lastValue: Color | null = internalValue();
+
   // Update value
   const updateValue = (newColor: Color) => {
     const opts = getOptions();
     const nextColor = opts.colorSpace ? newColor.toFormat(opts.colorSpace) : newColor;
+    lastValue = nextColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
@@ -163,6 +193,10 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   // Get Y value
   const getYValue = () => value().getChannelValue(yChannel());
 
+  const setValue = (newValue: Color | string) => {
+    updateValue(normalizeValue(newValue));
+  };
+
   // Set X value
   const setXValue = (newValue: number) => {
     const range = xRange();
@@ -245,7 +279,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
 
     // Call onChangeEnd when dragging ends
     if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
+      const opts = getOptions();
+      const current =
+        lastValue ??
+        (opts.value !== undefined ? normalizeValue(opts.value) : null) ??
+        internalValue() ??
+        value();
+      opts.onChangeEnd?.(current);
     }
   };
 
@@ -258,6 +298,9 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
     get value() {
       return value();
     },
+    get defaultValue() {
+      return controlledInitial ?? initialValue;
+    },
     get xChannel() {
       return xChannel();
     },
@@ -289,6 +332,7 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
     getYValue,
     setXValue,
     setYValue,
+    setValue,
     setColorFromPoint,
     getThumbPosition,
     incrementX,

package/src/color/createColorFieldState.ts

@@ -1,11 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorChannelFieldState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorFieldState.ts
+
 /**
  * ColorField state management.
  * Based on @react-stately/color useColorFieldState and useColorChannelFieldState.
  */
 
-import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace } from "./types";
 import { createRGBColor, normalizeColor, parseColor } from "./Color";
+import { createInternalSignal, readNow } from "../utils";
 
 const HEX_COLOR_MAX = 0xffffff;
 const PARTIAL_HEX_PATTERN = /^#?[0-9a-f]{0,6}$/i;
@@ -40,6 +57,8 @@ export interface ColorFieldState {
   readonly value: Color | null;
   /** The color used for channel calculations. */
   readonly colorValue: Color;
+  /** The color a native form reset restores. */
+  readonly defaultColorValue: Color | null;
   /** The current input text. */
   readonly inputValue: string;
   /** The numeric value exposed by channel fields. */
@@ -145,7 +164,13 @@ function formatColorValue(
     return displayColor.formatChannelValue(channel, locale);
   }
 
-  return displayColor.toString(format ?? "hex");
+  const formatted = displayColor.toString(format ?? "hex");
+  const resolvedFormat = format ?? "hex";
+  if (resolvedFormat === "hex" || resolvedFormat === "hexa") {
+    return formatted.toUpperCase();
+  }
+
+  return formatted;
 }
 
 function normalizeHexInput(value: string): string {
@@ -189,9 +214,18 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const getOptions = () => options();
   const initialOptions = getOptions();
   const initialValue = getDefaultValue(initialOptions);
-
-  const [internalValue, setInternalValue] = createSignal<Color | null>(initialValue);
-  const [inputValue, setInputValueInternal] = createSignal(
+  // Form reset restores the first defaultValue, or the first controlled color
+  // when that default was omitted. An explicit null default falls through.
+  const initialDefault =
+    initialOptions.defaultValue !== undefined
+      ? normalizeNullableColor(initialOptions.defaultValue)
+      : undefined;
+  const firstColor =
+    initialOptions.value !== undefined ? normalizeNullableColor(initialOptions.value) : undefined;
+  const defaultColorValue = initialDefault ?? firstColor ?? null;
+
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(initialValue);
+  const [inputValue, setInputValueInternal] = createInternalSignal(
     formatColorValue(
       initialValue,
       initialOptions.channel,
@@ -200,7 +234,10 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
       initialOptions.locale ?? "en-US",
     ),
   );
-  const [invalidInput, setInvalidInput] = createSignal(false);
+  const [invalidInput, setInvalidInput] = createInternalSignal(false);
+  // Formatted channel text may round the accepted number. Only user edits
+  // should parse that text back into a new numerical value.
+  let isChannelInputEdited = false;
 
   const channel = createMemo(() => getOptions().channel);
   const colorSpace = createMemo(() => getOptions().colorSpace);
@@ -223,10 +260,14 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const formatCurrentValue = (color: Color | null = value()) =>
     formatColorValue(color, channel(), colorSpace(), getOptions().colorFormat, locale());
 
-  createEffect(() => {
-    setInputValueInternal(formatCurrentValue());
-    setInvalidInput(false);
-  });
+  createEffect(
+    () => formatCurrentValue(),
+    (formatted) => {
+      isChannelInputEdited = false;
+      setInputValueInternal(formatted);
+      setInvalidInput(false);
+    },
+  );
 
   const updateValue = (newColor: Color | null) => {
     const opts = getOptions();
@@ -236,11 +277,13 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
     }
 
     opts.onChange?.(newColor);
+    isChannelInputEdited = false;
     setInputValueInternal(formatCurrentValue(newColor));
     setInvalidInput(false);
   };
 
   const setInputValue = (text: string) => {
+    isChannelInputEdited = true;
     setInputValueInternal(text);
     setInvalidInput(false);
   };
@@ -249,45 +292,74 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
     updateValue(newColor);
   };
 
+  // Methods can run before Solid's value memo observes an earlier write.
+  const currentValue = () => {
+    const opts = getOptions();
+    return opts.value !== undefined ? normalizeNullableColor(opts.value) : readNow(internalValue);
+  };
+
   const commit = () => {
-    const text = inputValue().trim();
+    const text = readNow(inputValue).trim();
     const opts = getOptions();
     const chan = channel();
+    const current = currentValue();
 
     if (!text) {
-      updateValue(null);
-      return;
-    }
-
-    if (chan) {
-      const displayColor = colorValue();
+      if (current !== null) updateValue(null);
+    } else if (chan) {
+      const displayColor = getDisplayColor(current, colorSpace());
       const rawValue = parseChannelValue(text, displayColor, chan);
-      if (rawValue == null) {
-        setInputValueInternal(formatCurrentValue());
-        setInvalidInput(false);
-        return;
+      if (isChannelInputEdited && rawValue !== null) {
+        const next = displayColor.withChannelValue(chan, rawValue);
+        if (current === null || next.getChannelValue(chan) !== displayColor.getChannelValue(chan)) {
+          updateValue(next);
+        }
+      }
+    } else {
+      try {
+        const next = parseHexValue(text, opts.colorFormat);
+        // Whole hex edits compare RGB; hexa also edits alpha. This is not
+        // the equality policy for channel edits or the public color setter.
+        if (
+          current === null ||
+          next.toHexInt() !== current.toHexInt() ||
+          (opts.colorFormat === "hexa" &&
+            next.getChannelValue("alpha") !== current.getChannelValue("alpha"))
+        ) {
+          updateValue(next);
+        }
+      } catch {
+        // Invalid text rolls back to the accepted color below.
       }
-
-      updateValue(displayColor.withChannelValue(chan, rawValue));
-      return;
     }
 
+    // Read after onChange: a controlled parent may accept or refuse the
+    // request. Later signal acceptance is handled by the formatting effect.
+    isChannelInputEdited = false;
+    setInputValueInternal(formatCurrentValue(currentValue()));
+    setInvalidInput(false);
+  };
+
+  const incrementHex = (amount: number) => {
+    // Step the text being edited. A missing or unparseable hex starts at black,
+    // matching useColorFieldState's addColorValue(parsedValue, step).
+    const text = readNow(inputValue);
+    let parsed: Color | null = null;
     try {
-      updateValue(parseHexValue(text, opts.colorFormat));
+      parsed = parseColor(text.startsWith("#") ? text : `#${text}`);
     } catch {
-      setInputValueInternal(formatCurrentValue());
-      setInvalidInput(false);
+      parsed = null;
     }
-  };
 
-  const incrementHex = (amount: number) => {
-    const currentColor = value();
-    if (!currentColor) {
+    const base = parsed ?? hexIntToColor(0);
+    const nextColor = hexIntToColor(base.toFormat("rgb").toHexInt() + amount);
+    const current = value();
+    if (current && current.toFormat("rgb").toHexInt() === nextColor.toHexInt()) {
       return;
     }
 
-    const newColor = hexIntToColor(currentColor.toFormat("rgb").toHexInt() + amount);
-    updateValue(getOptions().colorFormat ? newColor.toFormat(getOptions().colorFormat!) : newColor);
+    const format = getOptions().colorFormat;
+    updateValue(format ? nextColor.toFormat(format) : nextColor);
   };
 
   const updateChannel = (amount: number | "min" | "max") => {
@@ -296,17 +368,20 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
       return;
     }
 
-    const displayColor = colorValue();
+    const current = currentValue();
+    const displayColor = getDisplayColor(current, colorSpace());
     const range = displayColor.getChannelRange(chan);
-    const currentValue = displayColor.getChannelValue(chan);
+    const currentChannel = displayColor.getChannelValue(chan);
     const nextValue =
       amount === "min"
         ? range.minValue
         : amount === "max"
           ? range.maxValue
-          : Math.min(range.maxValue, Math.max(range.minValue, currentValue + amount));
+          : Math.min(range.maxValue, Math.max(range.minValue, currentChannel + amount));
 
-    updateValue(displayColor.withChannelValue(chan, nextValue));
+    const next = displayColor.withChannelValue(chan, nextValue);
+    if (current !== null && next.getChannelValue(chan) === currentChannel) return;
+    updateValue(next);
   };
 
   const increment = () => {
@@ -350,7 +425,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   };
 
   const validate = (candidate?: string) => {
-    const text = (candidate ?? inputValue()).trim();
+    const text = (candidate ?? readNow(inputValue)).trim();
     const chan = channel();
 
     if (!text) {
@@ -371,6 +446,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
     get colorValue() {
       return colorValue();
     },
+    defaultColorValue,
     get inputValue() {
       return inputValue();
     },