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

package/src/calendar/createRangeCalendarState.ts

@@ -107,6 +107,8 @@ export interface RangeCalendarStateProps<T extends DateValue = DateValue> {
   isDateDisabled?: (date: DateValue) => boolean;
   /** Validation state. */
   validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Whether the current selection is invalid according to application logic. */
+  isInvalid?: boolean;
   /** Whether to allow selecting the same date for start and end. */
   allowsNonContiguousRanges?: boolean;
   /** The first day of the week (0 = Sunday, 1 = Monday, etc.). */
@@ -315,10 +317,14 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
 
   const rawAlignStart = (date: CalendarDate): CalendarDate => startOfMonth(date);
 
-  const rawAlignEnd = (date: CalendarDate): CalendarDate =>
-    startOfMonth(date).subtract({ months: Math.max(visibleMonths() - 1, 0) });
+  const rawAlignEnd = (date: CalendarDate, months = visibleMonths()): CalendarDate =>
+    startOfMonth(date).subtract({ months: Math.max(months - 1, 0) });
 
-  const constrainVisibleRangeStart = (date: CalendarDate, aligned: CalendarDate): CalendarDate => {
+  const constrainVisibleRangeStart = (
+    date: CalendarDate,
+    aligned: CalendarDate,
+    months = visibleMonths(),
+  ): CalendarDate => {
     const minValue = access(props.minValue);
     const maxValue = access(props.maxValue);
     let constrained = aligned;
@@ -331,7 +337,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     }
 
     if (maxValue && date.compare(toDisplayCalendarDate(maxValue)) <= 0) {
-      const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue));
+      const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue), months);
       if (maxStart.compare(constrained) < 0) {
         constrained = maxStart;
       }
@@ -355,8 +361,11 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return constrainVisibleRangeStart(date, rawAlignStart(date).subtract({ months: offset }));
   };
 
+  // A controlled null is a cleared selection. Pin useControlledState treats
+  // `value !== undefined` as controlled, so null must not fall through to defaultValue.
   const defaultSelectionAlignment = (): RangeCalendarSelectionAlignment => {
-    const currentValue = access(props.value) ?? props.defaultValue;
+    const controlled = access(props.value);
+    const currentValue = controlled !== undefined ? controlled : props.defaultValue;
     if (!currentValue?.start || !currentValue?.end) {
       return "center";
     }
@@ -388,10 +397,11 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return toDisplayCalendarDate(props.defaultFocusedValue);
     }
     const controlledValue = access(props.value);
-    if (controlledValue?.start) {
-      return toDisplayCalendarDate(controlledValue.start);
-    }
-    if (props.defaultValue?.start) {
+    if (controlledValue !== undefined) {
+      if (controlledValue?.start) {
+        return toDisplayCalendarDate(controlledValue.start);
+      }
+    } else if (props.defaultValue?.start) {
       return toDisplayCalendarDate(props.defaultValue.start);
     }
     return intlToCalendar(today(timeZone), calendar());
@@ -451,7 +461,10 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       isDateOutsideRange(toDisplayCalendarDate(v.end), minCal, maxCal)
     );
   });
