stimeo-ui 0.8.0 → 0.9.0

data/dist/index.js

@@ -1664,72 +1664,156 @@ var BreadcrumbController = class extends Controller {
     return active instanceof HTMLElement && element.contains(active);
   }
 };
+
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/controllers/bulk_select_controller.ts
 var BulkSelectController = class extends Controller {
   static targets = ["all", "item", "bar", "count", "selectAllPages"];
   static values = {
     totalCount: { type: Number, default: 0 },
-    announce: { type: Boolean, default: true }
+    announceText: { type: String, default: "" }
   };
   static actions = ["clear", "selectAllPages"];
-  static events = ["change"];
-  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it
-   *  survives a Turbo swap and `connect()` can rehydrate it. */
+  static events = ["change", "reconcile"];
+  /** All-pages mode is a transient UI state, mirrored to `data-all-pages` so a
+   *  `connect()` over markup that already carries the attribute rehydrates the
+   *  mode — a morph, a Turbo Stream, or a server that renders it back. A restore
+   *  visit serves the server's markup instead, so the mode does not survive one. */
   #allPagesMode = false;
-  /** Last emitted figures, so a recompute dispatches `change` only on real change. */
+  /** Last emitted figures, so a recompute reports only on a real change. */
   #lastCount = -1;
   #lastAllPages = false;
+  /** Collapses every signal from one DOM or Value update into one repair. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());
   /** Delegated `change` handler covering the select-all box and every row. */
   #onChange = (event) => {
     const target = event.target;
     if (!target) return;
     if (this.hasAllTarget && target === this.allTarget) {
       this.#applyAll();
-    } else if (target.matches('[data-stimeo--bulk-select-target="item"]')) {
+    } else if (this.itemTargets.some((item) => item === target)) {
       this.#exitAllPages();
-      this.#recompute(true);
+      this.#reportChange(this.#recompute());
     }
   };
   connect() {
     this.#allPagesMode = this.element.dataset.allPages === "true";
+    this.#reconcile.activate();
     this.element.addEventListener("change", this.#onChange);
-    this.#recompute(false);
+    this.#recompute();
   }
   disconnect() {
     this.element.removeEventListener("change", this.#onChange);
+    this.#reconcile.cancel();
+  }
+  /** Repairs the figures for a row that arrived at runtime. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after a row leaves, so a removed selection stops counting. */
+  itemTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reflects the current selection onto a select-all box added at runtime. */
+  allTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after the select-all box leaves. */
+  allTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+  totalCountValueChanged() {
+    if (!Number.isFinite(this.totalCountValue)) {
+      this.totalCountValue = 0;
+      return;
+    }
+    this.#reconcile.schedule();
+  }
+  /** Repaints so wording changed at runtime is used by the next announcement. */
+  announceTextValueChanged() {
+    this.#reconcile.schedule();
   }
   /** Clears every selection (rows + select-all) and exits all-pages mode. */
   clear() {
-    for (const item of this.#items) item.checked = false;
+    for (const item of this.itemTargets) item.checked = false;
     if (this.hasAllTarget) {
       this.allTarget.checked = false;
       this.allTarget.indeterminate = false;
     }
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
-  /** Enters "select all across pages" mode (count shows `totalCount`). */
+  /**
+   * Enters "select all across pages" mode: the count shows `totalCount`, and every
+   * row on this page is checked.
+   *
+   * The mode's claim is that the whole set is selected, so leaving a visible row
+   * unchecked would put the page and the count in open disagreement.
+   */
   selectAllPages() {
     this.#allPagesMode = true;
-    this.#recompute(true);
+    this.#checkEveryRow();
+    this.#reportChange(this.#recompute());
+  }
+  /** Marks every row on this page selected. */
+  #checkEveryRow() {
+    for (const item of this.itemTargets) item.checked = true;
   }
   /** Mirrors the select-all box to every row, then recomputes. */
   #applyAll() {
     if (!this.hasAllTarget) return;
     const { checked } = this.allTarget;
-    for (const item of this.#items) item.checked = checked;
+    for (const item of this.itemTargets) item.checked = checked;
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
   #exitAllPages() {
     this.#allPagesMode = false;
   }
+  /** Repairs the derived state after the page moved rows or a render input. */
+  #reconcileNow() {
+    if (this.#allPagesMode) this.#checkEveryRow();
+    const detail = this.#recompute();
+    if (!detail) return;
+    this.dispatch("reconcile", { detail });
+    this.#announce(detail);
+  }
+  /** Reports a selection the user moved. */
+  #reportChange(detail) {
+    if (!detail) return;
+    this.dispatch("change", { detail });
+    this.#announce(detail);
+  }
+  /** Hands the count to the shared announcer, worded by the consumer. */
+  #announce(detail) {
+    announce(fillTemplate(this.announceTextValue, { count: detail.count }));
+  }
   /**
    * Recomputes the count, the select-all checked/indeterminate state, and the bar
-   * visibility from the current DOM. Dispatches `change` (when `notify`) only if
-   * the emitted count or all-pages flag actually changed.
+   * visibility from the current DOM. Returns the figures when the emitted count or
+   * all-pages flag actually moved, and `null` when they did not.
+   *
+   * @stimeoRenderRoot
    */
-  #recompute(notify) {
-    const items = this.#items;
+  #recompute() {
+    const items = this.itemTargets;
     const total = items.length;
     const checked = items.filter((item) => item.checked).length;
     const allPages = this.#allPagesMode;
@@ -1740,8 +1824,10 @@ var BulkSelectController = class extends Controller {
     const count = allPages ? this.totalCountValue : checked;
     const show = allPages || checked > 0;
     if (this.hasBarTarget) {
+      if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {
+        this.allTarget.focus();
+      }
       this.barTarget.hidden = !show;
-      this.barTarget.setAttribute("aria-live", this.announceValue ? "polite" : "off");
     }
     if (this.hasCountTarget) this.countTarget.textContent = String(count);
     this.element.setAttribute("data-selected-count", String(checked));
@@ -1750,15 +1836,7 @@ var BulkSelectController = class extends Controller {
     const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;
     this.#lastCount = count;
     this.#lastAllPages = allPages;
-    if (notify && changed) {
-      this.dispatch("change", { detail: { count, allPages } });
-    }
-  }
-  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */
-  get #items() {
-    return Array.from(
-      this.element.querySelectorAll('[data-stimeo--bulk-select-target="item"]')
-    );
+    return changed ? { count, allPages } : null;
   }
 };
 
