stimeo-ui 0.14.0 → 0.16.0

data/dist/controllers/checkbox_controller.js

@@ -2,6 +2,78 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/checkbox_controller.ts
 
+// src/utils/form_reset_watcher.ts
+var FormResetWatcher = class {
+  #owns;
+  #onReset;
+  #frames = /* @__PURE__ */ new Set();
+  #generation = 0;
+  /**
+   * @param owns - whether `form` owns a control this controller derives from.
+   * @param onReset - the reconciliation pass, run once per honoured reset.
+   */
+  constructor(owns, onReset) {
+    this.#owns = owns;
+    this.#onReset = onReset;
+  }
+  /** Subscribes to `reset` at the document; call from `connect()`. Idempotent. */
+  observe() {
+    document.addEventListener("reset", this.#handleReset, true);
+  }
+  /** Unsubscribes and drops every pending pass; call from `disconnect()`. */
+  disconnect() {
+    document.removeEventListener("reset", this.#handleReset, true);
+    this.#generation += 1;
+    for (const frame of this.#frames) cancelAnimationFrame(frame);
+    this.#frames.clear();
+  }
+  #handleReset = (event) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || !this.#owns(form)) return;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation) return;
+      if (event.eventPhase === Event.NONE) {
+        this.#settle(event);
+        return;
+      }
+      const frame = requestAnimationFrame(() => {
+        this.#frames.delete(frame);
+        this.#settle(event);
+      });
+      this.#frames.add(frame);
+    });
+  };
+  /** Runs the pass unless a listener cancelled the reset before it landed. */
+  #settle(event) {
+    if (!event.defaultPrevented) this.#onReset();
+  }
+};
+
+// src/utils/listener_set.ts
+var ListenerSet = class {
+  /** The generation every `add` joins until the next `dispose()`. */
+  #abort = new AbortController();
+  /**
+   * Attaches `handler` to the open generation, exactly as the caller spelled it.
+   *
+   * The set supplies the signal, so `options` carries everything else the DOM
+   * accepts — `capture` included, which has to match at release time and no
+   * longer has a second place to drift from.
+   */
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  /**
+   * Releases every listener of the open generation, synchronously, and opens the
+   * next one. Idempotent, and safe before anything has been added.
+   */
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -42,6 +114,11 @@ var CheckboxController = class extends Controller {
   static events = ["change", "reconcile"];
   /** Collapses every lifecycle signal from one DOM update into one derived pass. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileFromChildren());
+  #listeners = new ListenerSet();
+  #formReset = new FormResetWatcher(
+    (form) => this.#hasCheckboxOwnedBy(form),
+    () => this.#reconcile.schedule()
+  );
   /** Aggregate this root last settled on, so a derived repair is reported once. */
   #committedState = null;
   /** Watches authored checked-attribute changes on retained target elements. */
@@ -59,15 +136,15 @@ var CheckboxController = class extends Controller {
       attributeFilter: ["checked"],
       subtree: true
     });
-    this.element.addEventListener("turbo:morph-element", this.#onMorph);
-    document.addEventListener("reset", this.#onReset, true);
+    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
+    this.#formReset.observe();
   }
   /** Releases the observer, global reset listener, and every pending reconciliation. */
   disconnect() {
     this.#reconcile.cancel();
     this.#checkedObserver.disconnect();
-    this.element.removeEventListener("turbo:morph-element", this.#onMorph);
-    document.removeEventListener("reset", this.#onReset, true);
+    this.#listeners.dispose();
+    this.#formReset.disconnect();
   }
   /** Reconciles the aggregate for a parent added or replaced at runtime. */
   parentTargetConnected() {
@@ -145,14 +222,6 @@ var CheckboxController = class extends Controller {
   #onMorph = () => {
     this.#reconcile.schedule();
   };
-  /** Reconciles after a non-cancelled reset restores any managed checkbox. */
-  #onReset = (event) => {
-    const form = event.target;
-    if (!(form instanceof HTMLFormElement) || !this.#hasCheckboxOwnedBy(form)) return;
-    queueMicrotask(() => {
-      if (!event.defaultPrevented) this.#reconcile.schedule();
-    });
-  };
   /** Whether a form owns at least one current parent or child target. */
   #hasCheckboxOwnedBy(form) {
     return [...this.parentTargets, ...this.childTargets].some((checkbox) => checkbox.form === form);

data/dist/controllers/clipboard_controller.js

@@ -127,7 +127,9 @@ var ClipboardController = class extends Controller {
    * Whether this connection is still live. `copy()` suspends on the Clipboard API,
    * and a teardown that lands while it is suspended must win: the continuation
    * would otherwise write to an element nobody owns and arm a timer past the
-   * `clearAll()` that was supposed to be the last word.
+   * `clearAll()` that was supposed to be the last word. Stimulus also runs the label
+   * callbacks ahead of `connect()`, while this is still false: a result restored with
+   * the markup is `connect()`'s to settle, not theirs.
    */
   #connected = false;
   connect() {
@@ -140,10 +142,33 @@ var ClipboardController = class extends Controller {
     this.#beforeCache.deactivate();
     this.#timers.clearAll();
   }
+  /**
+   * Follows a `copiedLabel` swapped in place while a successful copy is shown.
+   *
+   * Render only: nothing is announced or dispatched, and the return to idle keeps the
+   * deadline the copy set. The slot changes only while `data-state` is `copied` and it
+   * still reads the previous label — the one the copy wrote there — so text someone
+   * else put in the slot stays. Stimulus also runs this ahead of `connect()`, which
+   * settles a result restored with the markup itself, so nothing is written then.
+   */
+  copiedLabelValueChanged(label, previous) {
+    this.#followLabel("copied", label, previous);
+  }
+  /**
+   * Follows an `errorLabel` swapped in place while a failed copy is shown, on the same
+   * terms as {@link ClipboardController.copiedLabelValueChanged}: only while
+   * `data-state` is `error` and the slot still reads the previous label.
+   */
+  errorLabelValueChanged(label, previous) {
+    this.#followLabel("error", label, previous);
+  }
   /**
    * Copies the resolved text and reports the outcome. Bound via `data-action`
-   * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text }` once per
-   * completed attempt — including on failure — so consumers can react either way.
+   * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text, message }`
+   * once per completed attempt — including on failure — so consumers can react
+   * either way. `message` is the authored label for that outcome, so a part that
+   * shows wording — `stimeo--clipboard:copy->stimeo--toast#show` — needs nothing
+   * else; wiring both that and the announcer reads the same result twice.
    * An attempt whose connection ended while it was in flight reports nothing.
    */
   async copy() {
@@ -157,7 +182,8 @@ var ClipboardController = class extends Controller {
     }
     if (!this.#connected) return;
     this.#reportResult(success);
-    this.dispatch("copy", { detail: { success, text } });
+    const message = success ? this.copiedLabelValue : this.errorLabelValue;
+    this.dispatch("copy", { detail: { success, text, message } });
   }
   /**
    * The text to copy: the explicit `text` value when set, otherwise the source
@@ -205,18 +231,50 @@ var ClipboardController = class extends Controller {
     this.#timers.clearAll();
     this.#reset();
   }
-  /** Reflects the result, announces it, and schedules the return to idle. */
+  /**
+   * Reflects the result, announces it, and schedules the return to idle.
+   *
+   * @stimeoRenderRoot
+   */
   #reportResult(success) {
     this.element.setAttribute("data-state", success ? "copied" : "error");
     if (this.hasFeedbackTarget) {
       this.feedbackTarget.textContent = success ? this.copiedLabelValue : this.errorLabelValue;
     }
+    this.#announceResult(success);
+    this.#scheduleReset();
+  }
+  /**
+   * Reads the result out through the shared announcer.
+   *
+   * @stimeoRuntimeOnly `announceCopiedText` / `announceErrorText` word the one announcement a copy
+   *   makes.
+   */
+  #announceResult(success) {
     announce(success ? this.announceCopiedTextValue : this.announceErrorTextValue);
+  }
+  /**
+   * Arms the return to idle for the result just shown.
+   *
+   * @stimeoRuntimeOnly `feedbackDuration` is the delay of the one timer this call arms, and the
+   *   reset that timer runs reads no Value.
+   */
+  #scheduleReset() {
     this.#timers.clearAll();
     if (this.feedbackDurationValue > 0) {
       this.#timers.set(() => this.#reset(), this.feedbackDurationValue);
     }
   }
+  /**
+   * Rewrites the slot to `label` while `state` is shown and the slot still reads
+   * `previous`, the label this controller wrote for that result.
+   */
+  #followLabel(state, label, previous) {
+    if (!this.#connected) return;
+    if (this.element.getAttribute("data-state") !== state || !this.hasFeedbackTarget) return;
+    if (this.feedbackTarget.textContent !== previous) return;
+    this.feedbackTarget.textContent = label;
+  }
   /** Returns to the idle state and empties the completion slot. */
   #reset() {
     this.element.setAttribute("data-state", "idle");

data/dist/controllers/collapsible_controller.js

@@ -2,6 +2,57 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/collapsible_controller.ts
 
+// src/utils/state_reason.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+// src/utils/state_regions.ts
+var StateRegions = class {
+  #whenTrue;
+  #whenFalse;
+  #taken = /* @__PURE__ */ new WeakSet();
+  constructor(options) {
+    this.#whenTrue = options.whenTrue;
+    this.#whenFalse = options.whenFalse ?? null;
+  }
+  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
+  reflect(host, isTrue) {
+    const shown = this.#inside(host, this.#whenTrue());
+    if (!this.#whenFalse) {
+      for (const region of shown) this.#write(region, !isTrue);
+      return;
+    }
+    const hiddenSide = this.#inside(host, this.#whenFalse());
+    if (shown.length === 0 || hiddenSide.length === 0) {
+      for (const region of shown) this.#give(region);
+      for (const region of hiddenSide) this.#give(region);
+      return;
+    }
+    for (const region of shown) this.#write(region, !isTrue);
+    for (const region of hiddenSide) this.#write(region, isTrue);
+  }
+  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  #write(region, hidden) {
+    if (hidden) this.#taken.add(region);
+    else this.#taken.delete(region);
+    if (region.hidden !== hidden) region.hidden = hidden;
+  }
+  /** Returns a region this instance hid; one it never hid keeps what it carries. */
+  #give(region) {
+    if (this.#taken.delete(region)) region.hidden = false;
+  }
+  /** The declared regions that sit within `host`, which may be the host itself. */
+  #inside(host, regions) {
+    return regions.filter((region) => host.contains(region));
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -198,15 +249,23 @@ var TransitionCompletion = class {
 
 // src/controllers/collapsible_controller.ts
 var CollapsibleController = class extends Controller {
-  static targets = ["trigger", "content"];
+  static targets = ["trigger", "content", "expandedLabel", "collapsedLabel"];
   static values = {
     open: { type: Boolean, default: false }
   };
   static actions = ["toggle"];
+  static events = ["close", "open"];
   /** Owns the cancellable close-transition wait and its bounded fallback. */
   #transition = new TransitionCompletion();
+  /** Owns `hidden` on the trigger's label pair, which follows `aria-expanded`. */
+  #labels = new StateRegions({
+    whenTrue: () => this.expandedLabelTargets,
+    whenFalse: () => this.collapsedLabelTargets
+  });
   /** Distinguishes dynamic target churn from the callbacks that precede `connect()`. */
   #connected = false;
+  /** Whether state moves are reported: set once `connect()` settled the baseline. */
+  #reporting = false;
   /**
    * Establishes the initial open/closed state without waiting for a close transition.
    *
@@ -221,7 +280,8 @@ var CollapsibleController = class extends Controller {
    */
   connect() {
     this.#connected = true;
-    this.#apply(this.#initialOpen(), false);
+    this.#apply(this.#initialOpen(), false, "api");
+    this.#reporting = true;
   }
   /** Resolves the connect-time state: explicit DOM state wins, else the `open` Value. */
   #initialOpen() {
@@ -238,15 +298,33 @@ var CollapsibleController = class extends Controller {
   }
   disconnect() {
     this.#connected = false;
+    this.#reporting = false;
     this.#transition.cancel();
   }
   /** Reconciles a replacement trigger target with the content's live state. */
   triggerTargetConnected(trigger) {
-    if (!this.#connected || !this.hasContentTarget) return;
-    trigger.setAttribute(
-      "aria-expanded",
-      this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
-    );
+    if (!this.#connected) return;
+    if (this.hasContentTarget) {
+      trigger.setAttribute(
+        "aria-expanded",
+        this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
+      );
+    }
+    this.#labels.reflect(trigger, trigger.getAttribute("aria-expanded") === "true");
+  }
+  /** Settles a label that arrived after the state it belongs to was written. */
+  expandedLabelTargetConnected() {
+    this.#reflectLabels();
+  }
+  /** Settles a label that arrived after the state it belongs to was written. */
+  collapsedLabelTargetConnected() {
+    this.#reflectLabels();
+  }
+  /** Shows the label pair's side that belongs to the trigger's expanded state. */
+  #reflectLabels() {
+    if (this.#connected && this.hasTriggerTarget) {
+      this.#labels.reflect(this.triggerTarget, this.#isOpen);
+    }
   }
   /** Reconciles a replacement content target with the disclosure's live state. */
   contentTargetConnected(content) {
@@ -260,8 +338,8 @@ var CollapsibleController = class extends Controller {
     this.#transition.cancel();
   }
   /** Toggles the region open/closed. Bound via `data-action` (click). */
-  toggle() {
-    this.#apply(!this.#isOpen, true);
+  toggle(event) {
+    this.#apply(!this.#isOpen, true, stateReasonFor(event));
   }
   /**
    * Whether the region is logically open. Read from `aria-expanded` (not the
@@ -283,15 +361,22 @@ var CollapsibleController = class extends Controller {
    * @param waitForCloseTransition - When `false` (initial `connect`) the close
    *   path applies `hidden` immediately. This flag does not suppress consumer CSS
    *   on the open path.
+   * @param reason - What drove the move, reported when the state actually moved.
    */
-  #apply(open, waitForCloseTransition) {
+  #apply(open, waitForCloseTransition, reason) {
+    const was = this.#isOpen;
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false");
+      this.#labels.reflect(this.triggerTarget, open);
     }
-    if (!this.hasContentTarget) return;
-    const content = this.contentTarget;
-    this.#transition.cancel();
-    this.#applyContent(content, open, waitForCloseTransition);
+    if (this.hasContentTarget) {
+      const content = this.contentTarget;
+      this.#transition.cancel();
+      this.#applyContent(content, open, waitForCloseTransition);
+    }
+    if (was === open || !this.#reporting) return;
+    if (open) this.dispatch("open", { detail: { reason }, cancelable: false });
+    else this.dispatch("close", { detail: { reason }, cancelable: false });
   }
   /** Reflects one content target without relying on a later target lookup. */
   #applyContent(content, open, waitForCloseTransition) {

data/dist/controllers/color_picker_controller.js

@@ -25,6 +25,16 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// src/utils/field_mirror.ts
+function writeField(field, value) {
+  if (field.value === value) return false;
+  field.value = value;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -60,54 +70,46 @@ var MicrotaskCoalescer = class {
 
 // src/utils/owned_pointer_session.ts
 var OwnedPointerSession = class {
-  pointerId;
+  #pointerId;
   #owner;
   #handlers;
   #abort = new AbortController();
   #active = true;
   constructor(start, owner, handlers) {
-    this.pointerId = start.pointerId;
+    this.#pointerId = start.pointerId;
     this.#owner = owner;
     this.#handlers = handlers;
     const { signal } = this.#abort;
     owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
     owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
     owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
-    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
     try {
-      owner.setPointerCapture?.(this.pointerId);
+      owner.setPointerCapture?.(this.#pointerId);
     } catch {
     }
   }
-  /** Whether this session still owns its pointer and listeners. */
-  get active() {
-    return this.#active;
-  }
-  /** Whether `event` belongs to the initiating pointer of the live session. */
-  owns(event) {
-    return this.#active && event.pointerId === this.pointerId;
-  }
-  /** Releases capture/listeners and invokes the end callback exactly once. */
+  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
+    this.#finish("teardown");
+  }
+  #finish(kind) {
     if (!this.#active) return;
     this.#active = false;
     this.#abort.abort();
     try {
-      this.#owner.releasePointerCapture?.(this.pointerId);
+      this.#owner.releasePointerCapture?.(this.#pointerId);
     } catch {
     }
-    this.#handlers.end?.();
+    this.#handlers.end?.(kind);
+  }
+  #owns(event) {
+    return this.#active && event.pointerId === this.#pointerId;
   }
   #onMove = (event) => {
-    if (this.owns(event)) this.#handlers.move(event);
+    if (this.#owns(event)) this.#handlers.move(event);
   };
   #onEndEvent = (event) => {
-    if (this.owns(event)) this.end();
-  };
-  #onLostCapture = (event) => {
-    const pointerId = event.pointerId;
-    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
-    this.end();
+    if (this.#owns(event)) this.#finish(event.type === "pointerup" ? "up" : "cancel");
   };
 };
 
@@ -139,6 +141,19 @@ var ColorPickerController = class extends Controller {
   #drag = null;
   /** Color the last repaint settled on, so a configuration-driven move is reported once. */
   #committedHex = null;
+  /**
+   * Whether the paint about to run was asked for by this picker's own controls.
+   * The `value` Value is shared with the page — application code and a Turbo
+   * morph write it too — so the form fields and the hex input take their "did
+   * the user commit this" answer from the route, not from the Value.
+   */
+  #movedByUser = false;
+  /**
+   * The hex this picker last wrote into its hex input, or `null` before it wrote
+   * one. A repaint the page drives compares with it rather than with the input's
+   * text, so a color that did not move leaves what the reader is typing alone.
+   */
+  #writtenHex = null;
   /**
    * Collapses a morph that swaps render inputs into one repaint, and refuses the
    * pass Stimulus delivers before `connect()`.
@@ -164,9 +179,14 @@ var ColorPickerController = class extends Controller {
     if (this.valueValue === this.#committedHex) return;
     this.#repaint.schedule();
   }
-  /** Hydrates a channel slider inserted or replaced at runtime. */
-  sliderTargetConnected(slider) {
-    this.#renderSlider(slider);
+  /**
+   * Hydrates a channel slider inserted or replaced at runtime through the repaint
+   * pass, which renders every slider after the batch and reports a committed
+   * color that moved. A slider arriving moves no color, so that pass reports
+   * nothing.
+   */
+  sliderTargetConnected() {
+    this.#repaint.schedule();
   }
   /** Ends a gesture whose geometry target disappeared or ceased being a target. */
   sliderTargetDisconnected(slider) {
@@ -174,7 +194,7 @@ var ColorPickerController = class extends Controller {
   }
   /** Fills a hex input inserted or replaced at runtime with the current color. */
   hexTargetConnected(hex) {
-    this.#mirrorColor(hex, this.#hexString());
+    this.#writeHex(hex, this.#hexString());
   }
   /** Fills a form field inserted or replaced at runtime with the current color. */
   fieldTargetConnected(field) {
@@ -256,7 +276,7 @@ var ColorPickerController = class extends Controller {
     if (!this.hasHexTarget) return;
     const parsed = hexToHsla(this.hexTarget.value);
     if (!parsed) {
-      this.hexTarget.value = this.#hexString();
+      this.#writeHex(this.hexTarget, this.#hexString());
       return;
     }
     this.#color = this.#opaqueUnlessEnabled(parsed);
@@ -284,27 +304,44 @@ var ColorPickerController = class extends Controller {
    * Renders the model and reports a color the user actually moved. A key pressed
    * at a bound, a pointer that lands on the step already showing, and a re-confirmed
    * hex all leave the committed color where it was, so no `change` describes them.
+   *
+   * The color is written into `value` first — the one path that writes it — so a
+   * Turbo snapshot and a morph read the color the user picked, and a listener of
+   * the field's native `change` already finds it there.
    */
   #commitColor() {
     const previous = this.#committedHex;
+    const hex = this.#hexString();
+    if (this.valueValue !== hex) this.valueValue = hex;
+    this.#movedByUser = true;
     this.#render();
     if (this.#committedHex !== previous) {
       this.dispatch("change", { detail: this.#settledDetail() });
     }
   }
   /**
-   * Reflects the model onto sliders, the hex input, preview, form field, and the
-   * `value` Value it serializes into.
+   * Reflects the model onto sliders, the hex input, preview, and form field. The
+   * `value` Value is left as it is.
+   *
+   * The hex input is written for the reader's own commit, which shows the color
+   * in its canonical form, and otherwise only when the hex it shows moved: a
+   * repaint the page drives that leaves the color where it is keeps text the
+   * reader has typed there and not committed.
    *
    * @stimeoRenderRoot
    */
   #render() {
+    const byUser = this.#movedByUser;
+    this.#movedByUser = false;
     for (const slider of this.sliderTargets) this.#renderSlider(slider);
     const hex = this.#hexString();
     this.#committedHex = hex;
-    if (this.valueValue !== hex) this.valueValue = hex;
-    if (this.hasHexTarget) this.#mirrorColor(this.hexTarget, hex);
-    for (const field of this.fieldTargets) this.#mirrorColor(field, hex);
+    if (this.hasHexTarget && (byUser || hex !== this.#writtenHex)) {
+      this.#writeHex(this.hexTarget, hex);
+    }
+    for (const field of this.fieldTargets) {
+      if (this.#mirrorColor(field, hex) && byUser) commitField(field);
+    }
     for (const preview of this.previewTargets) this.#publishColor(preview, hex);
     this.#publishColor(this.element, hex);
   }
@@ -324,9 +361,18 @@ var ColorPickerController = class extends Controller {
       if (slider.getAttribute(name) !== next) slider.setAttribute(name, next);
     }
   }
-  /** Mirrors the color into an input, leaving an already-equal value untouched. */
+  /** Writes `hex` into a hex input and keeps it as the hex last written there. */
+  #writeHex(input, hex) {
+    this.#writtenHex = hex;
+    this.#mirrorColor(input, hex);
+  }
+  /**
+   * Mirrors the color into an input, leaving an already-equal value untouched.
+   *
+   * @returns Whether the input's value moved.
+   */
   #mirrorColor(input, hex) {
-    if (input.value !== hex) input.value = hex;
+    return writeField(input, hex);
   }
   /** Publishes the color as the consumer's CSS hook, skipping an equal value. */
   #publishColor(element, hex) {