-  const isValueInvalid = createMemo(() => validationState() === "invalid" || isInvalidSelection());
+  const isValueInvalid = createMemo(
+    () =>
+      Boolean(access(props.isInvalid)) || validationState() === "invalid" || isInvalidSelection(),
+  );
 
   // Highlighted range during selection
   const highlightedRange = createMemo<RangeValue<CalendarDate> | null>(() => {
@@ -736,17 +749,21 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // advance the grid.
   const focusPreviousPage = () => {
     const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
-    const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.subtract({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
     props.onFocusChange?.(nextFocusedDate);
   };
 
   const focusNextPage = () => {
     const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
-    const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+    const currentFocused = focusedDate();
+    const nextFocusedDate = constrainDate(currentFocused.add({ months: pageMonths }));
+    const slidStart = startOfMonth(visibleRangeStart().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
+    setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
     props.onFocusChange?.(nextFocusedDate);
   };
 
@@ -881,9 +898,18 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   const focusNearestAvailableDate = (anchor: CalendarDate) => {
-    // RAC `useRangeCalendarState.ts:261-273`: prefer anchor+1, else −1, skip invalid.
-    const isDateInvalid = (candidate: CalendarDate) =>
-      isInvalid(candidate) || isDateOutsideAllowedRange(candidate);
+    // RAC `useRangeCalendarState.ts:261-273`: prefer anchor+1, else −1.
+    // Invalid is outside min/max or this anchor's contiguous span. A day in
+    // the next month, or an unavailable day when non-contiguous ranges are
+    // allowed, is still a valid focus target.
+    const passedRange = getAvailableRange(anchor);
+    const isDateInvalid = (candidate: CalendarDate) => {
+      if (isDateOutsideAllowedRange(candidate)) return true;
+      const calDate = toDisplayCalendarDate(candidate);
+      if (passedRange?.start && calDate.compare(passedRange.start) < 0) return true;
+      if (passedRange?.end && calDate.compare(passedRange.end) > 0) return true;
+      return false;
+    };
     let nextDay = anchor.add({ days: 1 });
     if (isDateInvalid(nextDay)) {
       nextDay = anchor.subtract({ days: 1 });

package/src/calendar/createTimeFieldState.ts

@@ -122,7 +122,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
  * consumers.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface TimeFieldState<T extends TimeValue = Time> extends DateFieldState {
+export interface TimeFieldState<_T extends TimeValue = Time> extends DateFieldState {
   /** The current value in the `Time`/`CalendarDateTime`/`ZonedDateTime` domain. */
   timeValue: Accessor<TimeValue | null>;
 }

package/src/checkbox/createCheckboxGroupState.ts

@@ -25,6 +25,7 @@ import { createMemo, Accessor } from "solid-js";
 import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import {
   createFormValidationState,
+  mergeValidation,
   type FormValidationState,
   type ValidationFunction,
   type ValidationResult,
@@ -98,6 +99,8 @@ export interface CheckboxGroupState extends Pick<
   removeValue(value: string): void;
   /** Toggles a value in the set of selected values. */
   toggleValue(value: string): void;
+  /** Records one checkbox's validation and merges it into the group. */
+  setInvalid(value: string, validation: ValidationResult): void;
 
   /** Current display validation result for the group. */
   readonly displayValidation: Accessor<ValidationResult>;
@@ -195,6 +198,18 @@ export function createCheckboxGroupState(
     }
   }
 
+  const invalidValues = new Map<string, ValidationResult>();
+
+  function setInvalid(itemValue: string, result: ValidationResult): void {
+    if (result.isInvalid) {
+      invalidValues.set(itemValue, result);
+    } else {
+      invalidValues.delete(itemValue);
+    }
+
+    validation.updateValidation(mergeValidation(...invalidValues.values()));
+  }
+
   function toggleValue(toggleVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -227,6 +242,7 @@ export function createCheckboxGroupState(
     addValue,
     removeValue,
     toggleValue,
+    setInvalid,
     realtimeValidation: validation.realtimeValidation,
     displayValidation: validation.displayValidation,
     updateValidation: validation.updateValidation,

package/src/collections/createListState.ts

@@ -23,7 +23,7 @@
 
 import { createMemo, createEffect } from "solid-js";
 import type { Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { propsAccessor, type MaybeAccessor } from "../utils";
 import { ListCollection } from "./ListCollection";
 import type { SelectionState, SelectionPressEvent } from "./createSelectionState";
 import { createMultipleSelectionState } from "../selection/createMultipleSelectionState";
@@ -91,7 +91,7 @@ export interface ListState<T = unknown> extends SelectionState {
 export function createListState<T = unknown>(
   props: MaybeAccessor<ListStateProps<T>>,
 ): ListState<T> {
-  const getProps = () => access(props);
+  const getProps = propsAccessor(props);
 
   // Build collection from items (memoized to avoid rebuilding on every access)
   const collection: Accessor<Collection<T>> = createMemo(() => {
@@ -349,7 +349,7 @@ export interface SingleSelectListState<T = unknown> extends ListState<T> {
 export function createSingleSelectListState<T = unknown>(
   props: MaybeAccessor<SingleSelectListStateProps<T>>,
 ): SingleSelectListState<T> {
-  const getProps = () => access(props);
+  const getProps = propsAccessor(props);
 
   // Convert single selection props to multiple selection props
   const listState = createListState<T>({
@@ -376,7 +376,7 @@ export function createSingleSelectListState<T = unknown>(
     allowDuplicateSelectionEvents: true,
     get selectedKeys() {
       const key = getProps().selectedKey;
-      return key != null ? [key] : [];
+      return key !== undefined ? (key != null ? [key] : []) : undefined;
     },
     get defaultSelectedKeys() {
       const key = getProps().defaultSelectedKey;

package/src/collections/createMenuState.ts

@@ -10,17 +10,32 @@
  * governing permissions and limitations under the License.
  */
 
+/*
+ * Copyright 2023 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/menu/useMenuTriggerState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/menu/useSubmenuTriggerState.ts
 
 /**
  * State management for menu components.
  *
  * createMenuTriggerState is ported from
  * packages/react-stately/src/menu/useMenuTriggerState.ts.
+ * createSubmenuTriggerState is ported from
+ * packages/react-stately/src/menu/useSubmenuTriggerState.ts.
  * createMenuState is a local composition of the separately attributed list state.
  */
 
-import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+import { createInternalSignal, propsAccessor, type MaybeAccessor } from "../utils";
 
 import { createOverlayTriggerState, type OverlayTriggerProps } from "../overlays";
 import { createListState, type ListState, type ListStateProps } from "./createListState";
@@ -45,7 +60,7 @@ export interface MenuState<T = unknown> extends ListState<T> {
 export function createMenuState<T = unknown>(
   props: MaybeAccessor<MenuStateProps<T>>,
 ): MenuState<T> {
-  const getProps = () => access(props);
+  const getProps = propsAccessor(props);
 
   // Menus default to action-only items, but can opt into single or multiple selection.
   const listState = createListState<T>({
@@ -134,15 +149,51 @@ export interface MenuTriggerState {
   setPoint(point: { x: number; y: number }): void;
 }
 
+export interface RootMenuTriggerState extends MenuTriggerState {
+  /** Opens a submenu tied to a menu item at a level. */
+  openSubmenu(triggerKey: Key, level: number): void;
+  /** Closes a submenu tied to a menu item at a level. */
+  closeSubmenu(triggerKey: Key, level: number): void;
+  /**
+   * Open submenu trigger keys. The index matches the submenu level.
+   */
+  readonly expandedKeysStack: () => Key[];
+}
+
 /**
  * Creates state for a menu trigger. Mirrors `@react-stately/menu` `useMenuTriggerState`:
- * overlay open state plus the focus strategy passed through to `createMenu`.
+ * overlay open state, the focus strategy passed through to `createMenu`, and the
+ * expanded submenu stack.
  */
 export function createMenuTriggerState(
   props: MaybeAccessor<MenuTriggerProps> = {},
-): MenuTriggerState {
+): RootMenuTriggerState {
   const overlay = createOverlayTriggerState(props);
   const [focusStrategy, setFocusStrategy] = createInternalSignal<"first" | "last" | null>(null);
+  const [expandedKeysStack, setExpandedKeysStack] = createInternalSignal<Key[]>([]);
+
+  const openSubmenu = (triggerKey: Key, level: number) => {
+    setExpandedKeysStack((oldStack) => {
+      if (level > oldStack.length) {
+        return oldStack;
+      }
+      return [...oldStack.slice(0, level), triggerKey];
+    });
+  };
+
+  const closeSubmenu = (triggerKey: Key, level: number) => {
+    setExpandedKeysStack((oldStack) => {
+      if (oldStack[level] !== triggerKey) {
+        return oldStack;
+      }
+      return oldStack.slice(0, level);
+    });
+  };
+
+  const close = () => {
+    setExpandedKeysStack([]);
+    overlay.close();
+  };
 
   return {
     ...overlay,
@@ -156,5 +207,84 @@ export function createMenuTriggerState(
       setFocusStrategy(strategy);
       overlay.toggle();
     },
+    close,
+    expandedKeysStack,
+    openSubmenu,
+    closeSubmenu,
+  };
+}
+
+export interface SubmenuTriggerProps {
+  /** Key of the trigger item. */
+  triggerKey: Key;
+}
+
+export interface SubmenuTriggerState {
+  /** Whether the submenu is currently open. */
+  readonly isOpen: () => boolean;
+  /** Controls which item will be auto focused when the submenu opens. */
+  readonly focusStrategy: () => "first" | "last" | null;
+  /** The level of the submenu, frozen when the state is created. */
+  readonly submenuLevel: number;
+  /** Opens the submenu. */
+  open(focusStrategy?: "first" | "last" | null): void;
+  /** Closes the submenu. */
+  close(): void;
+  /** Closes the root menu and every submenu in the tree. */
+  closeAll(): void;
+  /** Toggles the submenu. */
+  toggle(focusStrategy?: "first" | "last" | null): void;
+  /** @private Placeholder so this state can sit where an overlay trigger state sits. */
+  setOpen(): void;
+  /** Submenus do not track a cursor point. */
+  readonly point: null;
+  /** @private */
+  setPoint(): void;
+}
+
+/**
+ * Creates state for a submenu trigger. Mirrors `@react-stately/menu`
+ * `useSubmenuTriggerState`: open state is the root stack entry at this level.
+ */
+export function createSubmenuTriggerState(
+  props: MaybeAccessor<SubmenuTriggerProps>,
+  state: RootMenuTriggerState,
+): SubmenuTriggerState {
+  const getProps = propsAccessor(props);
+  const submenuLevel = state.expandedKeysStack().length;
+  const [focusStrategy, setFocusStrategy] = createInternalSignal<"first" | "last" | null>(null);
+
+  const isOpen = () => state.expandedKeysStack()[submenuLevel] === getProps().triggerKey;
+
+  const open = (strategy?: "first" | "last" | null) => {
+    setFocusStrategy(strategy ?? null);
+    state.openSubmenu(getProps().triggerKey, submenuLevel);
+  };
+
+  const close = () => {
+    setFocusStrategy(null);
+    state.closeSubmenu(getProps().triggerKey, submenuLevel);
+  };
+
+  const toggle = (strategy?: "first" | "last" | null) => {
+    setFocusStrategy(strategy ?? null);
+    if (isOpen()) {
+      close();
+    } else {
+      open(strategy);
+    }
+  };
+
+  return {
+    focusStrategy,
+    isOpen,
+    open,
+    close,
+    closeAll: () => state.close(),
+    submenuLevel,
+    setOpen() {},
+    toggle,
+    point: null,
+    setPoint() {},
   };
 }

package/src/collections/createSelectionState.ts

@@ -22,7 +22,7 @@
 
 import { createMemo } from "solid-js";
 import type { Accessor } from "solid-js";
-import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
+import { createInternalSignal, propsAccessor, readNow, type MaybeAccessor } from "../utils";
 import type {
   Collection,
   DisabledBehavior,
@@ -117,7 +117,7 @@ export interface SelectionPressEvent {
 export function createSelectionState(
   props: MaybeAccessor<SelectionStateProps> = {},
 ): SelectionState {
-  const getProps = () => access(props);
+  const getProps = propsAccessor(props);
 
   // Selection behavior state
   const [internalBehavior, setInternalBehavior] = createInternalSignal<SelectionBehavior>("toggle");

package/src/collections/index.ts

@@ -46,10 +46,14 @@ export {
 export {
   createMenuState,
   createMenuTriggerState,
+  createSubmenuTriggerState,
   type MenuStateProps,
   type MenuState,
   type MenuTriggerType,
   type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
+  type RootMenuTriggerState,
+  type SubmenuTriggerProps,
+  type SubmenuTriggerState,
 } from "./createMenuState";

package/src/color/createColorAreaState.ts

@@ -45,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. */
@@ -72,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. */
@@ -104,6 +108,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
 
   // Internal value state
   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
@@ -182,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();
@@ -283,6 +298,9 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
     get value() {
       return value();
     },
+    get defaultValue() {
+      return controlledInitial ?? initialValue;
+    },
     get xChannel() {
       return xChannel();
     },
@@ -314,6 +332,7 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
     getYValue,
     setXValue,
     setYValue,
+    setValue,
     setColorFromPoint,
     getThumbPosition,
     incrementX,

package/src/color/createColorFieldState.ts

@@ -57,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. */
@@ -212,6 +214,15 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const getOptions = () => options();
   const initialOptions = getOptions();
   const initialValue = getDefaultValue(initialOptions);
+  // 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(
@@ -224,6 +235,9 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
     ),
   );
   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);
@@ -249,6 +263,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   createEffect(
     () => formatCurrentValue(),
     (formatted) => {
+      isChannelInputEdited = false;
       setInputValueInternal(formatted);
       setInvalidInput(false);
     },
@@ -262,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);
   };
@@ -275,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 = 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") => {
@@ -322,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 = () => {
@@ -397,6 +446,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
     get colorValue() {
       return colorValue();
     },
+    defaultColorValue,
     get inputValue() {
       return inputValue();
     },