@@ -2718,25 +2796,6 @@ function hits(elements, node) {
 function setAttributeIfChanged(element, name, value) {
   if (element.getAttribute(name) !== value) element.setAttribute(name, value);
 }
-
-// src/utils/announce.ts
-function announce(message, options = {}) {
-  const text = message.trim();
-  if (text.length === 0) return;
-  window.dispatchEvent(
-    new CustomEvent("stimeo--announcer:announce", {
-      detail: { message: text, assertive: options.assertive === true }
-    })
-  );
-}
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
-}
-
-// src/controllers/character_counter_controller.ts
 var CharacterCounterController = class _CharacterCounterController extends Controller {
   static targets = ["input", "output"];
   static values = {
@@ -3150,45 +3209,59 @@ function setDefaultAttribute(element, name, value) {
 }
 
 // src/controllers/clipboard_controller.ts
+var TRANSIENT_STATES = /* @__PURE__ */ new Set(["copied", "error"]);
 var ClipboardController = class extends Controller {
   static targets = ["source", "button", "feedback"];
   static values = {
     text: { type: String, default: "" },
     feedbackDuration: { type: Number, default: 2e3 },
     copiedLabel: { type: String, default: "Copied" },
-    errorLabel: { type: String, default: "Copy failed" }
+    errorLabel: { type: String, default: "Copy failed" },
+    announceCopiedText: { type: String, default: "" },
+    announceErrorText: { type: String, default: "" }
   };
   static actions = ["copy"];
   static events = ["copy"];
-  /** Auto-clear timer for the completion notice; torn down on disconnect. */
+  /**
+   * The pending return to idle — the only timer this controller schedules, so
+   * `clearAll()` is exactly "drop the auto-clear" and needs no id of its own.
+   */
   #timers = new SafeTimeout();
+  /** Returns the completion state to idle for the snapshot Turbo takes. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewind());
   /**
-   * The pending auto-clear timer id, or `null` when none is scheduled. Tracked so
-   * a rapid second copy cancels the first window instead of letting a stale timer
-   * reset the freshly-shown notice early.
+   * 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.
    */
-  #resetTimerId = null;
+  #connected = false;
   connect() {
-    setDefaultAttribute(this.element, "data-state", "idle");
+    this.#connected = true;
+    this.#adopt();
+    this.#beforeCache.activate();
   }
   disconnect() {
+    this.#connected = false;
+    this.#beforeCache.deactivate();
     this.#timers.clearAll();
   }
   /**
    * Copies the resolved text and reports the outcome. Bound via `data-action`
-   * (click). Always dispatches `stimeo--clipboard:copy` with `{ success, text }`
-   * — including on failure — so consumers can react either way.
+   * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text }` once per
+   * completed attempt — including on failure — so consumers can react either way.
+   * An attempt whose connection ended while it was in flight reports nothing.
    */
   async copy() {
     const text = this.#resolveText();
     let success = false;
     try {
-      if (!navigator.clipboard?.writeText) throw new Error("Clipboard API unavailable");
       await navigator.clipboard.writeText(text);
       success = true;
     } catch {
       success = false;
     }
+    if (!this.#connected) return;
     this.#reportResult(success);
     this.dispatch("copy", { detail: { success, text } });
   }
@@ -3205,24 +3278,52 @@ var ClipboardController = class extends Controller {
     }
     return source.textContent ?? "";
   }
-  /** Reflects the result on `data-state`, announces it, and schedules a reset. */
+  /**
+   * Reads the current state back from the DOM.
+   *
+   * A `copied` or `error` found at connect time is this controller's own output
+   * from a connection that is gone, and so is the timer that would have cleared it
+   * — nothing else would ever return the element to `idle`. Any other authored
+   * value belongs to the consumer and only a missing attribute takes the default.
+   */
+  #adopt() {
+    if (this.#inTransientState()) {
+      this.#reset();
+      return;
+    }
+    setDefaultAttribute(this.element, "data-state", "idle");
+  }
+  /** Whether `data-state` currently holds one of the values this controller writes. */
+  #inTransientState() {
+    const state = this.element.getAttribute("data-state");
+    return state !== null && TRANSIENT_STATES.has(state);
+  }
+  /**
+   * Returns the completion state to idle for the snapshot Turbo is about to take,
+   * so a page reached with the Back button does not report a copy that happened
+   * before the navigation. Only a state this controller wrote is rewound — an
+   * authored one is the consumer's and has to survive into the snapshot, exactly as
+   * `connect()` leaves it alone. State only — no `copy` is dispatched, which would
+   * claim a fresh copy ran.
+   */
+  #rewind() {
+    if (!this.#inTransientState()) return;
+    this.#timers.clearAll();
+    this.#reset();
+  }
+  /** Reflects the result, announces it, and schedules the return to idle. */
   #reportResult(success) {
     this.element.setAttribute("data-state", success ? "copied" : "error");
     if (this.hasFeedbackTarget) {
       this.feedbackTarget.textContent = success ? this.copiedLabelValue : this.errorLabelValue;
     }
-    if (this.#resetTimerId !== null) {
-      this.#timers.clear(this.#resetTimerId);
-      this.#resetTimerId = null;
-    }
+    announce(success ? this.announceCopiedTextValue : this.announceErrorTextValue);
+    this.#timers.clearAll();
     if (this.feedbackDurationValue > 0) {
-      this.#resetTimerId = this.#timers.set(() => {
-        this.#resetTimerId = null;
-        this.#reset();
-      }, this.feedbackDurationValue);
+      this.#timers.set(() => this.#reset(), this.feedbackDurationValue);
     }
   }
-  /** Returns to the idle state and clears the completion notice. */
+  /** Returns to the idle state and empties the completion slot. */
   #reset() {
     this.element.setAttribute("data-state", "idle");
     if (this.hasFeedbackTarget) {
@@ -3511,8 +3612,62 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// src/utils/owned_pointer_session.ts
+var OwnedPointerSession = class {
+  pointerId;
+  #owner;
+  #handlers;
+  #abort = new AbortController();
+  #active = true;
+  constructor(start, owner, handlers) {
+    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);
+    } 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. */
+  end() {
+    if (!this.#active) return;
+    this.#active = false;
+    this.#abort.abort();
+    try {
+      this.#owner.releasePointerCapture?.(this.pointerId);
+    } catch {
+    }
+    this.#handlers.end?.();
+  }
+  #onMove = (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();
+  };
+};
+
 // src/controllers/color_picker_controller.ts
 var COLOR_PROPERTY = "--stimeo--color";
+var VALUE_TEXT_ATTRIBUTE = "data-value-text";
 var CHANNEL_RANGE = {
   hue: [0, 360],
   saturation: [0, 100],
@@ -3532,10 +3687,10 @@ var ColorPickerController = class extends Controller {
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
-  /** The current color in the editing model. */
+  /** The current color in the editing model; its alpha is 100 while `alpha` is off. */
   #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
-  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
-  #dragAbort = null;
+  /** The pointer that owns the live drag, with the slider whose geometry maps it. */
+  #drag = null;
   /** Color the last repaint settled on, so a configuration-driven move is reported once. */
   #committedHex = null;
   /**
@@ -3546,25 +3701,48 @@ var ColorPickerController = class extends Controller {
   /** Seeds the model from the initial hex value and renders every surface. */
   connect() {
     this.#repaint.activate();
-    const parsed = hexToHsla(this.valueValue);
-    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#adoptValue();
     this.#render();
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
     this.#repaint.cancel();
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#endDrag();
   }
   /** Repaints when application code (or a Turbo morph) changes `alpha` at runtime. */
   alphaValueChanged() {
     this.#repaint.schedule();
   }
+  /** Adopts a color application code (or a Turbo morph) put in `value` at runtime. */
+  valueValueChanged() {
+    if (this.valueValue === this.#committedHex) return;
+    this.#repaint.schedule();
+  }
+  /** Hydrates a channel slider inserted or replaced at runtime. */
+  sliderTargetConnected(slider) {
+    this.#renderSlider(slider);
+  }
+  /** Ends a gesture whose geometry target disappeared or ceased being a target. */
+  sliderTargetDisconnected(slider) {
+    if (this.#drag?.slider === slider) this.#endDrag();
+  }
+  /** Fills a hex input inserted or replaced at runtime with the current color. */
+  hexTargetConnected(hex) {
+    this.#mirrorColor(hex, this.#hexString());
+  }
+  /** Fills a form field inserted or replaced at runtime with the current color. */
+  fieldTargetConnected(field) {
+    this.#mirrorColor(field, this.#hexString());
+  }
+  /** Publishes the current color on a preview inserted or replaced at runtime. */
+  previewTargetConnected(preview) {
+    this.#publishColor(preview, this.#hexString());
+  }
   /** Keyboard stepping on the focused channel slider (APG Slider model). */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const slider = event.currentTarget;
-    const channel = this.#channelOf(slider);
+    const channel = this.#editableChannel(slider);
     if (!channel) return;
     const [min, max] = this.#rangeOf(slider, channel);
     const value = this.#color[channel];
@@ -3596,34 +3774,36 @@ var ColorPickerController = class extends Controller {
     event.preventDefault();
     this.#setChannel(channel, next, min, max);
   }
-  /** Begins a pointer drag on a channel slider and tracks movement. */
+  /** Begins a primary-button drag on a channel slider, owned by its own pointer. */
   onPointerDown(event) {
+    if (event.button !== 0 || this.#drag) return;
     const slider = event.currentTarget;
-    const channel = this.#channelOf(slider);
+    const channel = this.#editableChannel(slider);
     if (!channel) return;
-    event.preventDefault();
-    slider.focus();
     const [min, max] = this.#rangeOf(slider, channel);
     const mirrored = this.#mirrored;
     const update = (clientX) => {
       const rect = slider.getBoundingClientRect();
-      if (rect.width === 0) return;
+      if (rect.width === 0) return false;
       const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
       const fraction = mirrored ? 1 - offset : offset;
       this.#setChannel(channel, min + fraction * (max - min), min, max);
+      return true;
     };
-    update(event.clientX);
-    this.#dragAbort?.abort();
-    const abort = new AbortController();
-    this.#dragAbort = abort;
-    const onMove = (move) => update(move.clientX);
-    const onUp = () => {
-      abort.abort();
-      this.#dragAbort = null;
-    };
-    document.addEventListener("pointermove", onMove, { signal: abort.signal });
-    document.addEventListener("pointerup", onUp, { signal: abort.signal });
-    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+    if (!update(event.clientX)) return;
+    event.preventDefault();
+    slider.focus();
+    const drag = { pointer: null, slider };
+    drag.pointer = new OwnedPointerSession(event, slider, {
+      move: (move) => {
+        if (slider.isConnected) update(move.clientX);
+        else this.#endDrag();
+      },
+      end: () => {
+        if (this.#drag === drag) this.#drag = null;
+      }
+    });
+    this.#drag = drag;
   }
   /** Parses the hex input on confirm and syncs every channel + surface. */
   onHexInput() {
@@ -3633,9 +3813,22 @@ var ColorPickerController = class extends Controller {
       this.hexTarget.value = this.#hexString();
       return;
     }
-    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#color = this.#opaqueUnlessEnabled(parsed);
     this.#commitColor();
   }
+  /** Replaces the model with the color `value` names, leaving an unparsable one alone. */
+  #adoptValue() {
+    const parsed = hexToHsla(this.valueValue);
+    if (parsed) this.#color = this.#opaqueUnlessEnabled(parsed);
+  }
+  /**
+   * The model a parsed color implies: alpha only survives while its channel is
+   * enabled, because `hexString()` would otherwise emit `#RRGGBB` while `change`
+   * reported `rgba.a < 1`.
+   */
+  #opaqueUnlessEnabled(parsed) {
+    return this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+  }
   /** Clamps and snaps one channel to an integer, then re-renders + emits change. */
   #setChannel(channel, raw, min, max) {
     this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
@@ -3654,32 +3847,57 @@ var ColorPickerController = class extends Controller {
     }
   }
   /**
-   * Reflects the model onto sliders, the hex input, preview, and form field.
+   * Reflects the model onto sliders, the hex input, preview, form field, and the
+   * `value` Value it serializes into.
    *
    * @stimeoRenderRoot
    */
   #render() {
-    for (const slider of this.sliderTargets) {
-      const channel = this.#channelOf(slider);
-      if (!channel) continue;
-      const value = this.#color[channel];
-      slider.setAttribute("aria-valuenow", String(value));
-      slider.setAttribute("aria-valuetext", valueText(channel, value));
-    }
+    for (const slider of this.sliderTargets) this.#renderSlider(slider);
     const hex = this.#hexString();
     this.#committedHex = hex;
-    if (this.hasHexTarget) this.hexTarget.value = hex;
-    for (const field of this.fieldTargets) field.value = hex;
-    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);
-    this.element.style.setProperty(COLOR_PROPERTY, 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);
+    for (const preview of this.previewTargets) this.#publishColor(preview, hex);
+    this.#publishColor(this.element, hex);
+  }
+  /** Writes one slider's announced range, value, and value text, skipping equal ones. */
+  #renderSlider(slider) {
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    const [min, max] = this.#rangeOf(slider, channel);
+    const value = this.#color[channel];
+    const attributes = {
+      "aria-valuemin": String(min),
+      "aria-valuemax": String(max),
+      "aria-valuenow": String(value),
+      "aria-valuetext": this.#valueText(slider, channel, value)
+    };
+    for (const [name, next] of Object.entries(attributes)) {
+      if (slider.getAttribute(name) !== next) slider.setAttribute(name, next);
+    }
+  }
+  /** Mirrors the color into an input, leaving an already-equal value untouched. */
+  #mirrorColor(input, hex) {
+    if (input.value !== hex) input.value = hex;
+  }
+  /** Publishes the color as the consumer's CSS hook, skipping an equal value. */
+  #publishColor(element, hex) {
+    if (element.style.getPropertyValue(COLOR_PROPERTY) !== hex) {
+      element.style.setProperty(COLOR_PROPERTY, hex);
+    }
   }
   /**
-   * Repaints after `alpha` changed at runtime and reports a color this controller
-   * settled on. Disabling alpha drops it from the model, so the committed color can
-   * move without a user edit; `change` stays reserved for the picker's own actions.
+   * Repaints after a declarative input changed at runtime and reports a color this
+   * controller settled on. Disabling alpha drops it from the model and an outside
+   * `value` names another color, so the committed color can move without a user
+   * edit; `change` stays reserved for the picker's own actions.
    */
   #reconcileColor() {
     const previous = this.#committedHex;
+    if (previous !== null && this.valueValue !== previous) this.#adoptValue();
+    if (!this.alphaValue) this.#color.alpha = 100;
     this.#render();
     if (previous !== null && this.#committedHex !== previous) {
       this.dispatch("reconcile", { detail: this.#settledDetail() });
@@ -3700,7 +3918,27 @@ var ColorPickerController = class extends Controller {
   /** Reads a slider's `data-channel`, if it is a known channel. */
   #channelOf(slider) {
     const channel = slider.getAttribute("data-channel");
-    return channel && channel in CHANNEL_RANGE ? channel : null;
+    return channel && Object.hasOwn(CHANNEL_RANGE, channel) ? channel : null;
+  }
+  /**
+   * The channel a slider edits, or null when this picker edits none through it. An
+   * alpha slider authored while `alpha` is off edits nothing: moving it would leave
+   * the model translucent behind an opaque `#RRGGBB`.
+   */
+  #editableChannel(slider) {
+    const channel = this.#channelOf(slider);
+    return channel === "alpha" && !this.alphaValue ? null : channel;
+  }
+  /** The channel's announced text: the slider's template, or the built-in English. */
+  #valueText(slider, channel, value) {
+    const template = slider.getAttribute(VALUE_TEXT_ATTRIBUTE);
+    return template ? template.replaceAll("{value}", String(value)) : defaultValueText(channel, value);
+  }
+  /** Ends the live drag so no further movement of that pointer reaches the model. */
+  #endDrag() {
+    const drag = this.#drag;
+    this.#drag = null;
+    drag?.pointer?.end();
   }
   /**
    * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.
@@ -3716,7 +3954,7 @@ var ColorPickerController = class extends Controller {
     ];
   }
 };
-function valueText(channel, value) {
+function defaultValueText(channel, value) {
   const label = channel.charAt(0).toUpperCase() + channel.slice(1);
   const unit = channel === "hue" ? "degrees" : "percent";
   return `${label} ${value} ${unit}`;
@@ -5691,6 +5929,25 @@ function round(value, precision) {
   if (!Number.isFinite(rounded)) return value;
   return rounded === 0 ? 0 : rounded;
 }
+
+// src/utils/interactive_host.ts
+var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
+function isInteractiveHost(element) {
+  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+// src/controllers/data_grid_controller.ts
 var SORT_CYCLE = ["none", "ascending", "descending"];
 function nextSortDirection(current) {
   const index = SORT_CYCLE.indexOf(current);
@@ -5704,8 +5961,15 @@ var DataGridController = class extends Controller {
   };
   static actions = ["onKeydown", "sort", "toggleSelect"];
   static events = ["selectionchange", "sort"];
-  /** Gates the row callback so it does not re-walk every row once per authored row on mount. */
-  #connected = false;
+  /**
+   * Collapses the per-element target callbacks of one DOM mutation into a single
+   * baseline pass, and refuses to run before `connect()` or after `disconnect()`.
+   *
+   * Stimulus reports every target one at a time, so an ungated pass would re-walk
+   * the whole grid once per authored cell on mount and once per streamed cell
+   * afterwards — quadratic in the cell count both times.
+   */
+  #reconcile = new MicrotaskCoalescer(() => this.#restoreBaseline());
   /**
    * Establishes a single tab stop across all navigable cells/headers and brings
    * the rows to their baseline.
@@ -5716,15 +5980,30 @@ var DataGridController = class extends Controller {
    * attribute, so the Value callback does not fire a second time.
    */
   connect() {
+    this.#restoreBaseline();
+    this.#reconcile.activate();
+  }
+  /** Closes the reconcile window so a queued pass cannot run against a detached tree. */
+  disconnect() {
+    this.#reconcile.cancel();
+  }
+  /**
+   * Rebuilds both DOM-owned baselines from the live grid: exactly one navigable
+   * cell is in the Tab sequence, and every selectable row carries an explicit
+   * `aria-selected`.
+   *
+   * The tab stop keeps whichever cell already holds it, so a rebuild triggered by
+   * an unrelated row arriving does not throw the user's position away; only when
+   * no cell holds it — the grid is fresh, or the holder was removed — does the
+   * first navigable cell take over. Without that fallback a grid whose active row
+   * is removed keeps every cell at `-1` and drops out of the Tab sequence
+   * entirely.
+   */
+  #restoreBaseline() {
     const cells = this.#navigableCells();
     const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
-    this.#setActiveCell(active, { focus: false });
+    if (active) this.#setActiveCell(active, { focus: false }, cells);
     this.#normalizeSelection();
-    this.#connected = true;
-  }
-  /** Reopens the row callback for the next mount. */
-  disconnect() {
-    this.#connected = false;
   }
   /**
    * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
@@ -5735,16 +6014,25 @@ var DataGridController = class extends Controller {
     this.#syncSelectable();
     this.#normalizeSelection();
   }
-  /**
-   * Re-establishes the row baseline for a row added after connect.
-   *
-   * Each pass walks every row, and Stimulus reports the authored rows one by one
-   * before `connect()`, so the mount is gated to keep it linear in the row count
-   * rather than quadratic; `connect()` runs the single baseline pass instead.
-   */
+  /** Re-establishes the baselines for a row added after connect. */
   rowTargetConnected() {
-    if (!this.#connected) return;
-    this.#normalizeSelection();
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a cell joins the grid after connect. */
+  cellTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a cell leaves the grid. */
+  cellTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a header joins the grid after connect. */
+  columnHeaderTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a header leaves the grid. */
+  columnHeaderTargetDisconnected() {
+    this.#reconcile.schedule();
   }
   /**
    * Brings the authored rows to the shape the APG requires, without changing
@@ -5789,6 +6077,9 @@ var DataGridController = class extends Controller {
   sort(event) {
     const header = event.currentTarget;
     if (!this.columnHeaderTargets.includes(header)) return;
+    if (event.defaultPrevented) return;
+    const control = this.#claimingControl(event, header);
+    if (control && !(control instanceof HTMLButtonElement)) return;
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
@@ -5799,14 +6090,19 @@ var DataGridController = class extends Controller {
   /** Toggles selection of the row owning the event target. Bound optionally. */
   toggleSelect(event) {
     if (this.selectionValue === "none") return;
-    const row = event.currentTarget.closest("[role='row']");
+    if (event.defaultPrevented) return;
+    const host = event.currentTarget;
+    if (this.#claimedByDescendant(event, host)) return;
+    const row = host.closest("[role='row']");
     if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
   }
   /** Grid navigation + sort/select activation. Bound to cells and headers. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if (event.isComposing) return;
     const cell = event.currentTarget;
+    if (this.#claimedByDescendant(event, cell)) return;
     const matrix = this.#matrix();
     const position = this.#locate(matrix, cell);
     if (!position) return;
@@ -5842,9 +6138,35 @@ var DataGridController = class extends Controller {
     }
     if (target) {
       event.preventDefault();
-      this.#setActiveCell(target, { focus: true });
+      this.#setActiveCell(target, { focus: true }, matrix.flat());
     }
   }
+  /**
+   * Whether the event was addressed to a control inside `host` rather than to the
+   * grid.
+   *
+   * Cells and headers hold consumer markup, and APG's grid pattern expects that
+   * markup to include working controls — a row action button, an inline editor.
+   * Those own their own keystrokes and clicks, so the grid stands down entirely
+   * rather than acting in parallel. An editable host (its `contenteditable` state
+   * is inherited, so the walk is explicit) counts the same way.
+   */
+  #claimedByDescendant(event, host) {
+    return this.#claimingControl(event, host) !== null;
+  }
+  /**
+   * The nested control this event belongs to, or `null` when the host owns it.
+   *
+   * Naming the control, rather than answering yes or no, is what lets the click
+   * path treat a sortable header's `<button>` as the activation it is while every
+   * other control still takes the event away.
+   */
+  #claimingControl(event, host) {
+    const source = event.target;
+    const control = source.closest(INTERACTIVE_HOST_SELECTOR);
+    if (control && host.contains(control)) return control;
+    return isInteractiveHost(source) ? source : null;
+  }
   /** Performs a header's sort or a cell row's selection toggle on activation. */
   #activate(cell) {
     if (this.columnHeaderTargets.includes(cell)) {
@@ -5875,11 +6197,22 @@ var DataGridController = class extends Controller {
     const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
     this.dispatch("selectionchange", { detail: { rows } });
   }
-  /** Makes `cell` the single tabbable cell (roving) and optionally focuses it. */
-  #setActiveCell(cell, { focus }) {
-    if (!cell) return;
-    for (const candidate of this.#navigableCells()) {
-      candidate.tabIndex = candidate === cell ? 0 : -1;
+  /**
+   * Makes `cell` the single tabbable cell (roving) and optionally focuses it.
+   *
+   * `cells` lets a caller that already walked the grid hand its collection over,
+   * so one keystroke rebuilds the matrix once instead of twice. The write is
+   * skipped where the attribute already holds the wanted value — comparing the
+   * attribute rather than the IDL property, because a cell with no `tabindex` at
+   * all reports `-1` and would then never receive the attribute it needs to be
+   * focusable.
+   */
+  #setActiveCell(cell, { focus }, cells) {
+    for (const candidate of cells ?? this.#navigableCells()) {
+      const wanted = candidate === cell ? "0" : "-1";
+      if (candidate.getAttribute("tabindex") !== wanted) {
+        candidate.setAttribute("tabindex", wanted);
+      }
     }
     if (focus) cell.focus();
   }
@@ -7271,33 +7604,64 @@ var EditableController = class extends Controller {
   static values = {
     submitOnBlur: { type: Boolean, default: true }
   };
-  static actions = ["edit", "onBlur", "onDisplayKeydown", "onKeydown"];
+  static actions = ["cancel", "edit", "onDisplayKeydown", "onKeydown", "revert", "save"];
   static events = ["cancel", "change"];
   /** The value captured when edit mode began, used to detect real changes. */
   #previousValue = "";
+  /**
+   * The value the last save replaced, or `null` when there is nothing to undo.
+   * Cleared on connect: a value from before a page restore is unrecoverable, so
+   * `revert()` must not resurrect one.
+   */
+  #revertValue = null;
   /**
    * Owns IME lifecycle state for the edit surface, so a keydown that belongs to
    * a composition (cancel or confirm) is never treated as an edit command.
    */
   #composition = new CompositionTracker();
+  /**
+   * Watches focus leaving the editor from wherever it currently sits.
+   *
+   * `focusout` bubbles where `blur` does not, so one listener on the root sees
+   * every departure — including one from a Save or Cancel button the consumer
+   * placed beside the input. Binding the input alone would make the promise
+   * "saves wherever focus moved" true only for focus that leaves the input
+   * itself, and tabbing straight past an inner button would strand the editor
+   * open.
+   */
+  #onFocusOut = (event) => {
+    const from = event.target;
+    if (this.hasDisplayTarget && from instanceof Node && this.displayTarget.contains(from)) return;
+    const next = event.relatedTarget;
+    if (next instanceof Node && this.element.contains(next)) return;
+    if (this.submitOnBlurValue) this.#commit(false);
+  };
   /** Establishes the initial display mode (display shown, input hidden). */
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#revertValue = null;
     this.#setMode("display");
   }
-  /** Releases the composition listeners so nothing outlives the element. */
+  /** Releases the composition and focus listeners so nothing outlives the element. */
   disconnect() {
     this.#composition.disconnect();
+    this.element.removeEventListener("focusout", this.#onFocusOut);
   }
   /** Tracks an input added initially or after connect (e.g. a Turbo swap). */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    this.#applyMode();
   }
   /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
-  /** Enters edit mode: seeds the input from the display text, focuses, selects. */
+  /** Re-hides or re-shows a display element that arrived after the mode was set. */
+  displayTargetConnected() {
+    this.#applyMode();
+  }
+  /** Enters edit mode: seeds the input from the declared value, focuses, selects. */
   edit() {
     if (this.#isEditing || !this.hasInputTarget || !this.hasDisplayTarget) return;
     this.#previousValue = this.#currentValue;
@@ -7306,6 +7670,27 @@ var EditableController = class extends Controller {
     this.inputTarget.focus();
     this.inputTarget.select();
   }
+  /** Commits the edit and returns focus to the display element. */
+  save() {
+    this.#commit(true);
+  }
+  /** Discards edits, returns to display mode, and dispatches `cancel`. */
+  cancel() {
+    if (!this.#isEditing) return;
+    this.#setMode("display");
+    if (this.hasDisplayTarget) this.displayTarget.focus();
+    this.dispatch("cancel", { detail: {} });
+  }
+  /**
+   * Puts back the value the last save replaced — for a consumer whose server
+   * rejected it. Silent by design: a `change` here would re-enter the same
+   * handler that asked for the undo. One save, one undo.
+   */
+  revert() {
+    if (this.#revertValue === null || this.#isEditing) return;
+    this.#writeValue(this.#revertValue);
+    this.#revertValue = null;
+  }
   /** Adds `F2` as an editing entry point alongside the button's native activation. */
   onDisplayKeydown(event) {
     if (event.key === "F2") {
@@ -7319,56 +7704,57 @@ var EditableController = class extends Controller {
     if (event.key === "Escape") {
       if (event.defaultPrevented) return;
       event.preventDefault();
-      this.#cancel();
+      this.cancel();
       return;
     }
     if (event.key === "Enter") {
       if (event.defaultPrevented) return;
       if (this.#isMultiline && !(event.ctrlKey || event.metaKey)) return;
       event.preventDefault();
-      this.#save(true);
+      this.#commit(true);
     }
   }
-  /** Saves on blur when `submitOnBlur` is set; otherwise keeps editing. */
-  onBlur() {
-    if (!this.#isEditing) return;
-    if (this.submitOnBlurValue) this.#save(false);
-  }
   /**
-   * Returns to display mode, reflecting the input into the display text and
-   * dispatching `change` when the value differs from where editing began.
+   * Returns to display mode, storing the input's value and dispatching `change`
+   * when it differs from where editing began.
    *
    * @param restoreFocus - Move focus back to the display element (explicit
-   *   keyboard commit) rather than honoring the user's new focus target (blur).
+   *   commit) rather than honoring the user's new focus target (blur).
    */
-  #save(restoreFocus) {
-    if (!this.#isEditing) return;
-    const value = this.inputTarget.value;
+  #commit(restoreFocus) {
+    if (!this.#isEditing || !this.hasInputTarget) return;
+    const value = this.inputTarget.value.trim();
     const previous = this.#previousValue;
-    this.displayTarget.textContent = value;
+    this.#writeValue(value);
     this.#setMode("display");
-    if (restoreFocus) this.displayTarget.focus();
+    if (restoreFocus && this.hasDisplayTarget) this.displayTarget.focus();
     if (value !== previous) {
+      this.#revertValue = previous;
       this.dispatch("change", { detail: { value, previous } });
     }
   }
-  /** Discards edits, returns to display mode, and dispatches `cancel`. */
-  #cancel() {
-    if (!this.#isEditing) return;
-    this.#setMode("display");
-    this.displayTarget.focus();
-    this.dispatch("cancel", { detail: {} });
+  /** Stores `value` wherever the display element declares it. */
+  #writeValue(value) {
+    if (!this.hasDisplayTarget) return;
+    const display = this.displayTarget;
+    if (display.hasAttribute("data-value")) display.dataset.value = value;
+    else display.textContent = value;
   }
-  /** Toggles the `data-mode` flag and the `hidden` state of both elements. */
-  #setMode(mode) {
-    this.element.dataset.mode = mode;
-    const editing = mode === "editing";
+  /** Derives both elements' visibility from the mode currently in the DOM. */
+  #applyMode() {
+    const editing = this.#isEditing;
     if (this.hasDisplayTarget) this.displayTarget.hidden = editing;
     if (this.hasInputTarget) this.inputTarget.hidden = !editing;
   }
-  /** Current display text, trimmed — the value shown when not editing. */
+  /** Records the mode, then brings both elements in line with it. */
+  #setMode(mode) {
+    this.element.dataset.mode = mode;
+    this.#applyMode();
+  }
+  /** The value the display element declares, trimmed. */
   get #currentValue() {
-    return (this.displayTarget.textContent ?? "").trim();
+    const display = this.displayTarget;
+    return (display.dataset.value ?? display.textContent ?? "").trim();
   }
   /** Whether the editing control is a multi-line `<textarea>`. */
   get #isMultiline() {
@@ -7980,15 +8366,46 @@ var FilterController = class extends Controller {
   #onChange = () => {
     this.apply();
   };
+  /**
+   * Gates the declaration callback to the connected window.
+   *
+   * Stimulus delivers a Value callback ahead of `connect()` and again for every
+   * runtime change; without the gate, merely connecting would emit an evaluation
+   * — and its `change` — before `connect()` runs its own.
+   */
+  #connected = false;
   connect() {
-    this.apply();
+    this.#evaluate();
     this.element.addEventListener("change", this.#onChange);
+    this.#connected = true;
   }
   disconnect() {
+    this.#connected = false;
     this.element.removeEventListener("change", this.#onChange);
   }
+  /**
+   * Re-evaluates when the match declaration changes at runtime.
+   *
+   * The declaration decides which items are shown, so an element kept across a
+   * morph — where `connect()` does not run again — still has to follow it instead
+   * of waiting for the next control interaction. The evaluation is the ordinary
+   * one, `change` included: a declaration swap is an evaluation like any other.
+   */
+  matchValueChanged() {
+    if (!this.#connected) return;
+    this.#evaluate();
+  }
   /** Re-derives every item's visibility from the active tokens and syncs groups/empty. */
   apply() {
+    this.#evaluate();
+  }
+  /**
+   * The evaluation itself: every item's visibility from the active tokens, then
+   * the groups and the empty element, then the `change` event.
+   *
+   * @stimeoRenderRoot
+   */
+  #evaluate() {
     const active = this.#activeTokens();
     let visibleCount = 0;
     for (const item of this.itemTargets) {
@@ -10500,14 +10917,37 @@ var LocalTimeController = class extends Controller {
   }
 };
 var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
+var DEFAULT_MIN_COLUMN_WIDTH = 240;
+var DEFAULT_GAP = 16;
+function usableNumber(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
 var MasonryController = class extends Controller {
   static targets = ["item"];
   static values = {
-    minColumnWidth: { type: Number, default: 240 },
-    gap: { type: Number, default: 16 }
+    minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },
+    gap: { type: Number, default: DEFAULT_GAP }
   };
   static events = ["layout"];
-  #layout = new LayoutObserver(() => this.#relayout());
+  /**
+   * The declared numbers after validation, so the layout path never sees a value
+   * it cannot compute with. Both are resolved once per declaration change rather
+   * than on every pass.
+   */
+  #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;
+  #gap = DEFAULT_GAP;
+  /**
+   * Collapses every re-layout trigger of one DOM mutation into a single pass, and
+   * refuses to run before `connect()` or after `disconnect()`.
+   *
+   * The triggers arrive in bursts — a resize stream, a morph that syncs several
+   * attributes, a batch of rows — and each pass measures every item, so folding
+   * them keeps the work proportional to the batch rather than to the events in it.
+   */
+  #reconcile = new MicrotaskCoalescer(() => this.#relayout());
+  /** Items that left the target set and still carry the column hook. */
+  #released = /* @__PURE__ */ new Set();
+  #layout = new LayoutObserver(() => this.#reconcile.schedule());
   #mutationObserver = null;
   /** Last published column count, so `layout` fires only on real changes. */
   #lastColumns = 0;
@@ -10517,20 +10957,49 @@ var MasonryController = class extends Controller {
    * first pass ran before they settled; `load` does not bubble, so this is bound in
    * the capture phase to catch every descendant.
    */
-  #onLoad = () => this.#relayout();
+  #onLoad = () => this.#reconcile.schedule();
+  /** Resolves the declared column width once, falling back when it is unreadable. */
+  minColumnWidthValueChanged() {
+    this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);
+    this.#reconcile.schedule();
+  }
+  /** Resolves the declared gap once, falling back when it is unreadable. */
+  gapValueChanged() {
+    this.#gap = usableNumber(this.gapValue, DEFAULT_GAP);
+    this.#reconcile.schedule();
+  }
+  /** Packs an element that became an item without moving in the DOM. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Queues the column hook of an element that stopped being an item for removal.
+   *
+   * The removal is queued rather than immediate because teardown reports every
+   * target as disconnected: doing it here would strip the whole grid just before
+   * a Turbo snapshot is taken. {@link MicrotaskCoalescer.cancel} drops the queue
+   * with the pass, so only a genuine target change reaches it.
+   */
+  itemTargetDisconnected(item) {
+    this.#released.add(item);
+    this.#reconcile.schedule();
+  }
   /** Observes size/content changes and performs the first layout pass. */
   connect() {
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.#relayout());
+      this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());
       this.#mutationObserver.observe(this.element, { childList: true, subtree: true });
     }
     this.element.addEventListener("load", this.#onLoad, true);
     this.#relayout();
+    this.#reconcile.activate();
   }
   /** Releases both observers and the load listener so nothing fires after detach. */
   disconnect() {
+    this.#reconcile.cancel();
+    this.#released.clear();
     this.#layout.disconnect();
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
@@ -10539,26 +11008,53 @@ var MasonryController = class extends Controller {
   }
   /**
    * Recomputes the column count and assigns every item to the shortest column.
-   * Runs automatically on connect, on resize, on item add/remove, and when a
-   * descendant resource loads (private — there is no public action; the observers
-   * and the capture-phase `load` listener drive it). Items are walked in DOM
-   * order; each lands in the column with the least accumulated height, which
-   * keeps the packing balanced without reordering the DOM.
+   * Runs automatically on connect, on resize, on item add/remove, when a declared
+   * number changes, and when a descendant resource loads (private — there is no
+   * public action; the observers, the target callbacks and the capture-phase
+   * `load` listener drive it). Items are walked in DOM order; each lands in the
+   * column with the least accumulated height, which keeps the packing balanced
+   * without reordering the DOM.
+   *
+   * Every box is measured before anything is written. Interleaving the two would
+   * make a consumer's `data-column` rule invalidate style once per item, and the
+   * next measurement then has to settle layout again — once per item instead of
+   * once per pass. The assignment is independent of the measurement because the
+   * columns are uniform in width, so the order of the two passes does not change
+   * the result.
+   *
+   * @stimeoRenderRoot
    */
   #relayout() {
     const items = this.itemTargets;
     const columns = this.#columnCount();
+    const boxes = items.map((item) => item.getBoundingClientRect().height);
+    let changed = false;
+    if (this.#released.size > 0) {
+      const owned = new Set(items);
+      for (const released of this.#released) {
+        if (owned.has(released)) continue;
+        if (released.hasAttribute("data-column")) {
+          released.removeAttribute("data-column");
+          changed = true;
+        }
+      }
+      this.#released.clear();
+    }
     const heights = new Array(columns).fill(0);
-    for (const item of items) {
+    items.forEach((item, index) => {
       let shortest = 0;
       for (let col = 1; col < columns; col++) {
         if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;
       }
-      item.setAttribute("data-column", String(shortest));
-      heights[shortest] = (heights[shortest] ?? 0) + item.getBoundingClientRect().height + this.gapValue;
-    }
+      const assigned = String(shortest);
+      if (item.getAttribute("data-column") !== assigned) {
+        item.setAttribute("data-column", assigned);
+        changed = true;
+      }
+      heights[shortest] = (heights[shortest] ?? 0) + (boxes[index] ?? 0) + this.#gap;
+    });
     this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));
-    if (columns !== this.#lastColumns) {
+    if (columns !== this.#lastColumns || changed) {
       this.#lastColumns = columns;
       this.dispatch("layout", { detail: { columns } });
     }
@@ -10571,9 +11067,9 @@ var MasonryController = class extends Controller {
    */
   #columnCount() {
     const width = this.element.getBoundingClientRect().width;
-    const denominator = this.minColumnWidthValue + this.gapValue;
+    const denominator = this.#minColumnWidth + this.#gap;
     if (width <= 0 || denominator <= 0) return 1;
-    return Math.max(1, Math.floor((width + this.gapValue) / denominator));
+    return Math.max(1, Math.floor((width + this.#gap) / denominator));
   }
 };
 var MenuController = class extends Controller {
@@ -13611,6 +14107,9 @@ function compilePattern(source) {
 function hasModifier2(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
+function statesDiffer(left, right) {
+  return left.value !== right.value || left.state !== right.state;
+}
 var OtpController = class extends Controller {
   static targets = ["field", "value", "error"];
   static values = {
@@ -13622,8 +14121,8 @@ var OtpController = class extends Controller {
   #pattern = new RegExp(`^${DEFAULT_PATTERN}$`);
   /** Source of {@link #pattern}, reported in `invalid` so consumers can word it. */
   #patternSource = DEFAULT_PATTERN;
-  /** Combined value carried by the last dispatch; keeps a no-op sync silent. */
-  #lastValue = null;
+  /** Public state carried by the last dispatch; keeps a no-op sync silent. */
+  #published = null;
   /** Field whose confirming `input` after `compositionend` is already handled. */
   #confirmedField = null;
   /** True between connect and disconnect, so pre-connect Value changes stay silent. */
@@ -13659,7 +14158,7 @@ var OtpController = class extends Controller {
     this.#beforeCache.activate();
     this.#reconcile.activate();
     this.#adopt();
-    this.#lastValue = this.#sync();
+    this.#sync();
   }
   disconnect() {
     this.#connected = false;
@@ -13851,19 +14350,23 @@ var OtpController = class extends Controller {
     this.#markFilled(field, field.value);
   }
   /**
-   * Absorbs a batch of field additions or removals as one value transition.
+   * Absorbs a batch of field additions or removals as one state transition.
    *
-   * The page, not the user, moved the value here, so it is reported as
+   * The page, not the user, moved the state here, so it is reported as
    * `reconcile`: automation listening for `change` must not read a re-render as
    * an edit, and a passcode that happens to end up full must not fire the
    * `complete` that submits it.
+   *
+   * Completeness moves on its own when the field count changes: dropping a
+   * trailing empty field completes a passcode whose combined value never moved,
+   * and adding one un-completes it. Comparing the whole derived state, not the
+   * string it contains, is what makes those transitions reportable.
    */
   #reconcileFields() {
-    const previous = this.#lastValue;
-    const combined = this.#sync();
-    if (combined === previous) return;
-    this.#lastValue = combined;
-    this.dispatch("reconcile", { detail: { value: combined } });
+    const previous = this.#published;
+    const current = this.#sync();
+    if (previous && !statesDiffer(previous, current)) return;
+    this.dispatch("reconcile", { detail: { value: current.value } });
   }
   /**
    * Validates the text an entry point received and distributes what it accepts.
@@ -13958,23 +14461,29 @@ var OtpController = class extends Controller {
     const fields = this.fieldTargets;
     return fields.length > 0 && fields.every((field) => field.value.length > 0);
   }
-  /** Mirrors the combined value into the form and the root's readable state. */
+  /**
+   * Mirrors the combined value into the form and the root's readable state, and
+   * records what was published so the next pass can compare against it.
+   */
   #sync() {
     const combined = this.#combinedValue();
     if (this.hasValueTarget) {
       this.valueTarget.value = combined;
     }
-    this.#state.write(this.element, this.#stateName(combined));
-    return combined;
+    const state = this.#stateName(combined);
+    this.#state.write(this.element, state);
+    const published = { value: combined, state };
+    this.#published = published;
+    return published;
   }
   #stateName(combined) {
     if (combined.length === 0) return "empty";
     return this.#isComplete() ? "complete" : "partial";
   }
   #syncAndDispatch() {
-    const combined = this.#sync();
-    if (combined === this.#lastValue) return;
-    this.#lastValue = combined;
+    const previous = this.#published;
+    const { value: combined } = this.#sync();
+    if (previous?.value === combined) return;
     this.dispatch("change", { detail: { value: combined } });
     if (this.#isComplete()) {
       this.dispatch("complete", { detail: { value: combined } });
@@ -16215,25 +16724,6 @@ var ProgressController = class extends Controller {
     this.element.removeAttribute(OWNED_VALUE_TEXT2);
   }
 };
-
-// src/utils/interactive_host.ts
-var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
-function isInteractiveHost(element) {
-  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
-  let current = element;
-  while (current) {
-    const raw = current.getAttribute("contenteditable");
-    if (raw !== null) {
-      const value = raw.trim().toLowerCase();
-      if (value === "false") return false;
-      if (value === "" || value === "true" || value === "plaintext-only") return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
-}
-
-// src/controllers/radio_group_controller.ts
 var OBSERVED_ATTRIBUTES4 = [
   "aria-checked",
   "aria-disabled",
@@ -16737,61 +17227,6 @@ var RadioGroupController = class extends Controller {
     return radio.getAttribute("data-value") ?? "";
   }
 };
-
-// src/utils/owned_pointer_session.ts
-var OwnedPointerSession = class {
-  pointerId;
-  #owner;
-  #handlers;
-  #abort = new AbortController();
-  #active = true;
-  constructor(start, owner, handlers) {
-    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);
-    } 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. */
-  end() {
-    if (!this.#active) return;
-    this.#active = false;
-    this.#abort.abort();
-    try {
-      this.#owner.releasePointerCapture?.(this.pointerId);
-    } catch {
-    }
-    this.#handlers.end?.();
-  }
-  #onMove = (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();
-  };
-};
-
-// src/controllers/range_slider_controller.ts
 var START_PROPERTY = "--stimeo--range-slider-start";
 var END_PROPERTY = "--stimeo--range-slider-end";
 var DEFAULT_MIN = 0;
@@ -17641,6 +18076,26 @@ var RelativeTimeController = class extends Controller {
     return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
+var STATELESS_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "submit", "reset", "button", "image"]);
+function restoreField(element) {
+  if (element instanceof HTMLTextAreaElement) {
+    element.value = element.defaultValue;
+    return;
+  }
+  if (element instanceof HTMLSelectElement) {
+    for (const option of element.options) option.selected = option.hasAttribute("selected");
+    return;
+  }
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "checkbox" || element.type === "radio") {
+      element.checked = element.defaultChecked;
+    } else if (element.type === "file") {
+      element.value = "";
+    } else if (!STATELESS_INPUT_TYPES.has(element.type)) {
+      element.value = element.defaultValue;
+    }
+  }
+}
 var ResetBeforeCacheController = class extends Controller {
   static values = {
     scope: { type: String, default: "" },
@@ -17648,8 +18103,32 @@ var ResetBeforeCacheController = class extends Controller {
   };
   static actions = ["reset"];
   static events = ["reset", "request"];
+  /** The `scope` declaration after validation; empty when it cannot be parsed. */
+  #scopeSelector = "";
   /** Runs the reset just before Turbo caches the snapshot. */
   #onBeforeCache = () => this.reset();
+  /**
+   * Validates the scope declaration once, keeping only a selector the engine can
+   * read.
+   *
+   * A selector reads back as an ordinary string, so a malformed one survives
+   * until it is handed to the DOM — and this part runs from a single listener
+   * whose whole job is to keep a cached page from freezing. Falling back to the
+   * default keeps that job running with a visible, findable result instead of
+   * silently taking the sweep down.
+   */
+  scopeValueChanged() {
+    const selector = this.scopeValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#scopeSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#scopeSelector = "";
+  }
   connect() {
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
   }
@@ -17660,6 +18139,10 @@ var ResetBeforeCacheController = class extends Controller {
    * Resets transient UI within scope to its initial state. Asks controllers to
    * close (via `request`) first, then applies the declarative `data-reset-*` cleanup,
    * and finally emits `reset`. Safe to call any number of times (idempotent).
+   *
+   * `dispatchReset` decides only whether the `request` ask goes out; the cleanup
+   * and the closing `reset` run either way. Both the listener and this action
+   * reach the same sweep, so `reset` is emitted for a manual call too.
    */
   reset() {
     const root = this.#scopeRoot();
@@ -17678,9 +18161,7 @@ var ResetBeforeCacheController = class extends Controller {
       if (element instanceof HTMLFormElement) element.reset();
     }
     for (const element of root.querySelectorAll("[data-reset-value]")) {
-      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-        element.value = "";
-      }
+      restoreField(element);
     }
     for (const element of root.querySelectorAll("[data-reset-hidden]")) {
       element.hidden = true;
@@ -17692,30 +18173,38 @@ var ResetBeforeCacheController = class extends Controller {
   }
   /** The scan root: a `scope` descendant when set, else the controller element. */
   #scopeRoot() {
-    if (!this.scopeValue) return this.element;
-    return this.element.querySelector(this.scopeValue) ?? this.element;
+    if (!this.#scopeSelector) return this.element;
+    return this.element.querySelector(this.#scopeSelector) ?? this.element;
   }
 };
+var DEFAULT_MIN2 = 0;
+var DEFAULT_MAX2 = 100;
+var DEFAULT_VALUE = 50;
+var DEFAULT_STEP = 1;
 var ResizableController = class extends Controller {
   static targets = ["primary", "secondary", "separator"];
   static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    value: { type: Number, default: 50 }
+    min: { type: Number, default: DEFAULT_MIN2 },
+    max: { type: Number, default: DEFAULT_MAX2 },
+    step: { type: Number, default: DEFAULT_STEP },
+    value: { type: Number, default: DEFAULT_VALUE }
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** The value held before the current collapse, restored when toggling back. */
-  #valueBeforeCollapse = 50;
+  /** Where the divider sat before the current collapse; `null` when unknown. */
+  #valueBeforeCollapse = null;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
   /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
   #paneTabindex = new TabindexLoan();
   /** Releases the pane cycle listener bound in {@link connect}. */
   #cycleAbort = null;
+  /** Folds the range and position inputs of one morph batch into a single paint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
-    this.#clampAndSync();
+    this.element.removeAttribute("data-dragging");
+    this.#repaint.activate();
+    this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
       signal: this.#cycleAbort.signal
@@ -17727,17 +18216,19 @@ var ResizableController = class extends Controller {
     this.#dragAbort = null;
     this.#cycleAbort?.abort();
     this.#cycleAbort = null;
+    this.#repaint.cancel();
     this.#paneTabindex.returnAll();
+    this.element.removeAttribute("data-dragging");
   }
   /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
   #onCycleKeydown = (event) => {
     if (event.key !== "F6") return;
+    if (event.isComposing) return;
     if (event.defaultPrevented) return;
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
     const panes = [];
     if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
     if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
-    if (panes.length === 0) return;
     const target = event.target;
     const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
     const next = panes[(current + 1) % panes.length];
@@ -17746,12 +18237,21 @@ var ResizableController = class extends Controller {
     this.#paneTabindex.lend(next);
     next.focus();
   };
-  /**
-   * Stimulus lifecycle callback when the valueValue changes.
-   * Keeps CSS fractions and ARIA status completely aligned.
-   */
+  /** Re-renders when application code (or a Turbo morph) changes `value` at runtime. */
   valueValueChanged() {
-    this.#clampAndSync();
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-publishes range and position onto a separator swapped in after connect. */
+  separatorTargetConnected() {
+    this.#repaint.schedule();
   }
   /** Starts active pointer drag tracking and locks capture. */
   onPointerDown(event) {
@@ -17772,44 +18272,44 @@ var ResizableController = class extends Controller {
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
+    const { min, max } = this.#range;
+    const isVertical = this.#isVertical;
     let handled = true;
-    let nextValue = this.valueValue;
+    let nextValue = this.#position;
     switch (event.key) {
       case "ArrowLeft":
         if (isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowRight":
         if (isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowUp":
         if (!isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowDown":
         if (!isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "Home":
-        nextValue = this.minValue;
+        nextValue = min;
         break;
       case "End":
-        nextValue = this.maxValue;
+        nextValue = max;
         break;
       case "Enter":
         event.preventDefault();
@@ -17821,65 +18321,86 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(this.minValue, Math.min(nextValue, this.maxValue));
-      this.#clampAndSync();
+      this.valueValue = Math.max(min, Math.min(nextValue, max));
+      this.#render();
       this.#dispatchChange();
     }
   }
-  /** Double-click or Enter to collapse/restore pane to min/max levels. */
+  /** Double-click or Enter to collapse the primary pane, or put it back. */
   toggle() {
-    const threshold = this.minValue + (this.maxValue - this.minValue) / 2;
-    if (this.valueValue > this.minValue) {
-      this.#valueBeforeCollapse = this.valueValue;
-      this.valueValue = this.minValue;
+    const { min, max } = this.#range;
+    if (this.#position > min) {
+      this.#valueBeforeCollapse = this.#position;
+      this.valueValue = min;
     } else {
-      this.valueValue = this.#valueBeforeCollapse >= threshold ? this.#valueBeforeCollapse : this.maxValue;
+      this.valueValue = this.#valueBeforeCollapse ?? max;
+      this.#valueBeforeCollapse = null;
     }
-    this.#clampAndSync();
+    this.#render();
     this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
-    let fraction = 0.5;
-    if (isVertical) {
-      fraction = (event.clientX - rect.left) / rect.width;
-    } else {
-      fraction = (event.clientY - rect.top) / rect.height;
-    }
-    fraction = Math.max(0, Math.min(fraction, 1));
-    const percent = Math.round(fraction * 100);
-    this.valueValue = Math.max(this.minValue, Math.min(percent, this.maxValue));
-    this.#clampAndSync();
+    const raw = this.#isVertical ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
+    const fraction = Number.isFinite(raw) ? Math.max(0, Math.min(raw, 1)) : 0;
+    const { min, max } = this.#range;
+    this.valueValue = Math.max(min, Math.min(Math.round(fraction * 100), max));
+    this.#render();
   };
   #onPointerUp = (event) => {
-    if (!this.hasSeparatorTarget) return;
-    const separator = this.separatorTarget;
-    separator.releasePointerCapture(event.pointerId);
     this.element.removeAttribute("data-dragging");
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    if (this.hasSeparatorTarget) {
+      this.separatorTarget.releasePointerCapture(event.pointerId);
+    }
     this.#dispatchChange();
   };
-  #clampAndSync() {
-    const clamped = Math.max(this.minValue, Math.min(this.valueValue, this.maxValue));
-    if (this.valueValue !== clamped) {
-      this.valueValue = clamped;
+  /**
+   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
+   * the range assistive tech reads off the separator. The clamped position is
+   * written back to the Value so it, ARIA, CSS, and dispatched events agree.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const { min, max } = this.#range;
+    const position = this.#position;
+    if (this.valueValue !== position) {
+      this.valueValue = position;
     }
-    const fraction = clamped / 100;
-    this.element.style.setProperty("--stimeo--resizable-fraction", String(fraction));
+    this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
-      this.separatorTarget.setAttribute("aria-valuenow", String(clamped));
-      this.separatorTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.separatorTarget.setAttribute("aria-valuemax", String(this.maxValue));
+      this.separatorTarget.setAttribute("aria-valuenow", String(position));
+      this.separatorTarget.setAttribute("aria-valuemin", String(min));
+      this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
   #dispatchChange() {
     const fraction = this.valueValue / 100;
     this.dispatch("change", { detail: { value: this.valueValue, fraction } });
   }
+  /** The declared range after validation; an unreadable bound uses its default. */
+  get #range() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN2;
+    const max = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX2;
+    return { min, max: Math.max(min, max) };
+  }
+  /** The declared position, clamped into the validated range. */
+  get #position() {
+    const { min, max } = this.#range;
+    const value = Number.isFinite(this.valueValue) ? this.valueValue : DEFAULT_VALUE;
+    return Math.max(min, Math.min(value, max));
+  }
+  /** The keyboard increment; a non-positive or unreadable one uses the default. */
+  get #step() {
+    return Number.isFinite(this.stepValue) && this.stepValue > 0 ? this.stepValue : DEFAULT_STEP;
+  }
+  /** Whether the divider runs vertically; a separator that does not say is horizontal. */
+  get #isVertical() {
+    return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
+  }
 };
 var RovingController = class extends Controller {
   static targets = ["item"];
@@ -18973,16 +19494,16 @@ var ScrollspyController = class extends Controller {
     return value.substring(1) || null;
   }
 };
-var DEFAULT_MIN2 = 0;
-var DEFAULT_MAX2 = 100;
+var DEFAULT_MIN3 = 0;
+var DEFAULT_MAX3 = 100;
 var SeparatorController = class extends Controller {
   static values = {
     orientation: { type: String, default: "horizontal" },
     focusable: { type: Boolean, default: false },
-    min: { type: Number, default: DEFAULT_MIN2 },
-    max: { type: Number, default: DEFAULT_MAX2 },
+    min: { type: Number, default: DEFAULT_MIN3 },
+    max: { type: Number, default: DEFAULT_MAX3 },
     step: { type: Number, default: 1 },
-    value: { type: Number, default: DEFAULT_MIN2 }
+    value: { type: Number, default: DEFAULT_MIN3 }
   };
   static actions = ["onKeydown"];
   static events = ["change"];
@@ -19103,8 +19624,8 @@ var SeparatorController = class extends Controller {
   }
   /** Finite, ordered range shared by rendering and keyboard stepping. */
   get #effectiveRange() {
-    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN2;
-    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX2;
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN3;
+    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX3;
     return {
       min,
       max: Math.max(min, candidateMax),